indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/forms/date-picker/DateTimePicker.js

@@ -0,0 +1,174 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePicker = DateTimePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const Popover = __importStar(require("@radix-ui/react-popover"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const ui_1 = require("../../ui/index.js");
+const ui_2 = require("../../ui/index.js");
+const CalendarView_1 = require("./CalendarView.js");
+const shared_utils_1 = require("./shared-utils.js");
+function DateTimePicker({ value, onChange, placeholder = 'Select date & time...', label, error, disabled = false, minDate, maxDate, className, returnFormat = 'date', timeFormat = '24h' }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedDate, setSelectedDate] = React.useState(null);
+    const [hours, setHours] = React.useState(12);
+    const [minutes, setMinutes] = React.useState(0);
+    const [period, setPeriod] = React.useState('PM');
+    const [inputValue, setInputValue] = React.useState('');
+    // Initialize from value prop
+    React.useEffect(() => {
+        if (value) {
+            const date = typeof value === 'string' ? new Date(value) : value;
+            setSelectedDate(date);
+            const hrs = date.getHours();
+            const mins = date.getMinutes();
+            if (timeFormat === '12h') {
+                setHours(hrs === 0 ? 12 : hrs > 12 ? hrs - 12 : hrs);
+                setPeriod(hrs >= 12 ? 'PM' : 'AM');
+            }
+            else {
+                setHours(hrs);
+            }
+            setMinutes(mins);
+            setInputValue(formatDisplayValue(date));
+        }
+    }, [value, timeFormat]);
+    // Helper to convert date based on returnFormat
+    const convertDate = (date) => {
+        if (!date)
+            return undefined;
+        return returnFormat === 'string' ? date.toISOString() : date;
+    };
+    const formatDisplayValue = (date) => {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = shared_utils_1.MONTHS[date.getMonth()].slice(0, 3);
+        const year = date.getFullYear();
+        let timeStr = '';
+        const hrs = date.getHours();
+        const mins = date.getMinutes();
+        if (timeFormat === '12h') {
+            const displayHrs = hrs === 0 ? 12 : hrs > 12 ? hrs - 12 : hrs;
+            const ampm = hrs >= 12 ? 'PM' : 'AM';
+            timeStr = `${displayHrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')} ${ampm}`;
+        }
+        else {
+            timeStr = `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
+        }
+        return `${day} ${month}, ${year} ${timeStr}`;
+    };
+    const handleDateClick = (date) => {
+        setSelectedDate(date);
+    };
+    const handleMonthChange = (direction) => {
+        const newMonth = new Date(selectedDate || new Date());
+        newMonth.setMonth(newMonth.getMonth() + (direction === 'next' ? 1 : -1));
+        setSelectedDate(newMonth);
+    };
+    const handleApply = () => {
+        if (!selectedDate)
+            return;
+        const finalDate = new Date(selectedDate);
+        // Set time based on format
+        if (timeFormat === '12h') {
+            let hrs = hours;
+            if (period === 'PM' && hours !== 12)
+                hrs += 12;
+            if (period === 'AM' && hours === 12)
+                hrs = 0;
+            finalDate.setHours(hrs, minutes, 0, 0);
+        }
+        else {
+            finalDate.setHours(hours, minutes, 0, 0);
+        }
+        onChange?.(convertDate(finalDate));
+        setInputValue(formatDisplayValue(finalDate));
+        setIsOpen(false);
+    };
+    const handleClear = () => {
+        setSelectedDate(null);
+        setInputValue('');
+        onChange?.(convertDate(undefined));
+    };
+    const handleNow = () => {
+        const now = new Date();
+        setSelectedDate(now);
+        const hrs = now.getHours();
+        const mins = now.getMinutes();
+        if (timeFormat === '12h') {
+            setHours(hrs === 0 ? 12 : hrs > 12 ? hrs - 12 : hrs);
+            setPeriod(hrs >= 12 ? 'PM' : 'AM');
+        }
+        else {
+            setHours(hrs);
+        }
+        setMinutes(mins);
+        onChange?.(convertDate(now));
+        setInputValue(formatDisplayValue(now));
+        setIsOpen(false);
+    };
+    const renderTimeInput = (value, onChange, max, label) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(value === max ? 0 : value + 1), className: "h-6 w-full flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--bg-hover))] rounded transition-colors active:scale-95", "aria-label": `Increase ${label}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-4 w-4 rotate-90" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("input", { type: "number", min: "0", max: max, value: value.toString().padStart(2, '0'), onChange: (e) => {
+                            const val = parseInt(e.target.value) || 0;
+                            if (val >= 0 && val <= max)
+                                onChange(val);
+                        }, onWheel: (e) => {
+                            e.preventDefault();
+                            const delta = e.deltaY < 0 ? 1 : -1;
+                            const newValue = value + delta;
+                            if (newValue < 0)
+                                onChange(max);
+                            else if (newValue > max)
+                                onChange(0);
+                            else
+                                onChange(newValue);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'ArrowUp') {
+                                e.preventDefault();
+                                onChange(value === max ? 0 : value + 1);
+                            }
+                            else if (e.key === 'ArrowDown') {
+                                e.preventDefault();
+                                onChange(value === 0 ? max : value - 1);
+                            }
+                        }, className: "w-14 text-center text-lg font-semibold border border-[rgb(var(--bd-default))] rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))] focus:border-transparent transition-all hover:border-[rgb(var(--color-primary))]", "aria-label": label }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] mt-0.5", children: label })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(value === 0 ? max : value - 1), className: "h-6 w-full flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--bg-hover))] rounded transition-colors active:scale-95", "aria-label": `Decrease ${label}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-4 w-4 -rotate-90" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('relative w-full', className), children: [label && ((0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-2", children: label })), (0, jsx_runtime_1.jsxs)(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [(0, jsx_runtime_1.jsx)(Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ui_2.Input, { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: disabled, error: error, className: (0, utils_1.cn)('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: lucide_react_1.Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen), readOnly: true }) }) }), (0, jsx_runtime_1.jsx)(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: (0, jsx_runtime_1.jsxs)(Popover.Content, { className: (0, utils_1.cn)('z-[300] bg-white rounded-xl shadow-2xl border border-gray-200/50 backdrop-blur-sm', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'w-[95vw] sm:w-[380px] max-w-[calc(100vw-2rem)] p-3 sm:p-4'), side: "bottom", align: "start", sideOffset: 8, avoidCollisions: true, collisionPadding: 16, onOpenAutoFocus: (e) => e.preventDefault(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Calendar, { className: "h-4 w-4 text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: "Select Date & Time" })] }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "ghost", size: "sm", onClick: () => setIsOpen(false), className: "h-6 w-6 p-0 hover:bg-red-50 hover:text-red-600 transition-all duration-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3 w-3" }) })] }), (0, jsx_runtime_1.jsx)(CalendarView_1.CalendarView, { currentMonth: selectedDate || new Date(), selectedDate: selectedDate, onDateClick: handleDateClick, onMonthChange: handleMonthChange, minDate: minDate, maxDate: maxDate, showNavigation: true }), (0, jsx_runtime_1.jsxs)("div", { className: "border-t border-[rgb(var(--bd-default))] pt-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-4 w-4 text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: "Time" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [renderTimeInput(hours, setHours, timeFormat === '12h' ? 12 : 23, 'Hours'), (0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-bold text-[rgb(var(--fg-muted))] mb-5", children: ":" }), renderTimeInput(minutes, setMinutes, 59, 'Mins'), timeFormat === '12h' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "w-px h-16 bg-[rgb(var(--bd-default))] mx-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setPeriod('AM'), className: (0, utils_1.cn)('px-3 py-1.5 text-sm font-semibold rounded-lg transition-all duration-200', period === 'AM'
+                                                                        ? 'bg-[rgb(var(--color-primary))] text-white shadow-md'
+                                                                        : 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))]'), children: "AM" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPeriod('PM'), className: (0, utils_1.cn)('px-3 py-1.5 text-sm font-semibold rounded-lg transition-all duration-200', period === 'PM'
+                                                                        ? 'bg-[rgb(var(--color-primary))] text-white shadow-md'
+                                                                        : 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))]'), children: "PM" })] })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-4 pt-4 border-t border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "outline", size: "sm", onClick: handleNow, className: "flex-1 text-xs font-medium hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: "Now" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "outline", size: "sm", onClick: handleClear, className: "flex-1 text-xs font-medium text-red-500 hover:bg-red-50 hover:text-red-600", children: "Clear" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "primary", size: "sm", onClick: handleApply, disabled: !selectedDate, className: "flex-1 text-xs font-medium", children: "Apply" })] })] }) })] }), error && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-red-600", children: error })] }));
+}

