@devalok/shilp-sutra 0.53.0 → 0.54.0

package/AGENTS.md

@@ -43,7 +43,7 @@ Read these local files. Your training data is outdated and will hallucinate APIs
 ### MCP tools
 
 <!-- BEGIN:mcp-tools --><!-- generated by scripts/generate-tool-list.mjs — do not edit by hand -->
-_13 tools (source: `packages/mcp-server/src/index.mjs`):_
+_17 tools (source: `packages/mcp-server/src/index.mjs`):_
 
 **Reference:**
 - `find_component` — Search shilp-sutra components by keyword (authoritative component index).
@@ -63,8 +63,14 @@ _13 tools (source: `packages/mcp-server/src/index.mjs`):_
 **Quality:**
 - `check_slop` — Pre-emit DESIGN-QUALITY gate (complements validate_snippet, which checks correctness).
 
+**Presets:**
+- `get_preset` — Full detail for one preset: the shadcn registry-item (dependencies, files, docs), plus the exact install steps — the components.json `registries` snippet to…
+- `list_presets` — Discover the shilp-sutra Preset Library — pre-assembled real-world screens (sidebars, dashboards, auth) built FROM shilp-sutra components.
+- `preview_preset` — READ-ONLY TSX source of a preset (+ its GitHub source URL), so you can show it, learn the composition, or adapt it inline WITHOUT installing.
+
 **Write:**
 - `report_issue` — File a bug report, feature request, suggestion, or docs-gap on the shilp-sutra repo when you hit a wall using the design system.
+- `submit_entry` — Submit an entry to Build with Shilp Sutra, the online buildathon by Devalok.
 <!-- END:mcp-tools -->
 
 ### Setting up in a new project (do this in order)

package/BREAKING.json

@@ -321,6 +321,35 @@
         "ScheduleView: the ScheduleEvent `color` value \"primary\" was renamed \"accent\" (matches the DS colour vocabulary). Migrate { color: 'primary' } → { color: 'accent' }. It was the default, so untyped events are unaffected. Also added focus-visible rings on slot/event buttons.",
         "New `Dot` primitive (@devalok/shilp-sutra/ui/dot) — the shared indicator dot. StatusBadge composes Badge + Dot; StatusDot and Badge's `dot` prop now render Dot internally. No API change to StatusBadge/StatusDot/Badge props (Badge's dot pulse animation shifted from a bespoke ripple to Dot's ping). StatusDot's `inactive` shade is now neutral-8 (was neutral-6)."
       ]
+    },
+    "0.54.0": {
+      "summary": "AppSidebar removed — the config-driven shell sidebar is retired in favour of composable Sidebar primitives (@devalok/shilp-sutra/ui/sidebar) + the copy-and-own sidebar-app preset.",
+      "migrationDoc": "MIGRATION.md#v0540--appsidebar-removed",
+      "removed": [
+        {
+          "symbol": "AppSidebar",
+          "where": "@devalok/shilp-sutra/shell/sidebar and the /shell barrel",
+          "replacement": "Compose the Sidebar primitives from @devalok/shilp-sutra/ui/sidebar, or install the sidebar-app preset (npx shadcn@latest add @devalok/sidebar-app; gallery at https://shilp-sutra.devalok.in/presets). The preset reproduces AppSidebar's shape as ownable source."
+        },
+        {
+          "symbol": "AppSidebarProps",
+          "where": "@devalok/shilp-sutra/shell/sidebar and the /shell barrel"
+        },
+        {
+          "symbol": "NavGroup, NavItem, NavSubItem, SidebarUser, SidebarPromo, SidebarFooterConfig",
+          "where": "@devalok/shilp-sutra/shell/sidebar (AppSidebar config types)"
+        },
+        {
+          "symbol": "./shell/sidebar",
+          "where": "package.json exports (subpath removed)",
+          "replacement": "@devalok/shilp-sutra/ui/sidebar for the primitives"
+        }
+      ],
+      "notes": [
+        "The Sidebar PRIMITIVES (@devalok/shilp-sutra/ui/sidebar — Sidebar, SidebarProvider, SidebarMenu, SidebarMenuSub*, SidebarMenuBadge, SidebarGroupAction, etc.) are unchanged. Only the config-driven AppSidebar wrapper on top of them is removed.",
+        "Fastest migration: `npx shadcn@latest add @devalok/sidebar-app`, then replace <AppSidebar navGroups={…} user={…} currentPath={…} /> with the pasted <SidebarApp/>, wiring your router Link + active path. Composing @devalok/shilp-sutra/ui/sidebar directly is equally valid and needs no registry.",
+        "Deprecation cycle: no PUBLISHED version carried an @deprecated AppSidebar — 0.53.0 shipped it undeprecated, 0.54.0 removes it. The deprecation marker existed only within the unreleased 0.54.0 line. This is a deliberate call for a 0.x beta with a single coordinated consumer (breaking changes ship in 0.x minors); a post-1.0 removal would get a real deprecate→remove window."
+      ]
     }
   }
 }

