@photon-ai/pho-ui 4.10.0 → 4.12.0

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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"}

package/dist/index.js

@@ -9,28 +9,28 @@ import { n as U, t as M } from "./chunks/use-copy-D6JwKUll.js";
 import "./utils.js";
 import { a as v, c as k, d as w, i as W, l as y, n as H, o as K, r as x, s as z, t as X, u as Y } from "./chunks/button-C9VqBBIr.js";
 import { a as j, c as J, i as Q, l as q, n as $, o as aa, r as sa, s as ta, t as ra } from "./chunks/error-D5SzZ0ev.js";
-import { t as ea } from "./chunks/chat-B0WIgEyM.js";
+import { t as ea } from "./chunks/chat-CU3XVm99.js";
 import { A as Sa, B as Ea, C as _a, D as na, E as ma, F as Aa, I as Ia, L as Ta, M as pa, N as Ra, O as la, P as Ca, R as ua, S as Ba, T as fa, V as Na, _ as La, a as Pa, b as ca, c as Da, d as Oa, f as da, g as Va, h as ga, i as ha, j as Ga, k as Ua, l as Ma, m as ba, n as Fa, o as va, p as ka, r as wa, s as Wa, t as ya, u as Ha, v as Ka, w as xa, x as za, y as Xa, z as Ya } from "./chunks/trace-D1fOFzJt.js";
 import { a as ja, c as Ja, d as Qa, i as qa, l as $a, n as as, o as ss, r as ts, s as rs, t as os, u as es } from "./chunks/code-block-CbcE994O.js";
 import { n as Ss, t as Es } from "./chunks/date-picker-CZbcNIe-.js";
 import { n as ns, t as ms } from "./chunks/copy-button-D8XyP0oR.js";
 import { a as Is, c as Ts, d as ps, i as Rs, l as ls, n as Cs, o as us, r as Bs, s as fs, t as Ns, u as Ls } from "./chunks/sidebar-BP39w1iA.js";
-import { t as cs } from "./chunks/input-DjvZoF8v.js";
-import { i as Os, n as ds, r as Vs, t as gs } from "./chunks/filter-bar-B-oYYBsU.js";
-import { i as Gs } from "./chunks/data-table-B1dmrN6r.js";
+import { t as cs } from "./chunks/input-fFWvPJOf.js";
+import { i as Os, n as ds, r as Vs, t as gs } from "./chunks/filter-bar-CMkvhvgL.js";
+import { i as Gs } from "./chunks/data-table-Ce_c6T73.js";
 import { n as Ms, t as bs } from "./chunks/stat-hnNqjWVG.js";
 import { t as vs } from "./chunks/calendar-4OFiCLAv.js";
 import { t as ws } from "./chunks/close-button-GvqWbLl0.js";
 import { t as ys } from "./chunks/input-group-fc9_jD4d.js";
 import { n as Ks, t as xs } from "./chunks/card-N-tvFsuV.js";
-import { n as Xs, t as Ys } from "./chunks/dialog-MPvem7yV.js";
+import { n as Xs, t as Ys } from "./chunks/dialog-ChS0tdHa.js";
 import { i as js, n as Js, r as Qs, t as qs } from "./chunks/status-view-C8tabjDu.js";
 import { t as at } from "./chunks/description-list-8qm83WZB.js";
-import { a as tt, c as rt, d as ot, f as et, i as it, l as St, m as Et, n as _t, o as nt, p as mt, r as At, s as It, t as Tt, u as pt } from "./chunks/basic-page-DzT8yecB.js";
-import { a as lt, i as Ct, n as ut, o as Bt, r as ft, s as Nt, t as Lt } from "./chunks/chart-BrIXaMue.js";
+import { a as tt, c as rt, d as ot, f as et, i as it, l as St, m as Et, n as _t, o as nt, p as mt, r as At, s as It, t as Tt, u as pt } from "./chunks/basic-page-CJ11ekjH.js";
+import { a as lt, i as Ct, n as ut, o as Bt, r as ft, s as Nt, t as Lt } from "./chunks/chart-Dx3rjeFn.js";
 import "./components/chart.js";
-import { t as Dt } from "./chunks/bar-chart-HsoFFaPb.js";
-import { t as dt } from "./chunks/line-chart-Bv25WyGp.js";
+import { t as Dt } from "./chunks/bar-chart-By5gWQqP.js";
+import { t as dt } from "./chunks/line-chart-CAe09fqr.js";
 import { i as gt, n as ht, r as Gt, t as Ut } from "./chunks/log-list-tNuCFGlP.js";
 import { n as bt, t as Ft } from "./chunks/bubble-eaoLJP4N.js";
 import { n as kt, r as wt, t as Wt } from "./chunks/message-Dz2-numf.js";

