@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/toast/Toast.recipe.d.ts

@@ -0,0 +1,83 @@
+export declare const CLASSES: {
+    readonly Provider: {
+        readonly base: "toast-region";
+        readonly stack: "toast-region__stack";
+        readonly item: {
+            readonly base: "toast-region__item";
+            readonly placement: {
+                readonly bottom: "toast-region__item--bottom";
+                readonly bottomStart: "toast-region__item--bottom-start";
+                readonly bottomEnd: "toast-region__item--bottom-end";
+                readonly top: "toast-region__item--top";
+                readonly topStart: "toast-region__item--top-start";
+                readonly topEnd: "toast-region__item--top-end";
+            };
+            readonly state: {
+                readonly hidden: "toast-region__item--hidden";
+            };
+        };
+        readonly placement: {
+            readonly bottom: "toast-region--bottom";
+            readonly bottomStart: "toast-region--bottom-start";
+            readonly bottomEnd: "toast-region--bottom-end";
+            readonly top: "toast-region--top";
+            readonly topStart: "toast-region--top-start";
+            readonly topEnd: "toast-region--top-end";
+        };
+    };
+    readonly Item: {
+        readonly base: "toast";
+        readonly variant: {
+            readonly default: "toast--default";
+            readonly accent: "toast--accent";
+            readonly success: "toast--success";
+            readonly warning: "toast--warning";
+            readonly danger: "toast--danger";
+        };
+        readonly state: {
+            readonly frontmost: "toast--frontmost";
+            readonly hidden: "toast--hidden";
+            readonly entering: "toast--entering";
+            readonly exiting: "toast--exiting";
+        };
+    };
+    readonly Content: {
+        readonly base: "toast__content";
+    };
+    readonly Indicator: {
+        readonly base: "toast__indicator";
+        readonly icon: "toast__icon";
+    };
+    readonly Spinner: {
+        readonly base: "toast__spinner";
+    };
+    readonly Title: {
+        readonly base: "toast__title";
+    };
+    readonly Description: {
+        readonly base: "toast__description";
+    };
+    readonly Action: {
+        readonly base: "toast__action";
+    };
+    readonly Close: {
+        readonly base: "toast__close";
+        readonly icon: "toast__close-icon";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "toast";
+    readonly slots: {
+        readonly root: {};
+        readonly toast: {};
+        readonly "toast-action": {};
+        readonly "toast-close": {};
+        readonly "toast-content": {};
+        readonly "toast-description": {};
+        readonly "toast-indicator": {};
+        readonly "toast-region": {};
+        readonly "toast-region-item": {};
+        readonly "toast-stack": {};
+        readonly "toast-title": {};
+    };
+}>;

package/dist/components/toast/Toast.recipe.js

@@ -0,0 +1,147 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Provider: {
+        base: "toast-region",
+        stack: "toast-region__stack",
+        item: {
+            base: "toast-region__item",
+            placement: {
+                bottom: "toast-region__item--bottom",
+                bottomStart: "toast-region__item--bottom-start",
+                bottomEnd: "toast-region__item--bottom-end",
+                top: "toast-region__item--top",
+                topStart: "toast-region__item--top-start",
+                topEnd: "toast-region__item--top-end"
+            },
+            state: {
+                hidden: "toast-region__item--hidden"
+            }
+        },
+        placement: {
+            bottom: "toast-region--bottom",
+            bottomStart: "toast-region--bottom-start",
+            bottomEnd: "toast-region--bottom-end",
+            top: "toast-region--top",
+            topStart: "toast-region--top-start",
+            topEnd: "toast-region--top-end"
+        }
+    },
+    Item: {
+        base: "toast",
+        variant: {
+            default: "toast--default",
+            accent: "toast--accent",
+            success: "toast--success",
+            warning: "toast--warning",
+            danger: "toast--danger"
+        },
+        state: {
+            frontmost: "toast--frontmost",
+            hidden: "toast--hidden",
+            entering: "toast--entering",
+            exiting: "toast--exiting"
+        }
+    },
+    Content: {
+        base: "toast__content"
+    },
+    Indicator: {
+        base: "toast__indicator",
+        icon: "toast__icon"
+    },
+    Spinner: {
+        base: "toast__spinner"
+    },
+    Title: {
+        base: "toast__title"
+    },
+    Description: {
+        base: "toast__description"
+    },
+    Action: {
+        base: "toast__action"
+    },
+    Close: {
+        base: "toast__close",
+        icon: "toast__close-icon"
+    }
+};
+const componentRecipe = recipe({
+    component: "toast",
+    slots: {
+        root: {},
+        toast: {},
+        "toast-action": {},
+        "toast-close": {},
+        "toast-content": {},
+        "toast-description": {},
+        "toast-indicator": {},
+        "toast-region": {},
+        "toast-region-item": {},
+        "toast-stack": {},
+        "toast-title": {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            },
+            toast: {
+                base: "",
+                axes: {}
+            },
+            "toast-action": {
+                base: "",
+                axes: {}
+            },
+            "toast-close": {
+                base: "",
+                axes: {}
+            },
+            "toast-content": {
+                base: "",
+                axes: {}
+            },
+            "toast-description": {
+                base: "",
+                axes: {}
+            },
+            "toast-indicator": {
+                base: "",
+                axes: {}
+            },
+            "toast-region": {
+                base: "",
+                axes: {}
+            },
+            "toast-region-item": {
+                base: "",
+                axes: {}
+            },
+            "toast-stack": {
+                base: "",
+                axes: {}
+            },
+            "toast-title": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0,
+            toast: 1,
+            "toast-action": 2,
+            "toast-close": 3,
+            "toast-content": 4,
+            "toast-description": 5,
+            "toast-indicator": 6,
+            "toast-region": 7,
+            "toast-region-item": 8,
+            "toast-stack": 9,
+            "toast-title": 10
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default, ToastRoot, ToastProvider, ToastContent, ToastIndicator, ToastTitle, ToastDescription, ToastActionButton, ToastCloseButton, ToastQueue, toast, toastQueue, DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, type ToastPlacement, type ToastVariant, type ToastActionProps, type ToastContentValue, type ToastQueueAddOptions, type ToastQueueItem, type ToastQueueOptions, type ToastRenderFn, type ToastRootProps, type ToastProviderProps, type ToastContentProps, type ToastIndicatorProps, type ToastTitleProps, type ToastDescriptionProps, type ToastActionButtonProps, type ToastCloseButtonProps, type HeroUIToastOptions, type ToastPromiseOptions, type ToastFunction, } from "./Toast";
+export { default, ToastRoot, ToastProvider, ToastContent, ToastIndicator, ToastTitle, ToastDescription, ToastActionButton, ToastCloseButton, ToastQueue, toast, toastQueue, DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, type ToastPlacement, type ToastVariant, type ToastActionProps, type ToastContentValue, type ToastQueueAddOptions, type ToastQueueItem, type ToastQueueOptions, type ToastRenderFn, type ToastRootProps, type ToastProviderProps, type ToastContentProps, type ToastIndicatorProps, type ToastTitleProps, type ToastDescriptionProps, type ToastActionButtonProps, type ToastCloseButtonProps, type HeroUIToastOptions, type ToastPromiseOptions, type ToastFunction, } from "./Toast.generated";

package/dist/components/toast/index.js

@@ -1 +1 @@
-export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastQueue, ToastRoot, ToastTitle, default, toast, toastQueue } from "./Toast.js";
+export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastQueue, ToastRoot, ToastTitle, default, toast, toastQueue } from "./Toast.generated.js";

