@qasa/qds-ui 0.36.0 → 0.37.0

package/dist/index.d.ts

@@ -879,15 +879,31 @@ type BreakpointsConfig$1<T> = PartialRecord<keyof Theme['breakpoints'], T> & {
 };
 type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
 
-declare const SIZE_CLASSES$4: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-};
-type AvatarSize = keyof typeof SIZE_CLASSES$4;
+/**
+ * A responsive class map declared via `defineResponsiveClasses`. Carries both
+ * the per-key class strings and the default key used when no responsive value
+ * is provided.
+ *
+ * Construct only via `defineResponsiveClasses`; the build-time safelist scanner
+ * (`scripts/responsive-safelist/responsive-safelist.ts`) detects the literal
+ * call and emits `@source inline(...)` directives so Tailwind compiles the
+ * breakpoint-prefixed variants.
+ */
+interface ResponsiveClassMap<T extends string> {
+    readonly classes: Record<T, string>;
+    readonly default: T;
+}
+/**
+ * Derives the size literal union from a class map.
+ *
+ * @example
+ * const SIZE_CLASSES = defineResponsiveClasses({ sm: 'h-10', md: 'h-12' }, 'md')
+ * type ButtonSize = ResponsiveSize<typeof SIZE_CLASSES>
+ */
+type ResponsiveSize<M> = M extends ResponsiveClassMap<infer T> ? T : never;
+
+declare const SIZE_CLASSES$7: ResponsiveClassMap<"2xl" | "xl" | "lg" | "md" | "sm" | "xs">;
+type AvatarSize = ResponsiveSize<typeof SIZE_CLASSES$7>;
 interface AvatarOptions {
     /**
      * Source url of the image to display. If not passed
@@ -1073,17 +1089,11 @@ declare const UserIcon: react.ForwardRefExoticComponent<IconProps & react.RefAtt
 declare const XCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const XIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 
-declare const SIZE_CLASSES$3: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
+declare const SIZE_CLASSES$6: ResponsiveClassMap<"xl" | "lg" | "md" | "sm" | "xs">;
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "danger" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type ButtonSize = keyof typeof SIZE_CLASSES$3;
+type ButtonSize = ResponsiveSize<typeof SIZE_CLASSES$6>;
 type ButtonVariant = NonNullable<VariantProps$1<typeof buttonVariants>['variant']>;
 interface ButtonOptions {
     /**
@@ -1129,9 +1139,22 @@ type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
 type ButtonProps = PropsOf<PolymorphicButton>;
 declare const Button: PolymorphicButton;
 
-type DisplaySize = keyof Theme['typography']['display'];
-type DisplayTextAlign = 'left' | 'center' | 'right';
-type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
+declare const SIZE_CLASSES$5: ResponsiveClassMap<"2xl" | "3xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs">;
+declare const TEXT_ALIGN_CLASSES$2: {
+    readonly left: "text-left";
+    readonly center: "text-center";
+    readonly right: "text-right";
+};
+declare const TEXT_WRAP_CLASSES: {
+    readonly pretty: "text-pretty";
+    readonly balance: "text-balance";
+    readonly wrap: "text-wrap";
+    readonly nowrap: "text-nowrap";
+    readonly stable: "[text-wrap:stable]";
+};
+type DisplaySize = ResponsiveSize<typeof SIZE_CLASSES$5>;
+type DisplayTextAlign = keyof typeof TEXT_ALIGN_CLASSES$2;
+type DisplayTextWrap = keyof typeof TEXT_WRAP_CLASSES;
 interface DisplayTextOptions {
     /**
      * Sets the visual size of the display text.
@@ -1369,8 +1392,27 @@ declare const DropdownMenu: typeof DropdownMenuRoot & {
     Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 };
 
-type HeadingSize = keyof Theme['typography']['title'];
-type HeadingColor = keyof Theme['colors']['text'];
+declare const SIZE_CLASSES$4: ResponsiveClassMap<"lg" | "md" | "sm" | "xs" | "2xs" | "3xs">;
+declare const COLOR_CLASSES$2: {
+    readonly default: "text-default";
+    readonly strong: "text-strong";
+    readonly subtle: "text-subtle";
+    readonly disabled: "text-disabled";
+    readonly negative: "text-negative";
+    readonly warning: "text-warning";
+    readonly positive: "text-positive";
+    readonly onBrandPrimary: "text-onBrandPrimary";
+    readonly onBrandSecondary: "text-onBrandSecondary";
+    readonly onBrandTertiary: "text-onBrandTertiary";
+};
+declare const TEXT_ALIGN_CLASSES$1: {
+    readonly left: "text-left";
+    readonly center: "text-center";
+    readonly right: "text-right";
+};
+type HeadingSize = ResponsiveSize<typeof SIZE_CLASSES$4>;
+type HeadingColor = keyof typeof COLOR_CLASSES$2;
+type HeadingTextAlign = keyof typeof TEXT_ALIGN_CLASSES$1;
 interface HeadingOptions {
     /**
      * Sets the visual size of the heading.
@@ -1392,7 +1434,7 @@ interface HeadingOptions {
      * Alignment of the heading
      * @default 'left'
      */
-    textAlign?: 'left' | 'center' | 'right';
+    textAlign?: HeadingTextAlign;
 }
 type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
 /**
@@ -1410,15 +1452,11 @@ declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLPr
     Title: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 };
 
-declare const SIZE_CLASSES$2: {
-    xs: string;
-    sm: string;
-    md: string;
-};
+declare const SIZE_CLASSES$3: ResponsiveClassMap<"md" | "sm" | "xs">;
 declare const iconButtonVariants: (props?: ({
     variant?: "white" | "primary" | "secondary" | "tertiary" | "danger" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type IconButtonSize = keyof typeof SIZE_CLASSES$2;
+type IconButtonSize = ResponsiveSize<typeof SIZE_CLASSES$3>;
 type IconButtonVariant = NonNullable<VariantProps$1<typeof iconButtonVariants>['variant']>;
 interface IconButtonOptions {
     icon: ElementType<IconProps>;
@@ -1491,11 +1529,8 @@ interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, Te
 }
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const SIZE_CLASSES$1: {
-    sm: string;
-    md: string;
-};
-declare const COLOR_CLASSES: {
+declare const SIZE_CLASSES$2: ResponsiveClassMap<"md" | "sm">;
+declare const COLOR_CLASSES$1: {
     readonly strong: "text-strong";
     readonly default: "text-default";
     readonly subtle: "text-subtle";
@@ -1507,8 +1542,8 @@ declare const COLOR_CLASSES: {
     readonly onBrandSecondary: "text-onBrandSecondary";
     readonly onBrandTertiary: "text-onBrandTertiary";
 };
-type LabelSize = keyof typeof SIZE_CLASSES$1;
-type LabelColor = keyof typeof COLOR_CLASSES;
+type LabelSize = ResponsiveSize<typeof SIZE_CLASSES$2>;
+type LabelColor = keyof typeof COLOR_CLASSES$1;
 interface LabelOptions {
     /**
      * Size of the label
@@ -1538,11 +1573,8 @@ type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
 type LinkProps = PropsOf<LinkComponent>;
 declare const Link: LinkComponent;
 
-declare const SIZE_CLASSES: {
-    sm: string;
-    md: string;
-};
-type LoadingDotsSize = keyof typeof SIZE_CLASSES;
+declare const SIZE_CLASSES$1: ResponsiveClassMap<"md" | "sm">;
+type LoadingDotsSize = ResponsiveSize<typeof SIZE_CLASSES$1>;
 interface LoadingDotsOptions {
     size?: ResponsiveProp<LoadingDotsSize>;
 }
@@ -1550,109 +1582,27 @@ interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
 }
 declare const LoadingDots: react.ForwardRefExoticComponent<LoadingDotsProps & react.RefAttributes<HTMLSpanElement>>;
 
-type NamedStyles = Record<string, CSSObject>;
-type StyleInterpolation<T> = (theme: Theme) => T;
-/**
- * Creates a collection of named style rules.
- */
-declare function createStyleVariants<T extends NamedStyles>(styles: StyleInterpolation<T>): (theme: Theme) => T;
-/**
- * Create a style object. Useful for creating styles that depend on the theme.
- */
-declare function createStyle<T extends CSSObject>(styles: StyleInterpolation<T>): (theme: Theme) => T;
-type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
-/**
- * Converts css `px` unit to `rem`.
- * Assumes the root font size is 16px.
- */
-declare const pxToRem: (px: number) => string;
-
-declare const getFormFieldBaseStyles: (theme: Theme) => {
-    '&::placeholder': {
-        color: string;
-    };
-    '&:hover': {
-        borderColor: string;
-    };
-    '&:focus': {
-        outline: number;
-        borderColor: string;
-        boxShadow: `0 0 0 1px ${string}`;
-    };
-    '&[aria-invalid="true"]': {
-        borderColor: string;
-        '&:focus': {
-            boxShadow: `0 0 0 1px ${string}`;
-        };
-    };
-    '&[disabled], &:disabled, &[data-disabled]': {
-        opacity: number;
-        borderColor: string;
-    };
-    transitionProperty: "opacity, border-color, box-shadow";
-    transitionDuration: "120ms";
-    transitionTimingFunction: "ease";
-    fontFamily: string;
-    fontWeight: string;
-    fontSize: string;
-    lineHeight: string;
-    letterSpacing: string;
-    width: string;
-    minWidth: number;
-    appearance: "none";
-    paddingLeft: string;
-    paddingRight: string;
-    border: string;
-    borderRadius: string;
-    backgroundColor: string;
-    color: string;
-    WebkitTouchCallout: "none";
-    WebkitTapHighlightColor: "transparent";
-    '&::-webkit-date-and-time-value': {
-        textAlign: "left";
-    };
-    alignItems: "center";
+declare const SIZE_CLASSES: ResponsiveClassMap<"xl" | "lg" | "md" | "sm" | "xs">;
+declare const COLOR_CLASSES: {
+    readonly default: "text-default";
+    readonly strong: "text-strong";
+    readonly subtle: "text-subtle";
+    readonly disabled: "text-disabled";
+    readonly negative: "text-negative";
+    readonly warning: "text-warning";
+    readonly positive: "text-positive";
+    readonly onBrandPrimary: "text-onBrandPrimary";
+    readonly onBrandSecondary: "text-onBrandSecondary";
+    readonly onBrandTertiary: "text-onBrandTertiary";
 };
-
-declare const getSizeStyles: (theme: Theme) => {
-    xs: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    lg: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    xl: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
+declare const TEXT_ALIGN_CLASSES: {
+    readonly left: "text-left";
+    readonly center: "text-center";
+    readonly right: "text-right";
 };
-type ParagraphSize = VariantProps<typeof getSizeStyles>;
-type ParagraphColor = keyof Theme['colors']['text'];
+type ParagraphSize = ResponsiveSize<typeof SIZE_CLASSES>;
+type ParagraphColor = keyof typeof COLOR_CLASSES;
+type ParagraphTextAlign = keyof typeof TEXT_ALIGN_CLASSES;
 interface ParagraphOptions {
     /**
      * Sets the visual size of the text
@@ -1672,7 +1622,7 @@ interface ParagraphOptions {
      * Alignment of the paragraph
      * @default 'left'
      */
-    textAlign?: 'left' | 'center' | 'right';
+    textAlign?: ParagraphTextAlign;
 }
 type ParagraphComponent = ForwardRefComponent<'p', ParagraphOptions>;
 /**
@@ -1713,7 +1663,6 @@ interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$6>,
 declare const SelectBase: react.ForwardRefExoticComponent<SelectBaseProps & react.RefAttributes<HTMLSelectElement>>;
 
 type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
-type MinRowsProp = number;
 interface TextareaBaseOptions {
     /**
      * If `true`, the textarea will be invalid
@@ -1739,7 +1688,7 @@ interface TextareaBaseOptions {
      *
      * @default 3
      */
-    minRows?: MinRowsProp;
+    minRows?: number;
 }
 type OmittedProps$5 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
 interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$5>, TextareaBaseOptions {
@@ -1870,7 +1819,9 @@ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAtt
     Option: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLOptionElement>>;
 };
 
-type Spacing = keyof Theme['spacing'];
+declare const X_SIZE_CLASSES: ResponsiveClassMap<"4x" | "0x" | "1x" | "2x" | "3x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
+declare const Y_SIZE_CLASSES: ResponsiveClassMap<"4x" | "0x" | "1x" | "2x" | "3x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
+type Spacing = ResponsiveSize<typeof X_SIZE_CLASSES> & ResponsiveSize<typeof Y_SIZE_CLASSES>;
 interface SpacerOptions {
     axis?: 'x' | 'y';
     size: ResponsiveProp<Spacing>;
@@ -1885,12 +1836,20 @@ interface SpacerProps extends HTMLQdsProps<'span'>, SpacerOptions {
  */
 declare const Spacer: react.ForwardRefExoticComponent<SpacerProps & react.RefAttributes<HTMLSpanElement>>;
 
-type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-
-type GapProp = keyof Theme['spacing'];
+declare const DIRECTION_CLASSES: ResponsiveClassMap<"row" | "column" | "column-reverse" | "row-reverse">;
+declare const JUSTIFY_CONTENT_CLASSES: ResponsiveClassMap<"center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly">;
+declare const ALIGN_ITEMS_CLASSES: ResponsiveClassMap<"center" | "flex-end" | "flex-start" | "baseline" | "stretch">;
+declare const GAP_CLASSES: ResponsiveClassMap<"4x" | "0x" | "1x" | "2x" | "3x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
+declare const WRAP_CLASSES: {
+    readonly wrap: "flex-wrap";
+    readonly nowrap: "flex-nowrap";
+    readonly 'wrap-reverse': "flex-wrap-reverse";
+};
+type FlexDirection = ResponsiveSize<typeof DIRECTION_CLASSES>;
+type JustifyContent = ResponsiveSize<typeof JUSTIFY_CONTENT_CLASSES>;
+type AlignItems = ResponsiveSize<typeof ALIGN_ITEMS_CLASSES>;
+type GapProp = ResponsiveSize<typeof GAP_CLASSES>;
+type FlexWrap = keyof typeof WRAP_CLASSES;
 interface StackOptions {
     /**
      * The direction of the stack.
@@ -2026,6 +1985,80 @@ declare const toast: ((text: string, options?: ToastOptions) => Id) & {
     removeAll: () => void;
 };
 
+type NamedStyles = Record<string, CSSObject>;
+type StyleInterpolation<T> = (theme: Theme) => T;
+/**
+ * @deprecated Tied to the Emotion theme. Will be removed when Emotion is dropped.
+ * Compose styles directly with Tailwind classes.
+ */
+declare function createStyleVariants<T extends NamedStyles>(styles: StyleInterpolation<T>): (theme: Theme) => T;
+/**
+ * @deprecated Tied to the Emotion theme. Will be removed when Emotion is dropped.
+ * Compose styles directly with Tailwind classes.
+ */
+declare function createStyle<T extends CSSObject>(styles: StyleInterpolation<T>): (theme: Theme) => T;
+/**
+ * @deprecated Tied to the Emotion theme. Will be removed when Emotion is dropped.
+ */
+type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
+/**
+ * @deprecated Will be removed when Emotion is dropped.
+ * Use Tailwind spacing utilities instead, eg. `p-4` for 16px padding.
+ * If you need a raw value, reference the CSS variable directly: `var(--spacing-4)`.
+ */
+declare const pxToRem: (px: number) => string;
+
+/**
+ * @deprecated Emotion-based form field base styles. Will be removed when Emotion is dropped.
+ * Use the form primitives (`input-base`, `textarea-base`, `select-base`) or compose Tailwind classes directly.
+ */
+declare const getFormFieldBaseStyles: (theme: Theme) => {
+    '&::placeholder': {
+        color: string;
+    };
+    '&:hover': {
+        borderColor: string;
+    };
+    '&:focus': {
+        outline: number;
+        borderColor: string;
+        boxShadow: `0 0 0 1px ${string}`;
+    };
+    '&[aria-invalid="true"]': {
+        borderColor: string;
+        '&:focus': {
+            boxShadow: `0 0 0 1px ${string}`;
+        };
+    };
+    '&[disabled], &:disabled, &[data-disabled]': {
+        opacity: number;
+        borderColor: string;
+    };
+    transitionProperty: "opacity, border-color, box-shadow";
+    transitionDuration: "120ms";
+    transitionTimingFunction: "ease";
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    width: string;
+    minWidth: number;
+    appearance: "none";
+    paddingLeft: string;
+    paddingRight: string;
+    border: string;
+    borderRadius: string;
+    backgroundColor: string;
+    color: string;
+    WebkitTouchCallout: "none";
+    WebkitTapHighlightColor: "transparent";
+    '&::-webkit-date-and-time-value': {
+        textAlign: "left";
+    };
+    alignItems: "center";
+};
+
 interface UseBreakpointOptions {
     /**
      * If `true` the initial value will be `base` instead of the current breakpoint.
@@ -2037,6 +2070,11 @@ interface UseBreakpointOptions {
 }
 /**
  * Hook for getting the current breakpoint.
+ *
+ * @deprecated Prefer Tailwind responsive classes (`md:hidden`, `hidden md:block`, etc.) for
+ * styling and conditional rendering. For JS logic that genuinely needs a breakpoint read
+ * (scroll lock, keydown gates, etc.), use a media-query hook such as `useMediaQuery` from
+ * `usehooks-ts`.
  */
 declare function useBreakpoint(params?: UseBreakpointOptions): {
     currentBreakpoint: "2xl" | "base" | "xl" | "lg" | "md" | "sm";
@@ -2050,6 +2088,11 @@ type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
 /**
  * Hook for getting a value based on the current breakpoint.
  *
+ * @deprecated Prefer Tailwind responsive classes (`md:hidden`, `hidden md:block`, etc.) for
+ * styling and conditional rendering. For JS logic that genuinely needs a breakpoint read
+ * (scroll lock, keydown gates, etc.), use a media-query hook such as `useMediaQuery` from
+ * `usehooks-ts`.
+ *
  * @example
  * const width = useBreakpointValue({ base: '150px', md: '250px' })
  */