@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -1,38 +1,28 @@
 const selectableCardTheme = {
     group: "flex flex-col gap-3",
     card: 
-    // Base layout
-    "relative flex items-center justify-between gap-4 rounded-[var(--radius-base)] p-4 cursor-pointer transition-[border-color,background-color,box-shadow,outline] duration-200 " +
-        // Default state - light
+    // Base layout — no justify-between; indicator position handled by render order
+    "relative flex items-start gap-3 rounded-[var(--radius-base)] cursor-pointer transition-[border-color,background-color,box-shadow,outline] duration-200 " +
+        // Default state
         "border border-[var(--color-border)] bg-[var(--color-surface)] " +
-        // Default state - dark
         "dark:bg-[var(--color-background)] " +
-        // Hover state - light
+        // Hover
         "hover:border-[var(--color-border-secondary)] " +
-        // Hover state - dark
-        "  " +
-        // Focus visible - light
+        // Focus visible
         "focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)] " +
-        // Focus visible - dark
         "dark:focus-visible:outline-[var(--color-primary)]/50",
-    selectedCard: 
-    // Selected border & ring - light
-    "border-[var(--color-primary)] ring-2 ring-[var(--color-primary)]/10  " +
-        // Selected border & ring - dark
-        "dark:border-[var(--color-primary)] dark:ring-[var(--color-primary)]/20  " +
-        // Selected background gradient - light
-        "bg-[var(--color-primary-50)] " +
-        // Selected background gradient - dark
-        "dark:bg-[var(--color-background-secondary)] " +
-        // Selected hover - light
+    selectedCard: "border-[var(--color-primary)] ring-2 ring-[var(--color-primary)]/10 " +
+        "dark:border-[var(--color-primary)] dark:ring-[var(--color-primary)]/20 " +
         "hover:border-[var(--color-primary)] " +
-        // Selected hover - dark
-        "dark:hover:border-[var(--color-primary)] ",
-    disabledCard: 
-    // Disabled state
-    "opacity-50 cursor-not-allowed pointer-events-none",
+        "dark:hover:border-[var(--color-primary)]",
+    disabledCard: "opacity-50 cursor-not-allowed pointer-events-none",
     contentWrapper: "flex-1 min-w-0",
-    indicator: "flex-shrink-0",
+    indicator: "flex-shrink-0 -mt-0.5",
+    cardSizes: {
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-5",
+    },
 };
 
 export { selectableCardTheme };

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

@@ -1,7 +1,8 @@
 import React from "react";
-import type { HTMLMotionProps } from "motion/react";
 export type SelectableCardType = "single" | "multiple";
 export type SelectableCardIndicator = "radio" | "checkbox" | "none";
