@devalok/shilp-sutra 0.57.0 → 0.60.0

package/MIGRATION.md

@@ -4,6 +4,169 @@ This page indexes all breaking changes across `@devalok/shilp-sutra` versions. F
 
 > **Upgrading from < 0.36?** Start here, then read each intermediate version section. Breaking changes stack — skipping versions means stacking migrations.
 
+## v0.60.0 — no code changes needed, but several controls look different
+
+**Nothing breaks at the TypeScript level.** No prop removed, no type narrowed,
+no export dropped. You do not have to change any code to take this release.
+
+It is not "additive" either, and the distinction matters if you keep visual
+snapshots: several controls change appearance, and one screen-reader
+announcement changes. Everything below happens on upgrade, with no opt-out.
+
+### Form controls take a distinct ground
+
+Inputs, Textareas, Selects and Comboboxes now sit on their own `--color-field`
+token rather than a surface value — `neutral-1` in light, `neutral-2` in dark.
+Hover moves with them. Validation edges move from colour step 7 to step 8, which
+takes them **over** the WCAG 1.4.11 3:1 bar for the first time (error
+2.75 → 3.82:1, success 2.49 → 3.36:1).
+
+If you override field backgrounds, check them against the new token.
+
+### Switch loses its resting stroke
+
+An unchecked Switch is now carried by its fill alone. Validation states still
+paint the border — the 2px is reserved and transparent, so the thumb does not
+move when a field errors.
+
+If you relied on the resting outline to find an off switch on a busy surface,
+it is now 1.639:1 against the panel rather than 2.006:1. Recorded as
+`SWITCH-RESTING-STROKE-REMOVED` in `docs/deviations.md`.
+
+### Avatar role rings are fainter
+
+Step 7 → 6 on `lead`, `admin` and `client`. Measured on white the lead ring goes
+2.865 → 2.095:1. **The ring is the only thing conveying role** — no label, no
+icon, no tooltip — so if role matters in your UI, add a text affordance. This is
+a known, accepted shortfall (`AVATAR-ROLE-RING-STEP-6`), not an oversight.
+
+### Disabled elements are slightly more legible
+
+`--action-disabled-opacity` 38% → 45%, globally. Every `opacity-action-disabled`
+consumer moves. This improves every case measured; the worst
+(`surface-fg-subtle`) goes 1.673 → 1.859:1.
+
+### DataTable's bulk-action bar changed announcement and emphasis
+
+It now uses the shared `BulkActionBar` internally. `bulkActions`,
+`bulkActionsPosition` and `onClick(selectedRows)` are unchanged — nothing to
+migrate — but:
+
+- the toolbar's accessible name is the stable `"Bulk actions"` rather than
+  `"N items selected"`, which was re-announced on every selection change;
+- non-destructive actions render `ghost` rather than `outline`; destructive
+  (`color: 'error'`) actions stay `solid`;
+- it gains roving focus (Arrow / Home / End), inline confirmation via
+  `requiresConfirmation`, per-action `loading`, and reduced-motion support —
+  props `BulkAction` already declared and the previous implementation ignored.
+
+`BulkActionBar`'s implementation moved from `composed/bulk-action-bar` to
+`ui/bulk-action-bar`. **The old import path still works**; a new one is also
+available.
+
+### Shadows
+
+Light shadows are 1/255 lighter — invisible, done to match the Figma library
+exactly. Dark shadows changed more: they now render as shadows rather than
+faint glows on the page background, and the pressed ring is visible in dark for
+the first time (it measured 1.012:1, i.e. nothing).
+
+### If you keep visual snapshots
+
+Expect diffs on: any form control, Switch, Avatar with a role ring, anything
+disabled, DataTable with bulk actions, and anything elevated in dark mode.
+
+## v0.59.0 — additive (no migration required)
+
+Nothing breaks at the TypeScript level; this release is additive.
+
+> Auto-stubbed by `version-packages` so the release audit's MIGRATION-section gate can't block. If any behavioral or visual change needs consumer action, replace this stub with the specifics on the Version Packages PR before publishing.
+
+## v0.58.0 — nothing errors, several things look different
+
+No API is removed and no prop type narrows, so `tsc` and your build stay green
+on upgrade day. The reason this section exists anyway is that a number of
+components **change appearance**, and two of them start rendering something that
+previously rendered nothing at all. If you screenshot-test, expect diffs.
+
+### Two features that were silently no-ops now work
+
+Both were painted in a colour identical to their own background in light mode,
+so they emitted markup and showed nothing:
+
+| | before | after |
+|---|---|---|
+| `<Table striped>` | 1.00:1 — no stripes rendered at all | visible zebra |
+| `<Progress>` groove | 1.00:1 — no track behind the bar | visible track |
+
+If you worked around either of these — a local `nth-child` stripe rule, a
+wrapper drawing a track behind Progress — remove the workaround, or you will now
+have two.
+
+### Selected rows are more prominent, and correctly so
+
+Selection fills moved from accent step 2 to step 4. In dark, steps 1–2 sit
+*below* the panel in lightness while the grey hover sits above it, so a selected
+row receded exactly as a hovered row advanced: the sidebar measured 1.03:1
+selected against 1.30:1 hovered. The wrong row was louder, in the opposite
+direction.
+
+Affects Sidebar, MasterDetail, MultiSelectPopover, NotificationCenter, Combobox,
+Autocomplete, Table, BottomNavbar, ScheduleView, TreeView and Toggle. Nothing to
+do unless you override those fills yourself, in which case re-check them against
+your hover state.
+
+### `border-card-strong` is now actually stronger than `border-card`
+
+They resolved to the same value. Both pointed at `--color-surface-border`, so
+roughly thirteen call sites asking for the heavier edge silently got the faint
+one. `border-card-strong` now resolves to `--color-surface-border-strong`:
+
+| | light | dark |
+|---|---|---|
+| before | 1.22:1 | 1.33:1 |
+| after | 1.38:1 | 1.63:1 |
+
+If you picked `border-card-strong` *because* it looked identical to
+`border-card`, switch those to `border-card`.
+
+### The Sidebar's divider was a full-contrast line, and is now a hairline
+
+`Sidebar` had a `border-r` with no colour utility. Tailwind 4 leaves an
+uncoloured border at `currentColor` rather than defaulting it to grey, so it
+inherited the text colour and drew at **12.69:1 in light and 15.44:1 in dark**
+where `surface-border` (1.23:1 / 1.47:1) was intended.
+
+This is the one place an upgrade might *remove* something you had come to rely
+on. If you overrode the sidebar edge downstream to tame it, drop the override.
+
+### Raised surfaces gain an edge in dark
+
+`--shadow-edge-ring` is deliberately swapped to a light ring under `.dark`,
+because a dark ring cannot be seen on a dark ground. Only the larger shadows
+consumed it, so `shadow-raised` and `shadow-raised-hover` kept a near-black ring
+measuring 1.01:1 — no edge at all. `Sidebar variant="floating"`, `Card
+variant="elevated"`, `Menubar` and the keyboard caps had no visible boundary in
+dark. They now measure 1.21:1, still quieter than a floating overlay's 1.42:1.
+
+### Colour is a role now, not a variant
+
+The palette layer landed in the same release. Twelve components stopped encoding
+colour as a cross-product of variants and now resolve it through
+`[data-palette]`. Existing `color="…"` values all still type-check — the union
+widened rather than narrowed — and the visual result is unchanged for the six
+built-in palettes. The gain is that a colour we do not ship can now be
+registered in CSS.
+
+### Also in this release
+
+Segmented control and Tabs: the selected pill was *darker* than the groove it
+sat in, in dark (1.028:1, inverted). Read-only Input and Textarea, DataTable
+pinned columns and expanded rows, code blocks in RichTextEditor, ContentCard's
+default variant and AI message bubbles all stopped painting themselves in their
+own background colour. Full measurements in
+`docs/audits/2026-08-28-surface-model-audit.md`.
+
 ## v0.57.0 — one token removed, one renamed, and a colour change you will see
 
 The surface model was rebuilt. Almost all of it is aliased, so `tsc` and your

