@photon-ai/pho-ui 1.0.1 → 1.2.0

package/dist/chunks/{close-button-8f-oRJXt.js → close-button-Bq9f-H15.js}

@@ -1,13 +1,13 @@
 "use client";
 import { t as p } from "./cn-DTiB6ek_.js";
-import { n as G, r as C } from "./link-provider-9TFNyDqO.js";
-import { t as N } from "./resolve-variant-CcD8iG5l.js";
-import { n as T } from "./spinner-Cy8bkyJf.js";
-import { t as Z } from "./IconX-pZ9vrtSr.js";
-import { isValidElement as B, useMemo as K } from "react";
-import { Fragment as Q, jsx as t, jsxs as W } from "react/jsx-runtime";
-import { motion as w } from "motion/react";
-var X = p("group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"), L = {
+import { n as Z, r as I } from "./link-provider-9TFNyDqO.js";
+import { t as k } from "./resolve-variant-CcD8iG5l.js";
+import { n as C } from "./spinner-Cy8bkyJf.js";
+import { t as Q } from "./IconX-pZ9vrtSr.js";
+import { isValidElement as A, useEffect as X, useMemo as J, useRef as Y, useState as $ } from "react";
+import { Fragment as z, jsx as t, jsxs as ee } from "react/jsx-runtime";
+import { motion as S, useReducedMotion as oe } from "motion/react";
+var ae = p("group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-pho-brand transition-[color,background-color,border-color,opacity,box-shadow,outline-color] duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"), L = {
   sm: {
     classes: p("gap-1 px-3.5 py-1.5 text-base font-medium data-svg-only:p-2", "has-[[data-icon=prefix]]:pl-2 has-[[data-icon=loading]]:pl-2 has-[[data-icon=suffix]]:pr-2"),
     description: "Small — compact rows, tables, and toolbars"
@@ -20,7 +20,7 @@ var X = p("group relative inline-flex h-max cursor-pointer items-center justify-
     classes: p("gap-1.5 px-5 py-2.5 text-md font-medium data-svg-only:p-3", "has-[[data-icon=prefix]]:pl-3 has-[[data-icon=loading]]:pl-3 has-[[data-icon=suffix]]:pr-3"),
     description: "Large — prominent and marketing actions"
   }
-}, z = {
+}, re = {
   rounded: {
     classes: "rounded-full",
     description: "Pill — the default; every button on photon.codes"
@@ -33,11 +33,11 @@ var X = p("group relative inline-flex h-max cursor-pointer items-center justify-
     classes: "rounded-full",
     description: "Circular — pair with svgOnly for round icon buttons"
   }
-}, J = "squircle", Y = {
+}, ne = "squircle", te = {
   sm: "py-[4.5px] data-svg-only:p-[6.5px]",
   md: "py-[6.5px] data-svg-only:p-[8.5px]",
   lg: "py-[8.5px] data-svg-only:p-[10.5px]"
-}, ge = {
+}, Te = {
   effect: {
     classes: "",
     description: "Default — marketing pill with same-hue outer rim and inset sheen"
@@ -54,7 +54,7 @@ var X = p("group relative inline-flex h-max cursor-pointer items-center justify-
     classes: "",
     description: "Borderless — quiet / inline action"
   }
-}, xe = {
+}, Re = {
   default: {
     classes: "",
     description: "Neutral / brand contrast"
@@ -63,7 +63,7 @@ var X = p("group relative inline-flex h-max cursor-pointer items-center justify-
     classes: "",
     description: "Destructive intent (delete, discard)"
   }
-}, $ = {
+}, se = {
   effect: {
     default: p("squircle overflow-hidden bg-pho-brand-solid text-pho-on-brand transition-none", "hover:bg-pho-brand-solid data-loading:bg-pho-brand-solid", "[--pho-rim:color-mix(in_oklab,var(--background-color-pho-brand-solid)_62%,transparent)]", "[--pho-sheen:light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.12))]", "shadow-[0_0_0_1.5px_var(--pho-rim),inset_0_0_0_1px_var(--border-color-pho-on-brand),inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]"),
     destructive: p("squircle overflow-hidden bg-pho-error-solid text-white outline-pho-error transition-none", "hover:bg-pho-error-solid data-loading:bg-pho-error-solid", "[--pho-rim:color-mix(in_oklab,var(--background-color-pho-error-solid)_62%,transparent)]", "[--pho-sheen:light-dark(rgba(255,255,255,0.45),rgba(0,0,0,0.18))]", "shadow-[0_0_0_1.5px_var(--pho-rim),inset_0_0_0_1px_oklch(1_0_0/0.2),inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]")
@@ -81,40 +81,40 @@ var X = p("group relative inline-flex h-max cursor-pointer items-center justify-
     destructive: "text-pho-error outline-pho-error hover:bg-pho-error-primary hover:text-pho-error-hover data-loading:bg-pho-error-primary"
   }
 };
-function O(e) {
-  const { variant: r = "effect", color: o = "default", size: a = "md", shape: n = "rounded", className: i } = e ?? {}, d = r === "effect" ? "rounded" : n, s = $[r]?.[o] ?? "";
-  return p(X, N(z, d), d === "square" && a === "lg" && J, N(L, a), r === "effect" && Y[a], s, i);
+function F(e) {
+  const { variant: a = "effect", color: o = "default", size: r = "md", shape: n = "rounded", className: s } = e ?? {}, l = a === "effect" ? "rounded" : n, i = se[a]?.[o] ?? "";
+  return p(ae, k(re, l), l === "square" && r === "lg" && ne, k(L, r), a === "effect" && te[r], i, s);
 }
-var ee = "transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-[1.125em] [&>svg]:shrink-0";
-function S({ position: e, children: r }) {
+var ie = "transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-[1.125em] [&>svg]:shrink-0";
+function w({ position: e, children: a }) {
   return /* @__PURE__ */ t("span", {
     "data-icon": e,
-    className: ee,
-    children: r
+    className: ie,
+    children: a
   });
 }
-function R(e, r) {
-  return e == null || e === !1 ? null : C(e) ? /* @__PURE__ */ t(S, {
-    position: r,
+function B(e, a) {
+  return e == null || e === !1 ? null : I(e) ? /* @__PURE__ */ t(w, {
+    position: a,
     children: /* @__PURE__ */ t(e, {})
-  }) : B(e) ? /* @__PURE__ */ t(S, {
-    position: r,
+  }) : A(e) ? /* @__PURE__ */ t(w, {
+    position: a,
     children: e
   }) : null;
 }
-function I(e, r) {
-  e && !r && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("Button: `svgOnly` buttons require an `aria-label` that names the action.");
+function U(e, a) {
+  e && !a && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("Button: `svgOnly` buttons require an `aria-label` that names the action.");
 }
-var A = {
+var V = {
   type: "spring",
   stiffness: 200,
   damping: 30,
   mass: 0.1
-}, re = {
+}, le = {
   "--pho-sheen-y": "0px",
   "--pho-sheen-blur": "5px",
   "--pho-sheen-spread": "2px"
-}, oe = {
+}, pe = {
   sm: {
     "--pho-sheen-y": "-3px",
     "--pho-sheen-blur": "8px",
@@ -130,7 +130,7 @@ var A = {
     "--pho-sheen-blur": "14px",
     "--pho-sheen-spread": "1px"
   }
-}, ae = {
+}, de = {
   sm: {
     "--pho-sheen-y": "1.5px",
     "--pho-sheen-blur": "4px",
@@ -146,7 +146,84 @@ var A = {
     "--pho-sheen-blur": "7px",
     "--pho-sheen-spread": "1px"
   }
-}, te = 0.97, ne = {
+}, he = 0.97, ce = {
+  sm: {
+    "--pho-sheen-y": [
+      "1.5px",
+      "-4px",
+      "0px"
+    ],
+    "--pho-sheen-blur": [
+      "4px",
+      "9px",
+      "5px"
+    ],
+    "--pho-sheen-spread": [
+      "1px",
+      "2px",
+      "2px"
+    ]
+  },
+  md: {
+    "--pho-sheen-y": [
+      "1.5px",
+      "-4px",
+      "0px"
+    ],
+    "--pho-sheen-blur": [
+      "4px",
+      "9px",
+      "5px"
+    ],
+    "--pho-sheen-spread": [
+      "1px",
+      "2px",
+      "2px"
+    ]
+  },
+  lg: {
+    "--pho-sheen-y": [
+      "3px",
+      "-8px",
+      "0px"
+    ],
+    "--pho-sheen-blur": [
+      "7px",
+      "16px",
+      "5px"
+    ],
+    "--pho-sheen-spread": [
+      "1px",
+      "1px",
+      "2px"
+    ]
+  }
+}, ue = {
+  duration: 0.6,
+  delay: 0.05,
+  times: [
+    0,
+    0.4,
+    1
+  ],
+  ease: ["easeOut", "easeInOut"]
+};
+function M(e, a) {
+  const [o, r] = $(!1), n = Y(e), s = oe();
+  return X(() => {
+    n.current && !e && a && !s ? r(!0) : e && r(!1), n.current = e;
+  }, [
+    e,
+    a,
+    s
+  ]), {
+    waking: o,
+    onWakeComplete: (l) => {
+      l === "wake" && r(!1);
+    }
+  };
+}
+var fe = {
   sm: {
     rest: {
       opacity: 0,
@@ -183,16 +260,16 @@ var A = {
       height: 21
     }
   }
-}, F = {
+}, P = {
   sm: "has-[[data-icon=prefix]]:pl-3.5 has-[[data-icon=loading]]:pl-3.5 has-[[data-icon=suffix]]:pr-3.5",
   md: "has-[[data-icon=prefix]]:pl-4 has-[[data-icon=loading]]:pl-4 has-[[data-icon=suffix]]:pr-4",
   lg: "has-[[data-icon=prefix]]:pl-5 has-[[data-icon=loading]]:pl-5 has-[[data-icon=suffix]]:pr-5"
 };
-function E({ position: e, size: r, children: o }) {
-  return /* @__PURE__ */ t(w.span, {
+function N({ position: e, size: a, children: o }) {
+  return /* @__PURE__ */ t(S.span, {
     "data-icon": e,
-    variants: ne[r],
-    transition: A,
+    variants: fe[a],
+    transition: V,
     style: {
       display: "inline-flex",
       flex: "none",
@@ -203,218 +280,216 @@ function E({ position: e, size: r, children: o }) {
     children: o
   });
 }
-function k(e, r, o) {
+function O(e, a, o) {
   if (!(e == null || e === !1))
-    return C(e) ? /* @__PURE__ */ t(E, {
-      position: r,
+    return I(e) ? /* @__PURE__ */ t(N, {
+      position: a,
       size: o,
       children: /* @__PURE__ */ t(e, {})
-    }) : B(e) ? /* @__PURE__ */ t(E, {
-      position: r,
+    }) : A(e) ? /* @__PURE__ */ t(N, {
+      position: a,
       size: o,
       children: e
-    }) : /* @__PURE__ */ t(E, {
-      position: r,
+    }) : /* @__PURE__ */ t(N, {
+      position: a,
       size: o,
       children: e
     });
 }
-function V({ svgOnly: e, loading: r, prefix: o, suffix: a, children: n, iconReveal: i, size: d }) {
-  if (e) return r ? /* @__PURE__ */ t(T, {}) : n;
-  const s = !!i;
-  return /* @__PURE__ */ W(Q, { children: [
-    r ? /* @__PURE__ */ t(S, {
+function q({ svgOnly: e, loading: a, prefix: o, suffix: r, children: n, iconReveal: s, size: l }) {
+  if (e) return a ? /* @__PURE__ */ t(C, {}) : n;
+  const i = !!s;
+  return /* @__PURE__ */ ee(z, { children: [
+    a ? /* @__PURE__ */ t(w, {
       position: "loading",
-      children: /* @__PURE__ */ t(T, {})
-    }) : s ? k(o, "prefix", d) : R(o, "prefix"),
+      children: /* @__PURE__ */ t(C, {})
+    }) : i ? O(o, "prefix", l) : B(o, "prefix"),
     n != null && n !== !1 && /* @__PURE__ */ t("span", {
       "data-text": !0,
       className: "transition-inherit-all px-0.5",
       children: n
     }),
-    s ? k(a, "suffix", d) : R(a, "suffix")
+    i ? O(r, "suffix", l) : B(r, "suffix")
   ] });
 }
-function P(e, r, o) {
-  const a = o.sheen ? {
-    ...re,
-    scale: 1
-  } : {}, n = o.sheen ? { ...oe[e] } : {}, i = o.sheen ? {
-    ...ae[e],
-    scale: te
+function H(e, a, o) {
+  const r = {
+    scale: 1,
+    ...o.sheen ? le : {}
+  }, n = o.sheen ? { ...pe[e] } : {}, s = {
+    scale: he,
+    ...o.sheen ? de[e] : {}
+  }, l = o.sheen ? {
+    ...ce[e],
+    transition: ue
   } : {};
-  return o.iconReveal && (a.gap = 0, n.gap = e === "lg" ? 4 : 0), {
+  return o.iconReveal && (r.gap = 0, n.gap = e === "lg" ? 4 : 0), {
     initial: !1,
-    animate: "rest",
-    whileHover: r ? void 0 : "hover",
-    whileTap: r || !o.sheen ? void 0 : "press",
+    animate: o.waking && o.sheen ? "wake" : "rest",
+    whileHover: a ? void 0 : "hover",
+    whileTap: a ? void 0 : "press",
     variants: {
-      rest: a,
+      rest: r,
       hover: n,
-      press: i
+      press: s,
+      wake: l
     },
-    transition: A
+    transition: V
   };
 }
-function U({ variant: e, color: r, size: o, shape: a, loading: n, svgOnly: i, className: d }) {
-  return p(O({
+function W({ variant: e, color: a, size: o, shape: r, loading: n, svgOnly: s, className: l }) {
+  return p(F({
     variant: e,
-    color: r,
+    color: a,
     size: o,
-    shape: a
-  }), n && "pointer-events-none", i && "[&>svg]:size-[1.25em] [&>svg]:shrink-0", d);
+    shape: r
+  }), n && "pointer-events-none", s && "[&>svg]:size-[1.25em] [&>svg]:shrink-0", l);
 }
-function q({ variant: e = "effect", color: r, size: o = "md", shape: a, prefix: n, suffix: i, iconReveal: d = !1, svgOnly: s, loading: l, children: b, className: x, ref: g, ...f }) {
-  I(s, f["aria-label"]);
-  const c = e === "effect", h = d && !s, v = U({
+function D({ variant: e = "effect", color: a, size: o = "md", shape: r, prefix: n, suffix: s, iconReveal: l = !1, svgOnly: i, loading: d, children: b, className: g, ref: _, ...v }) {
+  U(i, v["aria-label"]);
+  const h = e === "effect", u = l && !i, m = !!(v.disabled || d), { waking: f, onWakeComplete: y } = M(m, h), x = W({
     variant: e,
-    color: r,
+    color: a,
     size: o,
-    shape: a,
-    loading: l,
-    svgOnly: s,
-    className: p(h && F[o], x)
-  }), u = V({
-    svgOnly: s,
-    loading: l,
+    shape: r,
+    loading: d,
+    svgOnly: i,
+    className: p(u && P[o], g)
+  }), E = q({
+    svgOnly: i,
+    loading: d,
     prefix: n,
-    suffix: i,
+    suffix: s,
     children: b,
-    iconReveal: h,
+    iconReveal: u,
     size: o
   });
-  return c || h ? /* @__PURE__ */ t(w.button, {
-    ref: g,
+  return /* @__PURE__ */ t(S.button, {
+    ref: _,
     type: "button",
-    ...P(o, f.disabled || l, {
-      sheen: c,
-      iconReveal: h
+    ...H(o, m, {
+      sheen: h,
+      iconReveal: u,
+      waking: f
     }),
-    ...f,
-    "aria-busy": l || void 0,
-    "data-loading": l ? "true" : void 0,
-    "data-svg-only": s ? "true" : void 0,
-    className: v,
-    children: u
-  }) : /* @__PURE__ */ t("button", {
-    ref: g,
-    type: "button",
-    ...f,
-    "aria-busy": l || void 0,
-    "data-loading": l ? "true" : void 0,
-    "data-svg-only": s ? "true" : void 0,
-    className: v,
-    children: u
+    onAnimationComplete: y,
+    ...v,
+    "aria-busy": d || void 0,
+    "data-loading": d ? "true" : void 0,
+    "data-svg-only": i ? "true" : void 0,
+    "data-waking": f || void 0,
+    className: x,
+    children: E
   });
 }
-q.displayName = "Button";
-function D({ variant: e = "effect", color: r, size: o = "md", shape: a, prefix: n, suffix: i, iconReveal: d = !1, svgOnly: s, loading: l, disabled: b, href: x, children: g, className: f, ...c }) {
-  I(s, c["aria-label"]);
-  const h = G(), v = e === "effect", u = d && !s, H = U({
+D.displayName = "Button";
+function j({ variant: e = "effect", color: a, size: o = "md", shape: r, prefix: n, suffix: s, iconReveal: l = !1, svgOnly: i, loading: d, disabled: b, href: g, children: _, className: v, ...h }) {
+  U(i, h["aria-label"]);
+  const u = Z(), m = e === "effect", f = l && !i, y = W({
     variant: e,
-    color: r,
+    color: a,
     size: o,
-    shape: a,
-    loading: l,
-    svgOnly: s,
-    className: p(u && F[o], f)
-  }), _ = V({
-    svgOnly: s,
-    loading: l,
+    shape: r,
+    loading: d,
+    svgOnly: i,
+    className: p(f && P[o], v)
+  }), x = q({
+    svgOnly: i,
+    loading: d,
     prefix: n,
-    suffix: i,
-    children: g,
-    iconReveal: u,
+    suffix: s,
+    children: _,
+    iconReveal: f,
     size: o
-  }), M = K(() => w.create(h), [h]), m = !!(b || l), y = {
-    ...c,
-    ...m ? {} : { href: x },
-    "aria-disabled": m || void 0,
-    "aria-busy": l || void 0,
-    "data-loading": l ? "true" : void 0,
-    "data-svg-only": s ? "true" : void 0,
-    className: H,
-    tabIndex: m ? -1 : c.tabIndex,
-    onClick: m ? (j) => {
-      j.preventDefault();
-    } : c.onClick
+  }), E = J(() => S.create(u), [u]), c = !!(b || d), { waking: T, onWakeComplete: G } = M(c, m), R = {
+    ...h,
+    ...c ? {} : { href: g },
+    "aria-disabled": c || void 0,
+    "aria-busy": d || void 0,
+    "data-loading": d ? "true" : void 0,
+    "data-svg-only": i ? "true" : void 0,
+    className: y,
+    tabIndex: c ? -1 : h.tabIndex,
+    onClick: c ? (K) => {
+      K.preventDefault();
+    } : h.onClick
   };
-  return m ? /* @__PURE__ */ t("span", {
-    ...y,
-    children: _
-  }) : v || u ? /* @__PURE__ */ t(M, {
-    ...P(o, b || l, {
-      sheen: v,
-      iconReveal: u
+  return c ? /* @__PURE__ */ t("span", {
+    ...R,
+    children: x
+  }) : /* @__PURE__ */ t(E, {
+    ...H(o, c, {
+      sheen: m,
+      iconReveal: f,
+      waking: T
     }),
-    ...y,
-    children: _
-  }) : /* @__PURE__ */ t(h, {
-    ...y,
-    children: _
+    onAnimationComplete: G,
+    "data-waking": T || void 0,
+    ...R,
+    children: x
   });
 }
-D.displayName = "ButtonLink";
-var _e = L;
-function ye(e) {
-  const { size: r = "md", fullWidth: o, className: a } = e ?? {};
-  return O({
+j.displayName = "ButtonLink";
+var Ce = L;
+function Be(e) {
+  const { size: a = "md", fullWidth: o, className: r } = e ?? {};
+  return F({
     variant: "effect",
-    size: r,
-    className: p(o && "w-full", a)
+    size: a,
+    className: p(o && "w-full", r)
   });
 }
-function se({ size: e = "md", fullWidth: r, animated: o, iconReveal: a, className: n, ...i }) {
-  return /* @__PURE__ */ t(q, {
+function ve({ size: e = "md", fullWidth: a, animated: o, iconReveal: r, className: n, ...s }) {
+  return /* @__PURE__ */ t(D, {
     variant: "effect",
     size: e,
-    iconReveal: a ?? o ?? !0,
-    className: p(r && "w-full", n),
-    ...i
+    iconReveal: r ?? o ?? !0,
+    className: p(a && "w-full", n),
+    ...s
   });
 }
-se.displayName = "EffectButton";
-function ie({ size: e = "md", fullWidth: r, animated: o, iconReveal: a, className: n, ...i }) {
-  return /* @__PURE__ */ t(D, {
+ve.displayName = "EffectButton";
+function me({ size: e = "md", fullWidth: a, animated: o, iconReveal: r, className: n, ...s }) {
+  return /* @__PURE__ */ t(j, {
     variant: "effect",
     size: e,
-    iconReveal: a ?? o ?? !0,
-    className: p(r && "w-full", n),
-    ...i
+    iconReveal: r ?? o ?? !0,
+    className: p(a && "w-full", n),
+    ...s
   });
 }
-ie.displayName = "EffectButtonLink";
-var le = {
+me.displayName = "EffectButtonLink";
+var xe = {
   sm: { classes: "size-9 rounded-base *:size-5" },
   md: { classes: "size-10 rounded-base *:size-5" },
   lg: { classes: "size-11 rounded-base *:size-6" }
 };
-function pe({ size: e = "sm", label: r, className: o, ...a }) {
+function be({ size: e = "sm", label: a, className: o, ...r }) {
   return /* @__PURE__ */ t("button", {
     type: "button",
-    "aria-label": r || "Close",
-    ...a,
-    className: p("squircle text-pho-secondary outline-pho-brand hover:bg-pho-ghost-hover hover:text-pho-secondary-hover inline-flex cursor-pointer items-center justify-center p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", N(le, e), o),
-    children: /* @__PURE__ */ t(Z, {
+    "aria-label": a || "Close",
+    ...r,
+    className: p("squircle text-pho-secondary outline-pho-brand hover:bg-pho-ghost-hover hover:text-pho-secondary-hover inline-flex cursor-pointer items-center justify-center p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", k(xe, e), o),
+    children: /* @__PURE__ */ t(Q, {
       "aria-hidden": "true",
       className: "transition-inherit-all shrink-0"
     })
   });
 }
-pe.displayName = "CloseButton";
+be.displayName = "CloseButton";
 export {
-  ge as a,
-  _e as c,
-  O as d,
-  ye as f,
+  Te as a,
+  Ce as c,
+  F as d,
+  Be as f,
   L as i,
-  se as l,
-  xe as n,
-  q as o,
-  z as r,
-  D as s,
-  pe as t,
-  ie as u
+  ve as l,
+  Re as n,
+  D as o,
+  re as r,
+  j as s,
+  be as t,
+  me as u
 };
 
-//# sourceMappingURL=close-button-8f-oRJXt.js.map
+//# sourceMappingURL=close-button-Bq9f-H15.js.map