flikkui 0.1.0-beta.2

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

@@ -0,0 +1,120 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { signatureTheme } from './Signature.theme.js';
+
+var Signature = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.width, width = _b === void 0 ? 400 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c, _d = _a.strokeColor, strokeColor = _d === void 0 ? '#000000' : _d, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 2 : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'transparent' : _f, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, onChange = _a.onChange, onClear = _a.onClear, _h = _a.showControls, showControls = _h === void 0 ? true : _h, _j = _a.placeholder, placeholder = _j === void 0 ? 'Sign here' : _j, props = __rest(_a, ["width", "height", "strokeColor", "strokeWidth", "backgroundColor", "className", "theme", "onChange", "onClear", "showControls", "placeholder"]);
+    var canvasRef = useRef(null);
+    var _k = useState(false), isDrawing = _k[0], setIsDrawing = _k[1];
+    var _l = useState(true), isEmpty = _l[0], setIsEmpty = _l[1];
+    var _m = useState(null), lastPoint = _m[0], setLastPoint = _m[1];
+    var theme = __assign(__assign({}, signatureTheme), customTheme);
+    useEffect(function () {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Set canvas size
+        canvas.width = width;
+        canvas.height = height;
+        // Configure drawing context
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = strokeWidth;
+        // Set background
+        if (backgroundColor !== 'transparent') {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, width, height);
+        }
+    }, [width, height, strokeColor, strokeWidth, backgroundColor]);
+    var getPointFromEvent = useCallback(function (event) {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return { x: 0, y: 0 };
+        var rect = canvas.getBoundingClientRect();
+        if ('touches' in event) {
+            return {
+                x: event.touches[0].clientX - rect.left,
+                y: event.touches[0].clientY - rect.top,
+            };
+        }
+        return {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+        };
+    }, []);
+    var startDrawing = useCallback(function (event) {
+        event.preventDefault();
+        setIsDrawing(true);
+        setIsEmpty(false);
+        var point = getPointFromEvent(event.nativeEvent);
+        setLastPoint(point);
+    }, [getPointFromEvent]);
+    var draw = useCallback(function (event) {
+        event.preventDefault();
+        if (!isDrawing)
+            return;
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        var currentPoint = getPointFromEvent(event.nativeEvent);
+        ctx.beginPath();
+        if (lastPoint) {
+            ctx.moveTo(lastPoint.x, lastPoint.y);
+            ctx.lineTo(currentPoint.x, currentPoint.y);
+        }
+        ctx.stroke();
+        setLastPoint(currentPoint);
+        // Emit change event
+        var dataURL = canvas.toDataURL();
+        onChange === null || onChange === void 0 ? void 0 : onChange(dataURL);
+    }, [isDrawing, lastPoint, getPointFromEvent, onChange]);
+    var stopDrawing = useCallback(function () {
+        setIsDrawing(false);
+        setLastPoint(null);
+    }, []);
+    var clear = useCallback(function () {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.clearRect(0, 0, width, height);
+        // Reset background
+        if (backgroundColor !== 'transparent') {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, width, height);
+        }
+        setIsEmpty(true);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        onChange === null || onChange === void 0 ? void 0 : onChange('');
+    }, [width, height, backgroundColor, onClear, onChange]);
+    var save = useCallback(function () {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var dataURL = canvas.toDataURL();
+        // Create download link
+        var link = document.createElement('a');
+        link.download = 'signature.png';
+        link.href = dataURL;
+        link.click();
+    }, []);
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, className), style: { width: width, height: height } }, props),
+        React__default.createElement("canvas", { ref: canvasRef, className: theme.canvasStyle, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing }),
+        isEmpty && placeholder && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none text-gray-400" }, placeholder)),
+        showControls && (React__default.createElement("div", { className: theme.controlsStyle },
+            React__default.createElement("button", { type: "button", className: theme.buttonStyle, onClick: clear }, "Clear"),
+            React__default.createElement("button", { type: "button", className: theme.buttonStyle, onClick: save, disabled: isEmpty }, "Save")))));
+});
+Signature.displayName = 'Signature';
+
+export { Signature };

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

@@ -0,0 +1,2 @@
+import { SignatureTheme } from './Signature.types';
+export declare const signatureTheme: SignatureTheme;

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

