uibee 2.5.11 → 2.7.0

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

@@ -1,8 +1,10 @@
 export { default as Input } from './inputs/input';
-export { default as SwitchInput } from './inputs/switch';
-export { default as TagInput } from './inputs/tag';
-export { default as Textarea } from './inputs/markdown';
+export { default as Textarea } from './inputs/textarea';
+export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';
+export { default as Switch } from './inputs/switch';
+export { default as Radio } from './inputs/radio';
+export { default as Range } from './inputs/range';
 export { default as Logo } from './logo/logo';
 export { default as LogoSmall } from './logo/logoSmall';
 export { default as ThemeToggle } from './toggle/theme';

package/dist/src/components/index.js

@@ -1,9 +1,11 @@
 // Input components
 export { default as Input } from './inputs/input';
-export { default as SwitchInput } from './inputs/switch';
-export { default as TagInput } from './inputs/tag';
-export { default as Textarea } from './inputs/markdown';
+export { default as Textarea } from './inputs/textarea';
+export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';
+export { default as Switch } from './inputs/switch';
+export { default as Radio } from './inputs/radio';
+export { default as Range } from './inputs/range';
 // Logos
 export { default as Logo } from './logo/logo';
 export { default as LogoSmall } from './logo/logoSmall';

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

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

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

@@ -0,0 +1,17 @@
+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: `
+                        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
+                        disabled:opacity-50 disabled:cursor-not-allowed
+                        cursor-pointer transition-all duration-200
+                        ${error ? 'border-red-500' : ''}
+                    ` }), _jsx(Check, { className: `
+                        absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+                        w-3.5 h-3.5 pointer-events-none text-white opacity-0
+                        peer-checked:opacity-100 transition-opacity duration-200
+                    ` })] }) }));
+}

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

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

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