package/dist/components/toggle/Toggle.generated.d.ts

@@ -0,0 +1,17 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Toggle.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ToggleColor = "default" | "accent" | "success" | "warning" | "danger";
+export type ToggleSize = "sm" | "md" | "lg";
+export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color"> & IComponentBaseProps & {
+    defaultChecked?: boolean;
+    children?: JSX.Element;
+    description?: JSX.Element;
+    icon?: JSX.Element;
+    isDisabled?: boolean;
+    color?: ToggleColor;
+    size?: ToggleSize;
+};
+declare const Toggle: __LayoutComponent<ToggleProps>;
+export default Toggle;

package/dist/components/toggle/Toggle.generated.js

@@ -0,0 +1,149 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Toggle.css";
+import { Show, createSignal, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Toggle.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ template("<label><input><span><span>");
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const __solidLayoutToggle = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "children",
+        "description",
+        "icon",
+        "isDisabled",
+        "color",
+        "size",
+        "checked",
+        "defaultChecked",
+        "disabled",
+        "onChange",
+        "dataTheme"
+    ]);
+    const [internalSelected, setInternalSelected] = createSignal(Boolean(local.defaultChecked));
+    const isControlled = ()=>void 0 !== local.checked;
+    const isSelected = ()=>isControlled() ? Boolean(local.checked) : internalSelected();
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const color = ()=>local.color ?? "accent";
+    const size = ()=>local.size ?? "md";
+    const hasContent = ()=>null != local.children || null != local.description;
+    const handleChange = (event)=>{
+        invokeEventHandler(local.onChange, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        if (!isControlled()) setInternalSelected(event.currentTarget.checked);
+    };
+    return (()=>{
+        var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        spread(_el$, mergeProps(()=>({
+                class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.color[color()], isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "toggle",
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            }
+        }), false, true);
+        spread(_el$2, mergeProps(others, {
+            type: "checkbox",
+            role: "switch"
+        }, ()=>({
+                class: CLASSES.slot.input
+            }), {
+            "data-slot": "toggle-input",
+            get checked () {
+                return isSelected();
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onChange: handleChange
+        }), false, false);
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.slot.control
+            }), {
+            "data-slot": "toggle-control",
+            "aria-hidden": "true"
+        }), false, true);
+        spread(_el$4, mergeProps(()=>({
+                class: CLASSES.slot.thumb
+            }), {
+            "data-slot": "toggle-thumb"
+        }), false, true);
+        insert(_el$4, createComponent(Show, {
+            get when () {
+                return local.icon;
+            },
+            get children () {
+                var _el$5 = _tmpl$();
+                spread(_el$5, mergeProps(()=>({
+                        class: CLASSES.slot.icon
+                    }), {
+                    "data-slot": "toggle-icon"
+                }), false, true);
+                insert(_el$5, ()=>local.icon);
+                return _el$5;
+            }
+        }));
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return hasContent();
+            },
+            get children () {
+                var _el$6 = _tmpl$();
+                spread(_el$6, mergeProps(()=>({
+                        class: CLASSES.slot.content
+                    }), {
+                    "data-slot": "toggle-content"
+                }), false, true);
+                insert(_el$6, createComponent(Show, {
+                    get when () {
+                        return local.children;
+                    },
+                    get children () {
+                        var _el$7 = _tmpl$2();
+                        insert(_el$7, ()=>local.children);
+                        return _el$7;
+                    }
+                }), null);
+                insert(_el$6, createComponent(Show, {
+                    get when () {
+                        return local.description;
+                    },
+                    get children () {
+                        var _el$8 = _tmpl$();
+                        spread(_el$8, mergeProps(()=>({
+                                class: CLASSES.slot.description
+                            }), {
+                            "data-slot": "description"
+                        }), false, true);
+                        insert(_el$8, ()=>local.description);
+                        return _el$8;
+                    }
+                }), null);
+                return _el$6;
+            }
+        }), null);
+        return _el$;
+    })();
+};
+const Toggle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToggle,
+    embedded: true
+});
+const Toggle_generated = Toggle;
+export default Toggle_generated;

