@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,93 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Signature component size variants
+ */
+export type SignatureSize = 'sm' | 'md' | 'lg';
+/**
+ * Signature component state variants
+ */
+export type SignatureState = 'default' | 'disabled' | 'invalid';
+/**
+ * Signature theme configuration
+ */
+export interface SignatureTheme {
+    /** Wrapper container style */
+    wrapperStyle: string;
+    /** Input group container style (border, focus, states) */
+    inputGroupStyle: string;
+    /** Canvas wrapper style */
+    baseStyle: string;
+    /** Canvas element style */
+    canvasStyle: string;
+    /** Placeholder text style */
+    placeholderStyle: string;
+    /** Control buttons container style */
+    controlsStyle: string;
+    /** Size variants */
+    sizes?: Record<SignatureSize, string>;
+    /** State variants */
+    states?: Record<SignatureState, string>;
+    /** Helper text style */
+    helperText?: string;
+}
+/**
+ * Theme overrides for the Signature component
+ */
+export interface SignatureThemeOverrides {
+    wrapperStyle?: string;
+    inputGroupStyle?: string;
+    baseStyle?: string;
+    canvasStyle?: string;
+    placeholderStyle?: string;
+    controlsStyle?: string;
+    sizes?: Partial<Record<SignatureSize, string>>;
+    states?: Partial<Record<SignatureState, string>>;
+    helperText?: string;
+}
+/**
+ * Signature component props
+ */
+export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Unique identifier for the signature field */
+    id?: string;
+    /** Label text for the signature */
+    label?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Helper text displayed below the signature */
+    helperText?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Size variant of the signature component */
+    size?: SignatureSize;
+    /** State of the signature component */
+    state?: SignatureState;
+    /** Whether the signature is required */
+    required?: boolean;
+    /** Whether the signature is disabled */
+    disabled?: boolean;
+    /** Canvas width */
+    width?: number;
+    /** Canvas height */
+    height?: number;
+    /** Stroke color */
+    strokeColor?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Background color */
+    backgroundColor?: string;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: SignatureThemeOverrides;
+    /** Called when signature changes */
+    onChange?: (dataURL: string) => void;
+    /** Called when signature is cleared */
+    onClear?: () => void;
+    /** Show control buttons */
+    showControls?: boolean;
+    /** Placeholder text when empty */
+    placeholder?: string;
+}

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

@@ -0,0 +1,3 @@
+export { Signature } from './Signature';
+export type { SignatureProps, SignatureTheme, SignatureThemeOverrides } from './Signature.types';
+export { signatureTheme } from './Signature.theme';

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

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

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

