@qasa/qds-ui 0.10.0-next.1 → 0.10.0-next.11

package/dist/index.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, useLayoutEffect } from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, ReactElement, useLayoutEffect } from 'react';
 import { Options } from '@emotion/cache';
 import * as _emotion_react from '@emotion/react';
 import { CSSObject } from '@emotion/react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
 import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as RadixSwitch from '@radix-ui/react-switch';
 
 declare const theme: {
     mediaQueries: {
@@ -922,8 +925,8 @@ interface IconOptions {
      */
     color?: IconColor;
 }
-declare type OmittedProps$9 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
-interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$9>, IconOptions {
+declare type OmittedProps$8 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
+interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$8>, IconOptions {
 }
 
 interface CreateIconOptions {
@@ -1443,7 +1446,7 @@ declare const getFormFieldBaseStyles: (theme: {
         borderColor: string;
         boxShadow: `0 0 0 1px ${string}`;
     };
-    '&[aria-invalid=true]': {
+    '&[aria-invalid="true"]': {
         borderColor: string;
         '&:focus': {
             boxShadow: `0 0 0 1px ${string}`;
@@ -1478,7 +1481,7 @@ declare const getFormFieldBaseStyles: (theme: {
     alignItems: "center";
 };
 
-declare const getSizeStyles$5: (theme: {
+declare const getSizeStyles$4: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
         readonly mdUp: "@media(min-width: 768px)";
@@ -1928,7 +1931,7 @@ declare const getSizeStyles$5: (theme: {
         paddingRight: string;
     };
 };
-declare type ButtonSize = VariantProps<typeof getSizeStyles$5>;
+declare type ButtonSize = VariantProps<typeof getSizeStyles$4>;
 declare const getVariantStyles$1: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -2349,535 +2352,303 @@ declare const getVariantStyles$1: (theme: {
             '@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;
-            };
-        };
-    };
-};
-declare type ButtonVariant = VariantProps<typeof getVariantStyles$1>;
-
-interface ButtonOptions {
-    /**
-     * Sets the size of the button
-     * @default 'md'
-     */
-    size?: ButtonSize;
-    /**
-     * Sets the style variant of the button
-     * @default 'secondary'
-     */
-    variant?: ButtonVariant;
-    /**
-     * If `true` the button will fill its container
-     * @default false
-     */
-    isFullWidth?: boolean;
-    /**
-     * If `true` the button will show a spinner
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * If `true` the button will be disabled
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Icon to display before the button label
-     */
-    iconLeft?: ElementType<IconProps>;
-    /**
-     * Icon to display after the button label
-     */
-    iconRight?: ElementType<IconProps>;
-    /**
-     * The HTML `type` attribute
-     * @default 'button'
-     */
-    type?: 'button' | 'submit' | 'reset';
-}
-
-declare type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
-declare type ButtonProps = PropsOf<PolymorphicButton>;
-declare const Button: PolymorphicButton;
-
-interface DividerOptions {
-    /**
-     * The orientation of the divider.
-     *
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-}
-interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
-}
-declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
-
-declare const getSizeStyles$4: (theme: {
-    mediaQueries: {
-        readonly smUp: "@media(min-width: 480px)";
-        readonly mdUp: "@media(min-width: 768px)";
-        readonly lgUp: "@media(min-width: 1024px)";
-        readonly xlUp: "@media(min-width: 1280px)";
-        readonly '2xlUp': "@media(min-width: 1536px)";
-    };
-    spacing: {
-        '0x': string;
-        '1x': string;
-        '2x': string;
-        '3x': string;
-        '4x': string;
-        '5x': string;
-        '6x': string;
-        '8x': string;
-        '12x': string;
-        '16x': string;
-        '20x': string;
-        '24x': string;
-    };
-    breakpoints: {
-        readonly base: 0;
-        readonly sm: 480;
-        readonly md: 768;
-        readonly lg: 1024;
-        readonly xl: 1280;
-        readonly '2xl': 1536;
-    };
-    zIndices: {
-        hide: number;
-        auto: string;
-        base: number;
-        docked: number;
-        dropdown: number;
-        sticky: number;
-        banner: number;
-        overlay: number;
-        modal: number;
-        popover: number;
-        skipLink: number;
-        toast: number;
-        tooltip: number;
-    };
-    colors: {
-        core: {
-            black: string;
-            white: string;
-            gray90: string;
-            gray80: string;
-            gray70: string;
-            gray60: string;
-            gray50: string;
-            gray40: string;
-            gray30: string;
-            gray20: string;
-            gray10: string;
-            uiPink: string;
-            uiPinkDark: string;
-            uiPinkLight: string;
-            brown: string;
-            brownDark: string;
-            brownLight: string;
-            offWhite: string;
-            offWhiteDark: string;
-            offWhiteLight: string;
-            softPink: string;
-            warmYellow: string;
-            softYellow: string;
-            red10: string;
-            red20: string;
-            red30: string;
-            red40: string;
-            red50: string;
-            red60: string;
-            red70: string;
-            red80: string;
-            red90: string;
-            green90: string;
-            green80: string;
-            green70: string;
-            green60: string;
-            green50: string;
-            green40: string;
-            green30: string;
-            green20: string;
-            green10: string;
-            blue90: string;
-            blue80: string;
-            blue70: string;
-            blue60: string;
-            blue50: string;
-            blue40: string;
-            blue30: string;
-            blue20: string;
-            blue10: string;
-            yellow90: string;
-            yellow80: string;
-            yellow70: string;
-            yellow60: string;
-            yellow50: string;
-            yellow40: string;
-            yellow30: string;
-            yellow20: string;
-            yellow10: string;
-            blackAlpha20: string;
-        };
-        bg: {
-            default: string;
-            brandPrimary: string;
-            brandPrimaryHover: string;
-            brandPrimaryActive: string;
-            brandSecondary: string;
-            brandSecondaryHover: string;
-            brandSecondaryActive: string;
-            brandTertiary: string;
-            brandTertiaryHover: string;
-            brandTertiaryActive: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            inset: string;
-            backdrop: string;
-        };
-        text: {
-            strong: string;
-            default: string;
-            subtle: string;
-            disabled: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            onBrandPrimary: string;
-            onBrandSecondary: string;
-            onBrandTertiary: string;
-        };
-        icon: {
-            default: string;
-            strong: string;
-            subtle: string;
-            disabled: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            onBrandPrimary: string;
-            onBrandSecondary: string;
-            onBrandTertiary: string;
-        };
-        border: {
-            default: string;
-            defaultHover: string;
-            defaultSelected: string;
-            strong: string;
-            subtle: string;
-            negative: string;
-            warning: string;
-            positive: string;
-        };
-    };
-    sizes: {
-        112: string;
-        128: string;
-        144: string;
-        160: string;
-        176: string;
-        192: string;
-        224: string;
-        256: string;
-        288: string;
-        320: string;
-        384: string;
-        448: string;
-        512: string;
-        576: string;
-        672: string;
-        768: string;
-        896: string;
-        1024: string;
-        '0x': string;
-        '1x': string;
-        '2x': string;
-        '3x': string;
-        '4x': string;
-        '5x': string;
-        '6x': string;
-        '8x': string;
-        '12x': string;
-        '16x': string;
-        '20x': string;
-        '24x': string;
-    };
-    radii: {
-        none: string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    shadows: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    typography: {
-        display: {
-            '3xl': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            '2xl': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            xl: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-        };
-        title: {
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            '2xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            '3xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        body: {
-            xl: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        label: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        button: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        caption: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
+                };
             };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
+            ':active': {
+                background: string;
             };
         };
     };
-}) => {
-    lg: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    xs: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    '2xs': {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    '3xs': {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
+    tertiary: {
+        background: string;
+        color: string;
+        ":not([disabled])": {
+            '@media(hover: hover)': {
+                ':hover': {
+                    background: string;
+                };
+            };
+            ':active': {
+                background: string;
+            };
+        };
     };
 };
-declare type HeadingSize = VariantProps<typeof getSizeStyles$4>;
+declare type ButtonVariant = VariantProps<typeof getVariantStyles$1>;
+
+interface ButtonOptions {
+    /**
+     * Sets the size of the button
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Sets the style variant of the button
+     * @default 'secondary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * If `true` the button will fill its container
+     * @default false
+     */
+    isFullWidth?: boolean;
+    /**
+     * If `true` the button will show a spinner
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * If `true` the button will be disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Icon to display before the button label
+     */
+    iconLeft?: ElementType<IconProps>;
+    /**
+     * Icon to display after the button label
+     */
+    iconRight?: ElementType<IconProps>;
+    /**
+     * The HTML `type` attribute
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+}
+
+declare type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
+declare type ButtonProps = PropsOf<PolymorphicButton>;
+declare const Button: PolymorphicButton;
+
+declare type DisplaySize = keyof Theme['typography']['display'];
+declare type DisplayTextAlign = 'left' | 'center' | 'right';
+declare type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
+interface DisplayTextOptions {
+    /**
+     * Sets the visual size of the display text.
+     * To override the rendered tag, use the `as` prop.
+     *
+     * @default 'md'
+     */
+    size?: DisplaySize;
+    /**
+     * Sets the text alignment
+     * @default 'left'
+     */
+    textAlign?: DisplayTextAlign;
+    /**
+     * Sets the text wrapping
+     * @default 'pretty'
+     * Read more on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
+     */
+    textWrap?: DisplayTextWrap;
+}
+declare type DisplayTextComponent = ForwardRefComponent<'h2', DisplayTextOptions>;
+declare type DisplayTextProps = PropsOf<DisplayTextComponent>;
+declare const DisplayText: DisplayTextComponent;
+
+interface CheckboxOptions {
+    /**
+     * The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
+     *
+     * @example
+     * ```jsx
+     * <Checkbox label="I agree to the terms and conditions" />
+     * ```
+     *
+     * @example
+     * ```jsx
+     * <Checkbox
+     *   label={
+     *    <>
+     *      I agree to <Link href="/terms">the terms and conditions</Link>
+     *    </>
+     *  }
+     * />
+     * ```
+     */
+    label: string | ReactElement<unknown>;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    isChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * If `true` the checkbox will render in its invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true` it prevents the user from interacting with the checkbox.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true` the user must check the checkbox before the owning form can be submitted.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * The value given as data when submitted with a `name`.
+     */
+    value?: string;
+}
+declare type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & react.RefAttributes<HTMLButtonElement>>;
+
+interface DividerOptions {
+    /**
+     * The orientation of the divider.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
+}
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+declare type PrimitiveContentProps = DropdownPrimitive.MenuContentProps;
+interface DropdownMenuContentOptions {
+    /**
+     * Event handler called when focus moves to the trigger after closing.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onCloseAutofocus?: PrimitiveContentProps['onCloseAutoFocus'];
+    /**
+     * Event handler called when the escape key is down.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onEscapeKeyDown?: PrimitiveContentProps['onEscapeKeyDown'];
+    /**
+     * Event handler called when a pointer event occurs outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onPointerDownOutside?: PrimitiveContentProps['onPointerDownOutside'];
+    /**
+     * Event handler called when focus moves outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onFocusOutside?: PrimitiveContentProps['onFocusOutside'];
+    /**
+     * Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onInteractOutside?: PrimitiveContentProps['onInteractOutside'];
+    /**
+     * The preferred side of the trigger to render against when open.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     *
+     * @default "bottom"
+     */
+    side?: PrimitiveContentProps['side'];
+    /**
+     * The distance in pixels from the trigger.
+     *
+     * @default 8
+     */
+    sideOffset?: PrimitiveContentProps['sideOffset'];
+    /**
+     * The preferred alignment against the trigger. May change when collisions occur.
+     *
+     * @default "center"
+     */
+    align?: PrimitiveContentProps['align'];
+    /**
+     * The element used as the collision boundary.
+     * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+     *
+     * @default []
+     */
+    collisionBoundary?: PrimitiveContentProps['collisionBoundary'];
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     *
+     * @default false
+     */
+    hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
+}
+interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
+}
+
+declare type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
+
+interface DropdownMenuItemOptions {
+    /**
+     * If `true`, the item will be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Event handler called when the user selects an item (via mouse or keyboard).
+     * Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
+     */
+    onSelect?: (event: Event) => void;
+    /**
+     * Optional text used for typeahead purposes.
+     * By default the typeahead behavior will use the `.textContent` of the item.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+    /**
+     * Optional icon to display on the left side of the item content.
+     */
+    icon?: ElementType<IconProps>;
+}
+interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
+}
+
+declare type DropdownTriggerComponent = ForwardRefComponent<'button'>;
+declare type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
+
+interface DropdownMenuRootProps {
+    children: ReactNode;
+    /**
+     * If `true` the dropdown menu will be open
+     */
+    isOpen?: boolean;
+    /**
+     * The open state of the submenu when it is initially rendered.
+     * Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback invoked open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+declare function DropdownMenuRoot(props: DropdownMenuRootProps): JSX.Element;
+declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Trigger: ForwardRefComponent<"button", {}>;
+    Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+    Divider: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
+};
+
+declare type HeadingSize = keyof Theme['typography']['title'];
 declare type HeadingColor = keyof Theme['colors']['text'];
 interface HeadingOptions {
     /**
      * Sets the visual size of the heading.
-     * Also sets the HTML tag used for the heading.
      * To override the rendered tag, use the `as` prop.
      *
      * @default 'md'
@@ -3806,19 +3577,6 @@ declare type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptio
 declare type IconButtonProps = PropsOf<IconButtonComponent>;
 declare const IconButton: IconButtonComponent;
 
-interface ImageOptions {
-    src?: string;
-    alt?: string;
-    width: string | number;
-    height: string | number;
-    loading?: 'eager' | 'lazy';
-    borderRadius?: keyof Theme['radii'];
-}
-declare type OmittedProps$8 = 'width' | 'height';
-interface ImageProps extends Omit<HTMLQdsProps<'img'>, OmittedProps$8>, ImageOptions {
-}
-declare function Image({ src, loading, width, height, borderRadius, ...restProps }: ImageProps): JSX.Element;
-
 interface InputBaseOptions {
     /**
      * If `true`, the input will be invalid
@@ -5254,18 +5012,21 @@ interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$
 declare const TextareaBase: react.ForwardRefExoticComponent<TextareaBaseProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface RadioCardOptions {
+    /**
+     * The label for the radio card
+     */
     label: string;
     /**
      * Text that provides additional guidance to the user
      */
     helperText?: string;
     /**
-     * If `true` the radio card will be required using the HTML `required` attribute.
+     * If `true` the user must check the radio item before the owning form can be submitted.
      * @default false
      */
     isRequired?: boolean;
     /**
-     * If `true` the radio card will be disabled using the HTML `disabled` attribute.
+     * If `true` it prevents the user from interacting with the radio item.
      * @default false
      */
     isDisabled?: boolean;
@@ -5273,7 +5034,7 @@ interface RadioCardOptions {
 interface RadioCardProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions>, RadioCardOptions {
 }
 
-declare type RadioGroupLabelProps = HTMLQdsProps<'label'>;
+declare type RadioGroupLabelProps = HTMLQdsProps<'span'>;
 
 interface RadioGroupOptions {
     /**
@@ -5318,7 +5079,7 @@ interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, 'asC
 }
 declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>> & {
     Card: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLButtonElement>>;
-    Label: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "key" | keyof react.LabelHTMLAttributes<HTMLLabelElement>> & react.RefAttributes<HTMLLabelElement>>;
+    Label: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof react.HTMLAttributes<HTMLSpanElement>> & react.RefAttributes<HTMLSpanElement>>;
 };
 
 interface SelectOptionOptions {
@@ -5401,6 +5162,39 @@ declare type StackComponent = ForwardRefComponent<'div', StackOptions>;
 declare type StackProps = PropsOf<StackComponent>;
 declare const Stack: StackComponent;
 
+interface SwitchOptions {
+    /**
+     * The label for the switch
+     */
+    label: string;
+    /**
+     * The text that appears below the label
+     * to provide additional guidance to the user
+     */
+    helperText?: string;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * If `true`, the switch will be checked
+     */
+    isChecked?: boolean;
+    /**
+     * If `true`, the switch will be disabled and
+     * cannot be interacted with
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, indicates that the switch is required
+     */
+    isRequired?: boolean;
+    onCheckedChange?: (isChecked: boolean) => void;
+}
+interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | keyof SwitchOptions>, SwitchOptions {
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface TextareaOptions extends TextareaBaseOptions {
     /**
      * The label for the textarea field
@@ -5420,6 +5214,21 @@ interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$1>,
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
+declare type Id = number | string;
+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.
+     * @default a random unique id will be set and returned
+     */
+    id?: Id;
+}
+declare const toast: ((text: string, options?: ToastOptions) => Id) & {
+    error: (text: string, options?: ToastOptions) => Id;
+    remove: (id: Id) => void;
+    removeAll: () => void;
+};
+
 interface UseBreakpointOptions {
     /**
      * If `true` the initial value will be `base` instead of the current breakpoint.
@@ -5519,4 +5328,4 @@ declare function useStableId(fixedId?: string | null): string;
  */
 declare const useSafeLayoutEffect: typeof useLayoutEffect;
 
-export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, Image, ImageIcon, ImageProps, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };
+export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, DisplayText, DisplayTextProps, Divider, DividerProps, DropdownMenu, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuItemProps, DropdownMenuRootProps, DropdownMenuTriggerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, Switch, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };