@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/alert/Alert.css

@@ -1,116 +1,169 @@
 @layer components {
-  /* -------------------------------------------------------------------------------------------------
+  /* -----------------------------------------------------------------------
    * Root
-   * -----------------------------------------------------------------------------------------------*/
+   *
+   * Same shape as Button: flavor or state picks --alert-accent and the
+   * variant decides how it is spent. State is declared second so it wins on
+   * source order — a reported condition outranks a styling preference.
+   * --------------------------------------------------------------------- */
   .alert {
     display: flex;
     width: 100%;
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
-    gap: 1rem;
-    border-radius: var(--radius-box, 1.5rem);
+    gap: 0.75rem;
+    border-radius: var(--radius-box, 1rem);
     padding: 0.75rem 1rem;
-    background-color: var(--color-base-200);
-    color: var(--color-base-content);
     font-size: 0.875rem;
     line-height: 1.25rem;
-    box-shadow:
-      0 1px 2px oklch(0% 0 0 / 0.05),
-      0 1px 3px oklch(0% 0 0 / 0.1);
+
+    --alert-accent: var(--color-base-300);
+    --alert-accent-fg: var(--color-base-content);
+    --alert-bg: var(--color-base-200);
+    --alert-fg: var(--color-base-content);
+    --alert-border: transparent;
+
+    background-color: var(--alert-bg);
+    border: var(--border, 1px) solid var(--alert-border);
+    color: var(--alert-fg);
   }
 
-  /* -------------------------------------------------------------------------------------------------
-   * Indicator
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    flex-shrink: 0;
-    user-select: none;
+  /* --------------------------------------------------------------- Flavor */
+  .alert--flavor-neutral {
+    --alert-accent: var(--color-base-300);
+    --alert-accent-fg: var(--color-base-content);
+  }
+  .alert--flavor-primary {
+    --alert-accent: var(--color-primary);
+    --alert-accent-fg: var(--color-primary-content);
+  }
+  .alert--flavor-secondary {
+    --alert-accent: var(--color-secondary);
+    --alert-accent-fg: var(--color-secondary-content);
+  }
+  .alert--flavor-accent {
+    --alert-accent: var(--color-accent);
+    --alert-accent-fg: var(--color-accent-content);
   }
 
-  .alert__indicator [data-slot="alert-default-icon"] {
-    width: 1rem;
-    height: 1rem;
+  /* ---------------------------------------------------------------- State */
+  .alert--flavor-info {
+    --alert-accent: var(--color-info);
+    --alert-accent-fg: var(--color-info-content);
+  }
+  .alert--flavor-success {
+    --alert-accent: var(--color-success);
+    --alert-accent-fg: var(--color-success-content);
+  }
+  .alert--flavor-warning {
+    --alert-accent: var(--color-warning);
+    --alert-accent-fg: var(--color-warning-content);
+  }
+  .alert--flavor-destructive {
+    --alert-accent: var(--color-error);
+    --alert-accent-fg: var(--color-error-content);
   }
 
-  /* -------------------------------------------------------------------------------------------------
-   * Content
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__content {
-    display: flex;
-    flex: 1 1 0%;
-    min-width: 0;
-    flex-direction: column;
-    align-items: flex-start;
+  /* -------------------------------------------------------------- Variant */
+  .alert--solid {
+    --alert-bg: var(--alert-accent);
+    --alert-fg: var(--alert-accent-fg);
+    --alert-border: transparent;
   }
 
-  /* -------------------------------------------------------------------------------------------------
-   * Title
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__title {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.5rem;
+  .alert--soft {
+    --alert-bg: color-mix(in oklab, var(--alert-accent), var(--color-base-100) 86%);
+    --alert-fg: var(--color-base-content);
+    --alert-border: transparent;
   }
 
-  /* -------------------------------------------------------------------------------------------------
-   * Description
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__description {
-    font-size: 0.875rem;
-    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+  .alert--outline {
+    --alert-bg: transparent;
+    --alert-fg: var(--color-base-content);
+    --alert-border: var(--alert-accent);
   }
 
-  /* -------------------------------------------------------------------------------------------------
-   * Status variants
-   * -----------------------------------------------------------------------------------------------*/
+  .alert--ghost {
+    --alert-bg: transparent;
+    --alert-fg: var(--color-base-content);
+    --alert-border: transparent;
+  }
 
-  /* Default */
-  .alert--default .alert__indicator {
-    color: var(--color-base-content);
+  .alert--plain {
+    --alert-bg: transparent;
+    --alert-fg: var(--alert-accent);
+    --alert-border: transparent;
+    padding: 0;
   }
 
-  .alert--default .alert__title {
-    color: var(--color-base-content);
+  /* ------------------------------------------------------------ Placement */
+  .alert--inline {
+    border-radius: var(--radius-box, 1rem);
   }
 
-  /* Accent */
-  .alert--accent .alert__indicator {
-    color: var(--color-accent);
+  /* Page level: edge to edge, square, no outer margin. */
+  .alert--banner {
+    border-radius: 0;
+    border-inline: 0;
+    padding-inline: 1.5rem;
   }
 
-  .alert--accent .alert__title {
-    color: var(--color-accent);
+  /* ---------------------------------------------------------------- Slots */
+  .alert__indicator {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding-block-start: 0.0625rem;
+    color: var(--alert-accent);
   }
 
-  /* Success */
-  .alert--success .alert__indicator {
-    color: var(--color-success);
+  .alert--solid .alert__indicator {
+    color: currentColor;
   }
 
-  .alert--success .alert__title {
-    color: var(--color-success);
+  .alert__content {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .alert__title {
+    font-weight: 600;
+    line-height: 1.25;
   }
 
-  /* Warning */
-  .alert--warning .alert__indicator {
-    color: var(--color-warning);
+  .alert__description {
+    display: block;
+    min-width: 0;
   }
 
-  .alert--warning .alert__title {
-    color: var(--color-warning);
+  .alert__dismiss {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    width: 1.5rem;
+    border: 0;
+    border-radius: var(--radius-pill, 9999px);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 100ms ease, background-color 100ms ease;
   }
 
-  /* Danger */
-  .alert--danger .alert__indicator {
-    color: var(--color-error);
+  .alert__dismiss:hover {
+    opacity: 1;
+    background-color: color-mix(in oklab, currentColor, transparent 88%);
   }
 
-  .alert--danger .alert__title {
-    color: var(--color-error);
+  .alert__dismiss:focus-visible {
+    outline: var(--focus-ring-width, 2px) solid currentColor;
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 }

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

@@ -1,35 +1,17 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Alert.css";
 import { type JSX } 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;
+import type { Flavor, UIBaseProps, Variant } from "../vocabulary";
+export type AlertPlacement = "inline" | "banner";
+export type AlertProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "title"> & UIBaseProps & {
+    flavor?: Flavor;
+    variant?: Variant;
+    placement?: AlertPlacement;
+    title?: JSX.Element;
+    /** `false` suppresses the state's default icon. */
+    icon?: JSX.Element | false;
+    onDismiss?: () => void;
+    dismissLabel?: string;
     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: __LayoutComponent<AlertRootProps>;
-declare const AlertIndicator: __LayoutComponent<AlertIndicatorProps>;
-declare const AlertContent: __LayoutComponent<AlertContentProps>;
-declare const AlertTitle: __LayoutComponent<AlertTitleProps>;
-declare const AlertDescription: __LayoutComponent<AlertDescriptionProps>;
-declare const Alert: __LayoutComponent<AlertRootProps> & {
-    Root: __LayoutComponent<AlertRootProps>;
-    Indicator: __LayoutComponent<AlertIndicatorProps>;
-    Content: __LayoutComponent<AlertContentProps>;
-    Title: __LayoutComponent<AlertTitleProps>;
-    Description: __LayoutComponent<AlertDescriptionProps>;
-};
-export default Alert;
-export { AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription };
+export declare const AlertLayout: __LayoutComponent<AlertProps>;

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

@@ -1,212 +1,116 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Dynamic, 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,
+import { Show } from "solid-js";
+import { alert as external_Alert_recipe_js_alert } from "./Alert.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg>'), _tmpl$2 = /*#__PURE__*/ template("<svg><circle cx=12 cy=12 r=10 stroke=currentColor stroke-width=2></svg>", false, true, false), _tmpl$3 = /*#__PURE__*/ template('<svg><path d="M12 16v-4M12 8h.01"stroke=currentColor stroke-linecap=round stroke-width=2></svg>', false, true, false), _tmpl$4 = /*#__PURE__*/ template('<svg><path d="M9 12l2 2 4-4"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2></svg>', false, true, false), _tmpl$5 = /*#__PURE__*/ template('<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></svg>', false, true, false), _tmpl$6 = /*#__PURE__*/ template('<svg><path d="M12 9v4M12 17h.01"stroke=currentColor stroke-linecap=round stroke-width=2></svg>', false, true, false), _tmpl$7 = /*#__PURE__*/ template('<svg><path d="M15 9l-6 6M9 9l6 6"stroke=currentColor stroke-linecap=round stroke-width=2></svg>', false, true, false), _tmpl$8 = /*#__PURE__*/ template("<span>"), _tmpl$9 = /*#__PURE__*/ template("<p>"), _tmpl$0 = /*#__PURE__*/ template('<button><svg aria-hidden=true fill=none height=14 viewBox="0 0 24 24"width=14 xmlns=http://www.w3.org/2000/svg><path d="M18 6L6 18M6 6l12 12"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$1 = /*#__PURE__*/ template("<div><div><span>");
+const svg = (paths)=>(()=>{
+        var _el$ = _tmpl$();
+        insert(_el$, paths);
+        return _el$;
+    })();
+const InfoIcon = ()=>svg([
+        _tmpl$2(),
+        _tmpl$3()
+    ]);
+const SuccessIcon = ()=>svg([
+        _tmpl$2(),
+        _tmpl$4()
+    ]);
+const WarningIcon = ()=>svg([
+        _tmpl$5(),
+        _tmpl$6()
+    ]);
+const DangerIcon = ()=>svg([
+        _tmpl$2(),
+        _tmpl$7()
+    ]);
+const FLAVOR_ICON = {
+    info: InfoIcon,
     success: SuccessIcon,
     warning: WarningIcon,
-    danger: DangerIcon
+    destructive: 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, {});
-    };
+const ASSERTIVE = new Set([
+    "destructive",
+    "warning"
+]);
+const __solidLayoutAlertLayout = (_stable, p)=>{
+    const role = ()=>ASSERTIVE.has(String(p.flavor)) ? "alert" : "status";
     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;
+        var _el$0 = _tmpl$1(), _el$10 = _el$0.firstChild, _el$12 = _el$10.firstChild;
+        spread(_el$0, mergeProps(()=>_stable.slot.root, {
+            get role () {
+                return role();
             },
-            get style () {
-                return local.style;
+            get ["aria-live"] () {
+                return "alert" === role() ? "assertive" : "polite";
+            },
+            get ["data-flavor"] () {
+                return p.flavor ?? "neutral";
             }
         }), false, true);
-        insert(_el$6, createComponent(Show, {
+        insert(_el$0, createComponent(Show, {
             get when () {
-                return local.children;
-            },
-            get fallback () {
-                return createComponent(DefaultIcon, {});
+                return false !== p.icon;
             },
             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;
+                var _el$1 = _tmpl$8();
+                spread(_el$1, mergeProps(()=>_stable.slot.indicator), false, true);
+                insert(_el$1, createComponent(Show, {
+                    get when () {
+                        return p.icon;
+                    },
+                    get fallback () {
+                        return createComponent(Dynamic, {
+                            get component () {
+                                return FLAVOR_ICON[String(p.flavor)] ?? InfoIcon;
+                            }
+                        });
+                    },
+                    get children () {
+                        return p.icon;
+                    }
+                }));
+                return _el$1;
             }
-        }), 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;
+        }), _el$10);
+        spread(_el$10, mergeProps(()=>_stable.slot.content), false, true);
+        insert(_el$10, createComponent(Show, {
+            get when () {
+                return p.title;
             },
-            get style () {
-                return local.style;
+            get children () {
+                var _el$11 = _tmpl$9();
+                spread(_el$11, mergeProps(()=>_stable.slot.title), false, true);
+                insert(_el$11, ()=>p.title);
+                return _el$11;
             }
-        }), 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;
+        }), _el$12);
+        spread(_el$12, mergeProps(()=>_stable.slot.description), false, true);
+        insert(_el$12, ()=>_stable.children);
+        insert(_el$0, createComponent(Show, {
+            get when () {
+                return p.onDismiss;
             },
-            get style () {
-                return local.style;
+            get children () {
+                var _el$13 = _tmpl$0();
+                spread(_el$13, mergeProps(()=>_stable.slot.dismiss, {
+                    type: "button",
+                    onClick: ()=>p.onDismiss?.(),
+                    get ["aria-label"] () {
+                        return p.dismissLabel ?? "Dismiss";
+                    }
+                }), false, true);
+                return _el$13;
             }
-        }), false, true);
-        insert(_el$9, ()=>local.children);
-        return _el$9;
+        }), null);
+        return _el$0;
     })();
 };
-const AlertDescription = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutAlertDescription,
+const AlertLayout = defineComponent({
+    recipe: external_Alert_recipe_js_alert,
+    layout: __solidLayoutAlertLayout,
     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 };
+export { AlertLayout };