@humain/ui 2.4.1 → 2.4.3

package/dist/wc-react/hf-empty-state.js

@@ -1,23 +1,23 @@
-import { t as A } from "./dist.js";
-import { t as V } from "./FileTypeIcon.js";
-import { t as G } from "./heart.js";
-import { t as L } from "./search.js";
-import { c as B, f as l, s as b } from "./_shared.js";
-import { t as D } from "./button.js";
-import { t as R } from "./FeaturedIcon.js";
+import { t as Z } from "./dist.js";
+import { t as A } from "./FileTypeIcon.js";
+import { t as V } from "./heart.js";
+import { t as G } from "./search.js";
+import { c as L, f as l, s as b } from "./_shared.js";
+import { t as B } from "./button.js";
+import { t as D } from "./FeaturedIcon.js";
 import * as h from "react";
 import _ from "react";
-import { createRoot as H } from "react-dom/client";
-import { Fragment as N, jsx as t, jsxs as i } from "react/jsx-runtime";
-var F = {
+import { createRoot as R } from "react-dom/client";
+import { Fragment as C, jsx as t, jsxs as i } from "react/jsx-runtime";
+var H = {
   sm: "size-[336px]",
   md: "size-[480px]",
   lg: "size-[768px]"
-}, W = {
+}, F = {
   sm: "24px 24px",
   md: "32px 32px",
   lg: "48px 48px"
-}, X = {
+}, W = {
   sm: {
     cloud: "h-[118px] w-[152px]",
     box: "h-[124px] w-[152px]",
@@ -36,66 +36,61 @@ var F = {
     documents: "h-40 w-[220px]",
     "credit-card": "h-40 w-[220px]"
   }
-}, q = {
+}, X = {
   sm: "p-2",
   md: "p-2.5",
   lg: "p-2.5"
-}, J = {
+}, q = {
   sm: "size-4",
   md: "size-4",
   lg: "size-5"
-}, w = {
-  cloud: "top-[58%]",
-  box: "top-[58%]",
-  documents: "top-[60%]",
-  "credit-card": "top-[60%]"
-}, K = {
+}, J = {
   sm: "size-[104px]",
   md: "size-32",
   lg: "size-40"
-}, Q = {
+}, K = {
   sm: "size-20",
   md: "size-24",
   lg: "size-28"
-}, U = {
+}, Q = {
   sm: "gap-1",
   md: "gap-2",
   lg: "gap-2"
-}, Y = {
+}, U = {
   sm: "gap-4",
   md: "gap-5",
   lg: "gap-5"
-}, tt = {
+}, Y = {
   sm: "gap-6",
   md: "gap-8",
   lg: "gap-8"
-}, et = {
+}, tt = {
   sm: "sm",
   md: "md",
   lg: "lg"
-}, rt = {
+}, et = {
   sm: "md",
   md: "md",
   lg: "md"
-}, at = {
+}, rt = {
   2: "h2",
   3: "h3",
   4: "h4"
 };
-function k({ icon: r, size: e }) {
+function N({ icon: r, size: e }) {
   return /* @__PURE__ */ t("span", {
     "data-slot": "empty-state-icon-glyph",
     "data-testid": "empty-state-icon-glyph",
     "data-centered": "true",
     "aria-hidden": "true",
-    className: l("inline-flex shrink-0 items-center justify-center leading-none [line-height:0] [&>svg]:block [&>svg]:size-full [&>svg]:shrink-0", J[e]),
+    className: l("inline-flex shrink-0 items-center justify-center leading-none [line-height:0] [&>svg]:block [&>svg]:size-full [&>svg]:shrink-0", q[e]),
     children: r
   });
 }
-var st = (r, e = !1) => ({
+var at = (r, e = !1) => ({
   backgroundImage: e ? "radial-gradient(circle, color-mix(in oklch, var(--border) 70%, transparent) 1px, transparent 1px)" : ["linear-gradient(to right, color-mix(in oklch, var(--border) 54%, transparent) 1px, transparent 1px)", "linear-gradient(to bottom, color-mix(in oklch, var(--border) 54%, transparent) 1px, transparent 1px)"].join(", "),
-  backgroundSize: W[r]
-}), it = {
+  backgroundSize: F[r]
+}), st = {
   sm: [
     96,
     144,
@@ -123,14 +118,14 @@ var st = (r, e = !1) => ({
     672,
     768
   ]
-}, z = h.forwardRef(({ className: r, size: e = "sm", variant: a = "circles", style: s, ...o }, p) => a === "none" ? null : /* @__PURE__ */ i("div", {
+}, k = h.forwardRef(({ className: r, size: e = "sm", variant: a = "circles", style: s, ...o }, p) => a === "none" ? null : /* @__PURE__ */ i("div", {
   ref: p,
   "data-slot": "empty-state-background-pattern",
   "data-testid": "empty-state-pattern",
   "data-size": e,
   "data-variant": a,
   "aria-hidden": "true",
-  className: l("pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden opacity-75", F[e], r),
+  className: l("pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden opacity-75", H[e], r),
   style: s,
   ...o,
   children: [
@@ -148,11 +143,11 @@ var st = (r, e = !1) => ({
     }),
     (a === "grid" || a === "grid-dot") && /* @__PURE__ */ t("div", {
       className: "absolute inset-0 opacity-70 [mask-image:radial-gradient(circle_at_center,black_0%,black_48%,transparent_76%)]",
-      style: st(e, a === "grid-dot")
+      style: at(e, a === "grid-dot")
     }),
     a === "squares" && /* @__PURE__ */ t("div", {
       className: "absolute inset-0",
-      children: it[e].map((d) => /* @__PURE__ */ t("span", {
+      children: st[e].map((d) => /* @__PURE__ */ t("span", {
         className: "absolute left-1/2 top-1/2 rounded-xl border border-border/55",
         style: {
           width: d,
@@ -163,18 +158,19 @@ var st = (r, e = !1) => ({
     })
   ]
 }));
-z.displayName = "EmptyStateBackgroundPattern";
-function ot({ tone: r }) {
+k.displayName = "EmptyStateBackgroundPattern";
+function it({ tone: r }) {
   const e = r === "primary" ? "bg-primary/70" : "bg-muted-foreground/10";
-  return /* @__PURE__ */ i(N, { children: [
+  return /* @__PURE__ */ i(C, { children: [
     /* @__PURE__ */ t("span", { className: l("absolute left-[7%] top-[8%] size-2 rounded-full", e) }),
     /* @__PURE__ */ t("span", { className: l("absolute right-[6%] top-[18%] size-3 rounded-full", e) }),
     /* @__PURE__ */ t("span", { className: l("absolute bottom-[10%] left-[8%] size-3 rounded-full", e) }),
     /* @__PURE__ */ t("span", { className: l("absolute bottom-[18%] right-[13%] size-2 rounded-full", e) })
   ] });
 }
-function lt({ accentId: r, shadeId: e, tone: a }) {
+function ot({ accentId: r, shadeId: e, tone: a }) {
   return /* @__PURE__ */ i("g", {
+    transform: "translate(10.5 14.5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [/* @__PURE__ */ t("path", {
       d: "M54 110c-21 0-38-14-38-32 0-16 14-30 33-32 8-19 27-31 49-31 27 0 50 19 55 43 17 3 30 16 30 32 0 19-18 34-40 34H55c-1 0-1-14-1-14Z",
@@ -186,8 +182,9 @@ function lt({ accentId: r, shadeId: e, tone: a }) {
     })]
   });
 }
-function nt({ accentId: r, shadeId: e }) {
+function lt({ accentId: r, shadeId: e }) {
   return /* @__PURE__ */ i("g", {
+    transform: "translate(-19.5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [
       /* @__PURE__ */ t("path", {
@@ -215,8 +212,9 @@ function nt({ accentId: r, shadeId: e }) {
     ]
   });
 }
-function dt({ accentId: r, shadeId: e }) {
+function nt({ accentId: r, shadeId: e }) {
   return /* @__PURE__ */ i("g", {
+    transform: "translate(0 -0.5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [
       /* @__PURE__ */ i("g", {
@@ -264,8 +262,9 @@ function dt({ accentId: r, shadeId: e }) {
     ]
   });
 }
-function ct({ accentId: r, shadeId: e }) {
+function dt({ accentId: r, shadeId: e }) {
   return /* @__PURE__ */ i("g", {
+    transform: "translate(0 -5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [
       /* @__PURE__ */ t("rect", {
@@ -320,7 +319,7 @@ function ct({ accentId: r, shadeId: e }) {
     ]
   });
 }
-var S = h.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone: s = "primary", icon: o = /* @__PURE__ */ t(G, { "aria-hidden": "true" }), ...p }, d) => {
+var z = h.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone: s = "primary", icon: o = /* @__PURE__ */ t(V, { "aria-hidden": "true" }), ...p }, d) => {
   const n = h.useId(), m = h.useId(), c = s === "primary";
   return /* @__PURE__ */ i("div", {
     ref: d,
@@ -330,16 +329,16 @@ var S = h.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone
     "data-variant": a,
     "data-tone": s,
     "aria-hidden": "true",
-    className: l("relative shrink-0 text-primary", !c && "text-muted-foreground", X[e][a], r),
+    className: l("relative shrink-0 text-primary", !c && "text-muted-foreground", W[e][a], r),
     ...p,
     children: [
       /* @__PURE__ */ t("div", {
         "data-slot": "empty-state-illustration-background",
         "data-testid": "empty-state-illustration-background",
         "data-centered": "true",
-        className: l("absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", c ? "bg-primary/20" : "bg-muted/80", K[e], w[a])
+        className: l("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", c ? "bg-primary/20" : "bg-muted/80", J[e])
       }),
-      /* @__PURE__ */ t(ot, { tone: s }),
+      /* @__PURE__ */ t(it, { tone: s }),
       /* @__PURE__ */ i("svg", {
         viewBox: "0 0 220 168",
         className: "absolute inset-0 size-full overflow-visible",
@@ -370,20 +369,20 @@ var S = h.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone
               stopOpacity: c ? 0.18 : 0.14
             })]
           })] }),
-          a === "cloud" && /* @__PURE__ */ t(lt, {
+          a === "cloud" && /* @__PURE__ */ t(ot, {
             accentId: n,
             shadeId: m,
             tone: s
           }),
-          a === "box" && /* @__PURE__ */ t(nt, {
+          a === "box" && /* @__PURE__ */ t(lt, {
             accentId: n,
             shadeId: m
           }),
-          a === "documents" && /* @__PURE__ */ t(dt, {
+          a === "documents" && /* @__PURE__ */ t(nt, {
             accentId: n,
             shadeId: m
           }),
-          a === "credit-card" && /* @__PURE__ */ t(ct, {
+          a === "credit-card" && /* @__PURE__ */ t(dt, {
             accentId: n,
             shadeId: m
           })
@@ -393,8 +392,8 @@ var S = h.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone
         "data-slot": "empty-state-illustration-icon",
         "data-testid": "empty-state-illustration-icon",
         "data-centered": "true",
-        className: l("absolute left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-xs backdrop-blur-md supports-backdrop-filter:backdrop-blur-md [&>svg]:shrink-0", !c && "bg-muted text-muted-foreground", q[e], w[a]),
-        children: /* @__PURE__ */ t(k, {
+        className: l("absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-xs backdrop-blur-md supports-backdrop-filter:backdrop-blur-md [&>svg]:shrink-0", !c && "bg-muted text-muted-foreground", X[e]),
+        children: /* @__PURE__ */ t(N, {
           icon: o,
           size: e
         })
@@ -402,8 +401,8 @@ var S = h.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone
     ]
   });
 });
-S.displayName = "EmptyStateIllustration";
-var pt = A("relative isolate mx-auto flex w-full max-w-[512px] items-center justify-center overflow-visible py-8 text-center", {
+z.displayName = "EmptyStateIllustration";
+var ct = Z("relative isolate mx-auto flex w-full max-w-[512px] items-center justify-center overflow-visible py-8 text-center", {
   variants: { size: {
     sm: "min-h-[212px]",
     md: "min-h-[280px]",
@@ -411,12 +410,12 @@ var pt = A("relative isolate mx-auto flex w-full max-w-[512px] items-center just
   } },
   defaultVariants: { size: "sm" }
 });
-function mt(r, e) {
+function pt(r, e) {
   return !r || r === "auto" ? e === "illustration" ? "grid" : e === "none" ? "none" : "circles" : r;
 }
-function C(r, e) {
+function w(r, e) {
   const { label: a, onClick: s, startIcon: o, disabled: p, loading: d, "aria-label": n } = r;
-  return /* @__PURE__ */ t(D, {
+  return /* @__PURE__ */ t(B, {
     appearance: e === "primary" ? "solid" : "outline",
     variant: e === "primary" ? "primary" : "secondary",
     size: "sm",
@@ -430,20 +429,20 @@ function C(r, e) {
     children: a
   });
 }
-var E = h.forwardRef(({ className: r, title: e, description: a, size: s = "sm", media: o = "featured-icon", pattern: p = "auto", icon: d, iconLabel: n, illustrationVariant: m = "cloud", illustrationTone: c = "gray", fileExtension: y, fileType: I = "document", primaryAction: f, secondaryAction: g, actions: x, headingLevel: M = 3, ...$ }, T) => {
-  const O = at[M], P = mt(p, o), v = d ?? /* @__PURE__ */ t(L, { "aria-hidden": "true" }), Z = x || f || g;
+var S = h.forwardRef(({ className: r, title: e, description: a, size: s = "sm", media: o = "featured-icon", pattern: p = "auto", icon: d, iconLabel: n, illustrationVariant: m = "cloud", illustrationTone: c = "gray", fileExtension: y, fileType: j = "document", primaryAction: f, secondaryAction: g, actions: x, headingLevel: M = 3, ...I }, $) => {
+  const T = rt[M], O = pt(p, o), v = d ?? /* @__PURE__ */ t(G, { "aria-hidden": "true" }), P = x || f || g;
   return /* @__PURE__ */ t("section", {
-    ref: T,
+    ref: $,
     "data-slot": "empty-state",
     "aria-label": typeof e == "string" ? e : "Empty state",
-    className: l(pt({ size: s }), r),
-    ...$,
+    className: l(ct({ size: s }), r),
+    ...I,
     children: /* @__PURE__ */ i("div", {
       "data-slot": "empty-state-content",
-      className: l("relative z-10 flex min-w-0 flex-1 flex-col items-center", tt[s]),
+      className: l("relative z-10 flex min-w-0 flex-1 flex-col items-center", Y[s]),
       children: [/* @__PURE__ */ i("div", {
         "data-slot": "empty-state-body",
-        className: l("flex w-full flex-col items-center", Y[s]),
+        className: l("flex w-full flex-col items-center", U[s]),
         children: [o !== "none" && /* @__PURE__ */ i("div", {
           "data-slot": "empty-state-media",
           "data-testid": "empty-state-media",
@@ -451,25 +450,25 @@ var E = h.forwardRef(({ className: r, title: e, description: a, size: s = "sm",
           "data-centered": "true",
           className: "relative flex w-full min-w-0 justify-center",
           children: [
-            /* @__PURE__ */ t(z, {
+            /* @__PURE__ */ t(k, {
               size: s,
-              variant: P,
+              variant: O,
               "data-centered": "true",
               className: "z-0"
             }),
-            o === "featured-icon" && /* @__PURE__ */ t(R, {
+            o === "featured-icon" && /* @__PURE__ */ t(D, {
               "data-slot": "empty-state-featured-icon",
-              size: et[s],
+              size: tt[s],
               shape: "rounded",
               intent: "default",
-              icon: /* @__PURE__ */ t(k, {
+              icon: /* @__PURE__ */ t(N, {
                 icon: v,
                 size: s
               }),
               "aria-label": n,
               className: "relative z-10 delight-stagger motion-reduce:animate-none"
             }),
-            o === "illustration" && /* @__PURE__ */ t(S, {
+            o === "illustration" && /* @__PURE__ */ t(z, {
               size: s,
               variant: m,
               tone: c,
@@ -480,15 +479,15 @@ var E = h.forwardRef(({ className: r, title: e, description: a, size: s = "sm",
               "data-slot": "empty-state-file-icon-wrap",
               "data-testid": "empty-state-file-icon-wrap",
               "data-centered": "true",
-              className: l("relative z-10 flex items-center justify-center rounded-full bg-linear-[104deg,color-mix(in_oklch,var(--card)_60%,transparent),color-mix(in_oklch,var(--muted)_55%,transparent)] delight-stagger motion-reduce:animate-none", Q[s]),
+              className: l("relative z-10 flex items-center justify-center rounded-full bg-linear-[104deg,color-mix(in_oklch,var(--card)_60%,transparent),color-mix(in_oklch,var(--muted)_55%,transparent)] delight-stagger motion-reduce:animate-none", K[s]),
               children: /* @__PURE__ */ t("div", {
                 "data-slot": "empty-state-file-icon-optical-center",
                 "data-testid": "empty-state-file-icon-optical-center",
                 "data-centered": "true",
-                children: /* @__PURE__ */ t(V, {
+                children: /* @__PURE__ */ t(A, {
                   extension: y,
-                  fileType: y ? void 0 : I,
-                  size: rt[s],
+                  fileType: y ? void 0 : j,
+                  size: et[s],
                   className: "drop-shadow-[0_1px_2px_var(--shadow-xs-1-color)]"
                 })
               })
@@ -496,8 +495,8 @@ var E = h.forwardRef(({ className: r, title: e, description: a, size: s = "sm",
           ]
         }), /* @__PURE__ */ i("div", {
           "data-slot": "empty-state-text",
-          className: l("flex w-full max-w-[352px] flex-col items-center text-center", U[s]),
-          children: [/* @__PURE__ */ t(O, {
+          className: l("flex w-full max-w-[352px] flex-col items-center text-center", Q[s]),
+          children: [/* @__PURE__ */ t(T, {
             className: "w-full text-base font-semibold leading-6 text-foreground",
             children: e
           }), a && /* @__PURE__ */ t("p", {
@@ -505,15 +504,15 @@ var E = h.forwardRef(({ className: r, title: e, description: a, size: s = "sm",
             children: a
           })]
         })]
-      }), Z && /* @__PURE__ */ t("div", {
+      }), P && /* @__PURE__ */ t("div", {
         "data-slot": "empty-state-actions",
         className: "flex flex-wrap items-center justify-center gap-3",
-        children: x ?? /* @__PURE__ */ i(N, { children: [g && C(g, "secondary"), f && C(f, "primary")] })
+        children: x ?? /* @__PURE__ */ i(C, { children: [g && w(g, "secondary"), f && w(f, "primary")] })
       })]
     })
   });
 });
-E.displayName = "EmptyState";
+S.displayName = "EmptyState";
 var u = {
   title: "string",
   description: "string",
@@ -530,7 +529,7 @@ var u = {
   secondaryAction: "json",
   actions: "json",
   headingLevel: "string"
-}, j = class extends HTMLElement {
+}, E = class extends HTMLElement {
   _root = null;
   _childrenContainer = null;
   _props = {};
@@ -546,7 +545,7 @@ var u = {
       a.nodeType === Node.TEXT_NODE && !a.textContent?.trim() || r.push(a);
     const e = this.ownerDocument.createElement("div");
     for (e.style.display = "contents", this._childrenContainer = this.ownerDocument.createElement("div"), this._childrenContainer.style.display = "contents", r.forEach((a) => this._childrenContainer.appendChild(a)); this.firstChild; ) this.removeChild(this.firstChild);
-    this.appendChild(e), this._root = H(e), this._render();
+    this.appendChild(e), this._root = R(e), this._render();
   }
   disconnectedCallback() {
     this._root?.unmount(), this._root = null;
@@ -559,7 +558,7 @@ var u = {
   }
   _setProp(r, e) {
     const a = u[r] || "string";
-    this._props[r] = B(e, a), this._render();
+    this._props[r] = L(e, a), this._render();
   }
   _getProp(r) {
     if (r in this._props) return this._props[r];
@@ -574,7 +573,7 @@ var u = {
       const o = a.replace(/([A-Z])/g, "-$1").toLowerCase();
       r[a] = b(this.getAttribute(o), s);
     }
-    const e = _.createElement(E, r, _.createElement("span", {
+    const e = _.createElement(S, r, _.createElement("span", {
       ref: (a) => {
         a && this._childrenContainer && a.replaceWith(this._childrenContainer);
       },
@@ -583,7 +582,7 @@ var u = {
     this._root.render(e);
   }
 };
-for (const r of Object.keys(u)) Object.defineProperty(j.prototype, r, {
+for (const r of Object.keys(u)) Object.defineProperty(E.prototype, r, {
   get() {
     return this._getProp(r);
   },
@@ -593,10 +592,10 @@ for (const r of Object.keys(u)) Object.defineProperty(j.prototype, r, {
   enumerable: !0,
   configurable: !0
 });
-typeof customElements < "u" && !customElements.get("hf-empty-state") && customElements.define("hf-empty-state", j);
+typeof customElements < "u" && !customElements.get("hf-empty-state") && customElements.define("hf-empty-state", E);
 export {
-  j as EmptyStateWC,
-  j as default
+  E as EmptyStateWC,
+  E as default
 };
 
 //# sourceMappingURL=hf-empty-state.js.map