@photon-ai/pho-ui 2.2.0 → 2.4.0

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

@@ -1,643 +0,0 @@
-"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