@photon-ai/pho-ui 4.11.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,24 +9,24 @@ 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-B5FsORRi.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-By5gWQqP.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-B5FsORRi.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;
 }

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

@@ -8,12 +8,12 @@ import { CodeBlock } from '../../components/code-block';
  * card's own: Stack used to force `gap-3` onto a bare Card and open 12px
  * bands between `divide-y` rows. The marker below lets Stack skip it.
  */
-export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0 gap-0";
+export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary [--choice-card-inset:0.75rem] divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0 gap-0";
 /**
  * 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 min-w-0 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 [--choice-card-inset:0.75rem]";
 /**
  * One row — label (+ optional description) left, control right.
  * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter
@@ -227,6 +227,25 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
     trailing?: ReactNode;
     ref?: Ref<HTMLHeadingElement>;
 }
+export interface BasicPageTitleAccessoryProps {
+    /**
+     * Whether it goes with the words into the condensed bar once the title
+     * has scrolled away. A status the name can't be read without does (a
+     * badge); an action on the page doesn't (a Rename pencil): the bar is a
+     * way back and a name, not a toolbar.
+     * @default true
+     */
+    inBar?: boolean;
+    children?: ReactNode;
+}
+/**
+ * A part of the title beside its words — a badge, a status, an action on
+ * the page itself — that says whether it follows the words into the
+ * condensed bar (`Root condense`). Put it inside `Title` after the words.
+ * Everything in a title's children goes into the bar unless it says
+ * otherwise; `Title`'s `trailing` never does.
+ */
+declare function TitleAccessory({ inBar, children, }: BasicPageTitleAccessoryProps): import("react").JSX.Element | null;
 /**
  * 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.
@@ -308,11 +327,12 @@ export interface BasicPageHeaderProps extends Omit<ComponentProps<"div">, Reveal
 declare function Header({ enter: enterProp, className, ...props }: BasicPageHeaderProps): import("react").JSX.Element;
 /**
  * An action at the header row's end — a small button (or two) seated in
- * the `Header` grid the way `Search` is: top-right of the block, its top
- * edge on the header's top, its right edge on the title / card-content
- * inset (`mr-5` matching `SectionTitle`'s `px-5`). A callout already
- * carries `p-5` and its title has no `px-5`, so the inset drops there.
- * Text shorter than the seat centers against it. Put it inside `Header`
+ * the `Header` grid the way `Search` is, its right edge on the title /
+ * card-content inset (`mr-5` matching `SectionTitle`'s `px-5`). A callout
+ * already carries `p-5` and its title has no `px-5`, so the inset drops
+ * there. It centers on the text block whichever is taller: beside a
+ * description that wraps to a third line it stays on the block's middle,
+ * and text shorter than it centers against it. Put it inside `Header`
  * after the text; with a `Search` present it stands to the search's right.
  */
 declare function HeaderAction({ className, ...props }: ComponentProps<"div"> & {
@@ -425,6 +445,16 @@ declare function CalloutDescription({ className, ...props }: ComponentProps<"p">
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
 export interface BasicPageOnboardProps extends ComponentProps<"ol"> {
+    /**
+     * One page per step, the steps in a row above it, instead of the card
+     * with the step at hand folded open — for a setup whose steps are
+     * pages of their own: a registration that asks who is registering,
+     * then for the brand, then for the campaign. Each `Step`'s children are
+     * its page (a `Stack`, or a `Form` around one), and the paged `Onboard`
+     * stands where the page's `Stack` would, under the `Title`. The rest of
+     * the props go to the row, the ordered list of steps.
+     */
+    paged?: boolean;
     ref?: Ref<HTMLOListElement>;
 }
 /**
@@ -438,30 +468,40 @@ export interface BasicPageOnboardProps extends ComponentProps<"ol"> {
  * with a check and what they came to, the waiting ones muted. A step
  * finishing folds closed as the next opens, on the Accordion's spring.
  * When the last step is done the service is on — render the page in its
- * place.
+ * place. `paged` turns the card into a row of steps over the page at
+ * hand (see `PagedOnboard`).
  */
-declare function Onboard({ className, children, ...props }: BasicPageOnboardProps): import("react").JSX.Element;
+declare function Onboard({ paged, className, children, ...props }: BasicPageOnboardProps): import("react").JSX.Element;
 export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title"> {
     /**
      * Decorative glyph for the step at hand, top-right of its body the way a
      * `Callout`'s is — typically a Tabler outline icon at stroke 1.25. It is
      * aria-hidden (keep the meaning in the title) and folds away with the
-     * body: a done or waiting step shows none.
+     * body: a done or waiting step shows none. In a paged list it is what a
+     * done step came to, drawn in its ring in place of the check — the
+     * choice a step made, say — and a step without one keeps the check.
      */
     icon?: ReactNode;
     /**
      * Something to look at beside the step at hand — a code to scan, with
      * its caption — in the corner where the `icon` would be, its top on the
      * title's, holding still as the fold opens beside it. It takes the
-     * icon's place when both are given, and folds away with the body.
+     * icon's place when both are given, and folds away with the body. Not
+     * shown in a paged list.
      */
     aside?: ReactNode;
-    /** The title: a verb and its object — "Choose a number". */
+    /**
+     * The title: a verb and its object — "Choose a number". In a paged
+     * list, the step's name in the row, a word or two — "Brand" — which a
+     * done step may trade for what it came to ("Business"); the row
+     * crossfades it.
+     */
     title: ReactNode;
     /**
      * The line under the title while the step is at hand: what it involves,
      * or, while it waits, how long. Folded away with the rest once the step
-     * is done or before its turn.
+     * is done or before its turn. Not shown in a paged list; the page says
+     * it in its own `Header`.
      */
     description?: ReactNode;
     /**
@@ -486,11 +526,95 @@ export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title">
     /**
      * At hand: the step's action — a small `Button` or `ButtonLink` — under
      * its line. Done: what it came to — a `Value` — at the title's end.
-     * Waiting its turn: not shown.
+     * Waiting its turn: not shown. In a paged list, the step's page — a
+     * `Stack`, or a `Form` around one — shown under the row while the step
+     * is at hand.
      */
     children?: ReactNode;
     ref?: Ref<HTMLLIElement>;
 }
+/**
+ * Where a check stands. As `Step`'s: `done` draws the check, `working`
+ * spins while Photon is at it, `pending` is dashed while it waits on
+ * someone else (a carrier, a DNS host, the visitor), `upcoming` is faint
+ * while it waits its turn. `failed` trades the ring for an X and says so.
+ */
+export type BasicPageCheckState = "done" | "working" | "pending" | "upcoming" | "failed";
+/**
+ * A list of checks Photon reports on, one line each: DNS records found, a
+ * registration's stages. Not steps someone takes (that is `Onboard`), and
+ * not a percentage (that is `Progress`). It speaks the `Onboard` ring's
+ * language at the line's size. The check where the list stands, whatever
+ * came of it, is its current step: its label one weight up, and
+ * `aria-current` for assistive tech. Put it in a `Card`'s `Item`, and say
+ * when it was last checked, if that matters, in a `SectionFooter`.
+ */
+declare function Checklist({ className, children, ...props }: ComponentProps<"ul"> & {
+    ref?: Ref<HTMLUListElement>;
+}): import("react").JSX.Element;
+export interface BasicPageCheckProps extends Omit<ComponentProps<"li">, "value"> {
+    /** @default "upcoming" */
+    state?: BasicPageCheckState;
+    /**
+     * What the check came to, at the line's end in description ink: the
+     * date it passed, a count.
+     */
+    value?: ReactNode;
+    /**
+     * A line (or a few) right under the label, on its start edge, at
+     * `text-xs`: why a failed check failed, in error ink with no surface of
+     * its own (the X already marks it); otherwise what the check waits on,
+     * in description ink. Several reasons are several block children.
+     */
+    description?: ReactNode;
+    /**
+     * What a failed check's failure is called, beside its label in error
+     * ink: "Rejected", "Suspended". Read only when `state` is `failed`.
+     * @default "Failed"
+     */
+    failure?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * One check: its ring, its label, its `value` at the line's end, and its
+ * `description` under the label. The ring is `Step`'s at the text's size;
+ * a check that turns done draws its mark on, one that loads done shows it
+ * drawn. The list says which check is current; its label and a failed
+ * one's "Failed" go one weight up.
+ */
+declare function Check({ state, value, description, failure, className, children, ...props }: BasicPageCheckProps): import("react").JSX.Element;
+/**
+ * What happened, in order: a registration's reviews, a domain's checks
+ * over time, a key's uses. One event per `TimelineItem`, newest first
+ * unless the page says otherwise, each on the checklist's mark with a
+ * faint line down to the next. Where `Checklist` is where things stand
+ * now, a timeline is how they got there. Put it in a `Card`'s `Item`.
+ */
+declare function Timeline({ className, ...props }: ComponentProps<"ol"> & {
+    ref?: Ref<HTMLOListElement>;
+}): import("react").JSX.Element;
+export interface BasicPageTimelineItemProps extends Omit<ComponentProps<"li">, "title"> {
+    /** What came of the event, on the checklist's mark. @default "done" */
+    state?: BasicPageCheckState;
+    /** The event, in words: "Carrier review failed". */
+    title: ReactNode;
+    /** When it happened, under the title in description ink. */
+    time?: ReactNode;
+    /**
+     * What there is to say about it, under the time at `text-xs` in
+     * description ink: a reviewer's reasons, a note. A record, not an alarm:
+     * a failure's mark says it failed, and the page's current state says
+     * what to do about it.
+     */
+    children?: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * One event: its mark on the rail, a line from it down to the next
+ * event's, and beside it the title, the time and the details. The mark
+ * sits on the title's line; the last event draws no line.
+ */
+declare function TimelineItem({ state, title, time, className, children, ...props }: BasicPageTimelineItemProps): import("react").JSX.Element;
 /**
  * One step of an `Onboard`, left to right: the ring, the words, the
  * corner. The ring and the title share one row and center on each
@@ -503,7 +627,8 @@ export interface BasicPageStepProps extends Omit<ComponentProps<"li">, "title">
  * does; the others stay on the card's white. The title and the line wear the
  * section's type — `SectionTitle` over `Description`, both
  * `text-display-xs`. Its standing comes from the list; on its own it is
- * the step at hand.
+ * the step at hand. In a paged list it is its place in the row instead
+ * (`StepInRow`), and the list shows its children as the page.
  */
 declare function Step({ icon, aside, title, description, done, working, pending, className, children, ...props }: BasicPageStepProps): import("react").JSX.Element;
 export interface BasicPageRowProps extends Omit<ComponentProps<"div">, "title" | RevealMotionConflicts> {
@@ -1139,6 +1264,7 @@ export declare const BasicPage: {
     Crumb: typeof Crumb;
     Back: typeof Back;
     Title: typeof Title;
+    TitleAccessory: typeof TitleAccessory;
     Stack: typeof Stack;
     Columns: typeof Columns;
     Header: typeof Header;
@@ -1155,6 +1281,10 @@ export declare const BasicPage: {
     CalloutDescription: typeof CalloutDescription;
     Onboard: typeof Onboard;
     Step: typeof Step;
+    Checklist: typeof Checklist;
+    Check: typeof Check;
+    Timeline: typeof Timeline;
+    TimelineItem: typeof TimelineItem;
     Row: typeof Row;
     RowLink: typeof RowLink;
     Value: typeof Value;

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

@@ -1,3 +1,3 @@
-export { BasicPage, formToasts, AUTO_SAVE_DELAY_MS, useCondense, useAutoSave, type BasicPageCondense, BASIC_PAGE_CARD, CONDENSE_BAR_ENTER, CONDENSE_BAR_TRAVEL, CONDENSE_BAR_RISE_PX, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRootProps, type BasicPageColumnsProps, type BasicPageAsideProps, type BasicPageAsideWidth, type BasicPageAsidePresentation, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageFormProps, type BasicPageFormErrors, type BasicPageItemPanelProps, type BasicPageOnboardProps, type BasicPageStepProps, type BasicPageReceiptProps, type BasicPageReceiptGroupProps, type BasicPageReceiptLineProps, type BasicPageReceiptTotalProps, } from './basic-page';
+export { BasicPage, formToasts, AUTO_SAVE_DELAY_MS, useCondense, useAutoSave, type BasicPageCondense, BASIC_PAGE_CARD, CONDENSE_BAR_ENTER, CONDENSE_BAR_TRAVEL, CONDENSE_BAR_RISE_PX, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRootProps, type BasicPageColumnsProps, type BasicPageAsideProps, type BasicPageAsideWidth, type BasicPageAsidePresentation, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageFormProps, type BasicPageFormErrors, type BasicPageItemPanelProps, type BasicPageOnboardProps, type BasicPageStepProps, type BasicPageTitleAccessoryProps, type BasicPageCheckProps, type BasicPageCheckState, type BasicPageTimelineItemProps, type BasicPageReceiptProps, type BasicPageReceiptGroupProps, type BasicPageReceiptLineProps, type BasicPageReceiptTotalProps, } from './basic-page';
 export { createColumns, type DataTableColumn, type DataTableColumnMeta, type DataTableProps, type SortingState, } from '../../components/data-table';
 export { type DescriptionListRootProps as BasicPageMetaProps, type DescriptionListItemProps as BasicPageMetaItemProps, type DescriptionListLayout as BasicPageMetaLayout, } from '../../components/description-list';