@pathscale/ui 0.1.1 → 1.2.1

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

@@ -1,17 +1,34 @@
-import { type JSX, type Component } from "solid-js";
-import type { IComponentBaseProps, ComponentVariant } from "../types";
-export type ComponentStatus = "info" | "success" | "warning" | "error";
-export type ComponentLayout = "vertical" | "horizontal";
-export type AlertProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
-    icon?: JSX.Element;
-    layout?: ComponentLayout;
-    status?: ComponentStatus;
-    variant?: ComponentVariant;
-    "aria-atomic"?: boolean;
-    "aria-live"?: "off" | "polite" | "assertive";
-    "aria-relevant"?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
+import "./Alert.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type AlertStatus = "default" | "accent" | "success" | "warning" | "danger";
+export type AlertRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    status?: AlertStatus;
+    children: JSX.Element;
+};
+export type AlertIndicatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type AlertContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type AlertTitleProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type AlertDescriptionProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+declare const AlertRoot: ParentComponent<AlertRootProps>;
+declare const AlertIndicator: Component<AlertIndicatorProps>;
+declare const AlertContent: ParentComponent<AlertContentProps>;
+declare const AlertTitle: ParentComponent<AlertTitleProps>;
+declare const AlertDescription: ParentComponent<AlertDescriptionProps>;
+declare const Alert: ParentComponent<AlertRootProps> & {
+    Root: ParentComponent<AlertRootProps>;
+    Indicator: Component<AlertIndicatorProps>;
+    Content: ParentComponent<AlertContentProps>;
+    Title: ParentComponent<AlertTitleProps>;
+    Description: ParentComponent<AlertDescriptionProps>;
 };
-declare const Alert: Component<AlertProps>;
 export default Alert;
+export { AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription };

package/dist/components/alert/Alert.js

@@ -0,0 +1,195 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Alert.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.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__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.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__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.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__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.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__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const AlertContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useAlertContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 STATUS_CLASS_MAP = {
+    default: "alert--default",
+    accent: "alert--accent",
+    success: "alert--success",
+    warning: "alert--warning",
+    danger: "alert--danger"
+};
+const AlertRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "status",
+        "dataTheme",
+        "style"
+    ]);
+    const status = ()=>local.status ?? "default";
+    const ctx = {
+        status
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AlertContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$5 = _tmpl$5();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                role: "alert",
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert", STATUS_CLASS_MAP[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);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+            return _el$5;
+        }
+    });
+};
+const AlertIndicator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = useAlertContext();
+    const DefaultIcon = ()=>{
+        const Icon = STATUS_ICON_MAP[ctx.status()];
+        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(Icon, {});
+    };
+    return (()=>{
+        var _el$6 = _tmpl$5();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__indicator", local.class, local.className);
+            },
+            "data-slot": "alert-indicator",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.children;
+            },
+            get fallback () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DefaultIcon, {});
+            },
+            get children () {
+                return local.children;
+            }
+        }));
+        return _el$6;
+    })();
+};
+const AlertContent = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$5();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__content", local.class, local.className);
+            },
+            "data-slot": "alert-content",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const AlertTitle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$8 = _tmpl$6();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__title", local.class, local.className);
+            },
+            "data-slot": "alert-title",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const AlertDescription = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$7();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__description", local.class, local.className);
+            },
+            "data-slot": "alert-description",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const Alert_Alert = Object.assign(AlertRoot, {
+    Root: AlertRoot,
+    Indicator: AlertIndicator,
+    Content: AlertContent,
+    Title: AlertTitle,
+    Description: AlertDescription
+});
+const Alert = Alert_Alert;
+export { AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle, Alert as default };

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

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

package/dist/components/alert/index.js