@@ -0,0 +1,8 @@
+var signatureTheme = {
+    baseStyle: 'relative border border-gray-300 rounded-lg bg-white',
+    canvasStyle: 'block w-full h-full cursor-crosshair',
+    controlsStyle: 'absolute top-2 right-2 flex gap-2',
+    buttonStyle: 'px-3 py-1 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors',
+};
+
+export { signatureTheme };

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

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+export interface SignatureTheme {
+    baseStyle: string;
+    canvasStyle: string;
+    controlsStyle: string;
+    buttonStyle: string;
+}
+export interface SignatureThemeOverrides {
+    baseStyle?: string;
+    canvasStyle?: string;
+    controlsStyle?: string;
+    buttonStyle?: string;
+}
+export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** 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,2 @@
+export { Signature } from './Signature';
+export type { SignatureProps, SignatureTheme, SignatureThemeOverrides } from './Signature.types';

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

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

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

@@ -0,0 +1,7 @@
+import { SliderThemeOverrides } from "./Slider.types";
+/**
+ * Default theme for the Slider component
+ * Extends the common forms base theme
+ */
+export declare const sliderTheme: SliderThemeOverrides;
+export default sliderTheme;

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

@@ -0,0 +1,131 @@
+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} leftIcon - Icon to display on the left side of the slider
+ * @property {React.ReactNode} rightIcon - Icon to display on the right side of the slider
+ * @property {boolean} required - Whether the slider is required
+ */
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** The size of the slider */
+    size?: SliderSize;
+    /** 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 on the left side of the slider */
+    leftIcon?: React.ReactNode;
+    /** Icon to display on the right side of the slider */
+    rightIcon?: 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 SliderSize = 'sm' | 'md' | 'lg';
+export type SliderState = 'default' | 'disabled' | 'invalid';
+/**
+ * Theme overrides for the Slider component
+ */
+export interface SliderThemeOverrides {
+    /** Style for the outermost wrapper */
+    wrapperStyle?: string;
+    /** Style for the slider container */
+    containerStyle?: string;
+    /** Base style for the slider track */
+    trackStyle?: string;
+    /** Style for the filled portion of the track */
+    filledTrackStyle?: string;
+    /** Base style for the slider thumb */
+    thumbStyle?: string;
+    /** Size variants for the slider */
+    sizes?: Partial<Record<SliderSize, {
+        track?: string;
+        thumb?: string;
+        container?: string;
+    }>>;
+    /** State variants for the slider */
+    states?: Partial<Record<SliderState, {
+        track?: string;
+        filledTrack?: string;
+        thumb?: string;
+    }>>;
+    /** Style for the label */
+    labelStyle?: string;
+    /** Style for the helper text */
+    helperTextStyle?: string;
+    /** Style for the value display */
+    valueStyle?: string;
+    /** Style for min/max labels */
+    minMaxLabelStyle?: string;
+    /** Style for tick marks */
+    tickStyle?: string;
+    /** Style for tick labels */
+    tickLabelStyle?: string;
+    /** Style for the value input */
+    valueInputStyle?: string;
+    /** Style for the left icon container */
+    leftIconStyle?: string;
+    /** Style for the right icon container */
+    rightIconStyle?: string;
+}

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

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

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

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

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

@@ -0,0 +1,61 @@
+import React__default, { useState } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { useSwitchTheme } from './Switch.theme.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * Switch component for toggling between two states
+ */
+var Switch = function (_a) {
+    var id = _a.id, controlledChecked = _a.checked, onChange = _a.onChange, label = _a.label, description = _a.description, _b = _a.state, state = _b === void 0 ? "default" : _b, _c = _a.labelPosition, labelPosition = _c === void 0 ? "end" : _c, // Default to end position (label after switch)
+    themeOverrides = _a.theme;
+    var _d = useState(false), internalChecked = _d[0], setInternalChecked = _d[1];
+    var theme = useSwitchTheme(themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseStyle);
+    // Determine if component is controlled or uncontrolled
+    var isControlled = controlledChecked !== undefined;
+    var isChecked = isControlled ? controlledChecked : internalChecked;
+    // Derive state flags
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    var handleChange = function (e) {
+        if (isDisabled)
+            return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
+    };
+    // Label and description content
+    var labelContent = (label || description) ? (React__default.createElement("div", { className: "flex grow flex-col" },
+        label && React__default.createElement(FormLabel, { htmlFor: id, state: state }, label),
+        description && React__default.createElement("div", { className: theme.description }, description))) : null;
+    // Switch toggle component
+    var switchToggle = (React__default.createElement("div", { className: "relative flex items-center h-6" },
+        React__default.createElement("input", { type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }),
+        React__default.createElement("div", { className: "".concat(theme.track.base, " ").concat(isChecked
+                ? theme.track.checked
+                : theme.track.unchecked, " ").concat(isDisabled ? theme.track.disabled : "", " ").concat(isInvalid ? theme.track.invalid || "" : ""), onClick: function () {
+                if (!isDisabled) {
+                    var newValue = !isChecked;
+                    if (!isControlled) {
+                        setInternalChecked(newValue);
+                    }
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                }
+            } },
+            React__default.createElement(motion.div, { className: theme.thumb.base, initial: false, animate: {
+                    x: isChecked ? theme.thumb.checked.x : theme.thumb.unchecked.x,
+                    y: isChecked ? theme.thumb.checked.y : theme.thumb.unchecked.y
+                }, transition: { type: "spring", stiffness: 500, damping: 30 } }))));
+    // Create state class for CSS selectors (like other components)
+    var stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    return (React__default.createElement("div", { className: "flex w-full justify-between items-center gap-3 ".concat(labelPosition === "start" ? "flex-row-reverse" : "flex-row", " ").concat(theme.container, " ").concat(stateClass) },
+        labelContent,
+        switchToggle));
+};
+
+export { Switch, Switch as default };

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

