@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -0,0 +1,12 @@
+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;
+}
+
+export { SelectableCardContext, useSelectableCardContext };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SelectableCardGroupProps } from "./SelectableCard.types";
+export declare const SelectableCardGroup: React.ForwardRefExoticComponent<SelectableCardGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useId, useMemo } 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 autoId = useId();
+    const groupName = name !== null && name !== void 0 ? name : `selectable-card-${autoId}`;
+    const resolvedIndicator = indicator !== null && indicator !== void 0 ? indicator : (type === "single" ? "radio" : "checkbox");
+    const theme = useMemo(() => ({ ...selectableCardTheme, ...customTheme }), [customTheme]);
+    const handleChange = (cardValue) => {
+        if (type === "single") {
+            onChange(cardValue);
+        }
+        else {
+            const current = Array.isArray(value) ? value : [];
+            const next = current.includes(cardValue)
+                ? current.filter((v) => v !== cardValue)
+                : [...current, cardValue];
+            onChange(next);
+        }
+    };
+    const contextValue = useMemo(() => ({
+        type,
+        indicator: resolvedIndicator,
+        value,
+        onChange: handleChange,
+        disabled,
+        name: groupName,
+        theme,
+    }), [type, resolvedIndicator, value, 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";
+
+export { SelectableCardGroup };

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

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

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

@@ -14,7 +14,7 @@ const signatureTheme = {
     // Canvas element style
     canvasStyle: "block w-full h-full cursor-crosshair touch-none focus:outline-none",
     // Placeholder text style
-    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-sm",
+    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-base",
     // Control buttons container style
     controlsStyle: "absolute bottom-2 right-2 flex gap-2 z-10",
     // Size variants - use shared padding system

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

@@ -216,18 +216,25 @@ 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 && (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 &&
                                         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, 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 }))] }));

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

@@ -4,23 +4,23 @@ const sliderTheme = {
     // Wrapper styles
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Label styles
-    labelStyle: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
+    labelStyle: "block text-base font-medium text-[var(--color-text-primary)] mb-2",
     // Helper text styles
     helperTextStyle: formsBaseTheme.helperText,
     // 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-background-tertiary)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full shadow-inner",
     // 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",
+    valueDisplayStyle: "text-base 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)]",
+    minMaxLabelStyle: "text-base 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/Switch/Switch.js

@@ -34,7 +34,9 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
         }
     };
     // 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;
+    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label &&
+                (typeof label === "string" ? (jsx(FormLabel, { htmlFor: id, 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;
     // Build data attributes for state-based styling
     const trackDataState = isDisabled
         ? "disabled"
@@ -43,8 +45,14 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
             : isChecked
                 ? "checked"
                 : "unchecked";
+    const filterId = `switch-liquid-lens-${id}`;
     // 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 = (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("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" })] }) }) }), jsx("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick, children: jsxs(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 }, whileTap: isDisabled ? undefined : { scale: 1.15 }, style: { filter: `url(#${filterId})` }, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
+                                backdropFilter: "blur(0.6px)",
+                                WebkitBackdropFilter: "blur(0.6px)",
+                            }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/80", "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" })] }) })] }));
     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.js

@@ -3,15 +3,15 @@
  */
 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",
-    description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
+    track: "w-12 h-6 rounded-full cursor-pointer shadow-inner bg-[var(--color-background-tertiary)] 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)] outline outline-[var(--color-border)] transition-colors duration-300",
+    thumb: "w-7 h-5 rounded-full bg-transparent overflow-hidden border border-[var(--color-border)]/40 shadow-lg",
+    description: "text-base text-[var(--color-text-muted)] -mt-1.5",
 };
 /**
  * Thumb position values for animation
  */
 const thumbPositions = {
-    checked: { x: 18, y: 2 },
+    checked: { x: 16, y: 2 },
     unchecked: { x: 2, y: 2 },
 };
 

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

@@ -16,10 +16,10 @@ export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     checked?: boolean;
     /** Function called when the switch state changes */
     onChange?: (checked: boolean) => void;
-    /** Label text for the switch */
-    label?: string;
-    /** Optional description text */
-    description?: string;
+    /** Label for the switch — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Optional description — pass a string for default styling, or a ReactNode for full control */
+    description?: React.ReactNode;
     /** The state of the switch (default, disabled, invalid) */
     state?: SwitchState;
     /** Position of the label relative to the switch */

package/dist/components/forms/Textarea/Textarea.js

@@ -37,7 +37,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
     const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
                                 var _a;
                                 setIsFocused(true);
                                 (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -45,7 +45,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
                                 var _a;
                                 setIsFocused(false);
                                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                            }, ...props }) }) }) }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+                            }, ...props }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Textarea.displayName = "Textarea";
 

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

