rsuite 6.0.0-canary-20250622 → 6.0.0-canary-20250702

package/esm/internals/styled-system/types.d.ts

@@ -0,0 +1,208 @@
+import { CSSProperties as CSS } from 'react';
+import { supportedCSSProperties } from './css-properties';
+import type { WithResponsive, ColorScheme, Size } from '../types';
+export type CSSPropertyValueType = 'string' | 'number' | 'any';
+export type CSSProperty = {
+    /**
+     * CSS Property Type
+     */
+    type: CSSPropertyValueType;
+    /**
+     * CSS Property
+     */
+    property: string;
+    /**
+     * Value Transformer
+     */
+    transformer?: (value: any) => any;
+};
+export type SupportedCSSProperty = (typeof supportedCSSProperties)[number];
+type MakeResponsive<T> = {
+    [K in keyof T]?: T[K] | WithResponsive<T[K]>;
+};
+export type StandardCSSProps = MakeResponsive<Pick<CSS, SupportedCSSProperty>>;
+/**
+ * CSS Properties type for Box component
+ * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types
+ */
+export interface CSSSystemProps extends StandardCSSProps {
+    /** Shorthand for CSS property `padding` */
+    p?: WithResponsive<CSS['padding']>;
+    /** Shorthand for CSS property `paddingTop` */
+    pt?: WithResponsive<CSS['paddingTop']>;
+    /** Shorthand for CSS property `paddingRight` */
+    pr?: WithResponsive<CSS['paddingRight']>;
+    /** Shorthand for CSS property `paddingBottom` */
+    pb?: WithResponsive<CSS['paddingBottom']>;
+    /** Shorthand for CSS property `paddingLeft` */
+    pl?: WithResponsive<CSS['paddingLeft']>;
+    /** Shorthand for CSS property `paddingInline` */
+    px?: WithResponsive<CSS['paddingInline']>;
+    /** Shorthand for CSS property `paddingBlock` */
+    py?: WithResponsive<CSS['paddingBlock']>;
+    /** Shorthand for CSS property `paddingInlineStart` */
+    ps?: WithResponsive<CSS['paddingInlineStart']>;
+    /** Shorthand for CSS property `paddingInlineEnd` */
+    pe?: WithResponsive<CSS['paddingInlineEnd']>;
+    /** Shorthand for CSS property `margin` */
+    m?: WithResponsive<CSS['margin']>;
+    /** Shorthand for CSS property `marginTop` */
+    mt?: WithResponsive<CSS['marginTop']>;
+    /** Shorthand for CSS property `marginRight` */
+    mr?: WithResponsive<CSS['marginRight']>;
+    /** Shorthand for CSS property `marginBottom` */
+    mb?: WithResponsive<CSS['marginBottom']>;
+    /** Shorthand for CSS property `marginLeft` */
+    ml?: WithResponsive<CSS['marginLeft']>;
+    /** Shorthand for CSS property `marginInline` */
+    mx?: WithResponsive<CSS['marginInline']>;
+    /** Shorthand for CSS property `marginBlock` */
+    my?: WithResponsive<CSS['marginBlock']>;
+    /** Shorthand for CSS property `marginInlineStart` */
+    ms?: WithResponsive<CSS['marginInlineStart']>;
+    /** Shorthand for CSS property `marginInlineEnd` */
+    me?: WithResponsive<CSS['marginInlineEnd']>;
+    /** Shorthand for CSS property `width` */
+    w?: WithResponsive<CSS['width']>;
+    /** Shorthand for CSS property `height` */
+    h?: WithResponsive<CSS['height']>;
+    /** Shorthand for CSS property `minWidth` */
+    minw?: WithResponsive<CSS['minWidth']>;
+    /** Shorthand for CSS property `maxWidth` */
+    maxw?: WithResponsive<CSS['maxWidth']>;
+    /** Shorthand for CSS property `minHeight` */
+    minh?: WithResponsive<CSS['minHeight']>;
+    /** Shorthand for CSS property `maxHeight` */
+    maxh?: WithResponsive<CSS['maxHeight']>;
+    /** Shorthand for CSS property `display` */
+    display?: WithResponsive<CSS['display']>;
+    /** Shorthand for CSS property `position` */
+    pos?: WithResponsive<CSS['position']>;
+    /** Shorthand for CSS property `left` */
+    left?: WithResponsive<CSS['left']>;
+    /** Shorthand for CSS property `top` */
+    top?: WithResponsive<CSS['top']>;
+    /** Shorthand for CSS property `right` */
+    right?: WithResponsive<CSS['right']>;
+    /** Shorthand for CSS property `bottom` */
+    bottom?: WithResponsive<CSS['bottom']>;
+    /** Shorthand for CSS property `inset` */
+    inset?: WithResponsive<CSS['inset']>;
+    /** Shorthand for CSS property `insetInline` */
+    insetx?: WithResponsive<CSS['insetInline']>;
+    /** Shorthand for CSS property `insetBlock` */
+    insety?: WithResponsive<CSS['insetBlock']>;
+    /** Shorthand for CSS property `boxSizing` */
+    bsz?: WithResponsive<CSS['boxSizing']>;
+    /** Shorthand for CSS property `zIndex` */
+    z?: WithResponsive<CSS['zIndex']>;
+    /** Shorthand for CSS property `background` */
+    bg?: WithResponsive<ColorScheme | CSS['background']>;
+    /** Shorthand for CSS property `backgroundColor` */
+    bgc?: WithResponsive<ColorScheme | CSS['backgroundColor']>;
+    /** Shorthand for CSS property `backgroundImage` */
+    bgi?: WithResponsive<CSS['backgroundImage']>;
+    /** Shorthand for CSS property `backgroundAttachment` */
+    bga?: WithResponsive<CSS['backgroundAttachment']>;
+    /** Shorthand for CSS property `backgroundPosition` */
+    bgp?: WithResponsive<CSS['backgroundPosition']>;
+    /** Shorthand for CSS property `backgroundSize` */
+    bgsz?: WithResponsive<CSS['backgroundSize']>;
+    /** Shorthand for CSS property `backgroundRepeat` */
+    bgr?: WithResponsive<CSS['backgroundRepeat']>;
+    /** Shorthand for CSS property `color` */
+    c?: WithResponsive<ColorScheme | CSS['color']>;
+    /** Shorthand for CSS property `fontFamily` */
+    ff?: WithResponsive<CSS['fontFamily']>;
+    /** Shorthand for CSS property `fontSize` */
+    fs?: WithResponsive<CSS['fontSize']>;
+    /** Shorthand for CSS property `fontWeight` */
+    fw?: WithResponsive<CSS['fontWeight']>;
+    /** Shorthand for CSS property `textAlign` */
+    ta?: WithResponsive<CSS['textAlign']>;
+    /** Shorthand for CSS property `textTransform` */
+    tt?: WithResponsive<CSS['textTransform']>;
+    /** Shorthand for CSS property `textDecoration` */
+    td?: WithResponsive<CSS['textDecoration']>;
+    /** Shorthand for CSS property `textDecorationStyle` */
+    tds?: WithResponsive<CSS['textDecorationStyle']>;
+    /** Shorthand for CSS property `textDecorationColor` */
+    tdc?: WithResponsive<ColorScheme | CSS['textDecorationColor']>;
+    /** Shorthand for CSS property `letterSpacing` */
+    lts?: WithResponsive<CSS['letterSpacing']>;
+    /** Shorthand for CSS property `lineHeight` */
+    lh?: WithResponsive<CSS['lineHeight']>;
+    /** Shorthand for CSS property `border` */
+    bd?: WithResponsive<CSS['border']>;
+    /** Shorthand for CSS property `borderStyle` */
+    bs?: WithResponsive<CSS['borderStyle']>;
+    /** Shorthand for CSS property `borderColor` */
+    bc?: WithResponsive<ColorScheme | CSS['borderColor']>;
+    /** Shorthand for CSS property `borderWidth` */
+    bw?: WithResponsive<CSS['borderWidth']>;
+    /** Shorthand for CSS property `borderTop` */
+    bdt?: WithResponsive<CSS['borderTop']>;
+    /** Shorthand for CSS property `borderBottom` */
+    bdb?: WithResponsive<CSS['borderBottom']>;
+    /** Shorthand for CSS property `borderLeft` */
+    bdl?: WithResponsive<CSS['borderLeft']>;
+    /** Shorthand for CSS property `borderRight` */
+    bdr?: WithResponsive<CSS['borderRight']>;
+    /** Shorthand for CSS property `borderTopStyle` */
+    bdts?: WithResponsive<CSS['borderTopStyle']>;
+    /** Shorthand for CSS property `borderBottomStyle` */
+    bdbs?: WithResponsive<CSS['borderBottomStyle']>;
+    /** Shorthand for CSS property `borderLeftStyle` */
+    bdls?: WithResponsive<CSS['borderLeftStyle']>;
+    /** Shorthand for CSS property `borderRightStyle` */
+    bdrs?: WithResponsive<CSS['borderRightStyle']>;
+    /** Shorthand for CSS property `borderTopColor` */
+    bdtc?: WithResponsive<ColorScheme | CSS['borderTopColor']>;
+    /** Shorthand for CSS property `borderBottomColor` */
+    bdbc?: WithResponsive<ColorScheme | CSS['borderBottomColor']>;
+    /** Shorthand for CSS property `borderLeftColor` */
+    bdlc?: WithResponsive<ColorScheme | CSS['borderLeftColor']>;
+    /** Shorthand for CSS property `borderRightColor` */
+    bdrc?: WithResponsive<ColorScheme | CSS['borderRightColor']>;
+    /** Shorthand for CSS property `borderTopWidth` */
+    bdtw?: WithResponsive<CSS['borderTopWidth']>;
+    /** Shorthand for CSS property `borderBottomWidth` */
+    bdbw?: WithResponsive<CSS['borderBottomWidth']>;
+    /** Shorthand for CSS property `borderLeftWidth` */
+    bdlw?: WithResponsive<CSS['borderLeftWidth']>;
+    /** Shorthand for CSS property `borderRightWidth` */
+    bdrw?: WithResponsive<CSS['borderRightWidth']>;
+    /** Shorthand for CSS property `borderRadius` */
+    rounded?: WithResponsive<Size | CSS['borderRadius'] | 'full'>;
+    /** Shorthand for CSS property `boxShadow` */
+    shadow?: WithResponsive<Size | CSS['boxShadow']>;
+    /** CSS property `opacity` */
+    opacity?: WithResponsive<CSS['opacity']>;
+    /** Shorthand for CSS property `gap` */
+    spacing?: WithResponsive<CSS['gap']>;
+    /** CSS property `gap` */
+    gap?: WithResponsive<CSS['gap']>;
+    /** CSS property `rowGap` */
+    rowgap?: WithResponsive<CSS['rowGap']>;
+    /** CSS property `columnGap` */
+    colgap?: WithResponsive<CSS['columnGap']>;
+    /** Shorthand for CSS property `alignItems` */
+    align?: WithResponsive<CSS['alignItems']>;
+    /** Shorthand for CSS property `justifyContent` */
+    justify?: WithResponsive<CSS['justifyContent']>;
+    /** Shorthand for CSS property `alignSelf` */
+    self?: WithResponsive<CSS['alignSelf']>;
+    /** Shorthand for CSS property `flexBasis` */
+    basis?: WithResponsive<CSS['flexBasis']>;
+    /** Shorthand for CSS property `flex` */
+    flex?: WithResponsive<CSS['flex']>;
+    /** Shorthand for CSS property `flexGrow` */
+    grow?: WithResponsive<CSS['flexGrow']>;
+    /** Shorthand for CSS property `order` */
+    order?: WithResponsive<CSS['order']>;
+    /** Shorthand for CSS property `flexShrink` */
+    shrink?: WithResponsive<CSS['flexShrink']>;
+    /** Shorthand for CSS property `flexDirection` */
+    direction?: WithResponsive<CSS['flexDirection']>;
+}
+export {};

