@flikk/ui 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/components/forms/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useId, useState } from 'react';
+import React__default, { useId, useState, useEffect } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
@@ -22,6 +22,7 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
     const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
     const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
     // Determine checked state
     const isInGroup = groupContext !== undefined;
     const checked = isInGroup ? groupContext.value === value : checkedProp;
@@ -43,7 +44,16 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const inputProps = isControlled
         ? { checked }
         : { defaultChecked };
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, radioTheme.dotSizes[size], isDisabled && "saturate-0 opacity-80"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
+    // Dev-only warning when no accessible name is provided
+    useEffect(() => {
+        if (process.env.NODE_ENV !== 'production') {
+            if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {
+                console.warn('[Radio]: No accessible name provided. Add a `label` prop, `aria-label`, or `aria-labelledby`.');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": isInvalid || undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, radioTheme.dotSizes[size], isDisabled && "saturate-0 opacity-80"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
 });
 RadioComponent.displayName = "Radio";
 const Radio = Object.assign(RadioComponent, { Group: RadioGroup });

package/dist/components/forms/Radio/Radio.theme.js

@@ -23,16 +23,20 @@ const radioTheme = {
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
         "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
-        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)] " +
+        // Invalid state
+        "data-[state=invalid]:border-[var(--color-danger)] data-[state=invalid]:focus-visible:outline-[var(--color-danger)]",
     dotStyle: "absolute top-1/2 left-1/2 pointer-events-none rounded-full bg-[var(--color-primary)]",
     dotSizes: {
         sm: "size-2.5 mt-0.25",
         md: "size-3",
+        lg: "size-3.5",
     },
     descriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0",
     sizes: {
         sm: "size-5 mt-0.5",
         md: "size-6",
+        lg: "size-7",
     },
     // Group styles
     groupStyle: "flex flex-col gap-1.5",

package/dist/components/forms/Radio/Radio.types.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 /**
  * State variants for the radio component
  */
-export type RadioState = 'default' | 'disabled';
+export type RadioState = 'default' | 'disabled' | 'invalid';
 /**
  * Size variants for the radio component
  */
-export type RadioSize = 'sm' | 'md';
+export type RadioSize = 'sm' | 'md' | 'lg';
 /**
  * Orientation for Radio.Group layout
  */
@@ -14,11 +14,9 @@ export type RadioGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Radio component props
  */
-export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
     id?: string;
-    name?: string;
     value: string | number;
-    checked?: boolean;
     onChange?: (checked: boolean, value: string | number) => void;
     label?: React.ReactNode;
     description?: React.ReactNode;
@@ -39,7 +37,11 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetE
     orientation?: RadioGroupOrientation;
     label?: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * @deprecated Use `state='invalid'` with `errorMessage` instead.
+     */
     error?: React.ReactNode;
+    errorMessage?: React.ReactNode;
     required?: boolean;
     className?: string;
 }

package/dist/components/forms/Radio/RadioGroup.js

@@ -5,7 +5,12 @@ import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { RadioGroupContext } from './RadioContext.js';
 
-const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state: stateProp = "default", orientation = "vertical", label, description, error, errorMessage, required, className, children, ...props }, ref) => {
+    // Prefer errorMessage; fall back to deprecated error prop
+    const resolvedError = errorMessage !== null && errorMessage !== void 0 ? errorMessage : error;
+    // If error (deprecated) is provided and state not explicitly set to something else,
+    // implicitly treat the group as invalid
+    const state = resolvedError && stateProp === "default" ? "invalid" : stateProp;
     const autoId = useId();
     const groupName = name !== null && name !== void 0 ? name : `radio-group-${autoId}`;
     const labelId = `${autoId}-label`;
@@ -28,8 +33,8 @@ const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultV
         size,
         state,
     }), [groupName, currentValue, size, state]);
-    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
-    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", radioTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : label), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: radioTheme.groupDescriptionStyle, children: description })) : description), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: error })) : error)] }) }));
+    const labelState = state === "invalid" ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": resolvedError ? true : undefined, "aria-errormessage": resolvedError ? errorId : undefined, className: cn("border-0 p-0 m-0", radioTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : label), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: radioTheme.groupDescriptionStyle, children: description })) : description), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), resolvedError && (typeof resolvedError === 'string' ? (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: resolvedError })) : resolvedError)] }) }));
 });
 RadioGroup.displayName = "Radio.Group";
 

