@qasa/qds-ui 0.10.0-next.6 → 0.10.0-next.8

package/dist/cjs/types/components/checkbox/checkbox.d.ts

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+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;
+}
+export declare type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/types/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/dist/cjs/types/components/display-text/display-text.d.ts

@@ -0,0 +1,29 @@
+import type * as Polymorphic from '../../utils/polymorphic';
+import type { Theme } from '../../theme';
+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 = Polymorphic.ForwardRefComponent<'h2', DisplayTextOptions>;
+export declare type DisplayTextProps = Polymorphic.PropsOf<DisplayTextComponent>;
+export declare const DisplayText: DisplayTextComponent;
+export {};

package/dist/cjs/types/components/display-text/index.d.ts

@@ -0,0 +1 @@
+export * from './display-text';

package/dist/cjs/types/components/heading/heading.d.ts

@@ -1,454 +1,10 @@
-import type { VariantProps } from '../../styles';
 import type * as Polymorphic from '../../utils/polymorphic';
 import type { Theme } from '../../theme';
-declare const getSizeStyles: (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;
-            };
-        };
-    };
-}) => {
-    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;
-    };
-};
-declare type HeadingSize = VariantProps<typeof getSizeStyles>;
+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'

package/dist/cjs/types/styles/common-styles.d.ts

@@ -408,7 +408,7 @@ export 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}`;

package/dist/cjs/types/utils/html-attributes.d.ts

@@ -1,3 +1,4 @@
 declare type Booleanish = boolean | 'true' | 'false';
 export declare const dataAttr: (condition: boolean | undefined) => Booleanish;
+export declare const ariaAttr: (condition: boolean | undefined) => Booleanish;
 export {};