@@ -0,0 +1,34 @@
+import { SwitchThemeConfig } from './Switch.types';
+/**
+ * Default theme configuration for the Switch component
+ */
+export declare const switchTheme: SwitchThemeConfig;
+/**
+ * Utility function to merge default theme with overrides
+ */
+export declare const useSwitchTheme: (overrides?: Partial<SwitchThemeConfig["baseStyle"]>) => {
+    container: string;
+    track: {
+        base: string;
+        checked: string;
+        unchecked: string;
+        disabled: string;
+        invalid?: string;
+    };
+    thumb: {
+        base: string;
+        checked: Record<string, any>;
+        unchecked: Record<string, any>;
+    };
+    label: string;
+    description: string;
+    labelContainer: {
+        start: string;
+        end: string;
+    };
+    states?: {
+        default: string;
+        disabled: string;
+        invalid: string;
+    };
+};

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

@@ -0,0 +1,43 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * Default theme configuration for the Switch component
+ */
+var switchTheme = {
+    baseStyle: {
+        container: "items-start",
+        track: {
+            base: "w-10 h-6 rounded-full transition-colors cursor-pointer shadow-inner",
+            checked: "bg-primary-600",
+            unchecked: "bg-slate-200",
+            disabled: "opacity-50 cursor-not-allowed"
+        },
+        thumb: {
+            base: "size-5 bg-white rounded-full shadow-md",
+            checked: {
+                x: 18,
+                y: 2
+            },
+            unchecked: {
+                x: 2,
+                y: 2
+            }
+        },
+        label: "",
+        description: "text-sm text-gray-500 -mt-1",
+        labelContainer: {
+            start: "mr-3",
+            end: "ml-3"
+        }
+    }
+};
+/**
+ * Utility function to merge default theme with overrides
+ */
+var useSwitchTheme = function (overrides) {
+    if (!overrides)
+        return switchTheme.baseStyle;
+    return __assign(__assign(__assign({}, switchTheme.baseStyle), overrides), { track: __assign(__assign({}, switchTheme.baseStyle.track), (overrides.track || {})), thumb: __assign(__assign({}, switchTheme.baseStyle.thumb), (overrides.thumb || {})), labelContainer: __assign(__assign({}, switchTheme.baseStyle.labelContainer), (overrides.labelContainer || {})) });
+};
+
+export { switchTheme, useSwitchTheme };

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

@@ -0,0 +1,66 @@
+/**
+ * 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
+ * @property {string} id - Unique identifier for the switch input
+ * @property {boolean} checked - Whether the switch is checked
+ * @property {(checked: boolean) => void} onChange - Function called when the switch state changes
+ * @property {string} label - Label text for the switch
+ * @property {string} description - Optional description text
+ * @property {SwitchState} state - The state of the switch (default, disabled, invalid)
+ * @property {SwitchLabelPosition} labelPosition - Position of the label relative to the switch ("start" | "end")
+ * @property {SwitchThemeOverrides} theme - Optional theme overrides
+ */
+export interface SwitchProps {
+    id: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    description?: string;
+    state?: SwitchState;
+    labelPosition?: SwitchLabelPosition;
+    theme?: SwitchThemeOverrides;
+}
+/**
+ * Switch theme configuration
+ */
+export interface SwitchThemeConfig {
+    baseStyle: {
+        container: string;
+        track: {
+            base: string;
+            checked: string;
+            unchecked: string;
+            disabled: string;
+            invalid?: string;
+        };
+        thumb: {
+            base: string;
+            checked: Record<string, any>;
+            unchecked: Record<string, any>;
+        };
+        label: string;
+        description: string;
+        labelContainer: {
+            start: string;
+            end: string;
+        };
+        states?: {
+            default: string;
+            disabled: string;
+            invalid: string;
+        };
+    };
+}
+/**
+ * Switch theme overrides
+ */
+export interface SwitchThemeOverrides {
+    baseStyle?: Partial<SwitchThemeConfig['baseStyle']>;
+}

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