package/dist/components/forms/RichTextEditor/RichTextEditor.js

@@ -416,6 +416,12 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         setShowColorPicker(false);
         setShowFontSizePicker(false);
     }, [execEditorCommand]);
+    const handleMouseDown = useCallback((event) => {
+        event.preventDefault();
+        focusEditor();
+    }, [focusEditor]);
+    const fontSizeAnimations = useMemo(() => createDropdownAnimations(fontSizeIsFlipped), [fontSizeIsFlipped]);
+    const colorAnimations = useMemo(() => createDropdownAnimations(colorIsFlipped), [colorIsFlipped]);
     const handleAlign = useCallback((alignment) => {
         const commandMap = {
             left: "justifyLeft",
@@ -525,7 +531,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
             updateFormattingState();
         }
     }, [updateFormattingState, value, sanitizeHtml]);
-    const renderToolbarTool = (tool, index) => {
+    const renderToolbarTool = (tool, toolKey) => {
         var _a, _b;
         const isActive = tool === "bold"
             ? formattingState.bold
@@ -543,21 +549,16 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                     ? formattingState.textAlign === "right"
                                     : false;
         const isFloatingToolbar = toolbarConfig.position === "floating";
-        const handleMouseDown = (event) => {
-            event.preventDefault();
-            focusEditor();
-        };
         switch (tool) {
             case "bold":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, toolKey));
             case "italic":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, toolKey));
             case "underline":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, toolKey));
             case "fontSize": {
                 const currentOption = getFontSizeOption(formattingState.fontSize);
                 const dropdownClassName = themeStyles.dropdownStyle;
-                const fontSizeAnimations = createDropdownAnimations(fontSizeIsFlipped);
                 const dropdownList = (jsx("div", { className: dropdownClassName, role: "listbox", children: FONT_SIZE_OPTIONS.map((option) => (jsx("button", { className: cn(themeStyles.dropdownItemStyle, option.key === formattingState.fontSize
                             ? "bg-[var(--color-primary-50)] text-[var(--color-primary-900)]"
                             : undefined), "data-active": option.key === formattingState.fontSize ? "true" : "false", onMouseDown: (event) => {
@@ -599,12 +600,11 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                 focusEditor();
                                 setShowFontSizePicker((previous) => !previous);
                                 setShowColorPicker(false);
-                            }, disabled: isDisabled, "aria-label": "Font size", "aria-expanded": showFontSizePicker, "aria-haspopup": "listbox", children: jsx("span", { className: "text-sm font-medium tracking-wide uppercase", children: currentOption.label }) }), toolbarConfig.position === "floating" ? null : renderedDropdown, toolbarConfig.position === "floating" ? renderedDropdown : null] }, index));
+                            }, disabled: isDisabled, "aria-label": "Font size", "aria-expanded": showFontSizePicker, "aria-haspopup": "listbox", children: jsx("span", { className: "text-sm font-medium tracking-wide uppercase", children: currentOption.label }) }), toolbarConfig.position === "floating" ? null : renderedDropdown, toolbarConfig.position === "floating" ? renderedDropdown : null] }, toolKey));
             }
             case "textColor":
                 {
                     const colorDropdownClassName = cn(themeStyles.dropdownStyle, themeStyles.colorPickerStyle);
-                    const colorAnimations = createDropdownAnimations(colorIsFlipped);
                     const colorDropdownList = (jsx("div", { className: cn(colorDropdownClassName, "p-2"), children: colorOptions.map((color) => (jsx("button", { className: themeStyles.colorSwatchStyle, style: { backgroundColor: color.value }, onMouseDown: (event) => {
                                 event.preventDefault();
                                 focusEditor();
@@ -644,32 +644,32 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                     focusEditor();
                                     setShowFontSizePicker(false);
                                     setShowColorPicker((previous) => !previous);
-                                }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker, children: jsx(PaintBrushIcon, { className: "w-4 h-4" }) }), isFloatingToolbar ? null : renderedColorDropdown, isFloatingToolbar ? renderedColorDropdown : null] }, index));
+                                }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker, children: jsx(PaintBrushIcon, { className: "w-4 h-4" }) }), isFloatingToolbar ? null : renderedColorDropdown, isFloatingToolbar ? renderedColorDropdown : null] }, toolKey));
                 }
             case "alignLeft":
                 return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("left");