package/dist/cjs/components/forms/date-picker/index.js

@@ -0,0 +1,21 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFirstDayOfMonth = exports.getDaysInMonth = exports.TIME_OPTIONS = exports.PERIOD_OPTIONS = exports.WEEKDAYS = exports.MONTHS = exports.CalendarView = exports.DateTimePicker = exports.DatePicker = void 0;
+// DatePicker - Single/Range date selection without time
+var DatePicker_1 = require("./DatePicker.js");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
+// DateTimePicker - Single date WITH time selection
+var DateTimePicker_1 = require("./DateTimePicker.js");
+Object.defineProperty(exports, "DateTimePicker", { enumerable: true, get: function () { return DateTimePicker_1.DateTimePicker; } });
+// CalendarView - Shared calendar rendering component
+var CalendarView_1 = require("./CalendarView.js");
+Object.defineProperty(exports, "CalendarView", { enumerable: true, get: function () { return CalendarView_1.CalendarView; } });
+// Shared utilities (for internal use or custom implementations)
+var shared_utils_1 = require("./shared-utils.js");
+Object.defineProperty(exports, "MONTHS", { enumerable: true, get: function () { return shared_utils_1.MONTHS; } });
+Object.defineProperty(exports, "WEEKDAYS", { enumerable: true, get: function () { return shared_utils_1.WEEKDAYS; } });
+Object.defineProperty(exports, "PERIOD_OPTIONS", { enumerable: true, get: function () { return shared_utils_1.PERIOD_OPTIONS; } });
+Object.defineProperty(exports, "TIME_OPTIONS", { enumerable: true, get: function () { return shared_utils_1.TIME_OPTIONS; } });
+Object.defineProperty(exports, "getDaysInMonth", { enumerable: true, get: function () { return shared_utils_1.getDaysInMonth; } });
+Object.defineProperty(exports, "getFirstDayOfMonth", { enumerable: true, get: function () { return shared_utils_1.getFirstDayOfMonth; } });

package/dist/cjs/components/forms/date-picker/shared-utils.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+// ============================================
+// Shared Utility Functions for DatePicker Components
+// ============================================
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFirstDayOfMonth = exports.getDaysInMonth = exports.TIME_OPTIONS = exports.PERIOD_OPTIONS = exports.WEEKDAYS = exports.MONTHS = void 0;
+exports.MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+];
+exports.WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+exports.PERIOD_OPTIONS = ['Day', 'Week', 'Month', 'Quarter', 'Year'];
+exports.TIME_OPTIONS = ['Last', 'This', 'Next'];
+// Helper to get days in a month
+const getDaysInMonth = (date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+exports.getDaysInMonth = getDaysInMonth;
+// Helper to get first day of month (0-6, where 0 is Sunday)
+const getFirstDayOfMonth = (date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+};
+exports.getFirstDayOfMonth = getFirstDayOfMonth;