package/dist/_chunks/badge-group.js

@@ -1,142 +1,28 @@
 "use client";
 import { Slot as e } from "./primitives-internal.js";
 import { durations as t, springs as n } from "../ui/lib/motion.js";
-import { cn as r } from "../ui/lib/utils.js";
-import { Icon as i } from "../ui/icon.js";
-import { Dot as a } from "../ui/dot.js";
-import { normalizeIcon as o } from "./normalize-icon.js";
-import { BadgeIndicator as s } from "../ui/badge-indicator.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { IconCheck as d, IconX as f } from "@tabler/icons-react";
-import { AnimatePresence as p, motion as m } from "framer-motion";
-import { cva as h } from "class-variance-authority";
+import { MotionPreference as r } from "./motion-preference.js";
+import { cn as i } from "../ui/lib/utils.js";
+import { Icon as a } from "../ui/icon.js";
+import { Dot as o } from "../ui/dot.js";
+import { normalizeIcon as s } from "./normalize-icon.js";
+import { BadgeIndicator as c } from "../ui/badge-indicator.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { IconCheck as f, IconX as p } from "@tabler/icons-react";
+import { AnimatePresence as m, motion as h } from "framer-motion";
+import { cva as g } from "class-variance-authority";
 //#region src/ui/badge.tsx
