@delightui/components 0.1.144 → 0.1.146

package/dist/esm/components/molecules/DatePicker/DateInput/DateInput.d.ts

@@ -0,0 +1,3 @@
+import { DateInputProps } from './DateInput.types';
+declare const DateInput: (props: DateInputProps) => import("react/jsx-runtime").JSX.Element;
+export default DateInput;

package/dist/esm/components/molecules/DatePicker/DateInput/DateInput.presenter.d.ts

@@ -0,0 +1,14 @@
+import { DateInputProps } from './DateInput.types';
+declare const usePresenter: (props: DateInputProps) => {
+    invalid: boolean | undefined;
+    onInputBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    inputLeadingIcon: false | import("react/jsx-runtime").JSX.Element | undefined;
+    readOnly: boolean;
+    inputVariantProps: {
+        'component-variant': string;
+    };
+    value: import("../DatePickerBase").DatePickerValue | undefined;
+    isTimePickerOnly: boolean | undefined;
+    handleInputReadOnlyState: (value: boolean) => void;
+};
+export default usePresenter;

package/dist/esm/components/molecules/DatePicker/DateInput/DateInput.types.d.ts

@@ -0,0 +1,15 @@
+import { DatePickerBaseSharedProps } from '../DatePickerBase';
+export type DateInputProps = DatePickerBaseSharedProps & {
+    /**
+     * Placeholder text for the date picker input
+     */
+    placeholder?: string;
+    /**
+     * Icon to be displayed before the input.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Icon to be displayed after the input.
+     */
+    trailingIcon?: React.ReactNode;
+};

package/dist/esm/components/molecules/DatePicker/DateInput/index.d.ts

@@ -0,0 +1,4 @@
+import DateInput from './DateInput';
+import type { DateInputProps } from './DateInput.types';
+export type { DateInputProps };
+export default DateInput;

package/dist/esm/components/molecules/DatePicker/DatePicker.d.ts

@@ -1,6 +1,3 @@
-import 'flatpickr/dist/flatpickr.css';
-import 'flatpickr/dist/flatpickr.css';
-import type { DatePickerProps } from './DatePicker.types';
-import './Flatpickr.custom.scss';
+import { DatePickerProps } from './DatePicker.types';
 declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

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

@@ -1,111 +1,2 @@
-import { Plugin } from 'flatpickr/dist/types/options';
-import FlatPickr from 'react-flatpickr';
-import { ControlledFormComponentProps } from '../FormField/FormField.types';
-type DatePickerPosition = 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
-export type DatePickerValue = string | Date | (string | Date)[];
-export type DatePickerProps = ControlledFormComponentProps<DatePickerValue> & {
-    /**
-     * Additional class for styling.
-     */
-    className?: string;
-    /**
-     * The minimum selectable date.
-     */
-    minDate?: string | Date;
-    /**
-     * The maximum selectable date.
-     */
-    maxDate?: string | Date;
-    /**
-     * Enable time selection in the date picker.
-     * @default false
-     */
-    enableTime?: boolean;
-    /**
-     * Enable selecting a start and end date.
-     * @default false
-     */
-    enableRange?: boolean;
-    /**
-     * The date that is initially displayed.
-     */
-    defaultDate?: string | Date;
-    /**
-     * The format of the date to be displayed.
-     * @remark
-     * For info about what formats exist, refer to the flatpickr documentation
-     */
-    dateFormat?: string;
-    /**
-     * Callback function when the date picker is opened.
-     * @param dates - Array of selected dates.
-     * @param dateStr - String representation of the selected date(s). Will match the date format.
-     */
-    onOpen?: (dates: Date[], dateStr: string) => void;
-    /**
-     * Callback function when the date picker is closed.
-     * @param dates - Array of selected dates.
-     * @param dateStr - String representation of the selected date(s). Will match the date format.
-     */
-    onClose?: (dates: Date[], dateStr: string) => void;
-    /**
-     * render date picker inline
-     */
-    inline?: boolean;
-    /**
-   * Hide calendar for only time picker.
-   * @default false
-   */
-    noCalendar?: boolean;
-    /**
-     * The Flatpickr ref.
-     */
-    datePickerRef?: React.RefObject<FlatPickr>;
-    /**
-     * Datepicker position
-     */
-    position?: DatePickerPosition;
-    /**
-     * Function to parse date strings into Date objects.
-     * Used for parsing both the initial date string and any date strings entered in the input field.
-     * @param date - The date value to parse, can be a string
-     * @param format - Optional format string to use when parsing date strings
-     * @returns A Date object representing the parsed date
-     */
-    parseDate?: (date: string, format?: string) => Date;
-    /**
-    * Allow user to type date/time in input.
-    * @default false
-    */
-    allowInput?: boolean;
-    /**
-     * Custom time picker plugin
-     */
-    customTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
-    /**
-     * Custom time picker plugin
-     */
-    customDateTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
-    /**
-     * Use custom time input same as date picker input
-     * This is useful when the datepicker is inline and is re-added to the DOM after closing
-     * For example using this inside a Popover as content
-     */
-    useCustomTimeInputForTimePicker?: boolean;
-    /**
-     * Placeholder text for the date picker input
-     */
-    placeholder?: string;
-    /**
-     * Icon to be displayed before the input.
-     */
-    leadingIcon?: React.ReactNode;
-    /**
-     * Icon to be displayed after the input.
-     */
-    trailingIcon?: React.ReactNode;
-};
-export type CustomTimePickerConfig = {
-    minuteStep: number;
-};
-export {};
+import { DatePickerBaseSharedProps } from './DatePickerBase';
+export type DatePickerProps = Omit<DatePickerBaseSharedProps, 'noCalendar' | 'inline'> & {};

