@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/radio-group/RadioGroup.generated.js

@@ -0,0 +1,165 @@
+import { createComponent, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./RadioGroup.css";
+import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { RadioGroupContext } from "./context.js";
+import { CLASSES, componentRecipe } from "./RadioGroup.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>");
+const __solidLayoutRadioGroup = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "value",
+        "defaultValue",
+        "onChange",
+        "name",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "orientation",
+        "variant",
+        "label",
+        "description",
+        "errorMessage",
+        "dataTheme",
+        "aria-describedby",
+        "aria-labelledby"
+    ]);
+    const baseId = createUniqueId();
+    const generatedName = `${baseId}-radio-group`;
+    const [internalValue, setInternalValue] = createSignal(local.defaultValue);
+    const labelId = `${baseId}-label`;
+    const descriptionId = `${baseId}-description`;
+    const errorId = `${baseId}-error`;
+    const orientation = ()=>local.orientation ?? "vertical";
+    const variant = ()=>local.variant ?? "primary";
+    const isControlled = ()=>void 0 !== local.value;
+    const selectedValue = ()=>isControlled() ? local.value : internalValue();
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const name = ()=>local.name ?? generatedName;
+    const handleChange = (nextValue)=>{
+        if (nextValue === selectedValue()) return;
+        if (!isControlled()) setInternalValue(nextValue);
+        local.onChange?.(nextValue);
+    };
+    const describedBy = ()=>{
+        const ids = [
+            local["aria-describedby"]
+        ];
+        if (local.description) ids.push(descriptionId);
+        if (local.errorMessage) ids.push(errorId);
+        return ids.filter(Boolean).join(" ") || void 0;
+    };
+    const labelledBy = ()=>local["aria-labelledby"] ?? (local.label ? labelId : void 0);
+    const contextValue = {
+        name,
+        value: selectedValue,
+        isDisabled,
+        isInvalid,
+        selectValue: (value, event)=>{
+            if (isDisabled() || event.defaultPrevented) return;
+            handleChange(value);
+        }
+    };
+    return createComponent(RadioGroupContext.Provider, {
+        value: contextValue,
+        get children () {
+            var _el$ = _tmpl$2(), _el$4 = _el$.firstChild;
+            spread(_el$, mergeProps(others, {
+                role: "radiogroup",
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["aria-labelledby"] () {
+                    return labelledBy();
+                },
+                get ["aria-describedby"] () {
+                    return describedBy();
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "radio-group",
+                get ["data-orientation"] () {
+                    return orientation();
+                },
+                get ["data-variant"] () {
+                    return variant();
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : "false";
+                }
+            }, ()=>({
+                    class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class, local.className)
+                })), false, true);
+            insert(_el$, createComponent(Show, {
+                get when () {
+                    return local.label;
+                },
+                get children () {
+                    var _el$2 = _tmpl$();
+                    setAttribute(_el$2, "id", labelId);
+                    spread(_el$2, mergeProps(()=>({
+                            class: CLASSES.slot.label
+                        }), {
+                        "data-slot": "label"
+                    }), false, true);
+                    insert(_el$2, ()=>local.label);
+                    return _el$2;
+                }
+            }), _el$4);
+            insert(_el$, createComponent(Show, {
+                get when () {
+                    return local.description;
+                },
+                get children () {
+                    var _el$3 = _tmpl$();
+                    setAttribute(_el$3, "id", descriptionId);
+                    spread(_el$3, mergeProps(()=>({
+                            class: CLASSES.slot.description
+                        }), {
+                        "data-slot": "description"
+                    }), false, true);
+                    insert(_el$3, ()=>local.description);
+                    return _el$3;
+                }
+            }), _el$4);
+            spread(_el$4, mergeProps(()=>({
+                    class: CLASSES.slot.items
+                }), {
+                "data-slot": "radio-group-items"
+            }), false, true);
+            insert(_el$4, ()=>local.children);
+            insert(_el$, createComponent(Show, {
+                get when () {
+                    return local.errorMessage;
+                },
+                get children () {
+                    var _el$5 = _tmpl$();
+                    setAttribute(_el$5, "id", errorId);
+                    spread(_el$5, mergeProps(()=>({
+                            class: CLASSES.slot.error
+                        }), {
+                        "data-slot": "error-message"
+                    }), false, true);
+                    insert(_el$5, ()=>local.errorMessage);
+                    return _el$5;
+                }
+            }), null);
+            return _el$;
+        }
+    });
+};
+const RadioGroup = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutRadioGroup,
+    embedded: true
+});
+const RadioGroup_generated = RadioGroup;
+export default RadioGroup_generated;

