AutoComplete

a generic type that allows you to autocomplete the string or number

export type StringWithAutoComplete<TOptions extends string> =
  | (string & {})
  | TOptions;

export type NumberWithAutoComplete<TOptions extends number> =
  | (number & {})
  | TOptions;

Installation

pnpm dlx shadcn@latest add https://mhl5.vercel.app/r/AutoComplete.json

Usage

import { AutoComplete } from "@/types/AutoComplete";

const breakpoints = {
  "3xs": 16, // 352px
  "2xs": 24.25, // 388px
  xs: 28, // 448px
  sm: 40, // 640px
  md: 48, // 768px
  lg: 64, // 1024px
  xl: 80, // 1280px
  "2xl": 96, // 1536px
} as const;

type Direction = "max" | "min";

type TailwindcssBreakpointsRemValue =
  (typeof breakpoints)[keyof typeof breakpoints];

type CssQueryString =
  StringWithAutoComplete<`(${Direction}-width: ${TailwindcssBreakpointsRemValue}rem)`>;