@@ -11,10 +11,10 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     size?: TextareaSize;
     /** The state of the textarea (default, disabled, invalid) */
     state?: TextareaState;
-    /** Optional label text for the textarea */
-    label?: string;
-    /** Optional helper text displayed below the textarea */
-    helperText?: string;
+    /** Optional label for the textarea — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Optional helper text below the textarea — pass a string for default styling, or a ReactNode for full control */
+    helperText?: React.ReactNode;
     /** Additional class name for the textarea */
     className?: string;
     /** Additional class name for the label */

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

@@ -62,7 +62,7 @@ const timePickerTheme = {
     // Individual wheel column - relative positioning for highlight overlay
     wheelColumnStyle: "flex-1 flex flex-col relative",
     // Wheel column header label
-    wheelHeaderStyle: "text-center py-2 text-xs font-semibold text-[var(--color-text-muted)] uppercase",
+    wheelHeaderStyle: "text-center py-2 text-sm font-semibold text-[var(--color-text-muted)] uppercase",
     // Center highlight row - positioned behind selected item
     wheelHighlightStyle: "absolute -mt-4 inset-x-0 bg-[var(--color-border)] pointer-events-none z-0",
     // Wheel item - centered with transition for smooth opacity/color changes
@@ -77,7 +77,7 @@ const timePickerTheme = {
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
     // AM/PM period toggle button
-    periodToggleStyle: "px-1.5 py-0.5 text-xs font-semibold rounded " +
+    periodToggleStyle: "px-1.5 py-0.5 text-sm font-semibold rounded " +
         "bg-[var(--color-background-tertiary)] text-[var(--color-text-primary)] " +
         "hover:bg-[var(--color-background-quaternary)] transition-colors cursor-pointer select-none " +
         "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +

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

@@ -15,7 +15,7 @@ const formsBaseTheme = {
         "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] " +
         "dark:focus-within:outline-[var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
-    controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
+    controlBaseStyle: "w-full bg-transparent text-base text-[var(--color-text-primary)] " +
         "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
         // Dark mode
         "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
@@ -23,19 +23,19 @@ const formsBaseTheme = {
     // These tokens can be composed together or used individually for maximum flexibility
     sizes: {
         sm: {
-            text: "text-sm",
+            text: "text-base",
             padding: "py-[var(--form-py-sm)] px-[var(--form-px-sm)]",
             height: "h-[var(--form-min-h-sm)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-sm)*2)]",
         },
         md: {
-            text: "text-sm",
+            text: "text-base",
             padding: "py-[var(--form-py-md)] px-[var(--form-px-md)]",
             height: "h-[var(--form-min-h-md)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-md)*2)]",
         },
         lg: {
-            text: "text-base",
+            text: "text-lg",
             padding: "py-[var(--form-py-lg)] px-[var(--form-px-lg)]",
             height: "h-[var(--form-min-h-lg)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-lg)*2)]",
@@ -72,7 +72,7 @@ const formsBaseTheme = {
         invalid: "",
     },
     // Common helper text style with state variations
-    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)] " +
+    helperText: "text-sm text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.state-invalid_&]:text-[var(--color-danger-500)] " +
         "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
     iconStyles: {
@@ -89,7 +89,7 @@ const formsBaseTheme = {
     dropdownStyles: {
         // Container for dropdown panel
         container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
-            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
+            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-base border border-[var(--color-border)] " +
             "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none " +
             "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
         // Base option style

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

@@ -11,20 +11,26 @@ export { FormLabel } from "./FormLabel";
 export type { FormLabelProps, FormLabelState, FormLabelTheme, } from "./FormLabel";
 export { formLabelTheme } from "./FormLabel";
 export { Radio } from "./Radio";
-export type { RadioProps, RadioSize, RadioState } from "./Radio";
+export type { RadioProps, RadioSize, RadioState, RadioGroupProps, RadioGroupOrientation, } from "./Radio";
 export { radioTheme } from "./Radio";
 export { Checkbox } from "./Checkbox";
-export type { CheckboxProps, CheckboxSize, CheckboxState } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation, } from "./Checkbox";
 export { checkboxTheme } from "./Checkbox";
 export { Switch } from "./Switch";
 export type { SwitchProps, SwitchThemeOverrides } from "./Switch";
 export { switchTheme } from "./Switch";
-export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets, } from "./DatePicker";
-export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
+export { DatePicker, DatePickerTrigger, DatePickerBody, DatePickerPresets, } from "./DatePicker";
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerBodyProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
 export { datePickerTheme } from "./DatePicker";
+export { DateRangePicker, DateRangePickerTrigger, DateRangePickerBody, DateRangePickerPresets, } from "./DateRangePicker";
+export type { DateRangePickerProps, DateRangePickerTriggerProps, DateRangePickerBodyProps, DateRangePickerPresetsProps, DateRangePickerSize, DateRangePickerState, DateRangePickerPlacement, DateRangePickerTheme, } from "./DateRangePicker";
+export { dateRangePickerTheme, DEFAULT_DATE_RANGE_PRESETS } from "./DateRangePicker";
 export { FileUpload } from "./FileUpload";
 export type { FileUploadProps, FileUploadThemeOverrides, UploadedFile, } from "./FileUpload";
 export { fileUploadTheme } from "./FileUpload";
+export { FileUploadProgress } from "./FileUpload";
+export type { FileUploadProgressProps, FileUploadProgressItem, FileUploadProgressStatus, FileUploadProgressThemeOverrides, } from "./FileUpload";
+export { fileUploadProgressTheme } from "./FileUpload";
 export { TimePicker } from "./TimePicker";
 export type { TimePickerProps, TimePickerSize, TimePickerState, TimePickerThemeOverrides, } from "./TimePicker";
 export { timePickerTheme } from "./TimePicker";
@@ -60,3 +66,13 @@ export { Combobox } from "./Combobox";
 export type { ComboboxProps, ComboboxOption, ComboboxSize, ComboboxState, ComboboxTheme, ComboboxThemeOverrides, } from "./Combobox";
 export { comboboxTheme } from "./Combobox";
 export * from "./ColorPicker";
+export { SelectableCard } from "./SelectableCard";
+export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardTheme, } from "./SelectableCard";
+export { selectableCardTheme } from "./SelectableCard";
+export { Mention } from "./Mention";
+export type { MentionProps, MentionSuggestion, MentionTrigger, MentionSize, MentionTheme, MentionThemeOverrides, } from "./Mention";
+export { mentionTheme } from "./Mention";
+export { CronInput } from "./CronInput";
+export type { CronInputProps, CronInputSize, CronInputMode, CronInputTheme, CronInputThemeOverrides, CronFields, CronPreset, } from "./CronInput";
+export { cronInputTheme } from "./CronInput";
+export { parseCron, fieldsToCron, validateCron, cronToDescription, getNextRuns, formatNextRun, CRON_PRESETS, } from "./CronInput";

package/dist/components/forms/index.js

@@ -14,8 +14,13 @@ export { Switch } from './Switch/Switch.js';
 export { switchTheme } from './Switch/Switch.theme.js';
 export { DatePicker } from './DatePicker/DatePicker.js';
 export { datePickerTheme } from './DatePicker/DatePicker.theme.js';
+export { DateRangePicker } from './DateRangePicker/DateRangePicker.js';
+export { dateRangePickerTheme } from './DateRangePicker/DateRangePicker.theme.js';
+export { DEFAULT_DATE_RANGE_PRESETS } from './DateRangePicker/dateRangePresets.js';
 export { FileUpload } from './FileUpload/FileUpload.js';
 export { fileUploadTheme } from './FileUpload/FileUpload.theme.js';
+export { FileUploadProgress } from './FileUpload/FileUploadProgress.js';
+export { fileUploadProgressTheme } from './FileUpload/FileUploadProgress.theme.js';
 export { TimePicker } from './TimePicker/TimePicker.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -49,7 +54,7 @@ export { Combobox } from './Combobox/Combobox.js';
 export { comboboxTheme } from './Combobox/Combobox.theme.js';
 export { ColorPicker, ColorPickerContext, useColorPicker } from './ColorPicker/ColorPicker.js';
 export { ColorPickerTrigger } from './ColorPicker/ColorPickerTrigger.js';
-export { ColorPickerContent } from './ColorPicker/ColorPickerContent.js';
+export { ColorPickerBody } from './ColorPicker/ColorPickerBody.js';
 export { ColorPicker2DCanvas } from './ColorPicker/ColorPicker2DCanvas.js';
 export { ColorPickerSwatch } from './ColorPicker/ColorPickerSwatch.js';
 export { ColorPickerSliders } from './ColorPicker/ColorPickerSliders.js';
@@ -58,6 +63,16 @@ export { ColorPickerFormatSelector } from './ColorPicker/ColorPickerFormatSelect
 export { ColorPickerEyeDropper } from './ColorPicker/ColorPickerEyeDropper.js';
 export { ColorPickerPresets } from './ColorPicker/ColorPickerPresets.js';
 export { formatHex, formatHsl, formatRgb, hexToRgb, hslToRgb, hsvToRgb, parseColor, rgbToHex, rgbToHsl, rgbToHsv, validateHex, validateRgb } from './ColorPicker/colorUtils.js';
-export { DatePickerContent } from './DatePicker/DatePickerContent.js';
+export { SelectableCard } from './SelectableCard/SelectableCard.js';
+export { selectableCardTheme } from './SelectableCard/SelectableCard.theme.js';
+export { Mention } from './Mention/Mention.js';
+export { mentionTheme } from './Mention/Mention.theme.js';
+export { CronInput } from './CronInput/CronInput.js';
+export { cronInputTheme } from './CronInput/CronInput.theme.js';
+export { CRON_PRESETS, cronToDescription, fieldsToCron, formatNextRun, getNextRuns, parseCron, validateCron } from './CronInput/CronInput.utils.js';
+export { DatePickerBody } from './DatePicker/DatePickerBody.js';
 export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';
 export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';
+export { DateRangePickerBody } from './DateRangePicker/DateRangePickerBody.js';
+export { DateRangePickerPresets } from './DateRangePicker/DateRangePickerPresets.js';
+export { DateRangePickerTrigger } from './DateRangePicker/DateRangePickerTrigger.js';

package/dist/components/layout/FormLayout/FormLayout.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { FormLayoutProps } from "./FormLayout.types";
+export declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>> & {
+    Section: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutSectionProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/layout/FormLayout/FormLayout.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+import { FormLayoutSection } from './FormLayoutSection.js';
+import { FormLayoutFooter } from './FormLayoutFooter.js';
+import { Separator } from '../../core/Separator/Separator.js';
+
+const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
+const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    // Inject <Separator /> between any adjacent children, unless one of them is Footer
+    // (Footer already has border-t, so no separator needed before it)
+    const childArray = React__default.Children.toArray(children).filter(Boolean);
+    const rendered = childArray.map((child, index) => {
+        const prev = childArray[index - 1];
+        const needsSeparator = index > 0 && !isFooter(child) && !isFooter(prev);
+        return (jsxs(React__default.Fragment, { children: [needsSeparator && jsx(Separator, {}), child] }, index));
+    });
+    return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: rendered }));
+});
+FormLayoutRoot.displayName = "FormLayout";
+const FormLayout = Object.assign(FormLayoutRoot, {
+    Section: FormLayoutSection,
+    Footer: FormLayoutFooter,
+});
+
+export { FormLayout };