-var g = {
-	default: {
-		bg: "bg-surface-panel-hover",
-		softBg: "bg-surface-panel-hover",
-		fg: "text-surface-fg-muted",
-		border: "border-surface-border-strong",
-		solid: "bg-neutral-5",
-		solidFg: "text-surface-fg"
-	},
-	accent: {
-		bg: "bg-accent-2",
-		softBg: "bg-accent-3",
-		fg: "text-accent-11",
-		border: "border-accent-4",
-		solid: "bg-accent-9",
-		solidFg: "text-accent-fg"
-	},
-	error: {
-		bg: "bg-error-2",
-		softBg: "bg-error-3",
-		fg: "text-error-11",
-		border: "border-error-4",
-		solid: "bg-error-9",
-		solidFg: "text-error-fg"
-	},
-	success: {
-		bg: "bg-success-2",
-		softBg: "bg-success-3",
-		fg: "text-success-11",
-		border: "border-success-4",
-		solid: "bg-success-9",
-		solidFg: "text-success-fg"
-	},
-	warning: {
-		bg: "bg-warning-2",
-		softBg: "bg-warning-3",
-		fg: "text-warning-11",
-		border: "border-warning-4",
-		solid: "bg-warning-9",
-		solidFg: "text-warning-fg"
-	},
-	info: {
-		bg: "bg-info-2",
-		softBg: "bg-info-3",
-		fg: "text-info-11",
-		border: "border-info-4",
-		solid: "bg-info-9",
-		solidFg: "text-info-fg"
-	},
-	neutral: {
-		bg: "bg-surface-panel-hover",
-		softBg: "bg-surface-panel-hover",
-		fg: "text-surface-fg-muted",
-		border: "border-surface-border-strong",
-		solid: "bg-neutral-5",
-		solidFg: "text-surface-fg"
-	},
-	teal: {
-		bg: "bg-category-teal-2",
-		softBg: "bg-category-teal-3",
-		fg: "text-category-teal-11",
-		border: "border-category-teal-4",
-		solid: "bg-category-teal-9",
-		solidFg: "text-category-fg"
-	},
-	amber: {
-		bg: "bg-category-amber-2",
-		softBg: "bg-category-amber-3",
-		fg: "text-category-amber-11",
-		border: "border-category-amber-4",
-		solid: "bg-category-amber-9",
-		solidFg: "text-category-fg"
-	},
-	slate: {
-		bg: "bg-category-slate-2",
-		softBg: "bg-category-slate-3",
-		fg: "text-category-slate-11",
-		border: "border-category-slate-4",
-		solid: "bg-category-slate-9",
-		solidFg: "text-category-fg"
-	},
-	indigo: {
-		bg: "bg-category-indigo-2",
-		softBg: "bg-category-indigo-3",
-		fg: "text-category-indigo-11",
-		border: "border-category-indigo-4",
-		solid: "bg-category-indigo-9",
-		solidFg: "text-category-fg"
-	},
-	cyan: {
-		bg: "bg-category-cyan-2",
-		softBg: "bg-category-cyan-3",
-		fg: "text-category-cyan-11",
-		border: "border-category-cyan-4",
-		solid: "bg-category-cyan-9",
-		solidFg: "text-category-fg"
-	},
-	orange: {
-		bg: "bg-category-orange-2",
-		softBg: "bg-category-orange-3",
-		fg: "text-category-orange-11",
-		border: "border-category-orange-4",
-		solid: "bg-category-orange-9",
-		solidFg: "text-category-fg"
-	},
-	emerald: {
-		bg: "bg-category-emerald-2",
-		softBg: "bg-category-emerald-3",
-		fg: "text-category-emerald-11",
-		border: "border-category-emerald-4",
-		solid: "bg-category-emerald-9",
-		solidFg: "text-category-fg"
-	}
-};
 function _(e, t) {
 	if (t === "custom") return "";
-	let n = g[t];
 	switch (e) {
-		case "subtle": return r(n.bg, n.fg, n.border);
-		case "solid": return r(n.solid, n.solidFg, "border-transparent");
-		case "outline": return r("bg-transparent", n.fg, n.border);
-		case "soft": return r(n.softBg, n.fg, "border-transparent");
+		case "subtle": return "bg-palette-subtle text-palette-text border-palette-border";
+		case "solid": return "bg-palette-solid text-palette-fg border-transparent";
+		case "outline": return "bg-transparent text-palette-text border-palette-border";
+		case "soft": return "bg-palette-soft text-palette-text border-transparent";
 	}
 }
