@bettercms-ai/kit 0.1.0 → 1.0.0

package/ui/action-tray.d.ts

@@ -0,0 +1,54 @@
+/**
+ * ACTION TRAY: Figma 61014:66265 "Bottom". The soft, slightly raised bar at the bottom of editors, inspectors,
+ * sheets and dialogs: surface → light grey gradient, 1px top hairline, 12px side padding, 6px vertical, 44px tall +
+ * hairline (a 32px button fits exactly). No blur (D21).
+ *
+ *   <ActionTray meta={<TrayMeta name="Priya Nair" at={iso} onClick={openHistory} />}>
+ *     <Button variant="primary" leftIcon={<IconUpload />}>Publish</Button>
+ *     <TrayMore>…menu items…</TrayMore>
+ *   </ActionTray>
+ *
+ * Use for sticky bottom ACTION bars only, never on cards or content areas.
+ */
+import * as React from "react";
+/** Class string for footers that can't take the component (e.g. a shared footer primitive). */
+export declare const actionTrayClass: string;
+export declare function ActionTray({ meta, children, className, as: Tag, clearToasts, ...props }: Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** Left slot, usually <TrayMeta>. */
+    meta?: React.ReactNode;
+    /** Right slot: actions (primary last-but-one, ⋯ last). */
+    children?: React.ReactNode;
+    as?: "div" | "footer";
+    /** a page-level bar at the bottom of the window: bottom toasts sit above it, never over its buttons */
+    clearToasts?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** V2 relTime: "just now", "5m ago", "3h ago", "2d ago", "1w ago", then a date. */
+export declare function relTime(at: string | number | Date, now?: number): string;
+/**
+ * Left meta: avatar 20 · name 13/500 · "Edited 3h ago" 13 muted (Figma). The tooltip carries the full timestamp;
+ * when `onClick` is set the whole line is a button (opens History).
+ */
+export declare function TrayMeta({ name, avatarName, src, people, at, verb, note, onClick, actionHint, }: {
+    name: string;
+    /** Full name for the avatar when `name` is shortened ("You", first names). */
+    avatarName?: string;
+    src?: string;
+    /** Several editors → avatar stack (first is the last editor). */
+    people?: {
+        name: string;
+        src?: string;
+    }[];
+    /** When it was edited; omit for "just now" states you phrase yourself via `note`. */
+    at?: string | number | Date;
+    verb?: string;
+    /** Overrides the relative-time text, e.g. "Edited just now". */
+    note?: string;
+    onClick?: () => void;
+    actionHint?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** The tray's "⋯" (32×32 ghost, Figma "Button - Modal actions") opening a menu above the bar. Children are menu items. */
+export declare function TrayMore({ label, children, menuClassName, }: {
+    label?: string;
+    children: React.ReactNode;
+    menuClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/action-tray.js

@@ -0,0 +1,153 @@
+import { cn } from "../lib/cn.js";
+import { TRAY } from "./surfaces.js";
+import { HintTooltip, IconButton } from "./button.js";
+import { Menu, MenuContent, MenuTrigger } from "./overlay.js";
+import { Avatar, AvatarStack } from "./display.js";
+import * as React from "react";
+import { IconDots } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/ui/action-tray.tsx
+/**
+* ACTION TRAY: Figma 61014:66265 "Bottom". The soft, slightly raised bar at the bottom of editors, inspectors,
+* sheets and dialogs: surface → light grey gradient, 1px top hairline, 12px side padding, 6px vertical, 44px tall +
+* hairline (a 32px button fits exactly). No blur (D21).
+*
+*   <ActionTray meta={<TrayMeta name="Priya Nair" at={iso} onClick={openHistory} />}>
+*     <Button variant="primary" leftIcon={<IconUpload />}>Publish</Button>
+*     <TrayMore>…menu items…</TrayMore>
+*   </ActionTray>
+*
+* Use for sticky bottom ACTION bars only, never on cards or content areas.
+*/
+var clearing = /* @__PURE__ */ new Set();
+function syncToastOffset() {
+	if (typeof document === "undefined") return;
+	let lift = 0;
+	for (const el of clearing) {
+		const r = el.getBoundingClientRect();
+		if (r.height) lift = Math.max(lift, window.innerHeight - r.top + 12);
+	}
+	if (lift > 0) document.documentElement.style.setProperty("--toast-offset-bottom", `${Math.round(lift)}px`);
+	else document.documentElement.style.removeProperty("--toast-offset-bottom");
+}
+function useToastClearance(ref, on) {
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!on || !el) return;
+		clearing.add(el);
+		syncToastOffset();
+		const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(syncToastOffset) : null;
+		ro?.observe(el);
+		window.addEventListener("resize", syncToastOffset);
+		return () => {
+			clearing.delete(el);
+			ro?.disconnect();
+			window.removeEventListener("resize", syncToastOffset);
+			syncToastOffset();
+		};
+	}, [ref, on]);
+}
+/** Class string for footers that can't take the component (e.g. a shared footer primitive). */
+var actionTrayClass = cn("shrink-0 border-t", TRAY);
+function ActionTray({ meta, children, className, as: Tag = "div", clearToasts = false, ...props }) {
+	const ref = React.useRef(null);
+	useToastClearance(ref, clearToasts);
+	return /* @__PURE__ */ jsxs(Tag, {
+		ref,
+		"data-action-tray": "",
+		className: cn(actionTrayClass, "@container/tray flex min-h-[45px] items-center justify-between gap-2 px-3 py-1.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-1 items-center gap-2",
+			children: meta
+		}), children ? /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-[5px]",
+			children
+		}) : null]
+	});
+}
+/** V2 relTime: "just now", "5m ago", "3h ago", "2d ago", "1w ago", then a date. */
+function relTime(at, now = Date.now()) {
+	const s = Math.round((now - new Date(at).getTime()) / 1e3);
+	if (s < 45) return "just now";
+	const m = Math.round(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.round(m / 60);
+	if (h < 24) return `${h}h ago`;
+	const days = Math.round(h / 24);
+	if (days < 7) return `${days}d ago`;
+	const w = Math.round(days / 7);
+	if (w < 5) return `${w}w ago`;
+	return new Date(at).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+var fullStamp = (at) => new Date(at).toLocaleString("en-US", {
+	weekday: "short",
+	month: "short",
+	day: "numeric",
+	year: "numeric",
+	hour: "numeric",
+	minute: "2-digit"
+});
+/**
+* Left meta: avatar 20 · name 13/500 · "Edited 3h ago" 13 muted (Figma). The tooltip carries the full timestamp;
+* when `onClick` is set the whole line is a button (opens History).
+*/
+function TrayMeta({ name, avatarName, src, people, at, verb = "Edited", note, onClick, actionHint = "Open history" }) {
+	const when = note ?? (at ? `${verb} ${relTime(at).replace("just now", "a moment ago")}` : verb);
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "flex shrink-0 items-center gap-1",
+		children: [people && people.length > 1 ? /* @__PURE__ */ jsx(AvatarStack, {
+			people,
+			size: 20,
+			max: 3
+		}) : /* @__PURE__ */ jsx(Avatar, {
+			name: avatarName ?? name,
+			src,
+			size: 20,
+			decorative: true
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hidden whitespace-nowrap text-kit-sm font-medium text-kit-fg @[34rem]/tray:inline",
+			children: name
+		})]
+	}), /* @__PURE__ */ jsx("span", {
+		className: "hidden min-w-0 truncate text-kit-sm text-kit-fg-3 @[34rem]/tray:inline",
+		children: when
+	})] });
+	return /* @__PURE__ */ jsx(HintTooltip, {
+		content: at ? `${name} · ${verb} ${fullStamp(at)}${onClick ? ` · ${actionHint}` : ""}` : onClick ? `${name} · ${when} · ${actionHint}` : `${name} · ${when}`,
+		children: onClick ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick,
+			"aria-label": `${name}, ${when}. ${actionHint}`,
+			className: "-mx-1 flex min-w-0 items-center gap-2 rounded-kit-md px-1 py-0.5 transition-colors hover:bg-kit-hover",
+			children: inner
+		}) : /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [inner, /* @__PURE__ */ jsx("span", {
+				className: "sr-only @[34rem]/tray:hidden",
+				children: `${name}, ${when}`
+			})]
+		})
+	});
+}
+/** The tray's "⋯" (32×32 ghost, Figma "Button - Modal actions") opening a menu above the bar. Children are menu items. */
+function TrayMore({ label = "More options", children, menuClassName }) {
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(IconButton, {
+		label,
+		size: "md",
+		children: /* @__PURE__ */ jsx(IconDots, { "aria-hidden": true })
+	}) }), /* @__PURE__ */ jsx(MenuContent, {
+		side: "top",
+		align: "end",
+		className: cn("w-60 font-kit-sans", menuClassName),
+		children
+	})] });
+}
+//#endregion
+export { ActionTray, TrayMeta, TrayMore, actionTrayClass, relTime };
+
+//# sourceMappingURL=action-tray.js.map

