@photon-ai/pho-ui 2.0.1 → 2.1.0

package/dist/components/radio-group.js

@@ -1,34 +1,104 @@
 "use client";
-import { t } from "../chunks/cn-DTiB6ek_.js";
-import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Radio as i } from "@base-ui/react/radio";
-import { RadioGroup as d } from "@base-ui/react/radio-group";
-function l({ className: r, ...e }) {
-  return /* @__PURE__ */ o(d, {
-    className: t("flex flex-col gap-3", r),
-    ...e
+import { t as d } from "../chunks/cn-DTiB6ek_.js";
+import { r as m } from "../chunks/use-press-pulse-8iorQPsh.js";
+import { a as g, n as C, r as R, t as v } from "../chunks/choice-card-CunOnY9l.js";
+import { createContext as x, useContext as N } from "react";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { motion as c } from "motion/react";
+import { Radio as l } from "@base-ui/react/radio";
+import { RadioGroup as y } from "@base-ui/react/radio-group";
+var b = x(!1);
+function f() {
+  return N(b);
+}
+function k({ className: e, disabled: r, ...a }) {
+  return /* @__PURE__ */ o(b.Provider, {
+    value: !!r,
+    children: /* @__PURE__ */ o(y, {
+      disabled: r,
+      className: d("flex flex-col gap-3", e),
+      ...a
+    })
   });
 }
-l.displayName = "RadioGroup";
-function c({ className: r, label: e, ...n }) {
-  const a = /* @__PURE__ */ o(i.Root, {
-    className: t("outline-pho-brand bg-pho-primary ring-pho-primary flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full ring-1 transition duration-100 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2", "data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", r),
-    ...n,
-    children: /* @__PURE__ */ o(i.Indicator, { className: "bg-pho-on-brand size-2 rounded-full" })
+k.displayName = "RadioGroup";
+function I({ className: e, label: r, disabled: a, ...i }) {
+  const s = f(), { motionProps: p } = m({
+    scale: 0.94,
+    disabled: !!(a || s)
+  }), { onPointerDown: t, ...u } = p, n = /* @__PURE__ */ o(l.Root, {
+    disabled: a,
+    render: /* @__PURE__ */ o(c.span, {
+      ...u,
+      onPointerDown: r ? 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),
+    ...i,
+    children: /* @__PURE__ */ o(l.Indicator, {
+      render: /* @__PURE__ */ o(c.span, {
+        initial: { scale: 0 },
+        animate: { scale: 1 },
+        transition: g
+      }),
+      className: "bg-pho-on-brand size-2 rounded-full"
+    })
   });
-  return e ? /* @__PURE__ */ s("label", {
-    className: "flex cursor-pointer items-center gap-2 select-none",
-    children: [a, /* @__PURE__ */ o("span", {
+  return r ? /* @__PURE__ */ h("label", {
+    className: "group flex cursor-pointer items-center gap-2 select-none",
+    onPointerDown: t,
+    children: [n, /* @__PURE__ */ o("span", {
       className: "text-pho-secondary text-base",
-      children: e
+      children: r
     })]
-  }) : a;
+  }) : n;
+}
+I.displayName = "Radio";
+function _({ title: e, description: r }) {
+  return /* @__PURE__ */ h("span", { children: [/* @__PURE__ */ o("span", {
+    className: "text-pho-primary block",
+    children: e
+  }), r ? /* @__PURE__ */ o("span", {
+    className: "text-pho-description block",
+    children: r
+  }) : null] });
+}
+function P({ className: e, title: r, description: a, icon: i, disabled: s, ...p }) {
+  const t = f(), { motionProps: u } = m({
+    scale: C,
+    disabled: !!(s || t),
+    transition: R
+  }), n = i != null;
+  return /* @__PURE__ */ h(l.Root, {
+    disabled: s,
+    render: /* @__PURE__ */ o(c.span, { ...u }),
+    className: d(v, n && "flex-col gap-1.5", e),
+    ...p,
+    children: [n ? /* @__PURE__ */ o("span", {
+      "aria-hidden": !0,
+      className: "text-pho-secondary flex size-6 shrink-0 items-center justify-center [&>svg]:size-6",
+      children: i
+    }) : /* @__PURE__ */ o("span", {
+      "aria-hidden": !0,
+      className: d("bg-pho-primary ring-pho-primary mt-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(l.Indicator, {
+        render: /* @__PURE__ */ o(c.span, {
+          initial: { scale: 0 },
+          animate: { scale: 1 },
+          transition: g
+        }),
+        className: "bg-pho-on-brand size-1.5 rounded-full"
+      })
+    }), /* @__PURE__ */ o(_, {
+      title: r,
+      description: a
+    })]
+  });
 }
-c.displayName = "Radio";
+P.displayName = "RadioCard";
 export {
-  c as Radio,
-  l as RadioGroup
+  I as Radio,
+  P as RadioCard,
+  k 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"],"sourcesContent":["import { type ComponentProps, type ReactNode } from \"react\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface RadioGroupProps extends Omit<\n  ComponentProps<typeof BaseRadioGroup>,\n  \"className\"\n> {\n  className?: string;\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, ...props }: RadioGroupProps) {\n  return (\n    <BaseRadioGroup\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    />\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, ...props }: RadioProps) {\n  const dot = (\n    <BaseRadio.Root\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 transition duration-100 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent\",\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. */}\n      <BaseRadio.Indicator className=\"bg-pho-on-brand size-2 rounded-full\" />\n    </BaseRadio.Root>\n  );\n\n  if (!label) return dot;\n  return (\n    <label className=\"flex cursor-pointer items-center gap-2 select-none\">\n      {dot}\n      <span className=\"text-pho-secondary text-base\">{label}</span>\n    </label>\n  );\n}\n\nRadio.displayName = \"Radio\";\n"],"mappings":";;;;;;AAiBA,SAAgB,EAAW,EAAE,WAAA,GAAW,GAAG,EAAA,GAA0B;AACnE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EAAG,uBAAuB,CAAS;AAAA,IAC9C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,EAAW,cAAc;AAezB,SAAgB,EAAM,EAAE,WAAA,GAAW,OAAA,GAAO,GAAG,EAAA,GAAqB;AAChE,QAAM,IACJ,gBAAA,EAAC,EAAU,MAAX;AAAA,IACE,WAAW,EACT,+OACA,qEACA,iEACA,CACF;AAAA,IACA,GAAI;AAAA,cAKJ,gBAAA,EAAC,EAAU,WAAX,EAAqB,WAAU,sCAAuC,CAAA;AAAA,EACxD,CAAA;AAGlB,SAAK,IAEH,gBAAA,EAAC,SAAD;AAAA,IAAO,WAAU;AAAA,cAAjB,CACG,GACD,gBAAA,EAAC,QAAD;AAAA,MAAM,WAAU;AAAA,gBAAgC;AAAA,IAAY,CAAA,CACvD;AAAA,OALU;AAOrB;AAEA,EAAM,cAAc"}
+{"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>\n      <span className=\"text-pho-primary block\">{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 or the radio dot. The tile *is*\n * the radio (see `usePressPulse`); 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      ) : (\n        <span\n          aria-hidden\n          className={cn(\n            \"bg-pho-primary ring-pho-primary mt-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      <CardCopy title={title} description={description} />\n    </BaseRadio.Root>\n  );\n}\n\nRadioCard.displayName = \"RadioCard\";\n"],"mappings":"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"}

package/dist/components/scroll-area.js

@@ -1,43 +1,5 @@
 "use client";
-import { t as a } from "../chunks/cn-DTiB6ek_.js";
-import "react";
-import { jsx as e } from "react/jsx-runtime";
-import { ScrollArea as t } from "@base-ui/react/scroll-area";
-var n = t.Content, l = t.Corner;
-function i({ className: o, ...r }) {
-  return /* @__PURE__ */ e(t.Root, {
-    className: a("relative overflow-hidden", o),
-    ...r
-  });
-}
-function c({ className: o, ...r }) {
-  return /* @__PURE__ */ e(t.Viewport, {
-    className: a("outline-pho-brand h-full w-full overscroll-contain rounded-[inherit] focus-visible:outline-2 focus-visible:-outline-offset-1", o),
-    ...r
-  });
-}
-function s({ className: o, ...r }) {
-  return /* @__PURE__ */ e(t.Scrollbar, {
-    className: a("flex touch-none p-0.5 opacity-0 transition-opacity delay-300 select-none", "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-0", "data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5", o),
-    ...r
-  });
-}
-function u({ className: o, ...r }) {
-  return /* @__PURE__ */ e(t.Thumb, {
-    className: a("flex-1 rounded-full bg-[var(--border-color-pho-primary)]", o),
-    ...r
-  });
-}
-var h = {
-  Root: i,
-  Viewport: c,
-  Content: n,
-  Scrollbar: s,
-  Thumb: u,
-  Corner: l
-};
+import { t as e } from "../chunks/scroll-area-CNZVwe7v.js";
 export {
-  h as ScrollArea
+  e as ScrollArea
 };
-
-//# sourceMappingURL=scroll-area.js.map

package/dist/index.js

@@ -6,13 +6,13 @@ import { n as I, r as n, t as A } from "./chunks/use-press-pulse-8iorQPsh.js";
 import "./utils.js";
 import { a as e, c as R, d as p, i as B, l as C, n as O, o as P, r as f, s as u, t as D, u as N } from "./chunks/button-X5wsWvRa.js";
 import { a as c, c as l, i as V, l as U, n as G, o as d, r as M, s as b, t as g } from "./chunks/error-DR6G2LmG.js";
-import { a as F, i as W, n as h, o as Z, r as v, s as w, t as x } from "./chunks/basic-page-D1zm81YS.js";
+import { a as F, i as W, n as h, o as Z, r as v, s as w, t as x } from "./chunks/basic-page-Dfln58iw.js";
 import { a as z, c as Y, i as j, n as q, o as y, r as J, s as K, t as Q } from "./chunks/sidebar-DDJC1MeD.js";
 import { t as $ } from "./chunks/input-D3XQcC4J.js";
 import { t as sa } from "./chunks/close-button-xadxp0j8.js";
 import { t as ra } from "./chunks/input-group-D6dlma8k.js";
 import { n as Ea, t as _a } from "./chunks/card-9cGnv-VD.js";
-import { n as Sa, t as Ia } from "./chunks/dialog-Caze1vkf.js";
+import { n as Sa, t as Ia } from "./chunks/dialog-BC23YRUq.js";
 import { i as Aa, n as Ta, r as ma, t as ea } from "./chunks/status-view-CcbctPqR.js";
 import "./components/status-view.js";
 export {

package/dist/primitives.js

@@ -43,6 +43,7 @@ import "./primitives/tooltip.js";
 export * from "@base-ui/react/field";
 export * from "@base-ui/react/separator";
 export * from "@base-ui/react/dialog";
+export * from "@base-ui/react/scroll-area";
 export * from "@base-ui/react/popover";
 export * from "@base-ui/react/avatar";
 export * from "@base-ui/react/accordion";
@@ -70,7 +71,6 @@ export * from "@base-ui/react/preview-card";
 export * from "@base-ui/react/progress";
 export * from "@base-ui/react/radio";
 export * from "@base-ui/react/radio-group";
-export * from "@base-ui/react/scroll-area";
 export * from "@base-ui/react/select";
 export * from "@base-ui/react/slider";
 export * from "@base-ui/react/switch";

package/dist/sections/basic-page.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as _, i as E, n as I, o as a, r as s, s as P, t as C } from "../chunks/basic-page-D1zm81YS.js";
+import { a as _, i as E, n as I, o as a, r as s, s as P, t as C } from "../chunks/basic-page-Dfln58iw.js";
 export {
   C as BASIC_PAGE_CALLOUT,
   I as BASIC_PAGE_CARD,

package/dist/src/components/checkbox/check-glyph.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The checkbox glyph, stroked on rather than popped in solid — same
+ * considered-motion spirit as Button's press/wake effects. Re-keyed per
+ * state (check vs. dash) so every appearance draws fresh from empty instead
+ * of resuming a stroke left mid-way by whatever the glyph showed before.
+ */
+export declare function DrawnCheckGlyph({ indeterminate, className, }: {
+    indeterminate?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/src/components/checkbox/checkbox-card.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+export interface CheckboxCardProps extends Omit<ComponentProps<typeof BaseCheckbox.Root>, "className" | "title"> {
+    className?: string;
+    /** Tile heading. */
+    title: ReactNode;
+    /** Supporting copy shown below the title. */
+    description?: ReactNode;
+    /** Glyph stacked above the title. When set, it replaces the checkbox box. */
+    icon?: ReactNode;
+}
+/**
+ * A `Checkbox` styled as a bordered, selectable tile — title, optional
+ * description, and either a stacked icon or the checkbox box. The tile is a
+ * `<label>` around the control so clicks (including on the icon/title) are a
+ * trusted activation of the hidden input Base UI renders beside the root.
+ */
+export declare function CheckboxCard({ className, title, description, icon, disabled, indeterminate, ...props }: CheckboxCardProps): import("react").JSX.Element;
+export declare namespace CheckboxCard {
+    var displayName: string;
+}

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

@@ -18,7 +18,7 @@ export interface CheckboxProps extends Omit<ComponentProps<typeof BaseCheckbox.R
  * a quick shallow press pulse on pointer-down (always plays out), the
  * fill/stroke easing between states, and the glyph popping in.
  */
-export declare function Checkbox({ className, label, size, disabled, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ className, label, size, disabled, indeterminate, ...props }: CheckboxProps): import("react").JSX.Element;
 export declare namespace Checkbox {
     var displayName: string;
 }

package/dist/src/components/checkbox/index.d.ts

@@ -1,2 +1,3 @@
 export { Checkbox, type CheckboxProps, type CheckboxSize } from './checkbox';
 export { CheckboxGroup, type CheckboxGroupProps } from './checkbox-group';
+export { CheckboxCard, type CheckboxCardProps } from './checkbox-card';

package/dist/src/components/phone-input/index.d.ts

@@ -1 +1 @@
-export { PhoneInput, type CountryCode, type PhoneInputChangeMeta, type PhoneInputProps, } from './phone-input';
+export { PhoneInput, CountryFlag, type CountryCode, type PhoneInputChangeMeta, type PhoneInputProps, } from './phone-input';

package/dist/src/components/phone-input/phone-input.d.ts

@@ -1,6 +1,11 @@
 import { InputHTMLAttributes, ReactNode, Ref } from 'react';
 import { CountryCode } from 'libphonenumber-js/min';
 import { InputGroupSize } from '../input-group';
+/** 3:2 SVG flag for a libphonenumber country code; null when unknown. */
+export declare function CountryFlag({ country, className, }: {
+    country: CountryCode;
+    className?: string;
+}): import("react").JSX.Element | null;
 export type { CountryCode };
 export interface PhoneInputChangeMeta {
     country: CountryCode;
@@ -35,13 +40,15 @@ export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     labelTrailing?: ReactNode;
     /** Class applied to the Input Group surface. */
     wrapperClassName?: string;
+    /** Node after the number, inside the field surface (e.g. an Edit action). */
+    trailing?: ReactNode;
     ref?: Ref<HTMLInputElement>;
 }
 /**
  * Phone number field — country picker (searchable Combobox) + national number
  * input on a shared Input Group surface. The committed value is always E.164.
  */
-export declare function PhoneInput({ value, defaultValue, onValueChange, defaultCountry, countries: countriesProp, lockCountry, size, invalid, label, hint, labelTrailing, disabled, required, placeholder, className, wrapperClassName, id, ref, "aria-label": ariaLabel, onKeyDown, ...props }: PhoneInputProps): import("react").JSX.Element;
+export declare function PhoneInput({ value, defaultValue, onValueChange, defaultCountry, countries: countriesProp, lockCountry, size, invalid, label, hint, labelTrailing, disabled, required, placeholder, className, wrapperClassName, trailing, id, ref, "aria-label": ariaLabel, onKeyDown, ...props }: PhoneInputProps): import("react").JSX.Element;
 export declare namespace PhoneInput {
     var displayName: string;
 }

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

@@ -1 +1,2 @@
 export { RadioGroup, Radio, type RadioGroupProps, type RadioProps, } from './radio-group';
+export { RadioCard, type RadioCardProps } from './radio-card';

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

@@ -0,0 +1,20 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+export interface RadioCardProps extends Omit<ComponentProps<typeof BaseRadio.Root>, "className" | "title"> {
+    className?: string;
+    /** Tile heading. */
+    title: ReactNode;
+    /** Supporting copy shown below the title. */
+    description?: ReactNode;
+    /** Glyph stacked above the title. When set, it replaces the radio dot. */
+    icon?: ReactNode;
+}
+/**
+ * A `Radio` styled as a bordered, selectable tile — title, optional
+ * description, and either a stacked icon or the radio dot. 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 namespace RadioCard {
+    var displayName: string;
+}

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

@@ -4,12 +4,14 @@ import { Radio as BaseRadio } from '@base-ui/react/radio';
 export interface RadioGroupProps extends Omit<ComponentProps<typeof BaseRadioGroup>, "className"> {
     className?: string;
 }
+/** Group-level `disabled`, so press pulse skips when the group is locked. */
+export declare function useRadioGroupDisabled(): boolean;
 /**
  * Single-choice group built on Base UI `RadioGroup`. Holds `Radio` items;
  * exactly one may be selected. Control with `value` / `onValueChange` or leave
  * uncontrolled with `defaultValue`.
  */
-export declare function RadioGroup({ className, ...props }: RadioGroupProps): import("react").JSX.Element;
+export declare function RadioGroup({ className, disabled, ...props }: RadioGroupProps): import("react").JSX.Element;
 export declare namespace RadioGroup {
     var displayName: string;
 }
@@ -22,7 +24,7 @@ export interface RadioProps extends Omit<ComponentProps<typeof BaseRadio.Root>,
  * A single option within a `RadioGroup`. Requires a `value`; pass `label` for a
  * clickable text row or provide an `aria-label`.
  */
-export declare function Radio({ className, label, ...props }: RadioProps): import("react").JSX.Element;
+export declare function Radio({ className, label, disabled, ...props }: RadioProps): import("react").JSX.Element;
 export declare namespace Radio {
     var displayName: string;
 }

package/dist/src/components/scroll-area/scroll-area-edges.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'react';
+/** Overlay strip height — a short ramp, not a banner. `h-8` = 32px. */
+export declare const EDGE_CLASS = "pointer-events-none absolute inset-x-0 z-10 h-8";
+export declare const EDGE_REVEAL_PX = 32;
+export declare function paintEdge(node: HTMLDivElement | null, progress: number): void;
+export declare function Edge({ edge, edgeRef, }: {
+    edge: "top" | "bottom";
+    edgeRef: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;

package/dist/src/components/scroll-area/scroll-area.d.ts

@@ -4,15 +4,16 @@ import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
 type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
     className?: string;
 };
-declare function Root({ className, ...props }: StyledProps<typeof BaseScrollArea.Root>): import("react").JSX.Element;
-declare function Viewport({ className, ...props }: StyledProps<typeof BaseScrollArea.Viewport>): import("react").JSX.Element;
+declare function Root({ className, children, ...props }: StyledProps<typeof BaseScrollArea.Root>): import("react").JSX.Element;
+declare function Viewport({ className, ref, ...props }: StyledProps<typeof BaseScrollArea.Viewport>): import("react").JSX.Element;
 declare function Scrollbar({ className, ...props }: StyledProps<typeof BaseScrollArea.Scrollbar>): import("react").JSX.Element;
 declare function Thumb({ className, ...props }: StyledProps<typeof BaseScrollArea.Thumb>): import("react").JSX.Element;
 /**
- * Scroll area built on Base UI `ScrollArea` — a region with custom, overlay
- * scrollbars that match the design system instead of the native ones. Give
- * `ScrollArea.Root` a fixed size; put scrollable content in `Viewport` →
- * `Content` and add a `Scrollbar` → `Thumb` per axis.
+ * Scroll area built on Base UI `ScrollArea` — a capped region with overlay
+ * scrollbars and progressive edge fade. Approaching rows blur (0 → 1px) and
+ * wash into the surface; strength tracks scroll distance over one strip
+ * height. Give `Root` a fixed size; put content in `Viewport` → `Content`
+ * and add a `Scrollbar` → `Thumb` per axis.
  */
 export declare const ScrollArea: {
     Root: typeof Root;

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

@@ -6,13 +6,13 @@ export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary
  * Standalone callout surface — featured block (invite form, notice, etc.).
  * Don't wrap in `Card`; this is the outer chrome.
  */
-export declare const BASIC_PAGE_CALLOUT = "flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5";
+export declare const BASIC_PAGE_CALLOUT = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5";
 /**
  * One row — label (+ optional description) left, control right.
  * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter
  * than a comfortable touch target.
  */
-export declare const BASIC_PAGE_ROW = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
+export declare const BASIC_PAGE_ROW = "flex min-h-[4.25rem] min-w-0 flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
 /**
  * One card row that can host subviews. Same padding rhythm as a plain row —
  * an optional trailing `ItemPanel` breaks out of it on its own.
@@ -82,6 +82,9 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
 /**
  * Page title — largest heading on the surface. Plain-text children get a slug
  * `id` for hash targets (`#profile`); the heading itself is not a link.
+ * Long names ellipsize; keep trailing accessories (`Badge`, status) as
+ * `shrink-0` siblings of a `min-w-0 truncate` label inside a `flex min-w-0`
+ * row so they stay visible.
  */
 declare function Title({ id, morphId, enter, className, children, ...props }: BasicPageTitleProps): import("react").JSX.Element;
 export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealMotionConflicts> {
@@ -304,6 +307,13 @@ export interface BasicPageRevealProps extends Omit<ComponentProps<"div">, Reveal
      * inside a block (`gap-3`). @default "stack"
      */
     gap?: "stack" | "block";
+    /**
+     * Set when this wraps multiple `Card` rows — the extra element Reveal
+     * needs for `AnimatePresence` sits between them and the card's own
+     * `divide-y`, so the hairlines between the wrapped rows disappear unless
+     * this restores them. Leave off for content that isn't a run of rows.
+     */
+    dividers?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
 /**
@@ -321,7 +331,7 @@ export interface BasicPageRevealProps extends Omit<ComponentProps<"div">, Reveal
  * `Footer` grammar): a whole section of the Stack that appears or leaves at
  * runtime glides open/closed while its neighbours follow.
  */
-declare function Reveal({ show, gap, className, ...props }: BasicPageRevealProps): import("react").JSX.Element;
+declare function Reveal({ show, gap, dividers, className, ...props }: BasicPageRevealProps): import("react").JSX.Element;
 export interface BasicPageBackProps extends Omit<ButtonLinkProps, "variant" | "size" | "shape" | "prefix" | "suffix" | "svgOnly" | "href"> {
     /** Parent destination — rendered through the host's `LinkProvider`. */
     href: string;

package/dist/src/utils/choice-card.d.ts

@@ -0,0 +1,15 @@
+import { Transition } from 'motion/react';
+/**
+ * Shared surface for `RadioCard` / `CheckboxCard` — a bordered, selectable
+ * tile. Applied to the radio/checkbox root itself so the whole tile is the
+ * hit target. Hover fills (`bg-pho-ghost-hover`); selected uses the brand
+ * ring. Press feedback lives on this surface (see `usePressPulse`).
+ */
+export declare const CHOICE_CARD_BASE = "group outline-pho-brand flex flex-1 cursor-pointer items-start gap-2.5 rounded-base p-3 text-base text-pho-secondary ring-1 ring-pho-primary ring-inset transition-[box-shadow,background-color] duration-150 ease-out select-none hover:bg-pho-ghost-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[checked]:ring-2 data-[checked]:ring-pho-brand has-[[data-checked]]:ring-2 has-[[data-checked]]:ring-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2";
+/** Stacked icon above the copy — tighter than the checkbox/radio row gap. */
+export declare const CHOICE_CARD_WITH_ICON = "flex-col gap-1.5";
+/** Same press as Select's default trigger — field-sized, not Button's whileTap. */
+export declare const CHOICE_CARD_PRESS_SCALE = 0.98;
+export declare const CHOICE_CARD_PRESS_TRANSITION: Transition;
+/** Selection pop for a radio dot / checkbox glyph — quick and slightly bouncy. */
+export declare const CHOICE_INDICATOR_POP_TRANSITION: Transition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {

package/dist/chunks/animated-height-DhNSac85.js

@@ -1,50 +0,0 @@
-"use client";
-import { useEffect as h, useRef as d } from "react";
-import { jsx as m } from "react/jsx-runtime";
-import { animate as g, motion as R, useMotionValue as x, useReducedMotion as y } from "motion/react";
-var w = {
-  type: "spring",
-  stiffness: 640,
-  damping: 50
-};
-function S({ className: p, transition: s, children: v }) {
-  const i = d(null), c = d(null), t = x("auto"), u = y();
-  return h(() => {
-    const o = i.current, n = c.current;
-    if (!o || !n) return;
-    let e = null;
-    const l = new ResizeObserver((b) => {
-      const f = b[0]?.borderBoxSize?.[0], r = f ? f.blockSize : n.offsetHeight, a = t.get();
-      if (a === "auto" || u) {
-        e?.stop(), e = null, o.style.overflow = "", t.set(r);
-        return;
-      }
-      !e && Math.abs(a - r) < 0.5 || (o.style.overflow = "hidden", e?.stop(), e = g(t, r, {
-        ...s ?? w,
-        onComplete: () => {
-          e = null, o.style.overflow = "";
-        }
-      }));
-    });
-    return l.observe(n), () => {
-      l.disconnect(), e?.stop();
-    };
-  }, [
-    t,
-    u,
-    s
-  ]), /* @__PURE__ */ m(R.div, {
-    ref: i,
-    style: { height: t },
-    children: /* @__PURE__ */ m("div", {
-      ref: c,
-      className: p,
-      children: v
-    })
-  });
-}
-export {
-  S as t
-};
-
-//# sourceMappingURL=animated-height-DhNSac85.js.map

package/dist/chunks/animated-height-DhNSac85.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-height-DhNSac85.js","names":[],"sources":["../../src/utils/animated-height.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from \"react\";\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  type ValueAnimationTransition,\n} from \"motion/react\";\n\n/**\n * Height spring for container-size transitions — same feel as the onboarding /\n * invite card and BasicPage footer reveal: quick, critically damped (no\n * overshoot that would flash clipped content).\n */\nconst HEIGHT_SPRING = { type: \"spring\", stiffness: 640, damping: 50 } as const;\n\n/**\n * Animates its own height to follow the measured height of `children`, so\n * content swaps (search filtering, skeleton → data) glide instead of jumping.\n * Honors `prefers-reduced-motion` by snapping height with no spring.\n */\nexport function AnimatedHeight({\n  className,\n  transition,\n  children,\n}: {\n  className?: string;\n  /** Spring override for the height follow. @default the Command spring */\n  transition?: ValueAnimationTransition<number | \"auto\">;\n  children: ReactNode;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const height = useMotionValue<number | \"auto\">(\"auto\");\n  const reduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const content = contentRef.current;\n    if (!container || !content) return;\n\n    let animation: ReturnType<typeof animate> | null = null;\n\n    const observer = new ResizeObserver((entries) => {\n      const box = entries[0]?.borderBoxSize?.[0];\n      const next = box ? box.blockSize : content.offsetHeight;\n      const current = height.get();\n      if (current === \"auto\" || reduceMotion) {\n        animation?.stop();\n        animation = null;\n        container.style.overflow = \"\";\n        height.set(next);\n        return;\n      }\n      if (!animation && Math.abs(current - next) < 0.5) return;\n      container.style.overflow = \"hidden\";\n      animation?.stop();\n      animation = animate(height, next, {\n        ...(transition ?? HEIGHT_SPRING),\n        onComplete: () => {\n          animation = null;\n          container.style.overflow = \"\";\n        },\n      });\n    });\n    observer.observe(content);\n\n    return () => {\n      observer.disconnect();\n      animation?.stop();\n    };\n  }, [height, reduceMotion, transition]);\n\n  return (\n    <motion.div ref={containerRef} style={{ height }}>\n      <div ref={contentRef} className={className}>\n        {children}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;AAcA,IAAM,IAAgB;AAAA,EAAE,MAAM;AAAA,EAAU,WAAW;AAAA,EAAK,SAAS;AAAG;AAOpE,SAAgB,EAAe,EAC7B,WAAA,GACA,YAAA,GACA,UAAA,EAAA,GAMC;AACD,QAAM,IAAe,EAAuB,IAAI,GAC1C,IAAa,EAAuB,IAAI,GACxC,IAAS,EAAgC,MAAM,GAC/C,IAAe,EAAiB;AAEtC,SAAA,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa,SACzB,IAAU,EAAW;AAC3B,QAAI,CAAC,KAAa,CAAC,EAAS;AAE5B,QAAI,IAA+C;AAEnD,UAAM,IAAW,IAAI,eAAA,CAAgB,MAAY;AAC/C,YAAM,IAAM,EAAQ,CAAA,GAAI,gBAAgB,CAAA,GAClC,IAAO,IAAM,EAAI,YAAY,EAAQ,cACrC,IAAU,EAAO,IAAI;AAC3B,UAAI,MAAY,UAAU,GAAc;AACtC,QAAA,GAAW,KAAK,GAChB,IAAY,MACZ,EAAU,MAAM,WAAW,IAC3B,EAAO,IAAI,CAAI;AACf;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,EAAU,MAAM,WAAW,UAC3B,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAQ,GAAM;AAAA,QAChC,GAAI,KAAc;AAAA,QAClB,YAAA,MAAkB;AAChB,UAAA,IAAY,MACZ,EAAU,MAAM,WAAW;AAAA,QAC7B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAA,EAAS,QAAQ,CAAO,GAExB,MAAa;AACX,MAAA,EAAS,WAAW,GACpB,GAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAc;AAAA,EAAU,CAAC,GAGnC,gBAAA,EAAC,EAAO,KAAR;AAAA,IAAY,KAAK;AAAA,IAAc,OAAO,EAAE,QAAA,EAAO;AAAA,cAC7C,gBAAA,EAAC,OAAD;AAAA,MAAK,KAAK;AAAA,MAAuB,WAAA;AAAA,MAC9B,UAAA;AAAA,IACE,CAAA;AAAA,EACK,CAAA;AAEhB"}