rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/cjs/internals/hooks/useEnsuredRef.js

@@ -27,7 +27,7 @@ var _react = require("react");
  *
  */
 function useEnsuredRef(ref) {
-  const dumpRef = (0, _react.useRef)();
+  const dumpRef = (0, _react.useRef)(null);
   if (ref) {
     return ref;
   }

package/cjs/internals/hooks/useFocus.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E>): {
+export declare function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E | null>): {
     grab: () => void;
     release: (options?: FocusOptions) => void;
 };

package/cjs/internals/hooks/useFocusVirtualListItem.d.ts

@@ -6,5 +6,5 @@
  * @param focused - Boolean indicating if the item should be focused.
  * @returns A ref to be attached to the list item element.
  */
-export declare function useFocusVirtualListItem<T extends HTMLElement>(focused?: boolean): import("react").RefObject<T>;
+export declare function useFocusVirtualListItem<T extends HTMLElement>(focused?: boolean): import("react").RefObject<T | null>;
 export default useFocusVirtualListItem;

package/cjs/internals/hooks/useInternalId.js

@@ -11,7 +11,7 @@ var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
  * Used for generating unique ID for DOM elements
  */
 function useInternalId(namespace) {
-  const idRef = (0, _react.useRef)();
+  const idRef = (0, _react.useRef)(null);
   if (!idRef.current) {
     idRef.current = (0, _uniqueId.default)(`internal://${namespace}`);
   }

package/cjs/internals/hooks/useRootClose.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type TargetType = React.RefObject<Element> | Element | null | undefined;
+type TargetType = React.RefObject<Element | null> | Element | null | undefined;
 interface Options {
     disabled: boolean;
     triggerTarget: TargetType;

package/{esm/internals/hooks/useClassNames.d.ts → cjs/internals/hooks/useStyles.d.ts}

@@ -1,24 +1,29 @@
+import type { ResponsiveValue } from '../types';
 export type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean;
 export type ClassArray = Array<ClassValue>;
 export interface ClassDictionary {
     [id: string]: any;
 }
 interface ClassNameUtils {
-    withClassPrefix: (...classes: ClassValue[]) => string;
+    withPrefix: (...classes: ClassValue[]) => string;
     merge: (...classes: ClassValue[]) => string;
     prefix: (...classes: ClassValue[]) => string;
+    responsive: <T = string>(value?: T | ResponsiveValue<T>) => string[];
     rootPrefix: (...classes: ClassValue[]) => string;
+    cssVar: (prop: string, value?: string | number | (string | number)[], valueTransformer?: (value: any) => any) => {
+        [x: string]: string | number | undefined;
+    } | undefined;
 }
 /**
  * Add a prefix to all classNames.
  *
  * @param str prefix of className
- * @returns { withClassPrefix, merge, prefix }
- *  - withClassPrefix: A function of combining className and adding a prefix to each className.
+ * @returns { withPrefix, merge, prefix }
+ *  - withPrefix: A function of combining className and adding a prefix to each className.
  *    At the same time, the default `classPrefix` is the first className.
  *  - merge: A merge className function.
  *  - prefix: Add a prefix to className
  *  - rootPrefix
  */
-export declare function useClassNames(str: string): ClassNameUtils;
-export default useClassNames;
+export declare function useStyles(str: string): ClassNameUtils;
+export default useStyles;

package/cjs/internals/hooks/{useClassNames.js → useStyles.js}

@@ -4,10 +4,10 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-exports.useClassNames = useClassNames;
-var _react = require("react");
+exports.useStyles = useStyles;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _prefix = require("../utils/prefix");
+var _react = require("react");
+var _utils = require("../utils");
 var _CustomProvider = require("../../CustomProvider/CustomProvider");
 // This is the only way I found to break circular references between ClassArray and ClassValue
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
@@ -16,18 +16,18 @@ var _CustomProvider = require("../../CustomProvider/CustomProvider");
  * Add a prefix to all classNames.
  *
  * @param str prefix of className
- * @returns { withClassPrefix, merge, prefix }
- *  - withClassPrefix: A function of combining className and adding a prefix to each className.
+ * @returns { withPrefix, merge, prefix }
+ *  - withPrefix: A function of combining className and adding a prefix to each className.
  *    At the same time, the default `classPrefix` is the first className.
  *  - merge: A merge className function.
  *  - prefix: Add a prefix to className
  *  - rootPrefix
  */
-function useClassNames(str) {
+function useStyles(str) {
   const {
     classPrefix = 'rs'
   } = (0, _react.useContext)(_CustomProvider.CustomContext) || {};
-  const componentName = (0, _prefix.prefix)(classPrefix, str);
+  const baseClass = (0, _utils.prefix)(classPrefix, str);
 
   /**
    * @example
@@ -36,23 +36,23 @@ function useClassNames(str) {
    * prefix('red', { active: true }) => 'rs-button-red rs-button-active'
    */
   const prefix = (0, _react.useCallback)(function () {
-    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _prefix.prefix)(componentName, item)) : [];
+    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _utils.prefix)(baseClass, item)) : [];
     return mergeClasses.filter(cls => cls).join(' ');
-  }, [componentName]);
+  }, [baseClass]);
 
   /**
    * @example
    *
    * if str = 'button':
-   * withClassPrefix('red', { active: true }) => 'rs-button rs-button-red rs-button-active'
+   * withPrefix('red', { active: true }) => 'rs-button rs-button-red rs-button-active'
    */