package/ui/action-tray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-tray.js","names":[],"sources":["../../src/kit/ui/action-tray.tsx"],"sourcesContent":["/**\n * ACTION TRAY: Figma 61014:66265 \"Bottom\". The soft, slightly raised bar at the bottom of editors, inspectors,\n * sheets and dialogs: surface → light grey gradient, 1px top hairline, 12px side padding, 6px vertical, 44px tall +\n * hairline (a 32px button fits exactly). No blur (D21).\n *\n *   <ActionTray meta={<TrayMeta name=\"Priya Nair\" at={iso} onClick={openHistory} />}>\n *     <Button variant=\"primary\" leftIcon={<IconUpload />}>Publish</Button>\n *     <TrayMore>…menu items…</TrayMore>\n *   </ActionTray>\n *\n * Use for sticky bottom ACTION bars only, never on cards or content areas.\n */\nimport * as React from \"react\";\nimport { IconDots } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { HintTooltip, IconButton } from \"./button\";\nimport { Avatar, AvatarStack } from \"./display\";\nimport { Menu, MenuContent, MenuTrigger } from \"./overlay\";\nimport { TRAY } from \"./surfaces\";\n\n/* ── Toasts clear the tray (S1: a toast covered the schema draft bar's Apply) ─────────────────────────────────────────\n   A tray with `clearToasts` lifts the app's bottom toasts above itself while it is mounted: it writes\n   `--toast-offset-bottom` on the root (the host's Toaster reads it as its bottom offset), the highest tray winning. */\nconst clearing = new Set<HTMLElement>();\nfunction syncToastOffset() {\n  if (typeof document === \"undefined\") return;\n  let lift = 0;\n  for (const el of clearing) {\n    const r = el.getBoundingClientRect();\n    if (r.height) lift = Math.max(lift, window.innerHeight - r.top + 12);\n  }\n  if (lift > 0) document.documentElement.style.setProperty(\"--toast-offset-bottom\", `${Math.round(lift)}px`);\n  else document.documentElement.style.removeProperty(\"--toast-offset-bottom\");\n}\nfunction useToastClearance(ref: React.RefObject<HTMLElement | null>, on: boolean) {\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!on || !el) return;\n    clearing.add(el);\n    syncToastOffset();\n    const ro = typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(syncToastOffset) : null;\n    ro?.observe(el);\n    window.addEventListener(\"resize\", syncToastOffset);\n    return () => {\n      clearing.delete(el);\n      ro?.disconnect();\n      window.removeEventListener(\"resize\", syncToastOffset);\n      syncToastOffset();\n    };\n  }, [ref, on]);\n}\n\n/** Class string for footers that can't take the component (e.g. a shared footer primitive). */\nexport const actionTrayClass = cn(\"shrink-0 border-t\", TRAY);\n\nexport function ActionTray({\n  meta,\n  children,\n  className,\n  as: Tag = \"div\",\n  clearToasts = false,\n  ...props\n}: Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** Left slot, usually <TrayMeta>. */\n  meta?: React.ReactNode;\n  /** Right slot: actions (primary last-but-one, ⋯ last). */\n  children?: React.ReactNode;\n  as?: \"div\" | \"footer\";\n  /** a page-level bar at the bottom of the window: bottom toasts sit above it, never over its buttons */\n  clearToasts?: boolean;\n}) {\n  const ref = React.useRef<HTMLElement>(null);\n  useToastClearance(ref, clearToasts);\n  return (\n    <Tag\n      ref={ref as React.Ref<HTMLDivElement>}\n      data-action-tray=\"\"\n      className={cn(actionTrayClass, \"@container/tray flex min-h-[45px] items-center justify-between gap-2 px-3 py-1.5\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">{meta}</div>\n      {children ? <div className=\"flex shrink-0 items-center gap-[5px]\">{children}</div> : null}\n    </Tag>\n  );\n}\n\n/** V2 relTime: \"just now\", \"5m ago\", \"3h ago\", \"2d ago\", \"1w ago\", then a date. */\nexport function relTime(at: string | number | Date, now = Date.now()) {\n  const s = Math.round((now - new Date(at).getTime()) / 1000);\n  if (s < 45) return \"just now\";\n  const m = Math.round(s / 60);\n  if (m < 60) return `${m}m ago`;\n  const h = Math.round(m / 60);\n  if (h < 24) return `${h}h ago`;\n  const days = Math.round(h / 24);\n  if (days < 7) return `${days}d ago`;\n  const w = Math.round(days / 7);\n  if (w < 5) return `${w}w ago`;\n  return new Date(at).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nconst fullStamp = (at: string | number | Date) =>\n  new Date(at).toLocaleString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\", year: \"numeric\", hour: \"numeric\", minute: \"2-digit\" });\n\n/**\n * Left meta: avatar 20 · name 13/500 · \"Edited 3h ago\" 13 muted (Figma). The tooltip carries the full timestamp;\n * when `onClick` is set the whole line is a button (opens History).\n */\nexport function TrayMeta({\n  name,\n  avatarName,\n  src,\n  people,\n  at,\n  verb = \"Edited\",\n  note,\n  onClick,\n  actionHint = \"Open history\",\n}: {\n  name: string;\n  /** Full name for the avatar when `name` is shortened (\"You\", first names). */\n  avatarName?: string;\n  src?: string;\n  /** Several editors → avatar stack (first is the last editor). */\n  people?: { name: string; src?: string }[];\n  /** When it was edited; omit for \"just now\" states you phrase yourself via `note`. */\n  at?: string | number | Date;\n  verb?: string;\n  /** Overrides the relative-time text, e.g. \"Edited just now\". */\n  note?: string;\n  onClick?: () => void;\n  actionHint?: string;\n}) {\n  const when = note ?? (at ? `${verb} ${relTime(at).replace(\"just now\", \"a moment ago\")}` : verb);\n  const inner = (\n    <>\n      <span className=\"flex shrink-0 items-center gap-1\">\n        {people && people.length > 1 ? (\n          <AvatarStack people={people} size={20} max={3} />\n        ) : (\n          <Avatar name={avatarName ?? name} src={src} size={20} decorative />\n        )}\n        {/* narrow trays (the grid drawer): just the avatar, the words move into the tooltip; never a clipped \"Edit…\" */}\n        <span className=\"hidden whitespace-nowrap text-kit-sm font-medium text-kit-fg @[34rem]/tray:inline\">{name}</span>\n      </span>\n      <span className=\"hidden min-w-0 truncate text-kit-sm text-kit-fg-3 @[34rem]/tray:inline\">{when}</span>\n    </>\n  );\n  const tip = at\n    ? `${name} · ${verb} ${fullStamp(at)}${onClick ? ` · ${actionHint}` : \"\"}`\n    : onClick\n      ? `${name} · ${when} · ${actionHint}`\n      : `${name} · ${when}`;\n  const body = onClick ? (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={`${name}, ${when}. ${actionHint}`}\n      className=\"-mx-1 flex min-w-0 items-center gap-2 rounded-kit-md px-1 py-0.5 transition-colors hover:bg-kit-hover\"\n    >\n      {inner}\n    </button>\n  ) : (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      {inner}\n      {/* the words hide in narrow trays; screen readers always get them */}\n      <span className=\"sr-only @[34rem]/tray:hidden\">{`${name}, ${when}`}</span>\n    </span>\n  );\n  return <HintTooltip content={tip}>{body}</HintTooltip>;\n}\n\n/** The tray's \"⋯\" (32×32 ghost, Figma \"Button - Modal actions\") opening a menu above the bar. Children are menu items. */\nexport function TrayMore({\n  label = \"More options\",\n  children,\n  menuClassName,\n}: {\n  label?: string;\n  children: React.ReactNode;\n  menuClassName?: string;\n}) {\n  return (\n    // the kit Menu: §12 dismiss guards, the modal-layer marker (an open tooltip closes) and V2's non-looping arrows\n    <Menu>\n      <MenuTrigger\n        render={\n          <IconButton label={label} size=\"md\">\n            <IconDots aria-hidden />\n          </IconButton>\n        }\n      />\n      <MenuContent side=\"top\" align=\"end\" className={cn(\"w-60 font-kit-sans\", menuClassName)}>\n        {children}\n      </MenuContent>\n    </Menu>\n  );\n}\n"],"mappings":"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"}

