@photon-ai/pho-ui 1.3.0 → 1.5.0

package/dist/chunks/IconArrowUpRight-DGgKzQwV.js

@@ -0,0 +1,14 @@
+"use client";
+import { t } from "./createReactComponent-BqCmnqfX.js";
+var r = [["path", {
+  d: "M17 7l-10 10",
+  key: "svg-0"
+}], ["path", {
+  d: "M8 7l9 0l0 9",
+  key: "svg-1"
+}]], e = t("outline", "arrow-up-right", "ArrowUpRight", r);
+export {
+  e as t
+};
+
+//# sourceMappingURL=IconArrowUpRight-DGgKzQwV.js.map

package/dist/chunks/IconArrowUpRight-DGgKzQwV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconArrowUpRight-DGgKzQwV.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowUpRight.mjs"],"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\": \"M17 7l-10 10\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M8 7l9 0l0 9\", \"key\": \"svg-1\" }]];\nconst IconArrowUpRight = createReactComponent(\"outline\", \"arrow-up-right\", \"ArrowUpRight\", __iconNode);\n\nexport { __iconNode, IconArrowUpRight as default };\n//# sourceMappingURL=IconArrowUpRight.mjs.map\n"],"x_google_ignoreList":[0],"mappings":";;AASA,IAAM,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAgB,KAAO;AAAQ,CAAC,GAAG,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAgB,KAAO;AAAQ,CAAC,CAAC,GAClH,IAAmB,EAAqB,WAAW,kBAAkB,gBAAgB,CAAU"}

package/dist/chunks/IconChevronLeft-CSWMKQ4C.js

@@ -0,0 +1,11 @@
+"use client";
+import { t as e } from "./createReactComponent-BqCmnqfX.js";
+var t = [["path", {
+  d: "M15 6l-6 6l6 6",
+  key: "svg-0"
+}]], n = e("outline", "chevron-left", "ChevronLeft", t);
+export {
+  n as t
+};
+
+//# sourceMappingURL=IconChevronLeft-CSWMKQ4C.js.map

package/dist/chunks/IconChevronLeft-CSWMKQ4C.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconChevronLeft-CSWMKQ4C.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.mjs"],"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"],"x_google_ignoreList":[0],"mappings":";;AASA,IAAM,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAkB,KAAO;AAAQ,CAAC,CAAC,GACjE,IAAkB,EAAqB,WAAW,gBAAgB,eAAe,CAAU"}

package/dist/chunks/basic-page-awtvmT-6.js

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

package/dist/chunks/basic-page-awtvmT-6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-page-awtvmT-6.js","names":[],"sources":["../../../../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\": \"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  Children,\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 *\n * Pass `icon` for a decorative glyph anchored to the header block (first\n * child) — typically a Tabler outline icon. The icon is aria-hidden; keep\n * meaning in the title/description.\n */\nfunction Callout({\n  className,\n  icon,\n  children,\n  ...props\n}: ComponentProps<\"div\"> & {\n  ref?: Ref<HTMLDivElement>;\n  /** Decorative icon, top-right of the header (first child). */\n  icon?: ReactNode;\n}) {\n  // Treat boolean false (and other empty values) as absent — `icon={cond &&\n  // <Icon />}` is a common pattern and must not reserve header padding.\n  if (icon == null || icon === false || icon === true) {\n    return (\n      <div className={cn(BASIC_PAGE_CALLOUT, className)} {...props}>\n        {children}\n      </div>\n    );\n  }\n\n  const [header, ...rest] = Children.toArray(children);\n\n  return (\n    <div className={cn(BASIC_PAGE_CALLOUT, className)} {...props}>\n      <div className=\"relative\">\n        <div className=\"min-w-0 pr-16\">{header}</div>\n        <div\n          aria-hidden\n          className=\"text-pho-description pointer-events-none absolute top-1/2 right-0 size-14 -translate-y-1/2 opacity-50 [&>svg]:size-full\"\n        >\n          {icon}\n        </div>\n      </div>\n      {rest}\n    </div>\n  );\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 icon={<IconMail stroke={1.25} />}>\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],"mappings":"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"}

