npm - @skiddph/prui - Versions diffs - 0.9.0 → 0.9.1 - Mend

@skiddph/prui 0.9.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/core/modal.js CHANGED Viewed

@@ -1,79 +1,86 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import * as o from "react";
-import { createRoot as X } from "react-dom/client";
-import { X as q } from "lucide-react";
-import { cn as G } from "./cn.js";
-import { useReducedMotion as B, useOverlay as F, Portal as H } from "./overlay.js";
-import { getPruiDictionary as J } from "../i18n.js";
-const O = {
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+import { createRoot as q } from "react-dom/client";
+import { X as G } from "lucide-react";
+import { cn as H } from "./cn.js";
+import { useReducedMotion as F, useOverlay as O, Portal as J } from "./overlay.js";
+import { getPruiDictionary as K } from "../i18n.js";
+const Y = {
   xs: { width: "320px", minWidth: "280px" },
   sm: { width: "448px", minWidth: "320px" },
   md: { width: "640px", minWidth: "384px" },
   lg: { width: "896px", minWidth: "512px" },
   xl: { width: "1152px", minWidth: "640px" }
-}, K = {
+}, Q = {
   xs: "24px 32px",
   sm: "24px 32px",
   md: "32px 40px",
   lg: "32px 40px",
   xl: "40px 48px"
-}, Q = o.forwardRef(function({
-  open: r,
-  onClose: n,
+}, U = r.forwardRef(function({
+  open: t,
+  onClose: a,
   children: W,
-  disableDefaultClose: p = !1,
+  disableDefaultClose: m = !1,
   closeOnOverlayClick: M = !0,
-  size: y,
-  xs: S,
-  sm: T,
+  size: w,
+  xs: R,
+  sm: S,
   md: N,
-  lg: m,
+  lg: f,
   xl: b,
-  maxWidth: R,
-  padding: z,
-  noPadding: w = !1,
-  showCloseButton: k = !0,
-  ariaLabel: f,
-  className: h,
+  maxWidth: z,
+  padding: P,
+  noPadding: k = !1,
+  showCloseButton: C = !0,
+  ariaLabel: h,
+  className: v,
   style: s,
-  initialFocus: P = "first"
+  initialFocus: j = "first"
 }, l) {
-  const v = y ?? (S ? "xs" : T ? "sm" : m ? "lg" : b ? "xl" : "md"), [x, i] = o.useState(r), [d, u] = o.useState(!1), [g, L] = o.useState(!1), A = o.useRef(null), C = B(), E = () => {
-    C || (L(!0), setTimeout(() => L(!1), 500));
+  const x = w ?? (R ? "xs" : S ? "sm" : f ? "lg" : b ? "xl" : "md"), [g, i] = r.useState(t), [u, c] = r.useState(!1), [y, E] = r.useState(!1), V = r.useRef(null), T = F(), d = r.useRef(null), I = () => {
+    T || (E(!0), d.current != null && window.clearTimeout(d.current), d.current = window.setTimeout(() => {
+      d.current = null, E(!1);
+    }, 500));
   };
-  o.useEffect(() => {
-    if (r) {
-      if (i(!0), C) {
-        u(!0);
+  r.useEffect(
+    () => () => {
+      d.current != null && window.clearTimeout(d.current);
+    },
+    []
+  ), r.useEffect(() => {
+    if (t) {
+      if (i(!0), T) {
+        c(!0);
         return;
       }
-      const t = setTimeout(() => {
-        u(!0);
+      const o = setTimeout(() => {
+        c(!0);
       }, 10);
-      return () => clearTimeout(t);
+      return () => clearTimeout(o);
     }
-    u(!1), C && i(!1);
-  }, [r, C]);
-  const { ref: V } = F({
-    open: r,
+    c(!1), T && i(!1);
+  }, [t, T]);
+  const { ref: D } = O({
+    open: t,
     onEscape: () => {
-      if (p)
-        return E(), !1;
-      n();
+      if (m)
+        return I(), !1;
+      a();
     },
-    initialFocus: P
+    initialFocus: j
   });
-  if (!x && !d) return null;
-  const I = (t) => {
-    if (t.target === t.currentTarget) {
-      if (p || !M) {
-        E();
+  if (!g && !u) return null;
+  const B = (o) => {
+    if (o.target === o.currentTarget) {
+      if (m || !M) {
+        I();
         return;
       }
-      n();
+      a();
     }
-  }, j = O[v], D = w ? "0" : z ?? K[v];
-  return /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e("div", { ref: V, children: /* @__PURE__ */ e(
+  }, L = Y[x], X = k ? "0" : P ?? Q[x];
+  return /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e("div", { ref: D, children: /* @__PURE__ */ e(
     "div",
     {
       className: "prui-modal-overlay fixed inset-0 z-[var(--prui-z-modal)] flex justify-center overflow-y-auto p-4",
@@ -82,55 +89,55 @@ const O = {
         paddingTop: "10vh",
         backgroundColor: "var(--prui-scrim)",
         backdropFilter: "blur(4px)",
-        opacity: d ? 1 : 0,
+        opacity: u ? 1 : 0,
         transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
       },
-      onClick: I,
-      onMouseDown: (t) => {
-        t.target === t.currentTarget && I(t);
+      onClick: B,
+      onMouseDown: (o) => {
+        o.target === o.currentTarget && B(o);
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ n(
         "div",
         {
-          ref: (t) => {
-            A.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+          ref: (o) => {
+            V.current = o, typeof l == "function" ? l(o) : l && (l.current = o);
           },
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": f,
-          className: G(
+          "aria-label": h,
+          className: H(
             "prui-modal-content relative h-fit m-auto w-full",
-            g && "prui-modal-shake",
-            h
+            y && "prui-modal-shake",
+            v
           ),
           style: {
-            width: j.width,
-            minWidth: j.minWidth,
-            maxWidth: R ?? j.width,
-            padding: D,
+            width: L.width,
+            minWidth: L.minWidth,
+            maxWidth: z ?? L.width,
+            padding: X,
             backgroundColor: "var(--prui-surface)",
             border: "1px solid var(--prui-line)",
             borderRadius: "var(--prui-radius-3)",
             boxShadow: "var(--prui-shadow-modal)",
             color: "var(--prui-fg)",
-            transform: d ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
-            opacity: d ? 1 : 0,
+            transform: u ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
+            opacity: u ? 1 : 0,
             transition: "transform var(--prui-duration-slow) var(--prui-ease-out), opacity var(--prui-duration-slow) var(--prui-ease-out)",
             ...s
           },
           onTransitionEnd: () => {
-            r || i(!1);
+            t || i(!1);
           },
           children: [
             W,
-            k && !p ? /* @__PURE__ */ e(
+            C && !m ? /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: n,
+                onClick: a,
                 "aria-label": "Close modal",
                 className: "absolute right-4 top-4 flex h-10 w-10 cursor-pointer items-center justify-center rounded-[var(--prui-radius)] text-[var(--prui-dim)] transition-all hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
-                children: /* @__PURE__ */ e(q, { className: "h-4 w-4", "aria-hidden": !0 })
+                children: /* @__PURE__ */ e(G, { className: "h-4 w-4", "aria-hidden": !0 })
               }
             ) : null
           ]
@@ -139,32 +146,32 @@ const O = {
     }
   ) }) });
 });
-Q.displayName = "Modal";
-const Y = {
+U.displayName = "Modal";
+const A = {
   success: "var(--prui-ok)",
   warning: "var(--prui-warn)",
   danger: "var(--prui-danger)",
   error: "var(--prui-danger)",
   info: "var(--prui-brand)",
   default: "var(--prui-brand)"
-}, U = ({ type: c }) => {
-  const r = Y[c ?? "default"];
-  switch (c) {
+}, Z = ({ type: p }) => {
+  const t = A[p ?? "default"];
+  switch (p) {
     case "success":
-      return /* @__PURE__ */ a("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: [
+      return /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: [
         /* @__PURE__ */ e("path", { d: "M9 12l2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
         /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" })
       ] });
     case "warning":
-      return /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.694-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+      return /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.694-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
     case "danger":
     case "error":
-      return /* @__PURE__ */ a("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: [
+      return /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: [
         /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
         /* @__PURE__ */ e("path", { d: "M15 9l-6 6m0-6l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ] });
     case "info":
-      return /* @__PURE__ */ a("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: r }, "aria-hidden": !0, children: [
+      return /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: t }, "aria-hidden": !0, children: [
         /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
         /* @__PURE__ */ e("path", { d: "M12 8v4m0 4h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ] });
@@ -172,39 +179,39 @@ const Y = {
       return null;
   }
 };
-function oe(c) {
-  const r = J(), { title: n, message: W, confirmText: p = r.confirm, cancelText: M = r.cancel, type: y, size: S = "sm" } = c, T = Y[y ?? "default"];
+function ne(p) {
+  const t = K(), { title: a, message: W, confirmText: m = t.confirm, cancelText: M = t.cancel, type: w, size: R = "sm" } = p, S = A[w ?? "default"];
   return new Promise((N) => {
-    const m = document.createElement("div");
-    document.body.appendChild(m);
-    const b = X(m), R = () => {
+    const f = document.createElement("div");
+    document.body.appendChild(f);
+    const b = q(f), z = () => {
       setTimeout(() => {
-        b.unmount(), m.remove();
+        b.unmount(), f.remove();
       }, 320);
-    }, z = () => {
-      const [w, k] = o.useState(!1), [f, h] = o.useState(!1), [s, P] = o.useState(!1), l = o.useRef(null), v = o.useRef(null), x = B();
-      o.useEffect(() => {
-        if (x) {
-          k(!0), h(!0);
+    }, P = () => {
+      const [k, C] = r.useState(!1), [h, v] = r.useState(!1), [s, j] = r.useState(!1), l = r.useRef(null), x = r.useRef(null), g = F();
+      r.useEffect(() => {
+        if (g) {
+          C(!0), v(!0);
           return;
         }
-        const g = setTimeout(() => {
-          k(!0), h(!0);
+        const y = setTimeout(() => {
+          C(!0), v(!0);
         }, 10);
-        return () => clearTimeout(g);
-      }, [x]);
-      const i = (g) => {
-        P(!0), h(!1), setTimeout(() => {
-          R(), N(g);
-        }, x ? 0 : 300);
-      }, { ref: d } = F({
-        open: w && !s,
+        return () => clearTimeout(y);
+      }, [g]);
+      const i = (y) => {
+        j(!0), v(!1), setTimeout(() => {
+          z(), N(y);
+        }, g ? 0 : 300);
+      }, { ref: u } = O({
+        open: k && !s,
         onEscape: () => (s || i(!1), !1),
-        initialFocus: v
+        initialFocus: x
       });
-      if (!w) return null;
-      const u = O[S];
-      return /* @__PURE__ */ e("div", { ref: d, children: /* @__PURE__ */ e(
+      if (!k) return null;
+      const c = Y[R];
+      return /* @__PURE__ */ e("div", { ref: u, children: /* @__PURE__ */ e(
         "div",
         {
           className: "prui-modal-overlay fixed inset-0 z-[var(--prui-z-confirm)] flex justify-center overflow-y-auto p-4",
@@ -213,37 +220,37 @@ function oe(c) {
             paddingTop: "12vh",
             backgroundColor: "var(--prui-scrim)",
             backdropFilter: "blur(4px)",
-            opacity: f ? 1 : 0,
+            opacity: h ? 1 : 0,
             transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
           },
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ n(
             "div",
             {
               role: "alertdialog",
               "aria-modal": "true",
-              "aria-label": n,
+              "aria-label": a,
               className: "prui-modal-content relative m-auto w-full",
               style: {
-                width: u.width,
-                minWidth: u.minWidth,
+                width: c.width,
+                minWidth: c.minWidth,
                 backgroundColor: "var(--prui-surface)",
                 border: "1px solid var(--prui-line)",
                 borderRadius: "var(--prui-radius-3)",
                 boxShadow: "var(--prui-shadow-modal)",
                 color: "var(--prui-fg)",
-                transform: f ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
-                opacity: f ? 1 : 0,
+                transform: h ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
+                opacity: h ? 1 : 0,
                 transition: "transform var(--prui-duration-slow) var(--prui-ease-out), opacity var(--prui-duration-slow) var(--prui-ease-out)"
               },
               children: [
-                /* @__PURE__ */ a("div", { className: "flex items-start gap-3 p-4 pb-2", children: [
-                  /* @__PURE__ */ e(U, { type: y }),
-                  /* @__PURE__ */ a("div", { className: "min-w-0", children: [
-                    /* @__PURE__ */ e("h2", { className: "m-0 text-lg font-semibold leading-normal", style: { color: "var(--prui-fg)" }, children: n }),
+                /* @__PURE__ */ n("div", { className: "flex items-start gap-3 p-4 pb-2", children: [
+                  /* @__PURE__ */ e(Z, { type: w }),
+                  /* @__PURE__ */ n("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ e("h2", { className: "m-0 text-lg font-semibold leading-normal", style: { color: "var(--prui-fg)" }, children: a }),
                     /* @__PURE__ */ e("p", { className: "mt-2 text-sm leading-normal", style: { color: "var(--prui-dim)" }, children: W })
                   ] })
                 ] }),
-                /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-3 px-4 pb-4", children: [
+                /* @__PURE__ */ n("div", { className: "flex items-center justify-end gap-3 px-4 pb-4", children: [
                   /* @__PURE__ */ e(
                     "button",
                     {
@@ -260,12 +267,12 @@ function oe(c) {
                     "button",
                     {
                       type: "button",
-                      ref: v,
+                      ref: x,
                       disabled: s,
                       onClick: () => i(!0),
                       className: "cursor-pointer rounded-[var(--prui-radius)] border border-transparent px-4 py-2 text-sm font-medium text-white transition-all disabled:opacity-60",
-                      style: { backgroundColor: T },
-                      children: p
+                      style: { backgroundColor: S },
+                      children: m
                     }
                   )
                 ] })
@@ -275,10 +282,10 @@ function oe(c) {
         }
       ) });
     };
-    b.render(/* @__PURE__ */ e(z, {}));
+    b.render(/* @__PURE__ */ e(P, {}));
   });
 }
-const ae = {
+const ie = {
   name: "Modal",
   props: [
     { name: "open", type: "boolean", default: null, control: "boolean" },
@@ -292,7 +299,7 @@ const ae = {
     { name: "maxWidth", type: "string (CSS)", default: "per-size", control: "text" },
     { name: "initialFocus", type: 'ref | "first" | "container" | false', default: '"first"', control: "none" }
   ]
-}, ie = {
+}, ae = {
   name: "confirmModal",
   props: [
     { name: "title", type: "string", default: null, control: "text" },
@@ -303,8 +310,8 @@ const ae = {
   ]
 };
 export {
-  Q as Modal,
-  oe as confirmModal,
-  ie as confirmModalPropsMeta,
-  ae as modalPropsMeta
+  U as Modal,
+  ne as confirmModal,
+  ae as confirmModalPropsMeta,
+  ie as modalPropsMeta
 };

package/dist/core/toast.js CHANGED Viewed

@@ -1,97 +1,106 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import * as m from "react";
-import { createPortal as x } from "react-dom";
-import { XCircle as w, AlertTriangle as N, CheckCircle2 as T, Info as p, X as C } from "lucide-react";
-import { cn as s } from "./cn.js";
-import { usePruiI18n as k } from "../i18n.js";
-import { useReducedMotion as I } from "./overlay.js";
-const f = {
-  neutral: { icon: p, accent: "text-[var(--prui-brand)]" },
-  info: { icon: p, accent: "text-[var(--prui-brand)]" },
-  success: { icon: T, accent: "text-[var(--prui-ok)]" },
-  warning: { icon: N, accent: "text-[var(--prui-warn)]" },
-  danger: { icon: w, accent: "text-[var(--prui-danger)]" }
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import * as f from "react";
+import { createPortal as w } from "react-dom";
+import { XCircle as N, AlertTriangle as T, CheckCircle2 as C, Info as b, X as k } from "lucide-react";
+import { cn as l } from "./cn.js";
+import { usePruiI18n as I } from "../i18n.js";
+import { useReducedMotion as M } from "./overlay.js";
+const v = {
+  neutral: { icon: b, accent: "text-[var(--prui-brand)]" },
+  info: { icon: b, accent: "text-[var(--prui-brand)]" },
+  success: { icon: C, accent: "text-[var(--prui-ok)]" },
+  warning: { icon: T, accent: "text-[var(--prui-warn)]" },
+  danger: { icon: N, accent: "text-[var(--prui-danger)]" }
 };
 let P = 1, r = [];
-const c = /* @__PURE__ */ new Set();
-function u() {
-  for (const o of c) o(r);
+const u = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Map();
+function m() {
+  for (const e of u) e(r);
 }
-function l(o) {
-  var e;
-  const t = r.find((i) => i.id === o);
-  r = r.filter((i) => i.id !== o), t && ((e = t.onDismiss) == null || e.call(t)), u();
+function d(e) {
+  var n;
+  const o = s.get(e);
+  o && (clearTimeout(o), s.delete(e));
+  const t = r.find((c) => c.id === e);
+  r = r.filter((c) => c.id !== e), t && ((n = t.onDismiss) == null || n.call(t)), m();
 }
-function D(o) {
-  const t = P++;
-  r = [...r, { ...o, id: t }], u();
-  const e = o.duration ?? 5e3;
-  return e > 0 && typeof setTimeout == "function" && setTimeout(() => l(t), e), { dismiss: () => l(t) };
+function X(e) {
+  const o = P++;
+  r = [...r, { ...e, id: o }], m();
+  const t = e.duration ?? 5e3;
+  return t > 0 && typeof setTimeout == "function" && s.set(
+    o,
+    setTimeout(() => {
+      s.delete(o), d(o);
+    }, t)
+  ), { dismiss: () => d(o) };
 }
-function X() {
-  var t;
-  const o = r;
+function E() {
+  var o;
+  const e = r;
   r = [];
-  for (const e of o) (t = e.onDismiss) == null || t.call(e);
-  u();
+  for (const t of s.values()) clearTimeout(t);
+  s.clear();
+  for (const t of e) (o = t.onDismiss) == null || o.call(t);
+  m();
 }
 function R() {
-  const [o, t] = m.useState(r);
-  return m.useEffect(() => {
-    const e = (i) => t([...i]);
-    return c.add(e), e(r), () => {
-      c.delete(e);
+  const [e, o] = f.useState(r);
+  return f.useEffect(() => {
+    const t = (n) => o([...n]);
+    return u.add(t), t(r), () => {
+      u.delete(t);
     };
-  }, []), o;
+  }, []), e;
 }
-function E({ position: o = "bottom-right", className: t } = {}) {
-  const e = R(), { t: i } = k(), b = I();
+function L({ position: e = "bottom-right", className: o } = {}) {
+  const t = R(), { t: n } = I(), c = M();
   if (typeof document > "u") return null;
-  const v = {
+  const h = {
     "top-right": "top-4 right-4",
     "top-center": "top-4 left-1/2 -translate-x-1/2",
     "bottom-right": "bottom-4 right-4",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
     "bottom-left": "bottom-4 left-4"
-  }[o];
-  return x(
+  }[e];
+  return w(
     /* @__PURE__ */ a(
       "ol",
       {
         "aria-live": "polite",
-        "aria-label": i.notifications,
-        className: s("fixed z-[var(--prui-z-toast)] flex w-80 flex-col gap-2", v, t),
-        children: e.map((n) => {
-          const h = f[n.variant ?? "neutral"].icon, g = f[n.variant ?? "neutral"].accent;
-          return /* @__PURE__ */ d(
+        "aria-label": n.notifications,
+        className: l("fixed z-[var(--prui-z-toast)] flex w-80 flex-col gap-2", h, o),
+        children: t.map((i) => {
+          const g = v[i.variant ?? "neutral"].icon, x = v[i.variant ?? "neutral"].accent;
+          return /* @__PURE__ */ p(
             "li",
             {
               "data-testid": "toast",
-              "data-variant": n.variant ?? "neutral",
-              className: s(
+              "data-variant": i.variant ?? "neutral",
+              className: l(
                 "prui-toast flex items-start gap-3 rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
                 "bg-[var(--prui-surface)] p-4 text-sm shadow-[var(--prui-shadow-md)]",
-                !b && "prui-anim-slide"
+                !c && "prui-anim-slide"
               ),
               children: [
-                /* @__PURE__ */ a(h, { className: s("mt-0.5 h-4 w-4 shrink-0", g), "aria-hidden": !0 }),
-                /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ a("div", { className: "font-medium text-[var(--prui-fg)]", children: n.title }),
-                  n.description ? /* @__PURE__ */ a("div", { className: "mt-0.5 text-[var(--prui-dim)]", children: n.description }) : null
+                /* @__PURE__ */ a(g, { className: l("mt-0.5 h-4 w-4 shrink-0", x), "aria-hidden": !0 }),
+                /* @__PURE__ */ p("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ a("div", { className: "font-medium text-[var(--prui-fg)]", children: i.title }),
+                  i.description ? /* @__PURE__ */ a("div", { className: "mt-0.5 text-[var(--prui-dim)]", children: i.description }) : null
                 ] }),
                 /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
-                    "aria-label": i.dismiss,
-                    onClick: () => l(n.id),
+                    "aria-label": n.dismiss,
+                    onClick: () => d(i.id),
                     className: "-m-1 rounded-[var(--prui-radius-1)] p-1 cursor-pointer text-[var(--prui-dim)] transition-colors hover:text-[var(--prui-fg)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--prui-brand)]",
-                    children: /* @__PURE__ */ a(C, { className: "h-4 w-4", "aria-hidden": !0 })
+                    children: /* @__PURE__ */ a(k, { className: "h-4 w-4", "aria-hidden": !0 })
                   }
                 )
               ]
             },
-            n.id
+            i.id
           );
         })
       }
@@ -99,13 +108,13 @@ function E({ position: o = "bottom-right", className: t } = {}) {
     document.body
   );
 }
-const L = {
+const q = {
   name: "Toaster",
   props: [
     { name: "position", type: "'top-right' | 'top-center' | 'bottom-right' | 'bottom-center' | 'bottom-left'", default: "'bottom-right'", control: "select", options: ["top-right", "top-center", "bottom-right", "bottom-center", "bottom-left"] },
     { name: "className", type: "string", default: "undefined", control: "text" }
   ]
-}, q = {
+}, B = {
   name: "toast()",
   props: [
     { name: "title", type: "ReactNode", default: null, control: "text" },
@@ -115,9 +124,9 @@ const L = {
   ]
 };
 export {
-  E as Toaster,
-  X as dismissAllToasts,
-  D as toast,
-  q as toastPropsMeta,
-  L as toasterPropsMeta
+  L as Toaster,
+  E as dismissAllToasts,
+  X as toast,
+  B as toastPropsMeta,
+  q as toasterPropsMeta
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@skiddph/prui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "PRUI component system: primitives, app-layer super-components, pages, and themes",
   "type": "module",
   "license": "Apache-2.0",