uibee 2.7.17 → 2.8.0

package/dist/src/components/inputs/checkbox.d.ts

@@ -1,13 +1,8 @@
-import { type ChangeEvent } from 'react';
-export type CheckboxProps = {
-    label?: string;
+export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    checked?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
-    disabled?: boolean;
+    label?: string;
     error?: string;
     info?: string;
-    required?: boolean;
+    className?: string;
 };
-export default function Checkbox({ label, name, checked, onChange, className, disabled, error, info, required, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/checkbox.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
 import { SelectionWrapper } from './shared';
-export default function Checkbox({ label, name, checked, onChange, className, disabled, error, info, required, }) {
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, disabled: disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { id: name, name: name, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, required: required, className: `
+export default function Checkbox(props) {
+    const { name, label, error, info, className, ...inputProps } = props;
+    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: name, name: name, type: 'checkbox', className: `
                         peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50

package/dist/src/components/inputs/input.d.ts

@@ -1,17 +1,10 @@
-import { type ChangeEvent, type JSX } from 'react';
-export type InputProps = {
-    label?: string;
+import { type JSX } from 'react';
+export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    type?: React.HTMLInputTypeAttribute;
-    placeholder?: string;
-    value?: string | number;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
     error?: string;
     className?: string;
-    disabled?: boolean;
-    required?: boolean;
     icon?: JSX.Element;
     info?: string;
-    multiple?: boolean;
 };
-export default function Input({ label, name, type, placeholder, value, onChange, error, className, disabled, required, icon, info, multiple, }: InputProps): import("react/jsx-runtime").JSX.Element;
+export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/input.js

@@ -3,21 +3,27 @@ import { useRef, useState } from 'react';
 import { Calendar, Clock } from 'lucide-react';
 import { FieldWrapper } from './shared';
 import DateTimePickerPopup from './shared/dateTimePickerPopup';
+import ColorPickerPopup from './shared/colorPickerPopup';
 import useClickOutside from '../../hooks/useClickOutside';
-export default function Input({ label, name, type = 'text', placeholder, value, onChange, error, className, disabled, required, icon, info, multiple, }) {
+export default function Input(props) {
+    const { name, label, error, className, icon, info, ...inputProps } = props;
+    const { type = 'text', value } = inputProps;
     const localRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useClickOutside(() => setIsOpen(false));
     const isDateType = ['date', 'datetime-local', 'time'].includes(type);
+    const isColorType = type === 'color';
+    const isClickableType = isDateType || isColorType;
     function handleIconClick() {
-        if (isDateType && !disabled) {
+        if (isClickableType && !inputProps.disabled) {
             setIsOpen(!isOpen);
         }
-        else if (localRef.current && !disabled) {
+        else if (localRef.current && !inputProps.disabled) {
             localRef.current.focus();
         }
     }
     function handleDateChange(date) {
+        const onChange = inputProps.onChange;
         if (!onChange)
             return;
         const pad = (n) => n.toString().padStart(2, '0');
@@ -42,6 +48,19 @@ export default function Input({ label, name, type = 'text', placeholder, value,
         };
         onChange(event);
     }
+    function handleColorChange(color) {
+        const onChange = inputProps.onChange;
+        if (!onChange)
+            return;
+        const event = {
+            target: {
+                name,
+                value: color,
+                type,
+            },
+        };
+        onChange(event);
+    }
     let displayIcon = icon;
     if (!displayIcon && isDateType) {
         if (type === 'time') {
@@ -51,6 +70,9 @@ export default function Input({ label, name, type = 'text', placeholder, value,
             displayIcon = _jsx(Calendar, { className: 'w-4 h-4' });
         }
     }
+    else if (!displayIcon && isColorType) {
+        displayIcon = (_jsx("div", { className: 'w-4 h-4 rounded border border-login-200', style: { backgroundColor: value || '#000000' } }));
+    }
     function getDateValue() {
         if (!value)
             return null;
@@ -61,10 +83,10 @@ export default function Input({ label, name, type = 'text', placeholder, value,
         const date = new Date(value);
         return isNaN(date.getTime()) ? null : date;
     }
-    return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
                             absolute left-3 text-login-200
-                            ${isDateType && !disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
-                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ref: localRef, id: name, name: name, type: isDateType ? 'text' : type, placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, required: required, readOnly: isDateType, onClick: () => isDateType && !disabled && setIsOpen(true), title: label, multiple: multiple, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                            ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
+                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: name, type: isClickableType ? 'text' : type, value: value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
@@ -73,6 +95,6 @@ export default function Input({ label, name, type = 'text', placeholder, value,
                         transition-all duration-200
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
-                        ${isDateType && !disabled ? 'cursor-pointer' : ''}
-                    ` }), isOpen && isDateType && !disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) }))] }) }));
+                        ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
+                    ` }), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
 }

package/dist/src/components/inputs/radio.d.ts

@@ -1,14 +1,8 @@
-import { type ChangeEvent } from 'react';
-export type RadioProps = {
-    label?: string;
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    value: string | number;
-    checked?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
-    disabled?: boolean;
+    label?: string;
     error?: string;
     info?: string;
-    required?: boolean;
+    className?: string;
 };
-export default function Radio({ label, name, value, checked, onChange, className, disabled, error, info, required, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/radio.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectionWrapper } from './shared';
-export default function Radio({ label, name, value, checked, onChange, className, disabled, error, info, required, }) {
+export default function Radio(props) {
+    const { name, label, error, info, className, ...inputProps } = props;
+    const { value } = inputProps;
     const id = `${name}-${value}`;
-    return (_jsx(SelectionWrapper, { label: label, name: id, required: required, info: info, error: error, className: className, disabled: disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { id: id, name: name, type: 'radio', value: value, checked: checked, onChange: onChange, disabled: disabled, required: required, className: `
+    return (_jsx(SelectionWrapper, { label: label, name: id, required: inputProps.required, info: info, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'radio', className: `
                         peer appearance-none h-5 w-5 rounded-full border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50

package/dist/src/components/inputs/range.d.ts

@@ -1,17 +1,9 @@
-import { type ChangeEvent } from 'react';
-export type RangeProps = {
-    label?: string;
+export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    min?: number;
-    max?: number;
-    step?: number;
-    value?: number;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
     error?: string;
     className?: string;
-    disabled?: boolean;
-    required?: boolean;
     info?: string;
     showValue?: boolean;
 };
-export default function Range({ label, name, min, max, step, value, onChange, error, className, disabled, required, info, showValue, }: RangeProps): import("react/jsx-runtime").JSX.Element;
+export default function Range(props: RangeProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/range.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldWrapper } from './shared';
-export default function Range({ label, name, min = 0, max = 100, step = 1, value = 0, onChange, error, className, disabled, required, info, showValue = true, }) {
-    return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: _jsxs("div", { className: 'flex items-center gap-4', children: [_jsx("input", { id: name, name: name, type: 'range', min: min, max: max, step: step, value: value, onChange: onChange, disabled: disabled, required: required, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+export default function Range(props) {
+    const { name, label, error, className, info, showValue = true, ...inputProps } = props;
+    const { min = 0, max = 100, step = 1, value = 0 } = inputProps;
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'flex items-center gap-4', children: [_jsx("input", { ...inputProps, id: name, name: name, type: 'range', min: min, max: max, step: step, value: value, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         flex-1 h-2 bg-login-500 rounded-lg appearance-none cursor-pointer
                         accent-login
                         [&::-webkit-slider-thumb]:appearance-none

package/dist/src/components/inputs/shared/colorPickerPopup.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+export type ColorPickerPopupProps = {
+    value: string;
+    onChange: (color: string) => void;
+    onClose: () => void;
+};
+export default function ColorPickerPopup({ value, onChange, onClose }: ColorPickerPopupProps): JSX.Element;

package/dist/src/components/inputs/shared/colorPickerPopup.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+function hexToHsv(hex) {
+    hex = hex.replace('#', '');
+    let r = 0, g = 0, b = 0;
+    if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+    }
+    else if (hex.length === 6) {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+    }
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    if (max !== min) {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return { h: h * 360, s: s * 100, v: v * 100 };
+}
+function hsvToRgb(h, s, v) {
+    let r = 0, g = 0, b = 0;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+function hsvToHex(h, s, v) {
+    const { r, g, b } = hsvToRgb(h / 360, s / 100, v / 100);
+    function toHex(x) {
+        const hex = x.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+const PRESET_COLORS = [
+    '#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635', '#4ade80', '#34d399', '#2dd4bf',
+    '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185'
+];
+function SaturationPicker({ hsv, onChange }) {
+    const containerRef = useRef(null);
+    function handleMove(e) {
+        if (!containerRef.current)
+            return;
+        const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1);
+        const y = Math.min(Math.max((e.clientY - top) / height, 0), 1);
+        onChange(x * 100, (1 - y) * 100);
+    }
+    function handleMouseDown(e) {
+        handleMove(e);
+        function moveHandler(e) { handleMove(e); }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler);
+            window.removeEventListener('mouseup', upHandler);
+        }
+        window.addEventListener('mousemove', moveHandler);
+        window.addEventListener('mouseup', upHandler);
+    }
+    const bgColor = hsvToHex(hsv.h, 100, 100);
+    return (_jsxs("div", { ref: containerRef, className: 'w-full h-32 relative rounded-md overflow-hidden cursor-crosshair mb-3 select-none', style: { backgroundColor: bgColor }, onMouseDown: handleMouseDown, children: [_jsx("div", { className: 'absolute inset-0 bg-linear-to-r from-white to-transparent' }), _jsx("div", { className: 'absolute inset-0 bg-linear-to-t from-black to-transparent' }), _jsx("div", { className: `
+                    absolute w-3 h-3 border-2 border-white rounded-full
+                    shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none
+                `, style: { left: `${hsv.s}%`, top: `${100 - hsv.v}%` } })] }));
+}
+function HuePicker({ hue, onChange }) {
+    const containerRef = useRef(null);
+    function handleMove(e) {
+        if (!containerRef.current)
+            return;
+        const { left, width } = containerRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max((e.clientX - left) / width, 0), 1);
+        onChange(x * 360);
+    }
+    function handleMouseDown(e) {
+        handleMove(e);
+        function moveHandler(e) { handleMove(e); }
+        function upHandler() {
+            window.removeEventListener('mousemove', moveHandler);
+            window.removeEventListener('mouseup', upHandler);
+        }
+        window.addEventListener('mousemove', moveHandler);
+        window.addEventListener('mouseup', upHandler);
+    }
+    return (_jsx("div", { ref: containerRef, className: 'w-full h-3 relative rounded-full cursor-pointer mb-4 select-none', style: { background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)' }, onMouseDown: handleMouseDown, children: _jsx("div", { className: `
+                    absolute w-4 h-4 bg-white border border-gray-200
+                    rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2
+                    top-1/2 pointer-events-none
+                `, style: { left: `${(hue / 360) * 100}%` } }) }));
+}
+export default function ColorPickerPopup({ value, onChange, onClose }) {
+    const [hsv, setHsv] = useState(() => hexToHsv(value || '#000000'));
+    const [hexInput, setHexInput] = useState(value || '#000000');
+    useEffect(() => {
+        if (value && value !== hexInput) {
+            setHsv(hexToHsv(value));
+            setHexInput(value);
+        }
+    }, [value]);
+    function handleColorChange(newHsv) {
+        setHsv(newHsv);
+        const hex = hsvToHex(newHsv.h, newHsv.s, newHsv.v);
+        setHexInput(hex);
+        onChange(hex);
+    }
+    function handleSaturationChange(s, v) { handleColorChange({ ...hsv, s, v }); }
+    function handleHueChange(h) { handleColorChange({ ...hsv, h }); }
+    function manualHexChange(e) {
+        const val = e.target.value;
+        setHexInput(val);
+        if (/^#[0-9A-F]{6}$/i.test(val)) {
+            const newHsv = hexToHsv(val);
+            setHsv(newHsv);
+            onChange(val);
+        }
+    }
+    return (_jsxs("div", { className: 'absolute top-full left-0 mt-1 z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none', children: [_jsx(SaturationPicker, { hsv: hsv, onChange: handleSaturationChange }), _jsx(HuePicker, { hue: hsv.h, onChange: handleHueChange }), _jsxs("div", { className: 'flex items-center gap-2 mb-3', children: [_jsx("div", { className: 'text-xs text-login-200 font-mono', children: "HEX" }), _jsx("input", { type: 'text', value: hexInput, onChange: manualHexChange, className: `
+                        flex-1 min-w-0 bg-login-500 border border-login-500 rounded
+                        px-2 py-1 text-sm text-login-text focus:outline-none
+                        focus:border-login focus:ring-1 focus:ring-login
+                    `, spellCheck: false }), _jsx("div", { className: 'w-8 h-8 rounded border border-login-500 shrink-0', style: { backgroundColor: hexInput } })] }), _jsx("div", { className: 'grid grid-cols-8 gap-1.5 pt-3 border-t border-login-500', children: PRESET_COLORS.map(color => (_jsx("button", { type: 'button', className: `
+                            w-6 h-6 rounded-sm cursor-pointer hover:scale-110
+                            hover:zIndex-10 transition-transform ring-1 ring-inset ring-black/10
+                        `, style: { backgroundColor: color }, onClick: () => {
+                        const newHsv = hexToHsv(color);
+                        setHsv(newHsv);
+                        setHexInput(color);
+                        onChange(color);
+                        onClose();
+                    }, title: color }, color))) })] }));
+}

package/dist/src/components/inputs/shared/index.d.ts

@@ -3,3 +3,4 @@ export { default as SelectionWrapper } from './selectionWrapper';
 export { default as InputLabel } from './inputLabel';
 export { default as InputInfo } from './inputInfo';
 export { default as InputError } from './inputError';
+export { default as ColorPickerPopup } from './colorPickerPopup';

package/dist/src/components/inputs/shared/index.js

@@ -3,3 +3,4 @@ export { default as SelectionWrapper } from './selectionWrapper';
 export { default as InputLabel } from './inputLabel';
 export { default as InputInfo } from './inputInfo';
 export { default as InputError } from './inputError';
+export { default as ColorPickerPopup } from './colorPickerPopup';

package/dist/src/components/inputs/switch.d.ts

@@ -1,14 +1,9 @@
-import { type ChangeEvent } from 'react';
-export type SwitchProps = {
-    label?: string;
+export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string;
-    checked?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
-    disabled?: boolean;
+    label?: string;
     error?: string;
     info?: string;
-    required?: boolean;
+    className?: string;
     switchOnly?: boolean;
 };
-export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, switchOnly, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/switch.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectionWrapper } from './shared';
-export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, switchOnly, }) {
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, hideError: switchOnly, className: className, disabled: disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { type: 'checkbox', id: name, name: name, checked: checked, onChange: onChange, disabled: disabled, required: required, className: 'sr-only peer' }), _jsx("div", { className: `
+export default function Switch(props) {
+    const { name, label, error, info, className, switchOnly, ...inputProps } = props;
+    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, hideError: switchOnly, className: className, disabled: inputProps.disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { ...inputProps, type: 'checkbox', id: name, name: name, className: 'sr-only peer' }), _jsx("div", { className: `
                     w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
                     after:content-[''] after:absolute ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} after:left-0.5 
                     after:bg-white after:border-gray-300 after:border after:rounded-full 
                     after:h-5 after:w-5 after:transition-all peer-checked:bg-login
-                    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+                    ${inputProps.disabled ? 'opacity-50 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500' : ''}
                 ` })] }) }));
 }

package/dist/src/components/inputs/textarea.d.ts

@@ -1,16 +1,9 @@
-import { type ChangeEvent } from 'react';
-export type TextareaProps = {
-    label?: string;
+export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     name: string;
-    placeholder?: string;
-    type?: 'markdown' | 'json' | 'text';
-    value?: string;
-    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    label?: string;
     error?: string;
     className?: string;
-    disabled?: boolean;
-    required?: boolean;
-    rows?: number;
     info?: string;
+    type?: 'markdown' | 'json' | 'text';
 };
-export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows, info, type, }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export default function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/textarea.js

@@ -12,17 +12,19 @@ function isValidJson(str) {
         return error.message;
     }
 }
-export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows = 4, info, type = 'text', }) {
+export default function Textarea(props) {
+    const { name, label, error, className, info, type = 'text', rows = 4, ...textareaProps } = props;
+    const { value } = textareaProps;
     const [preview, setPreview] = useState(false);
     const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
     const displayError = jsonError || error;
-    return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: displayError, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, error: displayError, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text 
                         p-3
                         prose prose-invert prose-sm max-w-none overflow-y-auto
                         ${error ? 'border-red-500' : ''}
-                    `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: value || '' }) })) : (_jsx("textarea", { id: name, name: name, placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, required: required, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                    `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })) : (_jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login