-  const withClassPrefix = (0, _react.useCallback)(function () {
+  const withPrefix = (0, _react.useCallback)(function () {
     for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
       classes[_key] = arguments[_key];
     }
     const mergeClasses = prefix(classes);
-    return mergeClasses ? `${componentName} ${mergeClasses}` : componentName;
-  }, [componentName, prefix]);
+    return mergeClasses ? `${baseClass} ${mergeClasses}` : baseClass;
+  }, [baseClass, prefix]);
 
   /**
    * @example
@@ -60,14 +60,29 @@ function useClassNames(str) {
    * rootPrefix('btn', { active: true }) => 'rs-btn rs-active'
    */
   const rootPrefix = function () {
-    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _prefix.prefix)(classPrefix, item)) : [];
+    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _utils.prefix)(classPrefix, item)) : [];
     return mergeClasses.filter(cls => cls).join(' ');
   };
+  const cssVar = (0, _react.useCallback)((prop, value, valueTransformer) => {
+    if (typeof value === 'undefined') {
+      return;
+    }
+    return (0, _utils.createStyleGetter)({
+      prop,
+      valueTransformer
+    })(value, str, prop);
+  }, [str]);
+  const responsive = (0, _react.useCallback)(value => {
+    if (!value) return [];
+    return (0, _utils.getResponsiveClasses)(prefix, value);
+  }, [prefix]);
   return {
-    withClassPrefix,
-    merge: _classnames.default,
+    cssVar,
+    withPrefix,
     prefix,
-    rootPrefix
+    responsive,
+    rootPrefix,
+    merge: _classnames.default
   };
 }
-var _default = exports.default = useClassNames;
+var _default = exports.default = useStyles;

package/cjs/internals/hooks/useTimeout.js