package/dist/components/toggle/Toggle.recipe.d.ts

@@ -0,0 +1,40 @@
+export declare const CLASSES: {
+    readonly base: "toggle";
+    readonly slot: {
+        readonly input: "toggle__input";
+        readonly control: "toggle__control";
+        readonly thumb: "toggle__thumb";
+        readonly icon: "toggle__icon";
+        readonly content: "toggle__content";
+        readonly description: "toggle__description";
+    };
+    readonly color: {
+        readonly default: "toggle--default";
+        readonly accent: "toggle--accent";
+        readonly success: "toggle--success";
+        readonly warning: "toggle--warning";
+        readonly danger: "toggle--danger";
+    };
+    readonly size: {
+        readonly sm: "toggle--sm";
+        readonly md: "toggle--md";
+        readonly lg: "toggle--lg";
+    };
+    readonly flag: {
+        readonly disabled: "toggle--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "toggle";
+    readonly slots: {
+        readonly description: {};
+        readonly label: {};
+        readonly root: {};
+        readonly toggle: {};
+        readonly "toggle-content": {};
+        readonly "toggle-control": {};
+        readonly "toggle-icon": {};
+        readonly "toggle-input": {};
+        readonly "toggle-thumb": {};
+    };
+}>;

package/dist/components/toggle/Toggle.recipe.js

@@ -0,0 +1,94 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "toggle",
+    slot: {
+        input: "toggle__input",
+        control: "toggle__control",
+        thumb: "toggle__thumb",
+        icon: "toggle__icon",
+        content: "toggle__content",
+        description: "toggle__description"
+    },
+    color: {
+        default: "toggle--default",
+        accent: "toggle--accent",
+        success: "toggle--success",
+        warning: "toggle--warning",
+        danger: "toggle--danger"
+    },
+    size: {
+        sm: "toggle--sm",
+        md: "toggle--md",
+        lg: "toggle--lg"
+    },
+    flag: {
+        disabled: "toggle--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "toggle",
+    slots: {
+        description: {},
+        label: {},
+        root: {},
+        toggle: {},
+        "toggle-content": {},
+        "toggle-control": {},
+        "toggle-icon": {},
+        "toggle-input": {},
+        "toggle-thumb": {}
+    },
+    _layouts: {
+        slots: {
+            description: {
+                base: "",
+                axes: {}
+            },
+            label: {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            },
+            toggle: {
+                base: "",
+                axes: {}
+            },
+            "toggle-content": {
+                base: "",
+                axes: {}
+            },
+            "toggle-control": {
+                base: "",
+                axes: {}
+            },
+            "toggle-icon": {
+                base: "",
+                axes: {}
+            },
+            "toggle-input": {
+                base: "",
+                axes: {}
+            },
+            "toggle-thumb": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            description: 0,
+            label: 1,
+            root: 2,
+            toggle: 3,
+            "toggle-content": 4,
+            "toggle-control": 5,
+            "toggle-icon": 6,
+            "toggle-input": 7,
+            "toggle-thumb": 8
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default, type ToggleProps, type ToggleColor, type ToggleSize } from "./Toggle";
+export { default, type ToggleProps, type ToggleColor, type ToggleSize } from "./Toggle.generated";

package/dist/components/toggle/index.js

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

package/dist/components/toolbar/Toolbar.generated.d.ts

@@ -0,0 +1,16 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Toolbar.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ToolbarOrientation = "horizontal" | "vertical";
+export type ToolbarRootProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
+    orientation?: ToolbarOrientation;
+    isAttached?: boolean;
+};
+declare const ToolbarRoot: __LayoutComponent<ToolbarRootProps>;
+declare const Toolbar: __LayoutComponent<ToolbarRootProps> & {
+    Root: __LayoutComponent<ToolbarRootProps>;
+};
+export default Toolbar;
+export { Toolbar, ToolbarRoot };
+export type { ToolbarRootProps as ToolbarProps };

package/dist/components/toolbar/Toolbar.generated.js

@@ -0,0 +1,103 @@
+import { insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Toolbar.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Toolbar.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+const isFocusableElement = (element)=>{
+    if ("true" === element.getAttribute("aria-disabled")) return false;
+    return !element.hasAttribute("disabled");
+};
+const isTypingContext = (target)=>{
+    if (!(target instanceof HTMLElement)) return false;
+    const tag = target.tagName.toLowerCase();
+    if ("input" === tag || "textarea" === tag || "select" === tag) return true;
+    return "true" === target.getAttribute("contenteditable");
+};
+const getFocusableElements = (root)=>Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isFocusableElement);
+const __solidLayoutToolbarRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "orientation",
+        "isAttached",
+        "onKeyDown",
+        "role",
+        "ref"
+    ]);
+    let rootRef;
+    const orientation = ()=>local.orientation ?? "horizontal";
+    const handleKeyDown = (event)=>{
+        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if (event.defaultPrevented) return;
+        if (isTypingContext(event.target)) return;
+        const currentRoot = rootRef;
+        if (!currentRoot) return;
+        const isVertical = "vertical" === orientation();
+        const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+        const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+        const isMoveKey = event.key === nextKey || event.key === prevKey;
+        const isHomeEndKey = "Home" === event.key || "End" === event.key;
+        if (!isMoveKey && !isHomeEndKey) return;
+        const focusable = getFocusableElements(currentRoot);
+        if (0 === focusable.length) return;
+        const activeElement = document.activeElement;
+        const currentIndex = activeElement ? focusable.indexOf(activeElement) : -1;
+        let nextIndex = currentIndex;
+        if ("Home" === event.key) nextIndex = 0;
+        else if ("End" === event.key) nextIndex = focusable.length - 1;
+        else if (-1 === currentIndex) nextIndex = event.key === prevKey ? focusable.length - 1 : 0;
+        else {
+            const step = event.key === nextKey ? 1 : -1;
+            nextIndex = (currentIndex + step + focusable.length) % focusable.length;
+        }
+        event.preventDefault();
+        focusable[nextIndex]?.focus();
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        use((el)=>{
+            rootRef = el;
+            if ("function" == typeof local.ref) local.ref(el);
+        }, _el$);
+        spread(_el$, mergeProps(others, {
+            get role () {
+                return local.role ?? "toolbar";
+            },
+            get ["aria-orientation"] () {
+                return orientation();
+            },
+            "data-slot": "toolbar",
+            get ["data-orientation"] () {
+                return orientation();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            onKeyDown: handleKeyDown
+        }, ()=>({
+                class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], local.isAttached && CLASSES.flag.attached, local.class, local.className)
+            })), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const ToolbarRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToolbarRoot,
+    embedded: true
+});
+const Toolbar = Object.assign(ToolbarRoot, {
+    Root: ToolbarRoot
+});
+const Toolbar_generated = Toolbar;
+export default Toolbar_generated;
+export { Toolbar, ToolbarRoot };