package/dist/sections/basic-page.js

@@ -1,6 +1,6 @@
 "use client";
-import { i as s } from "../chunks/data-table-B1dmrN6r.js";
-import { a as E, c as a, d as C, f as S, i as I, l as e, m as o, n as B, o as P, p as N, r, s as t, t as D, u as R } from "../chunks/basic-page-DzT8yecB.js";
+import { i as s } from "../chunks/data-table-Ce_c6T73.js";
+import { a as E, c as a, d as C, f as S, i as I, l as e, m as o, n as B, o as P, p as N, r, s as t, t as D, u as R } from "../chunks/basic-page-CJ11ekjH.js";
 export {
   D as AUTO_SAVE_DELAY_MS,
   B as BASIC_PAGE_CALLOUT,

package/dist/src/components/dialog/dialog.d.ts

@@ -70,6 +70,14 @@ interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title
      * set, the header close button is never shown — dismiss via the actions.
      */
     actions?: ReactNode;
+    /**
+     * A quiet footnote at the panel's foot — the limit, cost or policy that
+     * frames the decision without being it ("You may change these up to five
+     * times a week."). Description ink at `text-xs`, at the action row's
+     * start with the actions at its end; when the row runs short of room it
+     * takes a line of its own above them. One short sentence.
+     */
+    caption?: ReactNode;
     /**
      * Header close control. Only applies when `actions` is absent.
      * @default true
@@ -83,7 +91,7 @@ interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title
  * full control, compose the parts directly (`Dialog.Portal` /
  * `Dialog.Backdrop` / `Dialog.Popup`).
  */
-declare function Content({ icon, title, description, consequences, warning, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
+declare function Content({ icon, title, description, consequences, warning, actions, caption, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
 /**
  * Near-fullscreen popup — the viewport minus a breathing ring, floating over
  * a backdrop (the page stays visible through the gap, so it dims like any

package/dist/src/components/field/field.d.ts

@@ -5,7 +5,17 @@ type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> &
     className?: string;
 };
 declare function Root({ className, ...props }: StyledProps<typeof BaseField.Root>): import("react").JSX.Element;
-declare function Label({ className, ...props }: StyledProps<typeof BaseField.Label>): import("react").JSX.Element;
+/**
+ * The field's label. `required` marks it the way `Input required` marks
+ * its own: a brand-coloured star after the words. A form marks every
+ * required field or none, so a field built from parts (a `Select`, a
+ * `PhoneInput`, a pair of inputs under one label) takes `required` here to
+ * match the `Input`s beside it.
+ */
+declare function Label({ className, required, children, ...props }: StyledProps<typeof BaseField.Label> & {
+    /** Mark the field required: a star after the label's words. */
+    required?: boolean;
+}): import("react").JSX.Element;
 declare function Control({ className, ...props }: StyledProps<typeof BaseField.Control>): import("react").JSX.Element;
 /**
  * Several controls under one label: the lines of an address, first and

package/dist/src/components/radio-group/radio-card.d.ts

@@ -8,14 +8,21 @@ export interface RadioCardProps extends Omit<ComponentProps<typeof BaseRadio.Roo
     description?: ReactNode;
     /** Glyph stacked above the title. When set, it replaces the radio dot. */
     icon?: ReactNode;
+    /**
+     * Glyph at the end of the title row in place of the radio dot, for a
+     * choice that adds something rather than picks it — a plus on "New
+     * brand". The tile's ring still shows it chosen. For tiles without an
+     * `icon` (those have no dot to replace).
+     */
+    trailing?: ReactNode;
 }
 /**
  * A `Radio` styled as a bordered, selectable tile — title, optional
- * description, and either a stacked icon above them or the radio dot at
- * the end of the title row. The tile *is* the radio (see `usePressPulse`);
- * an inner glyph is decorative.
+ * description, and either a stacked icon above them or, at the end of the
+ * title row, the radio dot (or a `trailing` glyph in its place). The tile
+ * *is* the radio (see `usePressPulse`); an inner glyph is decorative.
  */
-export declare function RadioCard({ className, title, description, icon, disabled, ...props }: RadioCardProps): import("react").JSX.Element;
+export declare function RadioCard({ className, title, description, icon, trailing, disabled, ...props }: RadioCardProps): import("react").JSX.Element;
 export declare namespace RadioCard {
     var displayName: string;
 }