package/dist/components/radio-group/RadioGroup.recipe.d.ts

@@ -0,0 +1,32 @@
+export declare const CLASSES: {
+    readonly base: "radio-group";
+    readonly slot: {
+        readonly label: "radio-group__label";
+        readonly description: "radio-group__description";
+        readonly error: "radio-group__error";
+        readonly items: "radio-group__items";
+    };
+    readonly orientation: {
+        readonly vertical: "radio-group--vertical";
+        readonly horizontal: "radio-group--horizontal";
+    };
+    readonly variant: {
+        readonly primary: "radio-group--primary";
+        readonly secondary: "radio-group--secondary";
+    };
+    readonly flag: {
+        readonly disabled: "radio-group--disabled";
+        readonly invalid: "radio-group--invalid";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "radio-group";
+    readonly slots: {
+        readonly description: {};
+        readonly "error-message": {};
+        readonly label: {};
+        readonly "radio-group": {};
+        readonly "radio-group-items": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/radio-group/RadioGroup.recipe.js

@@ -0,0 +1,71 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "radio-group",
+    slot: {
+        label: "radio-group__label",
+        description: "radio-group__description",
+        error: "radio-group__error",
+        items: "radio-group__items"
+    },
+    orientation: {
+        vertical: "radio-group--vertical",
+        horizontal: "radio-group--horizontal"
+    },
+    variant: {
+        primary: "radio-group--primary",
+        secondary: "radio-group--secondary"
+    },
+    flag: {
+        disabled: "radio-group--disabled",
+        invalid: "radio-group--invalid"
+    }
+};
+const componentRecipe = recipe({
+    component: "radio-group",
+    slots: {
+        description: {},
+        "error-message": {},
+        label: {},
+        "radio-group": {},
+        "radio-group-items": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            description: {
+                base: "",
+                axes: {}
+            },
+            "error-message": {
+                base: "",
+                axes: {}
+            },
+            label: {
+                base: "",
+                axes: {}
+            },
+            "radio-group": {
+                base: "",
+                axes: {}
+            },
+            "radio-group-items": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            description: 0,
+            "error-message": 1,
+            label: 2,
+            "radio-group": 3,
+            "radio-group-items": 4,
+            root: 5
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/radio-group/index.d.ts

@@ -1,4 +1,4 @@
-import RadioGroup from "./RadioGroup";
-export type { RadioGroupProps, RadioGroupOrientation, RadioGroupVariant } from "./RadioGroup";
+import RadioGroup from "./RadioGroup.generated";
+export type { RadioGroupProps, RadioGroupOrientation, RadioGroupVariant } from "./RadioGroup.generated";
 export { RadioGroup };
 export default RadioGroup;

package/dist/components/radio-group/index.js

@@ -1,4 +1,4 @@
-import RadioGroup from "./RadioGroup.js";
-const radio_group = RadioGroup;
+import RadioGroup_generated from "./RadioGroup.generated.js";
+const radio_group = RadioGroup_generated;
 export default radio_group;
-export { RadioGroup };
+export { RadioGroup_generated as RadioGroup };

package/dist/components/range-calendar/RangeCalendar.generated.d.ts

@@ -0,0 +1,25 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./RangeCalendar.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 RangeCalendarValue = ControlledDateRangeValue;
+type RangeCalendarBaseProps = {
+    value?: RangeCalendarValue;
+    defaultValue?: RangeCalendarValue;
+    onChange?: (value: RangeCalendarValue) => void;
+    locale?: string;
+    weekdayFormat?: CalendarWeekdayFormat;
+    minValue?: Date;
+    maxValue?: Date;
+    isDateUnavailable?: (date: Date) => boolean;
+    showOutsideDays?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    onDaySelect?: (date: Date) => void;
+    onDayHover?: (date?: Date) => void;
+};
+export type RangeCalendarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & RangeCalendarBaseProps;
+declare const RangeCalendar: __LayoutComponent<RangeCalendarProps>;
+export default RangeCalendar;

package/dist/components/range-calendar/RangeCalendar.generated.js

@@ -0,0 +1,116 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./RangeCalendar.css";
+import { createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { useRangeSelection } from "../../hooks/date/index.js";
+import calendar from "../calendar/index.js";
+import { CLASSES, componentRecipe } from "./RangeCalendar.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutRangeCalendar = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "ref",
+        "value",
+        "defaultValue",
+        "onChange",
+        "locale",
+        "weekdayFormat",
+        "minValue",
+        "maxValue",
+        "isDateUnavailable",
+        "showOutsideDays",
+        "isDisabled",
+        "disabled",
+        "onDaySelect",
+        "onDayHover"
+    ]);
+    const isDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
+    const rangeSelection = useRangeSelection({
+        value: ()=>local.value,
+        defaultValue: ()=>local.defaultValue,
+        onChange: ()=>local.onChange
+    });
+    const handleDaySelect = (date)=>{
+        local.onDaySelect?.(date);
+        rangeSelection.selectDate(date);
+    };
+    const handleDayHover = (date)=>{
+        local.onDayHover?.(date);
+        rangeSelection.setHoverDate(date);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        use((node)=>{
+            if ("function" == typeof local.ref) local.ref(node);
+        }, _el$);
+        spread(_el$, mergeProps(others, {
+            "data-slot": "range-calendar",
+            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;
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.Root.base, isDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
+            })), false, true);
+        insert(_el$, createComponent(calendar, mergeProps(()=>({
+                class: CLASSES.Calendar.base
+            }), {
+            selectionMode: "range",
+            get value () {
+                return rangeSelection.focusDate() ?? void 0;
+            },
+            get rangeStart () {
+                return rangeSelection.rangeStart() ?? void 0;
+            },
+            get rangeEnd () {
+                return rangeSelection.rangeEnd() ?? void 0;
+            },
+            get rangePreview () {
+                return rangeSelection.hoveredDate() ?? void 0;
+            },
+            get locale () {
+                return local.locale;
+            },
+            get weekdayFormat () {
+                return local.weekdayFormat;
+            },
+            get minValue () {
+                return local.minValue;
+            },
+            get maxValue () {
+                return local.maxValue;
+            },
+            get isDateUnavailable () {
+                return local.isDateUnavailable;
+            },
+            get showOutsideDays () {
+                return local.showOutsideDays;
+            },
+            get isDisabled () {
+                return isDisabled();
+            },
+            onDaySelect: handleDaySelect,
+            onDayHover: handleDayHover
+        })));
+        return _el$;
+    })();
+};
+const RangeCalendar = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutRangeCalendar,
+    embedded: true
+});
+const RangeCalendar_generated = RangeCalendar;
+export default RangeCalendar_generated;