package/ui/button.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { type VariantProps } from "./variants";
+/**
+ * Button: the only button in the kit.
+ * Heights: xs 24 · sm 28 · md 32 (default) · lg 36 · xl 40. Radius 6.
+ * Variants: primary (ink) · accent (violet, reserved for the ONE create action per screen)
+ *           secondary (bordered) · ghost · soft · danger · danger-ghost · link · ai (gradient sparkle)
+ * The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).
+ */
+export declare const buttonVariants: (props?: {
+    variant?: "accent" | "link" | "primary" | "secondary" | "ghost" | "soft" | "danger" | "danger-ghost" | "ai" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render the single child element (a link, say) with the button's classes and props. */
+    asChild?: boolean;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/** Square icon-only button. Always pass `label` (used for aria-label + tooltip). */
+export declare const iconButtonVariants: (props?: {
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "outline" | "ghost" | "soft" | null | undefined;
+} | undefined) => string;
+/**
+ * a11y: true while rendering inside a tooltip (or a surface that manages its own hints), so an IconButton nested
+ * there doesn't add a second tooltip. Provided by HintTooltip and overlay.tsx's <Tooltip>.
+ */
+export declare const TooltipScope: React.Context<boolean>;
+/**
+ * The plain ink hint (DESIGN.md 8.23: top, 6px offset, 8px collision padding, portalled, z 90, 350ms). The child
+ * element is the trigger and must take a ref and DOM props. input, display and action-tray use it so they never
+ * import overlay.tsx; overlay's <Tooltip> adds the shortcut slot on top of the same layer.
+ */
+export declare function HintTooltip({ content, side, delay, children, }: {
+    content: React.ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+    children: React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    label: string;
+    active?: boolean;
+    /** Hover/focus hint. Defaults to `label`; pass `false` to opt out, or a node to customise. */
+    tooltip?: React.ReactNode | false;
+    tooltipSide?: "top" | "bottom" | "left" | "right";
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/** The AI sparkle in the official brand gradient. Used everywhere AI appears. */
+export declare function Sparkle({ className, size }: {
+    className?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** D15 progressive disclosure: "+ Add a message" / "+ Limit to specific sites": reveals an optional input. */
+export declare function RevealLink({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;

package/ui/button.js

@@ -0,0 +1,202 @@
+import { cn } from "../lib/cn.js";
+import { SPARKLE_PATH } from "../brand/logo.js";
+import { TooltipLayer, TooltipRoot } from "./tooltip-root.js";
+import { variants } from "./variants.js";
+import * as React from "react";
+import { IconLoader2, IconPlus } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/kit/ui/button.tsx
+/**
+* Button: the only button in the kit.
+* Heights: xs 24 · sm 28 · md 32 (default) · lg 36 · xl 40. Radius 6.
+* Variants: primary (ink) · accent (violet, reserved for the ONE create action per screen)
+*           secondary (bordered) · ghost · soft · danger · danger-ghost · link · ai (gradient sparkle)
+* The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).
+*/
+var buttonVariants = variants("relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-150 ease-out disabled:pointer-events-none disabled:opacity-45 [&_svg]:shrink-0 [&_svg]:opacity-90", {
+	variants: {
+		variant: {
+			primary: "bg-kit-inverse text-kit-fg-inverse shadow-[var(--kit-shadow-button-primary)] hover:bg-kit-inverse-hover active:bg-kit-inverse",
+			accent: "bg-kit-accent text-kit-accent-on shadow-kit-xs hover:bg-kit-accent-hover",
+			secondary: "border border-kit-line-strong bg-kit-control-bg text-kit-fg shadow-kit-xs hover:bg-kit-subtle active:bg-kit-hover",
+			ghost: "text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected",
+			soft: "bg-kit-muted text-kit-fg hover:bg-kit-selected",
+			danger: "bg-kit-danger text-kit-danger-on shadow-kit-xs hover:brightness-95",
+			"danger-ghost": "text-kit-danger-fg hover:bg-kit-danger-soft",
+			link: "text-kit-accent-fg underline-offset-4 hover:underline px-0 h-auto active:scale-100",
+			ai: "border border-kit-line bg-kit-control-bg text-kit-fg shadow-kit-xs hover:border-kit-accent-line hover:bg-kit-accent-softer"
+		},
+		size: {
+			xs: "h-6 rounded-kit-md px-2 text-kit-xs [&_svg]:size-3.5",
+			sm: "h-7 rounded-kit-md px-2.5 text-kit-sm [&_svg]:size-3.5",
+			md: "h-8 rounded-kit-md px-3 text-kit-sm [&_svg]:size-4",
+			lg: "h-9 rounded-kit-md px-3.5 text-kit-base [&_svg]:size-4",
+			xl: "h-10 rounded-kit-md px-4 text-kit-base [&_svg]:size-[18px]"
+		}
+	},
+	compoundVariants: [{
+		variant: "link",
+		className: "h-auto px-0"
+	}],
+	defaultVariants: {
+		variant: "secondary",
+		size: "md"
+	}
+});
+var SOLID_DISABLED = "[.dark_&]:disabled:bg-[#2a2a2d] [.dark_&]:disabled:text-[#9e9ea1] [.dark_&]:disabled:opacity-100 [.dark_&]:disabled:shadow-none";
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+}
+var Button = React.forwardRef(({ className, variant, size, asChild, loading, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
+	const classes = cn(buttonVariants({
+		variant,
+		size
+	}), (variant === "primary" || variant === "accent") && SOLID_DISABLED, className);
+	if (asChild && React.isValidElement(children)) return React.cloneElement(children, {
+		...props,
+		...children.props,
+		className: cn(classes, children.props.className),
+		ref: mergeRefs(ref, children.props.ref)
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: props.type ?? "button",
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: classes,
+		...props,
+		children: [
+			loading ? /* @__PURE__ */ jsx(IconLoader2, {
+				className: "animate-spin",
+				"aria-hidden": true
+			}) : leftIcon,
+			variant === "ai" && !leftIcon && !loading ? /* @__PURE__ */ jsx(Sparkle, {}) : null,
+			children,
+			rightIcon
+		]
+	});
+});
+Button.displayName = "Button";
+/** Square icon-only button. Always pass `label` (used for aria-label + tooltip). */
+var iconButtonVariants = variants("relative inline-flex items-center justify-center shrink-0 text-kit-fg-2 transition-colors duration-150 hover:bg-kit-hover hover:text-kit-fg active:scale-[0.96] disabled:opacity-40 disabled:pointer-events-none data-[active=true]:bg-kit-selected data-[active=true]:text-kit-fg data-[popup-open]:bg-kit-selected data-[popup-open]:text-kit-fg", {
+	variants: {
+		size: {
+			xs: "size-6 rounded-kit-md [&_svg]:size-3.5",
+			sm: "size-7 rounded-kit-md [&_svg]:size-4",
+			md: "size-8 rounded-kit-md [&_svg]:size-4",
+			lg: "size-9 rounded-kit-md [&_svg]:size-[18px]"
+		},
+		variant: {
+			ghost: "",
+			outline: "border border-kit-line bg-kit-control-bg shadow-kit-xs hover:border-kit-line-strong",
+			soft: "bg-kit-muted"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "ghost"
+	}
+});
+/**
+* a11y: true while rendering inside a tooltip (or a surface that manages its own hints), so an IconButton nested
+* there doesn't add a second tooltip. Provided by HintTooltip and overlay.tsx's <Tooltip>.
+*/
+var TooltipScope = React.createContext(false);
+/**
+* The plain ink hint (DESIGN.md 8.23: top, 6px offset, 8px collision padding, portalled, z 90, 350ms). The child
+* element is the trigger and must take a ref and DOM props. input, display and action-tray use it so they never
+* import overlay.tsx; overlay's <Tooltip> adds the shortcut slot on top of the same layer.
+*/
+function HintTooltip({ content, side = "top", delay = 350, children }) {
+	return /* @__PURE__ */ jsx(TooltipScope.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			delay,
+			render: children
+		}), /* @__PURE__ */ jsx(TooltipLayer, {
+			side,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+				children: content
+			})
+		})] })
+	});
+}
+var IconButton = React.forwardRef(({ className, size, variant, label, active, children, tooltip, tooltipSide = "top", ...props }, ref) => {
+	const inTooltip = React.useContext(TooltipScope);
+	const btn = /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-label": label,
+		"data-active": active ? "true" : void 0,
+		className: cn(iconButtonVariants({
+			size,
+			variant
+		}), className),
+		...props,
+		children
+	});
+	if (inTooltip || tooltip === false || !label) return btn;
+	return /* @__PURE__ */ jsx(HintTooltip, {
+		content: tooltip ?? label,
+		side: tooltipSide,
+		children: btn
+	});
+});
+IconButton.displayName = "IconButton";
+/** The AI sparkle in the official brand gradient. Used everywhere AI appears. */
+function Sparkle({ className, size = 16 }) {
+	const id = React.useId().replace(/:/g, "");
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "2 2 16 16",
+		className: cn("shrink-0", className),
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+			id: `sp${id}`,
+			x1: "6.89",
+			y1: "4.59",
+			x2: "18",
+			y2: "23.67",
+			gradientUnits: "userSpaceOnUse",
+			children: [
+				/* @__PURE__ */ jsx("stop", {
+					offset: "0.0817",
+					style: { stopColor: "var(--kit-brand-violet)" }
+				}),
+				/* @__PURE__ */ jsx("stop", {
+					offset: "0.4667",
+					style: { stopColor: "var(--kit-brand-coral)" }
+				}),
+				/* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					style: { stopColor: "var(--kit-brand-rose)" }
+				})
+			]
+		}) }), /* @__PURE__ */ jsx("path", {
+			d: SPARKLE_PATH,
+			fill: `url(#sp${id})`
+		})]
+	});
+}
+/** D15 progressive disclosure: "+ Add a message" / "+ Limit to specific sites": reveals an optional input. */
+function RevealLink({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cn("inline-flex h-7 items-center gap-1 rounded-kit-md text-kit-sm font-medium text-kit-fg-2 transition-colors hover:text-kit-fg [&_svg]:size-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(IconPlus, {
+			stroke: 2,
+			"aria-hidden": true
+		}), children]
+	});
+}
+//#endregion
+export { Button, HintTooltip, IconButton, RevealLink, Sparkle, TooltipScope, buttonVariants, iconButtonVariants };
+
+//# sourceMappingURL=button.js.map

