@aic-kits/react 0.34.6 → 0.34.9

package/dist/components/DatePicker/DatePickerCalendar.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerCalendarProps } from './types';
+export declare const DatePickerCalendar: ({ currentMonth, selectedDate, onDateSelect, onMonthChange, dateConfig, weekStartDay, locale, size, disabled, rangeMarkerDate, }: DatePickerCalendarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePickerGrid.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerGridProps } from './types';
+export declare const DatePickerGrid: ({ currentMonth, selectedDate, onDateClick, dateConfig, weekStartDay, locale, size, disabled, rangeMarkerDate, }: DatePickerGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePickerHeader.d.ts

@@ -0,0 +1,8 @@
+import { DatePickerHeaderProps, DatePickerViewMode } from './types';
+interface DatePickerHeaderInternalProps extends DatePickerHeaderProps {
+    viewMode: DatePickerViewMode;
+    onMonthClick: () => void;
+    onYearClick: () => void;
+}
+export declare const DatePickerHeader: ({ currentMonth, onPrevMonth, onNextMonth, locale, size, disabled, dateConfig, viewMode, onMonthClick, onYearClick, }: DatePickerHeaderInternalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/DatePickerInput.d.ts

@@ -0,0 +1,3 @@
+import { InputHandle } from '../Input/types';
+import { DatePickerInputProps } from './types';
+export declare const DatePickerInput: import('react').ForwardRefExoticComponent<DatePickerInputProps & import('react').RefAttributes<InputHandle>>;

package/dist/components/DatePicker/DatePickerMonthPicker.d.ts

@@ -0,0 +1,13 @@
+import { DatePickerSize, DateConfig } from './types';
+interface DatePickerMonthPickerProps {
+    currentYear: number;
+    selectedMonth: number | null;
+    selectedYear: number | null;
+    onSelect: (month: number) => void;
+    locale: string;
+    size: DatePickerSize;
+    dateConfig?: DateConfig;
+    disabled?: boolean;
+}
+export declare const DatePickerMonthPicker: ({ currentYear, selectedMonth, selectedYear, onSelect, locale, size, dateConfig, disabled, }: DatePickerMonthPickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/DatePickerPopup.d.ts

@@ -0,0 +1,6 @@
+import { DatePickerPopupProps, DatePickerSize } from './types';
+interface DatePickerPopupInternalProps extends DatePickerPopupProps {
+    size: DatePickerSize;
+}
+export declare const DatePickerPopup: ({ isOpen, anchorRef, onClose, children, size: _size, }: DatePickerPopupInternalProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/DatePicker/DatePickerRangeInput.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export interface DatePickerRangeInputProps {
+    startValue: string;
+    endValue: string;
+    onStartChange: (value: string) => void;
+    onEndChange: (value: string) => void;
+    onStartFocus: () => void;
+    onEndFocus: () => void;
+    onStartBlur?: () => void;
+    onEndBlur?: () => void;
+    onStartEnterPress?: () => void;
+    onEndEnterPress?: () => void;
+    onClear?: () => void;
+    hasValue?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+}
+export interface DatePickerRangeInputHandle {
+    focusStart: () => void;
+    focusEnd: () => void;
+    blurStart: () => void;
+    blurEnd: () => void;
+}
+export declare const DatePickerRangeInput: React.ForwardRefExoticComponent<DatePickerRangeInputProps & React.RefAttributes<DatePickerRangeInputHandle>>;

package/dist/components/DatePicker/DatePickerTimezone.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerTimezoneProps } from './types';
+export declare const DatePickerTimezone: ({ timezones, selectedTimezone, onTimezoneChange, label, size, disabled, }: DatePickerTimezoneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePickerYearPicker.d.ts

@@ -0,0 +1,11 @@
+import { DatePickerSize, DateConfig } from './types';
+interface DatePickerYearPickerProps {
+    currentYear: number;
+    selectedYear: number | null;
+    onSelect: (year: number) => void;
+    size: DatePickerSize;
+    dateConfig?: DateConfig;
+    disabled?: boolean;
+}
+export declare const DatePickerYearPicker: ({ currentYear, selectedYear, onSelect, size, dateConfig, disabled, }: DatePickerYearPickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/StyledDatePicker.d.ts

@@ -0,0 +1,26 @@
+interface StyledDateCellProps {
+    $isSelected: boolean;
+    $isToday: boolean;
+    $isDisabled: boolean;
+    $isOutsideMonth: boolean;
+    $isRangeMarker: boolean;
+    $size: number;
+    $fontSize: number;
+}
+export declare const StyledDateCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledDateCellProps>> & string;
+interface StyledPickerCellProps {
+    $isSelected: boolean;
+    $isDisabled: boolean;
+    $isCurrent: boolean;
+    $height: number;
+    $fontSize: number;
+}
+export declare const StyledPickerCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPickerCellProps>> & string;
+interface StyledDateRangeInputBoxProps {
+    $isFocused: boolean;
+    $isDisabled: boolean;
+    $error: boolean;
+}
+export declare const StyledDateRangeInputBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledDateRangeInputBoxProps>> & string;
+export declare const StyledDateRangeInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export {};

package/dist/components/DatePicker/constants.d.ts

@@ -0,0 +1,23 @@
+import { TimezoneOption } from './types';
+/**
+ * Get default list of timezones from browser's Intl API
+ * Sorted by UTC offset, with current offset displayed
+ * Lazy-loaded and cached on first call
+ */
+export declare const getDefaultTimezones: () => TimezoneOption[];
+/**
+ * @deprecated Use getDefaultTimezones() instead for lazy loading
+ */
+export declare const DEFAULT_TIMEZONES: TimezoneOption[];
+/**
+ * Default timezone (Vietnam - Ho Chi Minh City)
+ */
+export declare const DEFAULT_TIMEZONE = "Asia/Saigon";
+/**
+ * Default locale (English - US)
+ */
+export declare const DEFAULT_LOCALE = "en-US";
+/**
+ * Default week start day (Monday = 1)
+ */
+export declare const DEFAULT_WEEK_START_DAY = 1;

package/dist/components/DatePicker/hooks.d.ts

@@ -0,0 +1,37 @@
+import { DatePickerValue, DateConfig, TimeFormat, TimeValue } from './types';
+interface UseDatePickerStateParams {
+    value?: DatePickerValue;
+    onChange?: (value: DatePickerValue) => void;
+    onClose?: () => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultMonth?: Date;
+    defaultTimezone?: string;
+    disabled?: boolean;
+    dateConfig?: DateConfig;
+    showTime?: boolean;
+    timeFormat?: TimeFormat;
+}
+export declare function useDatePickerState({ value, onChange, onClose, open, onOpenChange, defaultMonth, defaultTimezone, disabled, showTime, }: UseDatePickerStateParams): {
+    isOpen: boolean;
+    selectedDate: Date | null;
+    selectedTime: TimeValue | null;
+    selectedTimezone: string | null;
+    currentMonth: Date;
+    containerRef: import('react').RefObject<HTMLDivElement | null>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    handleOpen: () => void;
+    handleClose: () => void;
+    setIsOpen: (isOpenValue: boolean) => void;
+    handleToggle: () => void;
+    handleDateSelect: (date: Date | null) => void;
+    setSelectedDatePreview: (date: Date | null) => void;
+    handleTimeSelect: (time: TimeValue | null) => void;
+    setSelectedTimePreview: (time: TimeValue | null) => void;
+    handleTimezoneChange: (timezone: string) => void;
+    handleMonthChange: (newMonth: Date) => void;
+    reset: () => void;
+    getValue: () => DatePickerValue;
+    focus: () => void;
+};
+export {};

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

@@ -0,0 +1,4 @@
+import { DatePickerProps, DatePickerHandle } from './types';
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<DatePickerHandle>>;
+export type { DatePickerProps, DatePickerHandle, DatePickerValue, DateConfig, DatePickerSize, DatePickerVariant, DatePickerMode, WeekStartDay, TimeFormat, TimeValue, } from './types';
+export { formatDateTimeForInput, getTimeSlotsForDate, getAllUniqueTimeSlots, getDatesFromSlots, dateHasSlots, createSlotsDateConfig, } from './utils';

package/dist/components/DatePicker/types.d.ts

@@ -0,0 +1,317 @@
+import { Color, DatePickerSize, DatePickerVariant, TimeFormat } from '../../theme';
+import { BoxProps } from '../Box';
+import { TimeValue } from '../TimePicker/types';
+export type { DatePickerSize, DatePickerVariant, TimeValue, TimeFormat };
+/**
+ * Configuration for date constraints
+ */
+export interface DateConfig {
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Specific dates to disable */
+    disabledDates?: Date[];
+    /** Function to determine if a date should be disabled */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Days of week to disable (0 = Sunday, 6 = Saturday) */
+    disabledDaysOfWeek?: number[];
+}
+/**
+ * Represents a timezone option
+ */
+export interface TimezoneOption {
+    /** Timezone identifier (e.g., "America/New_York") */
+    value: string;
+    /** Display label (e.g., "Eastern Time - US & Canada") */
+    label: string;
+    /** UTC offset (e.g., "-05:00") */
+    offset: string;
+    /** Abbreviated name (e.g., "ET") */
+    abbreviation?: string;
+}
+/**
+ * Value returned when a date and time are selected
+ */
+export interface DatePickerValue {
+    /** Selected date */
+    date: Date | null;
+    /** Selected time (when showTime is enabled) */
+    time?: TimeValue | null;
+    /** Selected timezone */
+    timezone: string | null;
+}
+export type DatePickerMode = 'inline' | 'popup';
+export type WeekStartDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type DatePickerViewMode = 'days' | 'months' | 'years';
+/**
+ * Main DatePicker component props
+ */
+export interface DatePickerProps extends Omit<BoxProps, 'onChange'> {
+    /**
+     * Currently selected value (single mode)
+     */
+    value?: DatePickerValue;
+    /**
+     * Callback fired when selection changes (single mode)
+     */
+    onChange?: (value: DatePickerValue) => void;
+    /**
+     * Callback fired when picker is closed (popup mode only)
+     */
+    onClose?: () => void;
+    /**
+     * Enable range mode (two date inputs: start and end)
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * Start date value (range mode)
+     */
+    startValue?: DatePickerValue;
+    /**
+     * End date value (range mode)
+     */
+    endValue?: DatePickerValue;
+    /**
+     * Callback when start date changes (range mode)
+     */
+    onStartChange?: (value: DatePickerValue) => void;
+    /**
+     * Callback when end date changes (range mode)
+     */
+    onEndChange?: (value: DatePickerValue) => void;
+    /**
+     * Display mode: inline (always visible) or popup (triggered by input)
+     * @default 'inline'
+     */
+    mode?: DatePickerMode;
+    /**
+     * Show input field in inline mode header (for manual date/time entry)
+     * @default false
+     */
+    showInlineInput?: boolean;
+    /**
+     * Whether the popup is open (controlled mode for popup)
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Date constraints and disabled dates
+     */
+    dateConfig?: DateConfig;
+    /**
+     * Disable selection of dates before today
+     * @default false
+     */
+    disablePastDates?: boolean;
+    /**
+     * Initial month to display
+     */
+    defaultMonth?: Date;
+    /**
+     * First day of week (0 = Sunday, 1 = Monday, etc.)
+     * @default 0
+     */
+    weekStartDay?: WeekStartDay;
+    /**
+     * Locale for date formatting (e.g., 'en-US', 'fr-FR')
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Time format for display
+     * '12h' shows AM/PM (e.g., "9:00am")
+     * '24h' shows 24-hour format (e.g., "09:00")
+     * @default '12h'
+     */
+    timeFormat?: TimeFormat;
+    /**
+     * Show time picker alongside date picker
+     * @default false
+     */
+    showTime?: boolean;
+    /**
+     * Minute step for time picker wheel
+     * @default 1
+     */
+    minuteStep?: number;
+    /**
+     * Predefined time slots to choose from (without date restriction).
+     * When provided, shows a single wheel with these slots instead of hour/minute wheels.
+     * Example: [{ hours: 9, minutes: 0 }, { hours: 12, minutes: 30 }]
+     * Note: Use `slots` instead if you need date+time combinations.
+     */
+    timeSlots?: TimeValue[];
+    /**
+     * Predefined date+time slots to choose from.
+     * When provided, only dates/times in this array can be selected.
+     * Time picker will show only available times for the selected date.
+     * Example: [
+     *   { date: new Date('2024-01-15'), time: { hours: 9, minutes: 0 }, timezone: null },
+     *   { date: new Date('2024-01-15'), time: { hours: 14, minutes: 30 }, timezone: null },
+     *   { date: new Date('2024-01-16'), time: { hours: 10, minutes: 0 }, timezone: null },
+     * ]
+     */
+    slots?: DatePickerValue[];
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: DatePickerSize;
+    /**
+     * Visual variant
+     * @default 'outlined'
+     */
+    variant?: DatePickerVariant;
+    /**
+     * Primary color for selected states
+     * @default 'primary'
+     */
+    color?: Color;
+    /**
+     * Label text above the input
+     */
+    label?: string;
+    /**
+     * Helper text below the input
+     */
+    helperText?: string;
+    /**
+     * Error message (takes precedence over helperText)
+     */
+    error?: string;
+    /**
+     * Whether the picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the picker is in loading state
+     * @default false
+     */
+    loading?: boolean;
+}
+export interface DatePickerCalendarProps {
+    /** Currently displayed month */
+    currentMonth: Date;
+    /** Selected date */
+    selectedDate: Date | null;
+    /** Callback when date is selected */
+    onDateSelect: (date: Date) => void;
+    /** Callback when month changes */
+    onMonthChange: (date: Date) => void;
+    /** Date constraints */
+    dateConfig?: DateConfig;
+    /** First day of week */
+    weekStartDay: WeekStartDay;
+    /** Locale for formatting */
+    locale: string;
+    /** Size variant */
+    size: DatePickerSize;
+    /** Whether interaction is disabled */
+    disabled?: boolean;
+    /** Range marker date (shows the other end of range in range mode) */
+    rangeMarkerDate?: Date | null;
+}
+export interface DatePickerHeaderProps {
+    /** Current month being displayed */
+    currentMonth: Date;
+    /** Callback to go to previous month */
+    onPrevMonth: () => void;
+    /** Callback to go to next month */
+    onNextMonth: () => void;
+    /** Locale for month/year formatting */
+    locale: string;
+    /** Size variant */
+    size: DatePickerSize;
+    /** Whether navigation is disabled */
+    disabled?: boolean;
+    /** Date config for determining if navigation should be disabled */
+    dateConfig?: DateConfig;
+}
+export interface DatePickerGridProps {
+    /** Current month to display */
+    currentMonth: Date;
+    /** Selected date */
+    selectedDate: Date | null;
+    /** Callback when date is clicked */
+    onDateClick: (date: Date) => void;
+    /** Date constraints */
+    dateConfig?: DateConfig;
+    /** First day of week */
+    weekStartDay: WeekStartDay;
+    /** Locale for formatting */
+    locale: string;
+    /** Size variant */
+    size: DatePickerSize;
+    /** Whether interaction is disabled */
+    disabled?: boolean;
+    /** Range marker date (shows the other end of range in range mode) */
+    rangeMarkerDate?: Date | null;
+}
+export interface DatePickerTimezoneProps {
+    /** Available timezones */
+    timezones: TimezoneOption[];
+    /** Currently selected timezone */
+    selectedTimezone: string | null;
+    /** Callback when timezone changes */
+    onTimezoneChange: (timezone: string) => void;
+    /** Section label */
+    label?: string;
+    /** Size variant */
+    size: DatePickerSize;
+    /** Whether interaction is disabled */
+    disabled?: boolean;
+}
+export interface DatePickerInputProps {
+    /** Input value (formatted date string) */
+    value: string;
+    /** Callback when input value changes */
+    onChange: (value: string) => void;
+    /** Callback when input is focused (opens calendar) */
+    onFocus: () => void;
+    /** Callback when input is blurred */
+    onBlur?: () => void;
+    /** Callback when Enter key is pressed */
+    onEnterPress?: () => void;
+    /** Callback when clear button is clicked */
+    onClear?: () => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Whether input is disabled */
+    disabled?: boolean;
+    /** Whether input has a value (to show clear button) */
+    hasValue: boolean;
+}
+export interface DatePickerPopupProps {
+    /** Whether popup is open */
+    isOpen: boolean;
+    /** Anchor element ref */
+    anchorRef: React.RefObject<HTMLDivElement | null>;
+    /** Close handler */
+    onClose: () => void;
+    /** Popup content */
+    children: React.ReactNode;
+}
+export interface DatePickerHandle {
+    /** Open the picker (popup mode) */
+    open: () => void;
+    /** Close the picker (popup mode) */
+    close: () => void;
+    /** Reset to initial value */
+    reset: () => void;
+    /** Get current value */
+    getValue: () => DatePickerValue;
+    /** Focus the input (popup mode) */
+    focus: () => void;
+}