@@ -0,0 +1,8 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Alert_js_2b92c329__ from "./Alert.js";
+var __webpack_exports__AlertContent = __WEBPACK_EXTERNAL_MODULE__Alert_js_2b92c329__.AlertContent;
+var __webpack_exports__AlertDescription = __WEBPACK_EXTERNAL_MODULE__Alert_js_2b92c329__.AlertDescription;
+var __webpack_exports__AlertIndicator = __WEBPACK_EXTERNAL_MODULE__Alert_js_2b92c329__.AlertIndicator;
+var __webpack_exports__AlertRoot = __WEBPACK_EXTERNAL_MODULE__Alert_js_2b92c329__.AlertRoot;
+var __webpack_exports__AlertTitle = __WEBPACK_EXTERNAL_MODULE__Alert_js_2b92c329__.AlertTitle;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Alert_js_2b92c329__["default"];
+export { __webpack_exports__AlertContent as AlertContent, __webpack_exports__AlertDescription as AlertDescription, __webpack_exports__AlertIndicator as AlertIndicator, __webpack_exports__AlertRoot as AlertRoot, __webpack_exports__AlertTitle as AlertTitle, __webpack_exports__default as default };

package/dist/components/artboard/Artboard.js

@@ -0,0 +1,42 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Artboard = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "demo",
+        "size",
+        "horizontal",
+        "dataTheme",
+        "class",
+        "className"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("artboard", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "artboard-demo": local.demo ?? true,
+            "phone-1": 1 === local.size,
+            "phone-2": 2 === local.size,
+            "phone-3": 3 === local.size,
+            "phone-4": 4 === local.size,
+            "phone-5": 5 === local.size,
+            "phone-6": 6 === local.size,
+            horizontal: local.horizontal
+        })));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const artboard_Artboard = Artboard;
+export { artboard_Artboard as default };

package/dist/components/artboard/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Artboard_js_4bf6eea9__ from "./Artboard.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Artboard_js_4bf6eea9__["default"];
+export { __webpack_exports__default as default };

package/dist/components/avatar/Avatar.css

