@qasa/qds-ui 0.10.0-next.9 → 0.10.1

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

@@ -1,14 +1,15 @@
 import type { ReactNode } from 'react';
 import type { Theme } from '../../theme';
 import type * as Polymorphic from '../../utils/polymorphic';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 import type { AlignItems, FlexDirection, JustifyContent, FlexWrap } from './stack.types';
-declare type GapProp = keyof Theme['spacing'];
+type GapProp = keyof Theme['spacing'];
 interface StackOptions {
     /**
      * The direction of the stack.
      * @default 'column'
      */
-    direction?: FlexDirection;
+    direction?: ResponsiveProp<FlexDirection>;
     /**
      * The CSS `justify-content` property.
      * Controls the alignment of items on the main axis.
@@ -28,7 +29,7 @@ interface StackOptions {
     /**
      * The gap between each child element.
      */
-    gap?: GapProp;
+    gap?: ResponsiveProp<GapProp>;
     /**
      * A divider element to be rendered between each child element.
      *
@@ -37,7 +38,7 @@ interface StackOptions {
      */
     divider?: ReactNode;
 }
-declare type StackComponent = Polymorphic.ForwardRefComponent<'div', StackOptions>;
-export declare type StackProps = Polymorphic.PropsOf<StackComponent>;
+type StackComponent = Polymorphic.ForwardRefComponent<'div', StackOptions>;
+export type StackProps = Polymorphic.PropsOf<StackComponent>;
 export declare const Stack: StackComponent;
 export {};

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