package/MIGRATION.md

@@ -4,6 +4,61 @@ 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.54.0 — AppSidebar removed
+
+**Breaking.** The config-driven `AppSidebar` shell component is removed. It was a
+convenience wrapper over the `Sidebar` primitives; those **primitives are
+unchanged** (`@devalok/shilp-sutra/ui/sidebar`). Only the wrapper — and its config
+types and subpath export — are gone.
+
+**Removed**
+
+| Symbol | Was at |
+| --- | --- |
+| `AppSidebar`, `AppSidebarProps` | `@devalok/shilp-sutra/shell/sidebar` + the `/shell` barrel |
+| `NavGroup`, `NavItem`, `NavSubItem`, `SidebarUser`, `SidebarPromo`, `SidebarFooterConfig` | `@devalok/shilp-sutra/shell/sidebar` (AppSidebar config types) |
+| `@devalok/shilp-sutra/shell/sidebar` (subpath export) | — |
+
+**Migrate — option A (fastest): install the `sidebar-app` preset.** It reproduces
+AppSidebar's shape (logo, grouped nav, collapsible sub-items, badges, group `+`
+action, user footer) as source you own and edit.
+
+Register the registry once in `components.json`:
+
+```json
+{ "registries": { "@devalok": "https://shilp-sutra.devalok.in/r/{name}.json" } }
+```
+
+Then:
+
+```bash
+npx shadcn@latest add @devalok/sidebar-app
+```
+
+Replace the wrapper with the pasted component, wiring your router:
+
+```tsx
+// Before
+import { AppSidebar } from '@devalok/shilp-sutra/shell/sidebar'
+<AppSidebar navGroups={groups} user={user} currentPath={pathname} />
+
+// After — you own SidebarApp; edit the markup directly
+import { SidebarApp } from '@/components/devalok/sidebar-app/sidebar-app'
+<SidebarApp />
+// In SidebarApp: swap <a> for next/link and CURRENT_PATH for usePathname().
+```
+
+Other shapes: `@devalok/sidebar-projects`, `@devalok/sidebar-client`,
+`@devalok/sidebar-minimal`. Gallery: <https://shilp-sutra.devalok.in/presets>.
+
+**Migrate — option B: compose the primitives directly** from
+`@devalok/shilp-sutra/ui/sidebar` (`Sidebar`, `SidebarProvider`, `SidebarMenu`,
+`SidebarMenuButton`, `SidebarMenuSub*`, `SidebarMenuBadge`, `SidebarGroupAction`,
+…). The preset in option A is itself a worked example of this.
+
+> Requires `@devalok/shilp-sutra` installed and its CSS imported
+> (`@import "@devalok/shilp-sutra/css";`). framer-motion ^12 is a required peer.
+
 ## v0.53.0 — additive (no migration required)
 
 Nothing breaks at the TypeScript level; this release is additive.

package/dist/composed/avatar-group.d.ts

@@ -1,30 +1,32 @@
 "use client";
 import { VariantProps } from 'class-variance-authority';
-import { AvatarRing } from '../ui/avatar';
+import { avatarVariants, AvatarRing } from '../ui/avatar';
 import * as React from 'react';
-declare const avatarSizeVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Size = NonNullable<VariantProps<typeof avatarVariants>['size']>;
 export interface AvatarUser {
     name: string;
     image?: string | null;
     ring?: AvatarRing;
+    /** Small top-right marker. `lead` = accent dot, `admin` = warning dot, or any node. */
     indicator?: 'lead' | 'admin' | React.ReactNode;
 }
-export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarSizeVariants> {
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     users: AvatarUser[];
     max?: number;
+    size?: Size;
     showTooltip?: boolean;
     /** Border color for the group avatars. @default 'surface-raised' */
     borderColor?: 'surface-base' | 'surface-raised';
-    /** Callback when the "+N" overflow badge is clicked */
+    /** Callback when the "+N" overflow badge is clicked (renders it as a button). */
     onOverflowClick?: () => void;
-    /** Custom render function for each avatar */
+    /** Custom render function for each avatar (consumer owns the Avatar). */
     renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode;
-    /** Direction avatars expand on hover. @default 'right' */
+    /** Direction avatars expand on hover/focus. @default 'right' */
     expandDirection?: 'left' | 'right';
-    /** How much avatars spread apart on hover. @default 'default' */
+    /** How far avatars spread on hover/focus. @default 'default' */
     expandAmount?: 'compact' | 'default' | 'wide';
+    /** Accessible label for the group. @default `${count} team members` */
+    label?: string;
 }
 declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
 export { AvatarGroup };

