@qasa/qds-ui 0.33.0 → 0.35.0

package/dist/index.d.ts

@@ -1,12 +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';
 
 /**
@@ -881,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
@@ -956,8 +954,20 @@ interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends For
  */
 type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
 
+declare const ICON_COLOR_CLASSES: {
+    readonly default: "text-[color:var(--stroke-default)]";
+    readonly strong: "text-[color:var(--stroke-strong)]";
+    readonly subtle: "text-[color:var(--stroke-subtle)]";
+    readonly disabled: "text-[color:var(--stroke-disabled)]";
+    readonly negative: "text-[color:var(--stroke-negative)]";
+    readonly warning: "text-[color:var(--stroke-warning)]";
+    readonly positive: "text-[color:var(--stroke-positive)]";
+    readonly onBrandPrimary: "text-[color:var(--stroke-onBrandPrimary)]";
+    readonly onBrandSecondary: "text-[color:var(--stroke-onBrandSecondary)]";
+    readonly onBrandTertiary: "text-[color:var(--stroke-onBrandTertiary)]";
+};
 type IconSize = 12 | 16 | 20 | 24 | 32;
-type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
+type IconColor = keyof typeof ICON_COLOR_CLASSES | 'currentColor';
 interface IconOptions {
     /**
      * The size of the icon.
@@ -1062,7 +1072,7 @@ 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: {
+declare const SIZE_CLASSES$3: {
     xs: string;
     sm: string;
     md: string;
@@ -1070,9 +1080,9 @@ declare const SIZE_CLASSES: {
     xl: string;
 };
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | null | undefined;
+    variant?: "primary" | "secondary" | "tertiary" | "danger" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type ButtonSize = keyof typeof SIZE_CLASSES;
+type ButtonSize = keyof typeof SIZE_CLASSES$3;
 type ButtonVariant = NonNullable<VariantProps$1<typeof buttonVariants>['variant']>;
 interface ButtonOptions {
     /**
@@ -1393,172 +1403,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>>;
 };
 
-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;
-        height: string;
-    };
-    sm: {
-        width: string;
-        height: string;
-    };
-    md: {
-        width: string;
-        height: 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;
-            };
-        };
-    };
+declare const SIZE_CLASSES$2: {
+    xs: string;
+    sm: string;
+    md: 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;
     /**
@@ -1626,24 +1490,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
@@ -1673,15 +1537,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>;
 }
@@ -1689,6 +1549,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;
@@ -2067,20 +1991,27 @@ interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$2>,
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
-declare const getVariantStyles: (theme: Theme) => {
-    neutral: {
-        background: string;
-        color: string;
-    };
-    error: {
-        background: string;
-        color: string;
-    };
+declare const VARIANT_CLASSES: {
+    readonly neutral: "bg-black text-white";
+    readonly error: "bg-negative text-white";
 };
-type ToastVariant = VariantProps<typeof getVariantStyles>;
+type ToastVariant = keyof typeof VARIANT_CLASSES;
+interface ToastOptions$1 {
+    text: string;
+    variant?: ToastVariant;
+}
+type OmittedProps$1 = 'children';
+interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps$1>, ToastOptions$1 {
+}
+/**
+ * We style a separate div as a child for Radix Toast.Root in order to meet the QDS accessibility requirements & animate it
+ * Radix uses <ol> and <li> elements for Toast elements in combination with role="status", which is not allowed according to a11y standards
+ * @see https://github.com/radix-ui/primitives/issues/1750
+ */
+declare function Toast(props: ToastProps & Toast$1.ToastProps): react_jsx_runtime.JSX.Element;
 
 type Id = number | string;
-interface ToastOptions$1 {
+interface ToastOptions {
     /**
      * Unique identifier for the toast (can be used for removing it prematurely). If a toast with this
      * identifier already exists it will be removed before the new toast is added.
@@ -2088,21 +2019,12 @@ interface ToastOptions$1 {
      */
     id?: Id;
 }
-declare const toast: ((text: string, options?: ToastOptions$1) => Id) & {
-    error: (text: string, options?: ToastOptions$1) => Id;
+declare const toast: ((text: string, options?: ToastOptions) => Id) & {
+    error: (text: string, options?: ToastOptions) => Id;
     remove: (id: Id) => void;
     removeAll: () => void;
 };
 
-interface ToastOptions {
-    text: string;
-    variant?: ToastVariant;
-}
-type OmittedProps$1 = 'children';
-interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps$1>, ToastOptions {
-}
-declare function Toast(props: ToastProps & Toast$1.ToastProps): react_jsx_runtime.JSX.Element;
-
 interface UseBreakpointOptions {
     /**
      * If `true` the initial value will be `base` instead of the current breakpoint.