package/dist/components/layout/FormLayout/FormLayout.theme.d.ts

@@ -0,0 +1,2 @@
+import type { FormLayoutTheme } from "./FormLayout.types";
+export declare const formLayoutTheme: FormLayoutTheme;

package/dist/components/layout/FormLayout/FormLayout.theme.js

@@ -0,0 +1,13 @@
+const formLayoutTheme = {
+    root: "flex flex-col gap-6",
+    section: "grid grid-cols-1 md:grid-cols-6 gap-6 md:gap-10",
+    sectionSidebar: "col-span-full md:col-span-2",
+    sectionTitle: "text-lg font-semibold text-[var(--color-text-primary)]",
+    sectionSubtitle: "text-base text-[var(--color-text-muted)] mt-1",
+    sectionAction: "mt-4",
+    sectionContent: "col-span-full md:col-span-4 grid grid-cols-1 sm:grid-cols-2 gap-4",
+    sectionContentFull: "col-span-full grid grid-cols-1 sm:grid-cols-2 gap-4",
+    footer: "flex flex-col-reverse sm:flex-row sm:justify-between items-center gap-3 border-t border-[var(--color-border)] pt-3",
+};
+
+export { formLayoutTheme };

package/dist/components/layout/FormLayout/FormLayout.types.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+export interface FormLayoutTheme {
+    root: string;
+    section: string;
+    sectionSidebar: string;
+    sectionTitle: string;
+    sectionSubtitle: string;
+    sectionAction: string;
+    sectionContent: string;
+    sectionContentFull: string;
+    footer: string;
+}
+export interface FormLayoutThemeOverrides {
+    root?: string;
+    section?: string;
+    sectionSidebar?: string;
+    sectionTitle?: string;
+    sectionSubtitle?: string;
+    sectionAction?: string;
+    sectionContent?: string;
+    sectionContentFull?: string;
+    footer?: string;
+}
+export interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Theme overrides for the root container. */
+    theme?: FormLayoutThemeOverrides;
+}
+export interface FormLayoutSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Optional section title. If omitted along with subtitle and action, the sidebar column is hidden. */
+    title?: string;
+    /** Optional subtitle displayed below the title. */
+    subtitle?: string;
+    /** Optional action element rendered below the subtitle. */
+    action?: React.ReactNode;
+    /** Additional className applied to the content area. */
+    contentClassName?: string;
+    /** Theme overrides for the section. */
+    theme?: FormLayoutThemeOverrides;
+}
+export interface FormLayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Theme overrides for the footer. */
+    theme?: FormLayoutThemeOverrides;
+}