@@ -1,4 +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';
+export type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+export type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';

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

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

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import * as RadixSwitch from '@radix-ui/react-switch';
+interface SwitchOptions {
+    /**
+     * The label for the switch
+     */
+    label: string;
+    /**
+     * The text that appears below the label
+     * to provide additional guidance to the user
+     */
+    helperText?: string;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * If `true`, the switch will be checked
+     */
+    isChecked?: boolean;
+    /**
+     * If `true`, the switch will be disabled and
+     * cannot be interacted with
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, indicates that the switch is required
+     */
+    isRequired?: boolean;
+    onCheckedChange?: (isChecked: boolean) => void;
+}
+interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | keyof SwitchOptions>, SwitchOptions {
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -25,7 +25,7 @@ interface TextFieldOptions extends InputBaseOptions {
      */
     suffix?: string;
 }
-declare type OmittedProps = 'children' | 'readOnly' | 'size';
+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>>;

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

@@ -15,7 +15,7 @@ interface TextareaOptions extends TextareaBaseOptions {
      */
     helperText?: string;
 }
-declare type OmittedProps = 'children' | 'readOnly' | 'size';
+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>>;

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

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 export declare function ToastProvider({ children }: {
     children: ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { ToastVariant } from './toast-styles';
-declare type Id = number | string;
+type Id = number | string;
 interface Toast {
     id: Id;
     /**
@@ -20,7 +20,7 @@ interface ToastOptions {
      */
     id?: Id;
 }
-declare type Subscriber = () => void;
+type Subscriber = () => void;
 declare class ToastStore {
     toasts: Toast[];
     subscribers: Subscriber[];

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

@@ -199,6 +199,7 @@ export declare const getVariantStyles: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -407,4 +408,4 @@ export declare const getVariantStyles: (theme: {
         color: string;
     };
 };
-export declare type ToastVariant = VariantProps<typeof getVariantStyles>;
+export type ToastVariant = VariantProps<typeof getVariantStyles>;

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

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

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

@@ -1,11 +1,11 @@
 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> & {
+type Breakpoints = Theme['breakpoints'];
+type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
     base: T;
 };
-export declare type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
+export type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
 /**
  * Hook for getting a value based on the current breakpoint.
  *

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

@@ -1,7 +1,7 @@
 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>;
+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
@@ -28,8 +28,8 @@ interface FormFieldOptions {
      */
     isRequired?: boolean;
 }
-declare type OmittedProps = 'children' | 'readOnly' | 'size';
-export declare type UseFormFieldProps<T extends FormFieldElement> = Omit<HTMLQdsProps<T>, OmittedProps> & FormFieldOptions;
+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.

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

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

package/dist/cjs/types/hooks/use-responsive-prop.d.ts

@@ -0,0 +1,16 @@
+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/i18n/locale-context.d.ts

@@ -7,6 +7,6 @@ interface LocaleProviderProps {
     language: LanguageCode;
     children: React.ReactNode;
 }
-export declare function LocaleProvider({ language, children }: LocaleProviderProps): JSX.Element;
+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,5 +1,5 @@
 declare const SUPPORTED_LANGUAGE_CODES: readonly ["en", "sv", "fi", "fr"];
-export declare type LanguageCode = typeof SUPPORTED_LANGUAGE_CODES[number];
+export type LanguageCode = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 export interface Resource {
     close: string;
     optional: string;

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

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

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

@@ -8,5 +8,5 @@ interface QdsProviderProps {
     cacheOptions?: Partial<EmotionCacheOptions>;
     locale: LanguageCode;
 }
-export declare function QdsProvider({ children, themeOverrides, cacheOptions, locale }: QdsProviderProps): JSX.Element;
+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

@@ -198,6 +198,7 @@ export declare const getFormFieldBaseStyles: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {

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

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

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

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@emotion/react';
 import type { Theme } from '../theme';
-declare type NamedStyles = Record<string, CSSObject>;
-declare type StyleInterpolation<T> = (theme: Theme) => T;
+type NamedStyles = Record<string, CSSObject>;
+type StyleInterpolation<T> = (theme: Theme) => T;
 /**
  * Creates a collection of named style rules.
  */
@@ -10,7 +10,7 @@ export declare function createStyleVariants<T extends NamedStyles>(styles: Style
  * 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>;
+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.

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

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

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

@@ -203,6 +203,7 @@ export declare const foundations: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {

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

@@ -1,7 +1,7 @@
 export declare const radii: {
     /** 0px */
     none: string;
-    /** 4px */
+    /** 6px */
     '2xs': string;
     /** 8px */
     xs: string;
@@ -13,6 +13,8 @@ export declare const radii: {
     lg: string;
     /** 32px */
     xl: string;
+    /** 48px */
+    '2xl': string;
     /** 9999px */
     full: string;
 };

package/dist/cjs/types/theme/theme-tools.d.ts

@@ -1,13 +1,13 @@
 import type { PartialRecord } from '../types';
 import type { Theme } from './theme';
-declare type DeepPartial<T> = {
+type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
 interface TypographyOverride {
     fontFamily?: string;
     fontWeight?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
 }
-declare type TypographyOverrides = PartialRecord<keyof Theme['typography'], TypographyOverride>;
+type TypographyOverrides = PartialRecord<keyof Theme['typography'], TypographyOverride>;
 export interface ThemeOverrides {
     colors?: DeepPartial<Theme['colors']>;
     typography?: TypographyOverrides;
@@ -401,6 +401,7 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {

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

@@ -198,6 +198,7 @@ export declare const theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -397,4 +398,4 @@ export declare const theme: {
         };
     };
 };
-export declare type Theme = typeof theme;
+export type Theme = typeof theme;

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

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ElementType } from 'react';
-export declare type LegitimateAny = any;
-export declare type PartialRecord<K extends string | number | symbol, T> = Partial<Record<K, T>>;
-export declare type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
-export declare type HTMLQdsProps<T extends ElementType> = ComponentPropsWithoutRef<T>;
+export type LegitimateAny = any;
+export type PartialRecord<K extends string | number | symbol, T> = Partial<Record<K, T>>;
+export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+export type HTMLQdsProps<T extends ElementType> = ComponentPropsWithoutRef<T>;

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

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

package/dist/cjs/types/utils/merge-refs.d.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject, RefCallback } from 'react';
-declare type ReactRef<T> = RefCallback<T> | MutableRefObject<T>;
-declare type Maybe<T> = T | null | undefined;
+type ReactRef<T> = RefCallback<T> | MutableRefObject<T>;
+type Maybe<T> = T | null | undefined;
 export declare const mergeRefs: <T>(...refs: Maybe<ReactRef<T>>[]) => (node: T | null) => void;
 export {};

package/dist/cjs/types/utils/polymorphic.d.ts

@@ -9,12 +9,12 @@ import type { Merge } from '../types';
 /**
  * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
  */
-declare type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
+type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
 /**
  * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
  */
-declare type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
-declare type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
+type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
+type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
     as?: E;
 }>>;
 interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
@@ -37,5 +37,5 @@ interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends For
 /**
  * Infers the props of a React component
  */
-declare type PropsOf<E> = E extends React.ComponentType<infer P> ? P : never;
+type PropsOf<E> = E extends React.ComponentType<infer P> ? P : never;
 export type { ForwardRefComponent, OwnProps, IntrinsicElement, PropsOf };