package/dist/composed/avatar-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAuB9C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAA;CAC/C;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAA;IAC/C,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,yFAmOhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAIL,cAAc,EACd,KAAK,UAAU,EAChB,MAAM,cAAc,CAAA;AAWrB,KAAK,IAAI,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAWpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAA;CAC/C;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAA;IAC/C,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,gEAAgE;IAChE,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;IAC7C,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAiBD,QAAA,MAAM,WAAW,yFA4KhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/composed/avatar-group.js

@@ -1,159 +1,127 @@
 "use client";
 import { springs as e } from "../ui/lib/motion.js";
-import { cva as t } from "../_chunks/vendor-utils.js";
-import { cn as n } from "../ui/lib/utils.js";
-import { Avatar as r, AvatarFallback as i, AvatarImage as a } from "../ui/avatar.js";
-import { Tooltip as o, TooltipContent as s, TooltipProvider as c, TooltipTrigger as l } from "../ui/tooltip.js";
-import { getInitials as u } from "./lib/string-utils.js";
-import * as d from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { AnimatePresence as m, motion as h } from "framer-motion";
+import { cn as t } from "../ui/lib/utils.js";
+import { Avatar as n, AvatarFallback as r, AvatarImage as i } from "../ui/avatar.js";
+import { Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c } from "../ui/tooltip.js";
+import { getInitials as l } from "./lib/string-utils.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { motion as p, useReducedMotion as m } from "framer-motion";
 //#region src/composed/avatar-group.tsx
