diff --git a/packages/utils/internal-utils/src/index.ts b/packages/utils/internal-utils/src/index.ts index ac2e0ed01..53fe9f10d 100644 --- a/packages/utils/internal-utils/src/index.ts +++ b/packages/utils/internal-utils/src/index.ts @@ -1,29 +1,3 @@ -/** - * A utility function that serves as a workaround for Tailwind CSS IntelliSense issues - * in large objects or when regex breaks in VSCode. - * - * @example - * - * // before - * const styles: cva(['flex bg-primary', 'cursor-pointer'], { - * variants: { - * size: { - * small: "h-sz-24", - * medium: "h-sz-48" - * } - * } - * }) - * - * // after - * const styles = cva(tw(['flex bg-primary', 'cursor-pointer']), { - * variants: { - * size: { - * small: tw("h-sz-24"), - * medium: tw("h-sz-48"), - * } - * } - * }) - */ -export function tw(v: T) { - return v -} +export { makeDesigns, makeIntents, makeShapes, makeSizes } from './variants' +export * as VariantTypes from './variants/types' +export * as variantConstants from './variants/constants' diff --git a/packages/utils/internal-utils/src/variants/constants.ts b/packages/utils/internal-utils/src/variants/constants.ts new file mode 100644 index 000000000..a88124b40 --- /dev/null +++ b/packages/utils/internal-utils/src/variants/constants.ts @@ -0,0 +1,19 @@ +const sizes = ['sm', 'md', 'lg'] as const + +const intents = [ + 'primary', + 'secondary', + 'success', + 'error', + 'info', + 'alert', + 'danger', + 'neutral', + 'surface', +] as const + +const designs = ['filled', 'outlined', 'tinted', 'ghost', 'contrast'] as const + +const shapes = ['rounded', 'square', 'pill'] as const + +export { sizes, intents, designs, shapes } diff --git a/packages/utils/internal-utils/src/variants/index.ts b/packages/utils/internal-utils/src/variants/index.ts new file mode 100644 index 000000000..1378944d8 --- /dev/null +++ b/packages/utils/internal-utils/src/variants/index.ts @@ -0,0 +1,45 @@ +import { + Design, + DesignLookup, + Intent, + IntentLookup, + Picks, + Shape, + ShapeLookup, + Size, + SizeLookup, +} from './types' + +function makeSizes

( + sizes: P extends [] ? SizeLookup : Picks +): { size: P extends [] ? SizeLookup : Picks } { + return { + size: sizes, + } +} + +function makeIntents

( + intents: P extends [] ? IntentLookup : Picks +): { intent: P extends [] ? IntentLookup : Picks } { + return { + intent: intents, + } +} + +function makeDesigns

( + designs: P extends [] ? DesignLookup : Picks +): { design: P extends [] ? DesignLookup : Picks } { + return { + design: designs, + } +} + +function makeShapes

( + shapes: P extends [] ? ShapeLookup : Picks +): { shape: P extends [] ? ShapeLookup : Picks } { + return { + shape: shapes, + } +} + +export { makeSizes, makeIntents, makeDesigns, makeShapes } diff --git a/packages/utils/internal-utils/src/variants/types.ts b/packages/utils/internal-utils/src/variants/types.ts new file mode 100644 index 000000000..675172d34 --- /dev/null +++ b/packages/utils/internal-utils/src/variants/types.ts @@ -0,0 +1,37 @@ +import { designs, intents, shapes, sizes } from './constants' + +/* eslint-disable-next-line @typescript-eslint/ban-types */ +type Picks = Entries extends [ + infer Entry, + ...infer Rest +] + ? Rest extends (keyof T)[] + ? Entry extends keyof T + ? Picks> + : Acc + : Acc + : Acc + +type Size = (typeof sizes)[number] +type SizeLookup = Record + +type Intent = (typeof intents)[number] +type IntentLookup = Record + +type Design = (typeof designs)[number] +type DesignLookup = Record + +type Shape = (typeof shapes)[number] +type ShapeLookup = Record + +export type { + Size, + SizeLookup, + Intent, + IntentLookup, + Design, + DesignLookup, + Shape, + ShapeLookup, + Picks, +}