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

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

@@ -1,12 +0,0 @@
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import type { HTMLQdsProps } from '../../types';
-import type { ToastVariant } from './toast-styles';
-interface ToastOptions {
-    text: string;
-    variant?: ToastVariant;
-}
-type OmittedProps = 'children';
-interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps>, ToastOptions {
-}
-export declare function Toast(props: ToastProps & ToastPrimitive.ToastProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,5 +0,0 @@
-export * from './use-breakpoint';
-export * from './use-breakpoint-value';
-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

@@ -1,16 +0,0 @@
-import type { Theme } from '../theme';
-import type { PartialRecord } from '../types';
-import type { UseBreakpointOptions } from './use-breakpoint';
-type Breakpoints = Theme['breakpoints'];
-type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
-    base: T;
-};
-export 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 {};

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

@@ -1,15 +0,0 @@
-export interface UseBreakpointOptions {
-    /**
-     * If `true` the initial value will be `base` instead of the current breakpoint.
-     * This is to support hydration when using server side rendering.
-     *
-     * @default false
-     */
-    ssr?: boolean;
-}
-/**
- * Hook for getting the current breakpoint.
- */
-export declare function useBreakpoint(params?: UseBreakpointOptions): {
-    currentBreakpoint: "2xl" | "base" | "xl" | "lg" | "md" | "sm";
-};

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

@@ -1,49 +0,0 @@
-import type { ElementType } from 'react';
-import type { HTMLQdsProps, LegitimateAny } from '../types';
-type FormFieldElement = 'input' | 'select' | 'textarea';
-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;
-}
-type OmittedProps = 'children' | 'readOnly' | 'size';
-export type UseFormFieldProps<T extends FormFieldElement> = Omit<HTMLQdsProps<T>, OmittedProps> & FormFieldOptions;
-/**
- * Custom hook that returns props for a form field's label, input, 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/cjs/types/hooks/use-responsive-prop.d.ts

@@ -1,16 +0,0 @@
-import { type Theme } from '../theme';
-import { type PartialRecord } from '../types';
-type Breakpoints = Theme['breakpoints'];
-type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
-    base: T;
-};
-export type ResponsiveProp<T> = T | BreakpointsConfig<T>;
-/**
- * Hook for responsive props that returns correct value for current breakpoint or static value
- * if user didn't input responsive options
- *
- * @example
- * const size = useResponsiveProp({ base: 'sm', md: 'lg' })
- */
-export declare function useResponsiveProp<T>(prop: ResponsiveProp<T>): T | (undefined & T);
-export {};

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

@@ -1,9 +0,0 @@
-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/cjs/types/hooks/use-stable-id.d.ts

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

package/dist/cjs/types/i18n/locale-context.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { LanguageCode } from './locales';
-interface LocaleContextValue {
-    currentLanguage: LanguageCode;
-}
-interface LocaleProviderProps {
-    language: LanguageCode;
-    children: React.ReactNode;
-}
-export declare function LocaleProvider({ language, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useLocale(): LocaleContextValue;
-export {};

package/dist/cjs/types/i18n/locales.d.ts

@@ -1,8 +0,0 @@
-declare const SUPPORTED_LANGUAGE_CODES: readonly ["en", "sv", "fi", "fr"];
-export type LanguageCode = (typeof SUPPORTED_LANGUAGE_CODES)[number];
-export interface Resource {
-    close: string;
-    optional: string;
-}
-export declare const locales: Record<LanguageCode, Resource>;
-export {};

package/dist/cjs/types/i18n/use-translation.d.ts

@@ -1,6 +0,0 @@
-import type { Resource } from './locales';
-type I18nKey = keyof Resource;
-export declare function useTranslation(): {
-    t: (key: I18nKey) => string;
-};
-export {};

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

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

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

@@ -1,12 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Options as EmotionCacheOptions } from '@emotion/cache';
-import type { ThemeOverrides } from './theme';
-import type { LanguageCode } from './i18n/locales';
-interface QdsProviderProps {
-    children: ReactNode;
-    themeOverrides?: ThemeOverrides;
-    cacheOptions?: Partial<EmotionCacheOptions>;
-    locale: LanguageCode;
-}
-export declare function QdsProvider({ children, themeOverrides, cacheOptions, locale }: QdsProviderProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,451 +0,0 @@
-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;
-        '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;
-            blackAlpha5: 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;
-                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;
-            };
-        };
-    };
-}) => {
-    '&::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], &:disabled, &[data-disabled]': {
-        opacity: number;
-        borderColor: string;
-    };
-    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;
-    WebkitTouchCallout: "none";
-    WebkitTapHighlightColor: "transparent";
-    '&::-webkit-date-and-time-value': {
-        textAlign: "left";
-    };
-    alignItems: "center";
-};

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

@@ -1,4 +0,0 @@
-/**
- * A CSS Reset (opinionated)
- */
-export declare function CSSReset(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import type { Theme } from '../theme';
-type NamedStyles = Record<string, CSSObject>;
-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 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/cjs/types/styles/global-styles.d.ts

@@ -1,4 +0,0 @@
-/**
- * Adds some global opinionated styles.
- */
-export declare function GlobalStyles(): import("react/jsx-runtime").JSX.Element;

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

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

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

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