@moduix/solid-tailwind 1.0.0

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

@@ -0,0 +1,359 @@
+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.jsx";
+import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+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 <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <DatePicker.Root asChild={local.asChild} data-slot="date-picker-root" class={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)} disabled={local.disabled ?? field?.()?.disabled ?? fieldset?.()?.disabled} invalid={local.invalid ?? field?.()?.invalid ?? fieldset?.()?.invalid} lazyMount={local.lazyMount ?? true} readOnly={local.readOnly ?? field?.()?.readOnly} required={local.required ?? field?.()?.required} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </DatePicker.Root>
+    </OverlayPortalProvider>;
+}
+function DatePickerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <DatePicker.RootProvider asChild={local.asChild} data-slot="date-picker-root-provider" class={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)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </DatePicker.RootProvider>
+    </OverlayPortalProvider>;
+}
+function DatePickerLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.Label data-slot="date-picker-label" class={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 <DatePicker.Control data-slot="date-picker-control" class={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 <DatePickerControl {...others}>
+      <DatePickerInput placeholder={local.placeholder} {...local.inputProps ?? {}} index={0}/>
+      <DatePickerClearTrigger aria-label={local.clearLabel} {...local.clearTriggerProps ?? {}}/>
+      <DatePickerTrigger aria-label={local.triggerLabel} {...local.triggerProps ?? {}}/>
+    </DatePickerControl>;
+}
+function DatePickerRangeField(props) {
+    const [local, others] = splitProps(props, [
+        'clearLabel',
+        'clearTriggerProps',
+        'endInputProps',
+        'endPlaceholder',
+        'startInputProps',
+        'startPlaceholder',
+        'triggerLabel',
+        'triggerProps'
+    ]);
+    return <DatePickerControl {...others}>
+      <DatePickerInput placeholder={local.startPlaceholder} {...local.startInputProps ?? {}} index={0}/>
+      <DatePickerInput placeholder={local.endPlaceholder} {...local.endInputProps ?? {}} index={1}/>
+      <DatePickerClearTrigger aria-label={local.clearLabel} {...local.clearTriggerProps ?? {}}/>
+      <DatePickerTrigger aria-label={local.triggerLabel} {...local.triggerProps ?? {}}/>
+    </DatePickerControl>;
+}
+function DatePickerInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.Input data-slot="date-picker-input" class={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 <DatePicker.Trigger asChild={local.asChild} data-slot="date-picker-trigger" class={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}>
+      {resolvedChildren() ?? <CalendarIcon/>}
+    </DatePicker.Trigger>;
+}
+function DatePickerClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    if (local.asChild) return <DatePicker.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="date-picker-clear-trigger" class={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}>
+        {local.children}
+      </DatePicker.ClearTrigger>;
+    return <DatePicker.ClearTrigger asChild={(triggerProps)=>{
+        const resolvedProps = triggerProps();
+        return <CloseButton.Root {...resolvedProps} {...void 0 === local['aria-label'] ? {} : {
+            'aria-label': local['aria-label']
+        }} {...void 0 === local['aria-labelledby'] ? {} : {
+            'aria-labelledby': local['aria-labelledby']
+        }} class={cn(resolvedProps.class, 'size-control-xs [&>svg]:size-4', local.class)}>
+            {resolvedChildren()}
+          </CloseButton.Root>;
+    }} data-slot="date-picker-clear-trigger" class={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 <OverlayPortal>
+      <DatePicker.Positioner data-slot="date-picker-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DatePickerContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.Content data-slot="date-picker-content" class={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 <DatePicker.View data-slot="date-picker-view" class={cn('grid gap-3', local.class)} {...others}/>;
+}
+function DatePickerViewControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.ViewControl data-slot="date-picker-view-control" class={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 <DatePicker.PrevTrigger asChild={local.asChild} data-slot="date-picker-prev-trigger" class={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}>
+      {resolvedChildren() ?? <ChevronLeftIcon/>}
+    </DatePicker.PrevTrigger>;
+}
+function DatePickerNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <DatePicker.NextTrigger asChild={local.asChild} data-slot="date-picker-next-trigger" class={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}>
+      {resolvedChildren() ?? <ChevronRightIcon/>}
+    </DatePicker.NextTrigger>;
+}
+function DatePickerRangeText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.RangeText data-slot="date-picker-range-text" class={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 <DatePicker.ViewTrigger asChild={local.asChild} data-slot="date-picker-view-trigger" class={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}>
+      {resolvedChildren() ?? <>
+          <DatePickerRangeText/>
+          <ChevronDownIcon/>
+        </>}
+    </DatePicker.ViewTrigger>;
+}
+function DatePickerTable(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.Table data-slot="date-picker-table" class={cn('w-full table-fixed border-separate border-spacing-0.5', local.class)} {...others}/>;
+}
+function DatePickerTableHead(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.TableHead data-slot="date-picker-table-head" class={local.class} {...others}/>;
+}
+function DatePickerTableBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.TableBody data-slot="date-picker-table-body" class={local.class} {...others}/>;
+}
+function DatePickerTableRow(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.TableRow data-slot="date-picker-table-row" class={local.class} {...others}/>;
+}
+function DatePickerTableHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.TableHeader data-slot="date-picker-table-header" class={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 <DatePicker.WeekNumberHeaderCell data-slot="date-picker-week-number-header-cell" class={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 <DatePicker.WeekNumberCell data-slot="date-picker-week-number-cell" class={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 <DatePicker.TableCell data-slot="date-picker-table-cell" class={cn('h-control-sm w-control-sm p-0 text-center', local.class)} {...others}/>;
+}
+function DatePickerTableCellTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.TableCellTrigger data-slot="date-picker-table-cell-trigger" class={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 <DatePicker.Context>
+      {(datePicker)=><>
+          <Show when={local.showHeader ?? true}>
+            <DatePickerViewControl>
+              <DatePickerPrevTrigger/>
+              <DatePickerViewTrigger/>
+              <DatePickerNextTrigger/>
+            </DatePickerViewControl>
+          </Show>
+          <DatePickerTable {...others}>
+            <DatePickerTableHead>
+              <DatePickerTableRow>
+                <Show when={local.showWeekNumbers ?? false}>
+                  <DatePickerWeekNumberHeaderCell/>
+                </Show>
+                <For each={datePicker().weekDays}>
+                  {(weekDay)=><DatePickerTableHeader>{weekDay.short}</DatePickerTableHeader>}
+                </For>
+              </DatePickerTableRow>
+            </DatePickerTableHead>
+            <DatePickerTableBody>
+              <For each={local.offset?.weeks ?? datePicker().weeks}>
+                {(week, weekIndex)=><DatePickerTableRow>
+                    <Show when={local.showWeekNumbers ?? false}>
+                      <DatePickerWeekNumberCell week={week} weekIndex={weekIndex()}>
+                        {datePicker().getWeekNumber(week)}
+                      </DatePickerWeekNumberCell>
+                    </Show>
+                    <For each={week}>
+                      {(day)=><DatePickerTableCell value={day} visibleRange={local.offset?.visibleRange}>
+                          <DatePickerTableCellTrigger>{day.day}</DatePickerTableCellTrigger>
+                        </DatePickerTableCell>}
+                    </For>
+                  </DatePickerTableRow>}
+              </For>
+            </DatePickerTableBody>
+          </DatePickerTable>
+        </>}
+    </DatePicker.Context>;
+}
+function DatePickerMonthSelect(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.MonthSelect data-slot="date-picker-month-select" class={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 <DatePicker.YearSelect data-slot="date-picker-year-select" class={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 <DatePicker.PresetTrigger asChild={local.asChild} data-slot="date-picker-preset-trigger" class={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 <DatePicker.ValueText data-slot="date-picker-value-text" class={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 };

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/date-picker/index.jsx

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

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

@@ -0,0 +1,38 @@
+import { Dialog as DialogPrimitive, useDialog, useDialogContext } from '@ark-ui/solid/dialog';
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type DialogRootProps = ComponentProps<typeof DialogPrimitive.Root> & OverlayPortalProps;
+type DialogRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
+type DialogCloseIconProps = Omit<ComponentProps<typeof DialogPrimitive.CloseTrigger>, 'asChild'>;
+declare function DialogRoot(props: DialogRootProps): import("solid-js").JSX.Element;
+declare function DialogRootProvider(props: DialogRootProviderProps): import("solid-js").JSX.Element;
+declare function DialogTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function DialogBackdrop(props: ComponentProps<typeof DialogPrimitive.Backdrop>): import("solid-js").JSX.Element;
+declare function DialogPositioner(props: ComponentProps<typeof DialogPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function DialogContent(props: ComponentProps<typeof DialogPrimitive.Content>): import("solid-js").JSX.Element;
+declare function DialogTitle(props: ComponentProps<typeof DialogPrimitive.Title>): import("solid-js").JSX.Element;
+declare function DialogDescription(props: ComponentProps<typeof DialogPrimitive.Description>): import("solid-js").JSX.Element;
+declare function DialogCloseTrigger(props: ComponentProps<typeof DialogPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+declare function DialogCloseIcon(props: DialogCloseIconProps): import("solid-js").JSX.Element;
+declare function DialogHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function DialogBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function DialogFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const Dialog: typeof DialogRoot & {
+    Root: typeof DialogRoot;
+    RootProvider: typeof DialogRootProvider;
+    Context: (props: DialogPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Trigger: typeof DialogTrigger;
+    Backdrop: typeof DialogBackdrop;
+    Positioner: typeof DialogPositioner;
+    Content: typeof DialogContent;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    CloseTrigger: typeof DialogCloseTrigger;
+    CloseIcon: typeof DialogCloseIcon;
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+export { Dialog, useDialog, useDialogContext };
+export type { DialogRootProps, DialogRootProviderProps };

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,239 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+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(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function DialogRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function DialogTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "dialog-trigger",
+        get ["class"] () {
+            return cn(!local.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', local.class);
+        }
+    }, others));
+}
+function DialogBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Backdrop, mergeProps({
+                "data-slot": "dialog-backdrop",
+                get ["class"] () {
+                    return 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', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function DialogPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Positioner, mergeProps({
+                "data-slot": "dialog-positioner",
+                get ["class"] () {
+                    return 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', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function DialogContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Content, mergeProps({
+        "data-slot": "dialog-content",
+        get ["class"] () {
+            return 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", local.class);
+        }
+    }, others));
+}
+function DialogTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Title, mergeProps({
+        "data-slot": "dialog-title",
+        get ["class"] () {
+            return cn('text-lg font-semibold text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function DialogDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Description, mergeProps({
+        "data-slot": "dialog-description",
+        get ["class"] () {
+            return cn('text-md text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function DialogCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "dialog-close-trigger",
+        get ["class"] () {
+            return cn(!local.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', local.class);
+        }
+    }, others));
+}
+function DialogCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Dialog.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "dialog-close-icon",
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL;
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return 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', local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function DialogHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "dialog-header",
+        get ["class"] () {
+            return 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", local.class);
+        }
+    }, others));
+}
+function DialogBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "dialog-body",
+        get ["class"] () {
+            return cn('mt-4 text-md text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function DialogFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "dialog-footer",
+        get ["class"] () {
+            return cn('mt-6 flex justify-end gap-2', local.class);
+        }
+    }, others));
+}
+const Dialog_Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    RootProvider: DialogRootProvider,
+    Context: Dialog.Context,
+    Trigger: DialogTrigger,
+    Backdrop: DialogBackdrop,
+    Positioner: DialogPositioner,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    CloseTrigger: DialogCloseTrigger,
+    CloseIcon: DialogCloseIcon,
+    Header: DialogHeader,
+    Body: DialogBody,
+    Footer: DialogFooter
+});
+export { Dialog_Dialog as Dialog, useDialog, useDialogContext };