@moduix/solid 1.0.0

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

@@ -0,0 +1,696 @@
+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 { clsx } from "clsx";
+import { For, Show, children, splitProps } from "solid-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";
+import DatePicker_module from "./DatePicker.module.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 clsx(DatePicker_module.root, 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 clsx(DatePicker_module.root, 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 clsx(DatePicker_module.label, 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 clsx(DatePicker_module.control, 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 clsx(DatePicker_module.input, 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 clsx(!local.asChild && DatePicker_module.trigger, 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);
+    const triggerClass = clsx(DatePicker_module.clearTrigger, local.class);
+    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",
+        class: triggerClass
+    }, 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 children () {
+                    return resolvedChildren();
+                }
+            }));
+        },
+        "data-slot": "date-picker-clear-trigger",
+        class: triggerClass
+    }, 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 clsx(DatePicker_module.positioner, 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 clsx(DatePicker_module.content, 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 clsx(DatePicker_module.view, 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 clsx(DatePicker_module.viewControl, 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 clsx(!local.asChild && DatePicker_module.navTrigger, 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 clsx(!local.asChild && DatePicker_module.navTrigger, 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 clsx(DatePicker_module.rangeText, 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 clsx(!local.asChild && DatePicker_module.viewTrigger, 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 clsx(DatePicker_module.table, 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 clsx(DatePicker_module.tableHeader, 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 clsx(DatePicker_module.tableHeader, DatePicker_module.weekNumberCell, 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 clsx(DatePicker_module.weekNumberCell, 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 clsx(DatePicker_module.tableCell, 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 clsx(DatePicker_module.tableCellTrigger, 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 clsx(DatePicker_module.select, 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 clsx(DatePicker_module.select, 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 clsx(!local.asChild && DatePicker_module.presetTrigger, 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 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 };