react-vite-themes/dist/components/atoms/Input/DateInput.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Calendar } from '../Calendar';
import { Icon } from '../Icon';
import { cn } from '../../../utils';
import './DateInput.scss';
export const DateInput = ({ value, onChange, placeholder = 'Select date', className, size = 'md', variant = 'default', minDate, maxDate, disabled = false, 
// Remove unused parameter
leftIcon, leftIconSize = 'sm', rightIcon, rightIconSize = 'sm', isRounded = false }) => {
    const [isOpen, setIsOpen] = useState(false);
    const handleDateChange = (date) => {
        const dateString = date.toISOString().split('T')[0];
        onChange?.(dateString);
    };
    const selectedDate = value ? new Date(value) : undefined;
    const minDateObj = minDate ? new Date(minDate) : undefined;
    const maxDateObj = maxDate ? new Date(maxDate) : undefined;
    const inputClasses = cn('date-input', `date-input--${size}`, `date-input--${variant}`, isRounded && 'date-input--rounded', disabled && 'date-input--disabled', className);
    return (_jsxs("div", { className: inputClasses, children: [_jsxs("div", { className: "date-input-trigger", onClick: () => !disabled && setIsOpen(!isOpen), children: [leftIcon && (_jsx("div", { className: "date-input-left-icon", children: _jsx(Icon, { name: leftIcon, size: leftIconSize }) })), _jsx("div", { className: "date-input-content", children: _jsx("span", { className: "date-input-value", children: value ? new Date(value).toLocaleDateString() : placeholder }) }), rightIcon && (_jsx("div", { className: "date-input-right-icon", children: _jsx(Icon, { name: rightIcon, size: rightIconSize }) })), _jsx("div", { className: "date-input-arrow", children: _jsx(Icon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "sm" }) })] }), isOpen && (_jsx("div", { className: "date-input-dropdown", children: _jsx(Calendar, { value: selectedDate, onChange: handleDateChange, minDate: minDateObj, maxDate: maxDateObj, size: size, variant: variant, isOpen: isOpen, onOpenChange: setIsOpen, placeholder: placeholder, disabled: disabled }) }))] }));
};