package/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../src/kit/ui/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { IconLoader2, IconPlus } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { SPARKLE_PATH } from \"../brand/logo\";\nimport { TooltipLayer, TooltipRoot } from \"./tooltip-root\";\nimport { variants, type VariantProps } from \"./variants\";\n\n/**\n * Button: the only button in the kit.\n * Heights: xs 24 · sm 28 · md 32 (default) · lg 36 · xl 40. Radius 6.\n * Variants: primary (ink) · accent (violet, reserved for the ONE create action per screen)\n *           secondary (bordered) · ghost · soft · danger · danger-ghost · link · ai (gradient sparkle)\n * The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).\n */\nexport const buttonVariants = variants(\n  \"relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-150 ease-out disabled:pointer-events-none disabled:opacity-45 [&_svg]:shrink-0 [&_svg]:opacity-90\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-kit-inverse text-kit-fg-inverse shadow-[var(--kit-shadow-button-primary)] hover:bg-kit-inverse-hover active:bg-kit-inverse\",\n        accent: \"bg-kit-accent text-kit-accent-on shadow-kit-xs hover:bg-kit-accent-hover\",\n        secondary: \"border border-kit-line-strong bg-kit-control-bg text-kit-fg shadow-kit-xs hover:bg-kit-subtle active:bg-kit-hover\",\n        ghost: \"text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected\",\n        soft: \"bg-kit-muted text-kit-fg hover:bg-kit-selected\",\n        danger: \"bg-kit-danger text-kit-danger-on shadow-kit-xs hover:brightness-95\",\n        \"danger-ghost\": \"text-kit-danger-fg hover:bg-kit-danger-soft\",\n        link: \"text-kit-accent-fg underline-offset-4 hover:underline px-0 h-auto active:scale-100\",\n        ai: \"border border-kit-line bg-kit-control-bg text-kit-fg shadow-kit-xs hover:border-kit-accent-line hover:bg-kit-accent-softer\",\n      },\n      size: {\n        xs: \"h-6 rounded-kit-md px-2 text-kit-xs [&_svg]:size-3.5\",\n        sm: \"h-7 rounded-kit-md px-2.5 text-kit-sm [&_svg]:size-3.5\",\n        md: \"h-8 rounded-kit-md px-3 text-kit-sm [&_svg]:size-4\",\n        lg: \"h-9 rounded-kit-md px-3.5 text-kit-base [&_svg]:size-4\",\n        xl: \"h-10 rounded-kit-md px-4 text-kit-base [&_svg]:size-[18px]\",\n      },\n    },\n    compoundVariants: [{ variant: \"link\", className: \"h-auto px-0\" }],\n    defaultVariants: { variant: \"secondary\", size: \"md\" },\n  },\n);\n\n/* .btn-solid (V2): in dark a disabled primary/accent takes the solid disabled pair instead of the opacity dim. */\nconst SOLID_DISABLED = \"[.dark_&]:disabled:bg-[#2a2a2d] [.dark_&]:disabled:text-[#9e9ea1] [.dark_&]:disabled:opacity-100 [.dark_&]:disabled:shadow-none\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Render the single child element (a link, say) with the button's classes and props. */\n  asChild?: boolean;\n  loading?: boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n}\n\ntype ChildProps = { className?: string; ref?: React.Ref<unknown> };\n\nfunction mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.RefObject<T | null>).current = node;\n    }\n  };\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild, loading, leftIcon, rightIcon, children, disabled, ...props }, ref) => {\n    const classes = cn(buttonVariants({ variant, size }), (variant === \"primary\" || variant === \"accent\") && SOLID_DISABLED, className);\n    if (asChild && React.isValidElement<ChildProps>(children)) {\n      return React.cloneElement(children, {\n        ...props,\n        ...children.props,\n        className: cn(classes, children.props.className),\n        ref: mergeRefs(ref as React.Ref<unknown>, children.props.ref),\n      });\n    }\n    return (\n      <button ref={ref} type={props.type ?? \"button\"} disabled={disabled || loading} aria-busy={loading || undefined} className={classes} {...props}>\n        {loading ? <IconLoader2 className=\"animate-spin\" aria-hidden /> : leftIcon}\n        {variant === \"ai\" && !leftIcon && !loading ? <Sparkle /> : null}\n        {children}\n        {rightIcon}\n      </button>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\n/** Square icon-only button. Always pass `label` (used for aria-label + tooltip). */\nexport const iconButtonVariants = variants(\n  \"relative inline-flex items-center justify-center shrink-0 text-kit-fg-2 transition-colors duration-150 hover:bg-kit-hover hover:text-kit-fg active:scale-[0.96] disabled:opacity-40 disabled:pointer-events-none data-[active=true]:bg-kit-selected data-[active=true]:text-kit-fg data-[popup-open]:bg-kit-selected data-[popup-open]:text-kit-fg\",\n  {\n    variants: {\n      size: {\n        xs: \"size-6 rounded-kit-md [&_svg]:size-3.5\",\n        sm: \"size-7 rounded-kit-md [&_svg]:size-4\",\n        md: \"size-8 rounded-kit-md [&_svg]:size-4\",\n        lg: \"size-9 rounded-kit-md [&_svg]:size-[18px]\",\n      },\n      variant: {\n        ghost: \"\",\n        outline: \"border border-kit-line bg-kit-control-bg shadow-kit-xs hover:border-kit-line-strong\",\n        soft: \"bg-kit-muted\",\n      },\n    },\n    defaultVariants: { size: \"md\", variant: \"ghost\" },\n  },\n);\n\n/**\n * a11y: true while rendering inside a tooltip (or a surface that manages its own hints), so an IconButton nested\n * there doesn't add a second tooltip. Provided by HintTooltip and overlay.tsx's <Tooltip>.\n */\nexport const TooltipScope = React.createContext(false);\n\n/**\n * The plain ink hint (DESIGN.md 8.23: top, 6px offset, 8px collision padding, portalled, z 90, 350ms). The child\n * element is the trigger and must take a ref and DOM props. input, display and action-tray use it so they never\n * import overlay.tsx; overlay's <Tooltip> adds the shortcut slot on top of the same layer.\n */\nexport function HintTooltip({\n  content,\n  side = \"top\",\n  delay = 350,\n  children,\n}: {\n  content: React.ReactNode;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  delay?: number;\n  children: React.ReactElement;\n}) {\n  return (\n    <TooltipScope.Provider value>\n      <TooltipRoot>\n        <TooltipPrimitive.Trigger delay={delay} render={children} />\n        <TooltipLayer side={side}>\n          <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n        </TooltipLayer>\n      </TooltipRoot>\n    </TooltipScope.Provider>\n  );\n}\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {\n  label: string;\n  active?: boolean;\n  /** Hover/focus hint. Defaults to `label`; pass `false` to opt out, or a node to customise. */\n  tooltip?: React.ReactNode | false;\n  tooltipSide?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, size, variant, label, active, children, tooltip, tooltipSide = \"top\", ...props }, ref) => {\n    const inTooltip = React.useContext(TooltipScope);\n    const btn = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        data-active={active ? \"true\" : undefined}\n        className={cn(iconButtonVariants({ size, variant }), className)}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n    // Every icon-only button gets a visible hint on hover AND keyboard focus (brief §11), unless a\n    // parent tooltip already provides one or the caller opted out.\n    if (inTooltip || tooltip === false || !label) return btn;\n    return (\n      <HintTooltip content={tooltip ?? label} side={tooltipSide}>\n        {btn}\n      </HintTooltip>\n    );\n  },\n);\nIconButton.displayName = \"IconButton\";\n\n/** The AI sparkle in the official brand gradient. Used everywhere AI appears. */\nexport function Sparkle({ className, size = 16 }: { className?: string; size?: number }) {\n  const id = React.useId().replace(/:/g, \"\");\n  return (\n    <svg width={size} height={size} viewBox=\"2 2 16 16\" className={cn(\"shrink-0\", className)} aria-hidden>\n      <defs>\n        <linearGradient id={`sp${id}`} x1=\"6.89\" y1=\"4.59\" x2=\"18\" y2=\"23.67\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0.0817\" style={{ stopColor: \"var(--kit-brand-violet)\" }} />\n          <stop offset=\"0.4667\" style={{ stopColor: \"var(--kit-brand-coral)\" }} />\n          <stop offset=\"1\" style={{ stopColor: \"var(--kit-brand-rose)\" }} />\n        </linearGradient>\n      </defs>\n      <path d={SPARKLE_PATH} fill={`url(#sp${id})`} />\n    </svg>\n  );\n}\n\n/** D15 progressive disclosure: \"+ Add a message\" / \"+ Limit to specific sites\": reveals an optional input. */\nexport function RevealLink({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"inline-flex h-7 items-center gap-1 rounded-kit-md text-kit-sm font-medium text-kit-fg-2 transition-colors hover:text-kit-fg [&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    >\n      <IconPlus stroke={2} aria-hidden />\n      {children}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/ui/choice-switch.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+/** Most options a segmented switch may hold. */
+export declare const SEGMENTED_MAX = 3;
+/**
+ * Longest label (characters) that stays on one line when the row shares a 340px inspector:
+ * two options get ~134px each (about 18 characters at 13px), three get ~84px (about 12).
+ */
+export declare const SEGMENTED_MAX_LABEL: {
+    readonly 2: 18;
+    readonly 3: 12;
+};
+export declare function fitsSegmented(labels: React.ReactNode[]): boolean;
+export interface ChoiceSwitchItem<T extends string> {
+    value: T;
+    label: React.ReactNode;
+    /** one line under the option in the dropdown; ignored while it renders as a segmented switch */
+    description?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare function ChoiceSwitch<T extends string>({ value, onChange, items, "aria-label": ariaLabel, size, layout, disabled, className, segmentedClassName, selectClassName, layoutId, placeholder, }: {
+    value: T;
+    onChange: (v: T) => void;
+    items: ChoiceSwitchItem<T>[];
+    "aria-label"?: string;
+    size?: "sm" | "md";
+    /** "auto" applies D46; force a look only when a design reason overrides the rule */
+    layout?: "auto" | "segmented" | "dropdown";
+    disabled?: boolean;
+    /** applied to whichever control renders */
+    className?: string;
+    segmentedClassName?: string;
+    selectClassName?: string;
+    layoutId?: string;
+    placeholder?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/choice-switch.js

@@ -0,0 +1,57 @@
+import { Segmented } from "./controls.js";
+import { Select, nodeText } from "./select.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/kit/ui/choice-switch.tsx
+/** Most options a segmented switch may hold. */
+var SEGMENTED_MAX = 3;
+/**
+* Longest label (characters) that stays on one line when the row shares a 340px inspector:
+* two options get ~134px each (about 18 characters at 13px), three get ~84px (about 12).
+*/
+var SEGMENTED_MAX_LABEL = {
+	2: 18,
+	3: 12
+};
+function fitsSegmented(labels) {
+	const n = labels.length;
+	if (n < 2 || n > 3) return false;
+	const max = SEGMENTED_MAX_LABEL[n];
+	return labels.every((l) => nodeText(l).trim().length <= max);
+}
+function ChoiceSwitch({ value, onChange, items, "aria-label": ariaLabel, size = "sm", layout = "auto", disabled, className, segmentedClassName, selectClassName, layoutId, placeholder }) {
+	if (layout === "segmented" || layout === "auto" && fitsSegmented(items.map((i) => i.label))) return /* @__PURE__ */ jsx(Segmented, {
+		size,
+		"aria-label": ariaLabel,
+		value,
+		onChange: (v) => !disabled && onChange(v),
+		layoutId,
+		className: [className, segmentedClassName].filter(Boolean).join(" ") || void 0,
+		items: items.map((i) => ({
+			value: i.value,
+			label: i.label,
+			icon: i.icon,
+			disabled: disabled || i.disabled
+		}))
+	});
+	return /* @__PURE__ */ jsx(Select, {
+		size,
+		"aria-label": ariaLabel,
+		value: value || void 0,
+		disabled,
+		placeholder,
+		onValueChange: (v) => onChange(v),
+		className: [className, selectClassName].filter(Boolean).join(" ") || void 0,
+		options: items.map((i) => ({
+			value: i.value,
+			label: i.label,
+			description: i.description,
+			icon: i.icon,
+			disabled: i.disabled
+		}))
+	});
+}
+//#endregion
+export { ChoiceSwitch, SEGMENTED_MAX, SEGMENTED_MAX_LABEL, fitsSegmented };
+
+//# sourceMappingURL=choice-switch.js.map

package/ui/choice-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-switch.js","names":[],"sources":["../../src/kit/ui/choice-switch.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Segmented } from \"./controls\";\nimport { Select, nodeText } from \"./select\";\n\n/* ── Pickers: segmented vs dropdown (D46) ──────────────────────────────────\n   A tab-style switch is for 2–3 short options people flip often. Four or more options, or labels that would wrap or\n   truncate in a 340px inspector, become a dropdown (the D34 Select, with a one-line description where an option\n   isn't self-explanatory). `fitsSegmented` is the single test; `ChoiceSwitch` applies it for dynamic lists\n   (variants, schema options, presets) so call sites never have to count. */\n\n/** Most options a segmented switch may hold. */\nexport const SEGMENTED_MAX = 3;\n/**\n * Longest label (characters) that stays on one line when the row shares a 340px inspector:\n * two options get ~134px each (about 18 characters at 13px), three get ~84px (about 12).\n */\nexport const SEGMENTED_MAX_LABEL = { 2: 18, 3: 12 } as const;\n\nexport function fitsSegmented(labels: React.ReactNode[]): boolean {\n  const n = labels.length;\n  if (n < 2 || n > SEGMENTED_MAX) return false;\n  const max = SEGMENTED_MAX_LABEL[n as 2 | 3];\n  return labels.every((l) => nodeText(l).trim().length <= max);\n}\n\nexport interface ChoiceSwitchItem<T extends string> {\n  value: T;\n  label: React.ReactNode;\n  /** one line under the option in the dropdown; ignored while it renders as a segmented switch */\n  description?: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport function ChoiceSwitch<T extends string>({\n  value,\n  onChange,\n  items,\n  \"aria-label\": ariaLabel,\n  size = \"sm\",\n  layout = \"auto\",\n  disabled,\n  className,\n  segmentedClassName,\n  selectClassName,\n  layoutId,\n  placeholder,\n}: {\n  value: T;\n  onChange: (v: T) => void;\n  items: ChoiceSwitchItem<T>[];\n  \"aria-label\"?: string;\n  size?: \"sm\" | \"md\";\n  /** \"auto\" applies D46; force a look only when a design reason overrides the rule */\n  layout?: \"auto\" | \"segmented\" | \"dropdown\";\n  disabled?: boolean;\n  /** applied to whichever control renders */\n  className?: string;\n  segmentedClassName?: string;\n  selectClassName?: string;\n  layoutId?: string;\n  placeholder?: string;\n}) {\n  const segmented = layout === \"segmented\" || (layout === \"auto\" && fitsSegmented(items.map((i) => i.label)));\n  if (segmented)\n    return (\n      <Segmented<T>\n        size={size}\n        aria-label={ariaLabel}\n        value={value}\n        onChange={(v) => !disabled && onChange(v)}\n        layoutId={layoutId}\n        className={[className, segmentedClassName].filter(Boolean).join(\" \") || undefined}\n        items={items.map((i) => ({ value: i.value, label: i.label, icon: i.icon, disabled: disabled || i.disabled }))}\n      />\n    );\n  return (\n    <Select\n      size={size}\n      aria-label={ariaLabel}\n      value={value || undefined}\n      disabled={disabled}\n      placeholder={placeholder}\n      onValueChange={(v) => onChange(v as T)}\n      className={[className, selectClassName].filter(Boolean).join(\" \") || undefined}\n      options={items.map((i) => ({ value: i.value, label: i.label, description: i.description, icon: i.icon, disabled: i.disabled }))}\n    />\n  );\n}\n"],"mappings":";;;;;;AAWA,IAAa,gBAAgB;;;;;AAK7B,IAAa,sBAAsB;CAAE,GAAG;CAAI,GAAG;CAAI;AAEnD,SAAgB,cAAc,QAAoC;CAChE,MAAM,IAAI,OAAO;AACjB,KAAI,IAAI,KAAK,IAAA,EAAmB,QAAO;CACvC,MAAM,MAAM,oBAAoB;AAChC,QAAO,OAAO,OAAO,MAAM,SAAS,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI;;AAY9D,SAAgB,aAA+B,EAC7C,OACA,UACA,OACA,cAAc,WACd,OAAO,MACP,SAAS,QACT,UACA,WACA,oBACA,iBACA,UACA,eAgBC;AAED,KADkB,WAAW,eAAgB,WAAW,UAAU,cAAc,MAAM,KAAK,MAAM,EAAE,MAAM,CAAC,CAExG,QACE,oBAAC,WAAD;EACQ;EACN,cAAY;EACL;EACP,WAAW,MAAM,CAAC,YAAY,SAAS,EAAE;EAC/B;EACV,WAAW,CAAC,WAAW,mBAAmB,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI,KAAA;EACxE,OAAO,MAAM,KAAK,OAAO;GAAE,OAAO,EAAE;GAAO,OAAO,EAAE;GAAO,MAAM,EAAE;GAAM,UAAU,YAAY,EAAE;GAAU,EAAE;EAC7G,CAAA;AAEN,QACE,oBAAC,QAAD;EACQ;EACN,cAAY;EACZ,OAAO,SAAS,KAAA;EACN;EACG;EACb,gBAAgB,MAAM,SAAS,EAAO;EACtC,WAAW,CAAC,WAAW,gBAAgB,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI,KAAA;EACrE,SAAS,MAAM,KAAK,OAAO;GAAE,OAAO,EAAE;GAAO,OAAO,EAAE;GAAO,aAAa,EAAE;GAAa,MAAM,EAAE;GAAM,UAAU,EAAE;GAAU,EAAE;EAC/H,CAAA"}