package/dist/components/layout/FormLayout/FormLayoutFooter.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { FormLayoutFooterProps } from "./FormLayout.types";
+export declare const FormLayoutFooter: React.ForwardRefExoticComponent<FormLayoutFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/FormLayout/FormLayoutFooter.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+
+const FormLayoutFooter = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    return (jsx("div", { ref: ref, className: cn(theme.footer, className), ...props, children: children }));
+});
+FormLayoutFooter.displayName = "FormLayout.Footer";
+
+export { FormLayoutFooter };

package/dist/components/layout/FormLayout/FormLayoutSection.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { FormLayoutSectionProps } from "./FormLayout.types";
+export declare const FormLayoutSection: React.ForwardRefExoticComponent<FormLayoutSectionProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/FormLayout/FormLayoutSection.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+
+const FormLayoutSection = React__default.forwardRef(({ title, subtitle, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    const hasSidebar = !!(title || subtitle || action);
+    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [hasSidebar && (jsxs("div", { className: theme.sectionSidebar, children: [title && jsx("div", { className: theme.sectionTitle, children: title }), subtitle && (jsx("div", { className: theme.sectionSubtitle, children: subtitle })), action && jsx("div", { className: theme.sectionAction, children: action })] })), jsx("div", { className: cn(hasSidebar ? theme.sectionContent : theme.sectionContentFull, contentClassName), children: children })] }));
+});
+FormLayoutSection.displayName = "FormLayout.Section";
+
+export { FormLayoutSection };

