@bettercms-ai/kit 0.1.1 → 1.0.0

package/ui/controls.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+export declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
+    size?: "sm" | "md";
+}): import("react/jsx-runtime").JSX.Element;
+/** `checked` keeps V2's tri-state value: true, false or "indeterminate". */
+export declare function Checkbox({ className, checked, ...props }: Omit<CheckboxPrimitive.Root.Props, "checked" | "indeterminate"> & {
+    checked?: boolean | "indeterminate";
+}): import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: <Value>(props: RadioGroupPrimitive.Props<Value>) => React.JSX.Element;
+export declare function Radio({ className, ...props }: RadioPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+/** Large selectable card used for choices (plans, project kinds, roles). */
+export declare function ChoiceCard({ selected, onSelect, icon, title, description, badge, className, children, }: {
+    selected: boolean;
+    onSelect: () => void;
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    badge?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** D15: 2–4 choices → one hairline list of compact rows. Wrap <ChoiceCard>s in it; they lose their own card chrome. */
+export declare function ChoiceList({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, label, ...props }: Omit<SliderPrimitive.Root.Props<number | readonly number[]>, "className"> & {
+    className?: string;
+    /** accessible name for the thumb(s) */
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export type SegmentedItem<T extends string> = {
+    value: T;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    count?: number;
+    tooltip?: React.ReactNode;
+    shortcut?: string;
+    name?: string;
+};
+export declare function Segmented<T extends string>({ value, onChange, items, size, className, layoutId, iconOnly, collapseInactive, variant, bordered, "aria-label": ariaLabel, }: {
+    "aria-label"?: string;
+    value: T;
+    onChange: (v: T) => void;
+    items: SegmentedItem<T>[];
+    /** Toggle variant: only the selected item shows its label; the others collapse to icon + tooltip. */
+    collapseInactive?: boolean;
+    size?: "sm" | "md";
+    className?: string;
+    layoutId?: string;
+    iconOnly?: boolean;
+    variant?: "tabs" | "toggle";
+    /** tabs only: draw a hairline under the whole tab row */
+    bordered?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroup({ className, ...props }: Omit<ToggleGroupPrimitive.Props, "className"> & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleItem({ className, ...props }: Omit<TogglePrimitive.Props, "className"> & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare const progressTones: {
+    success: string;
+    accent: string;
+    warning: string;
+    danger: string;
+    ink: string;
+    brand: string;
+};
+export declare function Progress({ value, className, tone, size, label, }: {
+    value: number;
+    className?: string;
+    /** accessible name, e.g. "AI credits used" */
+    label?: string;
+    tone?: keyof typeof progressTones;
+    size?: "sm" | "md";
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/controls.js

@@ -0,0 +1,319 @@
+import { cn } from "../lib/cn.js";
+import { useFieldLabelledBy, useLabelFor } from "./field-context.js";
+import { INK_ACTIVE } from "./surfaces.js";
+import { TooltipLayer, TooltipRoot } from "./tooltip-root.js";
+import { TooltipScope } from "./button.js";
+import { useShortcutHints } from "./shortcut-hint.js";
+import * as React from "react";
+import { IconCheck, IconMinus } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Switch } from "@base-ui/react/switch";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { Radio } from "@base-ui/react/radio";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { Slider } from "@base-ui/react/slider";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
+import { Progress } from "@base-ui/react/progress";
+//#region src/kit/ui/controls.tsx
+var PILL_SPRING = {
+	type: "spring",
+	stiffness: 520,
+	damping: 42
+};
+function Switch$1({ className, size = "md", ...props }) {
+	const sm = size === "sm";
+	const labelledBy = useFieldLabelledBy();
+	const labelFor = useLabelFor(props.id);
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		className: cn("group relative inline-flex shrink-0 items-center rounded-full bg-kit-switch-off transition-colors duration-200 data-[checked]:bg-kit-success data-[disabled]:opacity-40", sm ? "h-4 w-7" : "h-5 w-9", className),
+		"aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelFor ?? (props.id ? void 0 : labelledBy)),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cn("pointer-events-none block rounded-full bg-kit-control-thumb shadow-kit-sm transition-transform duration-200 ease-kit-spring", sm ? "size-3 translate-x-0.5 data-[checked]:translate-x-[14px]" : "size-4 translate-x-0.5 data-[checked]:translate-x-[18px]") })
+	});
+}
+/** `checked` keeps V2's tri-state value: true, false or "indeterminate". */
+function Checkbox$1({ className, checked, ...props }) {
+	const indeterminate = checked === "indeterminate";
+	const labelFor = useLabelFor(props.id);
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelFor),
+		className: cn("peer flex size-4 shrink-0 items-center justify-center rounded-kit-sm border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-inverse data-[checked]:bg-kit-inverse data-[indeterminate]:border-kit-inverse data-[indeterminate]:bg-kit-inverse data-[disabled]:opacity-40", className),
+		checked: checked === void 0 ? void 0 : checked === true,
+		indeterminate,
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "text-kit-fg-inverse",
+			children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {
+				className: "size-3",
+				stroke: 3
+			}) : /* @__PURE__ */ jsx(IconCheck, {
+				className: "size-3",
+				stroke: 3
+			})
+		})
+	});
+}
+var RadioGroup$1 = RadioGroup;
+function Radio$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		className: cn("flex size-4 shrink-0 items-center justify-center rounded-full border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-accent data-[disabled]:opacity-40", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "block size-2 rounded-full bg-kit-accent" })
+	});
+}
+/** Large selectable card used for choices (plans, project kinds, roles). */
+function ChoiceCard({ selected, onSelect, icon, title, description, badge, className, children }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onSelect,
+		"aria-pressed": selected,
+		className: cn("group relative flex w-full flex-col gap-1.5 rounded-kit-lg border bg-kit-control-bg px-3 py-2.5 text-left transition-[border-color,box-shadow,background-color] duration-150 focus-visible:outline-offset-[-2px]", selected ? "border-[var(--kit-emphasis-line)] shadow-kit-ring-field" : "border-kit-line hover:border-kit-line-strong hover:shadow-kit-sm", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				icon ? /* @__PURE__ */ jsx("span", {
+					className: cn("mt-0.5 flex shrink-0 items-center justify-center text-kit-fg-2 [&_svg]:size-4", selected && "text-kit-fg"),
+					children: icon
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-kit-sm font-medium text-kit-fg",
+						children: [title, badge]
+					}), description ? /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 text-[13px] leading-[18px] text-kit-fg-2",
+						children: description
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors", selected ? "border-kit-inverse bg-kit-inverse text-kit-fg-inverse" : "border-kit-line-strong"),
+					children: selected ? /* @__PURE__ */ jsx(IconCheck, {
+						className: "size-2.5",
+						stroke: 3.5
+					}) : null
+				})
+			]
+		}), children]
+	});
+}
+/** D15: 2–4 choices → one hairline list of compact rows. Wrap <ChoiceCard>s in it; they lose their own card chrome. */
+function ChoiceList({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		className: cn("flex flex-col divide-y divide-kit-line-subtle overflow-hidden rounded-kit-lg border border-kit-line", "[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none [&>*]:hover:shadow-none [&>*]:hover:bg-kit-hover [&>[aria-pressed=true]]:bg-kit-selected [&>[aria-pressed=true]]:shadow-none", className),
+		...props,
+		children
+	});
+}
+function Slider$1({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, label, ...props }) {
+	const name = ariaLabel ?? label;
+	const v = props.value ?? props.defaultValue ?? [0];
+	const thumbs = Array.isArray(v) ? v.length : 1;
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		className: cn("w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Slider.Control, {
+			className: "relative flex h-5 w-full touch-none select-none items-center",
+			children: [/* @__PURE__ */ jsx(Slider.Track, {
+				className: "relative h-1 w-full grow overflow-hidden rounded-full bg-[var(--kit-track-line)]",
+				children: /* @__PURE__ */ jsx(Slider.Indicator, { className: "absolute h-full bg-kit-fg-2" })
+			}), Array.from({ length: thumbs }, (_, i) => /* @__PURE__ */ jsx(Slider.Thumb, {
+				index: thumbs > 1 ? i : void 0,
+				getAriaLabel: name ? () => name : void 0,
+				"aria-labelledby": name ? void 0 : ariaLabelledby,
+				className: "block size-3 rounded-full border border-kit-line-strong bg-kit-control-thumb shadow-kit-md transition-transform hover:scale-110 has-[:focus-visible]:scale-110 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-kit-focus-ring has-[:focus-visible]:[outline-style:solid]"
+			}, i))]
+		})
+	});
+}
+function SegmentTooltip({ content, shortcut, children }) {
+	const hints = useShortcutHints();
+	return /* @__PURE__ */ jsx(TooltipScope.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			delay: 350,
+			render: children
+		}), /* @__PURE__ */ jsxs(TooltipLayer, {
+			side: "bottom",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+				children: content
+			}), shortcut && hints ? /* @__PURE__ */ jsx("kbd", {
+				"data-hint": "shortcuts",
+				className: cn("mt-px shrink-0 rounded-kit-sm px-1 font-kit-sans text-kit-2xs", INK_ACTIVE),
+				children: shortcut
+			}) : null]
+		})] })
+	});
+}
+function Segmented({ value, onChange, items, size = "md", className, layoutId, iconOnly, collapseInactive, variant, bordered, "aria-label": ariaLabel }) {
+	const id = React.useId();
+	const v = variant ?? "toggle";
+	const reduceMotion = useReducedMotion();
+	const pillTransition = reduceMotion ? { duration: 0 } : PILL_SPRING;
+	const onKey = (e, i) => {
+		const enabled = items.filter((x) => !x.disabled);
+		const idx = enabled.findIndex((x) => x.value === items[i].value);
+		const fwd = e.key === "ArrowRight" || e.key === "ArrowDown";
+		const back = e.key === "ArrowLeft" || e.key === "ArrowUp";
+		const next = fwd ? enabled[(idx + 1) % enabled.length] : back ? enabled[(idx - 1 + enabled.length) % enabled.length] : e.key === "Home" ? enabled[0] : e.key === "End" ? enabled[enabled.length - 1] : null;
+		if (next) {
+			e.preventDefault();
+			onChange(next.value);
+			const group = e.currentTarget.closest("[data-segmented]");
+			requestAnimationFrame(() => group?.querySelector(`[data-seg-value="${CSS.escape(next.value)}"]`)?.focus());
+		}
+	};
+	if (v === "tabs") return /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		"aria-label": ariaLabel,
+		"data-segmented": true,
+		className: cn("inline-flex items-center gap-5", bordered && "border-b border-kit-line", className),
+		children: items.map((it, i) => {
+			const active = it.value === value;
+			return /* @__PURE__ */ jsxs("button", {
+				role: "tab",
+				type: "button",
+				"data-seg-value": it.value,
+				"aria-selected": active,
+				tabIndex: active ? 0 : -1,
+				disabled: it.disabled,
+				onKeyDown: (e) => onKey(e, i),
+				onClick: () => onChange(it.value),
+				className: cn("group relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] transition-colors duration-150 disabled:opacity-40 [&_svg]:size-4", size === "sm" ? "h-7 text-kit-xs [&_svg]:size-3.5" : "h-8 text-kit-sm", active ? "text-kit-fg" : "text-kit-fg-3 hover:text-kit-fg-2"),
+				children: [
+					it.icon,
+					iconOnly ? null : it.label,
+					typeof it.count === "number" ? /* @__PURE__ */ jsx("span", {
+						className: cn("text-kit-xs font-normal tabular-nums", active ? "text-kit-fg-2" : "text-kit-fg-4"),
+						children: it.count
+					}) : null,
+					active ? /* @__PURE__ */ jsx(motion.span, {
+						layoutId: layoutId ?? `tab-${id}`,
+						transition: pillTransition,
+						"data-seg-indicator": "",
+						className: cn("absolute inset-x-0 h-[1.5px] rounded-full bg-kit-fg", bordered ? "-bottom-px" : "bottom-0")
+					}) : null
+				]
+			}, it.value);
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		"data-segmented": true,
+		className: cn("inline-flex items-center gap-[2px] rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]", className),
+		children: items.map((it, i) => {
+			const active = it.value === value;
+			const sm = size === "sm";
+			const hasLabel = !iconOnly && it.label !== "" && it.label != null;
+			const showLabel = hasLabel && (!collapseInactive || active);
+			const btn = /* @__PURE__ */ jsxs("button", {
+				role: "radio",
+				type: "button",
+				"data-seg-value": it.value,
+				"aria-checked": active,
+				"aria-label": iconOnly && typeof it.label === "string" ? it.label : collapseInactive ? it.name : void 0,
+				tabIndex: active ? 0 : -1,
+				disabled: it.disabled,
+				onKeyDown: (e) => onKey(e, i),
+				onClick: () => onChange(it.value),
+				className: cn("relative inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-kit-sm font-medium transition-[color,background-color,padding] duration-150 disabled:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0", sm ? "h-6 text-kit-xs [&_svg]:size-3.5" : "h-7 text-kit-sm", iconOnly || !hasLabel ? sm ? "w-6 px-0" : "w-7 px-0" : collapseInactive ? sm ? active ? "pl-[5px] pr-2" : "px-[5px]" : active ? "pl-1.5 pr-2.5" : "px-1.5" : sm ? "px-2" : "px-2.5", active ? "text-kit-fg" : "text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg"),
+				children: [active ? /* @__PURE__ */ jsx(motion.span, {
+					layoutId: layoutId ?? `seg-${id}`,
+					transition: pillTransition,
+					"data-seg-indicator": "",
+					className: "absolute inset-0 rounded-kit-sm bg-kit-selected"
+				}) : null, /* @__PURE__ */ jsxs("span", {
+					className: cn("relative z-[1] inline-flex items-center", !collapseInactive && "gap-1.5"),
+					children: [
+						it.icon,
+						!hasLabel ? null : collapseInactive ? /* @__PURE__ */ jsx(AnimatePresence, {
+							initial: false,
+							children: showLabel ? /* @__PURE__ */ jsx(motion.span, {
+								initial: {
+									width: 0,
+									opacity: 0
+								},
+								animate: {
+									width: "auto",
+									opacity: 1
+								},
+								exit: {
+									width: 0,
+									opacity: 0
+								},
+								transition: reduceMotion ? { duration: 0 } : {
+									duration: .18,
+									ease: [
+										.2,
+										0,
+										0,
+										1
+									]
+								},
+								className: "inline-flex overflow-hidden",
+								children: /* @__PURE__ */ jsx("span", {
+									className: sm ? "pl-1" : "pl-1.5",
+									children: it.label
+								})
+							}, "label") : null
+						}) : it.label,
+						typeof it.count === "number" ? /* @__PURE__ */ jsx("span", {
+							className: "text-kit-xs font-normal tabular-nums text-kit-fg-3",
+							children: it.count
+						}) : null
+					]
+				})]
+			}, it.value);
+			if (collapseInactive && it.tooltip) return /* @__PURE__ */ jsx(SegmentTooltip, {
+				content: it.tooltip,
+				shortcut: it.shortcut,
+				children: btn
+			}, it.value);
+			return iconOnly && typeof it.label === "string" ? /* @__PURE__ */ jsx(SegmentTooltip, {
+				content: it.label,
+				children: btn
+			}, it.value) : btn;
+		})
+	});
+}
+function ToggleGroup$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		className: cn("inline-flex items-center gap-px rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]", className),
+		...props
+	});
+}
+function ToggleItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle, {
+		className: cn("inline-flex h-6 min-w-6 items-center justify-center gap-1 rounded-kit-sm px-1.5 text-kit-xs font-medium text-kit-fg-3 transition-colors hover:bg-kit-hover hover:text-kit-fg data-[pressed]:bg-kit-selected data-[pressed]:text-kit-fg [&_svg]:size-3.5", className),
+		...props
+	});
+}
+var progressTones = {
+	success: "bg-kit-success",
+	accent: "bg-kit-accent",
+	warning: "bg-kit-warning",
+	danger: "bg-kit-danger",
+	ink: "bg-[var(--kit-bar-fill)]",
+	brand: "bg-[var(--kit-bar-fill)]"
+};
+function Progress$1({ value, className, tone = "success", size = "md", label = "Progress" }) {
+	const pct = Math.min(100, Math.max(0, value));
+	return /* @__PURE__ */ jsx(Progress.Root, {
+		value: pct,
+		"aria-label": label,
+		className: cn("relative w-full overflow-hidden rounded-full bg-[var(--kit-track)]", size === "sm" ? "h-1" : "h-1.5", className),
+		children: /* @__PURE__ */ jsx(Progress.Indicator, {
+			className: cn("block h-full rounded-full transition-[width] duration-500 ease-kit-out-soft", progressTones[tone]),
+			style: { width: `${pct}%` }
+		})
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox, ChoiceCard, ChoiceList, Progress$1 as Progress, Radio$1 as Radio, RadioGroup$1 as RadioGroup, Segmented, Slider$1 as Slider, Switch$1 as Switch, ToggleGroup$1 as ToggleGroup, ToggleItem };
+
+//# sourceMappingURL=controls.js.map

package/ui/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":[],"sources":["../../src/kit/ui/controls.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { IconCheck, IconMinus } from \"@tabler/icons-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../lib/cn\";\nimport { useFieldLabelledBy, useLabelFor } from \"./field-context\";\nimport { TooltipScope } from \"./button\";\nimport { useShortcutHints } from \"./shortcut-hint\";\nimport { TooltipLayer, TooltipRoot } from \"./tooltip-root\";\nimport { INK_ACTIVE } from \"./surfaces\";\n\n/* Underlines and selected pills share one spring (DESIGN.md 3.6). */\nconst PILL_SPRING = { type: \"spring\", stiffness: 520, damping: 42 } as const;\n\n/* ── Switch ─────────────────────────────────────────────────────────────── */\nexport function Switch({\n  className,\n  size = \"md\",\n  ...props\n}: SwitchPrimitive.Root.Props & { size?: \"sm\" | \"md\" }) {\n  const sm = size === \"sm\";\n  const labelledBy = useFieldLabelledBy();\n  const labelFor = useLabelFor(props.id);\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        \"group relative inline-flex shrink-0 items-center rounded-full bg-kit-switch-off transition-colors duration-200 data-[checked]:bg-kit-success data-[disabled]:opacity-40\",\n        sm ? \"h-4 w-7\" : \"h-5 w-9\",\n        className,\n      )}\n      aria-labelledby={props[\"aria-labelledby\"] ?? (props[\"aria-label\"] ? undefined : (labelFor ?? (props.id ? undefined : labelledBy)))}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-kit-control-thumb shadow-kit-sm transition-transform duration-200 ease-kit-spring\",\n          sm ? \"size-3 translate-x-0.5 data-[checked]:translate-x-[14px]\" : \"size-4 translate-x-0.5 data-[checked]:translate-x-[18px]\",\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\n/* ── Checkbox ───────────────────────────────────────────────────────────── */\n/** `checked` keeps V2's tri-state value: true, false or \"indeterminate\". */\nexport function Checkbox({\n  className,\n  checked,\n  ...props\n}: Omit<CheckboxPrimitive.Root.Props, \"checked\" | \"indeterminate\"> & { checked?: boolean | \"indeterminate\" }) {\n  const indeterminate = checked === \"indeterminate\";\n  const labelFor = useLabelFor(props.id);\n  return (\n    <CheckboxPrimitive.Root\n      aria-labelledby={props[\"aria-labelledby\"] ?? (props[\"aria-label\"] ? undefined : labelFor)}\n      className={cn(\n        \"peer flex size-4 shrink-0 items-center justify-center rounded-kit-sm border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-inverse data-[checked]:bg-kit-inverse data-[indeterminate]:border-kit-inverse data-[indeterminate]:bg-kit-inverse data-[disabled]:opacity-40\",\n        className,\n      )}\n      checked={checked === undefined ? undefined : checked === true}\n      indeterminate={indeterminate}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"text-kit-fg-inverse\">\n        {indeterminate ? <IconMinus className=\"size-3\" stroke={3} /> : <IconCheck className=\"size-3\" stroke={3} />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\n/* ── Radio ──────────────────────────────────────────────────────────────── */\nexport const RadioGroup = RadioGroupPrimitive;\nexport function Radio({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"flex size-4 shrink-0 items-center justify-center rounded-full border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-accent data-[disabled]:opacity-40\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"block size-2 rounded-full bg-kit-accent\" />\n    </RadioPrimitive.Root>\n  );\n}\n\n/** Large selectable card used for choices (plans, project kinds, roles). */\nexport function ChoiceCard({\n  selected,\n  onSelect,\n  icon,\n  title,\n  description,\n  badge,\n  className,\n  children,\n}: {\n  selected: boolean;\n  onSelect: () => void;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  badge?: React.ReactNode;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onSelect}\n      aria-pressed={selected}\n      className={cn(\n        \"group relative flex w-full flex-col gap-1.5 rounded-kit-lg border bg-kit-control-bg px-3 py-2.5 text-left transition-[border-color,box-shadow,background-color] duration-150 focus-visible:outline-offset-[-2px]\", // inset: option cards often sit in a clipped, gapless list\n        selected\n          ? \"border-[var(--kit-emphasis-line)] shadow-kit-ring-field\"\n          : \"border-kit-line hover:border-kit-line-strong hover:shadow-kit-sm\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        {icon ? (\n          <span className={cn(\"mt-0.5 flex shrink-0 items-center justify-center text-kit-fg-2 [&_svg]:size-4\", selected && \"text-kit-fg\")}>\n            {icon}\n          </span>\n        ) : null}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2 text-kit-sm font-medium text-kit-fg\">\n            {title}\n            {badge}\n          </div>\n          {description ? <p className=\"mt-0.5 text-[13px] leading-[18px] text-kit-fg-2\">{description}</p> : null}\n        </div>\n        <span\n          className={cn(\n            \"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors\",\n            selected ? \"border-kit-inverse bg-kit-inverse text-kit-fg-inverse\" : \"border-kit-line-strong\",\n          )}\n        >\n          {selected ? <IconCheck className=\"size-2.5\" stroke={3.5} /> : null}\n        </span>\n      </div>\n      {children}\n    </button>\n  );\n}\n\n/** D15: 2–4 choices → one hairline list of compact rows. Wrap <ChoiceCard>s in it; they lose their own card chrome. */\nexport function ChoiceList({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      role=\"group\"\n      className={cn(\n        \"flex flex-col divide-y divide-kit-line-subtle overflow-hidden rounded-kit-lg border border-kit-line\",\n        \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none [&>*]:hover:shadow-none [&>*]:hover:bg-kit-hover [&>[aria-pressed=true]]:bg-kit-selected [&>[aria-pressed=true]]:shadow-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* ── Slider ─────────────────────────────────────────────────────────────── */\nexport function Slider({\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  label,\n  ...props\n}: Omit<SliderPrimitive.Root.Props<number | readonly number[]>, \"className\"> & {\n  className?: string;\n  /** accessible name for the thumb(s) */\n  label?: string;\n}) {\n  const name = ariaLabel ?? label;\n  const v = props.value ?? props.defaultValue ?? [0];\n  const thumbs = Array.isArray(v) ? v.length : 1;\n  return (\n    <SliderPrimitive.Root className={cn(\"w-full\", className)} {...props}>\n      <SliderPrimitive.Control className=\"relative flex h-5 w-full touch-none select-none items-center\">\n        {/* Figma §4.3 slider: 4px track, --fg-2 fill, 12px light thumb with a border (control-thumb lifts off the dark track) */}\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-full bg-[var(--kit-track-line)]\">\n          <SliderPrimitive.Indicator className=\"absolute h-full bg-kit-fg-2\" />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbs }, (_, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            index={thumbs > 1 ? i : undefined}\n            getAriaLabel={name ? () => name : undefined}\n            aria-labelledby={name ? undefined : ariaLabelledby}\n            className=\"block size-3 rounded-full border border-kit-line-strong bg-kit-control-thumb shadow-kit-md transition-transform hover:scale-110 has-[:focus-visible]:scale-110 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-kit-focus-ring has-[:focus-visible]:[outline-style:solid]\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\n/* V2's overlay <Tooltip> (side bottom, 350ms) for collapsed and icon-only segments, built on the shared ink layer. */\nfunction SegmentTooltip({ content, shortcut, children }: { content: React.ReactNode; shortcut?: string; children: React.ReactElement }) {\n  const hints = useShortcutHints();\n  return (\n    <TooltipScope.Provider value>\n      <TooltipRoot>\n        <TooltipPrimitive.Trigger delay={350} render={children} />\n        <TooltipLayer side=\"bottom\">\n          <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n          {shortcut && hints ? (\n            <kbd data-hint=\"shortcuts\" className={cn(\"mt-px shrink-0 rounded-kit-sm px-1 font-kit-sans text-kit-2xs\", INK_ACTIVE)}>\n              {shortcut}\n            </kbd>\n          ) : null}\n        </TooltipLayer>\n      </TooltipRoot>\n    </TooltipScope.Provider>\n  );\n}\n\n/* ── Segmented ───────────────────────────────────────────────────────────\n   Two deliberate looks (founder: no \"AI-sloppy\" grey pills with counts inside):\n   • variant=\"tabs\"   (opt-in) — quiet text tabs, muted tabular count, 1.5px animated underline.\n                      Use for filters, view sections, panel tabs.\n   • variant=\"toggle\" (default) — slim hairline-bordered control, subtle selected fill, no shadow.\n                      Use for binary/ternary switches: list|grid, light|dark, desktop|tablet|mobile.\n   Pass `count` on items instead of baking numbers into labels.                                            */\nexport type SegmentedItem<T extends string> = {\n  value: T;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  count?: number;\n  tooltip?: React.ReactNode;\n  shortcut?: string;\n  name?: string;\n};\n\nexport function Segmented<T extends string>({\n  value,\n  onChange,\n  items,\n  size = \"md\",\n  className,\n  layoutId,\n  iconOnly,\n  collapseInactive,\n  variant,\n  bordered,\n  \"aria-label\": ariaLabel,\n}: {\n  \"aria-label\"?: string;\n  value: T;\n  onChange: (v: T) => void;\n  items: SegmentedItem<T>[];\n  /** Toggle variant: only the selected item shows its label; the others collapse to icon + tooltip. */\n  collapseInactive?: boolean;\n  size?: \"sm\" | \"md\";\n  className?: string;\n  layoutId?: string;\n  iconOnly?: boolean;\n  variant?: \"tabs\" | \"toggle\";\n  /** tabs only: draw a hairline under the whole tab row */\n  bordered?: boolean;\n}) {\n  const id = React.useId();\n  const v = variant ?? \"toggle\";\n  const reduceMotion = useReducedMotion();\n  const pillTransition = reduceMotion ? { duration: 0 } : PILL_SPRING;\n  const onKey = (e: React.KeyboardEvent, i: number) => {\n    const enabled = items.filter((x) => !x.disabled);\n    const idx = enabled.findIndex((x) => x.value === items[i].value);\n    const fwd = e.key === \"ArrowRight\" || e.key === \"ArrowDown\";\n    const back = e.key === \"ArrowLeft\" || e.key === \"ArrowUp\";\n    const next = fwd\n      ? enabled[(idx + 1) % enabled.length]\n      : back\n        ? enabled[(idx - 1 + enabled.length) % enabled.length]\n        : e.key === \"Home\"\n          ? enabled[0]\n          : e.key === \"End\"\n            ? enabled[enabled.length - 1]\n            : null;\n    if (next) {\n      e.preventDefault();\n      onChange(next.value);\n      // roving tabindex: keep keyboard focus on the newly selected item\n      const group = (e.currentTarget as HTMLElement).closest(\"[data-segmented]\");\n      requestAnimationFrame(() => group?.querySelector<HTMLElement>(`[data-seg-value=\"${CSS.escape(next.value)}\"]`)?.focus());\n    }\n  };\n\n  if (v === \"tabs\") {\n    return (\n      <div role=\"tablist\" aria-label={ariaLabel} data-segmented className={cn(\"inline-flex items-center gap-5\", bordered && \"border-b border-kit-line\", className)}>\n        {items.map((it, i) => {\n          const active = it.value === value;\n          return (\n            <button\n              key={it.value}\n              role=\"tab\"\n              type=\"button\"\n              data-seg-value={it.value}\n              aria-selected={active}\n              tabIndex={active ? 0 : -1}\n              disabled={it.disabled}\n              onKeyDown={(e) => onKey(e, i)}\n              onClick={() => onChange(it.value)}\n              className={cn(\n                \"group relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] transition-colors duration-150 disabled:opacity-40 [&_svg]:size-4\",\n                size === \"sm\" ? \"h-7 text-kit-xs [&_svg]:size-3.5\" : \"h-8 text-kit-sm\",\n                active ? \"text-kit-fg\" : \"text-kit-fg-3 hover:text-kit-fg-2\",\n              )}\n            >\n              {it.icon}\n              {iconOnly ? null : it.label}\n              {typeof it.count === \"number\" ? (\n                <span className={cn(\"text-kit-xs font-normal tabular-nums\", active ? \"text-kit-fg-2\" : \"text-kit-fg-4\")}>{it.count}</span>\n              ) : null}\n              {active ? (\n                <motion.span\n                  layoutId={layoutId ?? `tab-${id}`}\n                  transition={pillTransition}\n                  data-seg-indicator=\"\"\n                  className={cn(\"absolute inset-x-0 h-[1.5px] rounded-full bg-kit-fg\", bordered ? \"-bottom-px\" : \"bottom-0\")}\n                />\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    /* Toggle metrics (D29, founder): container 1px border + 2px padding, 2px between items, pill radius = container (6) − 2.\n       md items are 28px tall and icon-only items exactly 28×28; sm items 24px. Collapsing items keep the icon at the same\n       inset in both states (6px md / 5px sm) — only the label wrapper animates its width, with the icon→label gap inside it. */\n    <div role=\"radiogroup\" aria-label={ariaLabel} data-segmented className={cn(\"inline-flex items-center gap-[2px] rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]\", className)}>\n      {items.map((it, i) => {\n        const active = it.value === value;\n        const sm = size === \"sm\";\n        const hasLabel = !iconOnly && it.label !== \"\" && it.label != null;\n        const showLabel = hasLabel && (!collapseInactive || active);\n        const btn = (\n          <button\n            key={it.value}\n            role=\"radio\"\n            type=\"button\"\n            data-seg-value={it.value}\n            aria-checked={active}\n            aria-label={iconOnly && typeof it.label === \"string\" ? it.label : collapseInactive ? it.name : undefined}\n            tabIndex={active ? 0 : -1}\n            disabled={it.disabled}\n            onKeyDown={(e) => onKey(e, i)}\n            onClick={() => onChange(it.value)}\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-kit-sm font-medium transition-[color,background-color,padding] duration-150 disabled:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0\",\n              sm ? \"h-6 text-kit-xs [&_svg]:size-3.5\" : \"h-7 text-kit-sm\",\n              iconOnly || !hasLabel\n                ? sm ? \"w-6 px-0\" : \"w-7 px-0\"\n                : collapseInactive\n                  ? sm ? (active ? \"pl-[5px] pr-2\" : \"px-[5px]\") : active ? \"pl-1.5 pr-2.5\" : \"px-1.5\"\n                  : sm ? \"px-2\" : \"px-2.5\",\n              active ? \"text-kit-fg\" : \"text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\",\n            )}\n          >\n            {active ? (\n              <motion.span\n                layoutId={layoutId ?? `seg-${id}`}\n                transition={pillTransition}\n                data-seg-indicator=\"\"\n                className=\"absolute inset-0 rounded-kit-sm bg-kit-selected\"\n              />\n            ) : null}\n            <span className={cn(\"relative z-[1] inline-flex items-center\", !collapseInactive && \"gap-1.5\")}>\n              {it.icon}\n              {!hasLabel ? null : collapseInactive ? (\n                <AnimatePresence initial={false}>\n                  {showLabel ? (\n                    <motion.span\n                      key=\"label\"\n                      initial={{ width: 0, opacity: 0 }}\n                      animate={{ width: \"auto\", opacity: 1 }}\n                      exit={{ width: 0, opacity: 0 }}\n                      transition={reduceMotion ? { duration: 0 } : { duration: 0.18, ease: [0.2, 0, 0, 1] }}\n                      className=\"inline-flex overflow-hidden\"\n                    >\n                      <span className={sm ? \"pl-1\" : \"pl-1.5\"}>{it.label}</span>\n                    </motion.span>\n                  ) : null}\n                </AnimatePresence>\n              ) : (\n                it.label\n              )}\n              {typeof it.count === \"number\" ? <span className=\"text-kit-xs font-normal tabular-nums text-kit-fg-3\">{it.count}</span> : null}\n            </span>\n          </button>\n        );\n        if (collapseInactive && it.tooltip)\n          return (\n            <SegmentTooltip key={it.value} content={it.tooltip} shortcut={it.shortcut}>\n              {btn}\n            </SegmentTooltip>\n          );\n        return iconOnly && typeof it.label === \"string\" ? (\n          <SegmentTooltip key={it.value} content={it.label}>\n            {btn}\n          </SegmentTooltip>\n        ) : (\n          btn\n        );\n      })}\n    </div>\n  );\n}\n\n/* ── Toggle group (toolbar style) ─────────────────────────────────────── */\nexport function ToggleGroup({ className, ...props }: Omit<ToggleGroupPrimitive.Props, \"className\"> & { className?: string }) {\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\"inline-flex items-center gap-px rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]\", className)}\n      {...props}\n    />\n  );\n}\nexport function ToggleItem({ className, ...props }: Omit<TogglePrimitive.Props, \"className\"> & { className?: string }) {\n  return (\n    <TogglePrimitive\n      className={cn(\n        \"inline-flex h-6 min-w-6 items-center justify-center gap-1 rounded-kit-sm px-1.5 text-kit-xs font-medium text-kit-fg-3 transition-colors hover:bg-kit-hover hover:text-kit-fg data-[pressed]:bg-kit-selected data-[pressed]:text-kit-fg [&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Progress ──────────────────────────────────────────────────────────── */\nconst progressTones = {\n  success: \"bg-kit-success\",\n  accent: \"bg-kit-accent\",\n  warning: \"bg-kit-warning\",\n  danger: \"bg-kit-danger\",\n  // --bar-fill: ink in light, a quiet grey in dark (no near-white glare on a dark track)\n  ink: \"bg-[var(--kit-bar-fill)]\",\n  brand: \"bg-[var(--kit-bar-fill)]\",\n};\nexport function Progress({\n  value,\n  className,\n  tone = \"success\",\n  size = \"md\",\n  label = \"Progress\",\n}: {\n  value: number;\n  className?: string;\n  /** accessible name, e.g. \"AI credits used\" */\n  label?: string;\n  tone?: keyof typeof progressTones;\n  size?: \"sm\" | \"md\";\n}) {\n  const pct = Math.min(100, Math.max(0, value));\n  return (\n    <ProgressPrimitive.Root\n      value={pct}\n      aria-label={label}\n      className={cn(\n        \"relative w-full overflow-hidden rounded-full bg-[var(--kit-track)]\",\n        size === \"sm\" ? \"h-1\" : \"h-1.5\",\n        className,\n      )}\n    >\n      <ProgressPrimitive.Indicator\n        className={cn(\"block h-full rounded-full transition-[width] duration-500 ease-kit-out-soft\", progressTones[tone])}\n        style={{ width: `${pct}%` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/ui/display.d.ts

@@ -0,0 +1,156 @@
+import * as React from "react";
+declare const badgeTones: {
+    neutral: string;
+    outline: string;
+    accent: string;
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    ink: string;
+};
+declare const badgeSizes: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export type BadgeTone = keyof typeof badgeTones;
+export type BadgeSize = keyof typeof badgeSizes;
+export declare function badgeVariants({ tone, size }?: {
+    tone?: BadgeTone | null;
+    size?: BadgeSize | null;
+}): string;
+export declare function Badge({ className, tone, size, dot, children, ...props }: React.HTMLAttributes<HTMLSpanElement> & {
+    tone?: BadgeTone | null;
+    size?: BadgeSize | null;
+    dot?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export type PublishStatus = "published" | "draft" | "changed" | "held" | "scheduled" | "review" | "archived" | "error" | "building" | "live" | "offline";
+export declare const statusMap: Record<PublishStatus, {
+    label: string;
+    tone: BadgeTone;
+}>;
+export declare function StatusPill({ status, label, className, size, }: {
+    status: PublishStatus;
+    label?: string;
+    className?: string;
+    size?: BadgeSize;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+/** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */
+export declare function colorFor(seed: string): string;
+export declare function initials(name: string): string;
+/** How far an Avatar's box-shadow ring reaches past the face (0 without a ring). The Avatar pads itself by this. */
+export declare function avatarRingSpread({ ring, ringWidth, ringAccent }: {
+    ring?: string;
+    ringWidth?: number;
+    ringAccent?: string;
+}): number;
+export declare function Avatar({ name, src, size, className, ring, ringWidth, ringAccent, square, status, decorative, }: {
+    name: string;
+    /** a11y: true when the person's name is already shown as text next to the avatar */
+    decorative?: boolean;
+    src?: string;
+    size?: number;
+    className?: string;
+    /** separating ring colour, drawn as box-shadow so the image keeps its full size (D34) */
+    ring?: string;
+    ringWidth?: number;
+    /** optional 1px outer ring outside `ring` (e.g. a presence colour) */
+    ringAccent?: string;
+    square?: boolean;
+    status?: "online" | "away" | "offline";
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack
+ * sits on; first face on top; a +N pill names the rest on hover.
+ */
+export declare function AvatarStack({ people, max, size, ringColor, className, label, }: {
+    people: {
+        name: string;
+        src?: string;
+        color?: string;
+    }[];
+    max?: number;
+    size?: number;
+    ringColor?: string;
+    className?: string;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ className, interactive, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    interactive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeader({ title, description, actions, icon, className, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Separator({ vertical, className }: {
+    vertical?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** V2 .skeleton: a --skeleton → --skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
+export declare const SKELETON = "bg-[linear-gradient(90deg,var(--kit-skeleton)_0,var(--kit-skeleton-shine)_40%,var(--kit-skeleton)_80%)] bg-[length:800px_100%] animate-[kit-shimmer_1.6s_linear_infinite] motion-reduce:animate-none";
+export declare function Skeleton({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ icon, title, description, actions, className, compact, }: {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+    compact?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageHeader({ title, description, actions, meta, className, eyebrow, as: Heading, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    meta?: React.ReactNode;
+    className?: string;
+    eyebrow?: React.ReactNode;
+    /** Heading level: h1 in the app; demos nested in documentation pass a lower level. */
+    as?: "h1" | "h2" | "h3" | "h4";
+}): import("react/jsx-runtime").JSX.Element;
+/** Section header used inside settings and long pages: title INSIDE the card (founder rule). */
+export declare function SettingsSection({ title, description, children, footer, className, danger, actions, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    danger?: boolean;
+    actions?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Stat({ label, value, delta, hint, className, }: {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    delta?: {
+        value: string;
+        positive?: boolean;
+    };
+    hint?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Th({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Td({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Tr({ className, selected, ...props }: React.HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const dotTones: {
+    success: string;
+    warning: string;
+    danger: string;
+    neutral: string;
+    accent: string;
+    info: string;
+};
+export declare function Dot({ tone, pulse, className }: {
+    tone?: keyof typeof dotTones;
+    pulse?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};