@qasa/qds-ui 0.1.0

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

@@ -0,0 +1,402 @@
+import type { VariantProps } from '../../styles';
+import type { Theme } from '../../theme';
+import type * as Polymorphic from '../../utils/polymorphic';
+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;
+            brand90: string;
+            brand80: string;
+            brand70: string;
+            brand60: string;
+            brand50: string;
+            brand40: string;
+            brand30: string;
+            brand20: string;
+            brand10: 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;
+        };
+        /**
+         * Truncates the text after a specific number of lines
+         */
+        bg: {
+            default: string;
+            brandPrimary: string;
+            brandPrimaryHover: string;
+            brandPrimaryActive: string;
+            brandSecondary: string;
+            brandSecondaryHover: string;
+            brandSecondaryActive: 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;
+            onColor: string;
+        };
+        icon: {
+            default: string;
+            strong: string;
+            subtle: string;
+            disabled: string;
+            negative: string;
+            warning: string;
+            success: string;
+            onColor: string;
+        };
+        border: {
+            default: string;
+            defaultHover: string;
+            defaultSelected: string;
+            strong: string;
+            subtle: string;
+            negative: string;
+            warning: string;
+            success: 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;
+        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: {
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: 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; /**
+                 * Alignment of the paragraph
+                 * @default 'left'
+                 */
+            };
+            '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;
+            };
+        };
+        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;
+    };
+};
+declare type ParagraphSize = VariantProps<typeof getSizeStyles>;
+declare type ParagraphColor = keyof Theme['colors']['text'];
+interface ParagraphOptions {
+    /**
+     * Sets the visual size of the text
+     * @default 'md'
+     */
+    size?: 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';
+}
+declare type ParagraphComponent = Polymorphic.ForwardRefComponent<'p', ParagraphOptions>;
+export declare type ParagraphProps = Polymorphic.PropsOf<ParagraphComponent>;
+export declare const Paragraph: ParagraphComponent;
+export {};

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

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

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

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

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

@@ -0,0 +1,21 @@
+/// <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;
+}
+declare 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

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

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

@@ -0,0 +1,30 @@
+/// <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;
+}
+declare 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

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

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../../types';
+declare type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
+declare 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;
+}
+declare 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/select/index.d.ts

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

package/dist/cjs/types/components/select/select-option.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../types';
+interface SelectOptionOptions {
+    isDisabled?: boolean;
+}
+declare type OmittedProps = 'disabled' | 'label';
+export interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps>, SelectOptionOptions {
+}
+export declare const SelectOption: import("react").ForwardRefExoticComponent<SelectOptionProps & import("react").RefAttributes<HTMLOptionElement>>;
+export {};

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../types';
+import type { SelectBaseOptions } from '../primitives/select-base';
+import type { SelectOptionProps } from './select-option';
+interface SelectOptions extends SelectBaseOptions {
+    /**
+     * The label for the select field
+     */
+    label: string;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
+    /**
+     * Text that provides additional guidance to the user
+     */
+    helperText?: string;
+}
+declare type OmittedProps = 'readOnly' | 'size';
+export interface SelectProps extends Omit<HTMLQdsProps<'select'>, OmittedProps>, SelectOptions {
+}
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>> & {
+    Option: import("react").ForwardRefExoticComponent<SelectOptionProps & import("react").RefAttributes<HTMLOptionElement>>;
+};
+export type { SelectOptionProps };

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

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Theme } from '../../theme';
+import type { HTMLQdsProps } from '../../types';
+interface SpacerOptions {
+    axis?: 'x' | 'y';
+    size: keyof Theme['spacing'];
+}
+export interface SpacerProps extends HTMLQdsProps<'span'>, SpacerOptions {
+}
+export declare const Spacer: import("react").ForwardRefExoticComponent<SpacerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

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

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

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { Theme } from '../../theme';
+import type * as Polymorphic from '../../utils/polymorphic';
+import type { AlignItems, FlexDirection, JustifyContent, FlexWrap } from './stack.types';
+declare type GapProp = keyof Theme['spacing'];
+interface StackOptions {
+    direction?: FlexDirection;
+    justifyContent?: JustifyContent;
+    alignItems?: AlignItems;
+    wrap?: FlexWrap;
+    gap?: GapProp;
+    divider?: ReactNode;
+}
+declare type StackComponent = Polymorphic.ForwardRefComponent<'div', StackOptions>;
+export declare type StackProps = Polymorphic.PropsOf<StackComponent>;
+export declare const Stack: StackComponent;
+export {};

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

@@ -0,0 +1,4 @@
+export declare type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+export declare type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';

package/dist/cjs/types/components/stack/stack.utils.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement, ReactNode } from 'react';
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ */
+export declare function getValidChildren(children: ReactNode): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];

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

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../types';
+import type { InputBaseOptions } from '../primitives/input-base';
+interface TextFieldOptions extends InputBaseOptions {
+    /**
+     * The label for the input
+     */
+    label: string;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
+    /**
+     * Text that provides additional guidance to the user
+     */
+    helperText?: string;
+}
+declare type OmittedProps = 'children' | 'readOnly' | 'size';
+export interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps>, TextFieldOptions {
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../types';
+import type { TextareaBaseOptions } from '../primitives/textarea-base';
+interface TextareaOptions extends TextareaBaseOptions {
+    /**
+     * The label for the textarea field
+     */
+    label: string;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
+    /**
+     * Text that provides additional guidance to the user
+     */
+    helperText?: string;
+}
+declare type OmittedProps = 'children' | 'readOnly' | 'size';
+export interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps>, TextareaOptions {
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/cjs/types/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './use-breakpoint';
+export * from './use-breakpoint-value';
+export * from './use-image';
+export * from './use-form-field';
+export * from './use-stable-id';
+export * from './use-safe-layout-effect';

package/dist/cjs/types/hooks/use-breakpoint-value.d.ts

@@ -0,0 +1,16 @@
+import type { Theme } from '../theme';
+import type { PartialRecord } from '../types';
+import type { UseBreakpointOptions } from './use-breakpoint';
+declare type Breakpoints = Theme['breakpoints'];
+declare type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
+    base: T;
+};
+export declare type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
+/**
+ * Hook for getting a value based on the current breakpoint.
+ *
+ * @example
+ * const width = useBreakpointValue({ base: '150px', md: '250px' })
+ */
+export declare function useBreakpointValue<T>(values: UseBreakpointValueProps<T>, options?: UseBreakpointOptions): T;
+export {};