@pathscale/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,264 @@
+import { createComponent, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+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, componentRecipe } from "./DateRangePicker.recipe.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 __solidLayoutDateRangePicker = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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 DateRangePicker = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDateRangePicker,
+    embedded: true
+});
+const DateRangePicker_generated = DateRangePicker;
+export default DateRangePicker_generated;

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

@@ -0,0 +1,48 @@
+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";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "date-range-picker";
+    readonly slots: {
+        readonly "date-range-picker": {};
+        readonly "date-range-picker-calendar": {};
+        readonly "date-range-picker-end": {};
+        readonly "date-range-picker-popover": {};
+        readonly "date-range-picker-range-separator": {};
+        readonly "date-range-picker-start": {};
+        readonly "date-range-picker-trigger": {};
+        readonly "date-range-picker-trigger-icon": {};
+        readonly "date-range-picker-trigger-indicator": {};
+        readonly root: {};
+    };
+}>;

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

@@ -0,0 +1,107 @@
+import { recipe } from "../../lib/layouts/index.js";
+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"
+    }
+};
+const componentRecipe = recipe({
+    component: "date-range-picker",
+    slots: {
+        "date-range-picker": {},
+        "date-range-picker-calendar": {},
+        "date-range-picker-end": {},
+        "date-range-picker-popover": {},
+        "date-range-picker-range-separator": {},
+        "date-range-picker-start": {},
+        "date-range-picker-trigger": {},
+        "date-range-picker-trigger-icon": {},
+        "date-range-picker-trigger-indicator": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "date-range-picker": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-calendar": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-end": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-popover": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-range-separator": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-start": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-trigger": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-trigger-icon": {
+                base: "",
+                axes: {}
+            },
+            "date-range-picker-trigger-indicator": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "date-range-picker": 0,
+            "date-range-picker-calendar": 1,
+            "date-range-picker-end": 2,
+            "date-range-picker-popover": 3,
+            "date-range-picker-range-separator": 4,
+            "date-range-picker-start": 5,
+            "date-range-picker-trigger": 6,
+            "date-range-picker-trigger-icon": 7,
+            "date-range-picker-trigger-indicator": 8,
+            root: 9
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default, type DateRangePickerProps, type DateRangeValue } from "./DateRangePicker";
+export { default, type DateRangePickerProps, type DateRangeValue } from "./DateRangePicker.generated";

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

@@ -1 +1 @@
-export { default } from "./DateRangePicker.js";
+export { default } from "./DateRangePicker.generated.js";

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

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

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

@@ -0,0 +1,47 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Description.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Description.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
+const __solidLayoutDescriptionRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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 DescriptionRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDescriptionRoot,
+    embedded: true
+});
+const Description = Object.assign(DescriptionRoot, {
+    Root: DescriptionRoot
+});
+const Description_generated = Description;
+export default Description_generated;
+export { Description, DescriptionRoot };

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

@@ -0,0 +1,10 @@
+export declare const CLASSES: {
+    readonly base: "description";
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "description";
+    readonly slots: {
+        readonly description: {};
+        readonly root: {};
+    };
+}>;

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

@@ -0,0 +1,29 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "description"
+};
+const componentRecipe = recipe({
+    component: "description",
+    slots: {
+        description: {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            description: {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            description: 0,
+            root: 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default, Description, DescriptionRoot, type DescriptionProps, type DescriptionRootProps, } from "./Description";
+export { default, Description, DescriptionRoot, type DescriptionProps, type DescriptionRootProps, } from "./Description.generated";

package/dist/components/description/index.js

@@ -1,3 +1 @@
-import { Description as external_Description_js_Description, DescriptionRoot } from "./Description.js";
-export default external_Description_js_Description;
-export { DescriptionRoot, external_Description_js_Description as Description };
+export { Description, DescriptionRoot, default } from "./Description.generated.js";

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

@@ -0,0 +1,46 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Disclosure.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type DisclosureRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    id?: string;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    isDisabled?: boolean;
+    disabled?: boolean;
+};
+export type DisclosureHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type DisclosureTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type DisclosureContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    keepMounted?: boolean;
+};
+export type DisclosureBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type DisclosureIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const DisclosureRoot: __LayoutComponent<DisclosureRootProps>;
+declare const DisclosureHeading: __LayoutComponent<DisclosureHeadingProps>;
+declare const DisclosureTrigger: __LayoutComponent<DisclosureTriggerProps>;
+declare const DisclosureContent: __LayoutComponent<DisclosureContentProps>;
+declare const DisclosureBody: __LayoutComponent<DisclosureBodyProps>;
+declare const DisclosureIndicator: __LayoutComponent<DisclosureIndicatorProps>;
+declare const Disclosure: __LayoutComponent<DisclosureRootProps> & {
+    Root: __LayoutComponent<DisclosureRootProps>;
+    Heading: __LayoutComponent<DisclosureHeadingProps>;
+    Trigger: __LayoutComponent<DisclosureTriggerProps>;
+    Content: __LayoutComponent<DisclosureContentProps>;
+    Body: __LayoutComponent<DisclosureBodyProps>;
+    Indicator: __LayoutComponent<DisclosureIndicatorProps>;
+};
+export default Disclosure;
+export { DisclosureRoot, DisclosureHeading, DisclosureTrigger, DisclosureContent, DisclosureBody, DisclosureIndicator, };
+export type { DisclosureRootProps as DisclosureProps };