package/esm/internals/styled-system/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/internals/{hooks → styled-system}/useStyled.d.ts

@@ -1,13 +1,10 @@
 import { CSSProperties } from 'react';
-import type { Breakpoints, ResponsiveValue } from '../types';
-/**
- * Options for the useStyled hook
- */
+import type { Breakpoints, WithResponsive } from '../types';
 interface UseStyledOptions {
     /**
      * CSS variables to apply
      */
-    cssVars?: Record<string, string | number | undefined | ResponsiveValue<string | number>>;
+    cssVars?: Record<string, WithResponsive<string | number | undefined>>;
     /**
      * Base class name to include
      */
@@ -23,7 +20,6 @@ interface UseStyledOptions {
     enabled?: boolean | Breakpoints;
     /**
      * Prefix for the generated class name
-     * @default 'rs'
      */
     prefix?: string;
 }

package/esm/internals/{hooks → styled-system}/useStyled.js

@@ -1,82 +1,17 @@
 'use client';
-import { useId, useLayoutEffect, useContext } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import { StyleManager } from "../utils/style-sheet/style-manager.js";
-import { BREAKPOINTS } from "../constants/index.js";
+import { useId, useContext } from 'react';
+import { useIsomorphicLayoutEffect } from "../hooks/index.js";
+import { isCSSProperty } from "../utils/index.js";
 import { CustomContext } from "../Provider/CustomContext.js";
-// CSS Property Map
-const propertyMap = {
-  // Padding
-  p: 'padding',
-  pt: 'padding-top',
-  pr: 'padding-right',
-  pb: 'padding-bottom',
-  pl: 'padding-left',
-  px: 'padding-inline',
-  py: 'padding-block',
-  // Margin
-  m: 'margin',
-  mt: 'margin-top',
-  mr: 'margin-right',
-  mb: 'margin-bottom',
-  ml: 'margin-left',
-  mx: 'margin-inline',
-  my: 'margin-block',
-  // Size
-  w: 'width',
-  h: 'height',
-  minw: 'min-width',
-  maxw: 'max-width',
-  minh: 'min-height',
-  maxh: 'max-height',
-  // Display
-  display: 'display',
-  // Color and Background
-  c: 'color',
-  bg: 'background',
-  // Border
-  bd: 'border',
-  rounded: 'border-radius',
-  // Shadow
-  shadow: 'box-shadow',
-  // Stack
-  spacing: 'gap',
-  align: 'align-items',
-  justify: 'justify-content'
-};
-
-// Breakpoint values in pixels - matching SCSS variables
-const breakpointValues = {
-  xs: 0,
-  // Base mobile first
-  sm: 576,
-  // $screen-sm
-  md: 768,
-  // $screen-md
-  lg: 992,
-  // $screen-lg
-  xl: 1200,
-  // $screen-xl
-  xxl: 1400 // $screen-xxl
-};
-
-/**
- * Options for the useStyled hook
- */
+import { breakpointValues, isResponsiveValue } from "./responsive.js";
+import { cssSystemPropAlias } from "./css-alias.js";
+import { StyleManager } from "./style-manager.js";
 
 /**
  * Result of the useStyled hook
  */
 
-/**
- * Checks if a value is a responsive value object
- * @param value - Value to check
- * @returns True if the value is a responsive value object
- */
-function isResponsiveValue(value) {
-  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => BREAKPOINTS.includes(key));
-}
-
 /**
  * Custom hook for managing component styling with scoped CSS variables
  *
@@ -112,7 +47,7 @@ export function useStyled(options) {
   const shouldApplyStyles = enabled && !isEmpty(cssVars);
 
   // Apply CSS variables through StyleManager
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!shouldApplyStyles) return;
 
     // Create base CSS rules for the variables
@@ -150,9 +85,11 @@ export function useStyled(options) {
       const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
 
       // Check if the property has a corresponding CSS property mapping
-      const cssProperty = propertyMap[propName];
+      const cssProperty = cssSystemPropAlias[propName];
       if (cssProperty) {
-        basePropRules += `${cssProperty}: var(${varName}); `;
+        basePropRules += `${cssProperty.property}: var(${varName}); `;
+      } else if (isCSSProperty(propName)) {
+        basePropRules += `${propName}: var(${varName}); `;
       }
     });
 
@@ -174,7 +111,8 @@ export function useStyled(options) {
         md: '',
         lg: '',
         xl: '',
-        xxl: ''
+        xxl: '',
+        '2xl': ''
       };
       const breakpointPropRules = {
         xs: '',
@@ -182,7 +120,8 @@ export function useStyled(options) {
         md: '',
         lg: '',
         xl: '',
-        xxl: ''
+        xxl: '',
+        '2xl': ''
       };
 
       // Group styles by breakpoint
@@ -190,7 +129,6 @@ export function useStyled(options) {
         Object.entries(responsiveValue).forEach(([breakpoint, value]) => {
           const bp = breakpoint;
           if (value !== undefined && bp !== 'xs') {
-            // Skip xs as it's already in base styles
             // Add the CSS variable definition for this breakpoint
             breakpointVarRules[bp] += `${varName}: ${value}; `;
 
@@ -198,9 +136,11 @@ export function useStyled(options) {
             const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
 
             // Check if the property has a corresponding CSS property mapping
-            const cssProperty = propertyMap[propName];
+            const cssProperty = cssSystemPropAlias[propName];
             if (cssProperty) {
               breakpointPropRules[bp] += `${cssProperty}: var(${varName}); `;
+            } else if (isCSSProperty(propName)) {
+              breakpointPropRules[bp] += `${propName}: var(${varName}); `;
             }
           }
         });
@@ -213,7 +153,8 @@ export function useStyled(options) {
         md: breakpointVarRules.md + breakpointPropRules.md,
         lg: breakpointVarRules.lg + breakpointPropRules.lg,
         xl: breakpointVarRules.xl + breakpointPropRules.xl,
-        xxl: breakpointVarRules.xxl + breakpointPropRules.xxl
+        xxl: breakpointVarRules.xxl + breakpointPropRules.xxl,
+        '2xl': breakpointVarRules['2xl'] + breakpointPropRules['2xl']
       };
 
       // Add media queries for each breakpoint with rules (skip xs)

package/esm/internals/types/html.d.ts

@@ -2,20 +2,20 @@ import React from 'react';
 /** React element with optional props and HTML attributes. */
 export type ReactElement<P = any> = React.ReactElement<P & React.HTMLAttributes<any>>;
 /** Removes 'onSelect' property from the given type. */