-                    }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomLeftIcon, { className: "w-4 h-4" }) }, index));
+                    }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomLeftIcon, { className: "w-4 h-4" }) }, toolKey));
             case "alignCenter":
                 return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("center");
-                    }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3Icon, { className: "w-4 h-4" }) }, index));
+                    }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3Icon, { className: "w-4 h-4" }) }, toolKey));
             case "alignRight":
                 return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("right");
-                    }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomRightIcon, { className: "w-4 h-4" }) }, index));
+                    }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomRightIcon, { className: "w-4 h-4" }) }, toolKey));
             case "undo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, toolKey));
             case "redo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, toolKey));
             case "separator":
-                return jsx("div", { className: themeStyles.separatorStyle }, index);
+                return jsx("div", { className: themeStyles.separatorStyle }, toolKey);
             default:
                 return null;
         }
@@ -678,13 +678,13 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         if (!toolbarConfig.show || !toolbarConfig.tools)
             return null;
         const toolbarClass = cn(themeStyles.toolbarStyle, toolbarConfig.className);
-        const toolbarContent = (jsx("div", { ref: toolbarRef, className: toolbarClass, children: toolbarConfig.tools.map((tool, index) => renderToolbarTool(tool, index)) }));
+        const toolbarContent = (jsx("div", { ref: toolbarRef, className: toolbarClass, children: toolbarConfig.tools.map((tool) => renderToolbarTool(tool, tool)) }));
         if (toolbarConfig.position === "floating") {
             return (jsx(AnimatePresence, { mode: "wait", children: showToolbar && (jsx(motion.div, { variants: shouldReduceMotion ? undefined : floatingToolbarVariants, initial: "initial", animate: "animate", exit: "exit", className: "bg-white/70 backdrop-blur-sm shadow-2xl rounded-xl border border-[var(--color-border)]  overflow-hidden", style: { position: "absolute", top: toolbarPosition.top, left: toolbarPosition.left, zIndex: 50 }, children: toolbarContent }, "floating-toolbar")) }));
         }
         return toolbarContent;
     };