@@ -1,11 +1,78 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import ToolTip from './tooltip';
-import Label from './label';
-import EraseButton from './erase';
-export default function Input({ name, type, label, className, tooltip, required, value, setValue, color }) {
-    const [hasBlured, setHasBlured] = useState(false);
-    return (_jsx("div", { className: `w-full ${className}`, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { name: name, type: type, className: 'block bg-login-800 px-2.5 pb-2.5 pt-4 w-full text-sm rounded-lg border-[0.10rem] appearance-none ' +
-                        'border-login-200 focus:outline-none focus:ring-0 focus:border-login-50 peer', value: value || '', onChange: (e) => setValue(e.target.value), onFocus: (e) => e.target.showPicker(), onBlur: () => setHasBlured(true), placeholder: '', required: required }), _jsx(Label, { label: label, value: value, required: required, color: color, showRequired: required && !value && hasBlured }), value && _jsx(EraseButton, { setData: setValue }), !value && tooltip && _jsx(ToolTip, { info: tooltip })] }) }));
+import { useRef, useState } from 'react';
+import { Calendar, Clock } from 'lucide-react';
+import { FieldWrapper } from './shared';
+import DateTimePickerPopup from './shared/dateTimePickerPopup';
+import useClickOutside from '../../hooks/useClickOutside';
+export default function Input({ label, name, type = 'text', placeholder, value, onChange, error, className, disabled, required, icon, info, }) {
+    const localRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useClickOutside(() => setIsOpen(false));
+    const isDateType = ['date', 'datetime-local', 'time'].includes(type);
+    const handleIconClick = () => {
+        if (isDateType && !disabled) {
+            setIsOpen(!isOpen);
+        }
+        else if (localRef.current && !disabled) {
+            localRef.current.focus();
+        }
+    };
+    const handleDateChange = (date) => {
+        if (!onChange)
+            return;
+        const pad = (n) => n.toString().padStart(2, '0');
+        const yyyy = date.getFullYear();
+        const MM = pad(date.getMonth() + 1);
+        const dd = pad(date.getDate());
+        const hh = pad(date.getHours());
+        const mm = pad(date.getMinutes());
+        let newValue = '';
+        if (type === 'date')
+            newValue = `${dd}/${MM}/${yyyy}`;
+        else if (type === 'time')
+            newValue = `${hh}:${mm}`;
+        else if (type === 'datetime-local')
+            newValue = `${dd}/${MM}/${yyyy} ${hh}:${mm}`;
+        const event = {
+            target: {
+                name,
+                value: newValue,
+                type,
+            },
+        };
+        onChange(event);
+    };
+    let displayIcon = icon;
+    if (!displayIcon && isDateType) {
+        if (type === 'time') {
+            displayIcon = _jsx(Clock, { className: 'w-4 h-4' });
+        }
+        else {
+            displayIcon = _jsx(Calendar, { className: 'w-4 h-4' });
+        }
+    }
+    const getDateValue = () => {
+        if (!value)
+            return null;
+        if (type === 'time') {
+            const date = new Date(`2000-01-01T${value}`);
+            return isNaN(date.getTime()) ? null : date;
+        }
+        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: `
+                            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, "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
+                        disabled:opacity-50 disabled:cursor-not-allowed
+                        py-2 ${displayIcon ? 'pl-10 pr-3' : 'px-3'}
+                        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) }))] }) }));
 }

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

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

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

@@ -0,0 +1,17 @@
+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, }) {
+    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: `
+                        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
+                        disabled:opacity-50 disabled:cursor-not-allowed
+                        cursor-pointer transition-all duration-200
+                        ${error ? 'border-red-500' : ''}
+                    ` }), _jsx("div", { className: `
+                    absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+                    w-2 h-2 rounded-full bg-white pointer-events-none opacity-0
+                    peer-checked:opacity-100 transition-opacity duration-200
+                ` })] }) }));
+}

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

@@ -0,0 +1,17 @@
+import { type ChangeEvent } from 'react';
+export type RangeProps = {
+    label?: string;
+    name: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    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;

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

@@ -0,0 +1,20 @@
+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: `
+                        flex-1 h-2 bg-login-500 rounded-lg appearance-none cursor-pointer
+                        accent-login
+                        [&::-webkit-slider-thumb]:appearance-none
+                        [&::-webkit-slider-thumb]:w-4
+                        [&::-webkit-slider-thumb]:h-4
+                        [&::-webkit-slider-thumb]:rounded-full
+                        [&::-webkit-slider-thumb]:bg-login
+                        [&::-moz-range-thumb]:w-4
+                        [&::-moz-range-thumb]:h-4
+                        [&::-moz-range-thumb]:rounded-full
+                        [&::-moz-range-thumb]:bg-login
+                        [&::-moz-range-thumb]:border-none
+                        disabled:opacity-50 disabled:cursor-not-allowed
+                        ${error ? 'accent-red-500 [&::-webkit-slider-thumb]:bg-red-500 [&::-moz-range-thumb]:bg-red-500' : ''}
+                    ` }), showValue && (_jsx("span", { className: 'text-login-text text-sm font-medium min-w-10 text-right', children: value }))] }) }));
+}

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

@@ -1,19 +1,19 @@
-type Option = {
+export type Option = {
     value: string | number;
     label: string;
-    image?: string;
 };
-type SelectProps = {
+export type SelectProps = {
+    label?: string;
     name: string;
-    label: string;
-    value: string | number;
-    setValue: (_: string | number) => void;
+    value?: string | number | null;
+    onChange?: (value: string | number | null) => void;
     options: Option[];
+    error?: string;
     className?: string;
-    tooltip?: string;
+    disabled?: boolean;
     required?: boolean;
-    children?: React.ReactNode;
-    color?: string;
+    placeholder?: string;
+    info?: string;
+    clearable?: boolean;
 };
-export default function Select({ name, label, value, options, className, tooltip, required, children, setValue, color }: SelectProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder, info, clearable, }: SelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,53 +1,57 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import ToolTip from './tooltip';
-import Label from './label';
-import EraseButton from './erase';
-export default function Select({ name, label, value, options, className, tooltip, required, children, setValue, color }) {
-    const [hasBlured, setHasBlured] = useState(false);
-    const selectRef = useRef(null);
-    const selectedOption = options.find((o) => o.value === value);
-    function handleChoose(value) {
-        setValue(value);
-        setHasBlured(true);
-        if (selectRef.current) {
-            selectRef.current.value = String(value);
-            selectRef.current.blur();
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useClickOutside } from '../../hooks';
+import { ChevronDown, X } from 'lucide-react';
+import { FieldWrapper } from './shared';
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = 'Select an option', info, clearable = true, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(options.find(opt => opt.value === value));
+    useEffect(() => {
+        setSelectedOption(options.find(opt => opt.value === value));
+    }, [value, options]);
+    const containerRef = useClickOutside(() => setIsOpen(false));
+    const handleSelect = (option) => {
+        if (disabled)
+            return;
+        setSelectedOption(option);
+        setIsOpen(false);
+        if (onChange) {
+            onChange(option.value);
         }
-    }
-    return (_jsxs("div", { className: `w-full ${className}`, children: [_jsxs("div", { className: 'relative flex items-center', children: [_jsxs("select", { ref: selectRef, name: name, className: 'peer cursor-pointer block px-2.5 pb-2.5 pt-4 ' +
-                            'w-full text-sm rounded-lg border-[0.10rem] ' +
-                            'appearance-none border-login-200 focus:ring-0 ' +
-                            'focus:outline-none focus:border-login-50 ' +
-                            `${color ? color : 'bg-login-800'}`, value: value, onChange: (e) => {
-                            setValue(e.target.value);
-                            setHasBlured(true);
-                        }, onBlur: () => setHasBlured(true), onMouseDown: (e) => {
-                            e.preventDefault();
-                            selectRef.current?.focus();
-                        }, required: required, children: [_jsx("option", { value: '', hidden: true }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(Label, { label: label, value: value, required: required, color: color, showRequired: required && !value && hasBlured }), value && (_jsx(EraseButton, { setData: (v) => {
-                            setValue(v);
-                            setHasBlured(true);
-                        } })), !value && tooltip && _jsx(ToolTip, { info: tooltip }), _jsx(SelectContent, { options: options, value: value, selectedOption: selectedOption, handleChoose: handleChoose, color: color })] }), children] }));
-}
-function SelectContent({ options, value, selectedOption, handleChoose, color }) {
-    return (_jsx("div", { className: 'hidden peer-focus:block absolute left-0 ' +
-            'right-0 top-full mt-1 z-50', children: _jsx("div", { className: `${color ? color : 'bg-login-800'}` + ' border-[0.10rem] border-login-200 ' +
-                'rounded-lg shadow-lg p-0 max-h-72 overflow-hidden', children: _jsxs("div", { className: 'max-h-72 overflow-auto', children: [_jsx(SelectedOption, { value: value, selectedOption: selectedOption }), _jsx("div", { className: 'p-2', children: options
-                            .filter((o) => o.value !== value)
-                            .map((opt) => (_jsx("button", { type: 'button', className: 'cursor-pointer w-full flex ' +
-                                'items-center gap-3 px-2 py-2 ' +
-                                'text-sm hover:bg-surface ' +
-                                'rounded hover:bg-login-600', onMouseDown: (e) => {
-                                e.preventDefault();
-                                handleChoose(opt.value);
-                            }, children: _jsx("span", { className: 'text-left', children: opt.label }) }, opt.value))) })] }) }) }));
-}
-function SelectedOption({ value, selectedOption }) {
-    if (!value) {
-        return _jsx(_Fragment, {});
-    }
-    return (_jsx("div", { className: 'sticky top-0 bg-surface px-2 py-2 z-10 border-b ' +
-            'border-login-200 bg-login-600', children: _jsx("div", { className: 'flex items-center gap-3', children: _jsx("span", { className: 'font-medium text-left', children: selectedOption?.label }) }) }));
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        setSelectedOption(undefined);
+        if (onChange) {
+            onChange(null);
+        }
+    };
+    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: [_jsxs("div", { className: 'relative', ref: containerRef, children: [_jsxs("button", { type: 'button', onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen, "aria-labelledby": label ? undefined : name, className: `
+                        w-full rounded-md bg-login-500/50 border border-login-500 
+                        text-login-text text-left
+                        focus:outline-none focus:border-login focus:ring-1 focus:ring-login
+                        disabled:opacity-50 disabled:cursor-not-allowed
+                        py-2 pl-3 pr-10
+                        transition-all duration-200
+                        flex items-center justify-between
+                        ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
+                        ${!selectedOption ? 'text-login-200' : ''}
+                    `, title: label, children: [_jsx("span", { className: 'truncate', children: selectedOption ? selectedOption.label : placeholder }), _jsxs("div", { className: 'absolute inset-y-0 right-0 flex items-center px-2 gap-1', children: [clearable && selectedOption && !disabled && (_jsx("div", { role: 'button', onClick: handleClear, className: `
+                                    p-1 hover:bg-login-500 rounded-full text-login-200
+                                    hover:text-red-400 transition-colors cursor-pointer
+                                `, title: 'Clear selection', children: _jsx(X, { className: 'w-3 h-3' }) })), _jsx("div", { className: `
+                            text-login-200 pointer-events-none
+                            transition-transform duration-200
+                            ${isOpen ? 'rotate-180' : ''}
+                        `, children: _jsx(ChevronDown, { className: 'w-4 h-4' }) })] })] }), isOpen && (_jsx("div", { className: `
+                        absolute z-50 w-full mt-1 bg-login-600 border border-login-500
+                        rounded-md shadow-lg max-h-60 overflow-auto noscroll
+                    `, children: options.length > 0 ? (_jsx("ul", { className: 'py-1', role: 'listbox', children: options.map((option) => (_jsx("li", { role: 'option', "aria-selected": selectedOption?.value === option.value, children: _jsx("button", { type: 'button', onClick: () => handleSelect(option), className: `
+                                                w-full text-left px-3 py-2 text-sm
+                                                hover:bg-login-500 transition-colors duration-150
+                                                ${selectedOption?.value === option.value ? 'bg-login-500 text-login' : 'text-login-text'}
+                                            `, children: option.label }) }, option.value))) })) : (_jsx("div", { className: 'px-3 py-2 text-sm text-login-200', children: "No options available" })) }))] }), _jsx("input", { type: 'hidden', name: name, value: selectedOption?.value || '', required: required })] }));
 }

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

@@ -0,0 +1,8 @@
+type DateTimePickerPopupProps = {
+    value: Date | null;
+    onChange: (date: Date) => void;
+    type: 'date' | 'time' | 'datetime-local';
+    onClose?: () => void;
+};
+export default function DateTimePickerPopup({ value, onChange, type, onClose, }: DateTimePickerPopupProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+];
+export default function DateTimePickerPopup({ value, onChange, type, onClose, }) {
+    const [currentDate, setCurrentDate] = useState(new Date());
+    const [timeInput, setTimeInput] = useState({
+        hours: value ? value.getHours().toString() : '0',
+        minutes: value ? value.getMinutes().toString() : '0',
+    });
+    useEffect(() => {
+        if (value) {
+            setCurrentDate(value);
+            setTimeInput(prev => ({
+                hours: prev.hours === '' && value.getHours() === 0 ? '' : value.getHours().toString(),
+                minutes: prev.minutes === '' && value.getMinutes() === 0 ? '' : value.getMinutes().toString(),
+            }));
+        }
+    }, [value]);
+    const handleDateSelect = (day) => {
+        const newDate = new Date(currentDate);
+        newDate.setDate(day);
+        if (value) {
+            newDate.setHours(value.getHours());
+            newDate.setMinutes(value.getMinutes());
+        }
+        else {
+            newDate.setHours(0, 0, 0, 0);
+        }
+        onChange(newDate);
+        if (type === 'date' && onClose) {
+            onClose();
+        }
+    };
+    const handleTimeChange = (timeUnit, val) => {
+        const newDate = value ? new Date(value) : new Date();
+        if (!value) {
+            newDate.setHours(0, 0, 0, 0);
+        }
+        if (timeUnit === 'hours') {
+            if (val < 0 || val > 23)
+                return;
+            newDate.setHours(val);
+        }
+        if (timeUnit === 'minutes') {
+            if (val < 0 || val > 59)
+                return;
+            newDate.setMinutes(val);
+        }
+        onChange(newDate);
+    };
+    const onTimeInputChange = (unit, val) => {
+        if (val === '') {
+            setTimeInput(prev => ({ ...prev, [unit]: '' }));
+            handleTimeChange(unit, 0);
+            return;
+        }
+        if (!/^\d+$/.test(val))
+            return;
+        const num = parseInt(val);
+        if (unit === 'hours' && num > 23)
+            return;
+        if (unit === 'minutes' && num > 59)
+            return;
+        setTimeInput(prev => ({ ...prev, [unit]: val }));
+        handleTimeChange(unit, num);
+    };
+    const onTimeInputBlur = (unit) => {
+        if (timeInput[unit] === '') {
+            const num = unit === 'hours' ? (value?.getHours() ?? 0) : (value?.getMinutes() ?? 0);
+            setTimeInput(prev => ({ ...prev, [unit]: num.toString() }));
+        }
+    };
+    const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+    const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
+    const renderCalendar = () => {
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth();
+        const daysInMonth = getDaysInMonth(year, month);
+        const firstDay = getFirstDayOfMonth(year, month);
+        const days = [];
+        for (let i = 0; i < firstDay; i++) {
+            days.push(_jsx("div", { className: 'w-8 h-8' }, `empty-${i}`));
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            const isSelected = value &&
+                value.getDate() === i &&
+                value.getMonth() === month &&
+                value.getFullYear() === year;
+            const isToday = new Date().getDate() === i &&
+                new Date().getMonth() === month &&
+                new Date().getFullYear() === year;
+            days.push(_jsx("button", { type: 'button', onClick: () => handleDateSelect(i), className: `
+                        w-8 h-8 flex items-center justify-center rounded-full text-sm
+                        hover:bg-login-500 transition-colors
+                        ${isSelected ? 'bg-login! text-white! hover:bg-login!' : ''}
+                        ${!isSelected && isToday ? 'text-login! font-bold' : ''}
+                        ${!isSelected && !isToday ? 'text-login-text!' : ''}
+                    `, children: i }, i));
+        }
+        return (_jsxs("div", { className: 'p-2', children: [_jsxs("div", { className: 'flex items-center justify-between mb-2', children: [_jsx("button", { type: 'button', onClick: () => setCurrentDate(new Date(year, month - 1)), className: 'p-1 hover:bg-login-500 rounded-full text-login-text', children: _jsx(ChevronLeft, { className: 'w-4 h-4' }) }), _jsxs("span", { className: 'font-medium text-login-text', children: [MONTHS[month], " ", year] }), _jsx("button", { type: 'button', onClick: () => setCurrentDate(new Date(year, month + 1)), className: 'p-1 hover:bg-login-500 rounded-full text-login-text', children: _jsx(ChevronRight, { className: 'w-4 h-4' }) })] }), _jsx("div", { className: 'grid grid-cols-7 gap-1 mb-1', children: DAYS.map(d => (_jsx("div", { className: 'w-8 text-center text-xs text-login-200 font-medium', children: d }, d))) }), _jsx("div", { className: 'grid grid-cols-7 gap-1', children: days })] }));
+    };
+    const renderTimePicker = () => {
+        return (_jsxs("div", { className: 'p-2 border-t border-login-500 flex justify-center gap-2', children: [_jsxs("div", { className: 'flex flex-col items-center', children: [_jsx("label", { className: 'text-xs text-login-200 mb-1', children: "Hour" }), _jsx("input", { type: 'text', inputMode: 'numeric', value: timeInput.hours, onChange: (e) => onTimeInputChange('hours', e.target.value), onBlur: () => onTimeInputBlur('hours'), className: `
+                            w-16 p-1 bg-login-500 rounded text-center text-login-text 
+                            border border-login-500 focus:border-login outline-none
+                        ` })] }), _jsx("div", { className: 'flex items-end pb-2 text-login-text', children: ":" }), _jsxs("div", { className: 'flex flex-col items-center', children: [_jsx("label", { className: 'text-xs text-login-200 mb-1', children: "Minute" }), _jsx("input", { type: 'text', inputMode: 'numeric', value: timeInput.minutes, onChange: (e) => onTimeInputChange('minutes', e.target.value), onBlur: () => onTimeInputBlur('minutes'), className: `
+                            w-16 p-1 bg-login-500 rounded text-center text-login-text 
+                            border border-login-500 focus:border-login outline-none
+                        ` })] })] }));
+    };
+    return (_jsxs("div", { className: 'absolute top-full left-0 z-50 mt-1 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70', children: [type !== 'time' && renderCalendar(), (type === 'time' || type === 'datetime-local') && renderTimePicker()] }));
+}

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface FieldWrapperProps {
+    label?: string;
+    name: string;
+    required?: boolean;
+    info?: string;
+    error?: string;
+    children: ReactNode;
+    className?: string;
+}
+export default function FieldWrapper({ label, name, required, info, error, children, className, }: FieldWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import InputLabel from './inputLabel';
+import InputInfo from './inputInfo';
+import InputError from './inputError';
+export default function FieldWrapper({ label, name, required, info, error, children, className, }) {
+    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: 'ml-1' })), info && _jsx(InputInfo, { info: info })] })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
+}

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

@@ -0,0 +1,5 @@
+export { default as FieldWrapper } from './fieldWrapper';
+export { default as SelectionWrapper } from './selectionWrapper';
+export { default as InputLabel } from './inputLabel';
+export { default as InputInfo } from './inputInfo';
+export { default as InputError } from './inputError';

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

@@ -0,0 +1,5 @@
+export { default as FieldWrapper } from './fieldWrapper';
+export { default as SelectionWrapper } from './selectionWrapper';
+export { default as InputLabel } from './inputLabel';
+export { default as InputInfo } from './inputInfo';
+export { default as InputError } from './inputError';

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

@@ -0,0 +1,6 @@
+interface InputErrorProps {
+    error?: string;
+    id?: string;
+}
+export default function InputError({ error, id }: InputErrorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function InputError({ error, id }) {
+    if (!error)
+        return _jsx("div", { className: 'h-4' });
+    return (_jsx("div", { className: 'h-4', children: _jsx("span", { id: id, className: 'text-xs text-red-500 ml-1 truncate block', role: 'alert', title: error, children: error }) }));
+}

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

@@ -0,0 +1,5 @@
+interface InputInfoProps {
+    info: string;
+}
+export default function InputInfo({ info }: InputInfoProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleHelp } from 'lucide-react';
+export default function InputInfo({ info }) {
+    return (_jsx("div", { className: 'text-login-200 hover:text-login-text transition-colors', "aria-label": info, title: info, children: _jsx(CircleHelp, { className: 'w-4 h-4' }) }));
+}

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

@@ -0,0 +1,9 @@
+interface InputLabelProps {
+    label: string;
+    name: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export default function InputLabel({ label, name, required, disabled, className }: InputLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function InputLabel({ label, name, required, disabled, className }) {
+    return (_jsxs("label", { htmlFor: name, className: `text-sm font-medium text-login-text ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`, title: label, children: [label, " ", required && _jsx("span", { className: 'text-red-500', children: "*" })] }));
+}