-export type PropsWithoutSelect<T> = Omit<T, 'onSelect'>;
+export type PropsWithoutSelect<T> = Omit<T, 'onSelect' | 'color'>;
 /** Removes 'onChange' property from the given type. */
-export type PropsWithoutChange<T> = Omit<T, 'onChange'>;
+export type PropsWithoutChange<T> = Omit<T, 'onChange' | 'color'>;
 export type PropsWithout<T, K extends keyof T> = Omit<T, K>;
 /** HTML props excluding 'onSelect' attribute. */
 export type HTMLPropsWithoutSelect<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithoutSelect<P>;
 /** HTML props excluding 'onChange' attribute. */
 export type HTMLPropsWithoutChange<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithoutChange<P>;
 /** Input props with 'onChange' and 'size' attributes removed. */
-export type SanitizedInputProps = PropsWithout<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>;
+export type SanitizedInputProps = PropsWithout<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'color'>;
 /** Textarea props with 'onChange' attribute removed. */
-export type SanitizedTextareaProps = PropsWithout<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>;
+export type SanitizedTextareaProps = PropsWithout<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'color'>;
 /** HTML props excluding 'title', 'onToggle', and 'onSelect' attributes. */
-export type SanitizedHTMListProps<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithout<P, 'title' | 'onToggle' | 'onSelect'>;
-export type WithoutChildren<T> = Omit<T, 'children'>;
+export type SanitizedHTMListProps<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithout<P, 'title' | 'onToggle' | 'onSelect' | 'color'>;
+export type WithoutChildren<T> = Omit<T, 'children' | 'color'>;
 export type CSSVariables = Partial<Record<`--${string}`, string | number | undefined>>;
 export type StyleProperties = React.CSSProperties | CSSVariables;