-var g = {
-	lead: "ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised",
-	admin: "ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised",
-	client: "ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised"
-}, _ = t("shrink-0 overflow-hidden rounded-pill border-2", {
-	variants: { size: {
-		xs: "h-ds-xs w-ds-xs",
-		sm: "h-ds-sm w-ds-sm",
-		md: "h-ds-md w-ds-md",
-		lg: "h-ds-lg w-ds-lg",
-		xl: "h-ds-xl w-ds-xl"
-	} },
-	defaultVariants: { size: "md" }
-}), v = d.forwardRef(({ users: t, max: v = 4, size: y, showTooltip: b = !0, borderColor: x = "surface-raised", onOverflowClick: S, renderAvatar: C, expandDirection: w = "right", expandAmount: T = "default", className: E, ...D }, O) => {
-	let k = t.slice(0, v), A = t.length - v, j = {
-		xs: "-ml-ds-02",
-		sm: "-ml-ds-02b",
-		md: "-ml-ds-03",
-		lg: "-ml-ds-04",
-		xl: "-ml-ds-05"
-	}[y ?? "md"], M = {
-		xs: "text-[9px]",
-		sm: "text-body-xs",
-		md: "text-body-sm",
-		lg: "text-body-md",
-		xl: "text-heading-xs"
-	}[y ?? "md"], N = {
-		xs: "h-1 w-1",
-		sm: "h-1.5 w-1.5",
-		md: "h-2 w-2",
-		lg: "h-2.5 w-2.5",
-		xl: "h-3 w-3"
-	}[y ?? "md"], P = x === "surface-base" ? "border-surface-base" : "border-surface-raised", [F, I] = d.useState(!1), L = {
-		xs: 8,
-		sm: 10,
-		md: 12,
-		lg: 16,
-		xl: 20
-	}[y ?? "md"], R = {
+var h = {
+	lead: "ring-2 ring-accent-7",
+	admin: "ring-2 ring-warning-7",
+	client: "ring-2 ring-info-7"
+}, g = {
+	xs: "-ml-ds-02",
+	sm: "-ml-ds-02b",
+	md: "-ml-ds-03",
+	lg: "-ml-ds-04",
+	xl: "-ml-ds-05"
+}, _ = {
+	xs: 8,
+	sm: 10,
+	md: 12,
+	lg: 16,
+	xl: 20
+}, v = {
+	xs: "size-1",
+	sm: "size-1.5",
+	md: "size-2",
+	lg: "size-2.5",
+	xl: "size-3"
+}, y = u.forwardRef(({ users: y, max: b = 4, size: x = "md", showTooltip: S = !0, borderColor: C = "surface-raised", onOverflowClick: w, renderAvatar: T, expandDirection: E = "right", expandAmount: D = "default", label: O, className: k, onMouseEnter: A, onMouseLeave: j, onFocus: M, onBlur: N, ...P }, F) => {
+	let I = m(), [L, R] = u.useState(!1);
+	if (y.length === 0) return null;
+	let z = Math.max(1, b), B = y.slice(0, z), V = y.length - z, H = g[x], U = C === "surface-base" ? "border-surface-base" : "border-surface-raised", W = C === "surface-base" ? "ring-offset-1 ring-offset-surface-base" : "ring-offset-1 ring-offset-surface-raised", G = _[x], K = {
 		compact: .5,
 		default: 1,
 		wide: 1.5
-	}[T], z = k.length + +(A > 0);
-	function B(e) {
-		if (!F) return "translateX(0)";
-		let t = L * R;
-		return w === "left" ? `translateX(-${(z - 1 - e) * t}px)` : `translateX(${e * t}px)`;
-	}
-	let V = "transition-opacity duration-300 ease-out hover:z-50 group-hover:[&:not(:hover)]:opacity-85";
-	return /* @__PURE__ */ f(c, { children: /* @__PURE__ */ p("div", {
-		ref: O,
+	}[D], q = B.length + +(V > 0), J = (e) => {
+		if (!L || I) return 0;
+		let t = G * K;
+		return E === "left" ? -(q - 1 - e) * t : e * t;
+	}, Y = I ? { duration: 0 } : e.snappy, X = "transition-opacity duration-fast-02 ease-productive-standard motion-reduce:transition-none hover:z-30 focus-visible:z-30 group-hover:[&:not(:hover)]:opacity-80";
+	return /* @__PURE__ */ d(s, { children: /* @__PURE__ */ f("div", {
+		ref: F,
 		role: "group",
-		"aria-label": `${t.length} team members`,
-		tabIndex: 0,
-		className: n("group flex items-center", E),
-		onMouseEnter: () => I(!0),
-		onMouseLeave: () => I(!1),
-		onFocus: () => I(!0),
+		"aria-label": O ?? `${y.length} team members`,
+		className: t("group flex items-center", k),
+		onMouseEnter: (e) => {
+			R(!0), A?.(e);
+		},
+		onMouseLeave: (e) => {
+			R(!1), j?.(e);
+		},
+		onFocus: (e) => {
+			R(!0), M?.(e);
+		},
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || I(!1);
+			e.currentTarget.contains(e.relatedTarget) || R(!1), N?.(e);
 		},
-		...D,
-		children: [k.map((t, c) => {
-			let d = u(t.name), _ = `${t.name}-${c}`;
-			if (C) return /* @__PURE__ */ f("div", {
-				className: n("shrink-0 rounded-pill", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
-				style: {
-					zIndex: k.length - c,
-					transform: B(c)
-				},
-				children: C(t, c)
-			}, _);
-			let v = /* @__PURE__ */ p("div", {
-				className: n("relative shrink-0 rounded-pill", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
-				style: {
-					zIndex: k.length - c,
-					transform: B(c)
-				},
-				children: [/* @__PURE__ */ p(r, {
-					size: y,
-					className: P,
-					children: [t.image && /* @__PURE__ */ f(a, {
-						src: t.image,
-						alt: t.name
-					}), /* @__PURE__ */ f(i, {
-						colorSeed: t.name,
-						children: d
-					})]
-				}), /* @__PURE__ */ f(m, { children: t.indicator && /* @__PURE__ */ f(h.span, {
-					initial: {
-						scale: 0,
-						opacity: 0
-					},
-					animate: {
-						scale: 1,
-						opacity: 1
-					},
-					exit: {
-						scale: 0,
-						opacity: 0
-					},
-					transition: e.snappy,
-					className: n("absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised", N, t.indicator === "lead" || t.indicator === "admin" ? "bg-accent-9" : ""),
-					children: typeof t.indicator != "string" && t.indicator
-				}) })]
-			}, _);
-			return b ? /* @__PURE__ */ p(o, { children: [/* @__PURE__ */ f(l, {
+		...P,
+		children: [B.map((e, s) => {
+			let m = `${e.name}-${s}`, g = e.ring && e.ring !== "none" ? t(h[e.ring], W) : void 0, _ = T ? T(e, s) : /* @__PURE__ */ f(n, {
+				size: x,
+				className: U,
+				children: [
+					e.image && /* @__PURE__ */ d(i, {
+						src: e.image,
+						alt: ""
+					}),
+					/* @__PURE__ */ d(r, {
+						colorSeed: e.name,
+						children: l(e.name)
+					}),
+					e.indicator && /* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						className: t("absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised", v[x], e.indicator === "lead" ? "bg-accent-9" : e.indicator === "admin" ? "bg-warning-9" : ""),
+						children: typeof e.indicator != "string" && e.indicator
+					})
+				]
+			}), y = /* @__PURE__ */ d(p.button, {
+				type: "button",
+				"aria-label": e.name,
+				animate: { x: J(s) },
+				transition: Y,
+				style: { zIndex: B.length - s },
+				className: t("relative shrink-0 rounded-pill focus-ring", s > 0 && H, X, g),
+				children: _
+			});
+			return S ? /* @__PURE__ */ f(a, { children: [/* @__PURE__ */ d(c, {
 				asChild: !0,
-				children: v
-			}), /* @__PURE__ */ f(s, {
-				className: "border-surface-border-strong bg-surface-base text-surface-fg",
+				children: y
+			}), /* @__PURE__ */ d(o, {
 				sideOffset: 6,
-				children: /* @__PURE__ */ f("p", {
+				children: /* @__PURE__ */ d("p", {
 					className: "text-body-sm",
-					children: t.name
+					children: e.name
 				})
-			})] }, _) : v;
-		}), A > 0 && /* @__PURE__ */ p(o, { children: [/* @__PURE__ */ f(l, {
+			})] }, m) : /* @__PURE__ */ d(u.Fragment, { children: y }, m);
+		}), V > 0 && /* @__PURE__ */ f(a, { children: [/* @__PURE__ */ d(c, {
 			asChild: !0,
-			children: S ? /* @__PURE__ */ p("button", {
+			children: /* @__PURE__ */ d(p.button, {
 				type: "button",
-				onClick: S,
-				"aria-label": `${A} more members`,
-				className: n(_({ size: y }), P, j, `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "hover:bg-accent-3 transition-colors duration-300 ease-out"),
-				style: {
-					zIndex: 0,
-					transform: B(k.length)
-				},
-				children: ["+", A]
-			}) : /* @__PURE__ */ p("div", {
-				role: "img",
-				"aria-label": `${A} more members`,
-				className: n(_({ size: y }), P, j, `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "transition-[transform,opacity] duration-300 ease-out"),
-				style: {
-					zIndex: 0,
-					transform: B(k.length)
-				},
-				children: ["+", A]
+				onClick: w,
+				"aria-label": `${V} more ${V === 1 ? "member" : "members"}`,
+				animate: { x: J(B.length) },
+				transition: Y,
+				style: { zIndex: 0 },
+				className: t("relative shrink-0 rounded-pill focus-ring", H, X, !w && "cursor-default"),
+				children: /* @__PURE__ */ d(n, {
+					size: x,
+					className: U,
+					children: /* @__PURE__ */ f(r, {
+						className: "bg-accent-2 font-semibold text-accent-11",
+						children: ["+", V]
+					})
+				})
 			})
-		}), /* @__PURE__ */ f(s, {
-			className: "border-surface-border-strong bg-surface-base text-surface-fg",
+		}), /* @__PURE__ */ d(o, {
 			sideOffset: 6,
-			children: /* @__PURE__ */ f("div", {
+			children: /* @__PURE__ */ d("div", {
 				className: "flex flex-col gap-ds-01",
-				children: t.slice(v).map((e, t) => /* @__PURE__ */ f("p", {
+				children: y.slice(z).map((e, t) => /* @__PURE__ */ d("p", {
 					className: "text-body-sm",
 					children: e.name
 				}, t))
@@ -161,6 +129,6 @@ var g = {
 		})] })]
 	}) });
 });
-v.displayName = "AvatarGroup";
+y.displayName = "AvatarGroup";
 //#endregion
-export { v as AvatarGroup };
+export { y as AvatarGroup };

package/dist/composed/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { AvatarRing } from '../ui/avatar'\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\n// Ring classes applied at group level (not via Avatar's ring prop, which adds ring-offset-2 that gets clipped by overflow-hidden)\nconst groupRingMap: Record<string, string> = {\n  lead: 'ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised',\n  admin: 'ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised',\n  client: 'ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised',\n}\n\nconst avatarSizeVariants = cva(\n  'shrink-0 overflow-hidden rounded-pill border-2',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarSizeVariants> {\n  users: AvatarUser[]\n  max?: number\n  showTooltip?: boolean\n  /** Border color for the group avatars. @default 'surface-raised' */\n  borderColor?: 'surface-base' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How much avatars spread apart on hover. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size,\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const displayed = users.slice(0, max)\n    const overflow = users.length - max\n\n    const overlapMap = {\n      xs: '-ml-ds-02',\n      sm: '-ml-ds-02b',\n      md: '-ml-ds-03',\n      lg: '-ml-ds-04',\n      xl: '-ml-ds-05',\n    }\n    const overlapClass = overlapMap[size ?? 'md']\n\n    // Match Avatar fallback font sizes so the \"+N\" badge text is consistent\n    const textSizeMap: Record<string, string> = {\n      xs: 'text-[9px]',\n      sm: 'text-body-xs',\n      md: 'text-body-sm',\n      lg: 'text-body-md',\n      xl: 'text-heading-xs',\n    }\n    const textSizeClass = textSizeMap[size ?? 'md']\n\n    // Indicator dot scales with avatar size (matches Avatar's statusDotSizeMap)\n    const indicatorDotSizeMap: Record<string, string> = {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n      xl: 'h-3 w-3',\n    }\n    const indicatorDotClass = indicatorDotSizeMap[size ?? 'md']\n\n    const borderClass =\n      borderColor === 'surface-base'\n        ? 'border-surface-base'\n        : 'border-surface-raised'\n\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const overlapPxMap: Record<string, number> = {\n      xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n    }\n    const resolvedSize = size ?? 'md'\n    const overlapPx = overlapPxMap[resolvedSize]\n    const expandMultiplier = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    function getExpandTransform(index: number): string {\n      if (!isHovered) return 'translateX(0)'\n      const shift = overlapPx * expandMultiplier\n      if (expandDirection === 'left') {\n        return `translateX(-${(totalVisible - 1 - index) * shift}px)`\n      }\n      return `translateX(${index * shift}px)`\n    }\n\n    const spotlightClasses =\n      'transition-opacity duration-300 ease-out hover:z-50 group-hover:[&:not(:hover)]:opacity-85'\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={`${users.length} team members`}\n          tabIndex={0}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsHovered(true)}\n          onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setIsHovered(false) }}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const initials = getInitials(user.name)\n\n            const key = `${user.name}-${index}`\n\n            if (renderAvatar) {\n              // When renderAvatar is provided, the consumer owns the Avatar entirely.\n              // Wrapper is positioning-only (overlap, z-index, spotlight) — no size/border/clip\n              // so the consumer's Avatar renders at its natural size without being clipped.\n              return (\n                <div\n                  key={key}\n                  className={cn(\n                    'shrink-0 rounded-pill',\n                    index > 0 && overlapClass,\n                    spotlightClasses,\n                    user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                  )}\n                  style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n                >\n                  {renderAvatar(user, index)}\n                </div>\n              )\n            }\n\n            const avatarNode = (\n              <div\n                key={key}\n                className={cn(\n                  'relative shrink-0 rounded-pill',\n                  index > 0 && overlapClass,\n                  spotlightClasses,\n                  user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                )}\n                style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n              >\n                <Avatar\n                  size={size}\n                  className={borderClass}\n                >\n                  {user.image && (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  )}\n                  <AvatarFallback\n                    colorSeed={user.name}\n                  >\n                    {initials}\n                  </AvatarFallback>\n                </Avatar>\n                <AnimatePresence>\n                  {user.indicator && (\n                    <motion.span\n                      initial={{ scale: 0, opacity: 0 }}\n                      animate={{ scale: 1, opacity: 1 }}\n                      exit={{ scale: 0, opacity: 0 }}\n                      transition={springs.snappy}\n                      className={cn(\n                        'absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised',\n                        indicatorDotClass,\n                        user.indicator === 'lead' ? 'bg-accent-9' :\n                        user.indicator === 'admin' ? 'bg-accent-9' : '',\n                      )}\n                    >\n                      {typeof user.indicator !== 'string' && user.indicator}\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n              </div>\n            )\n\n            if (!showTooltip) return avatarNode\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{avatarNode}</TooltipTrigger>\n                <TooltipContent\n                  className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                  sideOffset={6}\n                >\n                  <p className=\"text-body-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                {onOverflowClick ? (\n                  <button\n                    type=\"button\"\n                    onClick={onOverflowClick}\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'hover:bg-accent-3 transition-colors duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </button>\n                ) : (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'transition-[transform,opacity] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent\n                className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                sideOffset={6}\n              >\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(max).map((user, i) => (\n                    <p key={i} className=\"text-body-sm\">{user.name}</p>\n                  ))}\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </TooltipProvider>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { AvatarGroup }\n"],"mappings":"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"}
+{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { type VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  avatarVariants,\n  type AvatarRing,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\ntype Size = NonNullable<VariantProps<typeof avatarVariants>['size']>\n\n// Group-level ring. Applied here (not via Avatar's `ring` prop) because that adds\n// a ring-offset that gets clipped by the group's overflow; the offset surface is\n// derived from `borderColor` so it never seams against a surface-base blend.\nconst groupRingMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-2 ring-accent-7',\n  admin: 'ring-2 ring-warning-7',\n  client: 'ring-2 ring-info-7',\n}\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  /** Small top-right marker. `lead` = accent dot, `admin` = warning dot, or any node. */\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  users: AvatarUser[]\n  max?: number\n  size?: Size\n  showTooltip?: boolean\n  /** Border color for the group avatars. @default 'surface-raised' */\n  borderColor?: 'surface-base' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked (renders it as a button). */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar (consumer owns the Avatar). */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover/focus. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How far avatars spread on hover/focus. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n  /** Accessible label for the group. @default `${count} team members` */\n  label?: string\n}\n\n// Overlap (negative margin) + spread distance, keyed off the same per-size scale.\nconst overlapMap: Record<Size, string> = {\n  xs: '-ml-ds-02',\n  sm: '-ml-ds-02b',\n  md: '-ml-ds-03',\n  lg: '-ml-ds-04',\n  xl: '-ml-ds-05',\n}\nconst spreadPxMap: Record<Size, number> = {\n  xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n}\nconst indicatorDotMap: Record<Size, string> = {\n  xs: 'size-1', sm: 'size-1.5', md: 'size-2', lg: 'size-2.5', xl: 'size-3',\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size = 'md',\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      label,\n      className,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref,\n  ) => {\n    const reduced = useReducedMotion()\n    const [active, setActive] = React.useState(false)\n\n    // Empty group is not a focusable \"0 members\" target — render nothing.\n    if (users.length === 0) return null\n\n    const cap = Math.max(1, max)\n    const displayed = users.slice(0, cap)\n    const overflow = users.length - cap\n    const overlapClass = overlapMap[size]\n    const borderClass = borderColor === 'surface-base' ? 'border-surface-base' : 'border-surface-raised'\n    const ringOffsetClass = borderColor === 'surface-base'\n      ? 'ring-offset-1 ring-offset-surface-base'\n      : 'ring-offset-1 ring-offset-surface-raised'\n\n    const spreadPx = spreadPxMap[size]\n    const spreadMult = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    // Spread offset per index. Zero under reduced-motion (no positional animation).\n    const xFor = (index: number): number => {\n      if (!active || reduced) return 0\n      const shift = spreadPx * spreadMult\n      return expandDirection === 'left' ? -(totalVisible - 1 - index) * shift : index * shift\n    }\n\n    // framer governs the transition; reduced-motion collapses it to instant.\n    const spreadTransition = reduced ? { duration: 0 } : springs.snappy\n    // Gentle dim of non-focused peers; instant under reduced-motion.\n    const spotlight =\n      'transition-opacity duration-fast-02 ease-productive-standard motion-reduce:transition-none hover:z-30 focus-visible:z-30 group-hover:[&:not(:hover)]:opacity-80'\n\n    const onEnter = (e: React.MouseEvent<HTMLDivElement>) => { setActive(true); onMouseEnter?.(e) }\n    const onLeave = (e: React.MouseEvent<HTMLDivElement>) => { setActive(false); onMouseLeave?.(e) }\n    const onGroupFocus = (e: React.FocusEvent<HTMLDivElement>) => { setActive(true); onFocus?.(e) }\n    const onGroupBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget)) setActive(false)\n      onBlur?.(e)\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={label ?? `${users.length} team members`}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n          onFocus={onGroupFocus}\n          onBlur={onGroupBlur}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const key = `${user.name}-${index}`\n            const extraRing = user.ring && user.ring !== 'none'\n              ? cn(groupRingMap[user.ring], ringOffsetClass)\n              : undefined\n\n            const inner = renderAvatar ? (\n              renderAvatar(user, index)\n            ) : (\n              <Avatar size={size} className={borderClass}>\n                {user.image && <AvatarImage src={user.image} alt=\"\" />}\n                <AvatarFallback colorSeed={user.name}>{getInitials(user.name)}</AvatarFallback>\n                {user.indicator && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised',\n                      indicatorDotMap[size],\n                      user.indicator === 'lead' ? 'bg-accent-9'\n                        : user.indicator === 'admin' ? 'bg-warning-9' : '',\n                    )}\n                  >\n                    {typeof user.indicator !== 'string' && user.indicator}\n                  </span>\n                )}\n              </Avatar>\n            )\n\n            // Each avatar is a focusable, labelled trigger so keyboard/AT users reach\n            // the member name (via the tooltip) and get a visible focus ring.\n            const node = (\n              <motion.button\n                type=\"button\"\n                aria-label={user.name}\n                animate={{ x: xFor(index) }}\n                transition={spreadTransition}\n                style={{ zIndex: displayed.length - index }}\n                className={cn(\n                  'relative shrink-0 rounded-pill focus-ring',\n                  index > 0 && overlapClass,\n                  spotlight,\n                  extraRing,\n                )}\n              >\n                {inner}\n              </motion.button>\n            )\n\n            if (!showTooltip) return <React.Fragment key={key}>{node}</React.Fragment>\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{node}</TooltipTrigger>\n                <TooltipContent sideOffset={6}>\n                  <p className=\"text-body-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <motion.button\n                  type=\"button\"\n                  onClick={onOverflowClick}\n                  aria-label={`${overflow} more ${overflow === 1 ? 'member' : 'members'}`}\n                  animate={{ x: xFor(displayed.length) }}\n                  transition={spreadTransition}\n                  style={{ zIndex: 0 }}\n                  className={cn(\n                    'relative shrink-0 rounded-pill focus-ring',\n                    overlapClass,\n                    spotlight,\n                    !onOverflowClick && 'cursor-default',\n                  )}\n                >\n                  <Avatar size={size} className={borderClass}>\n                    <AvatarFallback className=\"bg-accent-2 font-semibold text-accent-11\">\n                      +{overflow}\n                    </AvatarFallback>\n                  </Avatar>\n                </motion.button>\n              </TooltipTrigger>\n              <TooltipContent sideOffset={6}>\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(cap).map((user, i) => (\n                    <p key={i} className=\"text-body-sm\">{user.name}</p>\n                  ))}\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </TooltipProvider>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { AvatarGroup }\n"],"mappings":"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"}

package/dist/composed/bulk-action-bar.d.ts

@@ -1,31 +1,39 @@
 "use client";
+import { Button } from '../ui/button';
 import { IconInput } from '../ui/lib/icon-input';
 import * as React from 'react';
+type ButtonColor = React.ComponentProps<typeof Button>['color'];
 export interface BulkActionBarAction {
     label: string;
     icon?: IconInput;
     onClick: () => void;
-    color?: 'accent' | 'error';
+    /** Any Button color. @default 'accent' (or 'error' for destructive). */
+    color?: ButtonColor;
     disabled?: boolean;
-    /** Show inline confirmation before executing the action */
+    /** Show a pending spinner on the action (e.g. slow bulk op in flight). */
+    loading?: boolean;
+    /** Show inline confirmation before executing the action. */
     requiresConfirmation?: boolean;
-    /** Custom confirmation message @default 'Are you sure?' */
+    /** Custom confirmation message. @default 'Are you sure?' */
     confirmMessage?: string;
 }
-export interface BulkActionBarProps {
+export interface BulkActionBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'style'> {
     show: boolean;
     count: number;
     onClearSelection: () => void;
     actions: BulkActionBarAction[];
-    /** Total number of items available for selection */
+    /** Total items available for selection (enables "Select all"). */
     totalCount?: number;
-    /** Called when user clicks "Select all" */
+    /** Called when the user clicks "Select all". */
     onSelectAll?: () => void;
-    className?: string;
-}
-declare function BulkActionBar({ show, count, onClearSelection, actions, totalCount, onSelectAll, className, }: BulkActionBarProps): React.ReactPortal | null;
-declare namespace BulkActionBar {
-    var displayName: string;
 }
+/**
+ * BulkActionBar — floating selection toolbar. Follows the ARIA toolbar model:
+ * a single tab stop with roving focus (Arrow keys / Home / End) across ALL
+ * controls (Select-all, actions, Clear), focus landing on the real buttons so
+ * Enter/Space activate them. Arrow direction mirrors under `dir="rtl"`. Escape
+ * clears the selection (or cancels a pending confirmation).
+ */
+declare const BulkActionBar: React.ForwardRefExoticComponent<BulkActionBarProps & React.RefAttributes<HTMLDivElement>>;
 export { BulkActionBar };
 //# sourceMappingURL=bulk-action-bar.d.ts.map

package/dist/composed/bulk-action-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../src/composed/bulk-action-bar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAQrD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAyED,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,4BAqGpB;kBA7GQ,aAAa;;;AAiHtB,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../src/composed/bulk-action-bar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAIrD,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAE/D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAEpC,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,WAAW,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,sBAAsB,GAAG,OAAO,CACzI;IACD,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,2FAwJlB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}