+export type SelectableCardIndicatorPosition = "start" | "end";
+export type SelectableCardSize = "sm" | "md" | "lg";
 export interface SelectableCardTheme {
     group?: string;
     card?: string;
@@ -9,10 +10,13 @@ export interface SelectableCardTheme {
     disabledCard?: string;
     contentWrapper?: string;
     indicator?: string;
+    cardSizes?: Record<SelectableCardSize, string>;
 }
 export interface SelectableCardContextValue {
     type: SelectableCardType;
     indicator: SelectableCardIndicator;
+    indicatorPosition: SelectableCardIndicatorPosition;
+    size: SelectableCardSize;
     value: string | string[];
     onChange: (cardValue: string) => void;
     disabled: boolean;
@@ -21,14 +25,22 @@ export interface SelectableCardContextValue {
 }
 export interface SelectableCardGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     type?: SelectableCardType;
-    value: string | string[];
-    onChange: (value: string | string[]) => void;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
     indicator?: SelectableCardIndicator;
+    indicatorPosition?: SelectableCardIndicatorPosition;
+    size?: SelectableCardSize;
     disabled?: boolean;
     name?: string;
     theme?: Partial<SelectableCardTheme>;
 }
-export interface SelectableCardProps extends Omit<HTMLMotionProps<"div">, "value"> {
+export interface SelectableCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "onChange"> {
     value: string;
     disabled?: boolean;
+    checked?: boolean;
+    onChange?: (checked: boolean, value: string) => void;
+    indicator?: SelectableCardIndicator;
+    indicatorPosition?: SelectableCardIndicatorPosition;
+    size?: SelectableCardSize;
 }

package/dist/components/forms/SelectableCard/SelectableCardContext.d.ts

@@ -1,3 +1,4 @@
 import type { SelectableCardContextValue } from "./SelectableCard.types";
 export declare const SelectableCardContext: import("react").Context<SelectableCardContextValue | undefined>;
 export declare function useSelectableCardContext(): SelectableCardContextValue;
+export declare function useOptionalSelectableCardContext(): SelectableCardContextValue | undefined;

package/dist/components/forms/SelectableCard/SelectableCardContext.js

@@ -1,12 +1,10 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 const SelectableCardContext = createContext(undefined);
-function useSelectableCardContext() {
-    const context = useContext(SelectableCardContext);
-    if (!context) {
-        throw new Error("SelectableCard must be used within a SelectableCard.Group");
-    }
-    return context;
+// Used by SelectableCard itself — returns undefined when used standalone
+function useOptionalSelectableCardContext() {
+    return useContext(SelectableCardContext);
 }
 
-export { SelectableCardContext, useSelectableCardContext };
+export { SelectableCardContext, useOptionalSelectableCardContext };

package/dist/components/forms/SelectableCard/SelectableCardGroup.js

@@ -1,35 +1,57 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useId, useMemo } from 'react';
+import React__default, { useId, useState, useMemo, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { selectableCardTheme } from './SelectableCard.theme.js';
 import { SelectableCardContext } from './SelectableCardContext.js';
 
-const SelectableCardGroup = React__default.forwardRef(({ type = "single", value, onChange, indicator, disabled = false, name, className, theme: customTheme, children, ...props }, ref) => {
+const SelectableCardGroup = React__default.forwardRef(({ type = "single", value, defaultValue, onChange, indicator, indicatorPosition = "end", size = "md", disabled = false, name, className, theme: customTheme, children, ...props }, ref) => {
     const autoId = useId();
     const groupName = name !== null && name !== void 0 ? name : `selectable-card-${autoId}`;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => {
+        if (defaultValue !== undefined) {
+            if (process.env.NODE_ENV !== "production") {
+                if (type === "single" && Array.isArray(defaultValue)) {
+                    console.warn("[SelectableCard.Group]: defaultValue is an array but type is 'single'. Use a string.");
+                }
+                if (type === "multiple" && typeof defaultValue === "string") {
+                    console.warn("[SelectableCard.Group]: defaultValue is a string but type is 'multiple'. Use an array.");
+                }
+            }
+            return defaultValue;
+        }
+        return type === "single" ? "" : [];
+    });
+    const resolvedValue = value !== undefined ? value : internalValue;
     const resolvedIndicator = indicator !== null && indicator !== void 0 ? indicator : (type === "single" ? "radio" : "checkbox");
     const theme = useMemo(() => ({ ...selectableCardTheme, ...customTheme }), [customTheme]);
-    const handleChange = (cardValue) => {
+    const handleChange = useCallback((cardValue) => {
+        let next;
         if (type === "single") {
-            onChange(cardValue);
+            next = cardValue;
         }
         else {
-            const current = Array.isArray(value) ? value : [];
-            const next = current.includes(cardValue)
+            const current = Array.isArray(resolvedValue) ? resolvedValue : [];
+            next = current.includes(cardValue)
                 ? current.filter((v) => v !== cardValue)
                 : [...current, cardValue];
-            onChange(next);
         }
-    };
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [type, resolvedValue, isControlled, onChange]);
     const contextValue = useMemo(() => ({
         type,
         indicator: resolvedIndicator,
-        value,
+        indicatorPosition,
+        size,
+        value: resolvedValue,
         onChange: handleChange,
         disabled,
         name: groupName,
         theme,
-    }), [type, resolvedIndicator, value, disabled, groupName, theme]);
+    }), [type, resolvedIndicator, indicatorPosition, size, resolvedValue, handleChange, disabled, groupName, theme]);
     return (jsx(SelectableCardContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, role: type === "single" ? "radiogroup" : "group", className: cn(theme.group, className), ...props, children: children }) }));
 });
 SelectableCardGroup.displayName = "SelectableCard.Group";

