@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/alert/Alert.generated.js

@@ -0,0 +1,212 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Alert.css";
+import { Show, createContext, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Alert.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><circle cx=12 cy=12 r=10 stroke=currentColor stroke-width=2></circle><path d="M12 16v-4M12 8h.01"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><circle cx=12 cy=12 r=10 stroke=currentColor stroke-width=2></circle><path d="M9 12l2 2 4-4"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$3 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"stroke=currentColor stroke-width=2></path><path d="M12 9v4M12 17h.01"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$4 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><circle cx=12 cy=12 r=10 stroke=currentColor stroke-width=2></circle><path d="M15 9l-6 6M9 9l6 6"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$5 = /*#__PURE__*/ template("<div>"), _tmpl$6 = /*#__PURE__*/ template("<p>"), _tmpl$7 = /*#__PURE__*/ template("<span>");
+const AlertContext = createContext();
+const useAlertContext = ()=>{
+    const ctx = useContext(AlertContext);
+    if (!ctx) throw new Error("Alert compound components must be used within <Alert>");
+    return ctx;
+};
+const InfoIcon = ()=>_tmpl$();
+const SuccessIcon = ()=>_tmpl$2();
+const WarningIcon = ()=>_tmpl$3();
+const DangerIcon = ()=>_tmpl$4();
+const STATUS_ICON_MAP = {
+    default: InfoIcon,
+    accent: InfoIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+    danger: DangerIcon
+};
+const __solidLayoutAlertRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "status",
+        "dataTheme",
+        "style"
+    ]);
+    const status = ()=>local.status ?? "default";
+    const ctx = {
+        status
+    };
+    return createComponent(AlertContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$5 = _tmpl$5();
+            spread(_el$5, mergeProps(others, {
+                role: "alert"
+            }, ()=>({
+                    class: twMerge(CLASSES.base, CLASSES.status[status()], local.class, local.className)
+                }), {
+                "data-slot": "alert-root",
+                get ["data-status"] () {
+                    return status();
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$5, ()=>local.children);
+            return _el$5;
+        }
+    });
+};
+const AlertRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAlertRoot,
+    embedded: true
+});
+const __solidLayoutAlertIndicator = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = useAlertContext();
+    const DefaultIcon = ()=>{
+        const Icon = STATUS_ICON_MAP[ctx.status()];
+        return createComponent(Icon, {});
+    };
+    return (()=>{
+        var _el$6 = _tmpl$5();
+        spread(_el$6, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.indicator, local.class, local.className)
+            }), {
+            "data-slot": "alert-indicator",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$6, createComponent(Show, {
+            get when () {
+                return local.children;
+            },
+            get fallback () {
+                return createComponent(DefaultIcon, {});
+            },
+            get children () {
+                return local.children;
+            }
+        }));
+        return _el$6;
+    })();
+};
+const AlertIndicator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAlertIndicator,
+    embedded: true
+});
+const __solidLayoutAlertContent = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$5();
+        spread(_el$7, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.content, local.class, local.className)
+            }), {
+            "data-slot": "alert-content",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const AlertContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAlertContent,
+    embedded: true
+});
+const __solidLayoutAlertTitle = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$8 = _tmpl$6();
+        spread(_el$8, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.title, local.class, local.className)
+            }), {
+            "data-slot": "alert-title",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const AlertTitle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAlertTitle,
+    embedded: true
+});
+const __solidLayoutAlertDescription = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$7();
+        spread(_el$9, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.description, local.class, local.className)
+            }), {
+            "data-slot": "alert-description",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const AlertDescription = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAlertDescription,
+    embedded: true
+});
+const Alert = Object.assign(AlertRoot, {
+    Root: AlertRoot,
+    Indicator: AlertIndicator,
+    Content: AlertContent,
+    Title: AlertTitle,
+    Description: AlertDescription
+});
+const Alert_generated = Alert;
+export default Alert_generated;
+export { AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle };

package/dist/components/alert/Alert.recipe.d.ts

@@ -0,0 +1,28 @@
+export declare const CLASSES: {
+    readonly base: "alert";
+    readonly slot: {
+        readonly indicator: "alert__indicator";
+        readonly content: "alert__content";
+        readonly title: "alert__title";
+        readonly description: "alert__description";
+    };
+    readonly status: {
+        readonly default: "alert--default";
+        readonly accent: "alert--accent";
+        readonly success: "alert--success";
+        readonly warning: "alert--warning";
+        readonly danger: "alert--danger";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "alert";
+    readonly slots: {
+        readonly "alert-content": {};
+        readonly "alert-default-icon": {};
+        readonly "alert-description": {};
+        readonly "alert-indicator": {};
+        readonly "alert-root": {};
+        readonly "alert-title": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/alert/Alert.recipe.js

@@ -0,0 +1,72 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "alert",
+    slot: {
+        indicator: "alert__indicator",
+        content: "alert__content",
+        title: "alert__title",
+        description: "alert__description"
+    },
+    status: {
+        default: "alert--default",
+        accent: "alert--accent",
+        success: "alert--success",
+        warning: "alert--warning",
+        danger: "alert--danger"
+    }
+};
+const componentRecipe = recipe({
+    component: "alert",
+    slots: {
+        "alert-content": {},
+        "alert-default-icon": {},
+        "alert-description": {},
+        "alert-indicator": {},
+        "alert-root": {},
+        "alert-title": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "alert-content": {
+                base: "",
+                axes: {}
+            },
+            "alert-default-icon": {
+                base: "",
+                axes: {}
+            },
+            "alert-description": {
+                base: "",
+                axes: {}
+            },
+            "alert-indicator": {
+                base: "",
+                axes: {}
+            },
+            "alert-root": {
+                base: "",
+                axes: {}
+            },
+            "alert-title": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "alert-content": 0,
+            "alert-default-icon": 1,
+            "alert-description": 2,
+            "alert-indicator": 3,
+            "alert-root": 4,
+            "alert-title": 5,
+            root: 6
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default, AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription, type AlertStatus, type AlertRootProps, type AlertIndicatorProps, type AlertContentProps, type AlertTitleProps, type AlertDescriptionProps, } from "./Alert";
+export { default, AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription, type AlertStatus, type AlertRootProps, type AlertIndicatorProps, type AlertContentProps, type AlertTitleProps, type AlertDescriptionProps, } from "./Alert.generated";

package/dist/components/alert/index.js

@@ -1 +1 @@
-export { AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle, default } from "./Alert.js";
+export { AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle, default } from "./Alert.generated.js";

package/dist/components/avatar/Avatar.generated.d.ts

@@ -0,0 +1,28 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Avatar.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type AvatarSize = "sm" | "md" | "lg";
+export type AvatarColor = "default" | "accent" | "success" | "warning" | "danger";
+export type AvatarVariant = "default" | "soft";
+export type AvatarRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    size?: AvatarSize;
+    color?: AvatarColor;
+    variant?: AvatarVariant;
+};
+export type AvatarImageProps = Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "children"> & IComponentBaseProps;
+export type AvatarFallbackProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    delayMs?: number;
+};
+declare const AvatarRoot: __LayoutComponent<AvatarRootProps>;
+declare const AvatarImage: __LayoutComponent<AvatarImageProps>;
+declare const AvatarFallback: __LayoutComponent<AvatarFallbackProps>;
+declare const Avatar: __LayoutComponent<AvatarRootProps> & {
+    Root: __LayoutComponent<AvatarRootProps>;
+    Image: __LayoutComponent<AvatarImageProps>;
+    Fallback: __LayoutComponent<AvatarFallbackProps>;
+};
+export default Avatar;
+export { AvatarRoot, AvatarImage, AvatarFallback };

package/dist/components/avatar/Avatar.generated.js

@@ -0,0 +1,159 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Avatar.css";
+import { Show, createContext, createSignal, onMount, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Avatar.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<img>");
+const AvatarContext = createContext();
+const useAvatarContext = ()=>{
+    const ctx = useContext(AvatarContext);
+    if (!ctx) throw new Error("Avatar compound components must be used within <Avatar>");
+    return ctx;
+};
+const __solidLayoutAvatarRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "size",
+        "color",
+        "variant",
+        "dataTheme",
+        "style"
+    ]);
+    const [imageLoaded, setImageLoaded] = createSignal(false);
+    const size = ()=>local.size ?? "md";
+    const color = ()=>local.color ?? "default";
+    const variant = ()=>local.variant ?? "default";
+    const ctx = {
+        size,
+        color,
+        variant,
+        imageLoaded,
+        setImageLoaded
+    };
+    return createComponent(AvatarContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.variant[variant()], local.class, local.className)
+                }), {
+                "data-slot": "avatar-root",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const AvatarRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAvatarRoot,
+    embedded: true
+});
+const __solidLayoutAvatarImage = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "src",
+        "alt",
+        "onLoad",
+        "onError"
+    ]);
+    const ctx = useAvatarContext();
+    const handleLoad = (e)=>{
+        ctx.setImageLoaded(true);
+        if ("function" == typeof local.onLoad) local.onLoad(e);
+    };
+    const handleError = (e)=>{
+        ctx.setImageLoaded(false);
+        if ("function" == typeof local.onError) local.onError(e);
+    };
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(others, {
+            get src () {
+                return local.src;
+            },
+            get alt () {
+                return local.alt;
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.image, local.class, local.className)
+            }), {
+            "data-slot": "avatar-image",
+            get style () {
+                return local.style;
+            },
+            onLoad: handleLoad,
+            onError: handleError
+        }), false, false);
+        return _el$2;
+    })();
+};
+const AvatarImage = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAvatarImage,
+    embedded: true
+});
+const __solidLayoutAvatarFallback = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "delayMs"
+    ]);
+    const ctx = useAvatarContext();
+    const [showFallback, setShowFallback] = createSignal(!local.delayMs);
+    onMount(()=>{
+        if (local.delayMs) {
+            const timer = setTimeout(()=>setShowFallback(true), local.delayMs);
+            return ()=>clearTimeout(timer);
+        }
+    });
+    return createComponent(Show, {
+        get when () {
+            return memo(()=>!!showFallback())() && !ctx.imageLoaded();
+        },
+        get children () {
+            var _el$3 = _tmpl$();
+            spread(_el$3, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.slot.fallback, CLASSES.color[ctx.color()], local.class, local.className)
+                }), {
+                "data-slot": "avatar-fallback",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$3, ()=>local.children);
+            return _el$3;
+        }
+    });
+};
+const AvatarFallback = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAvatarFallback,
+    embedded: true
+});
+const Avatar = Object.assign(AvatarRoot, {
+    Root: AvatarRoot,
+    Image: AvatarImage,
+    Fallback: AvatarFallback
+});
+const Avatar_generated = Avatar;
+export default Avatar_generated;
+export { AvatarFallback, AvatarImage, AvatarRoot };