package/dist/esm/components/molecules/DatePicker/DatePickerBase/DatePickerBase.constants.d.ts

@@ -0,0 +1,10 @@
+export declare const customLocale: {
+    weekdays: {
+        shorthand: string[];
+        longhand: string[];
+    };
+    months: {
+        shorthand: [string, string, string, string, string, string, string, string, string, string, string, string];
+        longhand: [string, string, string, string, string, string, string, string, string, string, string, string];
+    };
+};

package/dist/esm/components/molecules/DatePicker/DatePickerBase/DatePickerBase.d.ts

@@ -0,0 +1,5 @@
+import 'flatpickr/dist/flatpickr.css';
+import type { DatePickerBaseProps } from './DatePickerBase.types';
+import './Flatpickr.custom.scss';
+declare const DatePickerBase: (props: DatePickerBaseProps) => import("react/jsx-runtime").JSX.Element;
+export default DatePickerBase;

package/dist/esm/components/molecules/DatePicker/{DatePicker.presenter.d.ts → DatePickerBase/DatePickerBase.presenter.d.ts}

@@ -1,10 +1,10 @@
 import { Instance } from 'flatpickr/dist/types/instance';
-import { DatePickerProps } from './DatePicker.types';
-declare const usePresenter: (props: DatePickerProps) => {
+import { DatePickerBaseProps } from './DatePickerBase.types';
+declare const usePresenter: (props: DatePickerBaseProps) => {
+    value: import("./DatePickerBase.types").DatePickerValue | undefined;
     datePickerRef: import("react").RefObject<import("react-flatpickr").default> | undefined;
     disabled: boolean | undefined;
     required: boolean | undefined;
-    invalid: boolean | undefined;
     mode: "range" | "single";
     enableTime: boolean | undefined;
     noCalendar: boolean | undefined;
@@ -12,7 +12,7 @@ declare const usePresenter: (props: DatePickerProps) => {
     customPlugin: import("flatpickr/dist/types/options").Plugin[];
     handleKeyDown: (_selectedDates: Date[], _dateStr: string, instance: Instance, event: KeyboardEvent) => void;
     otherProps: {
-        initialValue?: import("./DatePicker.types").DatePickerValue | undefined;
+        initialValue?: import("./DatePickerBase.types").DatePickerValue | undefined;
         checked?: boolean;
         id?: string;
         minDate?: string | Date;
@@ -23,22 +23,16 @@ declare const usePresenter: (props: DatePickerProps) => {
         position?: "auto" | "above" | "below" | "auto left" | "auto center" | "auto right" | "above left" | "above center" | "above right" | "below left" | "below center" | "below right";
         parseDate?: (date: string, format?: string) => Date;
         allowInput?: boolean;
-        placeholder?: string;
-        leadingIcon?: React.ReactNode;
-        trailingIcon?: React.ReactNode;
+        renderInput?: ((props: Omit<import("react-flatpickr").DateTimePickerProps, "options" | "render">, ref: (node: HTMLInputElement | null) => void) => React.ReactElement) | undefined;
     };
-    onInputBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
-    inputLeadingIcon: false | import("react/jsx-runtime").JSX.Element | undefined;
-    readOnly: boolean;
     onDateChange: (dates: Date[]) => void;
     onCloseDatePicker: import("flatpickr/dist/types/options").Hook;
     onOpenDatePicker: import("flatpickr/dist/types/options").Hook;
-    variantProps: {
+    calendarVariantProps: {
         'component-variant': string;
     };
     dayVariantProps: {
         'component-variant': string;
     };
-    value: import("./DatePicker.types").DatePickerValue | undefined;
 };
 export default usePresenter;

package/dist/esm/components/molecules/DatePicker/DatePickerBase/DatePickerBase.types.d.ts

@@ -0,0 +1,116 @@
+import { Plugin } from 'flatpickr/dist/types/options';
+import FlatPickr, { DateTimePickerProps } from 'react-flatpickr';
+import { ControlledFormComponentProps } from '../../FormField/FormField.types';
+type DatePickerPosition = 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
+export type DatePickerValue = string | Date | (string | Date)[];
+export type DatePickerBaseProps = ControlledFormComponentProps<DatePickerValue> & {
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: string | Date;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: string | Date;
+    /**
+     * Enable time selection in the date picker.
+     * @default false
+     */
+    enableTime?: boolean;
+    /**
+     * Enable selecting a start and end date.
+     * @default false
+     */
+    enableRange?: boolean;
+    /**
+     * The date that is initially displayed.
+     */
+    defaultDate?: string | Date;
+    /**
+     * The format of the date to be displayed.
+     * @remark
+     * For info about what formats exist, refer to the flatpickr documentation
+     */
+    dateFormat?: string;
+    /**
+     * Callback function when the date picker is opened.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onOpen?: (dates: Date[], dateStr: string) => void;
+    /**
+     * Callback function when the date picker is closed.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onClose?: (dates: Date[], dateStr: string) => void;
+    /**
+     * render date picker inline
+     */
+    inline?: boolean;
+    /**
+   * Hide calendar for only time picker.
+   * @default false
+   */
+    noCalendar?: boolean;
+    /**
+     * The Flatpickr ref.
+     */
+    datePickerRef?: React.RefObject<FlatPickr>;
+    /**
+     * Datepicker position
+     */
+    position?: DatePickerPosition;
+    /**
+     * Function to parse date strings into Date objects.
+     * Used for parsing both the initial date string and any date strings entered in the input field.
+     * @param date - The date value to parse, can be a string
+     * @param format - Optional format string to use when parsing date strings
+     * @returns A Date object representing the parsed date
+     */
+    parseDate?: (date: string, format?: string) => Date;
+    /**
+    * Allow user to type date/time in input.
+    * @default false
+    */
+    allowInput?: boolean;
+    /**
+     * Custom time picker plugin
+     */
+    customTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
+    /**
+     * Custom time picker plugin
+     */
+    customDateTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
+    /**
+     * Use custom time input same as date picker input
+     * This is useful when the datepicker is inline and is re-added to the DOM after closing
+     * For example using this inside a Popover as content
+     */
+    useCustomTimeInputForTimePicker?: boolean;
+    /**
+     * Custom renderer for the input element used by Flatpickr.
+     * Use this to supply your own input (e.g., shared Input atom) while still
+     * letting Flatpickr control it via the provided ref.
+     *
+     * - props: Forwarded props that ReactFlatPickr would apply to its default input
+     * - ref: Must be attached to your input so Flatpickr can bind events
+     */
+    renderInput?: ((props: Omit<DateTimePickerProps, 'options' | 'render'>, ref: (node: HTMLInputElement | null) => void) => React.ReactElement) | undefined;
+    /**
+     * Callback to toggle the input's readOnly state when the calendar opens/closes.
+     * Prevents soft keyboards/unwanted edits while the popup is active.
+     *
+     * - value: true to set readOnly, false to restore editability
+     */
+    handleInputReadOnlyState?: (value: boolean) => void;
+};
+export type CustomTimePickerConfig = {
+    minuteStep: number;
+};
+export type DatePickerBaseSharedProps = Omit<DatePickerBaseProps, 'renderInput' | 'handleInputReadOnlyState'>;
+export {};

package/dist/{cjs/components/molecules/DatePicker → esm/components/molecules/DatePicker/DatePickerBase}/Plugins/customTimeSelector.d.ts

@@ -1,4 +1,4 @@
 import { Plugin } from "flatpickr/dist/types/options";
-import { CustomTimePickerConfig } from '../DatePicker.types';
+import { CustomTimePickerConfig } from '../DatePickerBase.types';
 declare const timeDropdownPlugin: (config: CustomTimePickerConfig) => Plugin;
 export default timeDropdownPlugin;

package/dist/{cjs/components/molecules/DatePicker → esm/components/molecules/DatePicker/DatePickerBase}/Plugins/dateTimeSelector.d.ts

@@ -1,4 +1,4 @@
 import { Plugin } from "flatpickr/dist/types/options";
-import { CustomTimePickerConfig } from "../DatePicker.types";
+import { CustomTimePickerConfig } from "../DatePickerBase.types";
 declare const dateTimeDropdownPlugin: (config: CustomTimePickerConfig) => Plugin;
 export default dateTimeDropdownPlugin;

package/dist/{cjs/components/molecules/DatePicker → esm/components/molecules/DatePicker/DatePickerBase}/Plugins/timeSelector.d.ts

@@ -1,4 +1,4 @@
 import { Plugin } from "flatpickr/dist/types/options";
-import { CustomTimePickerConfig } from "../DatePicker.types";
+import { CustomTimePickerConfig } from "../DatePickerBase.types";
 declare const timeDropdownPlugin: (config: CustomTimePickerConfig) => Plugin;
 export default timeDropdownPlugin;

package/dist/esm/components/molecules/DatePicker/DatePickerBase/index.d.ts

@@ -0,0 +1,3 @@
+import DatePickerBase from './DatePickerBase';
+export default DatePickerBase;
+export * from './DatePickerBase.types';

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

@@ -1,4 +1,6 @@
 import DatePicker from './DatePicker';
-import type { DatePickerProps, CustomTimePickerConfig } from './DatePicker.types';
-export type { DatePickerProps, CustomTimePickerConfig };
+import type { CustomTimePickerConfig } from './DatePickerBase/DatePickerBase.types';
+export type { CustomTimePickerConfig };
 export default DatePicker;
+export * from './DatePicker.types';
+export * from './DateInput';

package/dist/esm/components/molecules/index.d.ts

@@ -4,6 +4,7 @@ export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as Card } from './Card';
 export { default as ContextMenu } from './ContextMenu';
+export { default as DateInput } from './DatePicker/DateInput';
 export { default as DatePicker } from './DatePicker';
 export { default as FormField } from './FormField';
 export { default as Grid } from './Grid';
@@ -27,6 +28,7 @@ export * from './Breadcrumbs';
 export * from './ButtonGroup';
 export * from './Card';
 export * from './ContextMenu';
+export * from './DatePicker/DateInput';
 export * from './DatePicker';
 export * from './FormField';
 export * from './Grid';