package/dist/chunks/combobox-rLdS6fl-.js

@@ -0,0 +1,117 @@
+"use client";
+import { t as o } from "./cn-DTiB6ek_.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Combobox as r } from "@base-ui/react/combobox";
+var i = r.Root, s = r.Value, p = r.Portal, c = r.Group, l = r.Collection;
+function h({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.InputGroup, {
+    className: o("relative flex items-center", e),
+    ...t
+  });
+}
+function u({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Input, {
+    className: o("bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand text-md rounded-base w-full px-3 py-2 ring-1 transition-shadow duration-100 ease-linear outline-none ring-inset focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-base", e),
+    ...t
+  });
+}
+function d({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Clear, {
+    className: o("combobox-clear text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4", e),
+    ...t
+  });
+}
+function m({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Trigger, {
+    className: o("text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4", e),
+    ...t
+  });
+}
+function g({ className: e, sideOffset: t = 6, ...a }) {
+  return /* @__PURE__ */ n(r.Positioner, {
+    sideOffset: t,
+    className: o("z-50 outline-none", e),
+    ...a
+  });
+}
+function x({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Popup, {
+    className: o("bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", e),
+    ...t
+  });
+}
+function y({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.List, {
+    className: o("max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain", e),
+    ...t
+  });
+}
+function f({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Empty, {
+    className: o("text-pho-description px-2.5 py-6 text-center text-base empty:m-0 empty:p-0", e),
+    ...t
+  });
+}
+function v({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Item, {
+    className: o("text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary", e),
+    ...t
+  });
+}
+function b({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.ItemIndicator, {
+    className: o("text-pho-brand col-start-1 flex items-center [&>svg]:size-4", e),
+    ...t
+  });
+}
+function N({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.GroupLabel, {
+    className: o("text-pho-secondary px-2.5 py-1.5 text-xs font-medium", e),
+    ...t
+  });
+}
+function w({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Chips, {
+    className: o("bg-pho-primary ring-pho-primary focus-within:ring-pho-brand rounded-base flex flex-wrap items-center gap-1.5 p-1.5 ring-1 ring-inset focus-within:ring-2", e),
+    ...t
+  });
+}
+function C({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.Chip, {
+    className: o("bg-pho-secondary text-pho-secondary data-[highlighted]:bg-pho-inverse data-[highlighted]:text-pho-inverse flex items-center gap-1 rounded-sm py-0.5 pr-1 pl-2 text-base", e),
+    ...t
+  });
+}
+function I({ className: e, ...t }) {
+  return /* @__PURE__ */ n(r.ChipRemove, {
+    className: o("text-pho-secondary hover:text-pho-secondary-hover in-data-[highlighted]:text-pho-inverse flex cursor-pointer items-center rounded-sm [&>svg]:size-3.5", e),
+    ...t
+  });
+}
+var R = {
+  Root: i,
+  Value: s,
+  InputGroup: h,
+  Input: u,
+  Trigger: m,
+  Clear: d,
+  Portal: p,
+  Positioner: g,
+  Popup: x,
+  List: y,
+  Collection: l,
+  Empty: f,
+  Item: v,
+  ItemIndicator: b,
+  Group: c,
+  GroupLabel: N,
+  Chips: w,
+  Chip: C,
+  ChipRemove: I
+};
+export {
+  R as t
+};
+
+//# sourceMappingURL=combobox-rLdS6fl-.js.map