@@ -0,0 +1,237 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useCallback, useMemo } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { sliderTheme } from './Slider.theme.js';
+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);
+    const generatedId = React__default.useId();
+    const sliderId = id || generatedId;
+    const helperTextId = 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;
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    // Get values as array for consistent handling
+    const values = Array.isArray(currentValue) ? currentValue : [currentValue];
+    const [dragIndex, setDragIndex] = useState(null);
+    // Calculate percentage for positioning
+    const getPercentage = useCallback((val) => {
+        return ((val - min) / (max - min)) * 100;
+    }, [min, max]);
+    // Get value from mouse/touch position
+    const getValueFromPosition = useCallback((clientX) => {
+        if (!trackRef.current)
+            return min;
+        const rect = trackRef.current.getBoundingClientRect();
+        const percentage = ((clientX - rect.left) / rect.width) * 100;
+        const clampedPercentage = Math.max(0, Math.min(100, percentage));
+        const rawValue = min + (clampedPercentage / 100) * (max - min);
+        // Round to nearest step
+        const steppedValue = Math.round(rawValue / step) * step;
+        return Math.max(min, Math.min(max, steppedValue));
+    }, [min, max, step]);
+    // Handle value change
+    const handleValueChange = useCallback((newValue) => {
+        if (isDisabled)
+            return;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }, [value, onChange, isDisabled]);
+    // Handle pointer down on thumb
+    const handlePointerDown = useCallback((e, thumbIndex) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        setDragIndex(thumbIndex);
+        const handleMove = (moveEvent) => {
+            const newValue = getValueFromPosition(moveEvent.clientX);
+            if (range) {
+                const newValues = [...values];
+                newValues[thumbIndex] = newValue;
+                // Ensure values don't cross over
+                if (thumbIndex === 0 && newValue > newValues[1]) {
+                    newValues[0] = newValues[1];
+                }
+                else if (thumbIndex === 1 && newValue < newValues[0]) {
+                    newValues[1] = newValues[0];
+                }
+                handleValueChange(newValues);
+            }
+            else {
+                handleValueChange(newValue);
+            }
+        };
+        const handleEnd = () => {
+            setDragIndex(null);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(currentValue);
+            document.removeEventListener("pointermove", handleMove);
+            document.removeEventListener("pointerup", handleEnd);
+        };
+        document.addEventListener("pointermove", handleMove);
+        document.addEventListener("pointerup", handleEnd);
+    }, [
+        isDisabled,
+        range,
+        values,
+        getValueFromPosition,
+        handleValueChange,
+        onChangeCommitted,
+        currentValue,
+    ]);
+    // Handle track click
+    const handleTrackClick = useCallback((e) => {
+        if (isDisabled || dragIndex !== null)
+            return;
+        const newValue = getValueFromPosition(e.clientX);
+        if (range) {
+            // Find closest thumb
+            const distances = values.map((val) => Math.abs(val - newValue));
+            const closestIndex = distances[0] <= distances[1] ? 0 : 1;
+            const newValues = [...values];
+            newValues[closestIndex] = newValue;
+            // Ensure values don't cross over
+            if (closestIndex === 0 && newValue > newValues[1]) {
+                newValues[0] = newValues[1];
+            }
+            else if (closestIndex === 1 && newValue < newValues[0]) {
+                newValues[1] = newValues[0];
+            }
+            handleValueChange(newValues);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValues);
+        }
+        else {
+            handleValueChange(newValue);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValue);
+        }
+    }, [
+        isDisabled,
+        dragIndex,
+        range,
+        values,
+        getValueFromPosition,
+        handleValueChange,
+        onChangeCommitted,
+    ]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e, thumbIndex) => {
+        if (isDisabled)
+            return;
+        let delta = 0;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                delta = step;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                delta = -step;
+                break;
+            case "PageUp":
+                delta = step * 10;
+                break;
+            case "PageDown":
+                delta = -step * 10;
+                break;
+            case "Home":
+                delta = min - values[thumbIndex];
+                break;
+            case "End":
+                delta = max - values[thumbIndex];
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (range) {
+            const newValues = [...values];
+            newValues[thumbIndex] = Math.max(min, Math.min(max, newValues[thumbIndex] + delta));
+            // Ensure values don't cross over
+            if (thumbIndex === 0 && newValues[0] > newValues[1]) {
+                newValues[0] = newValues[1];
+            }
+            else if (thumbIndex === 1 && newValues[1] < newValues[0]) {
+                newValues[1] = newValues[0];
+            }
+            handleValueChange(newValues);
+        }
+        else {
+            const newValue = Math.max(min, Math.min(max, values[0] + delta));
+            handleValueChange(newValue);
+        }
+    }, [isDisabled, step, min, max, range, values, handleValueChange]);
+    // Generate tick marks
+    const generateTicks = useCallback(() => {
+        if (!showTicks)
+            return [];
+        const actualTickStep = tickStep !== null && tickStep !== void 0 ? tickStep : step;
+        const ticks = [];
+        for (let i = min; i <= max; i += actualTickStep) {
+            ticks.push(i);
+        }
+        return ticks;
+    }, [showTicks, tickStep, step, min, max]);
+    const ticks = generateTicks();
+    // Merged theme
+    const mergedTheme = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return ({
+            wrapperStyle: (_a = theme.wrapperStyle) !== null && _a !== void 0 ? _a : sliderTheme.wrapperStyle,
+            labelStyle: (_b = theme.labelStyle) !== null && _b !== void 0 ? _b : sliderTheme.labelStyle,
+            helperTextStyle: (_c = theme.helperTextStyle) !== null && _c !== void 0 ? _c : sliderTheme.helperTextStyle,
+            rootStyle: (_d = theme.rootStyle) !== null && _d !== void 0 ? _d : sliderTheme.rootStyle,
+            trackStyle: (_e = theme.trackStyle) !== null && _e !== void 0 ? _e : sliderTheme.trackStyle,
+            rangeStyle: (_f = theme.rangeStyle) !== null && _f !== void 0 ? _f : sliderTheme.rangeStyle,
+            thumbStyle: (_g = theme.thumbStyle) !== null && _g !== void 0 ? _g : sliderTheme.thumbStyle,
+            valueDisplayStyle: (_h = theme.valueDisplayStyle) !== null && _h !== void 0 ? _h : sliderTheme.valueDisplayStyle,
+            minMaxLabelStyle: (_j = theme.minMaxLabelStyle) !== null && _j !== void 0 ? _j : sliderTheme.minMaxLabelStyle,
+            tickStyle: (_k = theme.tickStyle) !== null && _k !== void 0 ? _k : sliderTheme.tickStyle,
+        });
+    }, [theme]);
+    // Calculate filled track dimensions
+    const getFilledTrackStyle = () => {
+        if (range) {
+            const start = getPercentage(Math.min(...values));
+            const end = getPercentage(Math.max(...values));
+            return {
+                left: `${start}%`,
+                width: `${end - start}%`,
+            };
+        }
+        const percentage = getPercentage(values[0]);
+        return {
+            left: 0,
+            width: `${percentage}%`,
+        };
+    };
+    // Format value display
+    const formatValueDisplay = () => {
+        if (Array.isArray(currentValue)) {
+            return `${currentValue[0]}${unit} - ${currentValue[1]}${unit}`;
+        }
+        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 &&
+                                        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: {
+                                        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));
+                            }), 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 }))] }));
+});
+Slider.displayName = "Slider";
+
+export { Slider };

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

