@qasa/qds-ui 0.32.0 → 0.34.0

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _emotion_react from '@emotion/react';
 import { EmotionCache, CSSObject } from '@emotion/react';
 import * as react from 'react';
 import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, ReactElement, useLayoutEffect } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps as VariantProps$1 } from 'class-variance-authority';
 import { Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Toast as Toast$1 } from 'radix-ui';
-import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
 
 /**
@@ -879,15 +879,15 @@ type BreakpointsConfig$1<T> = PartialRecord<keyof Theme['breakpoints'], T> & {
 };
 type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
 
-declare const SIZE_MAP: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    '2xl': number;
+declare const SIZE_CLASSES$4: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
-type AvatarSize = keyof typeof SIZE_MAP;
+type AvatarSize = keyof typeof SIZE_CLASSES$4;
 interface AvatarOptions {
     /**
      * Source url of the image to display. If not passed
@@ -1060,169 +1060,18 @@ 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>>;
 
-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$3: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
 };
-
-declare const getSizeStyles$4: (theme: Theme) => {
-    xs: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    lg: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    xl: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-};
-type ButtonSize = VariantProps<typeof getSizeStyles$4>;
-declare const getVariantStyles$2: (theme: Theme) => {
-    primary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    secondary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    tertiary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-};
-type ButtonVariant = VariantProps<typeof getVariantStyles$2>;
-
+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 ButtonVariant = NonNullable<VariantProps$1<typeof buttonVariants>['variant']>;
 interface ButtonOptions {
     /**
      * Sets the size of the button
@@ -1263,7 +1112,6 @@ interface ButtonOptions {
      */
     type?: 'button' | 'submit' | 'reset';
 }
-
 type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
 type ButtonProps = PropsOf<PolymorphicButton>;
 declare const Button: PolymorphicButton;
@@ -1390,7 +1238,7 @@ interface DividerOptions {
 }
 interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
 }
-declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLSpanElement>>;
 
 type PrimitiveContentProps = DropdownMenu$1.DropdownMenuContentProps;
 interface DropdownMenuContentOptions {
@@ -1543,108 +1391,26 @@ type HeadingProps = PropsOf<HeadingComponent>;
  */
 declare const Heading: HeadingComponent;
 
-type HintBoxTitleProps = HTMLQdsProps<'span'>;
+type HintBoxTitleProps = HTMLQdsProps<'p'>;
 type HintBoxProps = HTMLQdsProps<'aside'>;
 declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>> & {
-    Title: _emotion_styled.StyledComponent<{
-        theme?: _emotion_react.Theme;
-        as?: React.ElementType;
-    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+    Title: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 };
 
-declare const getSizeStyles$3: (theme: Theme) => {
-    xs: {
-        width: string;
-        height: string;
-    };
-    sm: {
-        width: string;
-        height: string;
-    };
-    md: {
-        width: string;
-        height: string;
-    };
+declare const SIZE_CLASSES$2: {
+    xs: string;
+    sm: string;
+    md: string;
 };
-declare const getVariantStyles$1: (theme: Theme) => {
-    primary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    secondary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    tertiary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    ghost: {
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    white: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-};
-
-type IconButtonSize = VariantProps<typeof getSizeStyles$3>;
-type IconButtonVariant = VariantProps<typeof getVariantStyles$1>;
+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 IconButtonVariant = NonNullable<VariantProps$1<typeof iconButtonVariants>['variant']>;
 interface IconButtonOptions {
     icon: ElementType<IconProps>;
     /**
      * A visually hidden label read by screen readers.
-     *
      */
     label: string;
     /**
@@ -1712,24 +1478,24 @@ interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, Te
 }
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const getSizeStyles$2: (theme: Theme) => {
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
+declare const SIZE_CLASSES$1: {
+    sm: string;
+    md: string;
 };
-type LabelSize = VariantProps<typeof getSizeStyles$2>;
-type LabelColor = keyof Theme['colors']['text'];
+declare const COLOR_CLASSES: {
+    readonly strong: "text-strong";
+    readonly default: "text-default";
+    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";
+};
+type LabelSize = keyof typeof SIZE_CLASSES$1;
+type LabelColor = keyof typeof COLOR_CLASSES;
 interface LabelOptions {
     /**
      * Size of the label
@@ -1759,15 +1525,11 @@ type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
 type LinkProps = PropsOf<LinkComponent>;
 declare const Link: LinkComponent;
 
-declare const getSizeStyles$1: (theme: Theme) => {
-    sm: {
-        fontSize: string;
-    };
-    md: {
-        fontSize: string;
-    };
+declare const SIZE_CLASSES: {
+    sm: string;
+    md: string;
 };
-type LoadingDotsSize = VariantProps<typeof getSizeStyles$1>;
+type LoadingDotsSize = keyof typeof SIZE_CLASSES;
 interface LoadingDotsOptions {
     size?: ResponsiveProp<LoadingDotsSize>;
 }
@@ -1775,6 +1537,70 @@ 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 getSizeStyles: (theme: Theme) => {
     xs: {
         fontFamily: string;