@moduix/solid-tailwind 1.0.0

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

@@ -0,0 +1,701 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { DatePicker, useDatePicker, useDatePickerContext } from "@ark-ui/solid/date-picker";
+import { useFieldContext } from "@ark-ui/solid/field";
+import { useFieldsetContext } from "@ark-ui/solid/fieldset";
+import { For, Show, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+function DatePickerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'disabled',
+        'invalid',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'readOnly',
+        'required',
+        'unmountOnExit'
+    ]);
+    const field = useFieldContext();
+    const fieldset = useFieldsetContext();
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(DatePicker.Root, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "date-picker-root",
+                get ["class"] () {
+                    return 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", local.class);
+                },
+                get disabled () {
+                    return local.disabled ?? field?.()?.disabled ?? fieldset?.()?.disabled;
+                },
+                get invalid () {
+                    return local.invalid ?? field?.()?.invalid ?? fieldset?.()?.invalid;
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get readOnly () {
+                    return local.readOnly ?? field?.()?.readOnly;
+                },
+                get required () {
+                    return local.required ?? field?.()?.required;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function DatePickerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(DatePicker.RootProvider, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "date-picker-root-provider",
+                get ["class"] () {
+                    return 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", local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function DatePickerLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.Label, mergeProps({
+        "data-slot": "date-picker-label",
+        get ["class"] () {
+            return cn('inline-flex items-center text-sm leading-5 font-medium text-foreground select-none', local.class);
+        }
+    }, others));
+}
+function DatePickerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.Control, mergeProps({
+        "data-slot": "date-picker-control",
+        get ["class"] () {
+            return cn('group/date-picker-control relative flex w-full min-w-0 items-center gap-2 text-foreground', local.class);
+        }
+    }, others));
+}
+function DatePickerField(props) {
+    const [local, others] = splitProps(props, [
+        'clearLabel',
+        'clearTriggerProps',
+        'inputProps',
+        'placeholder',
+        'triggerLabel',
+        'triggerProps'
+    ]);
+    return createComponent(DatePickerControl, mergeProps(others, {
+        get children () {
+            return [
+                createComponent(DatePickerInput, mergeProps({
+                    get placeholder () {
+                        return local.placeholder;
+                    }
+                }, ()=>local.inputProps ?? {}, {
+                    index: 0
+                })),
+                createComponent(DatePickerClearTrigger, mergeProps({
+                    get ["aria-label"] () {
+                        return local.clearLabel;
+                    }
+                }, ()=>local.clearTriggerProps ?? {})),
+                createComponent(DatePickerTrigger, mergeProps({
+                    get ["aria-label"] () {
+                        return local.triggerLabel;
+                    }
+                }, ()=>local.triggerProps ?? {}))
+            ];
+        }
+    }));
+}
+function DatePickerRangeField(props) {
+    const [local, others] = splitProps(props, [
+        'clearLabel',
+        'clearTriggerProps',
+        'endInputProps',
+        'endPlaceholder',
+        'startInputProps',
+        'startPlaceholder',
+        'triggerLabel',
+        'triggerProps'
+    ]);
+    return createComponent(DatePickerControl, mergeProps(others, {
+        get children () {
+            return [
+                createComponent(DatePickerInput, mergeProps({
+                    get placeholder () {
+                        return local.startPlaceholder;
+                    }
+                }, ()=>local.startInputProps ?? {}, {
+                    index: 0
+                })),
+                createComponent(DatePickerInput, mergeProps({
+                    get placeholder () {
+                        return local.endPlaceholder;
+                    }
+                }, ()=>local.endInputProps ?? {}, {
+                    index: 1
+                })),
+                createComponent(DatePickerClearTrigger, mergeProps({
+                    get ["aria-label"] () {
+                        return local.clearLabel;
+                    }
+                }, ()=>local.clearTriggerProps ?? {})),
+                createComponent(DatePickerTrigger, mergeProps({
+                    get ["aria-label"] () {
+                        return local.triggerLabel;
+                    }
+                }, ()=>local.triggerProps ?? {}))
+            ];
+        }
+    }));
+}
+function DatePickerInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.Input, mergeProps({
+        "data-slot": "date-picker-input",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function DatePickerTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(DatePicker.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "date-picker-trigger",
+        get ["class"] () {
+            return cn(!local.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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CalendarIcon, {});
+        }
+    }));
+}
+function DatePickerClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    if (local.asChild) return createComponent(DatePicker.ClearTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "data-slot": "date-picker-clear-trigger",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(DatePicker.ClearTrigger, mergeProps({
+        asChild: (triggerProps)=>{
+            const resolvedProps = triggerProps();
+            return createComponent(CloseButton.Root, mergeProps(resolvedProps, ()=>void 0 === local['aria-label'] ? {} : {
+                    'aria-label': local['aria-label']
+                }, ()=>void 0 === local['aria-labelledby'] ? {} : {
+                    'aria-labelledby': local['aria-labelledby']
+                }, {
+                get ["class"] () {
+                    return cn(resolvedProps.class, 'size-control-xs [&>svg]:size-4', local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }));
+        },
+        "data-slot": "date-picker-clear-trigger",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function DatePickerPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(DatePicker.Positioner, mergeProps({
+                "data-slot": "date-picker-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index)] outline-0', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function DatePickerContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.Content, mergeProps({
+        "data-slot": "date-picker-content",
+        get ["class"] () {
+            return 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]', local.class);
+        }
+    }, others));
+}
+function DatePickerView(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.View, mergeProps({
+        "data-slot": "date-picker-view",
+        get ["class"] () {
+            return cn('grid gap-3', local.class);
+        }
+    }, others));
+}
+function DatePickerViewControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.ViewControl, mergeProps({
+        "data-slot": "date-picker-view-control",
+        get ["class"] () {
+            return cn('flex min-w-0 items-center justify-between gap-2', local.class);
+        }
+    }, others));
+}
+function DatePickerPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(DatePicker.PrevTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "date-picker-prev-trigger",
+        get ["class"] () {
+            return cn(!local.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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronLeftIcon, {});
+        }
+    }));
+}
+function DatePickerNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(DatePicker.NextTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "date-picker-next-trigger",
+        get ["class"] () {
+            return cn(!local.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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronRightIcon, {});
+        }
+    }));
+}
+function DatePickerRangeText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.RangeText, mergeProps({
+        "data-slot": "date-picker-range-text",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+function DatePickerViewTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(DatePicker.ViewTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "date-picker-view-trigger",
+        get ["class"] () {
+            return cn(!local.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', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                createComponent(DatePickerRangeText, {}),
+                createComponent(ChevronDownIcon, {})
+            ];
+        }
+    }));
+}
+function DatePickerTable(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.Table, mergeProps({
+        "data-slot": "date-picker-table",
+        get ["class"] () {
+            return cn('w-full table-fixed border-separate border-spacing-0.5', local.class);
+        }
+    }, others));
+}
+function DatePickerTableHead(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.TableHead, mergeProps({
+        "data-slot": "date-picker-table-head",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others));
+}
+function DatePickerTableBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.TableBody, mergeProps({
+        "data-slot": "date-picker-table-body",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others));
+}
+function DatePickerTableRow(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.TableRow, mergeProps({
+        "data-slot": "date-picker-table-row",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others));
+}
+function DatePickerTableHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.TableHeader, mergeProps({
+        "data-slot": "date-picker-table-header",
+        get ["class"] () {
+            return cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function DatePickerWeekNumberHeaderCell(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.WeekNumberHeaderCell, mergeProps({
+        "data-slot": "date-picker-week-number-header-cell",
+        get ["class"] () {
+            return cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', local.class);
+        }
+    }, others));
+}
+function DatePickerWeekNumberCell(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.WeekNumberCell, mergeProps({
+        "data-slot": "date-picker-week-number-cell",
+        get ["class"] () {
+            return cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', local.class);
+        }
+    }, others));
+}
+function DatePickerTableCell(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.TableCell, mergeProps({
+        "data-slot": "date-picker-table-cell",
+        get ["class"] () {
+            return cn('h-control-sm w-control-sm p-0 text-center', local.class);
+        }
+    }, others));
+}
+function DatePickerTableCellTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.TableCellTrigger, mergeProps({
+        "data-slot": "date-picker-table-cell-trigger",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function DatePickerDayTable(props) {
+    const [local, others] = splitProps(props, [
+        'offset',
+        'showHeader',
+        'showWeekNumbers'
+    ]);
+    return createComponent(DatePicker.Context, {
+        children: (datePicker)=>[
+                createComponent(Show, {
+                    get when () {
+                        return local.showHeader ?? true;
+                    },
+                    get children () {
+                        return createComponent(DatePickerViewControl, {
+                            get children () {
+                                return [
+                                    createComponent(DatePickerPrevTrigger, {}),
+                                    createComponent(DatePickerViewTrigger, {}),
+                                    createComponent(DatePickerNextTrigger, {})
+                                ];
+                            }
+                        });
+                    }
+                }),
+                createComponent(DatePickerTable, mergeProps(others, {
+                    get children () {
+                        return [
+                            createComponent(DatePickerTableHead, {
+                                get children () {
+                                    return createComponent(DatePickerTableRow, {
+                                        get children () {
+                                            return [
+                                                createComponent(Show, {
+                                                    get when () {
+                                                        return local.showWeekNumbers ?? false;
+                                                    },
+                                                    get children () {
+                                                        return createComponent(DatePickerWeekNumberHeaderCell, {});
+                                                    }
+                                                }),
+                                                createComponent(For, {
+                                                    get each () {
+                                                        return datePicker().weekDays;
+                                                    },
+                                                    children: (weekDay)=>createComponent(DatePickerTableHeader, {
+                                                            get children () {
+                                                                return weekDay.short;
+                                                            }
+                                                        })
+                                                })
+                                            ];
+                                        }
+                                    });
+                                }
+                            }),
+                            createComponent(DatePickerTableBody, {
+                                get children () {
+                                    return createComponent(For, {
+                                        get each () {
+                                            return local.offset?.weeks ?? datePicker().weeks;
+                                        },
+                                        children: (week, weekIndex)=>createComponent(DatePickerTableRow, {
+                                                get children () {
+                                                    return [
+                                                        createComponent(Show, {
+                                                            get when () {
+                                                                return local.showWeekNumbers ?? false;
+                                                            },
+                                                            get children () {
+                                                                return createComponent(DatePickerWeekNumberCell, {
+                                                                    week: week,
+                                                                    get weekIndex () {
+                                                                        return weekIndex();
+                                                                    },
+                                                                    get children () {
+                                                                        return datePicker().getWeekNumber(week);
+                                                                    }
+                                                                });
+                                                            }
+                                                        }),
+                                                        createComponent(For, {
+                                                            each: week,
+                                                            children: (day)=>createComponent(DatePickerTableCell, {
+                                                                    value: day,
+                                                                    get visibleRange () {
+                                                                        return local.offset?.visibleRange;
+                                                                    },
+                                                                    get children () {
+                                                                        return createComponent(DatePickerTableCellTrigger, {
+                                                                            get children () {
+                                                                                return day.day;
+                                                                            }
+                                                                        });
+                                                                    }
+                                                                })
+                                                        })
+                                                    ];
+                                                }
+                                            })
+                                    });
+                                }
+                            })
+                        ];
+                    }
+                }))
+            ]
+    });
+}
+function DatePickerMonthSelect(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.MonthSelect, mergeProps({
+        "data-slot": "date-picker-month-select",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function DatePickerYearSelect(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.YearSelect, mergeProps({
+        "data-slot": "date-picker-year-select",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function DatePickerPresetTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(DatePicker.PresetTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "date-picker-preset-trigger",
+        get ["class"] () {
+            return cn(!local.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', local.class);
+        }
+    }, others));
+}
+function DatePickerValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DatePicker.ValueText, mergeProps({
+        "data-slot": "date-picker-value-text",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+const DatePicker_DatePicker = Object.assign(DatePickerRoot, {
+    Root: DatePickerRoot,
+    RootProvider: DatePickerRootProvider,
+    Context: DatePicker.Context,
+    Label: DatePickerLabel,
+    Control: DatePickerControl,
+    Field: DatePickerField,
+    RangeField: DatePickerRangeField,
+    Input: DatePickerInput,
+    Trigger: DatePickerTrigger,
+    ClearTrigger: DatePickerClearTrigger,
+    Positioner: DatePickerPositioner,
+    Content: DatePickerContent,
+    View: DatePickerView,
+    ViewControl: DatePickerViewControl,
+    PrevTrigger: DatePickerPrevTrigger,
+    NextTrigger: DatePickerNextTrigger,
+    ViewTrigger: DatePickerViewTrigger,
+    RangeText: DatePickerRangeText,
+    ValueText: DatePickerValueText,
+    Table: DatePickerTable,
+    TableHead: DatePickerTableHead,
+    TableBody: DatePickerTableBody,
+    TableRow: DatePickerTableRow,
+    TableHeader: DatePickerTableHeader,
+    TableCell: DatePickerTableCell,
+    TableCellTrigger: DatePickerTableCellTrigger,
+    DayTable: DatePickerDayTable,
+    WeekNumberHeaderCell: DatePickerWeekNumberHeaderCell,
+    WeekNumberCell: DatePickerWeekNumberCell,
+    MonthSelect: DatePickerMonthSelect,
+    YearSelect: DatePickerYearSelect,
+    PresetTrigger: DatePickerPresetTrigger
+});
+export { DatePicker_DatePicker as DatePicker, useDatePicker, useDatePickerContext };