@@ -0,0 +1,124 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .avatar {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 9999px;
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: var(--color-base-200);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Size modifiers
+   * -----------------------------------------------------------------------------------------------*/
+  .avatar--sm {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  /* md is default — no extra styles */
+
+  .avatar--lg {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .avatar--lg .avatar__fallback {
+    font-size: 1rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Image
+   * -----------------------------------------------------------------------------------------------*/
+  .avatar__image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    transition: opacity 250ms ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .avatar__image {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Fallback
+   * -----------------------------------------------------------------------------------------------*/
+  .avatar__fallback {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-base-200);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Fallback color modifiers
+   * -----------------------------------------------------------------------------------------------*/
+  .avatar__fallback--default {
+    color: var(--color-base-content);
+  }
+
+  .avatar__fallback--accent {
+    color: var(--color-accent);
+  }
+
+  .avatar__fallback--success {
+    color: var(--color-success);
+  }
+
+  .avatar__fallback--warning {
+    color: var(--color-warning);
+  }
+
+  .avatar__fallback--danger {
+    color: var(--color-error);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Variant: soft
+   * -----------------------------------------------------------------------------------------------*/
+  .avatar--soft {
+    background-color: transparent;
+  }
+
+  .avatar--soft .avatar__fallback--accent {
+    background-color: color-mix(in oklab, var(--color-accent) 12%, transparent);
+    color: var(--color-accent);
+  }
+
+  .avatar--soft .avatar__fallback--success {
+    background-color: color-mix(in oklab, var(--color-success) 12%, transparent);
+    color: var(--color-success);
+  }
+
+  .avatar--soft .avatar__fallback--warning {
+    background-color: color-mix(in oklab, var(--color-warning) 12%, transparent);
+    color: var(--color-warning);
+  }
+
+  .avatar--soft .avatar__fallback--danger {
+    background-color: color-mix(in oklab, var(--color-error) 12%, transparent);
+    color: var(--color-error);
+  }
+
+  .avatar--soft .avatar__fallback--default {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+}

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

@@ -1,26 +1,27 @@
-import { type JSX } from "solid-js";
-import type { IComponentBaseProps, ComponentColor, ComponentShape, ComponentSize } from "../types";
-type ElementType = keyof JSX.IntrinsicElements;
-type AvatarBaseProps = {
-    src?: string;
-    letters?: string;
-    size?: ComponentSize | number;
-    shape?: ComponentShape;
-    color?: Exclude<ComponentColor, "ghost">;
-    border?: boolean;
-    borderColor?: Exclude<ComponentColor, "ghost">;
-    online?: boolean;
-    offline?: boolean;
-    innerClass?: string;
-    as?: ElementType;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
+import "./Avatar.css";
+import { type Component, type JSX, type ParentComponent } 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;
 };
-type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
-export type AvatarProps<E extends ElementType = "div"> = Omit<PropsOf<E>, "color"> & AvatarBaseProps & IComponentBaseProps;
-declare const _default: (<E extends ElementType = "div">(props: AvatarProps<E>) => JSX.Element) & {
-    Group: <E extends keyof JSX.IntrinsicElements = "div">(props: import("./AvatarGroup").AvatarGroupProps<E>) => JSX.Element;
+declare const AvatarRoot: ParentComponent<AvatarRootProps>;
+declare const AvatarImage: Component<AvatarImageProps>;
+declare const AvatarFallback: ParentComponent<AvatarFallbackProps>;
+declare const Avatar: ParentComponent<AvatarRootProps> & {
+    Root: ParentComponent<AvatarRootProps>;
+    Image: Component<AvatarImageProps>;
+    Fallback: ParentComponent<AvatarFallbackProps>;
 };
-export default _default;
+export default Avatar;
+export { AvatarRoot, AvatarImage, AvatarFallback };

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,159 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Avatar.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<img>");
+const AvatarContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useAvatarContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(AvatarContext);
+    if (!ctx) throw new Error("Avatar compound components must be used within <Avatar>");
+    return ctx;
+};
+const SIZE_CLASS_MAP = {
+    sm: "avatar--sm",
+    md: "",
+    lg: "avatar--lg"
+};
+const VARIANT_CLASS_MAP = {
+    default: "",
+    soft: "avatar--soft"
+};
+const AvatarRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "size",
+        "color",
+        "variant",
+        "dataTheme",
+        "style"
+    ]);
+    const [imageLoaded, setImageLoaded] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AvatarContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("avatar", SIZE_CLASS_MAP[size()], VARIANT_CLASS_MAP[variant()], local.class, local.className);
+                },
+                "data-slot": "avatar-root",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const AvatarImage = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "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();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get src () {
+                return local.src;
+            },
+            get alt () {
+                return local.alt;
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("avatar__image", local.class, local.className);
+            },
+            "data-slot": "avatar-image",
+            get style () {
+                return local.style;
+            },
+            onLoad: handleLoad,
+            onError: handleError
+        }), false, false);
+        return _el$2;
+    })();
+};
+const COLOR_CLASS_MAP = {
+    default: "avatar__fallback--default",
+    accent: "avatar__fallback--accent",
+    success: "avatar__fallback--success",
+    warning: "avatar__fallback--warning",
+    danger: "avatar__fallback--danger"
+};
+const AvatarFallback = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "delayMs"
+    ]);
+    const ctx = useAvatarContext();
+    const [showFallback, setShowFallback] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(!local.delayMs);
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (local.delayMs) {
+            const timer = setTimeout(()=>setShowFallback(true), local.delayMs);
+            return ()=>clearTimeout(timer);
+        }
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!showFallback())() && !ctx.imageLoaded();
+        },
+        get children () {
+            var _el$3 = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("avatar__fallback", COLOR_CLASS_MAP[ctx.color()], local.class, local.className);
+                },
+                "data-slot": "avatar-fallback",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+            return _el$3;
+        }
+    });
+};
+const Avatar_Avatar = Object.assign(AvatarRoot, {
+    Root: AvatarRoot,
+    Image: AvatarImage,
+    Fallback: AvatarFallback
+});
+const Avatar = Avatar_Avatar;
+export { AvatarFallback, AvatarImage, AvatarRoot, Avatar as default };