@qasa/qds-ui 0.1.0

package/dist/esm/types/hooks/use-breakpoint.d.ts

@@ -0,0 +1,17 @@
+export interface UseBreakpointOptions {
+    /**
+     * If `true` the intital value will be `base` instead of the current breakpoint.
+     * This is to support hydration when using SSR.
+     *
+     * If you're creating a client-side rendered app, you can pass `false` to get the correct value on the first render.
+     *
+     * @default true
+     */
+    ssr?: boolean;
+}
+/**
+ * Hook for getting the current breakpoint.
+ */
+export declare function useBreakpoint(params?: UseBreakpointOptions): {
+    currentBreakpoint: "2xl" | "base" | "lg" | "md" | "sm" | "xl";
+};

package/dist/esm/types/hooks/use-form-field.d.ts

@@ -0,0 +1,49 @@
+import type { ElementType } from 'react';
+import type { HTMLQdsProps, LegitimateAny } from '../types';
+declare type FormFieldElement = 'input' | 'select' | 'textarea';
+declare type PropGetter<T extends ElementType = LegitimateAny> = (props?: HTMLQdsProps<T>) => Record<string, unknown>;
+interface FormFieldOptions {
+    /**
+     * The label for the form field
+     */
+    label: string;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
+    /**
+     * Text that provides additional guidance to the user
+     */
+    helperText?: string;
+    /**
+     * If `true`, the form field will be invalid
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, the form field will be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true` the form field will be required
+     */
+    isRequired?: boolean;
+}
+declare type OmittedProps = 'children' | 'readOnly' | 'size';
+declare type UseFormFieldProps<T extends FormFieldElement> = Omit<HTMLQdsProps<T>, OmittedProps> & FormFieldOptions;
+/**
+ * Custom hook that returns props for a form field's label, inpu, helper text and error message.
+ * Meant to be used in conjunction with the `Input`, `Select` or `Textarea` component.
+ *
+ * Used internally by `TextField`, `Select` and `Textarea`.
+ */
+export declare const useFormField: <T extends FormFieldElement>(props: UseFormFieldProps<T>) => {
+    getLabelProps: PropGetter<"label">;
+    /**
+     * Props to be spread on the input, select or textarea element.
+     * Function accepts an optional object of props to be merged with the returned props.
+     */
+    getFieldProps: PropGetter<T>;
+    getHelperTextProps: PropGetter<"div">;
+    getErrorMessageProps: PropGetter<"div">;
+};
+export {};

package/dist/esm/types/hooks/use-image.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLQdsProps } from '../types';
+declare type LoadingStatus = 'loading' | 'loaded' | 'error' | 'pending';
+export interface UseImageProps {
+    src?: string;
+    loading?: HTMLQdsProps<'img'>['loading'];
+}
+export declare const useImage: ({ src, loading }: UseImageProps) => {
+    loadingStatus: LoadingStatus;
+};
+export {};

package/dist/esm/types/hooks/use-safe-layout-effect.d.ts

@@ -0,0 +1,9 @@
+import { useLayoutEffect } from 'react';
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */
+export declare const useSafeLayoutEffect: typeof useLayoutEffect;

package/dist/esm/types/hooks/use-stable-id.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns a stable ID that is unique to the component instance.
+ */
+export declare function useStableId(fixedId?: string | null): string;

package/dist/esm/types/index.d.ts

@@ -0,0 +1,6 @@
+export { QdsProvider } from './qds-provider';
+export * from './components';
+export * from './styles';
+export * from './theme';
+export * from './hooks';
+export * from './utils/polymorphic';

package/dist/esm/types/qds-provider.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { ThemeOverrides } from './theme';
+interface QdsProviderProps {
+    children: ReactNode;
+    themeOverrides?: ThemeOverrides;
+}
+export declare function QdsProvider({ children, themeOverrides }: QdsProviderProps): JSX.Element;
+export {};

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

@@ -0,0 +1,369 @@
+export declare const getFormFieldBaseStyles: (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;
+        };
+        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;
+            };
+            '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;
+            };
+        };
+    };
+}) => {
+    '&::placeholder': {
+        color: string;
+    };
+    '&:hover': {
+        borderColor: string;
+    };
+    '&:focus': {
+        outline: number;
+        borderColor: string;
+        boxShadow: `0 0 0 1px ${string}`;
+    };
+    '&[aria-invalid=true]': {
+        borderColor: string;
+        '&:focus': {
+            boxShadow: `0 0 0 1px ${string}`;
+        };
+    };
+    '&[disabled]': {
+        opacity: number;
+    };
+    transitionProperty: "opacity, border-color, box-shadow";
+    transitionDuration: "120ms";
+    transitionTimingFunction: "ease";
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    width: string;
+    minWidth: number;
+    appearance: "none";
+    paddingLeft: string;
+    paddingRight: string;
+    border: string;
+    borderRadius: string;
+    backgroundColor: string;
+    color: string;
+    alignItems: "center";
+};

package/dist/esm/types/styles/css-reset.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * A CSS Reset (opinionated)
+ */
+export declare function CSSReset(): JSX.Element;

package/dist/esm/types/styles/css-utils.d.ts

@@ -0,0 +1,19 @@
+import type { CSSObject } from '@emotion/react';
+import type { Theme } from '../theme';
+declare type NamedStyles = Record<string, CSSObject>;
+declare type StyleInterpolation<T> = (theme: Theme) => T;
+/**
+ * Creates a collection of named style rules.
+ */
+export declare function createStyleVariants<T extends NamedStyles>(styles: StyleInterpolation<T>): (theme: Theme) => T;
+/**
+ * Create a style object. Useful for creating styles that depend on the theme.
+ */
+export declare function createStyle<T extends CSSObject>(styles: StyleInterpolation<T>): (theme: Theme) => T;
+export declare type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
+/**
+ * Converts css `px` unit to `rem`.
+ * Assumes the root font size is 16px.
+ */
+export declare const pxToRem: (px: number) => string;
+export {};

package/dist/esm/types/styles/global-styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Adds some global opinionated styles.
+ */
+export declare function GlobalStyles(): JSX.Element;

package/dist/esm/types/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './global-styles';
+export * from './css-utils';
+export * from './common-styles';

package/dist/esm/types/theme/foundations/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const breakpoints: {
+    readonly base: 0;
+    readonly sm: 480;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};

package/dist/esm/types/theme/foundations/colors.d.ts

@@ -0,0 +1,107 @@
+export declare const 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;
+    };
+    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;
+        /** For usage on colored/darker backgrounds */
+        onColor: string;
+    };
+    icon: {
+        default: string;
+        strong: string;
+        subtle: string;
+        disabled: string;
+        negative: string;
+        warning: string;
+        success: string;
+        /** For usage on colored/darker backgrounds */
+        onColor: string;
+    };
+    border: {
+        default: string;
+        defaultHover: string;
+        defaultSelected: string;
+        strong: string;
+        subtle: string;
+        negative: string;
+        warning: string;
+        success: string;
+    };
+};