@photon-ai/pho-ui 1.3.0 → 1.4.0

package/dist/chunks/{basic-page-C50WUzYV.js → basic-page-4_GZOvRr.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as o } from "./cn-DTiB6ek_.js";
+import { t as a } from "./cn-DTiB6ek_.js";
 import { n as d } from "./link-provider-9TFNyDqO.js";
 import { s as f } from "./close-button-B8gF5UNk.js";
 import { t as p } from "./createReactComponent-BqCmnqfX.js";
@@ -12,93 +12,105 @@ var g = [["path", {
 }]], y = p("outline", "chevron-left", "ChevronLeft", g), N = [["path", {
   d: "M9 6l6 6l-6 6",
   key: "svg-0"
-}]], b = p("outline", "chevron-right", "ChevronRight", N), w = "divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary", C = "flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", m = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
-function A({ className: e, ...t }) {
+}]], b = p("outline", "chevron-right", "ChevronRight", N), _ = "divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary", A = "flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", m = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6", C = "flex flex-col gap-3 px-5 py-4", I = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", w = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5";
+function E({ className: e, ...t }) {
   return /* @__PURE__ */ r("div", {
-    className: o("relative mx-auto w-full max-w-[44.5rem] px-5 py-12", e),
+    className: a("relative mx-auto w-full max-w-[44.5rem] px-5 py-12", e),
     ...t
   });
 }