package/dist/components/forms/SelectableCard/index.d.ts

@@ -1,3 +1,3 @@
 export { SelectableCard } from "./SelectableCard";
-export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardTheme, } from "./SelectableCard.types";
+export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardIndicatorPosition, SelectableCardSize, SelectableCardTheme, } from "./SelectableCard.types";
 export { selectableCardTheme } from "./SelectableCard.theme";

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -5,7 +6,7 @@ import { signatureTheme } from './Signature.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { Button } from '../../core/Button/Button.js';
 
-const Signature = React__default.forwardRef(({ id, label, labelClassName, helperText, helperTextClassName, wrapperClassName, size = 'md', state = 'default', required = false, disabled = false, width = 400, height = 200, strokeColor = '#000000', strokeWidth = 2, backgroundColor = 'transparent', className, theme: customTheme = {}, onChange, onClear, showControls = true, placeholder = 'Sign here', ...props }, ref) => {
+const Signature = React__default.forwardRef(({ id, label, labelClassName, helperText, errorMessage, helperTextClassName, wrapperClassName, size = 'md', state = 'default', required = false, disabled = false, width = 400, height = 200, strokeColor = '#000000', strokeWidth = 2, backgroundColor = 'transparent', className, theme: customTheme = {}, onChange, onClear, showControls = true, placeholder = 'Sign here', ...props }, ref) => {
     var _a, _b;
     const canvasRef = useRef(null);
     const [isDrawing, setIsDrawing] = useState(false);
@@ -101,6 +102,11 @@ const Signature = React__default.forwardRef(({ id, label, labelClassName, helper
         lastPointRef.current = currentPoint;
     }, [isDisabled, isDrawing, getPointFromEvent]);
     const stopDrawing = useCallback(() => {
+        // A mouseup/touchend/mouseleave can fire on a disabled pad (e.g. it was
+        // disabled mid-drag, or the browser still delivers the trailing event) —
+        // bail before touching state or emitting onChange.
+        if (isDisabled)
+            return;
         setIsDrawing(false);
         lastPointRef.current = null;
         // Only call toDataURL and onChange on mouseup/touchend, not on every draw event
@@ -109,7 +115,7 @@ const Signature = React__default.forwardRef(({ id, label, labelClassName, helper
             const dataURL = canvas.toDataURL();
             onChange(dataURL);
         }
-    }, [onChange]);
+    }, [isDisabled, onChange]);
     const clear = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -145,7 +151,11 @@ 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 }))] }));
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = isInvalid && errorMessage ? errorMessage : helperText;
+    const messageId = `${signatureId}-message`;
+    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, "aria-describedby": displayedMessage ? messageId : undefined }), 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" })] }))] }) }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: messageId, role: isInvalid ? 'alert' : undefined, className: cn(helperTextClasses, helperTextClassName), children: displayedMessage })) : (displayedMessage))] }));
 });
 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,17 @@ 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;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over `helperText` while invalid; `helperText` is
+     * unaffected/still shown as normal otherwise.
+     */
+    errorMessage?: 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,6 @@
+"use client";
 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 +8,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 +81,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);
     }, [
@@ -216,21 +231,28 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
         }
         return `${currentValue}${unit}`;
     };
