@qasa/qds-ui 0.10.0-next.12 → 0.10.0-next.14

package/dist/esm/types/components/avatar/avatar.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { HTMLQdsProps } from '../../types';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 declare const SIZE_MAP: {
     xs: number;
     sm: number;
@@ -23,7 +24,7 @@ interface AvatarOptions {
      * Size of the avatar
      * @default 'md'
      */
-    size?: AvatarSize;
+    size?: ResponsiveProp<AvatarSize>;
 }
 export interface AvatarProps extends HTMLQdsProps<'span'>, AvatarOptions {
 }

package/dist/esm/types/components/button/button-types.d.ts

@@ -1,12 +1,13 @@
 import type { ElementType } from 'react';
 import type { IconProps } from '../icon';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 import type { ButtonSize, ButtonVariant } from './button-styles';
 export interface ButtonOptions {
     /**
      * Sets the size of the button
      * @default 'md'
      */
-    size?: ButtonSize;
+    size?: ResponsiveProp<ButtonSize>;
     /**
      * Sets the style variant of the button
      * @default 'secondary'

package/dist/esm/types/components/checkbox/checkbox.d.ts

@@ -21,6 +21,10 @@ interface CheckboxOptions {
      * ```
      */
     label: string | ReactElement<unknown>;
+    /**
+     * Text that provides 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.
      */
@@ -46,6 +50,10 @@ interface CheckboxOptions {
      * @default false
      */
     isInvalid?: boolean;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
     /**
      * If `true` it prevents the user from interacting with the checkbox.
      * @default false

package/dist/esm/types/components/display-text/display-text.d.ts

@@ -1,5 +1,6 @@
 import type * as Polymorphic from '../../utils/polymorphic';
 import type { Theme } from '../../theme';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 declare type DisplaySize = keyof Theme['typography']['display'];
 declare type DisplayTextAlign = 'left' | 'center' | 'right';
 declare type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
@@ -10,7 +11,7 @@ interface DisplayTextOptions {
      *
      * @default 'md'
      */
-    size?: DisplaySize;
+    size?: ResponsiveProp<DisplaySize>;
     /**
      * Sets the text alignment
      * @default 'left'

package/dist/esm/types/components/heading/heading.d.ts

@@ -1,5 +1,6 @@
 import type * as Polymorphic from '../../utils/polymorphic';
 import type { Theme } from '../../theme';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 declare type HeadingSize = keyof Theme['typography']['title'];
 declare type HeadingColor = keyof Theme['colors']['text'];
 interface HeadingOptions {
@@ -9,7 +10,7 @@ interface HeadingOptions {
      *
      * @default 'md'
      */
-    size?: HeadingSize;
+    size?: ResponsiveProp<HeadingSize>;
     /**
      * Sets the color of the heading
      * @default 'default'

package/dist/esm/types/components/icon-button/icon-button.d.ts

@@ -2,6 +2,7 @@ import type { ElementType } from 'react';
 import type { VariantProps } from '../../styles';
 import type { IconProps } from '../icon';
 import type * as Polymorphic from '../../utils/polymorphic';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 import { getSizeStyles, getVariantStyles } from './icon-button-styles';
 declare type IconButtonSize = VariantProps<typeof getSizeStyles>;
 declare type IconButtonVariant = VariantProps<typeof getVariantStyles>;
@@ -15,7 +16,7 @@ interface IconButtonOptions {
     /**
      * Defines the size of the button
      */
-    size?: IconButtonSize;
+    size?: ResponsiveProp<IconButtonSize>;
     /**
      * Sets the style variant of the button
      */

package/dist/esm/types/components/label/label.d.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from '../../styles';
 import type * as Polymorphic from '../../utils/polymorphic';
 import type { Theme } from '../../theme';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 declare const getSizeStyles: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -95,9 +96,6 @@ declare const getSizeStyles: (theme: {
             blue60: string;
             blue50: string;
             blue40: string;
-            /**
-             * Size of the label
-             */
             blue30: string;
             blue20: string;
             blue10: string;
@@ -242,7 +240,10 @@ declare const getSizeStyles: (theme: {
             lg: {
                 fontFamily: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: string; /**
+                 * Sets the color of the label
+                 * @default 'default'
+                 */
                 lineHeight: string;
                 letterSpacing: string;
                 fontFeatureSettings: string;
@@ -424,7 +425,7 @@ interface LabelOptions {
     /**
      * Size of the label
      */
-    size?: LabelSize;
+    size?: ResponsiveProp<LabelSize>;
     /**
      * Sets the color of the label
      * @default 'default'

package/dist/esm/types/components/loading-dots/loading-dots.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { VariantProps } from '../../styles';
 import type { HTMLQdsProps } from '../../types';
+import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
 declare const getSizeStyles: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -409,7 +410,7 @@ declare const getSizeStyles: (theme: {
 };
 declare type LoadingDotsSize = VariantProps<typeof getSizeStyles>;
 interface LoadingDotsOptions {
-    size?: LoadingDotsSize;
+    size?: ResponsiveProp<LoadingDotsSize>;
 }
 export interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
 }

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

@@ -1,6 +1,7 @@
 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)";
@@ -247,7 +248,10 @@ declare const getSizeStyles: (theme: {
             md: {
                 fontFamily: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: string; /**
+                 * Sets the visual size of the text
+                 * @default 'md'
+                 */
                 lineHeight: string;
                 letterSpacing: string;
                 fontFeatureSettings: string;
@@ -443,7 +447,7 @@ interface ParagraphOptions {
      * Sets the visual size of the text
      * @default 'md'
      */
-    size?: ParagraphSize;
+    size?: ResponsiveProp<ParagraphSize>;
     /**
      * Sets the color of the text
      * @default 'normal'

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

@@ -1,6 +1,7 @@
 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'];
 interface StackOptions {
@@ -8,7 +9,7 @@ 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.
      *

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

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

@@ -840,6 +840,12 @@ interface QdsProviderProps {
 }
 declare function QdsProvider({ children, themeOverrides, cacheOptions, locale }: QdsProviderProps): JSX.Element;
 
+declare type Breakpoints$1 = Theme['breakpoints'];
+declare type BreakpointsConfig$1<T> = PartialRecord<keyof Breakpoints$1, T> & {
+    base: T;
+};
+declare type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
+
 declare const SIZE_MAP: {
     xs: number;
     sm: number;
@@ -863,7 +869,7 @@ interface AvatarOptions {
      * Size of the avatar
      * @default 'md'
      */
-    size?: AvatarSize;
+    size?: ResponsiveProp<AvatarSize>;
 }
 interface AvatarProps extends HTMLQdsProps<'span'>, AvatarOptions {
 }
@@ -2381,7 +2387,7 @@ interface ButtonOptions {
      * Sets the size of the button
      * @default 'md'
      */
-    size?: ButtonSize;
+    size?: ResponsiveProp<ButtonSize>;
     /**
      * Sets the style variant of the button
      * @default 'secondary'
@@ -2431,7 +2437,7 @@ interface DisplayTextOptions {
      *
      * @default 'md'
      */
-    size?: DisplaySize;
+    size?: ResponsiveProp<DisplaySize>;
     /**
      * Sets the text alignment
      * @default 'left'
@@ -2469,6 +2475,10 @@ interface CheckboxOptions {
      * ```
      */
     label: string | ReactElement<unknown>;
+    /**
+     * Text that provides 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.
      */
@@ -2494,6 +2504,10 @@ interface CheckboxOptions {
      * @default false
      */
     isInvalid?: boolean;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
     /**
      * If `true` it prevents the user from interacting with the checkbox.
      * @default false
@@ -2653,7 +2667,7 @@ interface HeadingOptions {
      *
      * @default 'md'
      */
-    size?: HeadingSize;
+    size?: ResponsiveProp<HeadingSize>;
     /**
      * Sets the color of the heading
      * @default 'default'
@@ -3563,7 +3577,7 @@ interface IconButtonOptions {
     /**
      * Defines the size of the button
      */
-    size?: IconButtonSize;
+    size?: ResponsiveProp<IconButtonSize>;
     /**
      * Sets the style variant of the button
      */
@@ -3719,9 +3733,6 @@ declare const getSizeStyles$2: (theme: {
             blue60: string;
             blue50: string;
             blue40: string;
-            /**
-             * Size of the label
-             */
             blue30: string;
             blue20: string;
             blue10: string;
@@ -3866,7 +3877,10 @@ declare const getSizeStyles$2: (theme: {
             lg: {
                 fontFamily: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: string; /**
+                 * Sets the color of the label
+                 * @default 'default'
+                 */
                 lineHeight: string;
                 letterSpacing: string;
                 fontFeatureSettings: string;
@@ -4048,7 +4062,7 @@ interface LabelOptions {
     /**
      * Size of the label
      */
-    size?: LabelSize;
+    size?: ResponsiveProp<LabelSize>;
     /**
      * Sets the color of the label
      * @default 'default'
@@ -4481,7 +4495,7 @@ declare const getSizeStyles$1: (theme: {
 };
 declare type LoadingDotsSize = VariantProps<typeof getSizeStyles$1>;
 interface LoadingDotsOptions {
-    size?: LoadingDotsSize;
+    size?: ResponsiveProp<LoadingDotsSize>;
 }
 interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
 }
@@ -4733,7 +4747,10 @@ declare const getSizeStyles: (theme: {
             md: {
                 fontFamily: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: string; /**
+                 * Sets the visual size of the text
+                 * @default 'md'
+                 */
                 lineHeight: string;
                 letterSpacing: string;
                 fontFeatureSettings: string;
@@ -4929,7 +4946,7 @@ interface ParagraphOptions {
      * Sets the visual size of the text
      * @default 'md'
      */
-    size?: ParagraphSize;
+    size?: ResponsiveProp<ParagraphSize>;
     /**
      * Sets the color of the text
      * @default 'normal'
@@ -5129,7 +5146,7 @@ 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.
@@ -5149,7 +5166,7 @@ interface StackOptions {
     /**
      * The gap between each child element.
      */
-    gap?: GapProp;
+    gap?: ResponsiveProp<GapProp>;
     /**
      * A divider element to be rendered between each child element.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qasa/qds-ui",
-  "version": "0.10.0-next.12",
+  "version": "0.10.0-next.14",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",