@@ -0,0 +1,3 @@
+export { default, Switch } from './Switch';
+export * from './Switch.types';
+export * from './Switch.theme';

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

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

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

@@ -0,0 +1,46 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { textareaTheme } from './Textarea.theme.js';
+
+var Textarea = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e;
+    var _f = _a.size, size = _f === void 0 ? "md" : _f, _g = _a.state, state = _g === void 0 ? "default" : _g, _h = _a.className, className = _h === void 0 ? "" : _h, label = _a.label, _j = _a.labelClassName, labelClassName = _j === void 0 ? "" : _j, helperText = _a.helperText, _k = _a.helperTextClassName, helperTextClassName = _k === void 0 ? "" : _k, _l = _a.wrapperClassName, wrapperClassName = _l === void 0 ? "" : _l, _m = _a.inputGroupClassName, inputGroupClassName = _m === void 0 ? "" : _m, id = _a.id, _o = _a.theme, theme = _o === void 0 ? {} : _o, required = _a.required, _p = _a.rows, rows = _p === void 0 ? 3 : _p, cols = _a.cols, props = __rest(_a, ["size", "state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "inputGroupClassName", "id", "theme", "required", "rows", "cols"]);
+    var _q = useState(false); _q[0]; var setIsFocused = _q[1];
+    var inputId = id || "textarea-".concat(Math.random().toString(36).substring(2, 9));
+    // Derived state flags for internal use
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    // State class for CSS selectors
+    var stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    // Get theme classes
+    var wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
+    var inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
+    var baseClasses = theme.baseStyle || textareaTheme.baseStyle || "";
+    var sizeClasses = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || ((_c = textareaTheme.sizes) === null || _c === void 0 ? void 0 : _c[size]) || "";
+    var stateClasses = ((_d = theme.states) === null || _d === void 0 ? void 0 : _d[state]) || ((_e = textareaTheme.states) === null || _e === void 0 ? void 0 : _e[state]) || "";
+    var helperTextClasses = theme.helperText || textareaTheme.helperText || "";
+    return (React__default.createElement("div", { className: "".concat(wrapperClasses, " ").concat(stateClass, " ").concat(wrapperClassName) },
+        label && (React__default.createElement("div", { className: "mb-1" },
+            React__default.createElement(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required }, label))),
+        React__default.createElement("div", null,
+            React__default.createElement("div", { className: "".concat(inputGroupClasses, " ").concat(stateClasses, " ").concat(inputGroupClassName) },
+                React__default.createElement("div", { className: "relative flex-1" },
+                    React__default.createElement("textarea", __assign({ ref: ref, id: inputId, className: "\n                  ".concat(baseClasses, " \n                  ").concat(sizeClasses, " \n                  ").concat(className, "\n                "), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: function (e) {
+                            var _a;
+                            setIsFocused(true);
+                            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        }, onBlur: function (e) {
+                            var _a;
+                            setIsFocused(false);
+                            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        } }, props))))),
+        helperText && (React__default.createElement("div", { className: "".concat(helperTextClasses, " ").concat(helperTextClassName) }, helperText))));
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea, Textarea as default };

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

@@ -0,0 +1,7 @@
+import { TextareaThemeOverrides } from "./Textarea.types";
+/**
+ * Default theme for the Textarea component
+ * Extends the common forms base theme
+ */
+export declare const textareaTheme: TextareaThemeOverrides;
+export default textareaTheme;

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

@@ -0,0 +1,26 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Textarea component
+ * Extends the common forms base theme
+ */
+var textareaTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles - extends the common input group style
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Base textarea styles - extends the common control base style
+    baseStyle: "".concat(formsBaseTheme.controlBaseStyle, " resize-y"),
+    // Size variants - uses the textarea-specific sizes from the common theme
+    sizes: {
+        sm: formsBaseTheme.sizes.sm.textarea,
+        md: formsBaseTheme.sizes.md.textarea,
+        lg: formsBaseTheme.sizes.lg.textarea,
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Helper text styles - inherited from common form theme
+    helperText: formsBaseTheme.helperText,
+};
+
+export { textareaTheme as default, textareaTheme };