-    return (jsxs("div", { className: cn(themeStyles.wrapperStyle, className), ...props, children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: editorId, className: labelClassName, state: state, required: required, children: label }) })), jsxs("div", { className: "relative", children: [jsxs("div", { className: cn(themeStyles.containerStyle, themeStyles.states[state], themeStyles.sizes[size]), "data-state": getDataState(), children: [toolbarConfig.position === "top" && renderToolbar(), jsx("div", { ref: (el) => {
+    return (jsxs("div", { className: cn(themeStyles.wrapperStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: editorId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsxs("div", { className: "relative", children: [jsxs("div", { className: cn(themeStyles.containerStyle, themeStyles.states[state], themeStyles.sizes[size]), "data-state": getDataState(), children: [toolbarConfig.position === "top" && renderToolbar(), jsx("div", { ref: (el) => {
                                     if (el) {
                                         editorRef.current = el;
                                         if (typeof ref === "function") {
@@ -704,7 +704,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                     }
                                     setShowColorPicker(false);
                                     setShowFontSizePicker(false);
-                                }, "aria-invalid": isInvalid, "aria-required": required, role: "textbox", "aria-multiline": "true", "aria-label": label || "Rich text editor", suppressContentEditableWarning: true })] }), toolbarConfig.position === "floating" && renderToolbar()] }), helperText && (jsx("div", { className: cn(themeStyles.helperText, helperTextClassName), children: helperText }))] }));
+                                }, "aria-invalid": isInvalid, "aria-required": required, role: "textbox", "aria-multiline": "true", "aria-label": typeof label === 'string' ? label : "Rich text editor", suppressContentEditableWarning: true })] }), toolbarConfig.position === "floating" && renderToolbar()] }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(themeStyles.helperText, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 RichTextEditor.displayName = "RichTextEditor";
 

package/dist/components/forms/RichTextEditor/RichTextEditor.types.d.ts

@@ -19,9 +19,9 @@ export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivEl
     /** The state of the editor (default, disabled, invalid) */
     state?: RichTextEditorState;
     /** Optional label text for the editor */
-    label?: string;
+    label?: React.ReactNode;
     /** Optional helper text displayed below the editor */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** The HTML content value */
     value?: string;
     /** Callback when content changes */

package/dist/components/forms/Select/Select.d.ts

@@ -79,6 +79,8 @@ export declare const SelectButton: React.FC<SelectButtonProps>;
 export interface SelectOptionsExtendedProps extends SelectOptionsProps {
     /** Custom trigger ref - if provided, uses this instead of buttonRef from context */
     triggerRef?: React.RefObject<HTMLElement>;
+    /** id applied to the listbox element for aria-controls matching */
+    listboxId?: string;
 }
 /**
  * Select Options Component

package/dist/components/forms/Select/Select.js

@@ -13,40 +13,9 @@ import { cn } from '../../../utils/cn.js';
 import { isValidTypeaheadChar, findNextMatchingOption, TYPEAHEAD_TIMEOUT_MS } from '../../../utils/typeaheadUtils.js';
 import { Tag } from '../../core/Tag/Tag.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 import { useSelectState } from './useSelectState.js';
 
-// ============================================================================
-// Dark Mode Hook
-// ============================================================================
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = React__default.useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        // Observe class changes on html and body
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * SelectContext - exported for external consumption
  */
@@ -104,7 +73,7 @@ function SelectProvider({ children, selectState, size = "md", componentState = "
 /**
  * Select Button Component
  */
-const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, className = "", onClick, onFocus, onBlur, children, }) => {
+const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, contentStart, contentEnd, className = "", onClick, onFocus, onBlur, children, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, }) => {
     var _a, _b, _c, _d, _e, _f;
     const { theme, buttonRef } = useSelectContext();
     const baseStyle = theme.baseStyle || "";
@@ -118,17 +87,23 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
     const iconEndStyle = theme.iconEndStyle || "";
     const iconStartPadding = iconStart ? ((_e = theme.iconPadding) === null || _e === void 0 ? void 0 : _e.left) || "" : "";
     const iconEndPadding = iconEnd ? ((_f = theme.iconPadding) === null || _f === void 0 ? void 0 : _f.right) || "" : "";
+    // Size-aware content slot style (mirrors Input.theme contentStyle)
+    const contentSlotStyle = `flex items-center px-3 ${size === "sm"
+        ? "text-sm"
+        : size === "lg"
+            ? "text-base"
+            : "text-sm"} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`;
     // Use either the themed focus state or directly apply the focus classes if the theme is not working
     const activeFocusState = isOpen
         ? focusStateStyle ||
             "outline-2 outline-[var(--color-primary)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: cn(buttonWrapperStyle), children: jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }) }));
+    return (jsxs("div", { className: cn(buttonWrapperStyle, "flex items-stretch"), children: [contentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentSlotStyle, "pr-0 border-r border-[var(--color-border)]"), children: contentStart })), jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, "flex-1 min-w-0", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, "aria-labelledby": ariaLabelledby, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }), contentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentSlotStyle, "pl-0 border-l border-[var(--color-border)]"), children: contentEnd }))] }));
 };
 /**
  * Select Options Component
  */
-const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, children, portal = true, placement = "bottom-start", offset = 4, triggerRef: customTriggerRef, }) => {
+const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, children, portal = true, placement = "bottom-start", offset = 4, triggerRef: customTriggerRef, listboxId, }) => {
     var _a;
     const context = useSelectContext();
     const { optionsRef, buttonRef, highlightedIndex, setHighlightedIndex, filteredOptions, searchable, searchValue, setSearchValue, enableTypeahead, typeaheadValue, setTypeaheadValue, typeaheadTimeoutRef, theme, selectOption, } = context;
@@ -285,22 +260,12 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
             searchInputRef.current.select();
         }
     }, [isOpen, searchable]);
