@pathscale/ui 1.3.0 → 1.4.0

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

@@ -1,201 +0,0 @@
-import { createComponent, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import "./DatePicker.css";
-import { Show, createMemo, createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { formatDate, toISODate, useDateSelection, usePickerOpenState } from "../../hooks/date/index.js";
-import calendar from "../calendar/index.js";
-import { CLASSES } from "./DatePicker.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><button type=button><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10>");
-const DatePicker = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "ref",
-        "value",
-        "defaultValue",
-        "onChange",
-        "isOpen",
-        "defaultOpen",
-        "onOpenChange",
-        "name",
-        "placeholder",
-        "locale",
-        "weekdayFormat",
-        "minValue",
-        "maxValue",
-        "isDateUnavailable",
-        "isDisabled",
-        "disabled"
-    ]);
-    const isDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
-    const selection = useDateSelection({
-        value: ()=>local.value,
-        defaultValue: ()=>local.defaultValue,
-        onChange: ()=>local.onChange
-    });
-    const openState = usePickerOpenState({
-        isOpen: ()=>local.isOpen,
-        defaultOpen: ()=>local.defaultOpen,
-        onOpenChange: ()=>local.onOpenChange,
-        isDisabled
-    });
-    const locale = createMemo(()=>local.locale ?? "en-US");
-    const displayValue = createMemo(()=>{
-        const selectedDate = selection.selectedDate();
-        if (!selectedDate) return local.placeholder ?? "Select date";
-        return formatDate(selectedDate, locale());
-    });
-    const uniqueId = createUniqueId();
-    const popoverId = `date-picker-popover-${uniqueId}`;
-    const handleDateChange = (date)=>{
-        selection.setSelectedDate(date);
-        openState.setOpen(false);
-    };
-    return (()=>{
-        var _el$ = _tmpl$3(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild;
-        use((node)=>{
-            openState.setRootRef(node);
-            if ("function" == typeof local.ref) local.ref(node);
-        }, _el$);
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
-            }), {
-            "data-slot": "date-picker",
-            get ["data-open"] () {
-                return openState.isOpen() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : void 0;
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return local.name;
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                effect((_p$)=>{
-                    var _v$ = local.name, _v$2 = isDisabled();
-                    _v$ !== _p$.e && setAttribute(_el$2, "name", _p$.e = _v$);
-                    _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0
-                });
-                effect(()=>_el$2.value = toISODate(selection.selectedDate()));
-                return _el$2;
-            }
-        }), _el$3);
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.Trigger.base
-            }), {
-            "data-slot": "date-picker-trigger",
-            "aria-haspopup": "dialog",
-            get ["aria-expanded"] () {
-                return openState.isOpen() ? "true" : "false";
-            },
-            get ["aria-controls"] () {
-                return openState.isOpen() ? popoverId : void 0;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            onClick: ()=>openState.toggleOpen(),
-            onKeyDown: (event)=>{
-                if ("ArrowDown" === event.key || "Enter" === event.key || " " === event.key) {
-                    event.preventDefault();
-                    openState.setOpen(true);
-                }
-            }
-        }), false, true);
-        spread(_el$4, mergeProps(()=>({
-                class: twMerge(CLASSES.TriggerValue.base, !selection.selectedDate() && CLASSES.TriggerValue.flag.placeholder)
-            }), {
-            "data-slot": "date-picker-trigger-value"
-        }), false, true);
-        insert(_el$4, displayValue);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.TriggerIndicator.base
-            }), {
-            "data-slot": "date-picker-trigger-indicator",
-            "aria-hidden": "true"
-        }), false, true);
-        spread(_el$6, mergeProps(()=>({
-                class: CLASSES.TriggerIcon.base
-            }), {
-            "data-slot": "date-picker-trigger-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "aria-hidden": "true"
-        }), true, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return openState.isOpen();
-            },
-            get children () {
-                var _el$7 = _tmpl$2();
-                setAttribute(_el$7, "id", popoverId);
-                spread(_el$7, mergeProps(()=>({
-                        class: CLASSES.Popover.base
-                    }), {
-                    "data-slot": "date-picker-popover",
-                    role: "dialog",
-                    "aria-modal": "false"
-                }), false, true);
-                insert(_el$7, createComponent(calendar, mergeProps(()=>({
-                        class: CLASSES.Calendar.base
-                    }), {
-                    "data-slot": "date-picker-calendar",
-                    get value () {
-                        return selection.selectedDate() ?? void 0;
-                    },
-                    onChange: handleDateChange,
-                    get locale () {
-                        return locale();
-                    },
-                    get weekdayFormat () {
-                        return local.weekdayFormat;
-                    },
-                    get minValue () {
-                        return local.minValue;
-                    },
-                    get maxValue () {
-                        return local.maxValue;
-                    },
-                    get isDateUnavailable () {
-                        return local.isDateUnavailable;
-                    },
-                    get isDisabled () {
-                        return isDisabled();
-                    }
-                })));
-                return _el$7;
-            }
-        }), null);
-        return _el$;
-    })();
-};
-const date_picker_DatePicker = DatePicker;
-export default date_picker_DatePicker;

