@qasa/qds-ui 0.32.0 → 0.33.0

package/dist/index.d.ts

@@ -3,6 +3,8 @@ 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';
@@ -1060,169 +1062,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: {
+    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" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonSize = keyof typeof SIZE_CLASSES;
+type ButtonVariant = NonNullable<VariantProps$1<typeof buttonVariants>['variant']>;
 interface ButtonOptions {
     /**
      * Sets the size of the button
@@ -1263,7 +1114,6 @@ interface ButtonOptions {
      */
     type?: 'button' | 'submit' | 'reset';
 }
-
 type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
 type ButtonProps = PropsOf<PolymorphicButton>;
 declare const Button: PolymorphicButton;
@@ -1390,7 +1240,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 {
@@ -1552,6 +1402,70 @@ declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLPr
     }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 };
 
+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$3: (theme: Theme) => {
     xs: {
         width: string;