package/dist/components/range-calendar/RangeCalendar.recipe.d.ts

@@ -0,0 +1,18 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "range-calendar";
+        readonly flag: {
+            readonly disabled: "range-calendar--disabled";
+        };
+    };
+    readonly Calendar: {
+        readonly base: "range-calendar__calendar";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "range-calendar";
+    readonly slots: {
+        readonly "range-calendar": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/range-calendar/RangeCalendar.recipe.js

@@ -0,0 +1,37 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "range-calendar",
+        flag: {
+            disabled: "range-calendar--disabled"
+        }
+    },
+    Calendar: {
+        base: "range-calendar__calendar"
+    }
+};
+const componentRecipe = recipe({
+    component: "range-calendar",
+    slots: {
+        "range-calendar": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "range-calendar": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "range-calendar": 0,
+            root: 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/range-calendar/index.d.ts

@@ -1 +1 @@
-export { default, type RangeCalendarProps, type RangeCalendarValue, } from "./RangeCalendar";
+export { default, type RangeCalendarProps, type RangeCalendarValue, } from "./RangeCalendar.generated";

package/dist/components/range-calendar/index.js

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

package/dist/components/scroll-shadow/ScrollShadow.generated.d.ts

@@ -0,0 +1,19 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ScrollShadow.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ScrollShadowVisibility = "auto" | "both" | "top" | "bottom" | "left" | "right" | "none";
+export type ScrollShadowOrientation = "vertical" | "horizontal";
+export type ScrollShadowVariant = "fade";
+export type ScrollShadowProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "size"> & {
+    size?: number;
+    offset?: number;
+    visibility?: ScrollShadowVisibility;
+    isEnabled?: boolean;
+    orientation?: ScrollShadowOrientation;
+    variant?: ScrollShadowVariant;
+    hideScrollBar?: boolean;
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+};
+declare const ScrollShadow: __LayoutComponent<ScrollShadowProps>;
+export default ScrollShadow;

package/dist/components/scroll-shadow/ScrollShadow.generated.js

@@ -0,0 +1,93 @@
+import { insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./ScrollShadow.css";
+import { createEffect, createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./ScrollShadow.recipe.js";
+import { applyControlledScrollShadowVisibility, clearScrollShadowDataAttributes, useScrollShadow } from "./useScrollShadow.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutScrollShadow = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "size",
+        "offset",
+        "visibility",
+        "isEnabled",
+        "orientation",
+        "variant",
+        "hideScrollBar",
+        "onVisibilityChange",
+        "ref"
+    ]);
+    let containerRef;
+    const size = ()=>local.size ?? 40;
+    const offset = ()=>local.offset ?? 0;
+    const variant = ()=>local.variant ?? "fade";
+    const visibility = ()=>local.visibility ?? "auto";
+    const orientation = ()=>local.orientation ?? "vertical";
+    const isEnabled = ()=>local.isEnabled ?? true;
+    useScrollShadow({
+        containerRef: ()=>containerRef,
+        orientation,
+        offset,
+        visibility,
+        isEnabled,
+        onVisibilityChange: ()=>local.onVisibilityChange
+    });
+    createEffect(()=>{
+        const el = containerRef;
+        if (!el) return;
+        if (!isEnabled()) return void clearScrollShadowDataAttributes(el);
+        const currentVisibility = visibility();
+        if ("auto" === currentVisibility) return;
+        applyControlledScrollShadowVisibility(el, currentVisibility, orientation());
+    });
+    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], local.hideScrollBar && CLASSES.flag.hideScrollBar, local.class, local.className));
+    const style = createMemo(()=>{
+        if ("string" == typeof local.style) {
+            const trimmed = local.style.trim();
+            const suffix = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
+            return `${trimmed}${suffix} --scroll-shadow-size: ${size()}px;`;
+        }
+        return {
+            ...local.style ?? {},
+            "--scroll-shadow-size": `${size()}px`
+        };
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        use((el)=>{
+            containerRef = el;
+            if ("function" == typeof local.ref) local.ref(el);
+        }, _el$);
+        spread(_el$, mergeProps(others, ()=>({
+                class: classes()
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["data-orientation"] () {
+                return orientation();
+            },
+            get ["data-scroll-shadow-size"] () {
+                return size();
+            },
+            get style () {
+                return style();
+            }
+        }), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const ScrollShadow = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutScrollShadow,
+    embedded: true
+});
+const ScrollShadow_generated = ScrollShadow;
+export default ScrollShadow_generated;

package/dist/components/scroll-shadow/ScrollShadow.recipe.d.ts

@@ -0,0 +1,19 @@
+export declare const CLASSES: {
+    readonly base: "scroll-shadow";
+    readonly orientation: {
+        readonly vertical: "scroll-shadow--vertical";
+        readonly horizontal: "scroll-shadow--horizontal";
+    };
+    readonly variant: {
+        readonly fade: "scroll-shadow--fade";
+    };
+    readonly flag: {
+        readonly hideScrollBar: "scroll-shadow--hide-scrollbar";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "scroll-shadow";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/scroll-shadow/ScrollShadow.recipe.js

@@ -0,0 +1,33 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "scroll-shadow",
+    orientation: {
+        vertical: "scroll-shadow--vertical",
+        horizontal: "scroll-shadow--horizontal"
+    },
+    variant: {
+        fade: "scroll-shadow--fade"
+    },
+    flag: {
+        hideScrollBar: "scroll-shadow--hide-scrollbar"
+    }
+};
+const componentRecipe = recipe({
+    component: "scroll-shadow",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/scroll-shadow/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./ScrollShadow";
-export type { ScrollShadowProps, ScrollShadowVisibility, ScrollShadowOrientation, ScrollShadowVariant, } from "./ScrollShadow";
+export { default } from "./ScrollShadow.generated";
+export type { ScrollShadowProps, ScrollShadowVisibility, ScrollShadowOrientation, ScrollShadowVariant, } from "./ScrollShadow.generated";

package/dist/components/scroll-shadow/index.js

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

package/dist/components/scroll-shadow/useScrollShadow.d.ts

@@ -1,5 +1,5 @@
 import { type Accessor } from "solid-js";
-import type { ScrollShadowOrientation, ScrollShadowVisibility } from "./ScrollShadow";
+import type { ScrollShadowOrientation, ScrollShadowVisibility } from "./ScrollShadow.generated";
 export interface UseScrollShadowProps {
     containerRef: Accessor<HTMLElement | undefined>;
     orientation: Accessor<ScrollShadowOrientation>;