package/esm/internals/types/picker.d.ts

@@ -90,7 +90,7 @@ export interface DataProps<TData> {
      */
     childrenKey?: string;
 }
-export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends PopupProps, Omit<BoxProps, 'height'>, AnimationEventProps {
     id?: string;
     /**
      * Custom Ref for the picker
@@ -139,7 +139,7 @@ export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, Animatio
     /** Custom render extra footer */
     renderExtraFooter?: () => ReactNode;
 }
-export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends PickerBaseProps<L>, FormControlBaseProps<T>, DataProps<D> {
+export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends DataProps<D>, PickerBaseProps<L>, FormControlBaseProps<T> {
     /**
      * Disabled items
      */

package/esm/internals/types/sizes.d.ts

@@ -21,7 +21,8 @@ export type Size = `${SizeEnum}`;
 /** Basic size type (xs, sm, md, lg) */
 export type BasicSize = Exclude<Size, 'xl'>;
 export type TextSize = `${TypographySizeEnum}`;
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '2xl';
 export type ResponsiveValue<T> = {
     [key in Breakpoints]?: T;
 };
+export type WithResponsive<T> = T | ResponsiveValue<T>;

package/esm/internals/utils/colours.d.ts

@@ -5,7 +5,7 @@ import { Color } from '../types/colours';
  * @param color The color value to check
  * @returns The CSS variable if it's a valid color type, or the original value
  */
-export declare const getColorVar: (color: Color | string | undefined) => string | undefined;
+export declare const getColorValue: (color: Color | string | undefined) => string | undefined;
 export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
 export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, name?: string | undefined, prop?: string) => {
     [x: string]: string | (string & {}) | undefined;

package/esm/internals/utils/colours.js

@@ -8,7 +8,7 @@ import { createStyleGetter } from "./style-sheet/index.js";
  * @param color The color value to check
  * @returns The CSS variable if it's a valid color type, or the original value
  */
-export const getColorVar = color => {
+export const getColorValue = color => {
   if (!color) return undefined;
 
   // Check if color is a base color (e.g., 'red', 'blue')
@@ -41,7 +41,7 @@ const colorConfig = {
   prop: 'color',
   useGlobalVar: true,
   presetChecker: isPresetColor,
-  valueTransformer: getColorVar
+  valueTransformer: getColorValue
 };
 export const getColorStyle = createStyleGetter(colorConfig);
 

package/esm/internals/utils/sizes.d.ts

@@ -1,5 +1,6 @@
 import { SizeEnum } from '../types';
 export declare const isPresetSize: (size?: SizeEnum | number | string | null) => boolean;
+export declare const getSizeValue: (type: string, size: SizeEnum | number | string | null) => string | undefined;
 export declare const getSizeStyle: (value?: string | number | undefined, name?: string | undefined, prop?: string) => {
     [x: string]: string | number | undefined;
 } | undefined;

package/esm/internals/utils/sizes.js

@@ -13,6 +13,12 @@ const sizeConfig = {
   presetChecker: isPresetSize,
   valueTransformer: getCssValue
 };
+export const getSizeValue = (type, size) => {
+  if (isPresetSize(size)) {
+    return `var(--rs-${type}-${size})`;
+  }
+  return getCssValue(size);
+};
 export const getSizeStyle = createStyleGetter(sizeConfig);
 const lineHeightConfig = {
   prop: 'line-height',

package/esm/internals/utils/style-sheet/css.d.ts

@@ -12,3 +12,9 @@ export declare function mergeStyles(...styles: (StyleProperties | undefined | nu
  * Create CSS variables for offset positioning
  */
 export declare function createOffsetStyles(offset?: [number | string, number | string], prefix?: string): React.CSSProperties | undefined;
+/**
+ * Check if a string is a valid CSS property name
+ * @param prop - The property name to check
+ * @returns True if the property is a valid CSS property
+ */
+export declare function isCSSProperty(prop: string): prop is Extract<keyof CSSStyleDeclaration, string>;

package/esm/internals/utils/style-sheet/css.js

@@ -1,5 +1,7 @@
 'use client';
 import isEmpty from 'lodash/isEmpty';
+import camelCase from 'lodash/camelCase';
+import canUseDOM from 'dom-lib/canUseDOM';
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
@@ -46,4 +48,36 @@ export function createOffsetStyles(offset, prefix = '--rs-offset') {
     [`${prefix}-x`]: getCssValue(x),
     [`${prefix}-y`]: getCssValue(y)
   };
+}
+
+/**
+ * Check if a string is a valid CSS property name
+ * @param prop - The property name to check
+ * @returns True if the property is a valid CSS property
+ */
+export function isCSSProperty(prop) {
+  if (!canUseDOM || typeof prop !== 'string' || !prop) {
+    return false;
+  }
+  try {
+    // Handle standard properties
+    const style = document.documentElement.style;
+
+    // Check standard property
+    if (prop in style) {
+      return true;
+    } else if (camelCase(prop) in style) {
+      return true;
+    }
+
+    // Handle vendor-prefixed properties (e.g., Webkit, Moz, ms, O)
+    const prefixes = ['Webkit', 'Moz', 'ms', 'O'];
+    const propName = prop.charAt(0).toUpperCase() + prop.slice(1);
+    return prefixes.some(prefix => `${prefix}${propName}` in style);
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`Failed to check CSS property: ${prop}`, e);
+    }
+    return false;
+  }
 }

package/esm/internals/utils/style-sheet/index.d.ts

@@ -2,4 +2,3 @@ export * from './styles';
 export * from './css';
 export * from './prefix';
 export * from './responsive';
-export * from './style-manager';

package/esm/internals/utils/style-sheet/index.js

@@ -2,5 +2,4 @@
 export * from "./styles.js";
 export * from "./css.js";
 export * from "./prefix.js";
-export * from "./responsive.js";
-export * from "./style-manager.js";
+export * from "./responsive.js";

package/esm/internals/utils/style-sheet/responsive.d.ts

@@ -1,2 +1,17 @@
 import type { ResponsiveValue } from '../../types';
+/**
+ * Generates responsive CSS class names based on the provided value and prefix function.
+ * Handles both static and responsive values.
+ *
+ * @example
+ * // With a single value
+ * // getResponsiveClasses('rs-row', 'top');
+ * // Returns: ['rs-row-top']
+ *
+ * @example
+ * // With responsive values
+ * // getResponsiveClasses('rs-row', { xs: 'top', md: 'bottom' });
+ * // Returns: ['rs-row-xs-top', 'rs-row-md-bottom']
+ *
+ */
 export declare const getResponsiveClasses: <T = string>(prefix: (...classes: any[]) => string, value?: T | ResponsiveValue<T> | undefined) => string[];

package/esm/internals/utils/style-sheet/responsive.js

@@ -1,12 +1,31 @@
 'use client';
 import { BREAKPOINTS } from "../../constants/index.js";
+/**
+ * Generates responsive CSS class names based on the provided value and prefix function.
+ * Handles both static and responsive values.
+ *
+ * @example
+ * // With a single value
+ * // getResponsiveClasses('rs-row', 'top');
+ * // Returns: ['rs-row-top']
+ *
+ * @example
+ * // With responsive values
+ * // getResponsiveClasses('rs-row', { xs: 'top', md: 'bottom' });
+ * // Returns: ['rs-row-xs-top', 'rs-row-md-bottom']
+ *
+ */
 export const getResponsiveClasses = (prefix, value) => {
   if (!value) {
     return [];
   }
+
+  // Handle non-object (static) values
   if (typeof value !== 'object') {
     return [prefix(value)];
   }
+
+  // Process responsive values for each breakpoint
   return BREAKPOINTS.reduce((classes, breakpoint) => {
     const breakpointValue = value[breakpoint];
     if (!breakpointValue) return classes;

package/esm/useMediaQuery/breakpoints.d.ts

@@ -2,17 +2,17 @@ import type { BreakpointMap, BreakpointSystem } from './types';
 /**
  * Create breakpoint system
  *
- * This function takes a breakpoint map and returns an enhanced breakpoint system
+ * This function takes a breakpoint map with numeric values and returns an enhanced breakpoint system
  * that provides various media queries for responsive design.
  *
  * @example
  * ```ts
  * const breakpoints = createBreakpoints({
- *   xs: '0px',
- *   sm: '576px',
- *   md: '768px',
- *   lg: '992px',
- *   xl: '1200px'
+ *   xs: 0,
+ *   sm: 576,
+ *   md: 768,
+ *   lg: 992,
+ *   xl: 1200
  * });
  *
  * // Using breakpoints