@moduix/react-tailwind 1.0.0

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,430 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DatePicker, useDatePicker, useDatePickerContext } from "@ark-ui/react/date-picker";
+import { useFieldContext } from "@ark-ui/react/field";
+import { useFieldsetContext } from "@ark-ui/react/fieldset";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const DatePicker_DatePickerRoot = /*#__PURE__*/ forwardRef(function({ className, disabled, invalid, lazyMount = true, portalled, portalRef, readOnly, required, unmountOnExit = true, ...props }, ref) {
+    const field = useFieldContext();
+    const fieldset = useFieldsetContext();
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(DatePicker.Root, {
+            ref: ref,
+            "data-slot": "date-picker-root",
+            className: cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", className),
+            disabled: disabled ?? field?.disabled ?? fieldset?.disabled,
+            invalid: invalid ?? field?.invalid ?? fieldset?.invalid,
+            lazyMount: lazyMount,
+            readOnly: readOnly ?? field?.readOnly,
+            required: required ?? field?.required,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+});
+const DatePicker_DatePickerRootProvider = /*#__PURE__*/ forwardRef(function({ className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(DatePicker.RootProvider, {
+            ref: ref,
+            "data-slot": "date-picker-root-provider",
+            className: cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", className),
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+});
+const DatePicker_DatePickerLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.Label, {
+        ref: ref,
+        "data-slot": "date-picker-label",
+        className: cn('inline-flex items-center text-sm leading-5 font-medium text-foreground select-none', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.Control, {
+        ref: ref,
+        "data-slot": "date-picker-control",
+        className: cn('group/date-picker-control relative flex w-full min-w-0 items-center gap-2 text-foreground', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerField = /*#__PURE__*/ forwardRef(function({ clearLabel, clearTriggerProps, inputProps, placeholder, triggerLabel, triggerProps, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(DatePicker_DatePickerControl, {
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(DatePicker_DatePickerInput, {
+                ...void 0 === placeholder ? {} : {
+                    placeholder
+                },
+                ...inputProps,
+                index: 0
+            }),
+            /*#__PURE__*/ jsx(DatePicker_DatePickerClearTrigger, {
+                ...void 0 === clearLabel ? {} : {
+                    'aria-label': clearLabel
+                },
+                ...clearTriggerProps
+            }),
+            /*#__PURE__*/ jsx(DatePicker_DatePickerTrigger, {
+                ...void 0 === triggerLabel ? {} : {
+                    'aria-label': triggerLabel
+                },
+                ...triggerProps
+            })
+        ]
+    });
+});
+const DatePicker_DatePickerRangeField = /*#__PURE__*/ forwardRef(function({ clearLabel, clearTriggerProps, endInputProps, endPlaceholder, startInputProps, startPlaceholder, triggerLabel, triggerProps, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(DatePicker_DatePickerControl, {
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(DatePicker_DatePickerInput, {
+                ...void 0 === startPlaceholder ? {} : {
+                    placeholder: startPlaceholder
+                },
+                ...startInputProps,
+                index: 0
+            }),
+            /*#__PURE__*/ jsx(DatePicker_DatePickerInput, {
+                ...void 0 === endPlaceholder ? {} : {
+                    placeholder: endPlaceholder
+                },
+                ...endInputProps,
+                index: 1
+            }),
+            /*#__PURE__*/ jsx(DatePicker_DatePickerClearTrigger, {
+                ...void 0 === clearLabel ? {} : {
+                    'aria-label': clearLabel
+                },
+                ...clearTriggerProps
+            }),
+            /*#__PURE__*/ jsx(DatePicker_DatePickerTrigger, {
+                ...void 0 === triggerLabel ? {} : {
+                    'aria-label': triggerLabel
+                },
+                ...triggerProps
+            })
+        ]
+    });
+});
+const DatePicker_DatePickerInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.Input, {
+        ref: ref,
+        "data-slot": "date-picker-input",
+        className: cn("readonly:cursor-default h-control-md w-full min-w-30 flex-1 rounded-md border border-border bg-background ps-3.5 pe-17 text-md leading-6 text-current outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out group-has-[input[data-index='1']]/date-picker:pe-3.5 group-data-focus/date-picker-control:border-ring group-data-focus/date-picker-control:outline-ring placeholder:text-muted-foreground focus:border-ring focus:outline-ring disabled:cursor-default aria-invalid:border-destructive aria-invalid:outline-destructive data-disabled:cursor-default data-invalid:border-destructive data-invalid:outline-destructive data-readonly:cursor-default data-[index='1']:pe-17 motion-reduce:transition-none", 'py-1', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.Trigger, {
+        ref: ref,
+        "data-slot": "date-picker-trigger",
+        asChild: asChild,
+        className: cn(!asChild && 'absolute end-2 top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(CalendarIcon, {})
+    });
+});
+const DatePicker_DatePickerClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.ClearTrigger, {
+        ref: ref,
+        asChild: true,
+        "data-slot": "date-picker-clear-trigger",
+        className: cn('absolute end-[2.125rem] top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
+        ...asChild && void 0 !== ariaLabel ? {
+            'aria-label': ariaLabel
+        } : {},
+        ...asChild && void 0 !== ariaLabelledBy ? {
+            'aria-labelledby': ariaLabelledBy
+        } : {},
+        ...props,
+        children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
+            ...void 0 === ariaLabel ? {} : {
+                'aria-label': ariaLabel
+            },
+            ...void 0 === ariaLabelledBy ? {} : {
+                'aria-labelledby': ariaLabelledBy
+            },
+            className: cn('size-control-xs [&>svg]:size-4', className),
+            children: children
+        })
+    });
+});
+const DatePicker_DatePickerPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(DatePicker.Positioner, {
+            ref: ref,
+            "data-slot": "date-picker-positioner",
+            className: cn('z-[var(--z-index)] outline-0', className),
+            ...props
+        })
+    });
+});
+const DatePicker_DatePickerContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.Content, {
+        ref: ref,
+        "data-slot": "date-picker-content",
+        className: cn('z-[calc(60+var(--layer-index,0))] w-75 max-w-[min(calc(100vw-2rem),var(--available-width))] min-w-[min(18.75rem,var(--available-width))] origin-[var(--transform-origin)] rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg outline-0 data-inline:min-w-72 data-inline:shadow-none data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerView = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.View, {
+        ref: ref,
+        "data-slot": "date-picker-view",
+        className: cn('grid gap-3', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerViewControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.ViewControl, {
+        ref: ref,
+        "data-slot": "date-picker-view-control",
+        className: cn('flex min-w-0 items-center justify-between gap-2', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerPrevTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.PrevTrigger, {
+        ref: ref,
+        "data-slot": "date-picker-prev-trigger",
+        asChild: asChild,
+        className: cn(!asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
+    });
+});
+const DatePicker_DatePickerNextTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.NextTrigger, {
+        ref: ref,
+        "data-slot": "date-picker-next-trigger",
+        asChild: asChild,
+        className: cn(!asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
+    });
+});
+const DatePicker_DatePickerRangeText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.RangeText, {
+        ref: ref,
+        "data-slot": "date-picker-range-text",
+        className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerViewTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.ViewTrigger, {
+        ref: ref,
+        "data-slot": "date-picker-view-trigger",
+        asChild: asChild,
+        className: cn(!asChild && 'inline-flex min-h-control-sm min-w-0 flex-1 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent px-2 text-sm leading-5 font-medium text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(DatePicker_DatePickerRangeText, {}),
+                /*#__PURE__*/ jsx(ChevronDownIcon, {})
+            ]
+        })
+    });
+});
+const DatePicker_DatePickerTable = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.Table, {
+        ref: ref,
+        "data-slot": "date-picker-table",
+        className: cn('w-full table-fixed border-separate border-spacing-0.5', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerTableHead = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.TableHead, {
+        ref: ref,
+        "data-slot": "date-picker-table-head",
+        className: className,
+        ...props
+    });
+});
+const DatePicker_DatePickerTableBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.TableBody, {
+        ref: ref,
+        "data-slot": "date-picker-table-body",
+        className: className,
+        ...props
+    });
+});
+const DatePicker_DatePickerTableRow = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.TableRow, {
+        ref: ref,
+        "data-slot": "date-picker-table-row",
+        className: className,
+        ...props
+    });
+});
+const DatePicker_DatePickerTableHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.TableHeader, {
+        ref: ref,
+        "data-slot": "date-picker-table-header",
+        className: cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerWeekNumberHeaderCell = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.WeekNumberHeaderCell, {
+        ref: ref,
+        "data-slot": "date-picker-week-number-header-cell",
+        className: cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerWeekNumberCell = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.WeekNumberCell, {
+        ref: ref,
+        "data-slot": "date-picker-week-number-cell",
+        className: cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerTableCell = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.TableCell, {
+        ref: ref,
+        "data-slot": "date-picker-table-cell",
+        className: cn('h-control-sm w-control-sm p-0 text-center', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerTableCellTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.TableCellTrigger, {
+        ref: ref,
+        "data-slot": "date-picker-table-cell-trigger",
+        className: cn('inline-flex h-control-sm w-full min-w-control-sm cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-in-hover-range:bg-muted data-in-hover-range:text-foreground data-in-range:bg-muted data-in-range:text-foreground data-outside-range:text-muted-foreground data-selected:bg-primary data-selected:text-primary-foreground data-today:border-ring data-unavailable:text-muted-foreground motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:text-accent-foreground', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerDayTable = /*#__PURE__*/ forwardRef(function({ offset, showHeader = true, showWeekNumbers = false, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.Context, {
+        children: (datePicker)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    showHeader ? /*#__PURE__*/ jsxs(DatePicker_DatePickerViewControl, {
+                        children: [
+                            /*#__PURE__*/ jsx(DatePicker_DatePickerPrevTrigger, {}),
+                            /*#__PURE__*/ jsx(DatePicker_DatePickerViewTrigger, {}),
+                            /*#__PURE__*/ jsx(DatePicker_DatePickerNextTrigger, {})
+                        ]
+                    }) : null,
+                    /*#__PURE__*/ jsxs(DatePicker_DatePickerTable, {
+                        ref: ref,
+                        ...props,
+                        children: [
+                            /*#__PURE__*/ jsx(DatePicker_DatePickerTableHead, {
+                                children: /*#__PURE__*/ jsxs(DatePicker_DatePickerTableRow, {
+                                    children: [
+                                        showWeekNumbers ? /*#__PURE__*/ jsx(DatePicker_DatePickerWeekNumberHeaderCell, {}) : null,
+                                        datePicker.weekDays.map((weekDay)=>/*#__PURE__*/ jsx(DatePicker_DatePickerTableHeader, {
+                                                children: weekDay.short
+                                            }, weekDay.value.toString()))
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(DatePicker_DatePickerTableBody, {
+                                children: (offset?.weeks ?? datePicker.weeks).map((week, weekIndex)=>/*#__PURE__*/ jsxs(DatePicker_DatePickerTableRow, {
+                                        children: [
+                                            showWeekNumbers ? /*#__PURE__*/ jsx(DatePicker_DatePickerWeekNumberCell, {
+                                                week: week,
+                                                weekIndex: weekIndex,
+                                                children: datePicker.getWeekNumber(week)
+                                            }) : null,
+                                            week.map((day)=>/*#__PURE__*/ jsx(DatePicker_DatePickerTableCell, {
+                                                    value: day,
+                                                    visibleRange: offset?.visibleRange,
+                                                    children: /*#__PURE__*/ jsx(DatePicker_DatePickerTableCellTrigger, {
+                                                        children: day.day
+                                                    })
+                                                }, day.toString()))
+                                        ]
+                                    }, week[0]?.toString()))
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+});
+const DatePicker_DatePickerMonthSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.MonthSelect, {
+        ref: ref,
+        "data-slot": "date-picker-month-select",
+        className: cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerYearSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.YearSelect, {
+        ref: ref,
+        "data-slot": "date-picker-year-select",
+        className: cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerPresetTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.PresetTrigger, {
+        ref: ref,
+        "data-slot": "date-picker-preset-trigger",
+        asChild: asChild,
+        className: cn(!asChild && 'inline-flex min-h-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-muted px-2 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-selected:bg-primary data-selected:text-primary-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent', className),
+        ...props
+    });
+});
+const DatePicker_DatePickerValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(DatePicker.ValueText, {
+        ref: ref,
+        "data-slot": "date-picker-value-text",
+        className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
+        ...props
+    });
+});
+const DatePicker_DatePicker = Object.assign(DatePicker_DatePickerRoot, {
+    Root: DatePicker_DatePickerRoot,
+    RootProvider: DatePicker_DatePickerRootProvider,
+    Context: DatePicker.Context,
+    Label: DatePicker_DatePickerLabel,
+    Control: DatePicker_DatePickerControl,
+    Field: DatePicker_DatePickerField,
+    RangeField: DatePicker_DatePickerRangeField,
+    Input: DatePicker_DatePickerInput,
+    Trigger: DatePicker_DatePickerTrigger,
+    ClearTrigger: DatePicker_DatePickerClearTrigger,
+    Positioner: DatePicker_DatePickerPositioner,
+    Content: DatePicker_DatePickerContent,
+    View: DatePicker_DatePickerView,
+    ViewControl: DatePicker_DatePickerViewControl,
+    PrevTrigger: DatePicker_DatePickerPrevTrigger,
+    NextTrigger: DatePicker_DatePickerNextTrigger,
+    ViewTrigger: DatePicker_DatePickerViewTrigger,
+    RangeText: DatePicker_DatePickerRangeText,
+    ValueText: DatePicker_DatePickerValueText,
+    Table: DatePicker_DatePickerTable,
+    TableHead: DatePicker_DatePickerTableHead,
+    TableBody: DatePicker_DatePickerTableBody,
+    TableRow: DatePicker_DatePickerTableRow,
+    TableHeader: DatePicker_DatePickerTableHeader,
+    TableCell: DatePicker_DatePickerTableCell,
+    TableCellTrigger: DatePicker_DatePickerTableCellTrigger,
+    DayTable: DatePicker_DatePickerDayTable,
+    WeekNumberHeaderCell: DatePicker_DatePickerWeekNumberHeaderCell,
+    WeekNumberCell: DatePicker_DatePickerWeekNumberCell,
+    MonthSelect: DatePicker_DatePickerMonthSelect,
+    YearSelect: DatePicker_DatePickerYearSelect,
+    PresetTrigger: DatePicker_DatePickerPresetTrigger
+});
+export { DatePicker_DatePicker as DatePicker, useDatePicker, useDatePickerContext };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker, useDatePicker, useDatePickerContext } from './DatePicker.js';
+export type { DatePickerDayTableProps, DatePickerFieldProps, DatePickerRangeFieldProps, DatePickerRootProps, DatePickerRootProviderProps, } from './DatePicker.js';

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

@@ -0,0 +1 @@
+export { DatePicker, useDatePicker, useDatePickerContext } from "./DatePicker.js";

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,25 @@
+import { Dialog as DialogPrimitive, useDialog, useDialogContext } from '@ark-ui/react/dialog';
+import type { ComponentProps } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type DialogRootProps = ComponentProps<typeof DialogPrimitive.Root> & OverlayPortalProps;
+type DialogRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
+declare function DialogRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DialogRootProps): import("react").JSX.Element;
+declare function DialogRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DialogRootProviderProps): import("react").JSX.Element;
+declare const Dialog: typeof DialogRoot & {
+    Root: typeof DialogRoot;
+    RootProvider: typeof DialogRootProvider;
+    Context: (props: DialogPrimitive.ContextProps) => import("react").ReactNode;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CloseTrigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Dialog, useDialog, useDialogContext };
+export type { DialogRootProps, DialogRootProviderProps };

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
+import { ark } from "@ark-ui/react/factory";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close dialog';
+function DialogRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.Root, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+}
+function DialogRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.RootProvider, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+}
+const Dialog_DialogTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "dialog-trigger",
+        className: cn(!asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
+        ...props
+    });
+});
+const Dialog_DialogBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
+            ref: ref,
+            "data-slot": "dialog-backdrop",
+            className: cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', className),
+            ...props
+        })
+    });
+});
+const Dialog_DialogPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Dialog.Positioner, {
+            ref: ref,
+            "data-slot": "dialog-positioner",
+            className: cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid [scrollbar-gutter:stable_both-edges] place-items-center overflow-y-auto overscroll-contain p-4', className),
+            ...props
+        })
+    });
+});
+const Dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Content, {
+        ref: ref,
+        "data-slot": "dialog-content",
+        className: cn("relative max-h-[calc(100dvh-2rem)] w-[min(28rem,calc(100vw-2rem))] max-w-full origin-top rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-0 transition-[scale,translate] duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-[''] data-[has-nested]:[translate:0_calc(2.5rem*var(--nested-layer-count,0))] data-[has-nested]:[scale:calc(1-0.05*var(--nested-layer-count,0))] data-[has-nested]:after:opacity-100 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none", className),
+        ...props
+    });
+});
+const Dialog_DialogTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Title, {
+        ref: ref,
+        "data-slot": "dialog-title",
+        className: cn('text-lg font-semibold text-popover-foreground', className),
+        ...props
+    });
+});
+const Dialog_DialogDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Description, {
+        ref: ref,
+        "data-slot": "dialog-description",
+        className: cn('text-md text-muted-foreground', className),
+        ...props
+    });
+});
+const Dialog_DialogCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "dialog-close-trigger",
+        className: cn(!asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
+        ...props
+    });
+});
+const Dialog_DialogCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        asChild: true,
+        ...props,
+        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+            ref: ref,
+            "data-slot": "dialog-close-icon",
+            "aria-label": ariaLabel,
+            className: cn('absolute end-4 top-4 z-2 size-7 rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-popover-foreground', className),
+            children: children
+        })
+    });
+});
+const Dialog_DialogHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "dialog-header",
+        className: cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='dialog-close-trigger']]:col-start-2 [&>[data-slot='dialog-close-trigger']]:justify-self-end [&>[data-slot='dialog-description']]:col-span-2 [&>[data-slot='dialog-title']]:col-start-1", className),
+        ...props
+    });
+});
+const Dialog_DialogBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "dialog-body",
+        className: cn('mt-4 text-md text-muted-foreground', className),
+        ...props
+    });
+});
+const Dialog_DialogFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "dialog-footer",
+        className: cn('mt-6 flex justify-end gap-2', className),
+        ...props
+    });
+});
+const Dialog_Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    RootProvider: DialogRootProvider,
+    Context: Dialog.Context,
+    Trigger: Dialog_DialogTrigger,
+    Backdrop: Dialog_DialogBackdrop,
+    Positioner: Dialog_DialogPositioner,
+    Content: Dialog_DialogContent,
+    Title: Dialog_DialogTitle,
+    Description: Dialog_DialogDescription,
+    CloseTrigger: Dialog_DialogCloseTrigger,
+    CloseIcon: Dialog_DialogCloseIcon,
+    Header: Dialog_DialogHeader,
+    Body: Dialog_DialogBody,
+    Footer: Dialog_DialogFooter
+});
+export { Dialog_Dialog as Dialog, useDialog, useDialogContext };

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

@@ -0,0 +1,2 @@
+export { Dialog, useDialog, useDialogContext } from './Dialog.js';
+export type { DialogRootProps, DialogRootProviderProps } from './Dialog.js';

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, useDialog, useDialogContext } from "./Dialog.js";