@qasa/qds-ui 0.11.0 → 0.13.0-next.0

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

@@ -1,475 +0,0 @@
-import type { VariantProps } from '../../styles';
-import type { Theme } from '../../theme';
-import type * as Polymorphic from '../../utils/polymorphic';
-import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
-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;
-        '10x': string;
-        '12x': string;
-        '14x': 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;
-            pink: 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;
-            red90: string;
-            red80: string;
-            red70: string;
-            red60: string;
-            red50: string;
-            red40: string;
-            red30: string;
-            red20: string;
-            red10: 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;
-        '10x': string;
-        '12x': string;
-        '14x': string;
-        '16x': string;
-        '20x': string;
-        '24x': string;
-    };
-    radii: {
-        none: string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': 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; /**
-                 * Sets the visual size of the text
-                 * @default 'md'
-                 */
-                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;
-            };
-        };
-    };
-}) => {
-    xs: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    lg: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    xl: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-};
-type ParagraphSize = VariantProps<typeof getSizeStyles>;
-type ParagraphColor = keyof Theme['colors']['text'];
-interface ParagraphOptions {
-    /**
-     * Sets the visual size of the text
-     * @default 'md'
-     */
-    size?: ResponsiveProp<ParagraphSize>;
-    /**
-     * Sets the color of the text
-     * @default 'normal'
-     */
-    color?: ParagraphColor;
-    /**
-     * Truncates the text after a specific number of lines
-     */
-    numberOfLines?: number;
-    /**
-     * Alignment of the paragraph
-     * @default 'left'
-     */
-    textAlign?: 'left' | 'center' | 'right';
-}
-type ParagraphComponent = Polymorphic.ForwardRefComponent<'p', ParagraphOptions>;
-export type ParagraphProps = Polymorphic.PropsOf<ParagraphComponent>;
-export declare const Paragraph: ParagraphComponent;
-export {};

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

@@ -1,3 +0,0 @@
-export * from './input-base';
-export * from './select-base';
-export * from './textarea-base';

package/dist/cjs/types/components/primitives/input-base/index.d.ts

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

package/dist/cjs/types/components/primitives/input-base/input-base.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import type { HTMLQdsProps } from '../../../types';
-export interface InputBaseOptions {
-    /**
-     * If `true`, the input will be invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the input will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the input will be required
-     */
-    isRequired?: boolean;
-}
-type OmittedProps = 'children' | 'readOnly' | 'size' | 'disabled' | 'required';
-export interface InputBaseProps extends Omit<HTMLQdsProps<'input'>, OmittedProps>, InputBaseOptions {
-}
-export declare const InputBase: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/cjs/types/components/primitives/select-base/index.d.ts

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

package/dist/cjs/types/components/primitives/select-base/select-base.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="react" />
-import type { HTMLQdsProps } from '../../../types';
-export interface SelectBaseOptions {
-    /**
-     * The placeholder for the select. We render an `<option/>` element that has
-     * empty value.
-     *
-     * ```jsx
-     * <option value="">{placeholder}</option>
-     * ```
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the select will be invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the select will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the select will be required
-     */
-    isRequired?: boolean;
-}
-type OmittedProps = 'readOnly' | 'size' | 'multiple' | 'disabled' | 'required';
-interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps>, SelectBaseOptions {
-}
-export declare const SelectBase: import("react").ForwardRefExoticComponent<SelectBaseProps & import("react").RefAttributes<HTMLSelectElement>>;
-export {};

package/dist/cjs/types/components/primitives/textarea-base/index.d.ts

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

package/dist/cjs/types/components/primitives/textarea-base/textarea-base.d.ts

@@ -1,36 +0,0 @@
-/// <reference types="react" />
-import type { HTMLQdsProps } from '../../../types';
-type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
-type MinRowsProp = number;
-export interface TextareaBaseOptions {
-    /**
-     * If `true`, the textarea will be invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the textarea will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the textarea will be required
-     */
-    isRequired?: boolean;
-    /**
-     * The resize behavior of the textarea
-     *
-     * @default 'vertical'
-     */
-    resize?: ResizeProp;
-    /**
-     * The minimum number of rows to display without requiring scrolling or resizing.
-     * To disabled resizing use the `resize` prop.
-     *
-     * @default 3
-     */
-    minRows?: MinRowsProp;
-}
-type OmittedProps = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
-export interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps>, TextareaBaseOptions {
-}
-export declare const TextareaBase: import("react").ForwardRefExoticComponent<TextareaBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-export {};

package/dist/cjs/types/components/radio-group/index.d.ts

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

package/dist/cjs/types/components/radio-group/radio-card.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-interface RadioCardOptions {
-    /**
-     * The label for the radio card
-     */
-    label: string;
-    /**
-     * Text that provides additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * If `true` the user must check the radio item before the owning form can be submitted.
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * If `true` it prevents the user from interacting with the radio item.
-     * @default false
-     */
-    isDisabled?: boolean;
-}
-export interface RadioCardProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions>, RadioCardOptions {
-}
-export declare const RadioCard: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/cjs/types/components/radio-group/radio-group-context.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-interface RadioGroupContextValue {
-    labelRefCallback: (node: HTMLElement | null) => void;
-    isDisabled: boolean | undefined;
-    errorMessageId?: string;
-}
-interface RadioGroupProviderProps {
-    value: RadioGroupContextValue;
-    children: React.ReactNode;
-}
-export declare function RadioGroupProvider({ value, children }: RadioGroupProviderProps): import("react/jsx-runtime").JSX.Element;
-interface UseRadioGroupContextProps {
-    consumerName: string;
-}
-export declare const useRadioGroupContext: ({ consumerName }: UseRadioGroupContextProps) => RadioGroupContextValue;
-export {};

package/dist/cjs/types/components/radio-group/radio-group-label.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { HTMLQdsProps } from '../../types';
-export type RadioGroupLabelProps = HTMLQdsProps<'span'>;
-export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/cjs/types/components/radio-group/radio-group.d.ts

@@ -1,50 +0,0 @@
-/// <reference types="react" />
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import type { RadioCardProps } from './radio-card';
-import type { RadioGroupLabelProps } from './radio-group-label';
-interface RadioGroupOptions {
-    /**
-     * The value of the radio item that should be checked when initially rendered.
-     * Use when you do not need to control the state of the radio items.
-     */
-    defaultValue?: string;
-    /**
-     * The controlled value of the radio item to check.
-     * Should be used in conjunction with `onValueChange`.
-     */
-    value?: string;
-    /**
-     * Event handler called when the value changes.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * The name of the group. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * If `true` all child radio items will be disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the user must check a radio item before the owning form can be submitted.
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * If `true` the radio group will be invalid.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * The error message to display if `isInvalid` is `true`
-     */
-    errorMessage?: string;
-}
-export interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, 'asChild' | keyof RadioGroupOptions>, RadioGroupOptions {
-}
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Card: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-};
-export type { RadioGroupLabelProps, RadioCardProps };

package/dist/cjs/types/components/radio-group/radio-indicator.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-type RadioIndicatorProps = Omit<RadioGroupPrimitive.RadioGroupIndicatorProps, 'asChild' | 'forceMount'>;
-/**
- * Styled Radix `RadioIndicator` component.
- * @see Docs https://www.radix-ui.com/primitives/docs/components/radio-group#indicator
- * @internal Not to be used outside the library.
- */
-export declare const RadioIndicator: import("react").ForwardRefExoticComponent<RadioIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
-export {};

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

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