@devalok/shilp-sutra 0.43.0 → 0.44.0

package/dist/_chunks/oauth-button.js

@@ -2,11 +2,12 @@
 import { cn as e } from "../ui/lib/utils.js";
 import { t } from "./normalize-icon.js";
 import { Button as n } from "../ui/button.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { IconBrandApple as o, IconBrandDiscord as s, IconBrandFacebook as c, IconBrandGithub as l, IconBrandGitlab as u, IconBrandGoogleFilled as d, IconBrandLinkedin as f, IconBrandSlack as p, IconBrandWindows as m, IconBrandXFilled as h, IconFingerprint as g, IconKey as _, IconMail as v } from "@tabler/icons-react";
+import { TruncatedText as r } from "../ui/truncated-text.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { IconBrandApple as s, IconBrandDiscord as c, IconBrandFacebook as l, IconBrandGithub as u, IconBrandGitlab as d, IconBrandGoogleFilled as f, IconBrandLinkedin as p, IconBrandSlack as m, IconBrandWindows as h, IconBrandXFilled as g, IconFingerprint as _, IconKey as v, IconMail as y } from "@tabler/icons-react";
 //#region src/ui/oauth-button/oauth-button.tsx
-var y = {
+var b = {
 	google: "Google",
 	apple: "Apple",
 	github: "GitHub",
@@ -20,45 +21,45 @@ var y = {
 	sso: "SSO",
 	email: "email",
 	passkey: "a passkey"
-}, b = {
-	google: d,
-	apple: o,
-	github: l,
-	microsoft: m,
-	x: h,
-	linkedin: f,
-	facebook: c,
-	discord: s,
-	slack: p,
-	gitlab: u,
-	sso: _,
-	email: v,
-	passkey: g
+}, x = {
+	google: f,
+	apple: s,
+	github: u,
+	microsoft: h,
+	x: g,
+	linkedin: p,
+	facebook: l,
+	discord: c,
+	slack: m,
+	gitlab: d,
+	sso: v,
+	email: y,
+	passkey: _
 };
-function x(e) {
-	return e === "passkey" ? "Passkey" : y[e];
+function S(e) {
+	return e === "passkey" ? "Passkey" : b[e];
 }
-function S(e, t, n) {
-	if (n) return x(e);
-	let r = y[e];
+function C(e, t, n) {
+	if (n) return S(e);
+	let r = b[e];
 	switch (t) {
 		case "signin": return `Sign in with ${r}`;
 		case "signup": return `Sign up with ${r}`;
 		default: return `Continue with ${r}`;
 	}
 }
-var C = { passkey: {
+var w = { passkey: {
 	continue: "Continue with a passkey",
 	signin: "Sign in with a passkey",
 	signup: "Create a passkey"
 } };
-function w(e, t, n) {
-	return n ? x(e) : C[e]?.[t] ?? S(e, t, n);
+function T(e, t, n) {
+	return n ? S(e) : w[e]?.[t] ?? C(e, t, n);
 }
-function T(e, t) {
-	return C[e]?.[t] ?? S(e, t, !1);
+function E(e, t) {
+	return w[e]?.[t] ?? C(e, t, !1);
 }
-var E = {
+var D = {
 	xs: 14,
 	sm: 16,
 	md: 18,
@@ -71,7 +72,7 @@ var E = {
 	"icon-sm": 16,
 	"icon-md": 18,
 	"icon-lg": 20
-}, D = {
+}, O = {
 	xs: "icon-xs",
 	sm: "icon-sm",
 	md: "icon-md",
@@ -79,18 +80,18 @@ var E = {
 	"compact-xs": "icon-xs",
 	"compact-sm": "icon-sm",
 	"compact-md": "icon-md"
-}, O = r.forwardRef(({ provider: r, intent: o = "continue", variant: s, appearance: c, icon: l, iconOnly: u = !1, compact: d = !1, lastUsed: f = !1, lastUsedSlot: p, lastUsedLabel: m = "Last used", helperText: h, children: g, className: _, size: v, fullWidth: y = !1, ...x }, S) => {
-	let C = v ?? "md", O = b[r], k = E[C] ?? 18, A = t(l) ?? /* @__PURE__ */ i(O, {
+}, k = i.forwardRef(({ provider: r, intent: i = "continue", variant: s, appearance: c, icon: l, iconOnly: u = !1, compact: d = !1, lastUsed: f = !1, lastUsedSlot: p, lastUsedLabel: m = "Last used", helperText: h, children: g, className: _, size: v, fullWidth: y = !1, ...b }, S) => {
+	let C = v ?? "md", w = x[r], k = D[C] ?? 18, A = t(l) ?? /* @__PURE__ */ a(w, {
 		size: k,
 		"aria-hidden": !0
-	}), j = g ?? w(r, o, d), M = s ?? (c === "outline" ? "outline" : "solid"), N = T(r, o), P = u || d || f ? `${N}${f ? " (last used)" : ""}` : void 0, F = /* @__PURE__ */ i("span", {
-		className: "pointer-events-none inline-flex items-center rounded-pill bg-accent-9 text-accent-fg px-2 py-1 text-[9px] leading-none font-semibold uppercase tracking-wide shadow-overlay",
+	}), j = g ?? T(r, i, d), M = s ?? (c === "outline" ? "outline" : "solid"), N = E(r, i), P = u || d || f ? `${N}${f ? " (last used)" : ""}` : void 0, F = /* @__PURE__ */ a("span", {
+		className: "pointer-events-none inline-flex items-center rounded-pill bg-accent-9 text-accent-fg px-2 py-1 text-ds-2xs leading-none font-semibold uppercase tracking-wide shadow-overlay",
 		children: m
-	}), I = (typeof p == "function" ? p({ label: m }) : p) ?? F, L = /* @__PURE__ */ i(n, {
+	}), I = (typeof p == "function" ? p({ label: m }) : p) ?? F, L = /* @__PURE__ */ a(n, {
 		ref: S,
 		variant: M,
 		color: "neutral",
-		size: u ? D[C] ?? "icon-md" : C,
+		size: u ? O[C] ?? "icon-md" : C,
 		fullWidth: y && !u,
 		startIcon: u ? void 0 : A,
 		"aria-label": P,
@@ -98,130 +99,134 @@ var E = {
 		"data-oauth-variant": M,
 		"data-last-used": f || void 0,
 		className: _,
-		...x,
+		...b,
 		children: u ? A : j
 	}), R = f && !u;
-	return !R && !h ? L : /* @__PURE__ */ a("div", {
+	return !R && !h ? L : /* @__PURE__ */ o("div", {
 		className: e("relative inline-flex flex-col", y && "w-full"),
 		children: [
 			L,
-			R ? /* @__PURE__ */ i("span", {
+			R ? /* @__PURE__ */ a("span", {
 				"aria-hidden": "true",
 				"data-last-used-badge": "",
 				className: "pointer-events-none absolute -top-[10px] -right-2 z-10",
 				children: I
 			}) : null,
-			h ? /* @__PURE__ */ i("span", {
+			h ? /* @__PURE__ */ a("span", {
 				className: "mt-ds-02 text-ds-sm text-surface-fg-subtle",
 				children: h
 			}) : null
 		]
 	});
 });
-O.displayName = "OAuthButton";
-var k = r.forwardRef(({ orientation: t = "vertical", gap: n = "ds-03", fullWidth: a = !0, reorderLastUsedFirst: o = !1, className: s, children: c, ...l }, u) => {
-	let d = n === "ds-02" ? "gap-ds-02" : n === "ds-04" ? "gap-ds-04" : "gap-ds-03", f = t === "vertical" && a, p = r.useMemo(() => {
+k.displayName = "OAuthButton";
+var A = i.forwardRef(({ orientation: t = "vertical", gap: n = "ds-03", fullWidth: r = !0, reorderLastUsedFirst: o = !1, className: s, children: c, ...l }, u) => {
+	let d = n === "ds-02" ? "gap-ds-02" : n === "ds-04" ? "gap-ds-04" : "gap-ds-03", f = t === "vertical" && r, p = i.useMemo(() => {
 		if (!o) return c;
-		let e = r.Children.toArray(c), t = e.findIndex((e) => r.isValidElement(e) && e.props?.lastUsed);
+		let e = i.Children.toArray(c), t = e.findIndex((e) => i.isValidElement(e) && e.props?.lastUsed);
 		if (t <= 0) return c;
-		let n = [...e], [i] = n.splice(t, 1);
-		return n.unshift(i), n;
+		let n = [...e], [r] = n.splice(t, 1);
+		return n.unshift(r), n;
 	}, [c, o]);
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ a("div", {
 		ref: u,
 		className: e("flex", t === "vertical" ? "flex-col" : "flex-row flex-wrap items-center", d, f && "w-full [&>*]:w-full [&_button]:w-full", s),
 		...l,
 		children: p
 	});
 });
-k.displayName = "OAuthGroup";
-var A = r.forwardRef(({ label: t = "or", className: n, ...r }, o) => /* @__PURE__ */ a("div", {
-	ref: o,
+A.displayName = "OAuthGroup";
+var j = i.forwardRef(({ label: t = "or", className: n, ...r }, i) => /* @__PURE__ */ o("div", {
+	ref: i,
 	role: "separator",
 	"aria-orientation": "horizontal",
 	className: e("flex items-center gap-ds-03", n),
 	...r,
 	children: [
-		/* @__PURE__ */ i("hr", {
+		/* @__PURE__ */ a("hr", {
 			"aria-hidden": "true",
 			className: "flex-1 border-t border-surface-border-subtle"
 		}),
-		/* @__PURE__ */ i("span", {
+		/* @__PURE__ */ a("span", {
 			className: "text-ds-sm text-surface-fg-subtle uppercase tracking-wide",
 			children: t
 		}),
-		/* @__PURE__ */ i("hr", {
+		/* @__PURE__ */ a("hr", {
 			"aria-hidden": "true",
 			className: "flex-1 border-t border-surface-border-subtle"
 		})
 	]
 }));
-A.displayName = "OAuthDivider";
-var j = r.forwardRef(({ provider: r, accountLabel: o, connected: s, onAction: c, onActionAsync: l, actionLabel: u, disabled: d, icon: f, className: p, ...m }, h) => {
-	let g = b[r], _ = y[r], v = u ?? (s ? "Disconnect" : `Connect ${_}`);
-	return /* @__PURE__ */ a("div", {
-		ref: h,
-		className: e("flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-raised", p),
-		"data-provider": r,
-		"data-connected": s ? "true" : "false",
-		...m,
-		children: [/* @__PURE__ */ a("div", {
+j.displayName = "OAuthDivider";
+var M = i.forwardRef(({ provider: i, accountLabel: s, connected: c, onAction: l, onActionAsync: u, actionLabel: d, disabled: f, icon: p, className: m, ...h }, g) => {
+	let _ = x[i], v = b[i], y = d ?? (c ? "Disconnect" : `Connect ${v}`);
+	return /* @__PURE__ */ o("div", {
+		ref: g,
+		className: e("flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-raised", m),
+		"data-provider": i,
+		"data-connected": c ? "true" : "false",
+		...h,
+		children: [/* @__PURE__ */ o("div", {
 			className: "flex items-center gap-ds-03 min-w-0",
-			children: [t(f) ?? /* @__PURE__ */ i(g, {
+			children: [t(p) ?? /* @__PURE__ */ a(_, {
 				size: 24,
 				"aria-hidden": !0
-			}), /* @__PURE__ */ a("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "flex flex-col min-w-0",
-				children: [/* @__PURE__ */ i("span", {
-					className: "text-ds-md font-semibold text-surface-fg truncate",
-					children: _
-				}), o ? /* @__PURE__ */ i("span", {
+				children: [/* @__PURE__ */ a(r, {
+					className: "text-ds-md font-semibold text-surface-fg",
+					children: v
+				}), s ? typeof s == "string" ? /* @__PURE__ */ a(r, {
+					mode: "middle",
+					className: "text-ds-sm text-surface-fg-muted",
+					children: s
+				}) : /* @__PURE__ */ a("span", {
 					className: "text-ds-sm text-surface-fg-muted truncate",
-					children: o
-				}) : s ? /* @__PURE__ */ i("span", {
+					children: s
+				}) : c ? /* @__PURE__ */ a("span", {
 					className: "text-ds-sm text-success-11",
 					children: "Connected"
-				}) : /* @__PURE__ */ i("span", {
+				}) : /* @__PURE__ */ a("span", {
 					className: "text-ds-sm text-surface-fg-subtle",
 					children: "Not connected"
 				})]
 			})]
-		}), /* @__PURE__ */ i(n, {
+		}), /* @__PURE__ */ a(n, {
 			size: "sm",
-			variant: s ? "soft" : "solid",
-			color: s ? "neutral" : "accent",
-			disabled: d,
-			onClick: c,
-			onClickAsync: l,
-			children: v
+			variant: c ? "soft" : "solid",
+			color: c ? "neutral" : "accent",
+			disabled: f,
+			onClick: l,
+			onClickAsync: u,
+			children: y
 		})]
 	});
 });
-j.displayName = "OAuthConnectionRow";
-var M = r.forwardRef(({ provider: e, size: t = 18, ...n }, r) => {
-	let a = b[e];
-	return /* @__PURE__ */ i(a, {
+M.displayName = "OAuthConnectionRow";
+var N = i.forwardRef(({ provider: e, size: t = 18, ...n }, r) => {
+	let i = x[e];
+	return /* @__PURE__ */ a(i, {
 		ref: r,
 		size: t,
 		"aria-hidden": !0,
 		...n
 	});
 });
-M.displayName = "OAuthGlyph";
-function N(e, t = "continue", n = !1) {
-	return w(e, t, n);
+N.displayName = "OAuthGlyph";
+function P(e, t = "continue", n = !1) {
+	return T(e, t, n);
 }
-function P(e) {
-	return x(e);
+function F(e) {
+	return S(e);
 }
-var F = {
-	Button: O,
-	Group: k,
-	Divider: A,
-	ConnectionRow: j,
-	Glyph: M,
-	getLabel: N,
-	getName: P
+var I = {
+	Button: k,
+	Group: A,
+	Divider: j,
+	ConnectionRow: M,
+	Glyph: N,
+	getLabel: P,
+	getName: F
 };
 //#endregion
-export { M as a, P as c, A as i, O as n, k as o, j as r, N as s, F as t };
+export { N as a, F as c, j as i, k as n, A as o, M as r, P as s, I as t };

package/dist/_chunks/oauth-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth-button.js","names":[],"sources":["../../src/ui/oauth-button/oauth-button.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconBrandApple,\n  IconBrandDiscord,\n  IconBrandFacebook,\n  IconBrandGithub,\n  IconBrandGitlab,\n  IconBrandGoogleFilled,\n  IconBrandLinkedin,\n  IconBrandSlack,\n  IconBrandWindows,\n  IconBrandXFilled,\n  IconFingerprint,\n  IconKey,\n  IconMail,\n} from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from '../button'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\n\n// ── Types ───────────────────────────────────────────────────────\n\nexport type OAuthProvider =\n  | 'google'\n  | 'apple'\n  | 'github'\n  | 'microsoft'\n  | 'x'\n  | 'linkedin'\n  | 'facebook'\n  | 'discord'\n  | 'slack'\n  | 'gitlab'\n  | 'sso'\n  | 'email'\n  | 'passkey'\n\nexport type OAuthIntent = 'continue' | 'signin' | 'signup'\n\n/**\n * Visual treatment — 1:1 with Button's variant axis. OAuthButton is a thin\n * wrapper over Button, so every variant renders pixel-for-pixel identical\n * to a regular Button at the same variant + size. Brand identity lives in\n * the glyph (override via `icon` for a brand-multicolour SVG), not the\n * button surface.\n *\n * - `solid` (default) | `soft` | `outline` | `ghost`\n */\nexport type OAuthVariant = 'solid' | 'soft' | 'outline' | 'ghost'\n\n/** @deprecated Use `OAuthVariant`. brand/dark map to solid; outline passes through. */\nexport type OAuthAppearance = 'brand' | 'outline' | 'dark'\n\n// ── Static metadata ─────────────────────────────────────────────\n\nconst providerDisplay: Record<OAuthProvider, string> = {\n  google: 'Google',\n  apple: 'Apple',\n  github: 'GitHub',\n  microsoft: 'Microsoft',\n  x: 'X',\n  linkedin: 'LinkedIn',\n  facebook: 'Facebook',\n  discord: 'Discord',\n  slack: 'Slack',\n  gitlab: 'GitLab',\n  sso: 'SSO',\n  email: 'email',\n  passkey: 'a passkey',\n}\n\n// Default glyph per provider — sourced from Tabler (already a peer dep).\n// Consumer can override with the `icon` prop to drop in a brand-multicolour SVG.\nconst providerIcon: Record<OAuthProvider, React.ComponentType<{ size?: number | string; 'aria-hidden'?: boolean }>> = {\n  google: IconBrandGoogleFilled,\n  apple: IconBrandApple,\n  github: IconBrandGithub,\n  microsoft: IconBrandWindows,\n  x: IconBrandXFilled,\n  linkedin: IconBrandLinkedin,\n  facebook: IconBrandFacebook,\n  discord: IconBrandDiscord,\n  slack: IconBrandSlack,\n  gitlab: IconBrandGitlab,\n  sso: IconKey,\n  email: IconMail,\n  passkey: IconFingerprint,\n}\n\nfunction providerName(provider: OAuthProvider): string {\n  // Display name for `compact` mode — drops the \"a\" article on passkey.\n  return provider === 'passkey' ? 'Passkey' : providerDisplay[provider]\n}\n\nfunction defaultLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  const name = providerDisplay[provider]\n  switch (intent) {\n    case 'signin':\n      return `Sign in with ${name}`\n    case 'signup':\n      return `Sign up with ${name}`\n    case 'continue':\n    default:\n      return `Continue with ${name}`\n  }\n}\n\nconst providerCopyOverride: Partial<Record<OAuthProvider, Partial<Record<OAuthIntent, string>>>> = {\n  passkey: {\n    continue: 'Continue with a passkey',\n    signin: 'Sign in with a passkey',\n    signup: 'Create a passkey',\n  },\n}\n\nfunction resolveLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, compact)\n}\n\n/** Long-form name used for aria-label even when compact label is rendered. */\nfunction resolveAriaName(provider: OAuthProvider, intent: OAuthIntent): string {\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, false)\n}\n\n// **Visual treatment:** OAuthButton is a thin wrapper over `<Button>` — every\n// height, padding, radius, border, hover, focus, active, and disabled state is\n// the DS Button's. We do NOT inject per-provider hex backgrounds: brand\n// identity lives in the glyph (Tabler default; consumer can pass a real\n// multicolour SVG via `icon`). This guarantees pixel-for-pixel consistency\n// with every other button in the system at every variant.\n\nconst ICON_PX: Record<string, number> = {\n  xs: 14,\n  sm: 16,\n  md: 18,\n  lg: 20,\n  'compact-xs': 14,\n  'compact-sm': 14,\n  'compact-md': 16,\n  icon: 18,\n  'icon-xs': 14,\n  'icon-sm': 16,\n  'icon-md': 18,\n  'icon-lg': 20,\n}\n\nconst ICON_ONLY_SIZE: Record<string, NonNullable<ButtonProps['size']>> = {\n  xs: 'icon-xs',\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n  'compact-xs': 'icon-xs',\n  'compact-sm': 'icon-sm',\n  'compact-md': 'icon-md',\n}\n\n// ── Component ───────────────────────────────────────────────────\n\n/**\n * Props for `OAuthButton` — a brand-aware sign-in button for OAuth providers.\n *\n * Composes on top of `<Button>`, inheriting `size`, `loading`, `onClickAsync`,\n * `fullWidth`, and async state machinery. The provider's icon, label, and\n * brand-coloured styling are derived from the `provider` prop.\n *\n * **Provider** (required): includes 10 social providers + 3 generic\n * identifiers (`sso` enterprise, `email` magic-link, `passkey` WebAuthn).\n *\n * **Intent**: drives the verb in the label.\n * - `continue` (default) — \"Continue with Google\" — works on login and signup.\n * - `signin` — \"Sign in with Google\".\n * - `signup` — \"Sign up with Google\".\n *\n * **Appearance**: visual treatment.\n * - `brand` (default) — provider's brand background colour.\n * - `outline` — DS-neutral outline with monochrome glyph. Best for uniform rows.\n * - `dark` — unified Apple-style across all providers for visual consistency.\n *\n * **icon**: override the default Tabler glyph (e.g. drop in the provider's\n * official multicolour SVG downloaded from their brand page).\n *\n * **iconOnly**: render a square icon button. Provider name kept in `aria-label`.\n *\n * **lastUsed**: shows a small \"Last used\" pill above the button — high-converting\n * UX hint. Consumer tracks which provider the user picked previously.\n *\n * **helperText**: optional reassurance copy rendered below the button.\n *\n * @example\n * <OAuthButton provider=\"google\" intent=\"continue\" fullWidth onClickAsync={signInWithGoogle} />\n *\n * @example\n * // True brand-multicolour glyph:\n * <OAuthButton provider=\"google\" icon={<GoogleGSvg />} />\n *\n * @example\n * <OAuthGroup>\n *   <OAuthButton provider=\"google\" appearance=\"dark\" />\n *   <OAuthButton provider=\"apple\"  appearance=\"dark\" />\n *   <OAuthButton provider=\"github\" appearance=\"dark\" />\n * </OAuthGroup>\n */\nexport interface OAuthButtonProps\n  extends Omit<\n    ButtonProps,\n    'variant' | 'color' | 'startIcon' | 'endIcon' | 'shape' | 'children'\n  > {\n  /** OAuth provider this button represents */\n  provider: OAuthProvider\n  /** Verb in the default label. Default: `continue` */\n  intent?: OAuthIntent\n  /**\n   * Visual treatment. Default: `solid`. Mirrors Button's variant axis with\n   * an extra `dark` for row coherence across providers.\n   */\n  variant?: OAuthVariant\n  /** @deprecated Use `variant`. `appearance=\"brand\"` maps to `variant=\"solid\"`. */\n  appearance?: OAuthAppearance\n  /** Override the default glyph (e.g. brand-multicolour SVG). Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Render a compact icon-only button (provider name kept in aria-label) */\n  iconOnly?: boolean\n  /**\n   * Short label — renders just the provider name (\"Google\") instead of the\n   * full \"Continue with Google\". Use under an explicit \"Or sign in with\"\n   * divider where the verb is already established. aria-label still gets the\n   * full long form for screen readers.\n   */\n  compact?: boolean\n  /**\n   * Show \"Last used\" hint — a small pill anchored to the top-right corner of\n   * the button (sits ON the corner, half outside the button bounds).\n   */\n  lastUsed?: boolean\n  /**\n   * Customise the \"Last used\" badge. Pass a ReactNode to replace the entire\n   * pill (use this for custom copy, icons, or styling), or a render fn that\n   * receives the default props for tweaks. Only rendered when `lastUsed` is\n   * also set so the wrapper / aria augmentation logic stays consistent.\n   *\n   * @example\n   * <OAuthButton provider=\"google\" lastUsed lastUsedSlot={<MyBadge />} />\n   */\n  lastUsedSlot?: React.ReactNode | ((defaults: { label: string }) => React.ReactNode)\n  /** Override the visible badge label text. Default: \"Last used\". */\n  lastUsedLabel?: string\n  /** Reassurance copy rendered below the button */\n  helperText?: React.ReactNode\n  /** Override the default label entirely (i18n / custom copy) */\n  children?: React.ReactNode\n}\n\nconst OAuthButton = React.forwardRef<HTMLButtonElement, OAuthButtonProps>(\n  (\n    {\n      provider,\n      intent = 'continue',\n      variant: variantProp,\n      appearance,\n      icon,\n      iconOnly = false,\n      compact = false,\n      lastUsed = false,\n      lastUsedSlot,\n      lastUsedLabel = 'Last used',\n      helperText,\n      children,\n      className,\n      size: sizeProp,\n      fullWidth = false,\n      ...buttonProps\n    },\n    ref,\n  ) => {\n    const size: NonNullable<ButtonProps['size']> = sizeProp ?? 'md'\n    const DefaultGlyph = providerIcon[provider]\n    const iconPx = ICON_PX[size] ?? 18\n    const glyphNode = normalizeIcon(icon) ?? <DefaultGlyph size={iconPx} aria-hidden />\n    const label = children ?? resolveLabel(provider, intent, compact)\n\n    // Resolve final variant. `appearance` is a deprecated alias mapped to\n    // the closest DS variant — brand/dark both collapse to solid since\n    // OAuthButton no longer injects per-provider brand colours.\n    const variant: OAuthVariant =\n      variantProp ??\n      (appearance === 'outline' ? 'outline' : 'solid')\n\n    // aria-label always carries the long-form name so screen readers stay\n    // informative even when the visual label is compact or icon-only.\n    const longName = resolveAriaName(provider, intent)\n    const ariaLabelForButton = iconOnly || compact || lastUsed\n      ? `${longName}${lastUsed ? ' (last used)' : ''}`\n      : undefined\n\n    // \"Last used\" badge — sits ON the top-right corner of the button,\n    // overlapping the button edge for the classic \"notification badge\"\n    // look. Rendered as a SIBLING to Button (not a child) because Button's\n    // `overflow-hidden` would clip a child poking outside the corner.\n    //\n    // Composable: pass `lastUsedSlot` (ReactNode or render fn) to replace\n    // the default pill. `lastUsedLabel` swaps just the text inside it.\n    // aria-label augments the accessible name with \"(last used)\".\n    const defaultBadge = (\n      <span className=\"pointer-events-none inline-flex items-center rounded-pill bg-accent-9 text-accent-fg px-2 py-1 text-[9px] leading-none font-semibold uppercase tracking-wide shadow-overlay\">\n        {lastUsedLabel}\n      </span>\n    )\n    const customBadge =\n      typeof lastUsedSlot === 'function' ? lastUsedSlot({ label: lastUsedLabel }) : lastUsedSlot\n    const renderedBadge = customBadge ?? defaultBadge\n\n    const buttonEl = (\n      <Button\n        ref={ref}\n        variant={variant}\n        color=\"neutral\"\n        size={iconOnly ? ICON_ONLY_SIZE[size] ?? 'icon-md' : size}\n        fullWidth={fullWidth && !iconOnly}\n        startIcon={iconOnly ? undefined : (glyphNode as React.ReactElement)}\n        aria-label={ariaLabelForButton}\n        data-provider={provider}\n        data-oauth-variant={variant}\n        data-last-used={lastUsed || undefined}\n        className={className}\n        {...buttonProps}\n      >\n        {iconOnly ? glyphNode : label}\n      </Button>\n    )\n\n    const showBadge = lastUsed && !iconOnly\n    if (!showBadge && !helperText) return buttonEl\n\n    return (\n      <div className={cn('relative inline-flex flex-col', fullWidth && 'w-full')}>\n        {buttonEl}\n        {showBadge ? (\n          <span\n            aria-hidden=\"true\"\n            data-last-used-badge=\"\"\n            className=\"pointer-events-none absolute -top-[10px] -right-2 z-10\"\n          >\n            {renderedBadge}\n          </span>\n        ) : null}\n        {helperText ? (\n          <span className=\"mt-ds-02 text-ds-sm text-surface-fg-subtle\">{helperText}</span>\n        ) : null}\n      </div>\n    )\n  },\n)\nOAuthButton.displayName = 'OAuthButton'\n\nexport { OAuthButton }\n\n// ── OAuthGroup ─────────────────────────────────────────────────\n\nexport interface OAuthGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout. `vertical` (default) stacks full-width buttons. */\n  orientation?: 'vertical' | 'horizontal'\n  /** Gap token between buttons. Default: `ds-03` */\n  gap?: 'ds-02' | 'ds-03' | 'ds-04'\n  /** Stretch children to fill width (vertical only). Default: true */\n  fullWidth?: boolean\n  /**\n   * Move any child with `lastUsed` to position 0. Stripe-style ordering — the\n   * provider the user picked last time becomes the top option, which gives a\n   * stronger conversion lift than a \"Last used\" badge does on its own.\n   * Default: false (preserve source order).\n   */\n  reorderLastUsedFirst?: boolean\n}\n\n/**\n * Stacked layout wrapper for OAuth buttons with consistent spacing. Defaults to\n * vertical, full-width children — the dominant sign-in pattern. For an icon-only\n * row, set `orientation=\"horizontal\"` and use `<OAuthButton iconOnly />`.\n */\nconst OAuthGroup = React.forwardRef<HTMLDivElement, OAuthGroupProps>(\n  (\n    {\n      orientation = 'vertical',\n      gap = 'ds-03',\n      fullWidth = true,\n      reorderLastUsedFirst = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const gapClass =\n      gap === 'ds-02' ? 'gap-ds-02' : gap === 'ds-04' ? 'gap-ds-04' : 'gap-ds-03'\n    const stretch = orientation === 'vertical' && fullWidth\n\n    const ordered = React.useMemo(() => {\n      if (!reorderLastUsedFirst) return children\n      const arr = React.Children.toArray(children)\n      const lastUsedIdx = arr.findIndex(\n        (c) => React.isValidElement(c) && (c.props as { lastUsed?: boolean })?.lastUsed,\n      )\n      if (lastUsedIdx <= 0) return children\n      const next = [...arr]\n      const [pulled] = next.splice(lastUsedIdx, 1)\n      next.unshift(pulled)\n      return next\n    }, [children, reorderLastUsedFirst])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex',\n          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',\n          gapClass,\n          // Force both the direct wrapper AND the leaf <button> to stretch.\n          // OAuthButton's outer wrapper picks up [&>*]:w-full; the button itself\n          // sits two layers deep when a helperText wrapper exists, so\n          // [&_button]:w-full covers both cases (wrapped + unwrapped) without\n          // affecting unrelated descendants — only Buttons live inside.\n          stretch && 'w-full [&>*]:w-full [&_button]:w-full',\n          className,\n        )}\n        {...props}\n      >\n        {ordered}\n      </div>\n    )\n  },\n)\nOAuthGroup.displayName = 'OAuthGroup'\n\nexport { OAuthGroup }\n\n// ── OAuthDivider ───────────────────────────────────────────────\n\nexport interface OAuthDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Text between the rules. Default: \"or\" */\n  label?: React.ReactNode\n}\n\nconst OAuthDivider = React.forwardRef<HTMLDivElement, OAuthDividerProps>(\n  ({ label = 'or', className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn('flex items-center gap-ds-03', className)}\n      {...props}\n    >\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n      <span className=\"text-ds-sm text-surface-fg-subtle uppercase tracking-wide\">{label}</span>\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n    </div>\n  ),\n)\nOAuthDivider.displayName = 'OAuthDivider'\n\nexport { OAuthDivider }\n\n// ── OAuthConnectionRow (settings page — linked state) ──────────\n\nexport interface OAuthConnectionRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  provider: OAuthProvider\n  /** Optional account identifier shown next to the provider name (e.g. email) */\n  accountLabel?: React.ReactNode\n  /** Whether the provider is currently linked */\n  connected: boolean\n  /** Click handler for the connect/disconnect action */\n  onAction?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Promise-returning click handler — uses Button's async state machine */\n  onActionAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n  /** Override the action label */\n  actionLabel?: React.ReactNode\n  /** Disable the action button */\n  disabled?: boolean\n  /** Override the default glyph. Accepts any `IconInput`. */\n  icon?: IconInput\n}\n\n/**\n * Settings-page row representing a linked OAuth provider. Different surface\n * from sign-in: this is an existing connection the user can disconnect or\n * (re-)connect. Renders glyph + provider name + optional account label + a\n * connect/disconnect button.\n */\nconst OAuthConnectionRow = React.forwardRef<HTMLDivElement, OAuthConnectionRowProps>(\n  (\n    {\n      provider,\n      accountLabel,\n      connected,\n      onAction,\n      onActionAsync,\n      actionLabel,\n      disabled,\n      icon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const DefaultGlyph = providerIcon[provider]\n    const name = providerDisplay[provider]\n    const resolvedLabel = actionLabel ?? (connected ? 'Disconnect' : `Connect ${name}`)\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-raised',\n          className,\n        )}\n        data-provider={provider}\n        data-connected={connected ? 'true' : 'false'}\n        {...props}\n      >\n        <div className=\"flex items-center gap-ds-03 min-w-0\">\n          {normalizeIcon(icon) ?? <DefaultGlyph size={24} aria-hidden />}\n          <div className=\"flex flex-col min-w-0\">\n            <span className=\"text-ds-md font-semibold text-surface-fg truncate\">{name}</span>\n            {accountLabel ? (\n              <span className=\"text-ds-sm text-surface-fg-muted truncate\">{accountLabel}</span>\n            ) : connected ? (\n              <span className=\"text-ds-sm text-success-11\">Connected</span>\n            ) : (\n              <span className=\"text-ds-sm text-surface-fg-subtle\">Not connected</span>\n            )}\n          </div>\n        </div>\n        <Button\n          size=\"sm\"\n          variant={connected ? 'soft' : 'solid'}\n          color={connected ? 'neutral' : 'accent'}\n          disabled={disabled}\n          onClick={onAction}\n          onClickAsync={onActionAsync}\n        >\n          {resolvedLabel}\n        </Button>\n      </div>\n    )\n  },\n)\nOAuthConnectionRow.displayName = 'OAuthConnectionRow'\n\nexport { OAuthConnectionRow }\n\n// ── OAuthGlyph (atomic glyph render) ───────────────────────────\n\nexport interface OAuthGlyphProps extends Omit<React.SVGAttributes<SVGElement>, 'children'> {\n  provider: OAuthProvider\n  /** Glyph pixel size. Default 18. */\n  size?: number\n}\n\n/**\n * Render just the provider glyph — useful when building a custom OAuth\n * trigger (e.g. an icon-button inside a Tooltip, or a provider chip on a\n * profile card). Defaults to the Tabler glyph; the icon prop on\n * `OAuthButton` is the right escape hatch for the brand multi-colour mark.\n */\nconst OAuthGlyph = React.forwardRef<SVGSVGElement, OAuthGlyphProps>(\n  ({ provider, size = 18, ...props }, ref) => {\n    const Cmp = providerIcon[provider] as React.ComponentType<{\n      size?: number\n      'aria-hidden'?: boolean\n      ref?: React.Ref<SVGSVGElement>\n    }>\n    return <Cmp ref={ref} size={size} aria-hidden {...(props as Record<string, unknown>)} />\n  },\n)\nOAuthGlyph.displayName = 'OAuthGlyph'\n\nexport { OAuthGlyph }\n\n// ── Static helpers (composable building blocks) ────────────────\n\n/**\n * Resolve the visible label for a provider × intent combo. Useful when\n * rendering OAuth UIs outside of `OAuthButton` (e.g. a Confirm dialog\n * \"Disconnect from Google?\" title).\n */\nexport function getOAuthLabel(provider: OAuthProvider, intent: OAuthIntent = 'continue', compact = false): string {\n  return resolveLabel(provider, intent, compact)\n}\n\n/** Display name for a provider, ready for sentence interpolation. */\nexport function getOAuthName(provider: OAuthProvider): string {\n  return providerName(provider)\n}\n\n// ── Compound namespace ─────────────────────────────────────────\n\n/**\n * Namespaced API — drop-in alternative to importing each piece separately.\n *\n * @example\n * import { OAuth } from '@devalok/shilp-sutra/ui/oauth-button'\n *\n * <OAuth.Group reorderLastUsedFirst>\n *   <OAuth.Button provider=\"google\" lastUsed />\n *   <OAuth.Button provider=\"passkey\" />\n *   <OAuth.Divider />\n *   <OAuth.Button provider=\"sso\" variant=\"ghost\" />\n * </OAuth.Group>\n */\nexport const OAuth = {\n  Button: OAuthButton,\n  Group: OAuthGroup,\n  Divider: OAuthDivider,\n  ConnectionRow: OAuthConnectionRow,\n  Glyph: OAuthGlyph,\n  getLabel: getOAuthLabel,\n  getName: getOAuthName,\n} as const\n"],"mappings":"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"}
+{"version":3,"file":"oauth-button.js","names":[],"sources":["../../src/ui/oauth-button/oauth-button.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconBrandApple,\n  IconBrandDiscord,\n  IconBrandFacebook,\n  IconBrandGithub,\n  IconBrandGitlab,\n  IconBrandGoogleFilled,\n  IconBrandLinkedin,\n  IconBrandSlack,\n  IconBrandWindows,\n  IconBrandXFilled,\n  IconFingerprint,\n  IconKey,\n  IconMail,\n} from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from '../button'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { TruncatedText } from '../truncated-text'\n\n// ── Types ───────────────────────────────────────────────────────\n\nexport type OAuthProvider =\n  | 'google'\n  | 'apple'\n  | 'github'\n  | 'microsoft'\n  | 'x'\n  | 'linkedin'\n  | 'facebook'\n  | 'discord'\n  | 'slack'\n  | 'gitlab'\n  | 'sso'\n  | 'email'\n  | 'passkey'\n\nexport type OAuthIntent = 'continue' | 'signin' | 'signup'\n\n/**\n * Visual treatment — 1:1 with Button's variant axis. OAuthButton is a thin\n * wrapper over Button, so every variant renders pixel-for-pixel identical\n * to a regular Button at the same variant + size. Brand identity lives in\n * the glyph (override via `icon` for a brand-multicolour SVG), not the\n * button surface.\n *\n * - `solid` (default) | `soft` | `outline` | `ghost`\n */\nexport type OAuthVariant = 'solid' | 'soft' | 'outline' | 'ghost'\n\n/** @deprecated Use `OAuthVariant`. brand/dark map to solid; outline passes through. */\nexport type OAuthAppearance = 'brand' | 'outline' | 'dark'\n\n// ── Static metadata ─────────────────────────────────────────────\n\nconst providerDisplay: Record<OAuthProvider, string> = {\n  google: 'Google',\n  apple: 'Apple',\n  github: 'GitHub',\n  microsoft: 'Microsoft',\n  x: 'X',\n  linkedin: 'LinkedIn',\n  facebook: 'Facebook',\n  discord: 'Discord',\n  slack: 'Slack',\n  gitlab: 'GitLab',\n  sso: 'SSO',\n  email: 'email',\n  passkey: 'a passkey',\n}\n\n// Default glyph per provider — sourced from Tabler (already a peer dep).\n// Consumer can override with the `icon` prop to drop in a brand-multicolour SVG.\nconst providerIcon: Record<OAuthProvider, React.ComponentType<{ size?: number | string; 'aria-hidden'?: boolean }>> = {\n  google: IconBrandGoogleFilled,\n  apple: IconBrandApple,\n  github: IconBrandGithub,\n  microsoft: IconBrandWindows,\n  x: IconBrandXFilled,\n  linkedin: IconBrandLinkedin,\n  facebook: IconBrandFacebook,\n  discord: IconBrandDiscord,\n  slack: IconBrandSlack,\n  gitlab: IconBrandGitlab,\n  sso: IconKey,\n  email: IconMail,\n  passkey: IconFingerprint,\n}\n\nfunction providerName(provider: OAuthProvider): string {\n  // Display name for `compact` mode — drops the \"a\" article on passkey.\n  return provider === 'passkey' ? 'Passkey' : providerDisplay[provider]\n}\n\nfunction defaultLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  const name = providerDisplay[provider]\n  switch (intent) {\n    case 'signin':\n      return `Sign in with ${name}`\n    case 'signup':\n      return `Sign up with ${name}`\n    case 'continue':\n    default:\n      return `Continue with ${name}`\n  }\n}\n\nconst providerCopyOverride: Partial<Record<OAuthProvider, Partial<Record<OAuthIntent, string>>>> = {\n  passkey: {\n    continue: 'Continue with a passkey',\n    signin: 'Sign in with a passkey',\n    signup: 'Create a passkey',\n  },\n}\n\nfunction resolveLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, compact)\n}\n\n/** Long-form name used for aria-label even when compact label is rendered. */\nfunction resolveAriaName(provider: OAuthProvider, intent: OAuthIntent): string {\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, false)\n}\n\n// **Visual treatment:** OAuthButton is a thin wrapper over `<Button>` — every\n// height, padding, radius, border, hover, focus, active, and disabled state is\n// the DS Button's. We do NOT inject per-provider hex backgrounds: brand\n// identity lives in the glyph (Tabler default; consumer can pass a real\n// multicolour SVG via `icon`). This guarantees pixel-for-pixel consistency\n// with every other button in the system at every variant.\n\nconst ICON_PX: Record<string, number> = {\n  xs: 14,\n  sm: 16,\n  md: 18,\n  lg: 20,\n  'compact-xs': 14,\n  'compact-sm': 14,\n  'compact-md': 16,\n  icon: 18,\n  'icon-xs': 14,\n  'icon-sm': 16,\n  'icon-md': 18,\n  'icon-lg': 20,\n}\n\nconst ICON_ONLY_SIZE: Record<string, NonNullable<ButtonProps['size']>> = {\n  xs: 'icon-xs',\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n  'compact-xs': 'icon-xs',\n  'compact-sm': 'icon-sm',\n  'compact-md': 'icon-md',\n}\n\n// ── Component ───────────────────────────────────────────────────\n\n/**\n * Props for `OAuthButton` — a brand-aware sign-in button for OAuth providers.\n *\n * Composes on top of `<Button>`, inheriting `size`, `loading`, `onClickAsync`,\n * `fullWidth`, and async state machinery. The provider's icon, label, and\n * brand-coloured styling are derived from the `provider` prop.\n *\n * **Provider** (required): includes 10 social providers + 3 generic\n * identifiers (`sso` enterprise, `email` magic-link, `passkey` WebAuthn).\n *\n * **Intent**: drives the verb in the label.\n * - `continue` (default) — \"Continue with Google\" — works on login and signup.\n * - `signin` — \"Sign in with Google\".\n * - `signup` — \"Sign up with Google\".\n *\n * **Appearance**: visual treatment.\n * - `brand` (default) — provider's brand background colour.\n * - `outline` — DS-neutral outline with monochrome glyph. Best for uniform rows.\n * - `dark` — unified Apple-style across all providers for visual consistency.\n *\n * **icon**: override the default Tabler glyph (e.g. drop in the provider's\n * official multicolour SVG downloaded from their brand page).\n *\n * **iconOnly**: render a square icon button. Provider name kept in `aria-label`.\n *\n * **lastUsed**: shows a small \"Last used\" pill above the button — high-converting\n * UX hint. Consumer tracks which provider the user picked previously.\n *\n * **helperText**: optional reassurance copy rendered below the button.\n *\n * @example\n * <OAuthButton provider=\"google\" intent=\"continue\" fullWidth onClickAsync={signInWithGoogle} />\n *\n * @example\n * // True brand-multicolour glyph:\n * <OAuthButton provider=\"google\" icon={<GoogleGSvg />} />\n *\n * @example\n * <OAuthGroup>\n *   <OAuthButton provider=\"google\" appearance=\"dark\" />\n *   <OAuthButton provider=\"apple\"  appearance=\"dark\" />\n *   <OAuthButton provider=\"github\" appearance=\"dark\" />\n * </OAuthGroup>\n */\nexport interface OAuthButtonProps\n  extends Omit<\n    ButtonProps,\n    'variant' | 'color' | 'startIcon' | 'endIcon' | 'shape' | 'children'\n  > {\n  /** OAuth provider this button represents */\n  provider: OAuthProvider\n  /** Verb in the default label. Default: `continue` */\n  intent?: OAuthIntent\n  /**\n   * Visual treatment. Default: `solid`. Mirrors Button's variant axis with\n   * an extra `dark` for row coherence across providers.\n   */\n  variant?: OAuthVariant\n  /** @deprecated Use `variant`. `appearance=\"brand\"` maps to `variant=\"solid\"`. */\n  appearance?: OAuthAppearance\n  /** Override the default glyph (e.g. brand-multicolour SVG). Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Render a compact icon-only button (provider name kept in aria-label) */\n  iconOnly?: boolean\n  /**\n   * Short label — renders just the provider name (\"Google\") instead of the\n   * full \"Continue with Google\". Use under an explicit \"Or sign in with\"\n   * divider where the verb is already established. aria-label still gets the\n   * full long form for screen readers.\n   */\n  compact?: boolean\n  /**\n   * Show \"Last used\" hint — a small pill anchored to the top-right corner of\n   * the button (sits ON the corner, half outside the button bounds).\n   */\n  lastUsed?: boolean\n  /**\n   * Customise the \"Last used\" badge. Pass a ReactNode to replace the entire\n   * pill (use this for custom copy, icons, or styling), or a render fn that\n   * receives the default props for tweaks. Only rendered when `lastUsed` is\n   * also set so the wrapper / aria augmentation logic stays consistent.\n   *\n   * @example\n   * <OAuthButton provider=\"google\" lastUsed lastUsedSlot={<MyBadge />} />\n   */\n  lastUsedSlot?: React.ReactNode | ((defaults: { label: string }) => React.ReactNode)\n  /** Override the visible badge label text. Default: \"Last used\". */\n  lastUsedLabel?: string\n  /** Reassurance copy rendered below the button */\n  helperText?: React.ReactNode\n  /** Override the default label entirely (i18n / custom copy) */\n  children?: React.ReactNode\n}\n\nconst OAuthButton = React.forwardRef<HTMLButtonElement, OAuthButtonProps>(\n  (\n    {\n      provider,\n      intent = 'continue',\n      variant: variantProp,\n      appearance,\n      icon,\n      iconOnly = false,\n      compact = false,\n      lastUsed = false,\n      lastUsedSlot,\n      lastUsedLabel = 'Last used',\n      helperText,\n      children,\n      className,\n      size: sizeProp,\n      fullWidth = false,\n      ...buttonProps\n    },\n    ref,\n  ) => {\n    const size: NonNullable<ButtonProps['size']> = sizeProp ?? 'md'\n    const DefaultGlyph = providerIcon[provider]\n    const iconPx = ICON_PX[size] ?? 18\n    const glyphNode = normalizeIcon(icon) ?? <DefaultGlyph size={iconPx} aria-hidden />\n    const label = children ?? resolveLabel(provider, intent, compact)\n\n    // Resolve final variant. `appearance` is a deprecated alias mapped to\n    // the closest DS variant — brand/dark both collapse to solid since\n    // OAuthButton no longer injects per-provider brand colours.\n    const variant: OAuthVariant =\n      variantProp ??\n      (appearance === 'outline' ? 'outline' : 'solid')\n\n    // aria-label always carries the long-form name so screen readers stay\n    // informative even when the visual label is compact or icon-only.\n    const longName = resolveAriaName(provider, intent)\n    const ariaLabelForButton = iconOnly || compact || lastUsed\n      ? `${longName}${lastUsed ? ' (last used)' : ''}`\n      : undefined\n\n    // \"Last used\" badge — sits ON the top-right corner of the button,\n    // overlapping the button edge for the classic \"notification badge\"\n    // look. Rendered as a SIBLING to Button (not a child) because Button's\n    // `overflow-hidden` would clip a child poking outside the corner.\n    //\n    // Composable: pass `lastUsedSlot` (ReactNode or render fn) to replace\n    // the default pill. `lastUsedLabel` swaps just the text inside it.\n    // aria-label augments the accessible name with \"(last used)\".\n    // intentional: a 9px corner pill, smaller than Badge's smallest size (xs).\n    // Not worth a sub-xs Badge size for one call site — kept as a documented exception.\n    const defaultBadge = (\n      <span className=\"pointer-events-none inline-flex items-center rounded-pill bg-accent-9 text-accent-fg px-2 py-1 text-ds-2xs leading-none font-semibold uppercase tracking-wide shadow-overlay\">\n        {lastUsedLabel}\n      </span>\n    )\n    const customBadge =\n      typeof lastUsedSlot === 'function' ? lastUsedSlot({ label: lastUsedLabel }) : lastUsedSlot\n    const renderedBadge = customBadge ?? defaultBadge\n\n    const buttonEl = (\n      <Button\n        ref={ref}\n        variant={variant}\n        color=\"neutral\"\n        size={iconOnly ? ICON_ONLY_SIZE[size] ?? 'icon-md' : size}\n        fullWidth={fullWidth && !iconOnly}\n        startIcon={iconOnly ? undefined : (glyphNode as React.ReactElement)}\n        aria-label={ariaLabelForButton}\n        data-provider={provider}\n        data-oauth-variant={variant}\n        data-last-used={lastUsed || undefined}\n        className={className}\n        {...buttonProps}\n      >\n        {iconOnly ? glyphNode : label}\n      </Button>\n    )\n\n    const showBadge = lastUsed && !iconOnly\n    if (!showBadge && !helperText) return buttonEl\n\n    return (\n      <div className={cn('relative inline-flex flex-col', fullWidth && 'w-full')}>\n        {buttonEl}\n        {showBadge ? (\n          <span\n            aria-hidden=\"true\"\n            data-last-used-badge=\"\"\n            className=\"pointer-events-none absolute -top-[10px] -right-2 z-10\"\n          >\n            {renderedBadge}\n          </span>\n        ) : null}\n        {helperText ? (\n          <span className=\"mt-ds-02 text-ds-sm text-surface-fg-subtle\">{helperText}</span>\n        ) : null}\n      </div>\n    )\n  },\n)\nOAuthButton.displayName = 'OAuthButton'\n\nexport { OAuthButton }\n\n// ── OAuthGroup ─────────────────────────────────────────────────\n\nexport interface OAuthGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout. `vertical` (default) stacks full-width buttons. */\n  orientation?: 'vertical' | 'horizontal'\n  /** Gap token between buttons. Default: `ds-03` */\n  gap?: 'ds-02' | 'ds-03' | 'ds-04'\n  /** Stretch children to fill width (vertical only). Default: true */\n  fullWidth?: boolean\n  /**\n   * Move any child with `lastUsed` to position 0. Stripe-style ordering — the\n   * provider the user picked last time becomes the top option, which gives a\n   * stronger conversion lift than a \"Last used\" badge does on its own.\n   * Default: false (preserve source order).\n   */\n  reorderLastUsedFirst?: boolean\n}\n\n/**\n * Stacked layout wrapper for OAuth buttons with consistent spacing. Defaults to\n * vertical, full-width children — the dominant sign-in pattern. For an icon-only\n * row, set `orientation=\"horizontal\"` and use `<OAuthButton iconOnly />`.\n */\nconst OAuthGroup = React.forwardRef<HTMLDivElement, OAuthGroupProps>(\n  (\n    {\n      orientation = 'vertical',\n      gap = 'ds-03',\n      fullWidth = true,\n      reorderLastUsedFirst = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const gapClass =\n      gap === 'ds-02' ? 'gap-ds-02' : gap === 'ds-04' ? 'gap-ds-04' : 'gap-ds-03'\n    const stretch = orientation === 'vertical' && fullWidth\n\n    const ordered = React.useMemo(() => {\n      if (!reorderLastUsedFirst) return children\n      const arr = React.Children.toArray(children)\n      const lastUsedIdx = arr.findIndex(\n        (c) => React.isValidElement(c) && (c.props as { lastUsed?: boolean })?.lastUsed,\n      )\n      if (lastUsedIdx <= 0) return children\n      const next = [...arr]\n      const [pulled] = next.splice(lastUsedIdx, 1)\n      next.unshift(pulled)\n      return next\n    }, [children, reorderLastUsedFirst])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex',\n          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',\n          gapClass,\n          // Force both the direct wrapper AND the leaf <button> to stretch.\n          // OAuthButton's outer wrapper picks up [&>*]:w-full; the button itself\n          // sits two layers deep when a helperText wrapper exists, so\n          // [&_button]:w-full covers both cases (wrapped + unwrapped) without\n          // affecting unrelated descendants — only Buttons live inside.\n          stretch && 'w-full [&>*]:w-full [&_button]:w-full',\n          className,\n        )}\n        {...props}\n      >\n        {ordered}\n      </div>\n    )\n  },\n)\nOAuthGroup.displayName = 'OAuthGroup'\n\nexport { OAuthGroup }\n\n// ── OAuthDivider ───────────────────────────────────────────────\n\nexport interface OAuthDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Text between the rules. Default: \"or\" */\n  label?: React.ReactNode\n}\n\nconst OAuthDivider = React.forwardRef<HTMLDivElement, OAuthDividerProps>(\n  ({ label = 'or', className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn('flex items-center gap-ds-03', className)}\n      {...props}\n    >\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n      <span className=\"text-ds-sm text-surface-fg-subtle uppercase tracking-wide\">{label}</span>\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n    </div>\n  ),\n)\nOAuthDivider.displayName = 'OAuthDivider'\n\nexport { OAuthDivider }\n\n// ── OAuthConnectionRow (settings page — linked state) ──────────\n\nexport interface OAuthConnectionRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  provider: OAuthProvider\n  /** Optional account identifier shown next to the provider name (e.g. email) */\n  accountLabel?: React.ReactNode\n  /** Whether the provider is currently linked */\n  connected: boolean\n  /** Click handler for the connect/disconnect action */\n  onAction?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Promise-returning click handler — uses Button's async state machine */\n  onActionAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n  /** Override the action label */\n  actionLabel?: React.ReactNode\n  /** Disable the action button */\n  disabled?: boolean\n  /** Override the default glyph. Accepts any `IconInput`. */\n  icon?: IconInput\n}\n\n/**\n * Settings-page row representing a linked OAuth provider. Different surface\n * from sign-in: this is an existing connection the user can disconnect or\n * (re-)connect. Renders glyph + provider name + optional account label + a\n * connect/disconnect button.\n */\nconst OAuthConnectionRow = React.forwardRef<HTMLDivElement, OAuthConnectionRowProps>(\n  (\n    {\n      provider,\n      accountLabel,\n      connected,\n      onAction,\n      onActionAsync,\n      actionLabel,\n      disabled,\n      icon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const DefaultGlyph = providerIcon[provider]\n    const name = providerDisplay[provider]\n    const resolvedLabel = actionLabel ?? (connected ? 'Disconnect' : `Connect ${name}`)\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-raised',\n          className,\n        )}\n        data-provider={provider}\n        data-connected={connected ? 'true' : 'false'}\n        {...props}\n      >\n        <div className=\"flex items-center gap-ds-03 min-w-0\">\n          {normalizeIcon(icon) ?? <DefaultGlyph size={24} aria-hidden />}\n          <div className=\"flex flex-col min-w-0\">\n            <TruncatedText className=\"text-ds-md font-semibold text-surface-fg\">{name}</TruncatedText>\n            {accountLabel ? (\n              // Account labels are usually an email — middle-truncate to keep the domain.\n              // Only a string can be measured/truncated; fall back to a plain clip otherwise.\n              typeof accountLabel === 'string' ? (\n                <TruncatedText mode=\"middle\" className=\"text-ds-sm text-surface-fg-muted\">\n                  {accountLabel}\n                </TruncatedText>\n              ) : (\n                <span className=\"text-ds-sm text-surface-fg-muted truncate\">{accountLabel}</span>\n              )\n            ) : connected ? (\n              <span className=\"text-ds-sm text-success-11\">Connected</span>\n            ) : (\n              <span className=\"text-ds-sm text-surface-fg-subtle\">Not connected</span>\n            )}\n          </div>\n        </div>\n        <Button\n          size=\"sm\"\n          variant={connected ? 'soft' : 'solid'}\n          color={connected ? 'neutral' : 'accent'}\n          disabled={disabled}\n          onClick={onAction}\n          onClickAsync={onActionAsync}\n        >\n          {resolvedLabel}\n        </Button>\n      </div>\n    )\n  },\n)\nOAuthConnectionRow.displayName = 'OAuthConnectionRow'\n\nexport { OAuthConnectionRow }\n\n// ── OAuthGlyph (atomic glyph render) ───────────────────────────\n\nexport interface OAuthGlyphProps extends Omit<React.SVGAttributes<SVGElement>, 'children'> {\n  provider: OAuthProvider\n  /** Glyph pixel size. Default 18. */\n  size?: number\n}\n\n/**\n * Render just the provider glyph — useful when building a custom OAuth\n * trigger (e.g. an icon-button inside a Tooltip, or a provider chip on a\n * profile card). Defaults to the Tabler glyph; the icon prop on\n * `OAuthButton` is the right escape hatch for the brand multi-colour mark.\n */\nconst OAuthGlyph = React.forwardRef<SVGSVGElement, OAuthGlyphProps>(\n  ({ provider, size = 18, ...props }, ref) => {\n    const Cmp = providerIcon[provider] as React.ComponentType<{\n      size?: number\n      'aria-hidden'?: boolean\n      ref?: React.Ref<SVGSVGElement>\n    }>\n    return <Cmp ref={ref} size={size} aria-hidden {...(props as Record<string, unknown>)} />\n  },\n)\nOAuthGlyph.displayName = 'OAuthGlyph'\n\nexport { OAuthGlyph }\n\n// ── Static helpers (composable building blocks) ────────────────\n\n/**\n * Resolve the visible label for a provider × intent combo. Useful when\n * rendering OAuth UIs outside of `OAuthButton` (e.g. a Confirm dialog\n * \"Disconnect from Google?\" title).\n */\nexport function getOAuthLabel(provider: OAuthProvider, intent: OAuthIntent = 'continue', compact = false): string {\n  return resolveLabel(provider, intent, compact)\n}\n\n/** Display name for a provider, ready for sentence interpolation. */\nexport function getOAuthName(provider: OAuthProvider): string {\n  return providerName(provider)\n}\n\n// ── Compound namespace ─────────────────────────────────────────\n\n/**\n * Namespaced API — drop-in alternative to importing each piece separately.\n *\n * @example\n * import { OAuth } from '@devalok/shilp-sutra/ui/oauth-button'\n *\n * <OAuth.Group reorderLastUsedFirst>\n *   <OAuth.Button provider=\"google\" lastUsed />\n *   <OAuth.Button provider=\"passkey\" />\n *   <OAuth.Divider />\n *   <OAuth.Button provider=\"sso\" variant=\"ghost\" />\n * </OAuth.Group>\n */\nexport const OAuth = {\n  Button: OAuthButton,\n  Group: OAuthGroup,\n  Divider: OAuthDivider,\n  ConnectionRow: OAuthConnectionRow,\n  Glyph: OAuthGlyph,\n  getLabel: getOAuthLabel,\n  getName: getOAuthName,\n} as const\n"],"mappings":"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"}

package/dist/_chunks/tree-view.js

@@ -211,7 +211,7 @@ var _ = a.forwardRef(({ itemId: o, label: s, icon: d, secondaryLabel: f, actions
 					})
 				}),
 				/* @__PURE__ */ c("span", {
-					className: "truncate text-ds-sm",
+					className: "min-w-0 truncate text-ds-sm",
 					children: s
 				}),
 				f && /* @__PURE__ */ c("span", {

package/dist/_chunks/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/ui/tree-view/use-tree.ts","../../src/ui/tree-view/tree-view.tsx","../../src/ui/tree-view/tree-item.tsx"],"sourcesContent":["import { useCallback,useState } from 'react'\n\nimport type { IconInput } from '../lib/icon-input'\n\nexport interface TreeNode {\n  id: string\n  label: string\n  icon?: IconInput\n  children?: TreeNode[]\n  disabled?: boolean\n}\n\ninterface UseTreeOptions {\n  defaultExpanded?: string[]\n  defaultSelected?: string[]\n  multiSelect?: boolean\n  onSelect?: (selectedIds: string[]) => void\n  onExpand?: (expandedIds: string[]) => void\n}\n\nexport function useTree(options: UseTreeOptions = {}) {\n  const { defaultExpanded, defaultSelected, multiSelect, onSelect, onExpand } = options\n\n  const [expanded, setExpanded] = useState<Set<string>>(\n    new Set(defaultExpanded ?? []),\n  )\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(defaultSelected ?? []),\n  )\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((prev) => {\n        const next = new Set(prev)\n        if (next.has(id)) next.delete(id)\n        else next.add(id)\n        onExpand?.(Array.from(next))\n        return next\n      })\n    },\n    [onExpand],\n  )\n\n  const select = useCallback(\n    (id: string, event?: React.MouseEvent) => {\n      setSelected((prev) => {\n        let next: Set<string>\n        if (multiSelect && event?.ctrlKey) {\n          next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n        } else {\n          next = new Set([id])\n        }\n        onSelect?.(Array.from(next))\n        return next\n      })\n    },\n    [multiSelect, onSelect],\n  )\n\n  return {\n    expanded,\n    selected,\n    toggle,\n    select,\n    isExpanded: (id: string) => expanded.has(id),\n    isSelected: (id: string) => selected.has(id),\n    expandAll: (ids: string[]) => setExpanded(new Set(ids)),\n    collapseAll: () => setExpanded(new Set()),\n  }\n}\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { TreeItem } from './tree-item'\nimport { type TreeNode,useTree } from './use-tree'\n\n// ─── Context ────────────────────────────────────────────────────────\ninterface TreeContextValue {\n  tree: ReturnType<typeof useTree>\n  checkboxes: boolean\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null)\n\nexport function useTreeContext() {\n  const ctx = React.useContext(TreeContext)\n  if (!ctx) {\n    throw new Error('TreeItem must be used within a <TreeView>')\n  }\n  return ctx\n}\n\n// ─── Props ──────────────────────────────────────────────────────────\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Data-driven mode: pass items array */\n  items?: TreeNode[]\n  /** Initially expanded node IDs */\n  defaultExpanded?: string[]\n  /** Initially selected node IDs */\n  defaultSelected?: string[]\n  /** Enable multi-select */\n  multiSelect?: boolean\n  /** Show checkboxes before each item */\n  checkboxes?: boolean\n  /** Called when selection changes */\n  onSelect?: (ids: string[]) => void\n  /** Called when expansion changes */\n  onExpand?: (ids: string[]) => void\n  className?: string\n  /** Declarative mode: render TreeItem children directly */\n  children?: React.ReactNode\n}\n\n// ─── Render nodes recursively (data-driven mode) ───────────────────\nfunction renderNodes(nodes: TreeNode[], depth: number = 0): React.ReactNode {\n  return nodes.map((node) => (\n    <TreeItem\n      key={node.id}\n      itemId={node.id}\n      label={node.label}\n      icon={node.icon}\n      disabled={node.disabled}\n      depth={depth}\n    >\n      {node.children && node.children.length > 0\n        ? renderNodes(node.children, depth + 1)\n        : undefined}\n    </TreeItem>\n  ))\n}\n\n// ─── Helper: collect all visible item IDs ───────────────────────────\nfunction getVisibleItemElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>('[data-tree-item]'),\n  ).filter((el) => {\n    // Items inside collapsed groups should not be focusable\n    let parent = el.parentElement\n    while (parent && parent !== container) {\n      if (parent.getAttribute('role') === 'group') {\n        const grid = parent.parentElement\n        if (grid && grid.classList.contains('grid-rows-[0fr]')) {\n          return false\n        }\n      }\n      parent = parent.parentElement\n    }\n    return true\n  })\n}\n\n// ─── Component ──────────────────────────────────────────────────────\nconst TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(\n  (\n    {\n      items,\n      defaultExpanded,\n      defaultSelected,\n      multiSelect = false,\n      checkboxes = false,\n      onSelect,\n      onExpand,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const tree = useTree({\n      defaultExpanded,\n      defaultSelected,\n      multiSelect,\n      onSelect,\n      onExpand,\n    })\n\n    const innerRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = (ref as React.RefObject<HTMLUListElement>) ?? innerRef\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n      const container = containerRef.current\n      if (!container) return\n\n      const visibleItems = getVisibleItemElements(container)\n      const currentIndex = visibleItems.findIndex(\n        (el) => el === document.activeElement,\n      )\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault()\n          const next = visibleItems[currentIndex + 1]\n          next?.focus()\n          break\n        }\n        case 'ArrowUp': {\n          e.preventDefault()\n          const prev = visibleItems[currentIndex - 1]\n          prev?.focus()\n          break\n        }\n        case 'ArrowRight': {\n          // Handled in TreeItem for expand; if already expanded, move to first child\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            if (itemId && tree.isExpanded(itemId)) {\n              e.preventDefault()\n              const nextItem = visibleItems[currentIndex + 1]\n              nextItem?.focus()\n            }\n          }\n          break\n        }\n        case 'ArrowLeft': {\n          // Handled in TreeItem for collapse; if already collapsed or leaf, move to parent\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            const treeItem = current.closest('[role=\"treeitem\"]')\n            const parentGroup = treeItem?.parentElement?.closest(\n              '[role=\"treeitem\"]',\n            )\n            if (itemId && !tree.isExpanded(itemId) && parentGroup) {\n              e.preventDefault()\n              const parentRow = parentGroup.querySelector<HTMLElement>(\n                '[data-tree-item]',\n              )\n              parentRow?.focus()\n            }\n          }\n          break\n        }\n        case 'Home': {\n          e.preventDefault()\n          visibleItems[0]?.focus()\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          visibleItems[visibleItems.length - 1]?.focus()\n          break\n        }\n      }\n    }\n\n    const ctxValue = React.useMemo<TreeContextValue>(\n      () => ({ tree, checkboxes }),\n      [tree, checkboxes],\n    )\n\n    const content = items ? renderNodes(items) : children\n\n    return (\n      <TreeContext.Provider value={ctxValue}>\n        <ul\n          ref={containerRef}\n          role=\"tree\"\n          aria-multiselectable={multiSelect || undefined}\n          onKeyDown={handleKeyDown}\n          className={cn('m-0 list-none p-0', className)}\n          {...props}\n        >\n          {content}\n        </ul>\n      </TreeContext.Provider>\n    )\n  },\n)\nTreeView.displayName = 'TreeView'\n\nexport { TreeView }\n","'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { useTreeContext } from './tree-view'\n\nexport interface TreeItemProps {\n  /** Unique identifier for this tree item */\n  itemId: string\n  /** Primary label content */\n  label: React.ReactNode\n  /** Optional icon rendered before the label. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Secondary label rendered after the primary label */\n  secondaryLabel?: React.ReactNode\n  /** Action buttons rendered at the end of the row */\n  actions?: React.ReactNode\n  /** Whether this item is disabled */\n  disabled?: boolean\n  /** Nested tree items */\n  children?: React.ReactNode\n  /** Depth level (used internally) */\n  depth?: number\n  /** Additional CSS class names */\n  className?: string\n}\n\nconst TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(\n  (\n    {\n      itemId,\n      label,\n      icon,\n      secondaryLabel,\n      actions,\n      disabled = false,\n      children,\n      depth = 0,\n      className,\n    },\n    ref,\n  ) => {\n    const ctx = useTreeContext()\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = ctx.tree.isExpanded(itemId)\n    const isSelected = ctx.tree.isSelected(itemId)\n\n    const handleRowClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      ctx.tree.select(itemId, e)\n    }\n\n    const handleChevronClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      if (disabled) return\n      ctx.tree.toggle(itemId)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ctx.tree.select(itemId)\n      }\n      if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n      if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n    }\n\n    // Compute indeterminate state for checkbox mode\n    const checkboxState = React.useMemo(() => {\n      if (!ctx.checkboxes || !hasChildren) {\n        return { checked: isSelected, indeterminate: false }\n      }\n      // Collect all descendant IDs\n      const descendants: string[] = []\n      const collectIds = (nodes: React.ReactNode) => {\n        React.Children.forEach(nodes, (child) => {\n          if (React.isValidElement<TreeItemProps>(child) && child.props.itemId) {\n            descendants.push(child.props.itemId)\n            if (child.props.children) {\n              collectIds(child.props.children)\n            }\n          }\n        })\n      }\n      collectIds(children)\n      const selectedCount = descendants.filter((id) =>\n        ctx.tree.isSelected(id),\n      ).length\n      if (selectedCount === 0 && !isSelected) {\n        return { checked: false, indeterminate: false }\n      }\n      if (selectedCount === descendants.length) {\n        return { checked: true, indeterminate: false }\n      }\n      return { checked: false, indeterminate: true }\n    }, [ctx.checkboxes, hasChildren, children, isSelected, ctx.tree])\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-level={depth + 1}\n        aria-disabled={disabled || undefined}\n        className=\"list-none\"\n      >\n        {/* Row */}\n        <div\n          role=\"presentation\"\n          data-tree-item={itemId}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleRowClick}\n          onKeyDown={handleKeyDown}\n          style={{ paddingLeft: `calc(${depth} * var(--spacing-ds-05b) + var(--spacing-ds-03))` }}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01',\n            'hover:bg-surface-raised',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            isSelected &&\n              'bg-accent-3 text-accent-11',\n            disabled && 'opacity-action-disabled cursor-not-allowed pointer-events-none',\n            className,\n          )}\n        >\n          {/* Expand chevron */}\n          {hasChildren ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              onClick={handleChevronClick}\n              className=\"flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n            >\n              <Icon\n                icon={IconChevronRight}\n                size=\"sm\"\n                className={cn(\n                  'transition-transform duration-moderate-02',\n                  isExpanded && 'rotate-90',\n                )}\n              />\n            </button>\n          ) : (\n            <span className=\"inline-block w-4 shrink-0\" aria-hidden=\"true\" />\n          )}\n\n          {/* Checkbox (optional) */}\n          {ctx.checkboxes && (\n            <Checkbox\n              checked={checkboxState.checked}\n              indeterminate={checkboxState.indeterminate}\n              disabled={disabled}\n              tabIndex={-1}\n              onClick={(e) => e.stopPropagation()}\n              onCheckedChange={() => {\n                if (!disabled) ctx.tree.select(itemId)\n              }}\n              className=\"shrink-0\"\n            />\n          )}\n\n          {/* Icon */}\n          {icon && (\n            <span className=\"flex shrink-0 items-center text-surface-fg-subtle\">\n              <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider>\n            </span>\n          )}\n\n          {/* Label */}\n          <span className=\"truncate text-ds-sm\">{label}</span>\n\n          {/* Secondary label */}\n          {secondaryLabel && (\n            <span className=\"ml-auto truncate text-ds-xs text-surface-fg-muted\">\n              {secondaryLabel}\n            </span>\n          )}\n\n          {/* Actions */}\n          {actions && (\n            <span\n              className=\"ml-auto flex shrink-0 items-center gap-ds-01\"\n              onClick={(e) => e.stopPropagation()}\n              role=\"presentation\"\n            >\n              {actions}\n            </span>\n          )}\n        </div>\n\n        {/* Children (collapsible) */}\n        {hasChildren && (\n          <div\n            role=\"group\"\n            className={cn(\n              'grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard',\n              isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <ul role=\"group\" className=\"overflow-hidden m-0 p-0\">\n              {React.Children.map(children, (child) => {\n                if (React.isValidElement<TreeItemProps>(child)) {\n                  return React.cloneElement(child, {\n                    depth: depth + 1,\n                  })\n                }\n                return child\n              })}\n            </ul>\n          </div>\n        )}\n      </li>\n    )\n  },\n)\nTreeItem.displayName = 'TreeItem'\n\nexport { TreeItem }\n"],"mappings":"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"}
+{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/ui/tree-view/use-tree.ts","../../src/ui/tree-view/tree-view.tsx","../../src/ui/tree-view/tree-item.tsx"],"sourcesContent":["import { useCallback,useState } from 'react'\n\nimport type { IconInput } from '../lib/icon-input'\n\nexport interface TreeNode {\n  id: string\n  label: string\n  icon?: IconInput\n  children?: TreeNode[]\n  disabled?: boolean\n}\n\ninterface UseTreeOptions {\n  defaultExpanded?: string[]\n  defaultSelected?: string[]\n  multiSelect?: boolean\n  onSelect?: (selectedIds: string[]) => void\n  onExpand?: (expandedIds: string[]) => void\n}\n\nexport function useTree(options: UseTreeOptions = {}) {\n  const { defaultExpanded, defaultSelected, multiSelect, onSelect, onExpand } = options\n\n  const [expanded, setExpanded] = useState<Set<string>>(\n    new Set(defaultExpanded ?? []),\n  )\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(defaultSelected ?? []),\n  )\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((prev) => {\n        const next = new Set(prev)\n        if (next.has(id)) next.delete(id)\n        else next.add(id)\n        onExpand?.(Array.from(next))\n        return next\n      })\n    },\n    [onExpand],\n  )\n\n  const select = useCallback(\n    (id: string, event?: React.MouseEvent) => {\n      setSelected((prev) => {\n        let next: Set<string>\n        if (multiSelect && event?.ctrlKey) {\n          next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n        } else {\n          next = new Set([id])\n        }\n        onSelect?.(Array.from(next))\n        return next\n      })\n    },\n    [multiSelect, onSelect],\n  )\n\n  return {\n    expanded,\n    selected,\n    toggle,\n    select,\n    isExpanded: (id: string) => expanded.has(id),\n    isSelected: (id: string) => selected.has(id),\n    expandAll: (ids: string[]) => setExpanded(new Set(ids)),\n    collapseAll: () => setExpanded(new Set()),\n  }\n}\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { TreeItem } from './tree-item'\nimport { type TreeNode,useTree } from './use-tree'\n\n// ─── Context ────────────────────────────────────────────────────────\ninterface TreeContextValue {\n  tree: ReturnType<typeof useTree>\n  checkboxes: boolean\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null)\n\nexport function useTreeContext() {\n  const ctx = React.useContext(TreeContext)\n  if (!ctx) {\n    throw new Error('TreeItem must be used within a <TreeView>')\n  }\n  return ctx\n}\n\n// ─── Props ──────────────────────────────────────────────────────────\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Data-driven mode: pass items array */\n  items?: TreeNode[]\n  /** Initially expanded node IDs */\n  defaultExpanded?: string[]\n  /** Initially selected node IDs */\n  defaultSelected?: string[]\n  /** Enable multi-select */\n  multiSelect?: boolean\n  /** Show checkboxes before each item */\n  checkboxes?: boolean\n  /** Called when selection changes */\n  onSelect?: (ids: string[]) => void\n  /** Called when expansion changes */\n  onExpand?: (ids: string[]) => void\n  className?: string\n  /** Declarative mode: render TreeItem children directly */\n  children?: React.ReactNode\n}\n\n// ─── Render nodes recursively (data-driven mode) ───────────────────\nfunction renderNodes(nodes: TreeNode[], depth: number = 0): React.ReactNode {\n  return nodes.map((node) => (\n    <TreeItem\n      key={node.id}\n      itemId={node.id}\n      label={node.label}\n      icon={node.icon}\n      disabled={node.disabled}\n      depth={depth}\n    >\n      {node.children && node.children.length > 0\n        ? renderNodes(node.children, depth + 1)\n        : undefined}\n    </TreeItem>\n  ))\n}\n\n// ─── Helper: collect all visible item IDs ───────────────────────────\nfunction getVisibleItemElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>('[data-tree-item]'),\n  ).filter((el) => {\n    // Items inside collapsed groups should not be focusable\n    let parent = el.parentElement\n    while (parent && parent !== container) {\n      if (parent.getAttribute('role') === 'group') {\n        const grid = parent.parentElement\n        if (grid && grid.classList.contains('grid-rows-[0fr]')) {\n          return false\n        }\n      }\n      parent = parent.parentElement\n    }\n    return true\n  })\n}\n\n// ─── Component ──────────────────────────────────────────────────────\nconst TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(\n  (\n    {\n      items,\n      defaultExpanded,\n      defaultSelected,\n      multiSelect = false,\n      checkboxes = false,\n      onSelect,\n      onExpand,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const tree = useTree({\n      defaultExpanded,\n      defaultSelected,\n      multiSelect,\n      onSelect,\n      onExpand,\n    })\n\n    const innerRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = (ref as React.RefObject<HTMLUListElement>) ?? innerRef\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n      const container = containerRef.current\n      if (!container) return\n\n      const visibleItems = getVisibleItemElements(container)\n      const currentIndex = visibleItems.findIndex(\n        (el) => el === document.activeElement,\n      )\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault()\n          const next = visibleItems[currentIndex + 1]\n          next?.focus()\n          break\n        }\n        case 'ArrowUp': {\n          e.preventDefault()\n          const prev = visibleItems[currentIndex - 1]\n          prev?.focus()\n          break\n        }\n        case 'ArrowRight': {\n          // Handled in TreeItem for expand; if already expanded, move to first child\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            if (itemId && tree.isExpanded(itemId)) {\n              e.preventDefault()\n              const nextItem = visibleItems[currentIndex + 1]\n              nextItem?.focus()\n            }\n          }\n          break\n        }\n        case 'ArrowLeft': {\n          // Handled in TreeItem for collapse; if already collapsed or leaf, move to parent\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            const treeItem = current.closest('[role=\"treeitem\"]')\n            const parentGroup = treeItem?.parentElement?.closest(\n              '[role=\"treeitem\"]',\n            )\n            if (itemId && !tree.isExpanded(itemId) && parentGroup) {\n              e.preventDefault()\n              const parentRow = parentGroup.querySelector<HTMLElement>(\n                '[data-tree-item]',\n              )\n              parentRow?.focus()\n            }\n          }\n          break\n        }\n        case 'Home': {\n          e.preventDefault()\n          visibleItems[0]?.focus()\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          visibleItems[visibleItems.length - 1]?.focus()\n          break\n        }\n      }\n    }\n\n    const ctxValue = React.useMemo<TreeContextValue>(\n      () => ({ tree, checkboxes }),\n      [tree, checkboxes],\n    )\n\n    const content = items ? renderNodes(items) : children\n\n    return (\n      <TreeContext.Provider value={ctxValue}>\n        <ul\n          ref={containerRef}\n          role=\"tree\"\n          aria-multiselectable={multiSelect || undefined}\n          onKeyDown={handleKeyDown}\n          className={cn('m-0 list-none p-0', className)}\n          {...props}\n        >\n          {content}\n        </ul>\n      </TreeContext.Provider>\n    )\n  },\n)\nTreeView.displayName = 'TreeView'\n\nexport { TreeView }\n","'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { useTreeContext } from './tree-view'\n\nexport interface TreeItemProps {\n  /** Unique identifier for this tree item */\n  itemId: string\n  /** Primary label content */\n  label: React.ReactNode\n  /** Optional icon rendered before the label. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Secondary label rendered after the primary label */\n  secondaryLabel?: React.ReactNode\n  /** Action buttons rendered at the end of the row */\n  actions?: React.ReactNode\n  /** Whether this item is disabled */\n  disabled?: boolean\n  /** Nested tree items */\n  children?: React.ReactNode\n  /** Depth level (used internally) */\n  depth?: number\n  /** Additional CSS class names */\n  className?: string\n}\n\nconst TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(\n  (\n    {\n      itemId,\n      label,\n      icon,\n      secondaryLabel,\n      actions,\n      disabled = false,\n      children,\n      depth = 0,\n      className,\n    },\n    ref,\n  ) => {\n    const ctx = useTreeContext()\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = ctx.tree.isExpanded(itemId)\n    const isSelected = ctx.tree.isSelected(itemId)\n\n    const handleRowClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      ctx.tree.select(itemId, e)\n    }\n\n    const handleChevronClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      if (disabled) return\n      ctx.tree.toggle(itemId)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ctx.tree.select(itemId)\n      }\n      if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n      if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n    }\n\n    // Compute indeterminate state for checkbox mode\n    const checkboxState = React.useMemo(() => {\n      if (!ctx.checkboxes || !hasChildren) {\n        return { checked: isSelected, indeterminate: false }\n      }\n      // Collect all descendant IDs\n      const descendants: string[] = []\n      const collectIds = (nodes: React.ReactNode) => {\n        React.Children.forEach(nodes, (child) => {\n          if (React.isValidElement<TreeItemProps>(child) && child.props.itemId) {\n            descendants.push(child.props.itemId)\n            if (child.props.children) {\n              collectIds(child.props.children)\n            }\n          }\n        })\n      }\n      collectIds(children)\n      const selectedCount = descendants.filter((id) =>\n        ctx.tree.isSelected(id),\n      ).length\n      if (selectedCount === 0 && !isSelected) {\n        return { checked: false, indeterminate: false }\n      }\n      if (selectedCount === descendants.length) {\n        return { checked: true, indeterminate: false }\n      }\n      return { checked: false, indeterminate: true }\n    }, [ctx.checkboxes, hasChildren, children, isSelected, ctx.tree])\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-level={depth + 1}\n        aria-disabled={disabled || undefined}\n        className=\"list-none\"\n      >\n        {/* Row */}\n        <div\n          role=\"presentation\"\n          data-tree-item={itemId}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleRowClick}\n          onKeyDown={handleKeyDown}\n          style={{ paddingLeft: `calc(${depth} * var(--spacing-ds-05b) + var(--spacing-ds-03))` }}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01',\n            'hover:bg-surface-raised',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            isSelected &&\n              'bg-accent-3 text-accent-11',\n            disabled && 'opacity-action-disabled cursor-not-allowed pointer-events-none',\n            className,\n          )}\n        >\n          {/* Expand chevron */}\n          {hasChildren ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              onClick={handleChevronClick}\n              className=\"flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n            >\n              <Icon\n                icon={IconChevronRight}\n                size=\"sm\"\n                className={cn(\n                  'transition-transform duration-moderate-02',\n                  isExpanded && 'rotate-90',\n                )}\n              />\n            </button>\n          ) : (\n            <span className=\"inline-block w-4 shrink-0\" aria-hidden=\"true\" />\n          )}\n\n          {/* Checkbox (optional) */}\n          {ctx.checkboxes && (\n            <Checkbox\n              checked={checkboxState.checked}\n              indeterminate={checkboxState.indeterminate}\n              disabled={disabled}\n              tabIndex={-1}\n              onClick={(e) => e.stopPropagation()}\n              onCheckedChange={() => {\n                if (!disabled) ctx.tree.select(itemId)\n              }}\n              className=\"shrink-0\"\n            />\n          )}\n\n          {/* Icon */}\n          {icon && (\n            <span className=\"flex shrink-0 items-center text-surface-fg-subtle\">\n              <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider>\n            </span>\n          )}\n\n          {/* Label */}\n          <span className=\"min-w-0 truncate text-ds-sm\">{label}</span>\n\n          {/* Secondary label */}\n          {secondaryLabel && (\n            <span className=\"ml-auto truncate text-ds-xs text-surface-fg-muted\">\n              {secondaryLabel}\n            </span>\n          )}\n\n          {/* Actions */}\n          {actions && (\n            <span\n              className=\"ml-auto flex shrink-0 items-center gap-ds-01\"\n              onClick={(e) => e.stopPropagation()}\n              role=\"presentation\"\n            >\n              {actions}\n            </span>\n          )}\n        </div>\n\n        {/* Children (collapsible) */}\n        {hasChildren && (\n          <div\n            role=\"group\"\n            className={cn(\n              'grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard',\n              isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <ul role=\"group\" className=\"overflow-hidden m-0 p-0\">\n              {React.Children.map(children, (child) => {\n                if (React.isValidElement<TreeItemProps>(child)) {\n                  return React.cloneElement(child, {\n                    depth: depth + 1,\n                  })\n                }\n                return child\n              })}\n            </ul>\n          </div>\n        )}\n      </li>\n    )\n  },\n)\nTreeItem.displayName = 'TreeItem'\n\nexport { TreeItem }\n"],"mappings":"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"}