indas-ui 0.0.1 → 0.1.0

package/dist/components/forms/date-picker/CalendarView.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../ui/index.js';
+import { MONTHS, WEEKDAYS, getDaysInMonth, getFirstDayOfMonth } from './shared-utils.js';
+/**
+ * Shared Calendar View Component
+ * Used by both DatePicker and DateTimePicker to render the calendar grid
+ */
+export function CalendarView({ currentMonth, selectedDate, onDateClick, onMonthChange, isDateDisabled, isDateSelected, minDate, maxDate, showNavigation = true }) {
+    const defaultIsDateDisabled = React.useCallback((date) => {
+        if (minDate && date < minDate)
+            return true;
+        if (maxDate && date > maxDate)
+            return true;
+        return false;
+    }, [minDate, maxDate]);
+    const defaultIsDateSelected = React.useCallback((date) => {
+        if (!selectedDate)
+            return false;
+        return date.toDateString() === selectedDate.toDateString();
+    }, [selectedDate]);
+    const checkDisabled = isDateDisabled || defaultIsDateDisabled;
+    const checkSelected = isDateSelected || defaultIsDateSelected;
+    const renderCalendarDays = () => {
+        const daysInMonth = getDaysInMonth(currentMonth);
+        const firstDayOfMonth = getFirstDayOfMonth(currentMonth);
+        const days = [];
+        // Empty cells for days before month starts
+        for (let i = 0; i < firstDayOfMonth; i++) {
+            days.push(_jsx("div", { className: "h-8 w-8" }, `empty-${i}`));
+        }
+        // Days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+            const isSelected = checkSelected(date);
+            const isDisabled = checkDisabled(date);
+            const isToday = date.toDateString() === new Date().toDateString();
+            days.push(_jsx("button", { className: cn('h-8 w-8 rounded-lg text-xs font-medium transition-all duration-200', 'text-[rgb(var(--fg-default))]', !isSelected && !isDisabled && 'hover:bg-[rgb(var(--bg-hover))] hover:shadow-sm', isSelected && 'bg-[rgb(var(--color-primary))] !text-white shadow-md', isToday && !isSelected && 'text-[rgb(var(--color-primary))] font-bold border border-[rgb(var(--color-primary))]', isDisabled && 'text-[rgb(var(--fg-subtle))] cursor-not-allowed hover:bg-transparent'), onClick: () => !isDisabled && onDateClick(date), disabled: isDisabled, children: day }, day));
+        }
+        return days;
+    };
+    return (_jsxs("div", { children: [showNavigation && (_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onMonthChange('prev'), className: "h-7 w-7 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: [MONTHS[currentMonth.getMonth()], " ", currentMonth.getFullYear()] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onMonthChange('next'), className: "h-7 w-7 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS.map(day => (_jsx("div", { className: "h-7 w-8 flex items-center justify-center font-semibold text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] rounded text-[10px]", children: day.charAt(0) }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: renderCalendarDays() })] }));
+}

package/dist/components/forms/date-picker/DatePicker.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface DateRange {
+    from?: Date;
+    to?: Date;
+}
+export interface DatePickerProps {
+    value?: Date | DateRange | string;
+    onChange?: (date: Date | DateRange | string | undefined) => void;
+    mode?: 'single' | 'range';
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    showTime?: boolean;
+    showFromTo?: boolean;
+    returnFormat?: 'date' | 'string';
+    /** Show calendar inline without trigger/popover */
+    inline?: boolean;
+    /** Render just a calendar icon button as the trigger (for use inside search bars) */
+    iconOnly?: boolean;
+    /** Alignment of the popover relative to the trigger */
+    popoverAlign?: 'start' | 'center' | 'end';
+    presets?: Array<{
+        label: string;
+        value: Date | DateRange;
+    }>;
+}
+export declare function DatePicker({ value, onChange, mode, placeholder, label, error, disabled, minDate, maxDate, className, showTime, showFromTo, returnFormat, inline, iconOnly, popoverAlign, presets }: DatePickerProps): React.JSX.Element;