package/dist/chunks/combobox-rLdS6fl-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-rLdS6fl-.js","names":[],"sources":["../../src/components/combobox/combobox.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Root = BaseCombobox.Root;\nconst Value = BaseCombobox.Value;\nconst Portal = BaseCombobox.Portal;\nconst Group = BaseCombobox.Group;\nconst Collection = BaseCombobox.Collection;\n\nfunction InputGroup({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.InputGroup>) {\n  return (\n    <BaseCombobox.InputGroup\n      className={cn(\"relative flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Input({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.Input>) {\n  return (\n    <BaseCombobox.Input\n      className={cn(\n        // text-md on small viewports — iOS zooms into fields under 16px.\n        \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand text-md rounded-base w-full px-3 py-2 ring-1 transition-shadow duration-100 ease-linear outline-none ring-inset focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-base\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Clear({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.Clear>) {\n  return (\n    <BaseCombobox.Clear\n      className={cn(\n        \"combobox-clear text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Trigger({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.Trigger>) {\n  return (\n    <BaseCombobox.Trigger\n      className={cn(\n        \"text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseCombobox.Positioner>) {\n  return (\n    <BaseCombobox.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.Popup>) {\n  return (\n    <BaseCombobox.Popup\n      className={cn(\n        \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction List({ className, ...props }: StyledProps<typeof BaseCombobox.List>) {\n  return (\n    <BaseCombobox.List\n      className={cn(\n        \"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Empty({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.Empty>) {\n  return (\n    <BaseCombobox.Empty\n      className={cn(\n        \"text-pho-description px-2.5 py-6 text-center text-base empty:m-0 empty:p-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Item({ className, ...props }: StyledProps<typeof BaseCombobox.Item>) {\n  return (\n    <BaseCombobox.Item\n      className={cn(\n        \"text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none\",\n        \"data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemIndicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.ItemIndicator>) {\n  return (\n    <BaseCombobox.ItemIndicator\n      className={cn(\n        \"text-pho-brand col-start-1 flex items-center [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GroupLabel({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.GroupLabel>) {\n  return (\n    <BaseCombobox.GroupLabel\n      className={cn(\n        \"text-pho-secondary px-2.5 py-1.5 text-xs font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Chips({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.Chips>) {\n  return (\n    <BaseCombobox.Chips\n      className={cn(\n        \"bg-pho-primary ring-pho-primary focus-within:ring-pho-brand rounded-base flex flex-wrap items-center gap-1.5 p-1.5 ring-1 ring-inset focus-within:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Chip({ className, ...props }: StyledProps<typeof BaseCombobox.Chip>) {\n  return (\n    <BaseCombobox.Chip\n      className={cn(\n        // Keyboard-highlighted chip flips to the inverse chip surface.\n        \"bg-pho-secondary text-pho-secondary data-[highlighted]:bg-pho-inverse data-[highlighted]:text-pho-inverse flex items-center gap-1 rounded-sm py-0.5 pr-1 pl-2 text-base\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ChipRemove({\n  className,\n  ...props\n}: StyledProps<typeof BaseCombobox.ChipRemove>) {\n  return (\n    <BaseCombobox.ChipRemove\n      className={cn(\n        \"text-pho-secondary hover:text-pho-secondary-hover in-data-[highlighted]:text-pho-inverse flex cursor-pointer items-center rounded-sm [&>svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Combobox built on Base UI `Combobox` — a text input that filters a list as\n * you type and commits to a value from it. Pass `items` to `Combobox.Root`;\n * `Combobox.List` takes a render function mapping each (filtered) item to a\n * `Combobox.Item`. Add `Combobox.Chips` for multi-select. For free-form text\n * with suggestions, use `Autocomplete`; for a small fixed set, use `Select`.\n */\nexport const Combobox = {\n  Root,\n  Value,\n  InputGroup,\n  Input,\n  Trigger,\n  Clear,\n  Portal,\n  Positioner,\n  Popup,\n  List,\n  Collection,\n  Empty,\n  Item,\n  ItemIndicator,\n  Group,\n  GroupLabel,\n  Chips,\n  Chip,\n  ChipRemove,\n};\n"],"mappings":"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"}