-    // Add effect to measure content after render for improved positioning
-    useEffect(() => {
-        if (isOpen && contentRef.current) {
-            // Trigger recalculation after content renders
-            const timer = setTimeout(() => {
-                // Hook will remeasure automatically due to contentRef dependency
-            }, 0);
-            return () => clearTimeout(timer);
-        }
-    }, [isOpen, children, filteredOptions.length]);
     // Handle search input change
     const handleSearchChange = (e) => {
         setSearchValue(e.target.value);
         setHighlightedIndex(-1); // Reset highlighted index when search changes
     };
-    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(optionsContainerStyle, className), style: {
+    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, id: listboxId, className: cn(optionsContainerStyle, className), style: {
                 ...cssVariables,
                 overscrollBehavior: "contain",
                 ...(portal
@@ -386,7 +351,7 @@ const SelectOption = ({ value, isSelected, disabled, className = "", onSelect, c
  * />
  * ```
  */
-const SelectInner = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search options...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, multiple = false, maxDisplayedChips = 3, children, }, ref) => {
+const SelectInner = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, contentStart, contentEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search options...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, multiple = false, maxDisplayedChips = 3, children, }, ref) => {
     var _a;
     // Merge theme with overrides
     const theme = useMemo(() => ({ ...selectTheme, ...(themeOverrides || {}) }), [themeOverrides]);
@@ -414,7 +379,7 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
             .filter(Boolean);
         const displayed = selectedOpts.slice(0, maxDisplayedChips);
         const overflow = selectedOpts.length - maxDisplayedChips;
-        return (jsxs("div", { className: theme.chipContainerStyle, children: [jsx(AnimatePresence, { mode: "popLayout", children: displayed.map((opt) => (jsx(Tag, { size: "sm", onRemove: () => removeValue(opt.value), className: "shrink-0 max-w-[120px] truncate rounded-md border-none", children: opt.label }, String(opt.id)))) }), overflow > 0 && (jsxs("span", { className: theme.chipOverflowStyle, children: ["+", overflow, " more"] }))] }));
+        return (jsxs("div", { className: theme.chipContainerStyle, children: [jsx(AnimatePresence, { mode: "popLayout", children: displayed.map((opt) => (jsx(Tag, { size: "sm", onRemove: () => removeValue(opt.value), className: "shrink-0 max-w-[120px] truncate", children: opt.label }, String(opt.id)))) }), overflow > 0 && (jsxs("span", { className: theme.chipOverflowStyle, children: ["+", overflow, " more"] }))] }));
     }, [multiple, selectedValues, options, maxDisplayedChips, theme.chipContainerStyle, theme.chipOverflowStyle, removeValue]);
     const computedDisplayValue = displayValue ||
         (multiple
@@ -438,18 +403,23 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
     // Generate a unique ID if not provided
     const generatedId = React__default.useId();
     const selectId = id || generatedId;
-    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: selectId, required: required, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
+    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { id: `${selectId}-label`, htmlFor: selectId, required: required, state: state, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, contentStart: contentStart, contentEnd: contentEnd, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, "aria-labelledby": label && typeof label === 'string' ? `${selectId}-label` : undefined, "aria-invalid": state === "invalid" || undefined, "aria-describedby": helperText ? `${selectId}-helper` : undefined, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
                             ? "flex min-w-0"
                             : "block truncate", (multiple ? selectedValues.length > 0 : selectedOption)
                             ? theme.valueTextStyle
-                            : theme.placeholderTextStyle), children: computedDisplayValue }) }), jsx(SelectOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, children: children ||
-                        filteredOptions.map((option) => {
-                            const isCreateOption = option.id === "__create__";
-                            const isSelected = multiple
-                                ? isValueSelected(option.value)
-                                : option.value === selectedValue;
-                            return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(PlusIcon, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : multiple ? (jsxs(Fragment, { children: [jsx("span", { className: "block truncate", children: option.label }), isSelected && (jsx("span", { className: theme.checkIconStyle, children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
-                        }) }), helperText && (typeof helperText === 'string' ? (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
+                            : theme.placeholderTextStyle), children: computedDisplayValue }) }), jsx(SelectOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, listboxId: `${selectId}-listbox`, children: children ||
+                        (() => {
+                            const displayedOptions = filteredOptions.length > 100
+                                ? filteredOptions.slice(0, 100)
+                                : filteredOptions;
+                            return (jsxs(Fragment, { children: [displayedOptions.map((option) => {
+                                        const isCreateOption = option.id === "__create__";
+                                        const isSelected = multiple
+                                            ? isValueSelected(option.value)
+                                            : option.value === selectedValue;
+                                        return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(PlusIcon, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : multiple ? (jsxs(Fragment, { children: [jsx("span", { className: "block truncate", children: option.label }), isSelected && (jsx("span", { className: theme.checkIconStyle, children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
+                                    }), filteredOptions.length > 100 && (jsxs("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] text-center border-t border-[var(--color-border)]", children: ["Showing 100 of ", filteredOptions.length, " results \u2014 refine your search"] }))] }));
+                        })() }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${selectId}-helper`, className: cn(helperTextStyle, helperTextStateStyle), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
 };
 const SelectForwarded = React__default.forwardRef(SelectInner);
 SelectForwarded.displayName = "Select";

package/dist/components/forms/Select/Select.types.d.ts

@@ -64,6 +64,10 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     iconStart?: React.ReactNode;
     /** Right icon to display in the select button (default is chevron) */
     iconEnd?: React.ReactNode;
+    /** Structural content rendered before iconStart (e.g. a prefix label or nested Select) */
+    contentStart?: React.ReactNode;
+    /** Structural content rendered after iconEnd (e.g. a suffix label or nested Select) */
+    contentEnd?: React.ReactNode;
     /** Children to render instead of default options */
     children?: React.ReactNode;
     /** Component-level theme overrides */
@@ -115,6 +119,16 @@ export interface SelectButtonProps extends SelectBaseProps {
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /** Children to render inside the button */
     children?: React.ReactNode;
+    /** Marks the button as invalid for assistive technologies */
+    "aria-invalid"?: boolean;
+    /** ID of the element that describes this button (e.g. helper text) */
+    "aria-describedby"?: string;
+    /** ID of the element that labels this button (e.g. form label) */
+    "aria-labelledby"?: string;
+    /** Structural content rendered before iconStart */
+    contentStart?: React.ReactNode;
+    /** Structural content rendered after iconEnd */
+    contentEnd?: React.ReactNode;
 }
 /**
  * Select options container props

package/dist/components/forms/Signature/Signature.js

@@ -145,7 +145,7 @@ const Signature = React__default.forwardRef(({ id, label, labelClassName, helper
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || '';
     const stateClasses = ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || '';
     const helperTextClasses = theme.helperText || '';
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required, children: label }) })), jsx("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width, height }, children: jsxs("div", { ref: ref, className: baseClasses, ...props, children: [jsx("canvas", { ref: canvasRef, id: signatureId, className: cn(theme.canvasStyle, customTheme.canvasStyle), tabIndex: isDisabled ? -1 : 0, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, "aria-label": label || 'Signature canvas', "aria-required": required, "aria-invalid": isInvalid, "aria-disabled": isDisabled }), isEmpty && placeholder && !isDisabled && (jsx("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle), children: placeholder })), showControls && !isDisabled && (jsxs("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button", children: "Clear" }), jsx(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button", children: "Save" })] }))] }) }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width, height }, children: jsxs("div", { ref: ref, className: baseClasses, ...props, children: [jsx("canvas", { ref: canvasRef, id: signatureId, className: cn(theme.canvasStyle, customTheme.canvasStyle), tabIndex: isDisabled ? -1 : 0, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, "aria-label": typeof label === 'string' ? label : 'Signature canvas', "aria-required": required, "aria-invalid": isInvalid, "aria-disabled": isDisabled }), isEmpty && placeholder && !isDisabled && (jsx("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle), children: placeholder })), showControls && !isDisabled && (jsxs("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button", children: "Clear" }), jsx(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button", children: "Save" })] }))] }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Signature.displayName = 'Signature';
 

package/dist/components/forms/Signature/Signature.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 /**
  * Signature component size variants
  */
@@ -51,11 +51,11 @@ export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
     /** Unique identifier for the signature field */
     id?: string;
     /** Label text for the signature */
-    label?: string;
+    label?: ReactNode;
     /** Additional class name for the label */
     labelClassName?: string;
     /** Helper text displayed below the signature */
-    helperText?: string;
+    helperText?: ReactNode;
     /** Additional class name for the helper text */
     helperTextClassName?: string;
     /** Additional class name for the wrapper */

package/dist/components/forms/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useCallback, useMemo } from 'react';
+import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { sliderTheme } from './Slider.theme.js';
 import { cn } from '../../../utils/cn.js';
@@ -7,9 +7,21 @@ import { cn } from '../../../utils/cn.js';
 const Slider = React__default.forwardRef(({ state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", min = 0, max = 100, step = 1, value, defaultValue, onChange, onChangeCommitted, showValue = false, unit = "", showMinMax = false, showTicks = false, tickStep, range = false, iconStart, iconEnd, theme = {}, required = false, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
     var _a;
     const trackRef = useRef(null);
+    // Track active pointer listeners so they can be cleaned up on unmount during a drag
+    const activeListenersRef = useRef({ move: null, up: null });
+    // Cleanup on unmount — removes any lingering listeners if component unmounts mid-drag
+    useEffect(() => {
+        return () => {
+            const { move, up } = activeListenersRef.current;
+            if (move)
+                document.removeEventListener("pointermove", move);
+            if (up)
+                document.removeEventListener("pointerup", up);
+        };
+    }, []);
     const generatedId = React__default.useId();
     const sliderId = id || generatedId;
-    const helperTextId = helperText ? `${sliderId}-helper` : undefined;
+    const helperTextId = typeof helperText === 'string' && helperText ? `${sliderId}-helper` : undefined;
     // Handle controlled/uncontrolled value
     const [internalValue, setInternalValue] = useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : (range ? [min, min] : min));
     const currentValue = value !== null && value !== void 0 ? value : internalValue;
@@ -68,11 +80,13 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
             }
         };
         const handleEnd = () => {
+            activeListenersRef.current = { move: null, up: null };
             setDragIndex(null);
             onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(currentValue);
             document.removeEventListener("pointermove", handleMove);
             document.removeEventListener("pointerup", handleEnd);
         };
+        activeListenersRef.current = { move: handleMove, up: handleEnd };
         document.addEventListener("pointermove", handleMove);
         document.addEventListener("pointerup", handleEnd);
     }, [
@@ -217,7 +231,7 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
         return `${currentValue}${unit}`;
     };
     const filterId = `slider-liquid-lens-${sliderId}`;
-    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), label && (jsx(FormLabel, { htmlFor: sliderId, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
+    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: sliderId, state: state, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })) : (label)), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
                                         ticks.map((tick) => {
                                             const percentage = getPercentage(tick);
                                             return (jsx("div", { className: mergedTheme.tickStyle, style: { left: `${percentage}%` } }, tick));
@@ -237,7 +251,7 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
                                             }, "aria-hidden": "true" })] }, index));
                             }), name && (jsx("input", { type: "hidden", name: name, value: Array.isArray(currentValue)
                                     ? currentValue.join(",")
-                                    : currentValue }))] }), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: max })), showValue && (jsx("div", { className: cn(mergedTheme.valueDisplayStyle), children: formatValueDisplay() })), iconEnd && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconEnd }))] }), helperText && (jsx("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName), children: helperText }))] }));
+                                    : currentValue }))] }), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: max })), showValue && (jsx("div", { className: cn(mergedTheme.valueDisplayStyle), children: formatValueDisplay() })), iconEnd && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconEnd }))] }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Slider.displayName = "Slider";
 

package/dist/components/forms/Slider/Slider.types.d.ts

@@ -26,9 +26,9 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     /** The state of the slider (default, disabled, invalid) */
     state?: SliderState;
     /** Optional label text for the slider */
-    label?: string;
+    label?: React.ReactNode;
     /** Optional helper text displayed below the slider */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Minimum value for the slider */
     min?: number;
     /** Maximum value for the slider */