package/dist/components/date-range-picker/DateRangePicker.classes.d.ts

@@ -1,33 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "date-range-picker";
-        readonly flag: {
-            readonly open: "date-range-picker--open";
-            readonly disabled: "date-range-picker--disabled";
-        };
-    };
-    readonly Trigger: {
-        readonly base: "date-range-picker__trigger";
-    };
-    readonly TriggerSegment: {
-        readonly base: "date-range-picker__trigger-segment";
-        readonly flag: {
-            readonly placeholder: "date-range-picker__trigger-segment--placeholder";
-        };
-    };
-    readonly RangeSeparator: {
-        readonly base: "date-range-picker__range-separator";
-    };
-    readonly TriggerIndicator: {
-        readonly base: "date-range-picker__trigger-indicator";
-    };
-    readonly TriggerIcon: {
-        readonly base: "date-range-picker__trigger-icon";
-    };
-    readonly Popover: {
-        readonly base: "date-range-picker__popover";
-    };
-    readonly Calendar: {
-        readonly base: "date-range-picker__calendar";
-    };
-};

package/dist/components/date-range-picker/DateRangePicker.classes.js

@@ -1,34 +0,0 @@
-const CLASSES = {
-    Root: {
-        base: "date-range-picker",
-        flag: {
-            open: "date-range-picker--open",
-            disabled: "date-range-picker--disabled"
-        }
-    },
-    Trigger: {
-        base: "date-range-picker__trigger"
-    },
-    TriggerSegment: {
-        base: "date-range-picker__trigger-segment",
-        flag: {
-            placeholder: "date-range-picker__trigger-segment--placeholder"
-        }
-    },
-    RangeSeparator: {
-        base: "date-range-picker__range-separator"
-    },
-    TriggerIndicator: {
-        base: "date-range-picker__trigger-indicator"
-    },
-    TriggerIcon: {
-        base: "date-range-picker__trigger-icon"
-    },
-    Popover: {
-        base: "date-range-picker__popover"
-    },
-    Calendar: {
-        base: "date-range-picker__calendar"
-    }
-};
-export { CLASSES };

package/dist/components/date-range-picker/DateRangePicker.d.ts

@@ -1,28 +0,0 @@
-import "./DateRangePicker.css";
-import { type JSX } from "solid-js";
-import { type ControlledDateRangeValue } from "../../hooks/date";
-import { type CalendarWeekdayFormat } from "../calendar";
-import type { IComponentBaseProps } from "../types";
-export type DateRangeValue = ControlledDateRangeValue;
-type DateRangePickerBaseProps = {
-    value?: DateRangeValue;
-    defaultValue?: DateRangeValue;
-    onChange?: (value: DateRangeValue) => void;
-    isOpen?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
-    startName?: string;
-    endName?: string;
-    startPlaceholder?: string;
-    endPlaceholder?: string;
-    locale?: string;
-    weekdayFormat?: CalendarWeekdayFormat;
-    minValue?: Date;
-    maxValue?: Date;
-    isDateUnavailable?: (date: Date) => boolean;
-    isDisabled?: boolean;
-    disabled?: boolean;
-};
-export type DateRangePickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & DateRangePickerBaseProps;
-declare const DateRangePicker: (props: DateRangePickerProps) => JSX.Element;
-export default DateRangePicker;

package/dist/components/date-range-picker/DateRangePicker.js