package/dist/components/layout/FormLayout/index.d.ts

@@ -0,0 +1,3 @@
+export { FormLayout } from "./FormLayout";
+export type { FormLayoutProps, FormLayoutSectionProps, FormLayoutFooterProps, FormLayoutTheme, FormLayoutThemeOverrides, } from "./FormLayout.types";
+export { formLayoutTheme } from "./FormLayout.theme";

package/dist/components/layout/PageLayout/PageLayout.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { PageLayoutProps } from "./PageLayout.types";
+export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>> & {
+    Sidebar: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutSidebarProps & React.RefAttributes<HTMLElement>>;
+    Header: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutHeaderProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutContentProps & React.RefAttributes<HTMLElement>>;
+};

package/dist/components/layout/PageLayout/PageLayout.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageLayoutTheme } from './PageLayout.theme.js';
+import { PageLayoutSidebar } from './PageLayoutSidebar.js';
+import { PageLayoutHeader } from './PageLayoutHeader.js';
+import { PageLayoutContent } from './PageLayoutContent.js';
+
+const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...pageLayoutTheme, ...customTheme };
+    // Separate Sidebar children from the rest (Header, Content)
+    // so we can wrap non-sidebar children in a vertical main column.
+    const childArray = React__default.Children.toArray(children);
+    const sidebar = [];
+    const main = [];
+    childArray.forEach((child) => {
+        if (React__default.isValidElement(child) && child.type === PageLayoutSidebar) {
+            sidebar.push(child);
+        }
+        else {
+            main.push(child);
+        }
+    });
+    return (jsxs("div", { ref: ref, className: cn(theme.root, className), ...props, children: [sidebar, jsx("div", { className: cn(theme.main), children: main })] }));
+});
+PageLayoutRoot.displayName = "PageLayout";
+const PageLayout = Object.assign(PageLayoutRoot, {
+    Sidebar: PageLayoutSidebar,
+    Header: PageLayoutHeader,
+    Content: PageLayoutContent,
+});
+
+export { PageLayout };

package/dist/components/layout/PageLayout/PageLayout.theme.d.ts

@@ -0,0 +1,2 @@
+import type { PageLayoutTheme } from "./PageLayout.types";
+export declare const pageLayoutTheme: PageLayoutTheme;