-var v = h("relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]", {
+var v = g("relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]", {
 	variants: {
 		variant: {
 			subtle: "border",
@@ -170,67 +56,68 @@ var v = h("relative inline-flex items-center rounded-pill font-sans font-medium
 	sm: "pr-ds-02",
 	md: "pr-ds-02",
 	lg: "pr-ds-02b"
-}, S = c.forwardRef(({ className: s, variant: c, color: h, size: g, asChild: S, startIcon: C, endIcon: w, dot: T, dotPulse: E, onDismiss: D, onClick: O, selected: k, disabled: A, maxWidth: j, truncate: M, circle: N, children: P, style: F, ...I }, L) => {
-	let R = c ?? "subtle", z = h ?? "default", B = g ?? "md", V = S ? e : O && D ? "div" : O ? "button" : "span", H = z === "custom" ? {
-		...R === "subtle" && {
+}, S = l.forwardRef(({ className: c, variant: l, color: g, size: S, asChild: C, startIcon: w, endIcon: T, dot: E, dotPulse: D, onDismiss: O, onClick: k, selected: A, disabled: j, maxWidth: M, truncate: N, circle: P, children: F, style: I, ...L }, R) => {
+	let z = l ?? "subtle", B = g ?? "default", V = S ?? "md", H = C ? e : k && O ? "div" : k ? "button" : "span", U = B === "custom" ? {
+		...z === "subtle" && {
 			backgroundColor: "color-mix(in oklch, var(--badge-color) 15%, transparent)",
 			color: "var(--badge-color)",
 			borderColor: "color-mix(in oklch, var(--badge-color) 40%, transparent)"
 		},
-		...R === "solid" && {
+		...z === "solid" && {
 			backgroundColor: "var(--badge-color)",
 			color: "var(--badge-fg-color, white)",
 			borderColor: "transparent"
 		},
-		...R === "outline" && {
+		...z === "outline" && {
 			backgroundColor: "transparent",
 			color: "var(--badge-color)",
 			borderColor: "color-mix(in oklch, var(--badge-color) 50%, transparent)"
 		},
-		...R === "soft" && {
+		...z === "soft" && {
 			backgroundColor: "color-mix(in oklch, var(--badge-color) 12%, transparent)",
 			color: "var(--badge-color)",
 			borderColor: "transparent"
 		}
-	} : void 0, U = O && D ? (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), A || O(e)), I.onKeyDown?.(e);
-	} : I.onKeyDown, W = !!(T || C || O && k && !C && !T), G = !!(D || w);
-	return /* @__PURE__ */ u(V, {
-		ref: L,
-		className: r(v({
-			variant: R,
-			size: B
-		}), _(R, z), W && b[B], G && x[B], O && "cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]", k && "ring-1 ring-current/20 transition-shadow duration-fast-02", A && "opacity-action-disabled pointer-events-none saturate-[0.3]", N && "justify-center px-0 aspect-square", s),
+	} : void 0, W = k && O ? (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), j || k(e)), L.onKeyDown?.(e);
+	} : L.onKeyDown, G = !!(E || w || k && A && !w && !E), K = !!(O || T);
+	return /* @__PURE__ */ u(r, { children: /* @__PURE__ */ d(H, {
+		ref: R,
+		"data-palette": B === "custom" ? void 0 : B,
+		className: i(v({
+			variant: z,
+			size: V
+		}), _(z, B), G && b[V], K && x[V], k && "cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]", A && "ring-1 ring-current/20 transition-shadow duration-fast-02", j && "opacity-action-disabled pointer-events-none saturate-[0.3]", P && "justify-center px-0 aspect-square", c),
 		style: {
-			...F,
-			...H,
-			...j ? { maxWidth: j } : void 0
+			...I,
+			...U,
+			...M ? { maxWidth: M } : void 0
 		},
-		onClick: A ? void 0 : O,
-		onKeyDown: U,
-		...V === "button" && { type: "button" },
-		...V === "button" && A ? { disabled: !0 } : {},
-		...V === "div" && O ? {
+		onClick: j ? void 0 : k,
+		onKeyDown: W,
+		...H === "button" && { type: "button" },
+		...H === "button" && j ? { disabled: !0 } : {},
+		...H === "div" && k ? {
 			role: "button",
 			tabIndex: 0
 		} : {},
-		...I,
+		...L,
 		children: [
-			/* @__PURE__ */ l(p, { children: T && /* @__PURE__ */ l(m.span, {
+			/* @__PURE__ */ u(m, { children: E && /* @__PURE__ */ u(h.span, {
 				initial: { scale: 0 },
 				animate: { scale: 1 },
 				exit: { scale: 0 },
 				transition: n.snappy,
 				className: "inline-flex shrink-0",
-				children: /* @__PURE__ */ l(a, {
+				children: /* @__PURE__ */ u(o, {
 					color: "current",
 					size: "sm",
-					pulse: E
+					pulse: D
 				})
 			}, "dot") }),
-			O && !C && !T && /* @__PURE__ */ l(m.span, {
+			k && !w && !E && /* @__PURE__ */ u(h.span, {
 				initial: !1,
-				animate: k ? {
+				animate: A ? {
 					opacity: 1,
 					scale: 1,
 					width: "auto",
@@ -252,60 +139,60 @@ var v = h("relative inline-flex items-center rounded-pill font-sans font-medium
 					]
 				},
 				className: "inline-flex shrink-0 overflow-hidden",
-				"aria-hidden": !k,
-				children: /* @__PURE__ */ l(i, {
-					icon: d,
+				"aria-hidden": !A,
+				children: /* @__PURE__ */ u(a, {
+					icon: f,
 					size: "xs"
 				})
 			}),
-			C && /* @__PURE__ */ l("span", {
-				className: r("shrink-0", y[B]),
-				children: o(C)
+			w && /* @__PURE__ */ u("span", {
+				className: i("shrink-0", y[V]),
+				children: s(w)
 			}),
-			M || j ? /* @__PURE__ */ l("span", {
+			N || M ? /* @__PURE__ */ u("span", {
 				className: "truncate",
-				title: typeof P == "string" ? P : void 0,
-				children: P
-			}) : P,
-			w && /* @__PURE__ */ l("span", {
-				className: r("shrink-0", y[B]),
-				children: o(w)
+				title: typeof F == "string" ? F : void 0,
+				children: F
+			}) : F,
+			T && /* @__PURE__ */ u("span", {
+				className: i("shrink-0", y[V]),
+				children: s(T)
 			}),
-			D && /* @__PURE__ */ l("button", {
+			O && /* @__PURE__ */ u("button", {
 				type: "button",
 				onClick: (e) => {
-					e.stopPropagation(), D();
+					e.stopPropagation(), O();
 				},
-				className: r("shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9", B === "xs" ? "p-0 -mr-0.5 min-w-ds-05 min-h-ds-05" : "p-px"),
-				"aria-label": `Remove ${typeof P == "string" ? P : ""}`.trim() || "Remove",
-				children: /* @__PURE__ */ l(i, {
-					icon: f,
+				className: i("shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9", V === "xs" ? "p-0 -mr-0.5 min-w-ds-05 min-h-ds-05" : "p-px"),
+				"aria-label": `Remove ${typeof F == "string" ? F : ""}`.trim() || "Remove",
+				children: /* @__PURE__ */ u(a, {
+					icon: p,
 					size: "xs"
 				})
 			})
 		]
-	});
+	}) });
 });
 S.displayName = "Badge";
 var C = Object.assign(S, {
-	Indicator: s,
+	Indicator: c,
 	Group: T
 }), w = {
 	tight: "gap-1",
 	default: "gap-1.5",
 	loose: "gap-2"
-}, T = c.forwardRef(function({ max: e, gap: t = "default", size: n, onOverflowClick: i, className: a, children: o, ...s }, l) {
-	let d = c.Children.toArray(o), f = d.length, p = e !== void 0 && f > e, m = p ? d.slice(0, e) : d, h = p ? f - e : 0;
-	return /* @__PURE__ */ u("div", {
-		ref: l,
-		className: r("flex flex-wrap items-center", w[t], a),
+}, T = l.forwardRef(function({ max: e, gap: t = "default", size: n, onOverflowClick: r, className: a, children: o, ...s }, c) {
+	let u = l.Children.toArray(o), f = u.length, p = e !== void 0 && f > e, m = p ? u.slice(0, e) : u, h = p ? f - e : 0;
+	return /* @__PURE__ */ d("div", {
+		ref: c,
+		className: i("flex flex-wrap items-center", w[t], a),
 		...s,
-		children: [m, p && /* @__PURE__ */ u(C, {
+		children: [m, p && /* @__PURE__ */ d(C, {
 			variant: "outline",
 			color: "neutral",
 			size: n ?? "sm",
-			onClick: i,
-			"aria-label": i ? `Show ${h} more` : void 0,
+			onClick: r,
+			"aria-label": r ? `Show ${h} more` : void 0,
 			children: ["+", h]
 		})]
 	});

package/dist/_chunks/badge-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Dot } from './dot'\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { durations,springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n  default: { bg: 'bg-surface-panel-hover', softBg: 'bg-surface-panel-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  accent:  { bg: 'bg-accent-2', softBg: 'bg-accent-3',  fg: 'text-accent-11',  border: 'border-accent-4',  solid: 'bg-accent-9',  solidFg: 'text-accent-fg' },\n  error:   { bg: 'bg-error-2', softBg: 'bg-error-3',   fg: 'text-error-11',   border: 'border-error-4',   solid: 'bg-error-9',   solidFg: 'text-error-fg' },\n  success: { bg: 'bg-success-2', softBg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-4', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n  warning: { bg: 'bg-warning-2', softBg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-4', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n  info:    { bg: 'bg-info-2', softBg: 'bg-info-3',    fg: 'text-info-11',    border: 'border-info-4',    solid: 'bg-info-9',    solidFg: 'text-info-fg' },\n  neutral: { bg: 'bg-surface-panel-hover', softBg: 'bg-surface-panel-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  teal:    { bg: 'bg-category-teal-2', softBg: 'bg-category-teal-3',    fg: 'text-category-teal-11',    border: 'border-category-teal-4',    solid: 'bg-category-teal-9',    solidFg: 'text-category-fg' },\n  amber:   { bg: 'bg-category-amber-2', softBg: 'bg-category-amber-3',   fg: 'text-category-amber-11',   border: 'border-category-amber-4',   solid: 'bg-category-amber-9',   solidFg: 'text-category-fg' },\n  slate:   { bg: 'bg-category-slate-2', softBg: 'bg-category-slate-3',   fg: 'text-category-slate-11',   border: 'border-category-slate-4',   solid: 'bg-category-slate-9',   solidFg: 'text-category-fg' },\n  indigo:  { bg: 'bg-category-indigo-2', softBg: 'bg-category-indigo-3',  fg: 'text-category-indigo-11',  border: 'border-category-indigo-4',  solid: 'bg-category-indigo-9',  solidFg: 'text-category-fg' },\n  cyan:    { bg: 'bg-category-cyan-2', softBg: 'bg-category-cyan-3',    fg: 'text-category-cyan-11',    border: 'border-category-cyan-4',    solid: 'bg-category-cyan-9',    solidFg: 'text-category-fg' },\n  orange:  { bg: 'bg-category-orange-2', softBg: 'bg-category-orange-3',  fg: 'text-category-orange-11',  border: 'border-category-orange-4',  solid: 'bg-category-orange-9',  solidFg: 'text-category-fg' },\n  emerald: { bg: 'bg-category-emerald-2', softBg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-4', solid: 'bg-category-emerald-9', solidFg: 'text-category-fg' },\n} as const\n\ntype BadgeColor = keyof typeof colorMap | 'custom'\n\n/** Derive color classes for a given variant + color pair */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n  if (color === 'custom') return ''\n  const c = colorMap[color]\n  switch (variant) {\n    case 'subtle':  return cn(c.bg, c.fg, c.border)\n    case 'solid':   return cn(c.solid, c.solidFg, 'border-transparent')\n    case 'outline': return cn('bg-transparent', c.fg, c.border)\n    // soft keeps the original step-3 fill. subtle moved to step 2; soft did not,\n    // so the two cannot share one key (design call, Yogin/Goutham 2026-08-24).\n    case 'soft':    return cn(c.softBg, c.fg, 'border-transparent')\n  }\n}\n\nconst badgeVariants = cva(\n  'relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        subtle: 'border',\n        solid: 'border border-transparent',\n        outline: 'border',\n        soft: 'border border-transparent',\n      },\n      size: {\n        xs: 'h-4 px-ds-02b text-body-xs gap-ds-02',\n        sm: 'h-5 px-ds-03 text-body-xs gap-ds-02',\n        md: 'h-6 px-2.5 text-body-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n        lg: 'h-7 px-ds-04 text-body-sm gap-ds-02b',\n      },\n    },\n    defaultVariants: {\n      variant: 'subtle',\n      size: 'md',\n    },\n  },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n  xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n  sm: '[&>svg]:h-3 [&>svg]:w-3',\n  md: '[&>svg]:h-3 [&>svg]:w-3',\n  lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n  xs: 'pl-ds-02',\n  sm: 'pl-ds-02b',\n  md: 'pl-ds-03',\n  lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n  xs: 'pr-ds-01',\n  sm: 'pr-ds-02',\n  md: 'pr-ds-02',\n  lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n *   Custom\n * </Badge>\n */\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n  color?: BadgeColor\n  asChild?: boolean\n  startIcon?: IconInput\n  endIcon?: IconInput\n  dot?: boolean\n  /** Pulse the status dot (opt-in; static by default). @default false */\n  dotPulse?: boolean\n  onDismiss?: () => void\n  selected?: boolean\n  disabled?: boolean\n  maxWidth?: number\n  /**\n   * Truncate children with ellipsis when they overflow the badge width.\n   * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n   * constrained pill badges. Always adds a title tooltip on the full text.\n   */\n  truncate?: boolean\n  circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      size,\n      asChild,\n      startIcon,\n      endIcon,\n      dot,\n      dotPulse,\n      onDismiss,\n      onClick,\n      selected,\n      disabled,\n      maxWidth,\n      truncate,\n      circle,\n      children,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedVariant = variant ?? 'subtle'\n    const resolvedColor = color ?? 'default'\n    const resolvedSize = size ?? 'md'\n\n    // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n    const Comp = asChild\n      ? Slot\n      : onClick && onDismiss\n        ? 'div'\n        : onClick\n          ? 'button'\n          : 'span'\n\n    // Custom color inline styles via CSS variable\n    const customStyles =\n      resolvedColor === 'custom'\n        ? {\n            ...(resolvedVariant === 'subtle' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n            }),\n            ...(resolvedVariant === 'solid' && {\n              backgroundColor: 'var(--badge-color)',\n              color: 'var(--badge-fg-color, white)',\n              borderColor: 'transparent',\n            }),\n            ...(resolvedVariant === 'outline' && {\n              backgroundColor: 'transparent',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n            }),\n            ...(resolvedVariant === 'soft' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'transparent',\n            }),\n          }\n        : undefined\n\n    // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n    const handleKeyDown =\n      onClick && onDismiss\n        ? (e: React.KeyboardEvent<HTMLElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n            }\n            props.onKeyDown?.(e)\n          }\n        : props.onKeyDown\n\n    const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n    const hasTrailing = !!(onDismiss || endIcon)\n\n    return (\n      <Comp\n        ref={ref as React.Ref<never>}\n        className={cn(\n          badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n          getColorClasses(resolvedVariant, resolvedColor),\n          hasLeading && paddingLeftWithIcon[resolvedSize],\n          hasTrailing && paddingRightWithTrailing[resolvedSize],\n          onClick &&\n            'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n          selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n          disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n          circle && 'justify-center px-0 aspect-square',\n          className,\n        )}\n        style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n        onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n        onKeyDown={handleKeyDown}\n        {...(Comp === 'button' && { type: 'button' as const })}\n        {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n        {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n        {...props}\n      >\n        {/* Dot indicator — animated entrance, uses the shared <Dot> (current colour + pulse) */}\n        <AnimatePresence>\n          {dot && (\n            <motion.span\n              key=\"dot\"\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              exit={{ scale: 0 }}\n              transition={springs.snappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Dot color=\"current\" size=\"sm\" pulse={dotPulse} />\n            </motion.span>\n          )}\n        </AnimatePresence>\n\n        {/* Selected check icon — always mounted for interactive badges */}\n        {onClick && !startIcon && !dot && (\n          <motion.span\n            initial={false}\n            animate={selected\n              ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n              : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n            }\n            transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }}  /* ease-productive-standard */\n            className=\"inline-flex shrink-0 overflow-hidden\"\n            aria-hidden={!selected}\n          >\n            <Icon icon={IconCheck} size=\"xs\" />\n          </motion.span>\n        )}\n\n        {/* Start icon */}\n        {startIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(startIcon)}</span>\n        )}\n\n        {/* Children — with optional truncation */}\n        {truncate || maxWidth ? (\n          <span\n            className=\"truncate\"\n            title={typeof children === 'string' ? children : undefined}\n          >\n            {children}\n          </span>\n        ) : (\n          children\n        )}\n\n        {/* End icon */}\n        {endIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(endIcon)}</span>\n        )}\n\n        {/* Dismiss button */}\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDismiss()\n            }}\n            className={cn(\n              'shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n              resolvedSize === 'xs'\n                ? 'p-0 -mr-0.5 min-w-ds-05 min-h-ds-05'\n                : 'p-px',\n            )}\n            aria-label={\n              `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n            }\n          >\n            <Icon icon={IconX} size=\"xs\" />\n          </button>\n        )}\n      </Comp>\n    )\n  },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n  Indicator: BadgeIndicator,\n  Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n  tight: 'gap-1',\n  default: 'gap-1.5',\n  loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  gap?: keyof typeof GAP_CLASSES\n  size?: BadgeProps['size']\n  onOverflowClick?: () => void\n  children: React.ReactNode\n}\n\nexport const BadgeGroup = React.forwardRef<HTMLDivElement, BadgeGroupProps>(function BadgeGroup(\n  { max, gap = 'default', size, onOverflowClick, className, children, ...rest },\n  ref,\n) {\n  const childArray = React.Children.toArray(children)\n  const total = childArray.length\n  const hasOverflow = max !== undefined && total > max\n  const visible = hasOverflow ? childArray.slice(0, max) : childArray\n  const overflowCount = hasOverflow ? total - max! : 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}\n      {...rest}\n    >\n      {visible}\n      {hasOverflow && (\n        // With onClick, Badge renders a real, keyboard-reachable <button>; add a\n        // label since \"+N\" alone isn't descriptive to a screen reader.\n        <Badge\n          variant=\"outline\"\n          color=\"neutral\"\n          size={size ?? 'sm'}\n          onClick={onOverflowClick}\n          aria-label={onOverflowClick ? `Show ${overflowCount} more` : undefined}\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </div>\n  )\n})\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":"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"}
+{"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Dot } from './dot'\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { durations,springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n  default: { bg: 'bg-surface-panel-hover', softBg: 'bg-surface-panel-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  accent:  { bg: 'bg-accent-2', softBg: 'bg-accent-3',  fg: 'text-accent-11',  border: 'border-accent-4',  solid: 'bg-accent-9',  solidFg: 'text-accent-fg' },\n  error:   { bg: 'bg-error-2', softBg: 'bg-error-3',   fg: 'text-error-11',   border: 'border-error-4',   solid: 'bg-error-9',   solidFg: 'text-error-fg' },\n  success: { bg: 'bg-success-2', softBg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-4', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n  warning: { bg: 'bg-warning-2', softBg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-4', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n  info:    { bg: 'bg-info-2', softBg: 'bg-info-3',    fg: 'text-info-11',    border: 'border-info-4',    solid: 'bg-info-9',    solidFg: 'text-info-fg' },\n  neutral: { bg: 'bg-surface-panel-hover', softBg: 'bg-surface-panel-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  teal:    { bg: 'bg-category-teal-2', softBg: 'bg-category-teal-3',    fg: 'text-category-teal-11',    border: 'border-category-teal-4',    solid: 'bg-category-teal-9',    solidFg: 'text-category-fg' },\n  amber:   { bg: 'bg-category-amber-2', softBg: 'bg-category-amber-3',   fg: 'text-category-amber-11',   border: 'border-category-amber-4',   solid: 'bg-category-amber-9',   solidFg: 'text-category-fg' },\n  slate:   { bg: 'bg-category-slate-2', softBg: 'bg-category-slate-3',   fg: 'text-category-slate-11',   border: 'border-category-slate-4',   solid: 'bg-category-slate-9',   solidFg: 'text-category-fg' },\n  indigo:  { bg: 'bg-category-indigo-2', softBg: 'bg-category-indigo-3',  fg: 'text-category-indigo-11',  border: 'border-category-indigo-4',  solid: 'bg-category-indigo-9',  solidFg: 'text-category-fg' },\n  cyan:    { bg: 'bg-category-cyan-2', softBg: 'bg-category-cyan-3',    fg: 'text-category-cyan-11',    border: 'border-category-cyan-4',    solid: 'bg-category-cyan-9',    solidFg: 'text-category-fg' },\n  orange:  { bg: 'bg-category-orange-2', softBg: 'bg-category-orange-3',  fg: 'text-category-orange-11',  border: 'border-category-orange-4',  solid: 'bg-category-orange-9',  solidFg: 'text-category-fg' },\n  emerald: { bg: 'bg-category-emerald-2', softBg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-4', solid: 'bg-category-emerald-9', solidFg: 'text-category-fg' },\n} as const\n\n/**\n * A palette name. These fourteen ship with the design system; any palette\n * registered in CSS (`[data-palette='…']`) works too, which is why the type\n * stays open. `custom` is the older escape hatch — it drives colour through\n * inline styles from a `--badge-color` variable and is superseded by\n * registering a palette, but still works.\n */\ntype BadgeColor = keyof typeof colorMap | 'custom' | (string & {})\n\n/**\n * Colour classes per variant. Four lines instead of a 14 × 6 map — the hue\n * arrives via `data-palette` on the element.\n *\n * `subtle` and `soft` map to two different roles on purpose. subtle moved to\n * step 2 and soft stayed at step 3 (design call, Yogin/Goutham 2026-08-24), and\n * the palette contract keeps them as separate roles precisely so that decision\n * survives rather than being averaged away.\n */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n  if (color === 'custom') return ''\n  switch (variant) {\n    case 'subtle':  return 'bg-palette-subtle text-palette-text border-palette-border'\n    case 'solid':   return 'bg-palette-solid text-palette-fg border-transparent'\n    case 'outline': return 'bg-transparent text-palette-text border-palette-border'\n    case 'soft':    return 'bg-palette-soft text-palette-text border-transparent'\n  }\n}\n\nconst badgeVariants = cva(\n  'relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        subtle: 'border',\n        solid: 'border border-transparent',\n        outline: 'border',\n        soft: 'border border-transparent',\n      },\n      size: {\n        xs: 'h-4 px-ds-02b text-body-xs gap-ds-02',\n        sm: 'h-5 px-ds-03 text-body-xs gap-ds-02',\n        md: 'h-6 px-2.5 text-body-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n        lg: 'h-7 px-ds-04 text-body-sm gap-ds-02b',\n      },\n    },\n    defaultVariants: {\n      variant: 'subtle',\n      size: 'md',\n    },\n  },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n  xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n  sm: '[&>svg]:h-3 [&>svg]:w-3',\n  md: '[&>svg]:h-3 [&>svg]:w-3',\n  lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n  xs: 'pl-ds-02',\n  sm: 'pl-ds-02b',\n  md: 'pl-ds-03',\n  lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n  xs: 'pr-ds-01',\n  sm: 'pr-ds-02',\n  md: 'pr-ds-02',\n  lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n *   Custom\n * </Badge>\n */\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n  color?: BadgeColor\n  asChild?: boolean\n  startIcon?: IconInput\n  endIcon?: IconInput\n  dot?: boolean\n  /** Pulse the status dot (opt-in; static by default). @default false */\n  dotPulse?: boolean\n  onDismiss?: () => void\n  selected?: boolean\n  disabled?: boolean\n  maxWidth?: number\n  /**\n   * Truncate children with ellipsis when they overflow the badge width.\n   * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n   * constrained pill badges. Always adds a title tooltip on the full text.\n   */\n  truncate?: boolean\n  circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      size,\n      asChild,\n      startIcon,\n      endIcon,\n      dot,\n      dotPulse,\n      onDismiss,\n      onClick,\n      selected,\n      disabled,\n      maxWidth,\n      truncate,\n      circle,\n      children,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedVariant = variant ?? 'subtle'\n    const resolvedColor = color ?? 'default'\n    const resolvedSize = size ?? 'md'\n\n    // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n    const Comp = asChild\n      ? Slot\n      : onClick && onDismiss\n        ? 'div'\n        : onClick\n          ? 'button'\n          : 'span'\n\n    // Custom color inline styles via CSS variable\n    const customStyles =\n      resolvedColor === 'custom'\n        ? {\n            ...(resolvedVariant === 'subtle' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n            }),\n            ...(resolvedVariant === 'solid' && {\n              backgroundColor: 'var(--badge-color)',\n              color: 'var(--badge-fg-color, white)',\n              borderColor: 'transparent',\n            }),\n            ...(resolvedVariant === 'outline' && {\n              backgroundColor: 'transparent',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n            }),\n            ...(resolvedVariant === 'soft' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'transparent',\n            }),\n          }\n        : undefined\n\n    // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n    const handleKeyDown =\n      onClick && onDismiss\n        ? (e: React.KeyboardEvent<HTMLElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n            }\n            props.onKeyDown?.(e)\n          }\n        : props.onKeyDown\n\n    const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n    const hasTrailing = !!(onDismiss || endIcon)\n\n    return (\n      <MotionPreference>\n        <Comp\n          ref={ref as React.Ref<never>}\n          // `custom` keeps driving colour through inline styles from\n          // `--badge-color`; every other value is a palette name.\n          data-palette={resolvedColor === 'custom' ? undefined : resolvedColor}\n          className={cn(\n            badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n            getColorClasses(resolvedVariant, resolvedColor),\n            hasLeading && paddingLeftWithIcon[resolvedSize],\n            hasTrailing && paddingRightWithTrailing[resolvedSize],\n            onClick &&\n              'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n            selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n            disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n            circle && 'justify-center px-0 aspect-square',\n            className,\n          )}\n          style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n          onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n          onKeyDown={handleKeyDown}\n          {...(Comp === 'button' && { type: 'button' as const })}\n          {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n          {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n          {...props}\n        >\n          {/* Dot indicator — animated entrance, uses the shared <Dot> (current colour + pulse) */}\n          <AnimatePresence>\n            {dot && (\n              <motion.span\n                key=\"dot\"\n                initial={{ scale: 0 }}\n                animate={{ scale: 1 }}\n                exit={{ scale: 0 }}\n                transition={springs.snappy}\n                className=\"inline-flex shrink-0\"\n              >\n                <Dot color=\"current\" size=\"sm\" pulse={dotPulse} />\n              </motion.span>\n            )}\n          </AnimatePresence>\n\n          {/* Selected check icon — always mounted for interactive badges */}\n          {onClick && !startIcon && !dot && (\n            <motion.span\n              initial={false}\n              animate={selected\n                ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n                : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n              }\n              transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }}  /* ease-productive-standard */\n              className=\"inline-flex shrink-0 overflow-hidden\"\n              aria-hidden={!selected}\n            >\n              <Icon icon={IconCheck} size=\"xs\" />\n            </motion.span>\n          )}\n\n          {/* Start icon */}\n          {startIcon && (\n            <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(startIcon)}</span>\n          )}\n\n          {/* Children — with optional truncation */}\n          {truncate || maxWidth ? (\n            <span\n              className=\"truncate\"\n              title={typeof children === 'string' ? children : undefined}\n            >\n              {children}\n            </span>\n          ) : (\n            children\n          )}\n\n          {/* End icon */}\n          {endIcon && (\n            <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(endIcon)}</span>\n          )}\n\n          {/* Dismiss button */}\n          {onDismiss && (\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation()\n                onDismiss()\n              }}\n              className={cn(\n                'shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n                resolvedSize === 'xs'\n                  ? 'p-0 -mr-0.5 min-w-ds-05 min-h-ds-05'\n                  : 'p-px',\n              )}\n              aria-label={\n                `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n              }\n            >\n              <Icon icon={IconX} size=\"xs\" />\n            </button>\n          )}\n        </Comp>\n      </MotionPreference>\n    )\n  },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n  Indicator: BadgeIndicator,\n  Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n  tight: 'gap-1',\n  default: 'gap-1.5',\n  loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  gap?: keyof typeof GAP_CLASSES\n  size?: BadgeProps['size']\n  onOverflowClick?: () => void\n  children: React.ReactNode\n}\n\nexport const BadgeGroup = React.forwardRef<HTMLDivElement, BadgeGroupProps>(function BadgeGroup(\n  { max, gap = 'default', size, onOverflowClick, className, children, ...rest },\n  ref,\n) {\n  const childArray = React.Children.toArray(children)\n  const total = childArray.length\n  const hasOverflow = max !== undefined && total > max\n  const visible = hasOverflow ? childArray.slice(0, max) : childArray\n  const overflowCount = hasOverflow ? total - max! : 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}\n      {...rest}\n    >\n      {visible}\n      {hasOverflow && (\n        // With onClick, Badge renders a real, keyboard-reachable <button>; add a\n        // label since \"+N\" alone isn't descriptive to a screen reader.\n        <Badge\n          variant=\"outline\"\n          color=\"neutral\"\n          size={size ?? 'sm'}\n          onClick={onOverflowClick}\n          aria-label={onOverflowClick ? `Show ${overflowCount} more` : undefined}\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </div>\n  )\n})\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":"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"}