@@ -1,258 +0,0 @@
-import { createComponent, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import "./DateRangePicker.css";
-import { Show, createEffect, createMemo, createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { formatDate, toISODate, usePickerOpenState, useRangeSelection } from "../../hooks/date/index.js";
-import calendar from "../calendar/index.js";
-import { CLASSES } from "./DateRangePicker.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><button type=button><span></span><span>-</span><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10>");
-const DateRangePicker = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "ref",
-        "value",
-        "defaultValue",
-        "onChange",
-        "isOpen",
-        "defaultOpen",
-        "onOpenChange",
-        "startName",
-        "endName",
-        "startPlaceholder",
-        "endPlaceholder",
-        "locale",
-        "weekdayFormat",
-        "minValue",
-        "maxValue",
-        "isDateUnavailable",
-        "isDisabled",
-        "disabled"
-    ]);
-    const isDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
-    const rangeSelection = useRangeSelection({
-        value: ()=>local.value,
-        defaultValue: ()=>local.defaultValue,
-        onChange: ()=>local.onChange
-    });
-    const openState = usePickerOpenState({
-        isOpen: ()=>local.isOpen,
-        defaultOpen: ()=>local.defaultOpen,
-        onOpenChange: ()=>local.onOpenChange,
-        isDisabled
-    });
-    createEffect(()=>{
-        if (openState.isOpen()) return;
-        rangeSelection.clearPendingSelection();
-    });
-    const locale = createMemo(()=>local.locale ?? "en-US");
-    const startValue = createMemo(()=>rangeSelection.rangeStart());
-    const endValue = createMemo(()=>rangeSelection.rangeEnd());
-    const focusDate = createMemo(()=>rangeSelection.focusDate());
-    const startDisplay = createMemo(()=>{
-        if (!startValue()) return local.startPlaceholder ?? "Start date";
-        return formatDate(startValue(), locale());
-    });
-    const endDisplay = createMemo(()=>{
-        if (!endValue()) return local.endPlaceholder ?? "End date";
-        return formatDate(endValue(), locale());
-    });
-    const handleDateSelect = (date)=>{
-        const wasSelectingEnd = rangeSelection.isSelectingEnd();
-        rangeSelection.selectDate(date);
-        if (wasSelectingEnd && !rangeSelection.isSelectingEnd()) openState.setOpen(false);
-    };
-    const uniqueId = createUniqueId();
-    const popoverId = `date-range-picker-popover-${uniqueId}`;
-    return (()=>{
-        var _el$ = _tmpl$3(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild;
-        use((node)=>{
-            openState.setRootRef(node);
-            if ("function" == typeof local.ref) local.ref(node);
-        }, _el$);
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
-            }), {
-            "data-slot": "date-range-picker",
-            get ["data-open"] () {
-                return openState.isOpen() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : void 0;
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return local.startName;
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                effect((_p$)=>{
-                    var _v$ = local.startName, _v$2 = isDisabled();
-                    _v$ !== _p$.e && setAttribute(_el$2, "name", _p$.e = _v$);
-                    _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0
-                });
-                effect(()=>_el$2.value = toISODate(startValue()));
-                return _el$2;
-            }
-        }), _el$4);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return local.endName;
-            },
-            get children () {
-                var _el$3 = _tmpl$();
-                effect((_p$)=>{
-                    var _v$3 = local.endName, _v$4 = isDisabled();
-                    _v$3 !== _p$.e && setAttribute(_el$3, "name", _p$.e = _v$3);
-                    _v$4 !== _p$.t && (_el$3.disabled = _p$.t = _v$4);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0
-                });
-                effect(()=>_el$3.value = toISODate(endValue()));
-                return _el$3;
-            }
-        }), _el$4);
-        spread(_el$4, mergeProps(()=>({
-                class: CLASSES.Trigger.base
-            }), {
-            "data-slot": "date-range-picker-trigger",
-            "aria-haspopup": "dialog",
-            get ["aria-expanded"] () {
-                return openState.isOpen() ? "true" : "false";
-            },
-            get ["aria-controls"] () {
-                return openState.isOpen() ? popoverId : void 0;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            onClick: ()=>openState.toggleOpen(),
-            onKeyDown: (event)=>{
-                if ("ArrowDown" === event.key || "Enter" === event.key || " " === event.key) {
-                    event.preventDefault();
-                    openState.setOpen(true);
-                }
-            }
-        }), false, true);
-        spread(_el$5, mergeProps(()=>({
-                class: twMerge(CLASSES.TriggerSegment.base, !startValue() && CLASSES.TriggerSegment.flag.placeholder)
-            }), {
-            "data-slot": "date-range-picker-start"
-        }), false, true);
-        insert(_el$5, startDisplay);
-        spread(_el$6, mergeProps(()=>({
-                class: CLASSES.RangeSeparator.base
-            }), {
-            "data-slot": "date-range-picker-range-separator",
-            "aria-hidden": "true"
-        }), false, true);
-        spread(_el$7, mergeProps(()=>({
-                class: twMerge(CLASSES.TriggerSegment.base, !endValue() && CLASSES.TriggerSegment.flag.placeholder)
-            }), {
-            "data-slot": "date-range-picker-end"
-        }), false, true);
-        insert(_el$7, endDisplay);
-        spread(_el$8, mergeProps(()=>({
-                class: CLASSES.TriggerIndicator.base
-            }), {
-            "data-slot": "date-range-picker-trigger-indicator",
-            "aria-hidden": "true"
-        }), false, true);
-        spread(_el$9, mergeProps(()=>({
-                class: CLASSES.TriggerIcon.base
-            }), {
-            "data-slot": "date-range-picker-trigger-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "aria-hidden": "true"
-        }), true, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return openState.isOpen();
-            },
-            get children () {
-                var _el$0 = _tmpl$2();
-                setAttribute(_el$0, "id", popoverId);
-                spread(_el$0, mergeProps(()=>({
-                        class: CLASSES.Popover.base
-                    }), {
-                    "data-slot": "date-range-picker-popover",
-                    role: "dialog",
-                    "aria-modal": "false"
-                }), false, true);
-                insert(_el$0, createComponent(calendar, mergeProps(()=>({
-                        class: CLASSES.Calendar.base
-                    }), {
-                    "data-slot": "date-range-picker-calendar",
-                    selectionMode: "range",
-                    get value () {
-                        return focusDate() ?? void 0;
-                    },
-                    get rangeStart () {
-                        return startValue() ?? void 0;
-                    },
-                    get rangeEnd () {
-                        return endValue() ?? void 0;
-                    },
-                    get rangePreview () {
-                        return rangeSelection.hoveredDate() ?? void 0;
-                    },
-                    onDaySelect: handleDateSelect,
-                    get onDayHover () {
-                        return rangeSelection.setHoverDate;
-                    },
-                    get locale () {
-                        return locale();
-                    },
-                    get weekdayFormat () {
-                        return local.weekdayFormat;
-                    },
-                    get minValue () {
-                        return local.minValue;
-                    },
-                    get maxValue () {
-                        return local.maxValue;
-                    },
-                    get isDateUnavailable () {
-                        return local.isDateUnavailable;
-                    },
-                    get isDisabled () {
-                        return isDisabled();
-                    }
-                })));
-                return _el$0;
-            }
-        }), null);
-        return _el$;
-    })();
-};
-const date_range_picker_DateRangePicker = DateRangePicker;
-export default date_range_picker_DateRangePicker;