-    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [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 &&
+    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 && (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));
                                         })] }), values.map((val, index) => {
                                 const percentage = getPercentage(val);
-                                return (jsx("div", { className: cn(mergedTheme.thumbStyle, "outline-[1px] outline-white/50 ring-0 shadow-none p-0 overflow-visible"), style: {
+                                return (jsxs("div", { className: cn(mergedTheme.thumbStyle, "outline-[2px] outline-[var(--color-border)]/80 ring-0 shadow-lg p-0"), style: {
                                         left: `${percentage}%`,
                                         transform: "translate(-50%, -50%)",
                                         position: "absolute",
                                         top: "50%",
-                                    }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined }, index));
+                                    }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, "aria-invalid": isInvalid || undefined, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
+                                                backdropFilter: "blur(0.6px)",
+                                                WebkitBackdropFilter: "blur(0.6px)",
+                                                filter: `url(#${filterId})`,
+                                            }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/90", "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[2] rounded-full", style: {
+                                                boxShadow: "inset 1px 1px 0 rgba(255,255,255,0.35), inset 1px 3px 0 rgba(0,0,0,0.03), inset 0 0 14px rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.06)",
+                                            }, "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.theme.js

@@ -10,17 +10,17 @@ const sliderTheme = {
     // Root container with layout
     rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
     // Track (background)
-    trackStyle: "relative w-full h-2 grow rounded-full bg-neutral-200 overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full",
+    trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-surface-sunken)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full shadow-inner-real-sm",
     // Range (filled portion) - rounded to match track clipping
     rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
     // Thumb (draggable handle)
-    thumbStyle: "block h-5 w-8 rounded-full border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)] glass-effect-5",
+    thumbStyle: "block h-5 w-7 rounded-full bg-transparent overflow-hidden cursor-grab active:cursor-grabbing active:scale-x-110 active:scale-y-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 data-[disabled]:cursor-not-allowed data-[disabled]:hover:scale-100 data-[invalid]:focus-visible:ring-[var(--color-danger)]",
     // Value display
     valueDisplayStyle: "text-sm font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
     // Min/max labels
     minMaxLabelStyle: "text-sm font-medium text-[var(--color-text-muted)]",
     // Tick marks
-    tickStyle: "absolute w-0.5 h-2 bg-white/60 -translate-x-0.5 pointer-events-none",
+    tickStyle: "absolute w-0.5 h-2 bg-[var(--color-border)] -translate-x-0.5 pointer-events-none",
 };
 
 export { sliderTheme };

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 */

package/dist/components/forms/Switch/Switch.js

@@ -1,21 +1,28 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
-import { motion } from 'motion/react';
+import { useReducedMotion, motion } from 'motion/react';
 import { switchTheme, thumbPositions } from './Switch.theme.js';
 import { cn } from '../../../utils/cn.js';
 
+const indicatorTransition = {
+    duration: 0.6,
+    ease: [0.22, 1, 0.36, 1],
+};
 /**
  * Switch component for toggling between two states
  */
-const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onChange, label, description, state = "default", labelPosition = "end", theme, className, ...rest }, ref) => {
-    const [internalChecked, setInternalChecked] = useState(false);
+const Switch = React__default.forwardRef(({ id, checked: controlledChecked, defaultChecked, onChange, label, description, state = "default", labelPosition = "end", size = "md", theme, className, name, value, required, form, ...rest }, ref) => {
+    const generatedId = React__default.useId();
+    const switchId = id !== null && id !== void 0 ? id : generatedId;
+    const shouldReduceMotion = useReducedMotion();
+    const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     // Determine if component is controlled or uncontrolled
     const isControlled = controlledChecked !== undefined;
     const isChecked = isControlled ? controlledChecked : internalChecked;
     // Derive state flags
     const isDisabled = state === "disabled";
-    const isInvalid = state === "invalid";
     const handleChange = (e) => {
         if (isDisabled)
             return;
@@ -24,27 +31,40 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
     };
-    const handleTrackClick = () => {
-        if (!isDisabled) {
-            const newValue = !isChecked;
-            if (!isControlled) {
-                setInternalChecked(newValue);
-            }
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-    };
     // Label and description content
-    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label && (jsx(FormLabel, { htmlFor: id, state: state, children: label })), description && (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description }))] })) : null;
-    // Build data attributes for state-based styling
+    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label &&
+                (typeof label === "string" ? (jsx(FormLabel, { htmlFor: switchId, state: state, children: label })) : (label)), description &&
+                (typeof description === "string" ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
+    // Hook only — emitted as `data-state` for consumer CSS / tests, NOT used for styling
     const trackDataState = isDisabled
         ? "disabled"
-        : isInvalid
-            ? "invalid"
-            : isChecked
-                ? "checked"
-                : "unchecked";
+        : isChecked
+            ? "checked"
+            : "unchecked";
+    // Resolve track state styling in JS (base theme + per-state theme override),
+    // layered so `className`/`theme` overrides win — see Switch.theme.ts rationale.
+    const resolveTrackState = (key) => { var _a; return cn(switchTheme.trackStates[key], (_a = theme === null || theme === void 0 ? void 0 : theme.trackStates) === null || _a === void 0 ? void 0 : _a[key]); };
+    const trackStateClasses = cn(isChecked ? resolveTrackState("checked") : resolveTrackState("unchecked"), isDisabled && resolveTrackState("disabled"));
     // Switch toggle component
-    const switchToggle = (jsxs("div", { className: "relative flex items-center h-6", children: [jsx("input", { ref: ref, type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }), jsx("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick, children: jsx(motion.div, { className: cn(switchTheme.thumb, theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 } }) })] }));
+    const switchToggle = (jsx("div", { className: "relative flex items-center h-6", children: jsxs("label", { htmlFor: switchId, className: "contents", children: [jsx("input", { ref: ref, type: "checkbox", id: switchId, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "peer sr-only", name: name, value: value, required: required, form: form }), jsxs("div", { className: cn(switchTheme.track, switchTheme.trackSizes[size], trackStateClasses, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, "aria-hidden": "true", children: [jsx(motion.div, { className: cn(switchTheme.thumb, switchTheme.thumbSizes[size], 
+                            // On the checked/primary track the white knob would vanish on a
+                            // light primary (e.g. a near-white primary in dark mode), so the
+                            // ON thumb adopts the track's contrast color: white on a dark
+                            // primary (unchanged), dark on a light primary. The OFF thumb keeps
+                            // the white gradient — it sits on the neutral off-track, never white.
+                            isChecked && "bg-none bg-[var(--color-primary-contrast)]", !isDisabled && "group-hover:shadow-xl", theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked
+                                ? thumbPositions[size].checked
+                                : thumbPositions[size].unchecked, transition: shouldReduceMotion
+                                ? { duration: 0 }
+                                : { type: "spring", stiffness: 500, damping: 30 }, whileTap: isDisabled || shouldReduceMotion ? undefined : { scale: 0.94 } }), jsx(motion.div, { className: "pointer-events-none absolute inset-y-0 left-1.5 inline-flex w-2.5 items-center justify-center", initial: false, animate: shouldReduceMotion
+                                ? { opacity: isChecked ? 1 : 0, x: 0, scale: 1 }
+                                : isChecked
+                                    ? { opacity: 1, x: 0, scale: 1 }
+                                    : { opacity: 0, x: -4, scale: 0.78 }, transition: shouldReduceMotion ? { duration: 0 } : indicatorTransition, children: jsx("div", { className: "size-2 rounded-full border-[1.5px] border-[var(--color-primary-contrast)]/50" }) }), jsx(motion.div, { className: "pointer-events-none absolute inset-y-0 right-1.5 inline-flex w-2.5 items-center justify-center", initial: false, animate: shouldReduceMotion
+                                ? { opacity: isChecked ? 0 : 1, x: 0, scaleY: 1 }
+                                : isChecked
+                                    ? { opacity: 0, x: 4, scaleY: 0.6 }
+                                    : { opacity: 1, x: 0, scaleY: 1 }, transition: shouldReduceMotion ? { duration: 0 } : indicatorTransition, children: jsx("div", { className: "w-[1.5px] h-2 rounded-full bg-white/50" }) })] })] }) }));
     return (jsxs("div", { className: cn(switchTheme.container, labelPosition === "start" ? "flex-row-reverse" : "flex-row", theme === null || theme === void 0 ? void 0 : theme.container, className), ...rest, children: [labelContent, switchToggle] }));
 });
 Switch.displayName = "Switch";

package/dist/components/forms/Switch/Switch.theme.d.ts

@@ -1,18 +1,48 @@
 import { SwitchTheme } from "./Switch.types";
 /**
  * Default theme configuration for the Switch component
+ *
+ * Gold-standard state styling: track state classes live in `trackStates` as
+ * plain utility strings and are resolved in JS at render time (see Switch.tsx),
+ * NOT as `data-[state=*]:` Tailwind variants. A data-variant compiles to a
+ * class + attribute selector (specificity 0,2,0) that beats a plain `className`
+ * override (0,1,0) regardless of order, silently breaking the shadcn rule
+ * "className override = highest priority". We still emit `data-state` on the
+ * track as a hook for consumer CSS / tests — we just don't *style* with it.
  */
 export declare const switchTheme: SwitchTheme;
 /**
  * Thumb position values for animation
  */
 export declare const thumbPositions: {
-    checked: {
-        x: number;
-        y: number;
+    sm: {
+        checked: {
+            x: number;
+            y: number;
+        };
+        unchecked: {
+            x: number;
+            y: number;
+        };
     };
-    unchecked: {
-        x: number;
-        y: number;
+    md: {
+        checked: {
+            x: number;
+            y: number;
+        };
+        unchecked: {
+            x: number;
+            y: number;
+        };
+    };
+    lg: {
+        checked: {
+            x: number;
+            y: number;
+        };
+        unchecked: {
+            x: number;
+            y: number;
+        };
     };
 };

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

@@ -1,18 +1,59 @@
 /**
  * Default theme configuration for the Switch component
+ *
+ * Gold-standard state styling: track state classes live in `trackStates` as
+ * plain utility strings and are resolved in JS at render time (see Switch.tsx),
+ * NOT as `data-[state=*]:` Tailwind variants. A data-variant compiles to a
+ * class + attribute selector (specificity 0,2,0) that beats a plain `className`
+ * override (0,1,0) regardless of order, silently breaking the shadcn rule
+ * "className override = highest priority". We still emit `data-state` on the
+ * track as a hook for consumer CSS / tests — we just don't *style* with it.
  */
 const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
-    track: "w-12 h-6 rounded-full transition-colors cursor-pointer shadow-inner bg-[var(--color-border)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)]",
-    thumb: "w-7 h-5 rounded-full shadow-md glass-effect !bg-white/80",
+    // Structural base only — no state colors (those live in `trackStates`)
+    track: "group rounded-full cursor-pointer shadow-inner-real-sm transition-colors duration-500 motion-reduce:transition-none outline-1 outline-[var(--color-border)] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--color-primary-600)]",
+    // Resolved in JS and layered via cn() so later keys win (tailwind-merge dedupes bg-*).
+    // No `invalid` key: a switch is binary — on and off are both valid values, so there is
+    // nothing to validate. (See §9 carve-out: invalid only applies to controls with a value.)
+    trackStates: {
+        unchecked: "bg-[var(--color-neutral-200)] dark:bg-[var(--color-neutral-700)]",
+        checked: "bg-[var(--color-primary)]",
+        disabled: "bg-[var(--color-background-disabled)] cursor-not-allowed",
+    },
+    // Thumb knob — soft elevation. OFF state: white gradient (it rides the neutral
+    // off-track, which is never white). ON state: Switch.tsx swaps the fill to
+    // --color-primary-contrast so the knob stays visible on any primary track — white
+    // on a dark primary, dark on a light primary (the near-white-primary case).
+    thumb: "rounded-full bg-gradient-to-b from-neutral-200 via-neutral-50 to-white shadow-real-lg border-t border-white/80 dark:border-white/20 transition-shadow duration-300 motion-reduce:transition-none",
     description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
+    trackSizes: {
+        sm: "w-9 h-5",
+        md: "w-12 h-6",
+        lg: "w-14 h-7",
+    },
+    thumbSizes: {
+        sm: "w-5 h-4",
+        md: "w-7 h-5",
+        lg: "w-8 h-6",
+    },
 };
 /**
  * Thumb position values for animation
  */
 const thumbPositions = {
-    checked: { x: 18, y: 2 },
-    unchecked: { x: 2, y: 2 },
+    sm: {
+        checked: { x: 14, y: 2 },
+        unchecked: { x: 2, y: 2 },
+    },
+    md: {
+        checked: { x: 18, y: 2 },
+        unchecked: { x: 2, y: 2 },
+    },
+    lg: {
+        checked: { x: 22, y: 2 },
+        unchecked: { x: 2, y: 2 },
+    },
 };
 
 export { switchTheme, thumbPositions };