package/dist/components/avatar/Avatar.recipe.d.ts

@@ -0,0 +1,36 @@
+export declare const CLASSES: {
+    readonly base: "avatar";
+    readonly slot: {
+        readonly image: "avatar__image";
+        readonly fallback: "avatar__fallback";
+    };
+    readonly size: {
+        readonly sm: "avatar--sm";
+        readonly md: "";
+        readonly lg: "avatar--lg";
+    };
+    readonly variant: {
+        readonly default: "";
+        readonly soft: "avatar--soft";
+    };
+    readonly color: {
+        readonly default: "avatar__fallback--default";
+        readonly accent: "avatar__fallback--accent";
+        readonly success: "avatar__fallback--success";
+        readonly warning: "avatar__fallback--warning";
+        readonly danger: "avatar__fallback--danger";
+    };
+    readonly group: {
+        readonly base: "avatar-group";
+        readonly overlap: "-space-x-6";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "avatar";
+    readonly slots: {
+        readonly "avatar-fallback": {};
+        readonly "avatar-image": {};
+        readonly "avatar-root": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/avatar/Avatar.recipe.js

@@ -0,0 +1,65 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "avatar",
+    slot: {
+        image: "avatar__image",
+        fallback: "avatar__fallback"
+    },
+    size: {
+        sm: "avatar--sm",
+        md: "",
+        lg: "avatar--lg"
+    },
+    variant: {
+        default: "",
+        soft: "avatar--soft"
+    },
+    color: {
+        default: "avatar__fallback--default",
+        accent: "avatar__fallback--accent",
+        success: "avatar__fallback--success",
+        warning: "avatar__fallback--warning",
+        danger: "avatar__fallback--danger"
+    },
+    group: {
+        base: "avatar-group",
+        overlap: "-space-x-6"
+    }
+};
+const componentRecipe = recipe({
+    component: "avatar",
+    slots: {
+        "avatar-fallback": {},
+        "avatar-image": {},
+        "avatar-root": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "avatar-fallback": {
+                base: "",
+                axes: {}
+            },
+            "avatar-image": {
+                base: "",
+                axes: {}
+            },
+            "avatar-root": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "avatar-fallback": 0,
+            "avatar-image": 1,
+            "avatar-root": 2,
+            root: 3
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/avatar/AvatarGroup.generated.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type ElementType = keyof JSX.IntrinsicElements;
+type AvatarGroupBaseProps = {
+    /** Custom container tag */
+    as?: ElementType;
+    /** Extra classes */
+    class?: string;
+    className?: string;
+    children: JSX.Element[];
+} & IComponentBaseProps;
+type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
+export type AvatarGroupProps<E extends ElementType = "div"> = Omit<PropsOf<E>, keyof AvatarGroupBaseProps> & AvatarGroupBaseProps;
+declare const _default: <E extends ElementType = "div">(props: AvatarGroupProps<E>) => JSX.Element;
+export default _default;

package/dist/components/avatar/AvatarGroup.generated.js

@@ -0,0 +1,58 @@
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Avatar.recipe.js";
+const VoidElementList = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "keygen",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+];
+const __solidLayoutAvatarGroup = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "as",
+        "class",
+        "className",
+        "children"
+    ]);
+    const Tag = local.as || "div";
+    const classes = ()=>twMerge(CLASSES.group.base, CLASSES.group.overlap, local.class, local.className);
+    const ariaLabel = `Group of ${local.children.length} avatar photos`;
+    if (VoidElementList.includes(Tag)) return createComponent(Dynamic, mergeProps({
+        component: Tag
+    }, others, {
+        "aria-label": ariaLabel
+    }, ()=>({
+            class: classes()
+        })));
+    return createComponent(Dynamic, mergeProps({
+        component: Tag
+    }, others, {
+        "aria-label": ariaLabel
+    }, ()=>({
+            class: classes()
+        }), {
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const AvatarGroup = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAvatarGroup,
+    embedded: true
+});
+const AvatarGroup_generated = AvatarGroup;
+export default AvatarGroup_generated;

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

@@ -1 +1 @@
-export { default, AvatarRoot, AvatarImage, AvatarFallback, type AvatarSize, type AvatarColor, type AvatarVariant, type AvatarRootProps, type AvatarImageProps, type AvatarFallbackProps, } from "./Avatar";
+export { default, AvatarRoot, AvatarImage, AvatarFallback, type AvatarSize, type AvatarColor, type AvatarVariant, type AvatarRootProps, type AvatarImageProps, type AvatarFallbackProps, } from "./Avatar.generated";