@photon-ai/pho-ui 2.1.1 → 2.2.0

package/dist/chunks/basic-page-CB36yrpL.js

@@ -0,0 +1,643 @@
+"use client";
+import { t as r } from "./cn-ChIgwEl3.js";
+import { n as ie } from "./link-provider-9TFNyDqO.js";
+import { o as re } from "./button-BmhyLgy5.js";
+import { t as se } from "./createReactComponent-BqCmnqfX.js";
+import { t as oe } from "./error-Da7P5WZi.js";
+import { t as R } from "./IconChevronLeft-CSWMKQ4C.js";
+import { t as le } from "./animated-height-C2eQstGy.js";
+import { Children as z, createContext as ce, isValidElement as me, useContext as ue, useEffect as pe, useLayoutEffect as F, useRef as j, useState as b } from "react";
+import { Fragment as de, jsx as n, jsxs as d } from "react/jsx-runtime";
+import { AnimatePresence as L, motion as p, useReducedMotion as v } from "motion/react";
+var fe = [["path", {
+  d: "M9 6l6 6l-6 6",
+  key: "svg-0"
+}]], he = se("outline", "chevron-right", "ChevronRight", fe), K = "rounded-base border border-pho-secondary bg-pho-primary", C = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", ye = `${K} ${C}`, H = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", xe = "flex min-h-[4.25rem] min-w-0 flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6", ve = "flex flex-col gap-3 px-5 py-4", ge = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", Ne = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", f = {
+  type: "spring",
+  stiffness: 400,
+  damping: 40
+}, h = {
+  duration: 0.25,
+  ease: "easeOut"
+}, _ = 12;
+function be({ className: e, ...t }) {
+  return /* @__PURE__ */ n("div", {
+    className: r("relative mx-auto flex min-h-full w-full max-w-[44.5rem] min-w-0 flex-col px-5 pt-12 pb-12 *:min-w-0 has-[[data-basic-page-back]]:pt-16", e),
+    ...t
+  });
+}
+function we(e) {
+  return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function Ae(e) {
+  if (!(typeof e != "string" && typeof e != "number"))
+    return we(String(e)) || void 0;
+}
+function T(e, t) {
+  if (e !== "")
+    return e ?? Ae(t);
+}
+var _e = (e) => `basic-page-morph-${e}`, Ce = { layout: f }, V = 10, D = {
+  delay: 0.2,
+  duration: 0.12,
+  ease: "easeOut"
+}, Ee = {
+  duration: 0.18,
+  ease: "easeOut"
+}, Re = -8, Ie = {
+  duration: 0.16,
+  ease: "easeOut"
+}, Le = {
+  delay: 0.14,
+  duration: 0.16,
+  ease: "easeOut"
+}, $ = {
+  duration: 0.12,
+  ease: "easeOut"
+}, w = [];
+function Te(e) {
+  const t = j({ labels: e });
+  t.current.labels = e, F(() => {
+    const a = t.current;
+    return w.push(a), () => {
+      w.splice(w.indexOf(a), 1);
+    };
+  }, []);
+}
+function U() {
+  const [e] = b(() => {
+    const t = w[w.length - 1];
+    return t ? { labels: [...t.labels] } : null;
+  });
+  return e;
+}
+var E = /* @__PURE__ */ new Map();
+function W(e) {
+  const [t] = b(() => e != null && E.get(e) === !0), a = j(null);
+  return pe(() => {
+    if (e == null || typeof IntersectionObserver > "u") return;
+    const i = a.current;
+    if (!i) return;
+    const s = new IntersectionObserver(([o]) => {
+      o && E.set(e, o.isIntersecting);
+    });
+    return s.observe(i), () => {
+      s.disconnect(), E.delete(e);
+    };
+  }, [e]), {
+    fly: t,
+    ref: a
+  };
+}
+var Oe = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { opacity: h }
+  },
+  rise: {
+    initial: {
+      opacity: 0,
+      y: _
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: f,
+      opacity: h
+    }
+  },
+  slide: {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    transition: { x: Le }
+  }
+};
+function X({ morphId: e, fromClassName: t, fly: a, morphRef: i, arrival: s, className: o, children: m }) {
+  const [u, l] = b(!1), y = !a && s != null ? Oe[s] : null;
+  return /* @__PURE__ */ d(p.span, {
+    ref: i,
+    layoutId: _e(e),
+    initial: y?.initial,
+    animate: y?.animate,
+    transition: a ? Ce : {
+      layout: { duration: 0 },
+      ...y?.transition
+    },
+    onLayoutAnimationStart: () => {
+      a && l(!0);
+    },
+    onLayoutAnimationComplete: () => l(!1),
+    className: r("relative inline-block", o),
+    children: [m, u && /* @__PURE__ */ n(p.span, {
+      "aria-hidden": !0,
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      transition: Ee,
+      onAnimationComplete: () => l(!1),
+      className: r("absolute inset-0", t),
+      children: m
+    })]
+  });
+}
+var G = "max-w-full min-w-0 truncate align-top";
+function Pe({ id: e, morphId: t, enter: a, className: i, children: s, ...o }) {
+  const m = T(e, s), u = v(), l = W(t), y = U(), g = !u && (t != null || a === !0), [c, x] = b(l.fly && y != null);
+  return F(() => {
+    w.length > 0 && x(!1);
+  }, []), /* @__PURE__ */ d("h1", {
+    id: m,
+    className: r("text-display-base text-pho-primary max-w-full min-w-0 scroll-mt-12 px-5 font-medium", g ? "whitespace-nowrap" : "truncate", i),
+    ...o,
+    children: [t != null && !u ? /* @__PURE__ */ n(X, {
+      morphId: t,
+      fromClassName: "text-pho-secondary",
+      fly: l.fly,
+      morphRef: l.ref,
+      arrival: a ? "rise" : void 0,
+      className: G,
+      children: s
+    }) : a && !u ? /* @__PURE__ */ n(p.span, {
+      initial: {
+        opacity: 0,
+        y: _
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      transition: {
+        y: f,
+        opacity: h
+      },
+      className: r("inline-block", G),
+      children: s
+    }) : s, c && /* @__PURE__ */ n(p.span, {
+      "aria-hidden": !0,
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      transition: $,
+      onAnimationComplete: () => x(!1),
+      className: r("text-pho-secondary pointer-events-none absolute inline-flex items-center", Qe),
+      children: /* @__PURE__ */ n(R, {})
+    })]
+  });
+}
+function Se({ className: e, ...t }) {
+  const a = v();
+  return /* @__PURE__ */ n(p.div, {
+    initial: a ? !1 : {
+      opacity: 0,
+      y: _
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: f,
+      opacity: h
+    },
+    className: r("mt-6 flex min-w-0 flex-col gap-10", "*:flex *:min-w-0 *:flex-col *:gap-3", e),
+    ...t
+  });
+}
+function Be({ enter: e, className: t, ...a }) {
+  const i = v();
+  return e && !i ? /* @__PURE__ */ n(p.div, {
+    initial: {
+      opacity: 0,
+      y: _
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: f,
+      opacity: h
+    },
+    className: r("flex min-w-0 flex-col", t),
+    ...a
+  }) : /* @__PURE__ */ n("div", {
+    className: r("flex min-w-0 flex-col", t),
+    ...a
+  });
+}
+function Me({ id: e, className: t, children: a, ...i }) {
+  const s = T(e, a);
+  return /* @__PURE__ */ n("h2", {
+    id: s,
+    className: r("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate px-5 font-medium", t),
+    ...i,
+    children: a
+  });
+}
+function ke({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: r("text-display-xs text-pho-description px-5 font-normal", e),
+    ...t
+  });
+}
+function He({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: r("text-pho-description px-5 text-xs font-normal", e),
+    ...t
+  });
+}
+function Ve({ animateHeight: e, className: t, children: a, ...i }) {
+  return e ? /* @__PURE__ */ n("div", {
+    className: r(K, "min-h-0 overflow-hidden", t),
+    ...i,
+    children: /* @__PURE__ */ n(le, {
+      transition: f,
+      className: C,
+      children: a
+    })
+  }) : /* @__PURE__ */ n("div", {
+    className: r(ye, t),
+    ...i,
+    children: a
+  });
+}
+function De({ className: e, ...t }) {
+  return /* @__PURE__ */ n("div", {
+    className: r(ve, e),
+    ...t
+  });
+}
+function Ge({ divided: e = !1, className: t, ...a }) {
+  return /* @__PURE__ */ n("div", {
+    className: r(e ? Ne : ge, t),
+    ...a
+  });
+}
+function ze({ className: e, icon: t, children: a, ...i }) {
+  if (t == null || t === !1 || t === !0) return /* @__PURE__ */ n("div", {
+    className: r(H, e),
+    ...i,
+    children: a
+  });
+  const [s, ...o] = z.toArray(a);
+  return /* @__PURE__ */ d("div", {
+    className: r(H, e),
+    ...i,
+    children: [/* @__PURE__ */ d("div", {
+      className: "relative",
+      children: [/* @__PURE__ */ n("div", {
+        className: "min-w-0 pr-16",
+        children: s
+      }), /* @__PURE__ */ n("div", {
+        "aria-hidden": !0,
+        className: "text-pho-description pointer-events-none absolute top-1/2 right-0 size-14 -translate-y-1/2 opacity-50 [&>svg]:size-full",
+        children: t
+      })]
+    }), o]
+  });
+}
+function Fe({ id: e, className: t, children: a, ...i }) {
+  const s = T(e, a);
+  return /* @__PURE__ */ n("h2", {
+    id: s,
+    className: r("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", t),
+    ...i,
+    children: a
+  });
+}
+function je({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: r("text-display-xs text-pho-description font-normal", e),
+    ...t
+  });
+}
+function Ke({ label: e, description: t, htmlFor: a, stacked: i = !1, className: s, children: o, ...m }) {
+  return /* @__PURE__ */ d("div", {
+    className: r(xe, i && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", s),
+    ...m,
+    children: [/* @__PURE__ */ d("div", {
+      className: "min-w-0",
+      children: [a ? /* @__PURE__ */ n("label", {
+        htmlFor: a,
+        className: "text-pho-primary block text-base font-normal",
+        children: e
+      }) : /* @__PURE__ */ n("p", {
+        className: "text-pho-primary text-base font-normal",
+        children: e
+      }), t ? /* @__PURE__ */ n("p", {
+        className: "text-pho-description text-xs",
+        children: t
+      }) : null]
+    }), /* @__PURE__ */ n("div", {
+      className: r("flex w-full min-w-0 items-center gap-2 sm:w-auto", i && "sm:w-full"),
+      children: o
+    })]
+  });
+}
+function $e({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: r("text-pho-description max-w-full min-w-0 truncate text-base", e),
+    ...t
+  });
+}
+function Ue({ error: e, show: t, className: a, children: i, ...s }) {
+  const o = v();
+  return /* @__PURE__ */ n(L, {
+    initial: !1,
+    children: (t ?? !0) && (e != null || i != null) ? /* @__PURE__ */ n(p.div, {
+      "data-basic-page-alert": "",
+      className: "overflow-hidden",
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      animate: {
+        height: "auto",
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      transition: o ? { duration: 0 } : {
+        height: f,
+        opacity: h
+      },
+      children: /* @__PURE__ */ n(oe, {
+        error: e,
+        className: r("px-5 pb-3", a),
+        ...s,
+        children: i
+      })
+    }) : null
+  });
+}
+function We({ show: e, className: t, ...a }) {
+  const i = v(), s = /* @__PURE__ */ n("div", {
+    className: r("flex items-center justify-between gap-6 px-5 py-4", t),
+    ...a
+  });
+  return e === void 0 ? s : /* @__PURE__ */ n(L, {
+    initial: !1,
+    children: e ? /* @__PURE__ */ n(p.div, {
+      className: "overflow-hidden",
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      animate: {
+        height: "auto",
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      transition: i ? { duration: 0 } : {
+        height: f,
+        opacity: h
+      },
+      children: s
+    }) : null
+  });
+}
+var Xe = {
+  stack: "-2.5rem",
+  block: "-0.75rem",
+  none: "0px"
+};
+function Ye({ show: e, gap: t = "stack", dividers: a, className: i, ...s }) {
+  const o = v(), m = Xe[a ? "none" : t];
+  return e === void 0 ? /* @__PURE__ */ n(p.div, {
+    initial: o ? !1 : {
+      opacity: 0,
+      y: _
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: f,
+      opacity: h
+    },
+    className: r(a && C, i),
+    ...s
+  }) : /* @__PURE__ */ n(L, {
+    initial: !1,
+    children: e ? /* @__PURE__ */ n(p.div, {
+      initial: {
+        height: 0,
+        opacity: 0,
+        marginTop: m
+      },
+      animate: {
+        height: "auto",
+        opacity: 1,
+        marginTop: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0,
+        marginTop: m
+      },
+      transition: o ? { duration: 0 } : {
+        height: f,
+        marginTop: f,
+        opacity: h
+      },
+      className: r("overflow-hidden", a && C, i),
+      ...s
+    }) : null
+  });
+}
+var Qe = "top-4 left-[18.25px] h-8 text-base [&>svg]:size-[1.125em] [&>svg]:shrink-0", qe = "(min-width: 40rem)";
+function Je() {
+  return typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(qe).matches;
+}
+var Y = ce(null);
+function Q({ className: e, children: t, ...a }) {
+  const i = z.toArray(t).filter(me), s = i.map((c) => c.props.children ?? null), o = U();
+  Te(s);
+  const [m] = b(Je), u = v(), l = i.length, [y, g] = b(!u && !m && o != null && o.labels.length > l);
+  return /* @__PURE__ */ n("nav", {
+    "aria-label": "Breadcrumb",
+    "data-basic-page-back": "",
+    className: r("absolute top-4 left-[10.25px] flex min-w-max items-center", e),
+    ...a,
+    children: /* @__PURE__ */ d("ol", {
+      className: "m-0 flex list-none items-center p-0",
+      children: [i.map((c, x) => /* @__PURE__ */ n("li", {
+        className: r("m-0 flex items-center", x < l - 1 && "max-sm:hidden"),
+        children: /* @__PURE__ */ n(Y.Provider, {
+          value: {
+            index: x,
+            count: l,
+            departing: o,
+            narrow: m
+          },
+          children: c
+        })
+      }, c.key ?? x)), y && /* @__PURE__ */ n("li", {
+        "aria-hidden": !0,
+        className: "m-0 flex items-center max-sm:hidden",
+        children: /* @__PURE__ */ n(p.span, {
+          initial: { opacity: 1 },
+          animate: { opacity: 0 },
+          transition: $,
+          onAnimationComplete: () => g(!1),
+          className: q,
+          children: I
+        })
+      })]
+    })
+  });
+}
+var q = "text-pho-description -mx-1 inline-flex shrink-0 text-base select-none", I = "/";
+function J({ href: e, className: t, morphId: a, children: i = "Back", ...s }) {
+  const o = ue(Y), m = v(), u = a != null && !m, l = W(u ? a : void 0);
+  if (o == null) throw new Error("BasicPage.Crumb must be rendered inside BasicPage.Breadcrumbs");
+  const { index: y, count: g, departing: c, narrow: x } = o, A = y === 0, N = y === g - 1, O = c != null && c.labels.length < g, P = c != null && c.labels.length > g, Z = N && (c == null || O || x), S = A || N, B = A && N ? "" : A ? "max-sm:hidden" : "sm:hidden", ee = c != null, M = N ? x ? P ? "slide" : "fade" : Z ? "fade" : void 0 : void 0, [k, te] = b(u && x && l.fly && c != null && !P ? c.labels[c.labels.length - 1] : null), ne = u && S && !ee, ae = u && !A && N && (c == null || O);
+  return /* @__PURE__ */ d(de, { children: [!A && /* @__PURE__ */ n("span", {
+    "aria-hidden": !0,
+    className: r(q, "max-sm:hidden"),
+    children: ae ? /* @__PURE__ */ n(p.span, {
+      initial: l.fly ? {
+        opacity: 0,
+        x: V
+      } : { opacity: 0 },
+      animate: l.fly ? {
+        opacity: 1,
+        x: 0
+      } : { opacity: 1 },
+      transition: l.fly ? D : h,
+      className: "inline-flex",
+      children: I
+    }) : I
+  }), /* @__PURE__ */ n(re, {
+    variant: "ghost",
+    size: "sm",
+    href: e,
+    prefix: S ? ne ? /* @__PURE__ */ n(p.span, {
+      initial: l.fly ? {
+        opacity: 0,
+        x: V
+      } : { opacity: 0 },
+      animate: l.fly ? {
+        opacity: 1,
+        x: 0
+      } : { opacity: 1 },
+      transition: l.fly ? D : h,
+      className: r("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", B),
+      children: /* @__PURE__ */ n(R, {})
+    }) : /* @__PURE__ */ n("span", {
+      className: r("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", B),
+      children: /* @__PURE__ */ n(R, {})
+    }) : /* @__PURE__ */ n("span", { className: "hidden" }),
+    className: r("min-w-max", t),
+    ...s,
+    children: u && a != null ? /* @__PURE__ */ d("span", {
+      className: r("relative block", !l.fly && M === "slide" && "overflow-hidden", !N && "max-w-40 truncate"),
+      children: [/* @__PURE__ */ n(X, {
+        morphId: a,
+        fromClassName: "text-pho-primary",
+        fly: l.fly,
+        morphRef: l.ref,
+        arrival: M,
+        children: i
+      }), k != null && /* @__PURE__ */ n(p.span, {
+        "aria-hidden": !0,
+        initial: {
+          x: 0,
+          opacity: 1
+        },
+        animate: {
+          x: Re,
+          opacity: 0
+        },
+        transition: Ie,
+        onAnimationComplete: () => te(null),
+        className: "pointer-events-none absolute inset-y-0 left-0 whitespace-nowrap",
+        children: k
+      })]
+    }) : /* @__PURE__ */ n("span", {
+      className: r("block", !N && "max-w-40 truncate"),
+      children: i
+    })
+  })] });
+}
+function Ze({ className: e, ...t }) {
+  return /* @__PURE__ */ n(Q, {
+    className: e,
+    children: /* @__PURE__ */ n(J, { ...t })
+  });
+}
+function et({ label: e, description: t, leading: a, href: i, className: s, children: o, ...m }) {
+  const u = ie();
+  return /* @__PURE__ */ d(u, {
+    href: i,
+    ...m,
+    className: r("flex min-h-[4.25rem] min-w-0 flex-row items-center justify-between gap-6 px-5 py-4", "group outline-pho-brand hover:bg-pho-primary-hover cursor-pointer transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2", "first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]", s),
+    children: [/* @__PURE__ */ d("div", {
+      className: r("flex min-w-0 flex-1 items-center", a != null && "gap-3"),
+      children: [a, /* @__PURE__ */ d("div", {
+        className: "min-w-0",
+        children: [/* @__PURE__ */ n("div", {
+          className: "flex min-w-0 items-center gap-1",
+          children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ n("p", {
+            className: "text-pho-primary truncate text-base font-medium",
+            children: e
+          }) : e
+        }), t ? /* @__PURE__ */ n("div", {
+          className: "text-pho-description truncate text-xs",
+          children: t
+        }) : null]
+      })]
+    }), /* @__PURE__ */ d("div", {
+      className: "flex min-w-0 items-center justify-end gap-2",
+      children: [o != null ? /* @__PURE__ */ n("div", {
+        className: "min-w-0",
+        children: o
+      }) : null, /* @__PURE__ */ n(he, {
+        "aria-hidden": !0,
+        className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
+      })]
+    })]
+  });
+}
+var ut = {
+  Root: be,
+  Breadcrumbs: Q,
+  Crumb: J,
+  Back: Ze,
+  Title: Pe,
+  Stack: Se,
+  Header: Be,
+  SectionTitle: Me,
+  Description: ke,
+  SectionFooter: He,
+  Card: Ve,
+  Item: De,
+  ItemPanel: Ge,
+  Callout: ze,
+  CalloutTitle: Fe,
+  CalloutDescription: je,
+  Row: Ke,
+  RowLink: et,
+  Value: $e,
+  Alert: Ue,
+  Footer: We,
+  Reveal: Ye
+};
+export {
+  Ne as a,
+  ge as i,
+  ye as n,
+  xe as o,
+  ve as r,
+  ut as s,
+  H as t
+};
+
+//# sourceMappingURL=basic-page-CB36yrpL.js.map