@@ -0,0 +1,17 @@
+/**
+ * Default theme for the Slider component
+ * Uses flat structure with data-attribute selectors following shadcn pattern
+ */
+export interface SliderTheme {
+    wrapperStyle: string;
+    labelStyle: string;
+    helperTextStyle: string;
+    rootStyle: string;
+    trackStyle: string;
+    rangeStyle: string;
+    thumbStyle: string;
+    valueDisplayStyle: string;
+    minMaxLabelStyle: string;
+    tickStyle: string;
+}
+export declare const sliderTheme: SliderTheme;

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

@@ -0,0 +1,26 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+const sliderTheme = {
+    // Wrapper styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Label styles
+    labelStyle: "block text-sm 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",
+    // 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",
+    // 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",
+};
+
+export { sliderTheme };

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

@@ -0,0 +1,109 @@
+import React from 'react';
+/**
+ * Slider component props
+ * @property {SliderSize} size - The size of the slider
+ * @property {SliderState} state - The state of the slider (default, disabled, invalid)
+ * @property {string} label - Optional label text for the slider
+ * @property {string} helperText - Optional helper text displayed below the slider
+ * @property {number} min - Minimum value for the slider
+ * @property {number} max - Maximum value for the slider
+ * @property {number} step - Step value for slider increments
+ * @property {number | number[]} value - Current value(s) of the slider
+ * @property {number | number[]} defaultValue - Default value(s) for uncontrolled usage
+ * @property {function} onChange - Callback fired when the value changes
+ * @property {function} onChangeCommitted - Callback fired when the user stops dragging
+ * @property {boolean} showValue - Whether to show the current value
+ * @property {string} unit - Unit to display with the value (e.g., "px", "%", "°")
+ * @property {boolean} showMinMax - Whether to show min/max labels
+ * @property {boolean} showTicks - Whether to show tick marks
+ * @property {number} tickStep - Step for tick marks (defaults to step)
+ * @property {boolean} range - Whether this is a range slider (dual thumbs)
+ * @property {React.ReactNode} iconStart - Icon to display at the start of the slider
+ * @property {React.ReactNode} iconEnd - Icon to display at the end of the slider
+ * @property {boolean} required - Whether the slider is required
+ */
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** The state of the slider (default, disabled, invalid) */
+    state?: SliderState;
+    /** Optional label text for the slider */
+    label?: string;
+    /** Optional helper text displayed below the slider */
+    helperText?: string;
+    /** Minimum value for the slider */
+    min?: number;
+    /** Maximum value for the slider */
+    max?: number;
+    /** Step value for slider increments */
+    step?: number;
+    /** Current value(s) of the slider */
+    value?: number | number[];
+    /** Default value(s) for uncontrolled usage */
+    defaultValue?: number | number[];
+    /** Callback fired when the value changes */
+    onChange?: (value: number | number[]) => void;
+    /** Callback fired when the user stops dragging */
+    onChangeCommitted?: (value: number | number[]) => void;
+    /** Whether to show the current value */
+    showValue?: boolean;
+    /** Unit to display with the value (e.g., "px", "%", "°") */
+    unit?: string;
+    /** Whether to show min/max labels */
+    showMinMax?: boolean;
+    /** Whether to show tick marks */
+    showTicks?: boolean;
+    /** Step for tick marks (defaults to step) */
+    tickStep?: number;
+    /** Whether this is a range slider (dual thumbs) */
+    range?: boolean;
+    /** Icon to display at the start of the slider */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end of the slider */
+    iconEnd?: React.ReactNode;
+    /** Additional class name for the slider */
+    className?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Component-level theme overrides */
+    theme?: SliderThemeOverrides;
+    /** Whether the slider is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** ARIA labelledby for accessibility */
+    'aria-labelledby'?: string;
+    /** ARIA describedby for accessibility */
+    'aria-describedby'?: string;
+}
+export type SliderState = 'default' | 'disabled' | 'invalid';
+/**
+ * Theme overrides for the Slider component
+ * Simplified flat structure following shadcn pattern
+ */
+export interface SliderThemeOverrides {
+    /** Style for the outermost wrapper */
+    wrapperStyle?: string;
+    /** Style for the label */
+    labelStyle?: string;
+    /** Style for the helper text */
+    helperTextStyle?: string;
+    /** Style for the root slider container */
+    rootStyle?: string;
+    /** Style for the slider track (background) */
+    trackStyle?: string;
+    /** Style for the range (filled portion) */
+    rangeStyle?: string;
+    /** Base style for the slider thumb */
+    thumbStyle?: string;
+    /** Style for the value display */
+    valueDisplayStyle?: string;
+    /** Style for min/max labels */
+    minMaxLabelStyle?: string;
+    /** Style for tick marks */
+    tickStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { Slider } from "./Slider";
+export type { SliderProps, SliderState, SliderThemeOverrides } from "./Slider.types";
+export { sliderTheme } from "./Slider.theme";

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { SwitchProps } from "./Switch.types";
+/**
+ * Switch component for toggling between two states
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,52 @@
+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 { switchTheme, thumbPositions } from './Switch.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * 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);
+    // 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;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        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 trackDataState = isDisabled
+        ? "disabled"
+        : isInvalid
+            ? "invalid"
+            : isChecked
+                ? "checked"
+                : "unchecked";
+    // 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 } }) })] }));
+    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";
+
+export { Switch };

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

@@ -0,0 +1,18 @@
+import { SwitchTheme } from "./Switch.types";
+/**
+ * Default theme configuration for the Switch component
+ */
+export declare const switchTheme: SwitchTheme;
+/**
+ * Thumb position values for animation
+ */
+export declare const thumbPositions: {
+    checked: {
+        x: number;
+        y: number;
+    };
+    unchecked: {
+        x: number;
+        y: number;
+    };
+};

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

@@ -0,0 +1,18 @@
+/**
+ * Default theme configuration for the Switch component
+ */
+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",
+};
+/**
+ * Thumb position values for animation
+ */
+const thumbPositions = {
+    checked: { x: 18, y: 2 },
+    unchecked: { x: 2, y: 2 },
+};
+
+export { switchTheme, thumbPositions };

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

@@ -0,0 +1,47 @@
+/**
+ * Position options for the switch label
+ */
+export type SwitchLabelPosition = "start" | "end";
+/**
+ * State variants for the switch component
+ */
+export type SwitchState = 'default' | 'disabled' | 'invalid';
+/**
+ * Switch component props
+ */
+export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Unique identifier for the switch input */
+    id: string;
+    /** Whether the switch is checked (controlled mode) */
+    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;
+    /** The state of the switch (default, disabled, invalid) */
+    state?: SwitchState;
+    /** Position of the label relative to the switch */
+    labelPosition?: SwitchLabelPosition;
+    /** Optional theme overrides */
+    theme?: SwitchThemeOverrides;
+}
+/**
+ * Switch theme configuration
+ */
+export interface SwitchTheme {
+    container: string;
+    track: string;
+    thumb: string;
+    description: string;
+}
+/**
+ * Switch theme overrides
+ */
+export interface SwitchThemeOverrides {
+    container?: string;
+    track?: string;
+    thumb?: string;
+    description?: string;
+}

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

@@ -0,0 +1,3 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchThemeOverrides } from './Switch.types';
+export { switchTheme } from './Switch.theme';

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { TextareaProps } from "./Textarea.types";
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;