-function _(e) {
+function L(e) {
   return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
-function R(e) {
+function P(e) {
   if (!(typeof e != "string" && typeof e != "number"))
-    return _(String(e)) || void 0;
+    return L(String(e)) || void 0;
 }
 function c(e, t) {
   if (e !== "")
-    return e ?? R(t);
+    return e ?? P(t);
 }
-function k({ id: e, className: t, children: n, ...i }) {
+function R({ id: e, className: t, children: n, ...o }) {
   return /* @__PURE__ */ r("h1", {
     id: c(e, n),
-    className: o("text-display-base text-pho-primary scroll-mt-12 px-5 font-medium", t),
-    ...i,
+    className: a("text-display-base text-pho-primary scroll-mt-12 px-5 font-medium", t),
+    ...o,
     children: n
   });
 }
-function L({ className: e, ...t }) {
+function S({ className: e, ...t }) {
   return /* @__PURE__ */ r("div", {
-    className: o("mt-6 flex flex-col gap-10", "*:flex *:flex-col *:gap-3", e),
+    className: a("mt-6 flex flex-col gap-10", "*:flex *:flex-col *:gap-3", e),
     ...t
   });
 }
-function E({ className: e, ...t }) {
+function k({ className: e, ...t }) {
   return /* @__PURE__ */ r("div", {
-    className: o("flex flex-col gap-0.5", e),
+    className: a("flex flex-col gap-0.5", e),
     ...t
   });
 }
-function I({ id: e, className: t, children: n, ...i }) {
+function B({ id: e, className: t, children: n, ...o }) {
   return /* @__PURE__ */ r("h2", {
     id: c(e, n),
-    className: o("text-display-xs text-pho-primary scroll-mt-12 px-5 font-medium", t),
-    ...i,
+    className: a("text-display-xs text-pho-primary scroll-mt-12 px-5 font-medium", t),
+    ...o,
     children: n
   });
 }
-function S({ className: e, ...t }) {
+function D({ className: e, ...t }) {
   return /* @__PURE__ */ r("p", {
-    className: o("text-display-xs text-pho-description px-5 font-normal", e),
+    className: a("text-display-xs text-pho-description px-5 font-normal", e),
     ...t
   });
 }
-function B({ className: e, ...t }) {
+function G({ className: e, ...t }) {
   return /* @__PURE__ */ r("p", {
-    className: o("text-pho-description px-5 text-xs font-normal", e),
+    className: a("text-pho-description px-5 text-xs font-normal", e),
     ...t
   });
 }
-function P({ className: e, ...t }) {
+function T({ className: e, ...t }) {
   return /* @__PURE__ */ r("div", {
-    className: o(w, e),
+    className: a(_, e),
     ...t
   });
 }
-function D({ className: e, ...t }) {
+function M({ className: e, ...t }) {
+  return /* @__PURE__ */ r("div", {
+    className: a(C, e),
+    ...t
+  });
+}
+function H({ divided: e = !1, className: t, ...n }) {
+  return /* @__PURE__ */ r("div", {
+    className: a(e ? w : I, t),
+    ...n
+  });
+}
+function j({ className: e, ...t }) {
   return /* @__PURE__ */ r("div", {
-    className: o(C, e),
+    className: a(A, e),
     ...t
   });
 }
-function G({ id: e, className: t, children: n, ...i }) {
+function z({ id: e, className: t, children: n, ...o }) {
   return /* @__PURE__ */ r("h2", {
     id: c(e, n),
-    className: o("text-display-xs text-pho-primary scroll-mt-12 font-medium", t),
-    ...i,
+    className: a("text-display-xs text-pho-primary scroll-mt-12 font-medium", t),
+    ...o,
     children: n
   });
 }
-function H({ className: e, ...t }) {
+function F({ className: e, ...t }) {
   return /* @__PURE__ */ r("p", {
-    className: o("text-display-xs text-pho-description font-normal", e),
+    className: a("text-display-xs text-pho-description font-normal", e),
     ...t
   });
 }
-function T({ label: e, description: t, htmlFor: n, className: i, children: a, ...l }) {
+function V({ label: e, description: t, htmlFor: n, className: o, children: i, ...l }) {
   return /* @__PURE__ */ s("div", {
-    className: o(m, i),
+    className: a(m, o),
     ...l,
     children: [/* @__PURE__ */ s("div", {
       className: "min-w-0",
@@ -115,37 +127,37 @@ function T({ label: e, description: t, htmlFor: n, className: i, children: a, ..
       }) : null]
     }), /* @__PURE__ */ r("div", {
       className: "flex w-full min-w-0 items-center gap-2 sm:w-auto",
-      children: a
+      children: i
     })]
   });
 }
-function j({ className: e, ...t }) {
+function O({ className: e, ...t }) {
   return /* @__PURE__ */ r("p", {
-    className: o("text-pho-description truncate text-base", e),
+    className: a("text-pho-description truncate text-base", e),
     ...t
   });
 }
-function z({ className: e, ...t }) {
+function $({ className: e, ...t }) {
   return /* @__PURE__ */ r("p", {
     role: "alert",
-    className: o("text-pho-error px-5 pb-3 text-xs", e),
+    className: a("text-pho-error px-5 pb-3 text-xs", e),
     ...t
   });
 }
-var F = {
+var K = {
   type: "spring",
   stiffness: 640,
   damping: 50
-}, M = {
+}, U = {
   duration: 0.18,
   ease: "easeOut"
 };
-function O({ show: e, className: t, ...n }) {
-  const i = v(), a = /* @__PURE__ */ r("div", {
-    className: o("flex items-center justify-between gap-6 px-5 py-4", t),
+function W({ show: e, className: t, ...n }) {
+  const o = v(), i = /* @__PURE__ */ r("div", {
+    className: a("flex items-center justify-between gap-6 px-5 py-4", t),
     ...n
   });
-  return e === void 0 ? a : /* @__PURE__ */ r(x, {
+  return e === void 0 ? i : /* @__PURE__ */ r(x, {
     initial: !1,
     children: e ? /* @__PURE__ */ r(h.div, {
       className: "overflow-hidden",
@@ -161,32 +173,32 @@ function O({ show: e, className: t, ...n }) {
         height: 0,
         opacity: 0
       },
-      transition: i ? { duration: 0 } : {
-        height: F,
-        opacity: M
+      transition: o ? { duration: 0 } : {
+        height: K,
+        opacity: U
       },
-      children: a
+      children: i
     }) : null
   });
 }
-function V({ href: e, className: t, children: n = "Back", ...i }) {
+function q({ href: e, className: t, children: n = "Back", ...o }) {
   return /* @__PURE__ */ r(f, {
     variant: "ghost",
     size: "sm",
     href: e,
     prefix: /* @__PURE__ */ r(y, {}),
-    className: o("absolute top-2 left-[10.25px]", t),
-    ...i,
+    className: a("absolute top-2 left-[10.25px]", t),
+    ...o,
     children: n
   });
 }
-function $({ label: e, description: t, leading: n, href: i, className: a, children: l, ...u }) {
+function J({ label: e, description: t, leading: n, href: o, className: i, children: l, ...u }) {
   return /* @__PURE__ */ s(d(), {
-    href: i,
+    href: o,
     ...u,
-    className: o(m, "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)]", a),
+    className: a(m, "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)]", i),
     children: [/* @__PURE__ */ s("div", {
-      className: o("flex min-w-0 items-center", n != null && "gap-3"),
+      className: a("flex min-w-0 items-center", n != null && "gap-3"),
       children: [n, /* @__PURE__ */ s("div", {
         className: "min-w-0",
         children: [/* @__PURE__ */ r("div", {
@@ -209,30 +221,35 @@ function $({ label: e, description: t, leading: n, href: i, className: a, childr
     })]
   });
 }
-var Y = {
-  Root: A,
-  Back: V,
-  Title: k,
-  Stack: L,
-  Header: E,
-  SectionTitle: I,
-  Description: S,
-  SectionFooter: B,
-  Card: P,
-  Callout: D,
-  CalloutTitle: G,
-  CalloutDescription: H,
-  Row: T,
-  RowLink: $,
-  Value: j,
-  Alert: z,
-  Footer: O
+var ne = {
+  Root: E,
+  Back: q,
+  Title: R,
+  Stack: S,
+  Header: k,
+  SectionTitle: B,
+  Description: D,
+  SectionFooter: G,
+  Card: T,
+  Item: M,
+  ItemPanel: H,
+  Callout: j,
+  CalloutTitle: z,
+  CalloutDescription: F,
+  Row: V,
+  RowLink: J,
+  Value: O,
+  Alert: $,
+  Footer: W
 };
 export {
-  Y as i,
-  w as n,
-  m as r,
-  C as t
+  w as a,
+  I as i,
+  _ as n,
+  m as o,
+  C as r,
+  ne as s,
+  A as t
 };
 
-//# sourceMappingURL=basic-page-C50WUzYV.js.map
+//# sourceMappingURL=basic-page-4_GZOvRr.js.map

package/dist/chunks/basic-page-4_GZOvRr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-page-4_GZOvRr.js","names":["__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs","../../src/sections/basic-page/basic-page.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M15 6l-6 6l6 6\", \"key\": \"svg-0\" }]];\nconst IconChevronLeft = createReactComponent(\"outline\", \"chevron-left\", \"ChevronLeft\", __iconNode);\n\nexport { __iconNode, IconChevronLeft as default };\n//# sourceMappingURL=IconChevronLeft.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M9 6l6 6l-6 6\", \"key\": \"svg-0\" }]];\nconst IconChevronRight = createReactComponent(\"outline\", \"chevron-right\", \"ChevronRight\", __iconNode);\n\nexport { __iconNode, IconChevronRight as default };\n//# sourceMappingURL=IconChevronRight.mjs.map\n","import {\n  type AnchorHTMLAttributes,\n  type ComponentProps,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { IconChevronLeft, IconChevronRight } from \"@tabler/icons-react\";\nimport { ButtonLink, type ButtonLinkProps } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/**\n * BasicPage — Pho's standard content page: a page title, section titles, and\n * bordered cards of label/control rows. Settings, billing, members — any\n * single-column management surface.\n *\n * Spacing: wrap the page in `Root` (a 42rem column with `px-5` gutters,\n * vertical padding). `Stack` separates blocks (`gap-10`). Inside a block,\n * children share `gap-3`. Wrap a section title + description in `Header`\n * (`gap-0.5`) so that pair stays tight — don't put them as loose siblings.\n * Parts already carry `px-5`.\n *\n * Navigation: pages may drill into subpages. `RowLink` is a whole-row link\n * (trailing chevron) and `Back` returns to the parent — both render through\n * the host's `LinkProvider`; the URL itself stays the router's job. `Back`\n * floats in `Root`'s top padding, so `Title` never moves between pages that\n * have a back link and pages that don't.\n */\n\n/* ------------------------------- class map ------------------------------- */\n\n/** Bordered card that stacks rows with hairline dividers. */\nexport const BASIC_PAGE_CARD =\n  \"divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary\";\n\n/**\n * Standalone callout surface — featured block (invite form, notice, etc.).\n * Don't wrap in `Card`; this is the outer chrome.\n */\nexport const BASIC_PAGE_CALLOUT =\n  \"flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5\";\n\n/**\n * One row — label (+ optional description) left, control right.\n * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter\n * than a comfortable touch target.\n */\nexport const BASIC_PAGE_ROW =\n  \"flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\";\n\n/**\n * One card row that can host subviews. Same padding rhythm as a plain row —\n * an optional trailing `ItemPanel` breaks out of it on its own.\n */\nexport const BASIC_PAGE_ITEM = \"flex flex-col gap-3 px-5 py-4\";\n\n/**\n * Secondary strip closing an `Item` that is last in its card. Negative\n * margins escape the item's `px-5 pb-4` so the gray sheet runs edge-to-edge\n * and owns the row's bottom padding. The body above stays square and the\n * sheet's top is flush against it; only the bottom rounds, nesting into the\n * card's 12px corner (11px inside the 1px border). Content lands back on the\n * item's left gutter.\n */\nexport const BASIC_PAGE_ITEM_PANEL =\n  \"-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5\";\n\n/**\n * Mid-list variant — the full-bleed sheet only reads well against the card's\n * bottom corner, so when later rows follow, the panel becomes an inset chip\n * instead: fully rounded at the small-control radius, overhanging the text\n * gutter by 8px per side (content stays aligned with the body above), and\n * leaving the row's own bottom padding and the card's hairline divider alone.\n * `-mt-1.5` collapses the item's `gap-3` (12px) to an effective `gap-1.5` (6px).\n */\nexport const BASIC_PAGE_ITEM_PANEL_DIVIDED =\n  \"-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5\";\n\n/* --------------------------------- parts --------------------------------- */\n\n/**\n * Page chrome — centered column at the standard content width. Hosts\n * `Title` + `Stack` (and any route-level siblings). Prefer this over\n * ad-hoc `max-w-*` wrappers in the app shell.\n *\n * `44.5rem` = the 42rem (`2xl`) content column plus the two `px-5` gutters,\n * so wide viewports render exactly as before while narrow ones keep a 20px\n * breathing edge instead of running content into the viewport.\n *\n * `relative` anchors `Back`, which floats in the top padding — the reserved\n * zone that keeps `Title` at the same position on every page.\n */\nfunction Root({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\n        \"relative mx-auto w-full max-w-[44.5rem] px-5 py-12\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Slug for hash targets — \"Danger zone\" → `danger-zone`. Empty / non-string\n * children yield no id; pass an explicit `id` to override or `id=\"\"` to opt out.\n */\nfunction slugifyHeading(value: string): string {\n  return value\n    .normalize(\"NFKD\")\n    .replace(/[\\u0300-\\u036f]/g, \"\")\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\");\n}\n\nfunction headingIdFromChildren(children: ReactNode): string | undefined {\n  if (typeof children !== \"string\" && typeof children !== \"number\") {\n    return undefined;\n  }\n  const slug = slugifyHeading(String(children));\n  return slug || undefined;\n}\n\n/** Resolve `id`: explicit wins; `\"\"` opts out; else slug from plain-text children. */\nfunction resolveHeadingId(\n  id: string | undefined,\n  children: ReactNode,\n): string | undefined {\n  if (id === \"\") return undefined;\n  if (id != null) return id;\n  return headingIdFromChildren(children);\n}\n\n/**\n * Page title — largest heading on the surface. Plain-text children get a slug\n * `id` for hash targets (`#profile`); the heading itself is not a link.\n */\nfunction Title({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h1\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h1\n      id={headingId}\n      className={cn(\n        \"text-display-base text-pho-primary scroll-mt-12 px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h1>\n  );\n}\n\n/**\n * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;\n * each block lays out its children with `gap-3`.\n */\nfunction Stack({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\n        \"mt-6 flex flex-col gap-10\",\n        \"*:flex *:flex-col *:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Title + optional description pair. Keeps that couple tight (`gap-0.5`) so\n * the block's `gap-3` only applies between this header and the card.\n */\nfunction Header({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(\"flex flex-col gap-0.5\", className)} {...props} />;\n}\n\n/**\n * Section heading — same padding as the page title, smaller type. Hashable via\n * slug `id` (not a link).\n */\nfunction SectionTitle({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h2\n      id={headingId}\n      className={cn(\n        \"text-display-xs text-pho-primary scroll-mt-12 px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/**\n * Supporting copy under a section title. Same display step as the title;\n * color + normal weight keep it secondary. Always wrap with `Header`.\n */\nfunction Description({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description px-5 font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Optional caption below a section's `Card` (outside the card). One step\n * smaller than `Description` (`text-xs`). Not the card-internal dirty-state\n * `Footer`.\n */\nfunction SectionFooter({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\"text-pho-description px-5 text-xs font-normal\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bordered card that stacks rows with hairline dividers. */\nfunction Card({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(BASIC_PAGE_CARD, className)} {...props} />;\n}\n\n/**\n * One card row that can host subviews. Padding matches a plain row, so use it\n * for any row that may grow an `ItemPanel` — primary content goes straight in\n * as children; the panel, when present, is the last child.\n *\n * ```tsx\n * <BasicPage.Card>\n *   <BasicPage.Item>\n *     …name, meta, actions…\n *     <BasicPage.ItemPanel divided>…secret / expanded content…</BasicPage.ItemPanel>\n *   </BasicPage.Item>\n *   …later siblings (pass `divided` on the panel above)…\n * </BasicPage.Card>\n * ```\n */\nfunction Item({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(BASIC_PAGE_ITEM, className)} {...props} />;\n}\n\nexport interface BasicPageItemPanelProps extends ComponentProps<\"div\"> {\n  /**\n   * Set when later card rows follow this item. The panel then renders as an\n   * inset rounded chip (keeping the card's own divider) instead of the\n   * full-bleed bottom sheet, which only reads well against the card's corner.\n   * @default false\n   */\n  divided?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Secondary strip at the end of an `Item`. When the item closes the card,\n * it's a gray sheet flush under the body, full-bleed and owning the row's\n * bottom padding, rounding only into the card's bottom corner. Pass `divided`\n * when later card rows follow — the panel becomes an inset rounded chip and\n * the card's hairline divider stays in charge. Content is already a centered\n * flex row either way.\n */\nfunction ItemPanel({\n  divided = false,\n  className,\n  ...props\n}: BasicPageItemPanelProps) {\n  return (\n    <div\n      className={cn(\n        divided ? BASIC_PAGE_ITEM_PANEL_DIVIDED : BASIC_PAGE_ITEM_PANEL,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and\n * optional actions) for a featured block — e.g. an invite form. Do not wrap\n * in `Card`; this is already the outer surface.\n */\nfunction Callout({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(BASIC_PAGE_CALLOUT, className)} {...props} />;\n}\n\n/** Callout heading — same type as `SectionTitle`. Hashable via slug `id`. */\nfunction CalloutTitle({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h2\n      id={headingId}\n      className={cn(\n        \"text-display-xs text-pho-primary scroll-mt-12 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/** Supporting copy under a callout title. */\nfunction CalloutDescription({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface BasicPageRowProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\"\n> {\n  /** Left-side field name. */\n  label: string;\n  /** Optional helper under the label. */\n  description?: ReactNode;\n  /** Associates the label with a control id. When omitted, the label is not a `<label>`. */\n  htmlFor?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * One row: label (+ optional description) left, control right.\n * Pass `htmlFor` when the row wraps a labelled input; omit it for display/\n * action rows (avatar, danger-zone delete).\n */\nfunction Row({\n  label,\n  description,\n  htmlFor,\n  className,\n  children,\n  ...props\n}: BasicPageRowProps) {\n  return (\n    <div className={cn(BASIC_PAGE_ROW, className)} {...props}>\n      <div className=\"min-w-0\">\n        {htmlFor ? (\n          <label\n            htmlFor={htmlFor}\n            className=\"text-pho-primary block text-base font-normal\"\n          >\n            {label}\n          </label>\n        ) : (\n          <p className=\"text-pho-primary text-base font-normal\">{label}</p>\n        )}\n        {description ? (\n          <p className=\"text-pho-description mt-0.5 text-xs\">{description}</p>\n        ) : null}\n      </div>\n      <div className=\"flex w-full min-w-0 items-center gap-2 sm:w-auto\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** Read-only value on the right side of a row (email, etc.). */\nfunction Value({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\"text-pho-description truncate text-base\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Inline error under a row (still inside the card). Matches card horizontal\n * padding so hosts don't re-apply `px-5`.\n */\nfunction Alert({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      role=\"alert\"\n      className={cn(\"text-pho-error px-5 pb-3 text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Height spring for the `Footer` reveal — quick and essentially critically\n * damped (an overshooting edge would show clipped content). Same feel as the\n * onboarding / invite card's height-follow spring.\n */\nconst REVEAL_HEIGHT_SPRING = {\n  type: \"spring\",\n  stiffness: 640,\n  damping: 50,\n} as const;\n\n/**\n * Content fade layered over the height reveal, so the bar doesn't pop while\n * the card grows — mirrors the onboarding step-content fade.\n */\nconst REVEAL_FADE = { duration: 0.18, ease: \"easeOut\" } as const;\n\nexport interface BasicPageFooterProps extends ComponentProps<\"div\"> {\n  /**\n   * Animated presence for dirty-state bars: the card glides open/closed on a\n   * height spring while the content fades. Omit for a static, always-visible\n   * footer (no animation). No reveal plays on first mount — only on flips.\n   */\n  show?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Trailing bar inside a card — typically a save status + submit button that\n * appears after the form is dirty. Same horizontal/vertical padding as a row.\n * Pass `show` (instead of conditional rendering) to animate the bar in and\n * out following the onboarding card's motion language.\n */\nfunction Footer({ show, className, ...props }: BasicPageFooterProps) {\n  const reduceMotion = useReducedMotion();\n  const bar = (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-6 px-5 py-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (show === undefined) return bar;\n\n  return (\n    <AnimatePresence initial={false}>\n      {show ? (\n        <motion.div\n          className=\"overflow-hidden\"\n          initial={{ height: 0, opacity: 0 }}\n          animate={{ height: \"auto\", opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={\n            reduceMotion\n              ? { duration: 0 }\n              : { height: REVEAL_HEIGHT_SPRING, opacity: REVEAL_FADE }\n          }\n        >\n          {bar}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\n/* ------------------------------- navigation ------------------------------ */\n\nexport interface BasicPageBackProps extends Omit<\n  ButtonLinkProps,\n  \"variant\" | \"size\" | \"shape\" | \"prefix\" | \"suffix\" | \"svgOnly\" | \"href\"\n> {\n  /** Parent destination — rendered through the host's `LinkProvider`. */\n  href: string;\n  /** Label — name the parent page. @default \"Back\" */\n  children?: ReactNode;\n}\n\n/**\n * Back link for a subpage — a small ghost `ButtonLink`; place inside `Root`,\n * before `Title`. It floats in `Root`'s reserved top padding (vertically\n * centered in the 48px zone) instead of taking layout space, so `Title` sits\n * at exactly the same position whether or not a page has one.\n *\n * The offsets align the *label* glyph with the title glyph. Title text sits\n * 40px in (`px-5` root gutter + `px-5` title pad); inside a `sm` ghost button\n * the label sits 29.75px in (8px icon-side pad + 15.75px chevron, 1.125em at\n * the 14px `text-base`, + 4px gap + 2px label-span `px-0.5`) — so `left` is\n * the 10.25px difference. `top-2` centers the 32px button in the 48px\n * reserved zone. The chevron and the ghost hover pill hang in the padding —\n * the usual optical alignment for borderless controls.\n */\nfunction Back({\n  href,\n  className,\n  children = \"Back\",\n  ...props\n}: BasicPageBackProps) {\n  return (\n    <ButtonLink\n      variant=\"ghost\"\n      size=\"sm\"\n      href={href}\n      prefix={<IconChevronLeft />}\n      className={cn(\"absolute top-2 left-[10.25px]\", className)}\n      {...props}\n    >\n      {children}\n    </ButtonLink>\n  );\n}\n\nexport interface BasicPageRowLinkProps extends Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\" | \"title\"\n> {\n  /** Left-side field name — plain text, or compose with a trailing badge. */\n  label: ReactNode;\n  /** Optional helper under the label. */\n  description?: ReactNode;\n  /** Optional media left of the label (e.g. project avatar). */\n  leading?: ReactNode;\n  /** Subpage destination — rendered through the host's `LinkProvider`. */\n  href: string;\n  /** Optional trailing value before the chevron (compose with `Value`). */\n  children?: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\n/**\n * A row that navigates — the whole row is one link into a subpage, with a\n * trailing chevron cue. Same geometry as `Row`; hover lifts the row, and\n * first/last rows follow the card's corner radius.\n */\nfunction RowLink({\n  label,\n  description,\n  leading,\n  href,\n  className,\n  children,\n  ...props\n}: BasicPageRowLinkProps) {\n  const Link = useLinkComponent();\n  return (\n    <Link\n      href={href}\n      {...props}\n      className={cn(\n        BASIC_PAGE_ROW,\n        \"group outline-pho-brand hover:bg-pho-primary-hover cursor-pointer transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2\",\n        // Hover wash follows the card's rounding (minus the 1px border).\n        \"first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\"flex min-w-0 items-center\", leading != null && \"gap-3\")}\n      >\n        {leading}\n        <div className=\"min-w-0\">\n          <div className=\"flex min-w-0 items-center gap-1\">\n            {typeof label === \"string\" || typeof label === \"number\" ? (\n              <p className=\"text-pho-primary truncate text-base font-medium\">\n                {label}\n              </p>\n            ) : (\n              label\n            )}\n          </div>\n          {description ? (\n            <div className=\"text-pho-description text-xs\">{description}</div>\n          ) : null}\n        </div>\n      </div>\n      <div className=\"flex w-full min-w-0 items-center gap-2 sm:w-auto\">\n        {children}\n        <IconChevronRight\n          aria-hidden\n          className=\"text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors\"\n        />\n      </div>\n    </Link>\n  );\n}\n\n/* -------------------------------- assembly ------------------------------- */\n\n/**\n * Basic page layout. One stack, one gap rhythm — only title scale differs:\n *\n * ```tsx\n * <BasicPage.Root>\n *   <BasicPage.Title>Profile</BasicPage.Title>\n *   <BasicPage.Stack>\n *     <form>\n *       <BasicPage.Card>\n *         <BasicPage.Row label=\"Name\" htmlFor=\"first-name\">\n *           <Input id=\"first-name\" size=\"sm\" />\n *         </BasicPage.Row>\n *       </BasicPage.Card>\n *     </form>\n *     <form>\n *       <BasicPage.Header>\n *         <BasicPage.SectionTitle>Agent profile</BasicPage.SectionTitle>\n *         <BasicPage.Description>…</BasicPage.Description>\n *       </BasicPage.Header>\n *       <BasicPage.Card>…</BasicPage.Card>\n *     </form>\n *     <div>\n *       <BasicPage.SectionTitle>Danger zone</BasicPage.SectionTitle>\n *       <BasicPage.Card>\n *         <BasicPage.Row label=\"Delete account\" description=\"…\">\n *           <Button color=\"destructive\" size=\"sm\">Delete</Button>\n *         </BasicPage.Row>\n *       </BasicPage.Card>\n *     </div>\n *     <BasicPage.Callout>\n *       <BasicPage.Header>\n *         <BasicPage.CalloutTitle>Invitations</BasicPage.CalloutTitle>\n *         <BasicPage.CalloutDescription>…</BasicPage.CalloutDescription>\n *       </BasicPage.Header>\n *       …invite form…\n *     </BasicPage.Callout>\n *   </BasicPage.Stack>\n * </BasicPage.Root>\n * ```\n *\n * Subpage — `Back` above the title, `RowLink` rows to drill in:\n *\n * ```tsx\n * <BasicPage.Root>\n *   <BasicPage.Back href=\"/settings\">Settings</BasicPage.Back>\n *   <BasicPage.Title>Billing</BasicPage.Title>\n *   <BasicPage.Stack>\n *     <div>\n *       <BasicPage.Card>\n *         <BasicPage.RowLink label=\"Invoices\" href=\"/settings/invoices\">\n *           <BasicPage.Value>12 documents</BasicPage.Value>\n *         </BasicPage.RowLink>\n *       </BasicPage.Card>\n *     </div>\n *   </BasicPage.Stack>\n * </BasicPage.Root>\n * ```\n */\nexport const BasicPage = {\n  Root,\n  Back,\n  Title,\n  Stack,\n  Header,\n  SectionTitle,\n  Description,\n  SectionFooter,\n  Card,\n  Item,\n  ItemPanel,\n  Callout,\n  CalloutTitle,\n  CalloutDescription,\n  Row,\n  RowLink,\n  Value,\n  Alert,\n  Footer,\n};\n"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/dist/chunks/status-view-CcbctPqR.js

@@ -0,0 +1,65 @@
+"use client";
+import { t } from "./cn-DTiB6ek_.js";
+import "react";
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+var p = "mx-auto flex w-fit max-w-lg min-w-0 flex-col items-start justify-center text-left", m = "flex flex-col", x = {
+  sm: {
+    description: "Small — states inside cards and panels",
+    classes: {
+      root: "px-5 py-8",
+      icon: "mb-1.5 *:size-6",
+      copy: "gap-0",
+      title: "text-base",
+      description: "text-base",
+      actions: "mt-5"
+    }
+  },
+  base: {
+    description: "Base — the default; full pages and large regions",
+    classes: {
+      root: "px-5 py-12",
+      icon: "mb-4 *:size-10",
+      copy: "gap-1",
+      title: "text-display-sm",
+      description: "text-display-xs",
+      actions: "mt-5"
+    }
+  }
+};
+function f({ icon: a, title: o, description: i, actions: l, size: c = "base", className: r, ...d }) {
+  const e = x[c].classes;
+  return /* @__PURE__ */ n("div", {
+    className: t(p, e.root, r),
+    ...d,
+    children: [
+      a != null && /* @__PURE__ */ s("div", {
+        "aria-hidden": !0,
+        className: t("text-pho-secondary", e.icon),
+        children: a
+      }),
+      /* @__PURE__ */ n("div", {
+        className: t(m, e.copy),
+        children: [/* @__PURE__ */ s("div", {
+          className: t("text-pho-secondary font-display font-medium text-balance", e.title),
+          children: o
+        }), i != null && /* @__PURE__ */ s("div", {
+          className: t("text-pho-description font-normal", e.description),
+          children: i
+        })]
+      }),
+      l != null && /* @__PURE__ */ s("div", {
+        className: t("flex flex-wrap items-center justify-start gap-2", e.actions),
+        children: l
+      })
+    ]
+  });
+}
+f.displayName = "StatusView";
+export {
+  f as i,
+  m as n,
+  x as r,
+  p as t
+};
+
+//# sourceMappingURL=status-view-CcbctPqR.js.map

package/dist/chunks/status-view-CcbctPqR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-view-CcbctPqR.js","names":[],"sources":["../../src/components/status-view/status-view.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Hugs its content (`w-fit`) and centers itself in the host (`mx-auto`); text\n * stays start-aligned so the icon / title / description share one left edge.\n * `max-w-lg` only caps long prose at Dialog width before it wraps.\n */\nexport const STATUS_VIEW =\n  \"mx-auto flex w-fit max-w-lg min-w-0 flex-col items-start justify-center text-left\";\n\n/** Title + description group — flex column; gap comes from the size axis. */\nexport const STATUS_VIEW_COPY = \"flex flex-col\";\n\n/**\n * Size axis — retunes every slot. Title + description share Dialog's\n * `font-display` ladder: `base` matches Dialog (`gap-1`); `sm` steps one rung\n * down (`gap-0`) for cards and panels.\n */\nexport const STATUS_VIEW_SIZES = {\n  sm: {\n    description: \"Small — states inside cards and panels\",\n    classes: {\n      root: \"px-5 py-8\",\n      icon: \"mb-1.5 *:size-6\",\n      copy: \"gap-0\",\n      title: \"text-base\",\n      description: \"text-base\",\n      actions: \"mt-5\",\n    },\n  },\n  base: {\n    description: \"Base — the default; full pages and large regions\",\n    classes: {\n      root: \"px-5 py-12\",\n      icon: \"mb-4 *:size-10\",\n      copy: \"gap-1\",\n      title: \"text-display-sm\",\n      description: \"text-display-xs\",\n      actions: \"mt-5\",\n    },\n  },\n} satisfies Record<\n  string,\n  { description: string; classes: Record<string, string> }\n>;\n\nexport type StatusViewSize = keyof typeof STATUS_VIEW_SIZES;\n\ninterface StatusViewBaseProps {\n  /** Decorative glyph above the title, usually a Tabler icon. Sized by the view (`*:size-*`), inked `text-pho-secondary`. */\n  icon?: ReactNode;\n  /** One short line naming the state (\"No API keys yet\", \"Page not found\"). */\n  title: ReactNode;\n  /** Supporting prose — what it means or what to do next. */\n  description?: ReactNode;\n  /** Optional action row (buttons / links). Empty states usually omit it. */\n  actions?: ReactNode;\n  /** Size variant. @default \"base\" */\n  size?: StatusViewSize;\n}\n\nexport interface StatusViewProps\n  extends\n    StatusViewBaseProps,\n    Omit<ComponentProps<\"div\">, keyof StatusViewBaseProps | \"children\"> {}\n\n/**\n * StatusView — the standing-in view for a region with nothing to show or\n * nothing that worked: icon over title over description, with an optional\n * action row. The block shrink-wraps and centers itself while its text stays\n * left-aligned; the host owns the footprint (a card body, or a `min-h-screen`\n * flex-centered page). Use `size=\"sm\"` inside cards, the default `base` for\n * whole pages.\n *\n * Empty and error states share this one component — they differ only in what\n * you pass:\n *\n * - **Empty** — usually no `icon` and no `actions`; the create affordance\n *   lives elsewhere on the page.\n * - **Error** — pass a warning `icon`, `role=\"alert\"` so it announces, and\n *   `actions` offering a way out (retry, reload, a route back).\n */\nexport function StatusView({\n  icon,\n  title,\n  description,\n  actions,\n  size = \"base\",\n  className,\n  ...props\n}: StatusViewProps) {\n  const slot = STATUS_VIEW_SIZES[size].classes;\n  return (\n    <div className={cn(STATUS_VIEW, slot.root, className)} {...props}>\n      {icon != null && (\n        <div aria-hidden className={cn(\"text-pho-secondary\", slot.icon)}>\n          {icon}\n        </div>\n      )}\n      <div className={cn(STATUS_VIEW_COPY, slot.copy)}>\n        <div\n          className={cn(\n            \"text-pho-secondary font-display font-medium text-balance\",\n            slot.title,\n          )}\n        >\n          {title}\n        </div>\n        {description != null && (\n          <div\n            className={cn(\"text-pho-description font-normal\", slot.description)}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n      {actions != null && (\n        <div\n          className={cn(\n            \"flex flex-wrap items-center justify-start gap-2\",\n            slot.actions,\n          )}\n        >\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n}\n\nStatusView.displayName = \"StatusView\";\n"],"mappings":";;;;AAQA,IAAa,IACX,qFAGW,IAAmB,iBAOnB,IAAoB;AAAA,EAC/B,IAAI;AAAA,IACF,aAAa;AAAA,IACb,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAyCA,SAAgB,EAAW,EACzB,MAAA,GACA,OAAA,GACA,aAAA,GACA,SAAA,GACA,MAAA,IAAO,QACP,WAAA,GACA,GAAG,EAAA,GACe;AAClB,QAAM,IAAO,EAAkB,CAAA,EAAM;AACrC,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,EAAG,GAAa,EAAK,MAAM,CAAS;AAAA,IAAG,GAAI;AAAA,cAA3D;AAAA,MACG,KAAQ,QACP,gBAAA,EAAC,OAAD;AAAA,QAAK,eAAA;AAAA,QAAY,WAAW,EAAG,sBAAsB,EAAK,IAAI;AAAA,kBAC3D;AAAA,MACE,CAAA;AAAA,MAEP,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAW,EAAG,GAAkB,EAAK,IAAI;AAAA,kBAA9C,CACE,gBAAA,EAAC,OAAD;AAAA,UACE,WAAW,EACT,4DACA,EAAK,KACP;AAAA,oBAEC;AAAA,QACE,CAAA,GACJ,KAAe,QACd,gBAAA,EAAC,OAAD;AAAA,UACE,WAAW,EAAG,oCAAoC,EAAK,WAAW;AAAA,oBAEjE;AAAA,QACE,CAAA,CAEJ;AAAA;MACJ,KAAW,QACV,gBAAA,EAAC,OAAD;AAAA,QACE,WAAW,EACT,mDACA,EAAK,OACP;AAAA,kBAEC;AAAA,MACE,CAAA;AAAA,IAEJ;AAAA;AAET;AAEA,EAAW,cAAc"}

package/dist/components/status-view.js

@@ -0,0 +1,8 @@
+"use client";
+import { i as s, n as t, r as T, t as a } from "../chunks/status-view-CcbctPqR.js";
+export {
+  a as STATUS_VIEW,
+  t as STATUS_VIEW_COPY,
+  T as STATUS_VIEW_SIZES,
+  s as StatusView
+};

package/dist/index.js

@@ -1,53 +1,61 @@
 "use client";
 import { t as s } from "./chunks/cn-DTiB6ek_.js";
-import { n as o, r, t as n } from "./chunks/link-provider-9TFNyDqO.js";
-import { t as i } from "./chunks/resolve-variant-CcD8iG5l.js";
-import { n as _, r as m, t as A } from "./chunks/use-press-pulse-8iorQPsh.js";
+import { n as o, r as E, t as _ } from "./chunks/link-provider-9TFNyDqO.js";
+import { t as S } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { n as I, r as T, t as i } from "./chunks/use-press-pulse-8iorQPsh.js";
 import "./utils.js";
-import { a as B, c as R, d as e, f as O, i as f, l as p, n as C, o as u, r as D, s as N, t as P, u as L } from "./chunks/close-button-B8gF5UNk.js";
-import { a as l, c as U, i as V, n as d, o as G, r as g, s as k, t as F } from "./chunks/sidebar-DGpEKxOn.js";
-import { i as b, n as v, r as H, t as Z } from "./chunks/basic-page-C50WUzYV.js";
-import { t as W } from "./chunks/input-CxS7ndpb.js";
-import { t as j } from "./chunks/input-group-D6dlma8k.js";
-import { n as w, t as y } from "./chunks/card-9cGnv-VD.js";
-import { n as J, t as K } from "./chunks/dialog-Ba0UUE5g.js";
+import { a as B, c as e, d as R, f as C, i as O, l as f, n as p, o as P, r as u, s as D, t as N, u as L } from "./chunks/close-button-B8gF5UNk.js";
+import { a as U, c, i as G, n as l, o as M, r as d, s as g, t as k } from "./chunks/sidebar-DGpEKxOn.js";
+import { a as F, i as Z, n as b, o as v, r as H, s as w, t as x } from "./chunks/basic-page-4_GZOvRr.js";
+import { t as h } from "./chunks/input-CxS7ndpb.js";
+import { t as q } from "./chunks/input-group-D6dlma8k.js";
+import { n as z, t as J } from "./chunks/card-9cGnv-VD.js";
+import { n as Q, t as X } from "./chunks/dialog-Ba0UUE5g.js";
+import { i as aa, n as sa, r as ta, t as oa } from "./chunks/status-view-CcbctPqR.js";
 export {
-  Z as BASIC_PAGE_CALLOUT,
-  v as BASIC_PAGE_CARD,
-  H as BASIC_PAGE_ROW,
-  C as BUTTON_COLORS,
-  D as BUTTON_SHAPES,
-  f as BUTTON_SIZES,
+  x as BASIC_PAGE_CALLOUT,
+  b as BASIC_PAGE_CARD,
+  H as BASIC_PAGE_ITEM,
+  Z as BASIC_PAGE_ITEM_PANEL,
+  F as BASIC_PAGE_ITEM_PANEL_DIVIDED,
+  v as BASIC_PAGE_ROW,
+  p as BUTTON_COLORS,
+  u as BUTTON_SHAPES,
+  O as BUTTON_SIZES,
   B as BUTTON_VARIANTS,
-  b as BasicPage,
-  u as Button,
-  N as ButtonLink,
-  y as CARD_SURFACE,
-  A as CONTROL_PRESS_SCALE,
-  _ as CONTROL_PRESS_SPRING,
-  w as Card,
-  P as CloseButton,
-  K as Dialog,
-  R as EFFECT_BUTTON_SIZES,
-  p as EffectButton,
+  w as BasicPage,
+  P as Button,
+  D as ButtonLink,
+  J as CARD_SURFACE,
+  i as CONTROL_PRESS_SCALE,
+  I as CONTROL_PRESS_SPRING,
+  z as Card,
+  N as CloseButton,
+  X as Dialog,
+  e as EFFECT_BUTTON_SIZES,
+  f as EffectButton,
   L as EffectButtonLink,
-  W as Input,
-  j as InputGroup,
-  n as LinkProvider,
-  F as SIDEBAR_HEADER_INSET,
-  d as SIDEBAR_ITEM,
-  g as SIDEBAR_ITEM_ACTIVE,
-  V as SIDEBAR_ITEM_INACTIVE,
-  l as SIDEBAR_ROOT,
-  G as SIDEBAR_ROOT_BASE,
-  k as SIDEBAR_ROOT_INSET,
-  U as Sidebar,
-  e as buttonVariants,
+  h as Input,
+  q as InputGroup,
+  _ as LinkProvider,
+  k as SIDEBAR_HEADER_INSET,
+  l as SIDEBAR_ITEM,
+  d as SIDEBAR_ITEM_ACTIVE,
+  G as SIDEBAR_ITEM_INACTIVE,
+  U as SIDEBAR_ROOT,
+  M as SIDEBAR_ROOT_BASE,
+  g as SIDEBAR_ROOT_INSET,
+  oa as STATUS_VIEW,
+  sa as STATUS_VIEW_COPY,
+  ta as STATUS_VIEW_SIZES,
+  c as Sidebar,
+  aa as StatusView,
+  R as buttonVariants,
   s as cn,
-  O as effectButtonVariants,
-  r as isReactComponent,
-  i as resolveVariant,
-  J as useDialogPending,
+  C as effectButtonVariants,
+  E as isReactComponent,
+  S as resolveVariant,
+  Q as useDialogPending,
   o as useLinkComponent,
-  m as usePressPulse
+  T as usePressPulse
 };

package/dist/sections/basic-page.js

@@ -1,8 +1,11 @@
 "use client";
-import { i as a, n as s, r as _, t as C } from "../chunks/basic-page-C50WUzYV.js";
+import { a as _, i as E, n as I, o as a, r as s, s as P, t as C } from "../chunks/basic-page-4_GZOvRr.js";
 export {
   C as BASIC_PAGE_CALLOUT,
-  s as BASIC_PAGE_CARD,
-  _ as BASIC_PAGE_ROW,
-  a as BasicPage
+  I as BASIC_PAGE_CARD,
+  s as BASIC_PAGE_ITEM,
+  E as BASIC_PAGE_ITEM_PANEL,
+  _ as BASIC_PAGE_ITEM_PANEL_DIVIDED,
+  a as BASIC_PAGE_ROW,
+  P as BasicPage
 };

package/dist/src/components/status-view/index.d.ts

@@ -0,0 +1 @@
+export { StatusView, STATUS_VIEW, STATUS_VIEW_COPY, STATUS_VIEW_SIZES, type StatusViewProps, type StatusViewSize, } from './status-view';

package/dist/src/components/status-view/status-view.d.ts

@@ -0,0 +1,74 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Hugs its content (`w-fit`) and centers itself in the host (`mx-auto`); text
+ * stays start-aligned so the icon / title / description share one left edge.
+ * `max-w-lg` only caps long prose at Dialog width before it wraps.
+ */
+export declare const STATUS_VIEW = "mx-auto flex w-fit max-w-lg min-w-0 flex-col items-start justify-center text-left";
+/** Title + description group — flex column; gap comes from the size axis. */
+export declare const STATUS_VIEW_COPY = "flex flex-col";
+/**
+ * Size axis — retunes every slot. Title + description share Dialog's
+ * `font-display` ladder: `base` matches Dialog (`gap-1`); `sm` steps one rung
+ * down (`gap-0`) for cards and panels.
+ */
+export declare const STATUS_VIEW_SIZES: {
+    sm: {
+        description: string;
+        classes: {
+            root: string;
+            icon: string;
+            copy: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+    };
+    base: {
+        description: string;
+        classes: {
+            root: string;
+            icon: string;
+            copy: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+    };
+};
+export type StatusViewSize = keyof typeof STATUS_VIEW_SIZES;
+interface StatusViewBaseProps {
+    /** Decorative glyph above the title, usually a Tabler icon. Sized by the view (`*:size-*`), inked `text-pho-secondary`. */
+    icon?: ReactNode;
+    /** One short line naming the state ("No API keys yet", "Page not found"). */
+    title: ReactNode;
+    /** Supporting prose — what it means or what to do next. */
+    description?: ReactNode;
+    /** Optional action row (buttons / links). Empty states usually omit it. */
+    actions?: ReactNode;
+    /** Size variant. @default "base" */
+    size?: StatusViewSize;
+}
+export interface StatusViewProps extends StatusViewBaseProps, Omit<ComponentProps<"div">, keyof StatusViewBaseProps | "children"> {
+}
+/**
+ * StatusView — the standing-in view for a region with nothing to show or
+ * nothing that worked: icon over title over description, with an optional
+ * action row. The block shrink-wraps and centers itself while its text stays
+ * left-aligned; the host owns the footprint (a card body, or a `min-h-screen`
+ * flex-centered page). Use `size="sm"` inside cards, the default `base` for
+ * whole pages.
+ *
+ * Empty and error states share this one component — they differ only in what
+ * you pass:
+ *
+ * - **Empty** — usually no `icon` and no `actions`; the create affordance
+ *   lives elsewhere on the page.
+ * - **Error** — pass a warning `icon`, `role="alert"` so it announces, and
+ *   `actions` offering a way out (retry, reload, a route back).
+ */
+export declare function StatusView({ icon, title, description, actions, size, className, ...props }: StatusViewProps): import("react").JSX.Element;
+export declare namespace StatusView {
+    var displayName: string;
+}
+export {};

package/dist/src/index.d.ts

@@ -11,5 +11,6 @@ export * from './components/input';
 export * from './components/input-group';
 export * from './components/card';
 export * from './components/dialog';
+export * from './components/status-view';
 export * from './sections/sidebar';
 export * from './sections/basic-page';

package/dist/src/sections/basic-page/basic-page.d.ts

@@ -30,6 +30,29 @@ export declare const BASIC_PAGE_CALLOUT = "flex flex-col gap-3 rounded-base bord
  * than a comfortable touch target.
  */
 export declare const BASIC_PAGE_ROW = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
+/**
+ * One card row that can host subviews. Same padding rhythm as a plain row —
+ * an optional trailing `ItemPanel` breaks out of it on its own.
+ */
+export declare const BASIC_PAGE_ITEM = "flex flex-col gap-3 px-5 py-4";
+/**
+ * Secondary strip closing an `Item` that is last in its card. Negative
+ * margins escape the item's `px-5 pb-4` so the gray sheet runs edge-to-edge
+ * and owns the row's bottom padding. The body above stays square and the
+ * sheet's top is flush against it; only the bottom rounds, nesting into the
+ * card's 12px corner (11px inside the 1px border). Content lands back on the
+ * item's left gutter.
+ */
+export declare const BASIC_PAGE_ITEM_PANEL = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5";
+/**
+ * Mid-list variant — the full-bleed sheet only reads well against the card's
+ * bottom corner, so when later rows follow, the panel becomes an inset chip
+ * instead: fully rounded at the small-control radius, overhanging the text
+ * gutter by 8px per side (content stays aligned with the body above), and
+ * leaving the row's own bottom padding and the card's hairline divider alone.
+ * `-mt-1.5` collapses the item's `gap-3` (12px) to an effective `gap-1.5` (6px).
+ */
+export declare const BASIC_PAGE_ITEM_PANEL_DIVIDED = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5";
 /**
  * Page chrome — centered column at the standard content width. Hosts
  * `Title` + `Stack` (and any route-level siblings). Prefer this over
@@ -92,6 +115,43 @@ declare function SectionFooter({ className, ...props }: ComponentProps<"p"> & {
 declare function Card({ className, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;
 }): import("react").JSX.Element;
+/**
+ * One card row that can host subviews. Padding matches a plain row, so use it
+ * for any row that may grow an `ItemPanel` — primary content goes straight in
+ * as children; the panel, when present, is the last child.
+ *
+ * ```tsx
+ * <BasicPage.Card>
+ *   <BasicPage.Item>
+ *     …name, meta, actions…
+ *     <BasicPage.ItemPanel divided>…secret / expanded content…</BasicPage.ItemPanel>
+ *   </BasicPage.Item>
+ *   …later siblings (pass `divided` on the panel above)…
+ * </BasicPage.Card>
+ * ```
+ */
+declare function Item({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export interface BasicPageItemPanelProps extends ComponentProps<"div"> {
+    /**
+     * Set when later card rows follow this item. The panel then renders as an
+     * inset rounded chip (keeping the card's own divider) instead of the
+     * full-bleed bottom sheet, which only reads well against the card's corner.
+     * @default false
+     */
+    divided?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Secondary strip at the end of an `Item`. When the item closes the card,
+ * it's a gray sheet flush under the body, full-bleed and owning the row's
+ * bottom padding, rounding only into the card's bottom corner. Pass `divided`
+ * when later card rows follow — the panel becomes an inset rounded chip and
+ * the card's hairline divider stays in charge. Content is already a centered
+ * flex row either way.
+ */
+declare function ItemPanel({ divided, className, ...props }: BasicPageItemPanelProps): import("react").JSX.Element;
 /**
  * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and
  * optional actions) for a featured block — e.g. an invite form. Do not wrap
@@ -258,6 +318,8 @@ export declare const BasicPage: {
     Description: typeof Description;
     SectionFooter: typeof SectionFooter;
     Card: typeof Card;
+    Item: typeof Item;
+    ItemPanel: typeof ItemPanel;
     Callout: typeof Callout;
     CalloutTitle: typeof CalloutTitle;
     CalloutDescription: typeof CalloutDescription;

package/dist/src/sections/basic-page/index.d.ts

@@ -1 +1 @@
-export { BasicPage, BASIC_PAGE_CARD, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageFooterProps, } from './basic-page';
+export { BasicPage, BASIC_PAGE_CARD, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageFooterProps, type BasicPageItemPanelProps, } from './basic-page';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -201,6 +201,10 @@
       "types": "./dist/src/components/spinner/index.d.ts",
       "import": "./dist/components/spinner.js"
     },
+    "./components/status-view": {
+      "types": "./dist/src/components/status-view/index.d.ts",
+      "import": "./dist/components/status-view.js"
+    },
     "./components/notification": {
       "types": "./dist/src/components/notification/index.d.ts",
       "import": "./dist/components/notification.js"

package/dist/chunks/basic-page-C50WUzYV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"basic-page-C50WUzYV.js","names":["__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs","../../src/sections/basic-page/basic-page.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M15 6l-6 6l6 6\", \"key\": \"svg-0\" }]];\nconst IconChevronLeft = createReactComponent(\"outline\", \"chevron-left\", \"ChevronLeft\", __iconNode);\n\nexport { __iconNode, IconChevronLeft as default };\n//# sourceMappingURL=IconChevronLeft.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M9 6l6 6l-6 6\", \"key\": \"svg-0\" }]];\nconst IconChevronRight = createReactComponent(\"outline\", \"chevron-right\", \"ChevronRight\", __iconNode);\n\nexport { __iconNode, IconChevronRight as default };\n//# sourceMappingURL=IconChevronRight.mjs.map\n","import {\n  type AnchorHTMLAttributes,\n  type ComponentProps,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { IconChevronLeft, IconChevronRight } from \"@tabler/icons-react\";\nimport { ButtonLink, type ButtonLinkProps } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/**\n * BasicPage — Pho's standard content page: a page title, section titles, and\n * bordered cards of label/control rows. Settings, billing, members — any\n * single-column management surface.\n *\n * Spacing: wrap the page in `Root` (a 42rem column with `px-5` gutters,\n * vertical padding). `Stack` separates blocks (`gap-10`). Inside a block,\n * children share `gap-3`. Wrap a section title + description in `Header`\n * (`gap-0.5`) so that pair stays tight — don't put them as loose siblings.\n * Parts already carry `px-5`.\n *\n * Navigation: pages may drill into subpages. `RowLink` is a whole-row link\n * (trailing chevron) and `Back` returns to the parent — both render through\n * the host's `LinkProvider`; the URL itself stays the router's job. `Back`\n * floats in `Root`'s top padding, so `Title` never moves between pages that\n * have a back link and pages that don't.\n */\n\n/* ------------------------------- class map ------------------------------- */\n\n/** Bordered card that stacks rows with hairline dividers. */\nexport const BASIC_PAGE_CARD =\n  \"divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary\";\n\n/**\n * Standalone callout surface — featured block (invite form, notice, etc.).\n * Don't wrap in `Card`; this is the outer chrome.\n */\nexport const BASIC_PAGE_CALLOUT =\n  \"flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5\";\n\n/**\n * One row — label (+ optional description) left, control right.\n * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter\n * than a comfortable touch target.\n */\nexport const BASIC_PAGE_ROW =\n  \"flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\";\n\n/* --------------------------------- parts --------------------------------- */\n\n/**\n * Page chrome — centered column at the standard content width. Hosts\n * `Title` + `Stack` (and any route-level siblings). Prefer this over\n * ad-hoc `max-w-*` wrappers in the app shell.\n *\n * `44.5rem` = the 42rem (`2xl`) content column plus the two `px-5` gutters,\n * so wide viewports render exactly as before while narrow ones keep a 20px\n * breathing edge instead of running content into the viewport.\n *\n * `relative` anchors `Back`, which floats in the top padding — the reserved\n * zone that keeps `Title` at the same position on every page.\n */\nfunction Root({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\n        \"relative mx-auto w-full max-w-[44.5rem] px-5 py-12\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Slug for hash targets — \"Danger zone\" → `danger-zone`. Empty / non-string\n * children yield no id; pass an explicit `id` to override or `id=\"\"` to opt out.\n */\nfunction slugifyHeading(value: string): string {\n  return value\n    .normalize(\"NFKD\")\n    .replace(/[\\u0300-\\u036f]/g, \"\")\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\");\n}\n\nfunction headingIdFromChildren(children: ReactNode): string | undefined {\n  if (typeof children !== \"string\" && typeof children !== \"number\") {\n    return undefined;\n  }\n  const slug = slugifyHeading(String(children));\n  return slug || undefined;\n}\n\n/** Resolve `id`: explicit wins; `\"\"` opts out; else slug from plain-text children. */\nfunction resolveHeadingId(\n  id: string | undefined,\n  children: ReactNode,\n): string | undefined {\n  if (id === \"\") return undefined;\n  if (id != null) return id;\n  return headingIdFromChildren(children);\n}\n\n/**\n * Page title — largest heading on the surface. Plain-text children get a slug\n * `id` for hash targets (`#profile`); the heading itself is not a link.\n */\nfunction Title({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h1\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h1\n      id={headingId}\n      className={cn(\n        \"text-display-base text-pho-primary scroll-mt-12 px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h1>\n  );\n}\n\n/**\n * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;\n * each block lays out its children with `gap-3`.\n */\nfunction Stack({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\n        \"mt-6 flex flex-col gap-10\",\n        \"*:flex *:flex-col *:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Title + optional description pair. Keeps that couple tight (`gap-0.5`) so\n * the block's `gap-3` only applies between this header and the card.\n */\nfunction Header({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(\"flex flex-col gap-0.5\", className)} {...props} />;\n}\n\n/**\n * Section heading — same padding as the page title, smaller type. Hashable via\n * slug `id` (not a link).\n */\nfunction SectionTitle({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h2\n      id={headingId}\n      className={cn(\n        \"text-display-xs text-pho-primary scroll-mt-12 px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/**\n * Supporting copy under a section title. Same display step as the title;\n * color + normal weight keep it secondary. Always wrap with `Header`.\n */\nfunction Description({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description px-5 font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Optional caption below a section's `Card` (outside the card). One step\n * smaller than `Description` (`text-xs`). Not the card-internal dirty-state\n * `Footer`.\n */\nfunction SectionFooter({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\"text-pho-description px-5 text-xs font-normal\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bordered card that stacks rows with hairline dividers. */\nfunction Card({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(BASIC_PAGE_CARD, className)} {...props} />;\n}\n\n/**\n * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and\n * optional actions) for a featured block — e.g. an invite form. Do not wrap\n * in `Card`; this is already the outer surface.\n */\nfunction Callout({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(BASIC_PAGE_CALLOUT, className)} {...props} />;\n}\n\n/** Callout heading — same type as `SectionTitle`. Hashable via slug `id`. */\nfunction CalloutTitle({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h2\n      id={headingId}\n      className={cn(\n        \"text-display-xs text-pho-primary scroll-mt-12 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/** Supporting copy under a callout title. */\nfunction CalloutDescription({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface BasicPageRowProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\"\n> {\n  /** Left-side field name. */\n  label: string;\n  /** Optional helper under the label. */\n  description?: ReactNode;\n  /** Associates the label with a control id. When omitted, the label is not a `<label>`. */\n  htmlFor?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * One row: label (+ optional description) left, control right.\n * Pass `htmlFor` when the row wraps a labelled input; omit it for display/\n * action rows (avatar, danger-zone delete).\n */\nfunction Row({\n  label,\n  description,\n  htmlFor,\n  className,\n  children,\n  ...props\n}: BasicPageRowProps) {\n  return (\n    <div className={cn(BASIC_PAGE_ROW, className)} {...props}>\n      <div className=\"min-w-0\">\n        {htmlFor ? (\n          <label\n            htmlFor={htmlFor}\n            className=\"text-pho-primary block text-base font-normal\"\n          >\n            {label}\n          </label>\n        ) : (\n          <p className=\"text-pho-primary text-base font-normal\">{label}</p>\n        )}\n        {description ? (\n          <p className=\"text-pho-description mt-0.5 text-xs\">{description}</p>\n        ) : null}\n      </div>\n      <div className=\"flex w-full min-w-0 items-center gap-2 sm:w-auto\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** Read-only value on the right side of a row (email, etc.). */\nfunction Value({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\"text-pho-description truncate text-base\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Inline error under a row (still inside the card). Matches card horizontal\n * padding so hosts don't re-apply `px-5`.\n */\nfunction Alert({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      role=\"alert\"\n      className={cn(\"text-pho-error px-5 pb-3 text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Height spring for the `Footer` reveal — quick and essentially critically\n * damped (an overshooting edge would show clipped content). Same feel as the\n * onboarding / invite card's height-follow spring.\n */\nconst REVEAL_HEIGHT_SPRING = {\n  type: \"spring\",\n  stiffness: 640,\n  damping: 50,\n} as const;\n\n/**\n * Content fade layered over the height reveal, so the bar doesn't pop while\n * the card grows — mirrors the onboarding step-content fade.\n */\nconst REVEAL_FADE = { duration: 0.18, ease: \"easeOut\" } as const;\n\nexport interface BasicPageFooterProps extends ComponentProps<\"div\"> {\n  /**\n   * Animated presence for dirty-state bars: the card glides open/closed on a\n   * height spring while the content fades. Omit for a static, always-visible\n   * footer (no animation). No reveal plays on first mount — only on flips.\n   */\n  show?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Trailing bar inside a card — typically a save status + submit button that\n * appears after the form is dirty. Same horizontal/vertical padding as a row.\n * Pass `show` (instead of conditional rendering) to animate the bar in and\n * out following the onboarding card's motion language.\n */\nfunction Footer({ show, className, ...props }: BasicPageFooterProps) {\n  const reduceMotion = useReducedMotion();\n  const bar = (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-6 px-5 py-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (show === undefined) return bar;\n\n  return (\n    <AnimatePresence initial={false}>\n      {show ? (\n        <motion.div\n          className=\"overflow-hidden\"\n          initial={{ height: 0, opacity: 0 }}\n          animate={{ height: \"auto\", opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={\n            reduceMotion\n              ? { duration: 0 }\n              : { height: REVEAL_HEIGHT_SPRING, opacity: REVEAL_FADE }\n          }\n        >\n          {bar}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\n/* ------------------------------- navigation ------------------------------ */\n\nexport interface BasicPageBackProps extends Omit<\n  ButtonLinkProps,\n  \"variant\" | \"size\" | \"shape\" | \"prefix\" | \"suffix\" | \"svgOnly\" | \"href\"\n> {\n  /** Parent destination — rendered through the host's `LinkProvider`. */\n  href: string;\n  /** Label — name the parent page. @default \"Back\" */\n  children?: ReactNode;\n}\n\n/**\n * Back link for a subpage — a small ghost `ButtonLink`; place inside `Root`,\n * before `Title`. It floats in `Root`'s reserved top padding (vertically\n * centered in the 48px zone) instead of taking layout space, so `Title` sits\n * at exactly the same position whether or not a page has one.\n *\n * The offsets align the *label* glyph with the title glyph. Title text sits\n * 40px in (`px-5` root gutter + `px-5` title pad); inside a `sm` ghost button\n * the label sits 29.75px in (8px icon-side pad + 15.75px chevron, 1.125em at\n * the 14px `text-base`, + 4px gap + 2px label-span `px-0.5`) — so `left` is\n * the 10.25px difference. `top-2` centers the 32px button in the 48px\n * reserved zone. The chevron and the ghost hover pill hang in the padding —\n * the usual optical alignment for borderless controls.\n */\nfunction Back({\n  href,\n  className,\n  children = \"Back\",\n  ...props\n}: BasicPageBackProps) {\n  return (\n    <ButtonLink\n      variant=\"ghost\"\n      size=\"sm\"\n      href={href}\n      prefix={<IconChevronLeft />}\n      className={cn(\"absolute top-2 left-[10.25px]\", className)}\n      {...props}\n    >\n      {children}\n    </ButtonLink>\n  );\n}\n\nexport interface BasicPageRowLinkProps extends Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\" | \"title\"\n> {\n  /** Left-side field name — plain text, or compose with a trailing badge. */\n  label: ReactNode;\n  /** Optional helper under the label. */\n  description?: ReactNode;\n  /** Optional media left of the label (e.g. project avatar). */\n  leading?: ReactNode;\n  /** Subpage destination — rendered through the host's `LinkProvider`. */\n  href: string;\n  /** Optional trailing value before the chevron (compose with `Value`). */\n  children?: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\n/**\n * A row that navigates — the whole row is one link into a subpage, with a\n * trailing chevron cue. Same geometry as `Row`; hover lifts the row, and\n * first/last rows follow the card's corner radius.\n */\nfunction RowLink({\n  label,\n  description,\n  leading,\n  href,\n  className,\n  children,\n  ...props\n}: BasicPageRowLinkProps) {\n  const Link = useLinkComponent();\n  return (\n    <Link\n      href={href}\n      {...props}\n      className={cn(\n        BASIC_PAGE_ROW,\n        \"group outline-pho-brand hover:bg-pho-primary-hover cursor-pointer transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2\",\n        // Hover wash follows the card's rounding (minus the 1px border).\n        \"first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\"flex min-w-0 items-center\", leading != null && \"gap-3\")}\n      >\n        {leading}\n        <div className=\"min-w-0\">\n          <div className=\"flex min-w-0 items-center gap-1\">\n            {typeof label === \"string\" || typeof label === \"number\" ? (\n              <p className=\"text-pho-primary truncate text-base font-medium\">\n                {label}\n              </p>\n            ) : (\n              label\n            )}\n          </div>\n          {description ? (\n            <div className=\"text-pho-description text-xs\">{description}</div>\n          ) : null}\n        </div>\n      </div>\n      <div className=\"flex w-full min-w-0 items-center gap-2 sm:w-auto\">\n        {children}\n        <IconChevronRight\n          aria-hidden\n          className=\"text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors\"\n        />\n      </div>\n    </Link>\n  );\n}\n\n/* -------------------------------- assembly ------------------------------- */\n\n/**\n * Basic page layout. One stack, one gap rhythm — only title scale differs:\n *\n * ```tsx\n * <BasicPage.Root>\n *   <BasicPage.Title>Profile</BasicPage.Title>\n *   <BasicPage.Stack>\n *     <form>\n *       <BasicPage.Card>\n *         <BasicPage.Row label=\"Name\" htmlFor=\"first-name\">\n *           <Input id=\"first-name\" size=\"sm\" />\n *         </BasicPage.Row>\n *       </BasicPage.Card>\n *     </form>\n *     <form>\n *       <BasicPage.Header>\n *         <BasicPage.SectionTitle>Agent profile</BasicPage.SectionTitle>\n *         <BasicPage.Description>…</BasicPage.Description>\n *       </BasicPage.Header>\n *       <BasicPage.Card>…</BasicPage.Card>\n *     </form>\n *     <div>\n *       <BasicPage.SectionTitle>Danger zone</BasicPage.SectionTitle>\n *       <BasicPage.Card>\n *         <BasicPage.Row label=\"Delete account\" description=\"…\">\n *           <Button color=\"destructive\" size=\"sm\">Delete</Button>\n *         </BasicPage.Row>\n *       </BasicPage.Card>\n *     </div>\n *     <BasicPage.Callout>\n *       <BasicPage.Header>\n *         <BasicPage.CalloutTitle>Invitations</BasicPage.CalloutTitle>\n *         <BasicPage.CalloutDescription>…</BasicPage.CalloutDescription>\n *       </BasicPage.Header>\n *       …invite form…\n *     </BasicPage.Callout>\n *   </BasicPage.Stack>\n * </BasicPage.Root>\n * ```\n *\n * Subpage — `Back` above the title, `RowLink` rows to drill in:\n *\n * ```tsx\n * <BasicPage.Root>\n *   <BasicPage.Back href=\"/settings\">Settings</BasicPage.Back>\n *   <BasicPage.Title>Billing</BasicPage.Title>\n *   <BasicPage.Stack>\n *     <div>\n *       <BasicPage.Card>\n *         <BasicPage.RowLink label=\"Invoices\" href=\"/settings/invoices\">\n *           <BasicPage.Value>12 documents</BasicPage.Value>\n *         </BasicPage.RowLink>\n *       </BasicPage.Card>\n *     </div>\n *   </BasicPage.Stack>\n * </BasicPage.Root>\n * ```\n */\nexport const BasicPage = {\n  Root,\n  Back,\n  Title,\n  Stack,\n  Header,\n  SectionTitle,\n  Description,\n  SectionFooter,\n  Card,\n  Callout,\n  CalloutTitle,\n  CalloutDescription,\n  Row,\n  RowLink,\n  Value,\n  Alert,\n  Footer,\n};\n"],"x_google_ignoreList":[0,1],"mappings":"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"}