@moduix/solid 1.0.0

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

@@ -0,0 +1,361 @@
+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 { clsx } from "clsx";
+import { For, Show, children, splitProps } from "solid-js";
+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";
+import DatePicker_module from "./DatePicker.module.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={clsx(DatePicker_module.root, 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={clsx(DatePicker_module.root, 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={clsx(DatePicker_module.label, local.class)} {...others}/>;
+}
+function DatePickerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.Control data-slot="date-picker-control" class={clsx(DatePicker_module.control, 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={clsx(DatePicker_module.input, 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={clsx(!local.asChild && DatePicker_module.trigger, 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);
+    const triggerClass = clsx(DatePicker_module.clearTrigger, local.class);
+    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={triggerClass} {...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']
+        }}>
+            {resolvedChildren()}
+          </CloseButton.Root>;
+    }} data-slot="date-picker-clear-trigger" class={triggerClass} {...others}/>;
+}
+function DatePickerPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <DatePicker.Positioner data-slot="date-picker-positioner" class={clsx(DatePicker_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DatePickerContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.Content data-slot="date-picker-content" class={clsx(DatePicker_module.content, local.class)} {...others}/>;
+}
+function DatePickerView(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.View data-slot="date-picker-view" class={clsx(DatePicker_module.view, local.class)} {...others}/>;
+}
+function DatePickerViewControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.ViewControl data-slot="date-picker-view-control" class={clsx(DatePicker_module.viewControl, 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={clsx(!local.asChild && DatePicker_module.navTrigger, 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={clsx(!local.asChild && DatePicker_module.navTrigger, 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={clsx(DatePicker_module.rangeText, 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={clsx(!local.asChild && DatePicker_module.viewTrigger, 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={clsx(DatePicker_module.table, 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={clsx(DatePicker_module.tableHeader, local.class)} {...others}/>;
+}
+function DatePickerWeekNumberHeaderCell(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.WeekNumberHeaderCell data-slot="date-picker-week-number-header-cell" class={clsx(DatePicker_module.tableHeader, DatePicker_module.weekNumberCell, local.class)} {...others}/>;
+}
+function DatePickerWeekNumberCell(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.WeekNumberCell data-slot="date-picker-week-number-cell" class={clsx(DatePicker_module.weekNumberCell, local.class)} {...others}/>;
+}
+function DatePickerTableCell(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.TableCell data-slot="date-picker-table-cell" class={clsx(DatePicker_module.tableCell, local.class)} {...others}/>;
+}
+function DatePickerTableCellTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.TableCellTrigger data-slot="date-picker-table-cell-trigger" class={clsx(DatePicker_module.tableCellTrigger, 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={clsx(DatePicker_module.select, local.class)} {...others}/>;
+}
+function DatePickerYearSelect(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.YearSelect data-slot="date-picker-year-select" class={clsx(DatePicker_module.select, 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={clsx(!local.asChild && DatePicker_module.presetTrigger, local.class)} {...others}/>;
+}
+function DatePickerValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DatePicker.ValueText data-slot="date-picker-value-text" class={clsx(DatePicker_module.valueText, 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/DatePicker.module.js

@@ -0,0 +1,29 @@
+import "./DatePicker_module.css";
+const DatePicker_module = {
+    root: "root-sgMq4I",
+    input: "input-c9DrcO",
+    label: "label-o8_6xd",
+    control: "control-pfUmnK",
+    trigger: "trigger-sqKYfh",
+    navTrigger: "navTrigger-XCWd0K",
+    viewTrigger: "viewTrigger-ZeOJgr",
+    presetTrigger: "presetTrigger-YJ0aqw",
+    clearTrigger: "clearTrigger-r6Q5II",
+    positioner: "positioner-Rgl_Ub",
+    content: "content-pUiIqD",
+    "date-picker-content-open": "date-picker-content-open-IVlv55",
+    datePickerContentOpen: "date-picker-content-open-IVlv55",
+    "date-picker-content-closed": "date-picker-content-closed-oMhGsI",
+    datePickerContentClosed: "date-picker-content-closed-oMhGsI",
+    view: "view-D55Ztu",
+    viewControl: "viewControl-YkZjuH",
+    rangeText: "rangeText-yRO9DD",
+    valueText: "valueText-fBFFP3",
+    table: "table-cZCoCG",
+    tableHeader: "tableHeader-gQxu5f",
+    weekNumberCell: "weekNumberCell-vJvbkS",
+    tableCell: "tableCell-B8xTKU",
+    tableCellTrigger: "tableCellTrigger-TqHrae",
+    select: "select-ntejqa"
+};
+export default DatePicker_module;

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

@@ -0,0 +1,29 @@
+import "./DatePicker_module.css";
+const DatePicker_module = {
+    root: "root-sgMq4I",
+    input: "input-c9DrcO",
+    label: "label-o8_6xd",
+    control: "control-pfUmnK",
+    trigger: "trigger-sqKYfh",
+    navTrigger: "navTrigger-XCWd0K",
+    viewTrigger: "viewTrigger-ZeOJgr",
+    presetTrigger: "presetTrigger-YJ0aqw",
+    clearTrigger: "clearTrigger-r6Q5II",
+    positioner: "positioner-Rgl_Ub",
+    content: "content-pUiIqD",
+    "date-picker-content-open": "date-picker-content-open-IVlv55",
+    datePickerContentOpen: "date-picker-content-open-IVlv55",
+    "date-picker-content-closed": "date-picker-content-closed-oMhGsI",
+    datePickerContentClosed: "date-picker-content-closed-oMhGsI",
+    view: "view-D55Ztu",
+    viewControl: "viewControl-YkZjuH",
+    rangeText: "rangeText-yRO9DD",
+    valueText: "valueText-fBFFP3",
+    table: "table-cZCoCG",
+    tableHeader: "tableHeader-gQxu5f",
+    weekNumberCell: "weekNumberCell-vJvbkS",
+    tableCell: "tableCell-B8xTKU",
+    tableCellTrigger: "tableCellTrigger-TqHrae",
+    select: "select-ntejqa"
+};
+export default DatePicker_module;