@loke/design-system
Version:
A design system with individually importable components
53 lines (52 loc) • 2.02 kB
text/typescript
import type { cva, VariantProps } from "class-variance-authority";
/**
* Represents the available color shades.
*/
type ColorShade = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950";
/**
* Represents the base colors available in the design system.
*/
type BaseColor = "card" | "primary" | "secondary" | "accent" | "background" | "foreground" | "destructive" | "white" | "sidebar-accent" | "sidebar";
/**
* Represents all available colors, including base colors and their shades.
*/
type Color = BaseColor | `${"neutral"}-${ColorShade}`;
/**
* Represents the available size values.
*/
declare const sizeMap: {
readonly large: 8;
readonly medium: 5;
readonly none: 0;
readonly small: 3;
readonly xlarge: 12;
readonly xsmall: 2;
readonly xxlarge: 24;
readonly xxsmall: 1;
};
declare const numericSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 28, 32];
type Size = keyof typeof sizeMap | (typeof numericSizes)[number];
/**
* Represents a value that can be responsive (i.e., different for each breakpoint).
* @template T The type of the value.
*/
type ResponsiveValue<T> = T | [T, T] | [T, T, T] | [T, T, T, T];
/**
* Makes all properties of T responsive.
*/
type ResponsiveProps<T> = {
[K in keyof T]: ResponsiveValue<T[K]>;
};
/**
* Creates responsive variants based on the given cva variants and props.
* Returns a string that includes all possible responsive class combinations.
*/
declare function createResponsiveVariants<T extends Record<string, unknown>>(variants: ReturnType<typeof cva>, props: ResponsiveProps<T>): string;
/**
* Creates a responsive component based on the given cva variants.
*/
declare function createResponsiveComponent<T extends ReturnType<typeof cva>>(variants: T): {
createResponsive: (props: ResponsiveProps<VariantProps<T>>) => string;
};
export { createResponsiveComponent, createResponsiveVariants };
export type { Color, ColorShade, Size, ResponsiveValue, ResponsiveProps };