@photon-ai/pho-ui 4.11.0 → 4.13.0

package/dist/components/chat.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../chunks/chat-B0WIgEyM.js";
+import { t as e } from "../chunks/chat-Bu8UyIbT.js";
 export {
   e as Chat
 };

package/dist/components/checkbox.js

@@ -1,5 +1,5 @@
 "use client";
-import { n as e, r, t as a } from "../chunks/checkbox-CLPmblNA.js";
+import { n as e, r, t as a } from "../chunks/checkbox-CwvoEJhd.js";
 export {
   r as Checkbox,
   a as CheckboxCard,

package/dist/components/command.js

@@ -1,5 +1,5 @@
 "use client";
-import { n as t, t as a } from "../chunks/command-iYvU6Mhf.js";
+import { n as t, t as a } from "../chunks/command-D5g49VqR.js";
 export {
   a as Command,
   t as useCommandState

package/dist/components/data-table.js

@@ -1,8 +1,9 @@
 "use client";
-import { a as e, i as t, n as r, r as o, t as s } from "../chunks/data-table-B1dmrN6r.js";
-import { i as l, t as T } from "../chunks/ghost-search-CNVs9k1o.js";
+import { a as e, i as t, n as r, r as o, t as s } from "../chunks/data-table-hzZb7Otx.js";
+import { r as c } from "../chunks/chrome-Ds7WykBJ.js";
+import { t as T } from "../chunks/ghost-search-8PzP73zS.js";
 export {
-  l as DATA_TABLE_SURFACE,
+  c as DATA_TABLE_SURFACE,
   s as DataTable,
   T as GhostSearch,
   r as TableHostContext,

package/dist/components/dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { n as i, t as o } from "../chunks/dialog-MPvem7yV.js";
+import { n as i, t as o } from "../chunks/dialog-ChS0tdHa.js";
 export {
   o as Dialog,
   i as useDialogPending

package/dist/components/field.js

@@ -1,56 +1,61 @@
 "use client";
-import { t as o } from "../chunks/cn-ChIgwEl3.js";
+import { t } from "../chunks/cn-ChIgwEl3.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
 import { Field as i } from "@base-ui/react/field";
-function a({ className: r, ...e }) {
-  return /* @__PURE__ */ t(i.Root, {
-    className: o("group/field flex flex-col gap-1.5", r),
+function s({ className: r, ...e }) {
+  return /* @__PURE__ */ o(i.Root, {
+    className: t("group/field flex flex-col gap-1.5", r),
     ...e
   });
 }
-function n({ className: r, ...e }) {
-  return /* @__PURE__ */ t(i.Label, {
-    className: o("text-pho-secondary cursor-default text-base font-medium", r),
-    ...e
+function d({ className: r, required: e, children: a, ...n }) {
+  return /* @__PURE__ */ l(i.Label, {
+    className: t("text-pho-secondary cursor-default text-base font-medium", e && "flex items-center gap-0.5", r),
+    ...n,
+    children: [a, e ? /* @__PURE__ */ o("span", {
+      className: "text-pho-brand",
+      "aria-hidden": "true",
+      children: "*"
+    }) : null]
   });
 }
-function l({ className: r, ...e }) {
-  return /* @__PURE__ */ t(i.Control, {
-    className: o("bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder 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-pho-brand focus-visible:ring-2", "data-[invalid]:ring-pho-error-subtle data-[invalid]:focus-visible:ring-pho-error data-[invalid]:ring-[1.5px] data-[invalid]:focus-visible:ring-2", "disabled:cursor-not-allowed disabled:opacity-50", r),
+function c({ className: r, ...e }) {
+  return /* @__PURE__ */ o(i.Control, {
+    className: t("bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder 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-pho-brand focus-visible:ring-2", "data-[invalid]:ring-pho-error-subtle data-[invalid]:focus-visible:ring-pho-error data-[invalid]:ring-[1.5px] data-[invalid]:focus-visible:ring-2", "disabled:cursor-not-allowed disabled:opacity-50", r),
     ...e
   });
 }
-function s({ className: r, ...e }) {
-  return /* @__PURE__ */ t("div", {
-    className: o("flex min-w-0 flex-col gap-3", r),
+function p({ className: r, ...e }) {
+  return /* @__PURE__ */ o("div", {
+    className: t("flex min-w-0 flex-col gap-3", r),
     ...e
   });
 }
-function d({ className: r, ...e }) {
-  return /* @__PURE__ */ t(i.Description, {
-    className: o("text-pho-description text-base", r),
+function u({ className: r, ...e }) {
+  return /* @__PURE__ */ o(i.Description, {
+    className: t("text-pho-description text-base", r),
     ...e
   });
 }
-function p({ className: r, ...e }) {
-  return /* @__PURE__ */ t(i.Error, {
-    className: o("text-pho-error text-base", r),
+function m({ className: r, ...e }) {
+  return /* @__PURE__ */ o(i.Error, {
+    className: t("text-pho-error text-base", r),
     ...e
   });
 }
-var x = {
-  Root: a,
-  Label: n,
-  Control: l,
-  Controls: s,
-  Description: d,
-  Error: p,
+var g = {
+  Root: s,
+  Label: d,
+  Control: c,
+  Controls: p,
+  Description: u,
+  Error: m,
   Item: i.Item,
   Validity: i.Validity
 };
 export {
-  x as Field
+  g as Field
 };
 
 //# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\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\nfunction Root({ className, ...props }: StyledProps<typeof BaseField.Root>) {\n  return (\n    <BaseField.Root\n      className={cn(\"group/field flex flex-col gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Label({ className, ...props }: StyledProps<typeof BaseField.Label>) {\n  return (\n    <BaseField.Label\n      className={cn(\n        \"text-pho-secondary cursor-default text-base font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Control({\n  className,\n  ...props\n}: StyledProps<typeof BaseField.Control>) {\n  return (\n    <BaseField.Control\n      className={cn(\n        // Flat field surface — hairline ring carries the edge (site has no\n        // resting shadows outside floating layers).\n        \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder text-md rounded-base w-full px-3 py-2 ring-1 transition-shadow duration-100 ease-linear outline-none ring-inset\",\n        \"focus-visible:ring-pho-brand focus-visible:ring-2\",\n        // Invalid is mid-weight: thicker than the 1px rest hairline, thinner\n        // than the 2px focus ring. Rest uses the subtle error ink; focus\n        // steps up to the solid error.\n        \"data-[invalid]:ring-pho-error-subtle data-[invalid]:focus-visible:ring-pho-error data-[invalid]:ring-[1.5px] data-[invalid]:focus-visible:ring-2\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Several controls under one label: the lines of an address, first and\n * last name, the parts of a date. Stacks them at the gap the system uses\n * between the parts of one thing (12px), so the field's own 6px stays for\n * label and description. Put an `Inline` inside for a side-by-side row.\n */\nfunction Controls({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-3\", className)} {...props} />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseField.Description>) {\n  return (\n    <BaseField.Description\n      className={cn(\"text-pho-description text-base\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Error({ className, ...props }: StyledProps<typeof BaseField.Error>) {\n  return (\n    <BaseField.Error\n      className={cn(\"text-pho-error text-base\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Form field built on Base UI `Field`. Wires a label, description, and\n * validation error to a control for you — compose it around `Field.Control`\n * (or any control via `render`). `Field.Error` shows when the control is\n * invalid; `Field.Validity` exposes raw validity for custom messages.\n * `Field.Controls` stacks several controls under one label.\n */\nexport const Field = {\n  Root,\n  Label,\n  Control,\n  Controls,\n  Description,\n  Error,\n  Item: BaseField.Item,\n  Validity: BaseField.Validity,\n};\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AACzE,SACE,gBAAA,EAAC,EAAU,MAAX;AAAA,IACE,WAAW,EAAG,qCAAqC,CAAS;AAAA,IAC5D,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EACT,2DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACqC;AACxC,SACE,gBAAA,EAAC,EAAU,SAAX;AAAA,IACE,WAAW,EAGT,qMACA,qDAIA,oJACA,mDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,SAAS,EAAS,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgC;AAChE,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,EAAG,+BAA+B,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE9E;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAU,aAAX;AAAA,IACE,WAAW,EAAG,kCAAkC,CAAS;AAAA,IACzD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EAAG,4BAA4B,CAAS;AAAA,IACnD,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAQ;AAAA,EACnB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAM,EAAU;AAAA,EAChB,UAAU,EAAU;AACtB"}
+{"version":3,"file":"field.js","names":[],"sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\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\nfunction Root({ className, ...props }: StyledProps<typeof BaseField.Root>) {\n  return (\n    <BaseField.Root\n      className={cn(\"group/field flex flex-col gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * The field's label. `required` marks it the way `Input required` marks\n * its own: a brand-coloured star after the words. A form marks every\n * required field or none, so a field built from parts (a `Select`, a\n * `PhoneInput`, a pair of inputs under one label) takes `required` here to\n * match the `Input`s beside it.\n */\nfunction Label({\n  className,\n  required,\n  children,\n  ...props\n}: StyledProps<typeof BaseField.Label> & {\n  /** Mark the field required: a star after the label's words. */\n  required?: boolean;\n}) {\n  return (\n    <BaseField.Label\n      className={cn(\n        \"text-pho-secondary cursor-default text-base font-medium\",\n        required && \"flex items-center gap-0.5\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {/* The star is for the eye; the control carries the required state. */}\n      {required ? (\n        <span className=\"text-pho-brand\" aria-hidden=\"true\">\n          *\n        </span>\n      ) : null}\n    </BaseField.Label>\n  );\n}\n\nfunction Control({\n  className,\n  ...props\n}: StyledProps<typeof BaseField.Control>) {\n  return (\n    <BaseField.Control\n      className={cn(\n        // Flat field surface — hairline ring carries the edge (site has no\n        // resting shadows outside floating layers).\n        \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder text-md rounded-base w-full px-3 py-2 ring-1 transition-shadow duration-100 ease-linear outline-none ring-inset\",\n        \"focus-visible:ring-pho-brand focus-visible:ring-2\",\n        // Invalid is mid-weight: thicker than the 1px rest hairline, thinner\n        // than the 2px focus ring. Rest uses the subtle error ink; focus\n        // steps up to the solid error.\n        \"data-[invalid]:ring-pho-error-subtle data-[invalid]:focus-visible:ring-pho-error data-[invalid]:ring-[1.5px] data-[invalid]:focus-visible:ring-2\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Several controls under one label: the lines of an address, first and\n * last name, the parts of a date. Stacks them at the gap the system uses\n * between the parts of one thing (12px), so the field's own 6px stays for\n * label and description. Put an `Inline` inside for a side-by-side row.\n */\nfunction Controls({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-3\", className)} {...props} />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseField.Description>) {\n  return (\n    <BaseField.Description\n      className={cn(\"text-pho-description text-base\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Error({ className, ...props }: StyledProps<typeof BaseField.Error>) {\n  return (\n    <BaseField.Error\n      className={cn(\"text-pho-error text-base\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Form field built on Base UI `Field`. Wires a label, description, and\n * validation error to a control for you — compose it around `Field.Control`\n * (or any control via `render`). `Field.Error` shows when the control is\n * invalid; `Field.Validity` exposes raw validity for custom messages.\n * `Field.Controls` stacks several controls under one label.\n */\nexport const Field = {\n  Root,\n  Label,\n  Control,\n  Controls,\n  Description,\n  Error,\n  Item: BaseField.Item,\n  Validity: BaseField.Validity,\n};\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AACzE,SACE,gBAAA,EAAC,EAAU,MAAX;AAAA,IACE,WAAW,EAAG,qCAAqC,CAAS;AAAA,IAC5D,GAAI;AAAA,EACL,CAAA;AAEL;AASA,SAAS,EAAM,EACb,WAAA,GACA,UAAA,GACA,UAAA,GACA,GAAG,EAAA,GAIF;AACD,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EACT,2DACA,KAAY,6BACZ,CACF;AAAA,IACA,GAAI;AAAA,IANN,UAAA,CAQG,GAEA,IACC,gBAAA,EAAC,QAAD;AAAA,MAAM,WAAU;AAAA,MAAiB,eAAY;AAAA,MAAO,UAAA;AAAA,IAE9C,CAAA,IACJ,IACW;AAAA;AAErB;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACqC;AACxC,SACE,gBAAA,EAAC,EAAU,SAAX;AAAA,IACE,WAAW,EAGT,qMACA,qDAIA,oJACA,mDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,SAAS,EAAS,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgC;AAChE,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,EAAG,+BAA+B,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE9E;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAU,aAAX;AAAA,IACE,WAAW,EAAG,kCAAkC,CAAS;AAAA,IACzD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EAAG,4BAA4B,CAAS;AAAA,IACnD,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAQ;AAAA,EACnB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAM,EAAU;AAAA,EAChB,UAAU,EAAU;AACtB"}

package/dist/components/filter-bar.js

@@ -1,5 +1,5 @@
 "use client";
-import { i as t, n as e, r as a, t as i } from "../chunks/filter-bar-B-oYYBsU.js";
+import { i as t, n as e, r as a, t as i } from "../chunks/filter-bar-C4sPEjw1.js";
 export {
   i as FILTER_DATE_PRESETS,
   e as FilterBar,

package/dist/components/input.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../chunks/input-DjvZoF8v.js";
+import { t as e } from "../chunks/input-fFWvPJOf.js";
 export {
   e as Input
 };

package/dist/components/radio-group.js

@@ -1,99 +1,104 @@
 "use client";
-import { t as d } from "../chunks/cn-ChIgwEl3.js";
-import { r as m } from "../chunks/use-press-pulse-IbNstUT0.js";
-import { a as g, n as C, r as x, t as R } from "../chunks/choice-card-BVNP1NB6.js";
-import { createContext as v, useContext as N } from "react";
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { motion as l } from "motion/react";
-import { Radio as c } from "@base-ui/react/radio";
-import { RadioGroup as y } from "@base-ui/react/radio-group";
-var f = v(!1);
-function b() {
-  return N(f);
+import { t as l } from "../chunks/cn-ChIgwEl3.js";
+import { r as g } from "../chunks/use-press-pulse-IbNstUT0.js";
+import { a as f, n as C, r as v, t as R } from "../chunks/choice-card-_Ocs0iUj.js";
+import { createContext as N, useContext as y } from "react";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { motion as c } from "motion/react";
+import { Radio as p } from "@base-ui/react/radio";
+import { RadioGroup as k } from "@base-ui/react/radio-group";
+var b = N(!1);
+function x() {
+  return y(b);
 }
-function k({ className: e, disabled: r, ...a }) {
-  return /* @__PURE__ */ o(f.Provider, {
-    value: !!r,
-    children: /* @__PURE__ */ o(y, {
-      disabled: r,
-      className: d("flex flex-col gap-3", e),
+function I({ className: r, disabled: e, ...a }) {
+  return /* @__PURE__ */ o(b.Provider, {
+    value: !!e,
+    children: /* @__PURE__ */ o(k, {
+      disabled: e,
+      className: l("flex flex-col gap-3", r),
       ...a
     })
   });
 }
-k.displayName = "RadioGroup";
-function I({ className: e, label: r, disabled: a, ...i }) {
-  const s = b(), { motionProps: p } = m({
+I.displayName = "RadioGroup";
+function _({ className: r, label: e, disabled: a, ...i }) {
+  const n = x(), { motionProps: s } = g({
     scale: 0.94,
-    disabled: !!(a || s)
-  }), { onPointerDown: t, ...u } = p, n = /* @__PURE__ */ o(c.Root, {
+    disabled: !!(a || n)
+  }), { onPointerDown: t, ...u } = s, d = /* @__PURE__ */ o(p.Root, {
     disabled: a,
-    render: /* @__PURE__ */ o(l.span, {
+    render: /* @__PURE__ */ o(c.span, {
       ...u,
-      onPointerDown: r ? void 0 : t
+      onPointerDown: e ? void 0 : t
     }),
-    className: d("outline-pho-brand bg-pho-primary ring-pho-primary flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2", "transition-[background-color,box-shadow,color,outline-color] duration-150 ease-out", "hover:bg-pho-primary-hover hover:ring-pho-ink group-hover:bg-pho-primary-hover group-hover:ring-pho-ink", "data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent", "data-[checked]:hover:bg-pho-brand-solid-hover data-[checked]:group-hover:bg-pho-brand-solid-hover", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", e),
+    className: l("outline-pho-brand bg-pho-primary ring-pho-primary flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2", "transition-[background-color,box-shadow,color,outline-color] duration-150 ease-out", "hover:bg-pho-primary-hover hover:ring-pho-ink group-hover:bg-pho-primary-hover group-hover:ring-pho-ink", "data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent", "data-[checked]:hover:bg-pho-brand-solid-hover data-[checked]:group-hover:bg-pho-brand-solid-hover", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", r),
     ...i,
-    children: /* @__PURE__ */ o(c.Indicator, {
-      render: /* @__PURE__ */ o(l.span, {
+    children: /* @__PURE__ */ o(p.Indicator, {
+      render: /* @__PURE__ */ o(c.span, {
         initial: { scale: 0 },
         animate: { scale: 1 },
-        transition: g
+        transition: f
       }),
       className: "bg-pho-on-brand size-2 rounded-full"
     })
   });
-  return r ? /* @__PURE__ */ h("label", {
+  return e ? /* @__PURE__ */ m("label", {
     className: "group flex cursor-pointer items-center gap-2 select-none",
     onPointerDown: t,
-    children: [n, /* @__PURE__ */ o("span", {
+    children: [d, /* @__PURE__ */ o("span", {
       className: "text-pho-secondary text-base",
-      children: r
+      children: e
     })]
-  }) : n;
+  }) : d;
 }
-I.displayName = "Radio";
-function _({ title: e, description: r }) {
-  return /* @__PURE__ */ h("span", {
+_.displayName = "Radio";
+function P({ title: r, description: e }) {
+  return /* @__PURE__ */ m("span", {
     className: "flex min-w-0 flex-1 flex-col",
     children: [/* @__PURE__ */ o("span", {
       className: "text-pho-primary block font-medium",
-      children: e
-    }), r ? /* @__PURE__ */ o("span", {
-      className: "text-pho-description block",
       children: r
+    }), e ? /* @__PURE__ */ o("span", {
+      className: "text-pho-description block",
+      children: e
     }) : null]
   });
 }
-function P({ className: e, title: r, description: a, icon: i, disabled: s, ...p }) {
-  const t = b(), { motionProps: u } = m({
+function D({ className: r, title: e, description: a, icon: i, trailing: n, disabled: s, ...t }) {
+  const u = x(), { motionProps: d } = g({
     scale: C,
-    disabled: !!(s || t),
-    transition: x
-  }), n = i != null;
-  return /* @__PURE__ */ h(c.Root, {
+    disabled: !!(s || u),
+    transition: v
+  }), h = i != null;
+  return /* @__PURE__ */ m(p.Root, {
     disabled: s,
-    render: /* @__PURE__ */ o(l.span, { ...u }),
-    className: d(R, n && "flex-col gap-1.5", e),
-    ...p,
+    render: /* @__PURE__ */ o(c.span, { ...d }),
+    className: l(R, h && "flex-col gap-1.5", r),
+    ...t,
     children: [
-      n ? /* @__PURE__ */ o("span", {
+      h ? /* @__PURE__ */ o("span", {
         "aria-hidden": !0,
         className: "text-pho-secondary flex size-6 shrink-0 items-center justify-center [&>svg]:size-6",
         children: i
       }) : null,
-      /* @__PURE__ */ o(_, {
-        title: r,
+      /* @__PURE__ */ o(P, {
+        title: e,
         description: a
       }),
-      n ? null : /* @__PURE__ */ o("span", {
+      h ? null : n != null && n !== !1 ? /* @__PURE__ */ o("span", {
+        "aria-hidden": !0,
+        "data-radio-card-trailing": "",
+        className: "text-pho-secondary mt-0.5 mr-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+        children: n
+      }) : /* @__PURE__ */ o("span", {
         "aria-hidden": !0,
-        className: d("bg-pho-primary ring-pho-primary mt-0.5 mr-0.5 flex size-4 shrink-0 items-center justify-center rounded-full ring-1 ring-inset", "group-hover:bg-pho-primary-hover group-hover:ring-pho-ink transition-[background-color,box-shadow] duration-150 ease-out", "group-data-[checked]:bg-pho-brand-solid group-data-[checked]:group-hover:bg-pho-brand-solid-hover group-data-[checked]:ring-transparent"),
-        children: /* @__PURE__ */ o(c.Indicator, {
-          render: /* @__PURE__ */ o(l.span, {
+        className: l("bg-pho-primary ring-pho-primary mt-0.5 mr-0.5 flex size-4 shrink-0 items-center justify-center rounded-full ring-1 ring-inset", "group-hover:bg-pho-primary-hover group-hover:ring-pho-ink transition-[background-color,box-shadow] duration-150 ease-out", "group-data-[checked]:bg-pho-brand-solid group-data-[checked]:group-hover:bg-pho-brand-solid-hover group-data-[checked]:ring-transparent"),
+        children: /* @__PURE__ */ o(p.Indicator, {
+          render: /* @__PURE__ */ o(c.span, {
             initial: { scale: 0 },
             animate: { scale: 1 },
-            transition: g
+            transition: f
           }),
           className: "bg-pho-on-brand size-1.5 rounded-full"
         })
@@ -101,11 +106,11 @@ function P({ className: e, title: r, description: a, icon: i, disabled: s, ...p
     ]
   });
 }
-P.displayName = "RadioCard";
+D.displayName = "RadioCard";
 export {
-  I as Radio,
-  P as RadioCard,
-  k as RadioGroup
+  _ as Radio,
+  D as RadioCard,
+  I as RadioGroup
 };
 
 //# sourceMappingURL=radio-group.js.map

package/dist/components/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":[],"sources":["../../src/components/radio-group/radio-group.tsx","../../src/components/radio-group/radio-card.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { usePressPulse } from \"../../utils/use-press-pulse\";\nimport { CHOICE_INDICATOR_POP_TRANSITION } from \"../../utils/choice-card\";\n\nexport interface RadioGroupProps extends Omit<\n  ComponentProps<typeof BaseRadioGroup>,\n  \"className\"\n> {\n  className?: string;\n}\n\nconst RadioGroupDisabledContext = createContext(false);\n\n/** Group-level `disabled`, so press pulse skips when the group is locked. */\nexport function useRadioGroupDisabled() {\n  return useContext(RadioGroupDisabledContext);\n}\n\n/**\n * Single-choice group built on Base UI `RadioGroup`. Holds `Radio` items;\n * exactly one may be selected. Control with `value` / `onValueChange` or leave\n * uncontrolled with `defaultValue`.\n */\nexport function RadioGroup({ className, disabled, ...props }: RadioGroupProps) {\n  return (\n    <RadioGroupDisabledContext.Provider value={Boolean(disabled)}>\n      <BaseRadioGroup\n        disabled={disabled}\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      />\n    </RadioGroupDisabledContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport interface RadioProps extends Omit<\n  ComponentProps<typeof BaseRadio.Root>,\n  \"className\"\n> {\n  className?: string;\n  /** Text rendered beside the dot; the whole row selects this option. */\n  label?: ReactNode;\n}\n\n/**\n * A single option within a `RadioGroup`. Requires a `value`; pass `label` for a\n * clickable text row or provide an `aria-label`.\n */\nexport function Radio({ className, label, disabled, ...props }: RadioProps) {\n  const groupDisabled = useRadioGroupDisabled();\n  const { motionProps } = usePressPulse({\n    scale: 0.94,\n    disabled: Boolean(disabled || groupDisabled),\n  });\n  // With a label, the whole row is the hit target — press-trigger from there\n  // (pointerdown bubbles up from the label text too) so the dot still\n  // animates when the text, not the dot itself, is what's clicked.\n  const { onPointerDown, ...dotMotionProps } = motionProps;\n\n  const dot = (\n    <BaseRadio.Root\n      disabled={disabled}\n      render={\n        <motion.span\n          {...dotMotionProps}\n          onPointerDown={label ? undefined : onPointerDown}\n        />\n      }\n      className={cn(\n        \"outline-pho-brand bg-pho-primary ring-pho-primary flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2\",\n        // Transform stays out — Motion owns the press pulse.\n        \"transition-[background-color,box-shadow,color,outline-color] duration-150 ease-out\",\n        // group-hover covers hovering the label text, not just the dot itself.\n        \"hover:bg-pho-primary-hover hover:ring-pho-ink group-hover:bg-pho-primary-hover group-hover:ring-pho-ink\",\n        \"data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent\",\n        \"data-[checked]:hover:bg-pho-brand-solid-hover data-[checked]:group-hover:bg-pho-brand-solid-hover\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {/* The indicator only renders when checked, i.e. always on brand-solid —\n          on-brand (light-dark(#fff,#000)) keeps the dot visible in dark mode,\n          where brand-solid is white. Pops in rather than appearing flat. */}\n      <BaseRadio.Indicator\n        render={\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={CHOICE_INDICATOR_POP_TRANSITION}\n          />\n        }\n        className=\"bg-pho-on-brand size-2 rounded-full\"\n      />\n    </BaseRadio.Root>\n  );\n\n  if (!label) return dot;\n  return (\n    <label\n      className=\"group flex cursor-pointer items-center gap-2 select-none\"\n      onPointerDown={onPointerDown}\n    >\n      {dot}\n      <span className=\"text-pho-secondary text-base\">{label}</span>\n    </label>\n  );\n}\n\nRadio.displayName = \"Radio\";\n","import { type ComponentProps, type ReactNode } from \"react\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { usePressPulse } from \"../../utils/use-press-pulse\";\nimport {\n  CHOICE_CARD_BASE,\n  CHOICE_CARD_WITH_ICON,\n  CHOICE_CARD_PRESS_SCALE,\n  CHOICE_CARD_PRESS_TRANSITION,\n  CHOICE_INDICATOR_POP_TRANSITION,\n} from \"../../utils/choice-card\";\nimport { useRadioGroupDisabled } from \"./radio-group\";\n\nexport interface RadioCardProps extends Omit<\n  ComponentProps<typeof BaseRadio.Root>,\n  \"className\" | \"title\"\n> {\n  className?: string;\n  /** Tile heading. */\n  title: ReactNode;\n  /** Supporting copy shown below the title. */\n  description?: ReactNode;\n  /** Glyph stacked above the title. When set, it replaces the radio dot. */\n  icon?: ReactNode;\n}\n\nfunction CardCopy({\n  title,\n  description,\n}: {\n  title: ReactNode;\n  description?: ReactNode;\n}) {\n  return (\n    <span className=\"flex min-w-0 flex-1 flex-col\">\n      <span className=\"text-pho-primary block font-medium\">{title}</span>\n      {description ? (\n        <span className=\"text-pho-description block\">{description}</span>\n      ) : null}\n    </span>\n  );\n}\n\n/**\n * A `Radio` styled as a bordered, selectable tile — title, optional\n * description, and either a stacked icon above them or the radio dot at\n * the end of the title row. The tile *is* the radio (see `usePressPulse`);\n * an inner glyph is decorative.\n */\nexport function RadioCard({\n  className,\n  title,\n  description,\n  icon,\n  disabled,\n  ...props\n}: RadioCardProps) {\n  const groupDisabled = useRadioGroupDisabled();\n  const { motionProps } = usePressPulse({\n    scale: CHOICE_CARD_PRESS_SCALE,\n    disabled: Boolean(disabled || groupDisabled),\n    transition: CHOICE_CARD_PRESS_TRANSITION,\n  });\n  const hasIcon = icon != null;\n\n  return (\n    <BaseRadio.Root\n      disabled={disabled}\n      render={<motion.span {...motionProps} />}\n      className={cn(\n        CHOICE_CARD_BASE,\n        hasIcon && CHOICE_CARD_WITH_ICON,\n        className,\n      )}\n      {...props}\n    >\n      {hasIcon ? (\n        <span\n          aria-hidden\n          className=\"text-pho-secondary flex size-6 shrink-0 items-center justify-center [&>svg]:size-6\"\n        >\n          {icon}\n        </span>\n      ) : null}\n      <CardCopy title={title} description={description} />\n      {/* The dot sits at the end of the title row, centered on the title's\n          line; the same half step from the right edge keeps it square in\n          the corner. */}\n      {hasIcon ? null : (\n        <span\n          aria-hidden\n          className={cn(\n            \"bg-pho-primary ring-pho-primary mt-0.5 mr-0.5 flex size-4 shrink-0 items-center justify-center rounded-full ring-1 ring-inset\",\n            \"group-hover:bg-pho-primary-hover group-hover:ring-pho-ink transition-[background-color,box-shadow] duration-150 ease-out\",\n            \"group-data-[checked]:bg-pho-brand-solid group-data-[checked]:group-hover:bg-pho-brand-solid-hover group-data-[checked]:ring-transparent\",\n          )}\n        >\n          <BaseRadio.Indicator\n            render={\n              <motion.span\n                initial={{ scale: 0 }}\n                animate={{ scale: 1 }}\n                transition={CHOICE_INDICATOR_POP_TRANSITION}\n              />\n            }\n            className=\"bg-pho-on-brand size-1.5 rounded-full\"\n          />\n        </span>\n      )}\n    </BaseRadio.Root>\n  );\n}\n\nRadioCard.displayName = \"RadioCard\";\n"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","names":[],"sources":["../../src/components/radio-group/radio-group.tsx","../../src/components/radio-group/radio-card.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { usePressPulse } from \"../../utils/use-press-pulse\";\nimport { CHOICE_INDICATOR_POP_TRANSITION } from \"../../utils/choice-card\";\n\nexport interface RadioGroupProps extends Omit<\n  ComponentProps<typeof BaseRadioGroup>,\n  \"className\"\n> {\n  className?: string;\n}\n\nconst RadioGroupDisabledContext = createContext(false);\n\n/** Group-level `disabled`, so press pulse skips when the group is locked. */\nexport function useRadioGroupDisabled() {\n  return useContext(RadioGroupDisabledContext);\n}\n\n/**\n * Single-choice group built on Base UI `RadioGroup`. Holds `Radio` items;\n * exactly one may be selected. Control with `value` / `onValueChange` or leave\n * uncontrolled with `defaultValue`.\n */\nexport function RadioGroup({ className, disabled, ...props }: RadioGroupProps) {\n  return (\n    <RadioGroupDisabledContext.Provider value={Boolean(disabled)}>\n      <BaseRadioGroup\n        disabled={disabled}\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      />\n    </RadioGroupDisabledContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport interface RadioProps extends Omit<\n  ComponentProps<typeof BaseRadio.Root>,\n  \"className\"\n> {\n  className?: string;\n  /** Text rendered beside the dot; the whole row selects this option. */\n  label?: ReactNode;\n}\n\n/**\n * A single option within a `RadioGroup`. Requires a `value`; pass `label` for a\n * clickable text row or provide an `aria-label`.\n */\nexport function Radio({ className, label, disabled, ...props }: RadioProps) {\n  const groupDisabled = useRadioGroupDisabled();\n  const { motionProps } = usePressPulse({\n    scale: 0.94,\n    disabled: Boolean(disabled || groupDisabled),\n  });\n  // With a label, the whole row is the hit target — press-trigger from there\n  // (pointerdown bubbles up from the label text too) so the dot still\n  // animates when the text, not the dot itself, is what's clicked.\n  const { onPointerDown, ...dotMotionProps } = motionProps;\n\n  const dot = (\n    <BaseRadio.Root\n      disabled={disabled}\n      render={\n        <motion.span\n          {...dotMotionProps}\n          onPointerDown={label ? undefined : onPointerDown}\n        />\n      }\n      className={cn(\n        \"outline-pho-brand bg-pho-primary ring-pho-primary flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2\",\n        // Transform stays out — Motion owns the press pulse.\n        \"transition-[background-color,box-shadow,color,outline-color] duration-150 ease-out\",\n        // group-hover covers hovering the label text, not just the dot itself.\n        \"hover:bg-pho-primary-hover hover:ring-pho-ink group-hover:bg-pho-primary-hover group-hover:ring-pho-ink\",\n        \"data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent\",\n        \"data-[checked]:hover:bg-pho-brand-solid-hover data-[checked]:group-hover:bg-pho-brand-solid-hover\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {/* The indicator only renders when checked, i.e. always on brand-solid —\n          on-brand (light-dark(#fff,#000)) keeps the dot visible in dark mode,\n          where brand-solid is white. Pops in rather than appearing flat. */}\n      <BaseRadio.Indicator\n        render={\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={CHOICE_INDICATOR_POP_TRANSITION}\n          />\n        }\n        className=\"bg-pho-on-brand size-2 rounded-full\"\n      />\n    </BaseRadio.Root>\n  );\n\n  if (!label) return dot;\n  return (\n    <label\n      className=\"group flex cursor-pointer items-center gap-2 select-none\"\n      onPointerDown={onPointerDown}\n    >\n      {dot}\n      <span className=\"text-pho-secondary text-base\">{label}</span>\n    </label>\n  );\n}\n\nRadio.displayName = \"Radio\";\n","import { type ComponentProps, type ReactNode } from \"react\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { usePressPulse } from \"../../utils/use-press-pulse\";\nimport {\n  CHOICE_CARD_BASE,\n  CHOICE_CARD_WITH_ICON,\n  CHOICE_CARD_PRESS_SCALE,\n  CHOICE_CARD_PRESS_TRANSITION,\n  CHOICE_INDICATOR_POP_TRANSITION,\n} from \"../../utils/choice-card\";\nimport { useRadioGroupDisabled } from \"./radio-group\";\n\nexport interface RadioCardProps extends Omit<\n  ComponentProps<typeof BaseRadio.Root>,\n  \"className\" | \"title\"\n> {\n  className?: string;\n  /** Tile heading. */\n  title: ReactNode;\n  /** Supporting copy shown below the title. */\n  description?: ReactNode;\n  /** Glyph stacked above the title. When set, it replaces the radio dot. */\n  icon?: ReactNode;\n  /**\n   * Glyph at the end of the title row in place of the radio dot, for a\n   * choice that adds something rather than picks it — a plus on \"New\n   * brand\". The tile's ring still shows it chosen. For tiles without an\n   * `icon` (those have no dot to replace).\n   */\n  trailing?: ReactNode;\n}\n\nfunction CardCopy({\n  title,\n  description,\n}: {\n  title: ReactNode;\n  description?: ReactNode;\n}) {\n  return (\n    <span className=\"flex min-w-0 flex-1 flex-col\">\n      <span className=\"text-pho-primary block font-medium\">{title}</span>\n      {description ? (\n        <span className=\"text-pho-description block\">{description}</span>\n      ) : null}\n    </span>\n  );\n}\n\n/**\n * A `Radio` styled as a bordered, selectable tile — title, optional\n * description, and either a stacked icon above them or, at the end of the\n * title row, the radio dot (or a `trailing` glyph in its place). The tile\n * *is* the radio (see `usePressPulse`); an inner glyph is decorative.\n */\nexport function RadioCard({\n  className,\n  title,\n  description,\n  icon,\n  trailing,\n  disabled,\n  ...props\n}: RadioCardProps) {\n  const groupDisabled = useRadioGroupDisabled();\n  const { motionProps } = usePressPulse({\n    scale: CHOICE_CARD_PRESS_SCALE,\n    disabled: Boolean(disabled || groupDisabled),\n    transition: CHOICE_CARD_PRESS_TRANSITION,\n  });\n  const hasIcon = icon != null;\n\n  return (\n    <BaseRadio.Root\n      disabled={disabled}\n      render={<motion.span {...motionProps} />}\n      className={cn(\n        CHOICE_CARD_BASE,\n        hasIcon && CHOICE_CARD_WITH_ICON,\n        className,\n      )}\n      {...props}\n    >\n      {hasIcon ? (\n        <span\n          aria-hidden\n          className=\"text-pho-secondary flex size-6 shrink-0 items-center justify-center [&>svg]:size-6\"\n        >\n          {icon}\n        </span>\n      ) : null}\n      <CardCopy title={title} description={description} />\n      {/* The dot sits at the end of the title row, centered on the title's\n          line; the same half step from the right edge keeps it square in\n          the corner. A trailing glyph takes the same seat at the same size. */}\n      {hasIcon ? null : trailing != null && trailing !== false ? (\n        <span\n          aria-hidden\n          data-radio-card-trailing=\"\"\n          className=\"text-pho-secondary mt-0.5 mr-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\"\n        >\n          {trailing}\n        </span>\n      ) : (\n        <span\n          aria-hidden\n          className={cn(\n            \"bg-pho-primary ring-pho-primary mt-0.5 mr-0.5 flex size-4 shrink-0 items-center justify-center rounded-full ring-1 ring-inset\",\n            \"group-hover:bg-pho-primary-hover group-hover:ring-pho-ink transition-[background-color,box-shadow] duration-150 ease-out\",\n            \"group-data-[checked]:bg-pho-brand-solid group-data-[checked]:group-hover:bg-pho-brand-solid-hover group-data-[checked]:ring-transparent\",\n          )}\n        >\n          <BaseRadio.Indicator\n            render={\n              <motion.span\n                initial={{ scale: 0 }}\n                animate={{ scale: 1 }}\n                transition={CHOICE_INDICATOR_POP_TRANSITION}\n              />\n            }\n            className=\"bg-pho-on-brand size-1.5 rounded-full\"\n          />\n        </span>\n      )}\n    </BaseRadio.Root>\n  );\n}\n\nRadioCard.displayName = \"RadioCard\";\n"],"mappings":"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"}