@humain/ui 2.4.2 → 2.4.4

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

@@ -1,22 +1,22 @@
-import { a as O } from "./rolldown-runtime.js";
-import { i as P, n as Z, t as A } from "./vendor/react.js";
-import { t as V } from "./dist.js";
-import { t as G } from "./FileTypeIcon.js";
-import { t as L } from "./heart.js";
-import { t as B } from "./search.js";
+import { a as $ } from "./rolldown-runtime.js";
+import { i as O, n as P, t as Z } from "./vendor/react.js";
+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 { n as o } from "./utils.js";
-import { c as D, s as j } from "./_shared.js";
-import { t as H } from "./button.js";
-import { t as F } from "./FeaturedIcon.js";
-var m = /* @__PURE__ */ O(P(), 1), t = A(), R = {
+import { c as B, s as j } from "./_shared.js";
+import { t as D } from "./button.js";
+import { t as H } from "./FeaturedIcon.js";
+var m = /* @__PURE__ */ $(O(), 1), t = Z(), F = {
   sm: "size-[336px]",
   md: "size-[480px]",
   lg: "size-[768px]"
-}, q = {
+}, R = {
   sm: "24px 24px",
   md: "32px 32px",
   lg: "48px 48px"
-}, W = {
+}, q = {
   sm: {
     cloud: "h-[118px] w-[152px]",
     box: "h-[124px] w-[152px]",
@@ -35,66 +35,61 @@ var m = /* @__PURE__ */ O(P(), 1), t = A(), R = {
     documents: "h-40 w-[220px]",
     "credit-card": "h-40 w-[220px]"
   }
-}, X = {
+}, W = {
   sm: "p-2",
   md: "p-2.5",
   lg: "p-2.5"
-}, J = {
+}, X = {
   sm: "size-4",
   md: "size-4",
   lg: "size-5"
-}, v = {
-  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 _({ icon: r, size: e }) {
+function b({ icon: r, size: e }) {
   return /* @__PURE__ */ (0, t.jsx)("span", {
     "data-slot": "empty-state-icon-glyph",
     "data-testid": "empty-state-icon-glyph",
     "data-centered": "true",
     "aria-hidden": "true",
-    className: o("inline-flex shrink-0 items-center justify-center leading-none [line-height:0] [&>svg]:block [&>svg]:size-full [&>svg]:shrink-0", J[e]),
+    className: o("inline-flex shrink-0 items-center justify-center leading-none [line-height:0] [&>svg]:block [&>svg]:size-full [&>svg]:shrink-0", X[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: q[r]
-}), it = {
+  backgroundSize: R[r]
+}), st = {
   sm: [
     96,
     144,
@@ -122,14 +117,14 @@ var st = (r, e = !1) => ({
     672,
     768
   ]
-}, w = m.forwardRef(({ className: r, size: e = "sm", variant: a = "circles", style: s, ...i }, c) => a === "none" ? null : /* @__PURE__ */ (0, t.jsxs)("div", {
+}, _ = m.forwardRef(({ className: r, size: e = "sm", variant: a = "circles", style: s, ...i }, c) => a === "none" ? null : /* @__PURE__ */ (0, t.jsxs)("div", {
   ref: c,
   "data-slot": "empty-state-background-pattern",
   "data-testid": "empty-state-pattern",
   "data-size": e,
   "data-variant": a,
   "aria-hidden": "true",
-  className: o("pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden opacity-75", R[e], r),
+  className: o("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),
   style: s,
   ...i,
   children: [
@@ -147,11 +142,11 @@ var st = (r, e = !1) => ({
     }),
     (a === "grid" || a === "grid-dot") && /* @__PURE__ */ (0, t.jsx)("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__ */ (0, t.jsx)("div", {
       className: "absolute inset-0",
-      children: it[e].map((n) => /* @__PURE__ */ (0, t.jsx)("span", {
+      children: st[e].map((n) => /* @__PURE__ */ (0, t.jsx)("span", {
         className: "absolute left-1/2 top-1/2 rounded-xl border border-border/55",
         style: {
           width: n,
@@ -162,8 +157,8 @@ var st = (r, e = !1) => ({
     })
   ]
 }));
-w.displayName = "EmptyStateBackgroundPattern";
-function ot({ tone: r }) {
+_.displayName = "EmptyStateBackgroundPattern";
+function it({ tone: r }) {
   const e = r === "primary" ? "bg-primary/70" : "bg-muted-foreground/10";
   return /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [
     /* @__PURE__ */ (0, t.jsx)("span", { className: o("absolute left-[7%] top-[8%] size-2 rounded-full", e) }),
@@ -172,8 +167,9 @@ function ot({ tone: r }) {
     /* @__PURE__ */ (0, t.jsx)("span", { className: o("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__ */ (0, t.jsxs)("g", {
+    transform: "translate(10.5 14.5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [/* @__PURE__ */ (0, t.jsx)("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",
@@ -185,8 +181,9 @@ function lt({ accentId: r, shadeId: e, tone: a }) {
     })]
   });
 }
-function nt({ accentId: r, shadeId: e }) {
+function lt({ accentId: r, shadeId: e }) {
   return /* @__PURE__ */ (0, t.jsxs)("g", {
+    transform: "translate(-19.5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [
       /* @__PURE__ */ (0, t.jsx)("path", {
@@ -214,8 +211,9 @@ function nt({ accentId: r, shadeId: e }) {
     ]
   });
 }
-function dt({ accentId: r, shadeId: e }) {
+function nt({ accentId: r, shadeId: e }) {
   return /* @__PURE__ */ (0, t.jsxs)("g", {
+    transform: "translate(0 -0.5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [
       /* @__PURE__ */ (0, t.jsxs)("g", {
@@ -263,8 +261,9 @@ function dt({ accentId: r, shadeId: e }) {
     ]
   });
 }
-function ct({ accentId: r, shadeId: e }) {
+function dt({ accentId: r, shadeId: e }) {
   return /* @__PURE__ */ (0, t.jsxs)("g", {
+    transform: "translate(0 -5)",
     className: "drop-shadow-[0_8px_16px_var(--shadow-soft-3-color)]",
     children: [
       /* @__PURE__ */ (0, t.jsx)("rect", {
@@ -319,7 +318,7 @@ function ct({ accentId: r, shadeId: e }) {
     ]
   });
 }
-var C = m.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone: s = "primary", icon: i = /* @__PURE__ */ (0, t.jsx)(L, { "aria-hidden": "true" }), ...c }, n) => {
+var w = m.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone: s = "primary", icon: i = /* @__PURE__ */ (0, t.jsx)(G, { "aria-hidden": "true" }), ...c }, n) => {
   const l = m.useId(), p = m.useId(), d = s === "primary";
   return /* @__PURE__ */ (0, t.jsxs)("div", {
     ref: n,
@@ -329,16 +328,16 @@ var C = m.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone
     "data-variant": a,
     "data-tone": s,
     "aria-hidden": "true",
-    className: o("relative shrink-0 text-primary", !d && "text-muted-foreground", W[e][a], r),
+    className: o("relative shrink-0 text-primary", !d && "text-muted-foreground", q[e][a], r),
     ...c,
     children: [
       /* @__PURE__ */ (0, t.jsx)("div", {
         "data-slot": "empty-state-illustration-background",
         "data-testid": "empty-state-illustration-background",
         "data-centered": "true",
-        className: o("absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", d ? "bg-primary/20" : "bg-muted/80", K[e], v[a])
+        className: o("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full", d ? "bg-primary/20" : "bg-muted/80", J[e])
       }),
-      /* @__PURE__ */ (0, t.jsx)(ot, { tone: s }),
+      /* @__PURE__ */ (0, t.jsx)(it, { tone: s }),
       /* @__PURE__ */ (0, t.jsxs)("svg", {
         viewBox: "0 0 220 168",
         className: "absolute inset-0 size-full overflow-visible",
@@ -369,20 +368,20 @@ var C = m.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone
               stopOpacity: d ? 0.18 : 0.14
             })]
           })] }),
-          a === "cloud" && /* @__PURE__ */ (0, t.jsx)(lt, {
+          a === "cloud" && /* @__PURE__ */ (0, t.jsx)(ot, {
             accentId: l,
             shadeId: p,
             tone: s
           }),
-          a === "box" && /* @__PURE__ */ (0, t.jsx)(nt, {
+          a === "box" && /* @__PURE__ */ (0, t.jsx)(lt, {
             accentId: l,
             shadeId: p
           }),
-          a === "documents" && /* @__PURE__ */ (0, t.jsx)(dt, {
+          a === "documents" && /* @__PURE__ */ (0, t.jsx)(nt, {
             accentId: l,
             shadeId: p
           }),
-          a === "credit-card" && /* @__PURE__ */ (0, t.jsx)(ct, {
+          a === "credit-card" && /* @__PURE__ */ (0, t.jsx)(dt, {
             accentId: l,
             shadeId: p
           })
@@ -392,8 +391,8 @@ var C = m.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: o("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", !d && "bg-muted text-muted-foreground", X[e], v[a]),
-        children: /* @__PURE__ */ (0, t.jsx)(_, {
+        className: o("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", !d && "bg-muted text-muted-foreground", W[e]),
+        children: /* @__PURE__ */ (0, t.jsx)(b, {
           icon: i,
           size: e
         })
@@ -401,8 +400,8 @@ var C = m.forwardRef(({ className: r, size: e = "sm", variant: a = "cloud", tone
     ]
   });
 });
-C.displayName = "EmptyStateIllustration";
-var pt = V("relative isolate mx-auto flex w-full max-w-[512px] items-center justify-center overflow-visible py-8 text-center", {
+w.displayName = "EmptyStateIllustration";
+var ct = A("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]",
@@ -410,12 +409,12 @@ var pt = V("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 b(r, e) {
+function v(r, e) {
   const { label: a, onClick: s, startIcon: i, disabled: c, loading: n, "aria-label": l } = r;
-  return /* @__PURE__ */ (0, t.jsx)(H, {
+  return /* @__PURE__ */ (0, t.jsx)(D, {
     appearance: e === "primary" ? "solid" : "outline",
     variant: e === "primary" ? "primary" : "secondary",
     size: "sm",
@@ -429,20 +428,20 @@ function b(r, e) {
     children: a
   });
 }
-var N = m.forwardRef(({ className: r, title: e, description: a, size: s = "sm", media: i = "featured-icon", pattern: c = "auto", icon: n, iconLabel: l, illustrationVariant: p = "cloud", illustrationTone: d = "gray", fileExtension: f, fileType: z = "document", primaryAction: h, secondaryAction: x, actions: g, headingLevel: S = 3, ...E }, M) => {
-  const I = at[S], T = mt(c, i), y = n ?? /* @__PURE__ */ (0, t.jsx)(B, { "aria-hidden": "true" }), $ = g || h || x;
+var C = m.forwardRef(({ className: r, title: e, description: a, size: s = "sm", media: i = "featured-icon", pattern: c = "auto", icon: n, iconLabel: l, illustrationVariant: p = "cloud", illustrationTone: d = "gray", fileExtension: f, fileType: k = "document", primaryAction: h, secondaryAction: x, actions: g, headingLevel: z = 3, ...S }, E) => {
+  const M = rt[z], I = pt(c, i), y = n ?? /* @__PURE__ */ (0, t.jsx)(L, { "aria-hidden": "true" }), T = g || h || x;
   return /* @__PURE__ */ (0, t.jsx)("section", {
-    ref: M,
+    ref: E,
     "data-slot": "empty-state",
     "aria-label": typeof e == "string" ? e : "Empty state",
-    className: o(pt({ size: s }), r),
-    ...E,
+    className: o(ct({ size: s }), r),
+    ...S,
     children: /* @__PURE__ */ (0, t.jsxs)("div", {
       "data-slot": "empty-state-content",
-      className: o("relative z-10 flex min-w-0 flex-1 flex-col items-center", tt[s]),
+      className: o("relative z-10 flex min-w-0 flex-1 flex-col items-center", Y[s]),
       children: [/* @__PURE__ */ (0, t.jsxs)("div", {
         "data-slot": "empty-state-body",
-        className: o("flex w-full flex-col items-center", Y[s]),
+        className: o("flex w-full flex-col items-center", U[s]),
         children: [i !== "none" && /* @__PURE__ */ (0, t.jsxs)("div", {
           "data-slot": "empty-state-media",
           "data-testid": "empty-state-media",
@@ -450,25 +449,25 @@ var N = m.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__ */ (0, t.jsx)(w, {
+            /* @__PURE__ */ (0, t.jsx)(_, {
               size: s,
-              variant: T,
+              variant: I,
               "data-centered": "true",
               className: "z-0"
             }),
-            i === "featured-icon" && /* @__PURE__ */ (0, t.jsx)(F, {
+            i === "featured-icon" && /* @__PURE__ */ (0, t.jsx)(H, {
               "data-slot": "empty-state-featured-icon",
-              size: et[s],
+              size: tt[s],
               shape: "rounded",
               intent: "default",
-              icon: /* @__PURE__ */ (0, t.jsx)(_, {
+              icon: /* @__PURE__ */ (0, t.jsx)(b, {
                 icon: y,
                 size: s
               }),
               "aria-label": l,
               className: "relative z-10 delight-stagger motion-reduce:animate-none"
             }),
-            i === "illustration" && /* @__PURE__ */ (0, t.jsx)(C, {
+            i === "illustration" && /* @__PURE__ */ (0, t.jsx)(w, {
               size: s,
               variant: p,
               tone: d,
@@ -479,15 +478,15 @@ var N = m.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: o("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: o("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__ */ (0, t.jsx)("div", {
                 "data-slot": "empty-state-file-icon-optical-center",
                 "data-testid": "empty-state-file-icon-optical-center",
                 "data-centered": "true",
-                children: /* @__PURE__ */ (0, t.jsx)(G, {
+                children: /* @__PURE__ */ (0, t.jsx)(V, {
                   extension: f,
-                  fileType: f ? void 0 : z,
-                  size: rt[s],
+                  fileType: f ? void 0 : k,
+                  size: et[s],
                   className: "drop-shadow-[0_1px_2px_var(--shadow-xs-1-color)]"
                 })
               })
@@ -495,8 +494,8 @@ var N = m.forwardRef(({ className: r, title: e, description: a, size: s = "sm",
           ]
         }), /* @__PURE__ */ (0, t.jsxs)("div", {
           "data-slot": "empty-state-text",
-          className: o("flex w-full max-w-[352px] flex-col items-center text-center", U[s]),
-          children: [/* @__PURE__ */ (0, t.jsx)(I, {
+          className: o("flex w-full max-w-[352px] flex-col items-center text-center", Q[s]),
+          children: [/* @__PURE__ */ (0, t.jsx)(M, {
             className: "w-full text-base font-semibold leading-6 text-foreground",
             children: e
           }), a && /* @__PURE__ */ (0, t.jsx)("p", {
@@ -504,16 +503,16 @@ var N = m.forwardRef(({ className: r, title: e, description: a, size: s = "sm",
             children: a
           })]
         })]
-      }), $ && /* @__PURE__ */ (0, t.jsx)("div", {
+      }), T && /* @__PURE__ */ (0, t.jsx)("div", {
         "data-slot": "empty-state-actions",
         className: "flex flex-wrap items-center justify-center gap-3",
-        children: g ?? /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [x && b(x, "secondary"), h && b(h, "primary")] })
+        children: g ?? /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [x && v(x, "secondary"), h && v(h, "primary")] })
       })]
     })
   });
 });
-N.displayName = "EmptyState";
-var ut = Z(), u = {
+C.displayName = "EmptyState";
+var mt = P(), u = {
   title: "string",
   description: "string",
   size: "string",
@@ -529,7 +528,7 @@ var ut = Z(), u = {
   secondaryAction: "json",
   actions: "json",
   headingLevel: "string"
-}, k = class extends HTMLElement {
+}, N = class extends HTMLElement {
   _root = null;
   _childrenContainer = null;
   _props = {};
@@ -545,7 +544,7 @@ var ut = Z(), 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 = (0, ut.createRoot)(e), this._render();
+    this.appendChild(e), this._root = (0, mt.createRoot)(e), this._render();
   }
   disconnectedCallback() {
     this._root?.unmount(), this._root = null;
@@ -558,7 +557,7 @@ var ut = Z(), u = {
   }
   _setProp(r, e) {
     const a = u[r] || "string";
-    this._props[r] = D(e, a), this._render();
+    this._props[r] = B(e, a), this._render();
   }
   _getProp(r) {
     if (r in this._props) return this._props[r];
@@ -573,7 +572,7 @@ var ut = Z(), u = {
       const i = a.replace(/([A-Z])/g, "-$1").toLowerCase();
       r[a] = j(this.getAttribute(i), s);
     }
-    const e = m.createElement(N, r, m.createElement("span", {
+    const e = m.createElement(C, r, m.createElement("span", {
       ref: (a) => {
         a && this._childrenContainer && a.replaceWith(this._childrenContainer);
       },
@@ -582,7 +581,7 @@ var ut = Z(), u = {
     this._root.render(e);
   }
 };
-for (const r of Object.keys(u)) Object.defineProperty(k.prototype, r, {
+for (const r of Object.keys(u)) Object.defineProperty(N.prototype, r, {
   get() {
     return this._getProp(r);
   },
@@ -592,10 +591,10 @@ for (const r of Object.keys(u)) Object.defineProperty(k.prototype, r, {
   enumerable: !0,
   configurable: !0
 });
-typeof customElements < "u" && !customElements.get("hf-empty-state") && customElements.define("hf-empty-state", k);
+typeof customElements < "u" && !customElements.get("hf-empty-state") && customElements.define("hf-empty-state", N);
 export {
-  k as EmptyStateWC,
-  k as default
+  N as EmptyStateWC,
+  N as default
 };
 
 //# sourceMappingURL=hf-empty-state.js.map