package/dist/components/description/Description.classes.d.ts

@@ -1,3 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "description";
-};

package/dist/components/description/Description.classes.js

@@ -1,4 +0,0 @@
-const CLASSES = {
-    base: "description"
-};
-export { CLASSES };

package/dist/components/description/Description.d.ts

@@ -1,11 +0,0 @@
-import "./Description.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type DescriptionRootProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
-declare const DescriptionRoot: Component<DescriptionRootProps>;
-declare const Description: Component<DescriptionRootProps> & {
-    Root: Component<DescriptionRootProps>;
-};
-export default Description;
-export { Description, DescriptionRoot };
-export type { DescriptionRootProps as DescriptionProps };

package/dist/components/description/Description.js

@@ -1,41 +0,0 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
-import "./Description.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Description.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>");
-const DescriptionRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "slot"
-    ]);
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, local.class, local.className)
-            }), {
-            "data-slot": "description",
-            get slot () {
-                return local.slot ?? "description";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$, ()=>local.children);
-        return _el$;
-    })();
-};
-const Description = Object.assign(DescriptionRoot, {
-    Root: DescriptionRoot
-});
-const description_Description = Description;
-export default description_Description;
-export { Description, DescriptionRoot };

package/dist/components/disclosure/Disclosure.classes.d.ts

@@ -1,15 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "disclosure";
-    readonly slot: {
-        readonly heading: "disclosure__heading";
-        readonly trigger: "disclosure__trigger";
-        readonly indicator: "disclosure__indicator";
-        readonly content: "disclosure__content";
-        readonly body: "disclosure__body";
-        readonly bodyInner: "disclosure__body-inner";
-    };
-    readonly flag: {
-        readonly expanded: "disclosure--expanded";
-        readonly disabled: "disclosure--disabled";
-    };
-};

package/dist/components/disclosure/Disclosure.classes.js

@@ -1,16 +0,0 @@
-const CLASSES = {
-    base: "disclosure",
-    slot: {
-        heading: "disclosure__heading",
-        trigger: "disclosure__trigger",
-        indicator: "disclosure__indicator",
-        content: "disclosure__content",
-        body: "disclosure__body",
-        bodyInner: "disclosure__body-inner"
-    },
-    flag: {
-        expanded: "disclosure--expanded",
-        disabled: "disclosure--disabled"
-    }
-};
-export { CLASSES };