@@ -18,7 +18,7 @@ function useTimeout(fn, ms, enabled) {
   if (enabled === void 0) {
     enabled = true;
   }
-  const timeout = (0, _react.useRef)();
+  const timeout = (0, _react.useRef)(null);
   const callback = (0, _react.useRef)(fn);
   const clear = (0, _react.useCallback)(() => {
     timeout.current && clearTimeout(timeout.current);

package/cjs/internals/hooks/useUpdatedRef.d.ts

@@ -5,5 +5,5 @@
  * @param value The Ref value
  * @category refs
  */
-export declare function useUpdatedRef<T>(value: T): import("react").MutableRefObject<T>;
+export declare function useUpdatedRef<T>(value: T): import("react").RefObject<T>;
 export default useUpdatedRef;

package/cjs/internals/types/colours.d.ts

@@ -7,4 +7,8 @@ export declare enum Colours {
     Blue = "blue",
     Violet = "violet"
 }
+export type ShadeValue = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 export type Color = `${Colours}`;
+export type ColorGray = 'gray';
+export type ColorShade = `${Colours}.${ShadeValue}` | `${ColorGray}.${ShadeValue}`;
+export type ColorScheme = Color | ColorShade;

package/cjs/internals/types/colours.js

@@ -12,4 +12,7 @@ let Colours = exports.Colours = /*#__PURE__*/function (Colours) {
   Colours["Blue"] = "blue";
   Colours["Violet"] = "violet";
   return Colours;
-}({});
+}({}); // Define available shade values
+// Basic color type without shades
+// Color with shade type (e.g., red.50, blue.500)
+// Combined type that allows both basic colors and colors with shades

package/cjs/internals/types/form.d.ts

@@ -1,21 +1,21 @@
 import { InputHTMLAttributes, SyntheticEvent } from 'react';
-export interface FormControlBaseProps<ValueType = InputHTMLAttributes<HTMLInputElement>['value']> {
+export interface FormControlBaseProps<T = InputHTMLAttributes<HTMLInputElement>['value']> {
     /** Name of the form field */
     name?: string;
     /** Initial value */
-    defaultValue?: ValueType;
+    defaultValue?: T;
     /** Current value of the component. Creates a controlled component */
-    value?: ValueType;
-    /**
-     * Called after the value has been changed
-     * todo Override event as ChangeEvent in components where onChange is delegated
-     *      to an underlying <input> element
-     */
-    onChange?: (value: ValueType, event: SyntheticEvent) => void;
+    value?: T;
     /** Set the component to be disabled and cannot be entered */
     disabled?: boolean;
     /** Render the control as plain text */
     plaintext?: boolean;
     /** Make the control readonly */
     readOnly?: boolean;
+    /**
+     * Called after the value has been changed
+     * todo Override event as ChangeEvent in components where onChange is delegated
+     *      to an underlying <input> element
+     */
+    onChange?: (value: T, event: SyntheticEvent) => void;
 }

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

@@ -0,0 +1,19 @@
+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'>;
+/** Removes 'onChange' property from the given type. */
+export type PropsWithoutChange<T> = Omit<T, 'onChange'>;
+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'>;
+/** 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 CSSVariables = Partial<Record<`--${string}`, string | number | undefined>>;
+export type StyleProperties = React.CSSProperties | CSSVariables;

package/cjs/internals/types/html.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

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

@@ -7,3 +7,5 @@ export * from './date';
 export * from './form';
 export * from './picker';
 export * from './utils';
+export * from './html';
+export * from './sizes';

package/cjs/internals/types/index.js

@@ -55,4 +55,16 @@ Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _utils[key]) return;
   exports[key] = _utils[key];
+});
+var _html = require("./html");
+Object.keys(_html).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _html[key]) return;
+  exports[key] = _html[key];
+});
+var _sizes = require("./sizes");
+Object.keys(_sizes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sizes[key]) return;
+  exports[key] = _sizes[key];
 });

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

@@ -3,19 +3,20 @@ import type { Placement } from './placement';
 import type { ToArray } from './utils';
 import type { FormControlBaseProps } from './form';
 import type { AnimationEventProps } from './animation';
-import type { SizeType, WithAsProps } from './shared';
+import type { WithAsProps } from './shared';
+import type { Size } from './sizes';
 import type { PickerHandle } from '../Picker/types';
-export interface ItemDataType<T = number | string> extends Record<string, any> {
+export interface Option<T = number | string> extends Record<string, any> {
     label?: string | ReactNode;
     value?: T;
     groupBy?: string;
-    parent?: ItemDataType<T>;
-    children?: ItemDataType<T>[];
+    parent?: Option<T>;
+    children?: Option<T>[];
     loading?: boolean;
 }
-export type DataItemValue = number | string | null;
+export type OptionValue = number | string | null;
 export type OnChangeCallback<T, E = SyntheticEvent> = (value: T, event: E) => void;
-export interface DeprecatedPickerProps {
+export interface DeprecatedMenuProps {
     /**
      * Custom menu class name
      * @deprecated Use `popupClassName` instead
@@ -33,10 +34,36 @@ export interface DeprecatedPickerProps {
      */
     menuAutoWidth?: boolean;
     /**
-     * Custom render tree
-     * @deprecated Use `renderTree` instead
+     * Set the width of the menu
+     *
+     * @deprecated Use columnWidth instead
+     */
+    menuWidth?: number;
+    /**
+     * Set the height of the menu
+     * @deprecated Use columnHeight instead
+     */
+    menuHeight?: number;
+    /**
+     * Set the max height of the menu
+     * @deprecated Use `listboxMaxHeight` instead
+     */
+    menuMaxHeight?: number;
+    /**
+     * Custom render menu
+     * @deprecated For TreePicker and CheckTreePicker, use `renderTree` instead. For Cascader and MultiCascader, use `renderColumn` instead.
+     */
+    renderMenu?: any;
+    /**
+     * Custom render menu item
+     * @deprecated Use renderTreeNode or renderOption instead
      */
-    renderMenu?: (menu: ReactNode) => ReactNode;
+    renderMenuItem?: any;
+    /**
+     * Custom render menu group
+     * @deprecated Use renderOptionGroup instead
+     */
+    renderMenuGroup?: any;
 }
 export type PickerAppearance = 'default' | 'subtle';
 /**
@@ -63,7 +90,7 @@ export interface DataProps<TData> {
      */
     childrenKey?: string;
 }
-export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends PopupProps, WithAsProps, AnimationEventProps {
     id?: string;
     /**
      * Custom Ref for the picker
@@ -83,14 +110,6 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     disabled?: boolean;
     /** You can use a custom element for this component */
     toggleAs?: ElementType;
-    /** A CSS class to apply to the Menu DOM node. */
-    menuClassName?: string;
-    /** A style to apply to the Menu DOM node. */
-    menuStyle?: CSSProperties;
-    /** Picker menu auto width */
-    menuAutoWidth?: boolean;
-    /** Picker menu max Height */
-    menuMaxHeight?: number;
     /** Placeholder text */
     placeholder?: ReactNode;
     /** The placement of picker */
@@ -104,7 +123,7 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     /** A picker that can clear values */
     cleanable?: boolean;
     /** A picker can have different sizes */
-    size?: SizeType;
+    size?: Size;
     /** Called when Modal is displayed */
     onOpen?: () => void;
     /** Called when Modal is closed */
@@ -126,3 +145,24 @@ export interface FormControlPickerProps<T = any, L = any, D = Record<string, any
      */
     disabledItemValues?: ToArray<NonNullable<I>>;
 }
+export interface PopupProps {
+    /** Custom CSS class for the popup */
+    popupClassName?: string;
+    /** Custom inline styles for the popup */
+    popupStyle?: React.CSSProperties;
+    /** Whether the popup should automatically adjust its width */
+    popupAutoWidth?: boolean;
+}
+/**
+ * Properties for the Listbox component.
+ */
+export interface ListboxProps {
+    /** Maximum height of the listbox */
+    listboxMaxHeight?: number;
+    /** Custom render function for the entire listbox */
+    renderListbox?: (menu: React.ReactNode) => React.ReactNode;
+    /** Custom render function for individual options */
+    renderOption?: (label: React.ReactNode, item: Option) => React.ReactNode;
+    /** Custom render function for option groups */
+    renderOptionGroup?: (title: React.ReactNode, item: Option) => React.ReactNode;
+}

package/cjs/internals/types/placement.d.ts

@@ -1,5 +1,4 @@
 export type PlacementCardinal = 'top' | 'bottom' | 'right' | 'left';
-export type PlacementCornersPolyfill = 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
-export type PlacementCorners = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' | PlacementCornersPolyfill;
+export type PlacementCorners = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' | 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
 export type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
 export type Placement = PlacementCardinal | PlacementCorners | PlacementAuto;

package/cjs/internals/types/shared.d.ts

@@ -1,10 +1,7 @@
+import React from 'react';
 import type { CSSProperties, ElementType, ReactNode } from 'react';
 import type { ReplaceProps } from './utils';
-import { Colours } from './colours';
-import React from 'react';
-export type SizeType = 'lg' | 'md' | 'sm' | 'xs';
 export type StatusType = 'success' | 'warning' | 'error' | 'info';
-export type ColorType = `${Colours}`;
 export type AppearanceType = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
 export type CheckTriggerType = 'change' | 'blur' | 'none' | null;
 export type DisplayStateType = 'show' | 'hide' | 'hiding';

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

@@ -0,0 +1,25 @@
+export declare enum SizeEnum {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+export declare enum TypographySizeEnum {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XL2 = "2xl",
+    XL3 = "3xl",
+    XL4 = "4xl",
+    XL5 = "5xl",
+    XL6 = "6xl"
+}
+export type Size = `${SizeEnum}`;
+export type TextSize = `${TypographySizeEnum}`;
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type ResponsiveValue<T> = {
+    [key in Breakpoints]?: T;
+};

package/cjs/internals/types/sizes.js

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.TypographySizeEnum = exports.SizeEnum = void 0;
+let SizeEnum = exports.SizeEnum = /*#__PURE__*/function (SizeEnum) {
+  SizeEnum["XS"] = "xs";
+  SizeEnum["SM"] = "sm";
+  SizeEnum["MD"] = "md";
+  SizeEnum["LG"] = "lg";
+  SizeEnum["XL"] = "xl";
+  return SizeEnum;
+}({});
+let TypographySizeEnum = exports.TypographySizeEnum = /*#__PURE__*/function (TypographySizeEnum) {
+  TypographySizeEnum["XS"] = "xs";
+  TypographySizeEnum["SM"] = "sm";
+  TypographySizeEnum["MD"] = "md";
+  TypographySizeEnum["LG"] = "lg";
+  TypographySizeEnum["XL"] = "xl";
+  TypographySizeEnum["XL2"] = "2xl";
+  TypographySizeEnum["XL3"] = "3xl";
+  TypographySizeEnum["XL4"] = "4xl";
+  TypographySizeEnum["XL5"] = "5xl";
+  TypographySizeEnum["XL6"] = "6xl";
+  return TypographySizeEnum;
+}({});

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

@@ -1,5 +1,15 @@
 import { Color } from '../types/colours';
+/**
+ * Checks if a color value matches the pattern like 'red', 'gray.50', etc.,
+ * and returns the appropriate CSS variable format.
+ * @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 isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
+export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, component?: string | undefined, prop?: string) => {
+    [x: string]: string | (string & {}) | undefined;
+} | undefined;
 /**
  * Convert short hex color to full hex color
  * e.g. #fff -> #ffffff

package/cjs/internals/utils/colours.js

@@ -2,8 +2,36 @@
 "use strict";
 
 exports.__esModule = true;
-exports.isPresetColor = exports.getLuminance = exports.getContrastText = exports.expandHexColor = exports.createColorVariables = void 0;
+exports.isPresetColor = exports.getLuminance = exports.getContrastText = exports.getColorVar = exports.getColorStyle = exports.expandHexColor = exports.createColorVariables = void 0;
 var _colours = require("../types/colours");
+var _styleSheet = require("./style-sheet");
+/**
+ * Checks if a color value matches the pattern like 'red', 'gray.50', etc.,
+ * and returns the appropriate CSS variable format.
+ * @param color The color value to check
+ * @returns The CSS variable if it's a valid color type, or the original value
+ */
+const getColorVar = color => {
+  if (!color) return undefined;
+
+  // Check if color is a base color (e.g., 'red', 'blue')
+  const baseColorRegex = /^(red|orange|yellow|green|cyan|blue|violet|gray)$/;
+  if (baseColorRegex.test(color)) {
+    return `var(--rs-color-${color})`;
+  }
+
+  // Check if color is a color with shade (e.g., 'red.50', 'gray.900')
+  const colorWithShadeRegex = /^(red|orange|yellow|green|cyan|blue|violet|gray)\.([1-9]00|50)$/;
+  const match = color.match(colorWithShadeRegex);
+  if (match) {
+    const [, colorName, shade] = match;
+    return `var(--rs-${colorName}-${shade})`;
+  }
+
+  // Return the original value if it's not a recognized color pattern
+  return color;
+};
+exports.getColorVar = getColorVar;
 const isPresetColor = color => {
   if (!color) {
     return false;
@@ -13,12 +41,19 @@ const isPresetColor = color => {
   }
   return Object.values(_colours.Colours).includes(color);
 };
+exports.isPresetColor = isPresetColor;
+const colorConfig = {
+  prop: 'color',
+  useGlobalVar: true,
+  presetChecker: isPresetColor,
+  valueTransformer: getColorVar
+};
+const getColorStyle = exports.getColorStyle = (0, _styleSheet.createStyleGetter)(colorConfig);
 
 /**
  * Convert short hex color to full hex color
  * e.g. #fff -> #ffffff
  */
-exports.isPresetColor = isPresetColor;
 const expandHexColor = color => {
   const hex = color.toLowerCase().replace('#', '');
   if (hex.length === 3) {

package/cjs/internals/utils/createComponent.js

@@ -33,10 +33,10 @@ function createComponent(_ref) {
       ...rest
     } = propsWithDefaults;
     const {
-      withClassPrefix,
+      withPrefix,
       merge
-    } = (0, _hooks.useClassNames)(classPrefix);
-    const classes = merge(className, withClassPrefix());
+    } = (0, _hooks.useStyles)(classPrefix);
+    const classes = merge(className, withPrefix());
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, defaultProps, rest, {
       role: role,
       ref: ref,

package/cjs/internals/utils/getDOMNode.js

@@ -1,17 +1,14 @@
 'use client';
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 exports.getDOMNode = getDOMNode;
-var _reactDom = _interopRequireDefault(require("react-dom"));
-/* eslint-disable react/no-find-dom-node */
-
 function safeFindDOMNode(componentOrElement) {
   if (componentOrElement && 'setState' in componentOrElement) {
-    var _ReactDOM$findDOMNode;
-    return (_ReactDOM$findDOMNode = _reactDom.default.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(_reactDom.default, componentOrElement);
+    var _ref$current, _ref;
+    // Access the underlying DOM node through ref if available
+    return (_ref$current = componentOrElement === null || componentOrElement === void 0 || (_ref = componentOrElement.ref) === null || _ref === void 0 ? void 0 : _ref.current) !== null && _ref$current !== void 0 ? _ref$current : null;
   }
   return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;
 }
@@ -26,8 +23,6 @@ function getDOMNode(elementOrRef) {
   if (element !== null && element !== void 0 && element.nodeType && typeof (element === null || element === void 0 ? void 0 : element.nodeName) === 'string') {
     return element;
   }
-
-  // If you can't get the native HTML element, you can only get it through findDOMNode.
   return safeFindDOMNode(element);
 }
 var _default = exports.default = getDOMNode;