@devalok/shilp-sutra 0.59.0 → 0.60.0

package/docs/components/composed/bulk-action-bar.md

@@ -4,6 +4,13 @@
 - Server-safe: No
 - Category: composed
 
+Floating selection toolbar for bulk actions — re-exported from `ui/bulk-action-bar`.
+
+The implementation moved to `ui/bulk-action-bar` so `DataTable` could use it
+(`ui/` may not import `composed/`). This path keeps working. **See
+[ui/bulk-action-bar](../ui/bulk-action-bar.md) for the full reference**; it is
+the canonical doc and this one only mirrors the surface.
+
 ## Props
     show: boolean (controls visibility)
     count: number (number of selected items — displayed in badge)
@@ -11,6 +18,7 @@
     actions: BulkActionBarAction[]
     totalCount: number (optional — total selectable items; enables "Select all")
     onSelectAll: () => void (optional — called by the "Select all" control)
+    placement: "bottom" | "top" | "inline" (default: "bottom")
     className: string
     ...div attributes (forwardRef to the toolbar div; HTMLAttributes spread)
 
@@ -25,7 +33,7 @@
     confirmMessage: string (optional — default "Are you sure?")
 
 ## Defaults
-    (no optional props with defaults)
+    placement: "bottom"
 
 ## Example
 ```jsx
@@ -42,11 +50,10 @@
 
 ## Composability
 - **Standalone floating toolbar** — use with DataTable, TreeView, or any selection-capable UI.
-- **DataTable auto-integration:** DataTable's `bulkActions` prop renders this internally — typically you don't render BulkActionBar directly when using DataTable.
-- **Data-driven actions:** `{ label, icon, onClick, color, disabled }[]`. For destructive confirmation, call ConfirmDialog from the onClick handler.
-- **Portal to body + fixed bottom-center z-50** — independent of parent layout. Check for other fixed elements that might overlap.
+- **DataTable auto-integration:** DataTable's `bulkActions` prop renders this internally; `bulkActionsPosition` maps to `placement`.
+- **Placement decides portalling** — `bottom` / `top` portal to the body, `inline` renders in flow.
 
 ## Gotchas
-- Renders via `createPortal` into `document.body` — will not appear during SSR (mounts only client-side)
-- Positioned fixed at bottom-center with `z-50`; ensure no other fixed elements conflict
-- Uses Framer Motion AnimatePresence for slide-in/out animation
+- Prefer importing from `@devalok/shilp-sutra/ui/bulk-action-bar`. This path is kept so existing imports do not break.
+- Portalled placements do not render during SSR; `inline` does.
+- Inside a Dialog or Sheet use `placement="inline"`, or the portal escapes the overlay's stacking context.

package/docs/components/ui/bulk-action-bar.md

@@ -0,0 +1,72 @@
+# BulkActionBar
+
+- Import: @devalok/shilp-sutra/ui/bulk-action-bar
+- Server-safe: No
+- Category: ui
+
+Also re-exported from `@devalok/shilp-sutra/composed/bulk-action-bar`, which is
+where it used to live. Both paths work. The implementation sits in `ui/` because
+`DataTable` uses it and `ui/` may not import `composed/`.
+
+## Props
+    show: boolean (controls visibility)
+    count: number (number of selected items — displayed in badge)
+    onClearSelection: () => void
+    actions: BulkActionBarAction[]
+    totalCount: number (optional — total selectable items; enables "Select all")
+    onSelectAll: () => void (optional — called by the "Select all" control)
+    placement: "bottom" | "top" | "inline" (default: "bottom")
+    className: string
+    ...div attributes (forwardRef to the toolbar div; HTMLAttributes spread)
+
+### BulkActionBarAction
+    label: string
+    icon: IconInput (optional — any icon component or element)
+    onClick: () => void
+    color: "accent" | "error" | "success" | "warning" | "info" | "neutral" (default: "accent")
+    disabled: boolean (optional)
+    loading: boolean (optional — pending spinner on the action)
+    requiresConfirmation: boolean (optional — inline confirm before executing)
+    confirmMessage: string (optional — default "Are you sure?")
+
+## Defaults
+    placement: "bottom"
+
+## Example
+```jsx
+<BulkActionBar
+  show={selected.length > 0}
+  count={selected.length}
+  onClearSelection={() => setSelected([])}
+  actions={[
+    { label: 'Archive', icon: IconArchive, onClick: archiveSelected },
+    {
+      label: 'Delete',
+      icon: IconTrash,
+      onClick: deleteSelected,
+      color: 'error',
+      requiresConfirmation: true,
+    },
+  ]}
+/>
+```
+
+Inside a Dialog or Sheet, use `placement="inline"` so the bar stays within the
+overlay:
+
+```jsx
+<BulkActionBar placement="inline" show={n > 0} count={n} … />
+```
+
+## Composability
+- **Standalone floating toolbar** — use with DataTable, TreeView, or any selection-capable UI.
+- **DataTable auto-integration:** DataTable's `bulkActions` prop renders this internally, so you rarely render it directly alongside a DataTable. `bulkActionsPosition` maps to `placement`.
+- **Data-driven actions:** `{ label, icon, onClick, color, disabled, loading, requiresConfirmation }[]`. Destructive confirmation is built in — set `requiresConfirmation` rather than reaching for ConfirmDialog.
+- **Placement decides portalling.** `bottom` / `top` portal to `document.body` and pin to the viewport. `inline` renders in flow, in place.
+
+## Gotchas
+- `placement="bottom"` / `"top"` render via `createPortal` into `document.body`, so they do not appear during SSR — they mount client-side only. `placement="inline"` has no portal and renders server-side normally.
+- **A portal escapes its ancestors' stacking context.** Inside a Dialog or Sheet, a portalled bar floats over the page instead of belonging to the overlay — use `placement="inline"` there. This is why placement and portalling are one prop rather than two.
+- Pinned placements use `z-sticky`; ensure no other fixed element conflicts.
+- Follows the ARIA toolbar model: one tab stop, roving focus on Arrow / Home / End (mirrored under `dir="rtl"`), Escape to clear or to cancel a pending confirmation. If you wrap the actions in anything that also handles arrow keys, the two will fight.
+- Uses Framer Motion AnimatePresence; respects `prefers-reduced-motion`.

package/llms.txt

@@ -1,6 +1,6 @@
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.59.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.60.0.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 
@@ -120,7 +120,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 ### composed
 - [activity-feed](docs/components/composed/activity-feed.md)
 - [avatar-group](docs/components/composed/avatar-group.md)
-- [bulk-action-bar](docs/components/composed/bulk-action-bar.md)
+- [bulk-action-bar](docs/components/composed/bulk-action-bar.md): Floating selection toolbar for bulk actions — re-exported from `ui/bulk-action-bar`
 - [command-palette](docs/components/composed/command-palette.md)
 - [confirm-dialog](docs/components/composed/confirm-dialog.md)
 - [content-card](docs/components/composed/content-card.md): **DEPRECATED (v0.44.0)** — will be removed in the next major

package/make-kit/foundations/color.md

@@ -31,7 +31,7 @@ Border?
   → standard hairline      → border-surface-border
   → emphasized             → border-surface-border-strong
   → subtle divider         → border-surface-border-subtle
-  → state (form invalid)   → border-error-7 (or use Input state="error" instead)
+  → state (form invalid)   → border-error-8 (or use Input state="error" instead)
 
 Status?
   → error    → bg-error-3 / text-error-11 / border-error-7
@@ -57,6 +57,8 @@ Brand emphasis?
 | `surface-overlay` | Floating layers — dialogs, popovers, dropdowns, inputs, toasts. |
 | `surface-inverted` | Tooltips, inverted badges. Pair with `surface-inverted-fg`. |
 | `surface-disabled` | Disabled controls. Pair with `surface-fg-disabled`. |
+| `field` | Ground for a form control — Input, Textarea, Select, Combobox. Not a surface tier: the control is defined by its border, so the fill sits flush with whatever it is on. |
+| `field-hover` | Hover state on a form control. |
 
 Available as: `bg-surface-*`, `text-surface-*`, `border-surface-*`.
 

package/mcp-manifest.json

@@ -2,7 +2,7 @@
   "$schema": "./mcp-manifest.schema.json",
   "manifestVersion": "1.2.0",
   "package": "@devalok/shilp-sutra",
-  "packageVersion": "0.59.0",
+  "packageVersion": "0.60.0",
   "components": {
     "accordion": {
       "displayName": "Accordion",
@@ -1221,6 +1221,161 @@
         }
       ]
     },
+    "bulk-action-bar": {
+      "displayName": "BulkActionBar",
+      "tier": "composed",
+      "import": "@devalok/shilp-sutra/composed/bulk-action-bar",
+      "serverSafe": false,
+      "description": "Floating selection toolbar for bulk actions — re-exported from `ui/bulk-action-bar`. The implementation moved to `ui/bulk-action-bar` so `DataTable` could use it (`ui/` may not import `composed/`). This path keeps working. **See [ui/bulk-action-bar](../ui/bulk-action-bar.md) for the full reference**; it is the canonical doc and this one only mirrors the surface.",
+      "props": {
+        "show": {
+          "type": {
+            "name": "boolean"
+          },
+          "required": false,
+          "description": "controls visibility"
+        },
+        "count": {
+          "type": {
+            "name": "number"
+          },
+          "required": false,
+          "description": "number of selected items — displayed in badge"
+        },
+        "onClearSelection": {
+          "type": {
+            "name": "function",
+            "raw": "() => void"
+          },
+          "required": false
+        },
+        "actions": {
+          "type": {
+            "name": "object",
+            "raw": "BulkActionBarAction[]"
+          },
+          "required": false
+        },
+        "totalCount": {
+          "type": {
+            "name": "number"
+          },
+          "required": false,
+          "description": "optional — total selectable items; enables \"Select all\""
+        },
+        "onSelectAll": {
+          "type": {
+            "name": "function",
+            "raw": "() => void (optional — called by the \"Select all\" control)"
+          },
+          "required": false
+        },
+        "placement": {
+          "type": {
+            "name": "enum",
+            "value": [
+              "bottom",
+              "top",
+              "inline"
+            ]
+          },
+          "required": false,
+          "defaultValue": "bottom"
+        },
+        "className": {
+          "type": {
+            "name": "string"
+          },
+          "required": false
+        }
+      },
+      "composition": {
+        "notes": [
+          "**Standalone floating toolbar** — use with DataTable, TreeView, or any selection-capable UI.",
+          "**DataTable auto-integration:** DataTable's `bulkActions` prop renders this internally; `bulkActionsPosition` maps to `placement`.",
+          "**Placement decides portalling** — `bottom` / `top` portal to the body, `inline` renders in flow."
+        ]
+      },
+      "docPath": "docs/components/composed/bulk-action-bar.md",
+      "subComponents": {
+        "BulkActionBarAction": {
+          "props": {
+            "label": {
+              "type": {
+                "name": "string"
+              },
+              "required": false
+            },
+            "icon": {
+              "type": {
+                "name": "object",
+                "raw": "IconInput"
+              },
+              "required": false,
+              "description": "optional — any icon component or element"
+            },
+            "onClick": {
+              "type": {
+                "name": "function",
+                "raw": "() => void"
+              },
+              "required": false
+            },
+            "color": {
+              "type": {
+                "name": "enum",
+                "value": [
+                  "accent",
+                  "error",
+                  "success",
+                  "warning",
+                  "info",
+                  "neutral"
+                ]
+              },
+              "required": false,
+              "defaultValue": "accent"
+            },
+            "disabled": {
+              "type": {
+                "name": "boolean"
+              },
+              "required": false,
+              "description": "optional"
+            },
+            "loading": {
+              "type": {
+                "name": "boolean"
+              },
+              "required": false,
+              "description": "optional — pending spinner on the action"
+            },
+            "requiresConfirmation": {
+              "type": {
+                "name": "boolean"
+              },
+              "required": false,
+              "description": "optional — inline confirm before executing"
+            },
+            "confirmMessage": {
+              "type": {
+                "name": "string"
+              },
+              "required": false,
+              "description": "optional — default \"Are you sure?\""
+            }
+          }
+        }
+      },
+      "examples": [
+        "<BulkActionBar\n  show={selected.length > 0}\n  count={selected.length}\n  onClearSelection={() => setSelected([])}\n  actions={[\n    { label: 'Archive', icon: IconArchive, onClick: archiveSelected },\n    { label: 'Delete', icon: IconTrash, onClick: deleteSelected, color: 'error' },\n  ]}\n/>"
+      ],
+      "gotchas": [
+        "Prefer importing from `@devalok/shilp-sutra/ui/bulk-action-bar`. This path is kept so existing imports do not break.",
+        "Portalled placements do not render during SSR; `inline` does.",
+        "Inside a Dialog or Sheet use `placement=\"inline\"`, or the portal escapes the overlay's stacking context."
+      ]
+    },
     "button": {
       "displayName": "Button",
       "tier": "ui",
@@ -8659,150 +8814,6 @@
         }
       ]
     },
-    "bulk-action-bar": {
-      "displayName": "BulkActionBar",
-      "tier": "composed",
-      "import": "@devalok/shilp-sutra/composed/bulk-action-bar",
-      "serverSafe": false,
-      "description": "",
-      "props": {
-        "show": {
-          "type": {
-            "name": "boolean"
-          },
-          "required": false,
-          "description": "controls visibility"
-        },
-        "count": {
-          "type": {
-            "name": "number"
-          },
-          "required": false,
-          "description": "number of selected items — displayed in badge"
-        },
-        "onClearSelection": {
-          "type": {
-            "name": "function",
-            "raw": "() => void"
-          },
-          "required": false
-        },
-        "actions": {
-          "type": {
-            "name": "object",
-            "raw": "BulkActionBarAction[]"
-          },
-          "required": false
-        },
-        "totalCount": {
-          "type": {
-            "name": "number"
-          },
-          "required": false,
-          "description": "optional — total selectable items; enables \"Select all\""
-        },
-        "onSelectAll": {
-          "type": {
-            "name": "function",
-            "raw": "() => void (optional — called by the \"Select all\" control)"
-          },
-          "required": false
-        },
-        "className": {
-          "type": {
-            "name": "string"
-          },
-          "required": false
-        }
-      },
-      "composition": {
-        "notes": [
-          "**Standalone floating toolbar** — use with DataTable, TreeView, or any selection-capable UI.",
-          "**DataTable auto-integration:** DataTable's `bulkActions` prop renders this internally — typically you don't render BulkActionBar directly when using DataTable.",
-          "**Data-driven actions:** `{ label, icon, onClick, color, disabled }[]`. For destructive confirmation, call ConfirmDialog from the onClick handler.",
-          "**Portal to body + fixed bottom-center z-50** — independent of parent layout. Check for other fixed elements that might overlap."
-        ]
-      },
-      "docPath": "docs/components/composed/bulk-action-bar.md",
-      "subComponents": {
-        "BulkActionBarAction": {
-          "props": {
-            "label": {
-              "type": {
-                "name": "string"
-              },
-              "required": false
-            },
-            "icon": {
-              "type": {
-                "name": "object",
-                "raw": "IconInput"
-              },
-              "required": false,
-              "description": "optional — any icon component or element"
-            },
-            "onClick": {
-              "type": {
-                "name": "function",
-                "raw": "() => void"
-              },
-              "required": false
-            },
-            "color": {
-              "type": {
-                "name": "enum",
-                "value": [
-                  "accent",
-                  "error",
-                  "success",
-                  "warning",
-                  "info",
-                  "neutral"
-                ]
-              },
-              "required": false,
-              "defaultValue": "accent"
-            },
-            "disabled": {
-              "type": {
-                "name": "boolean"
-              },
-              "required": false,
-              "description": "optional"
-            },
-            "loading": {
-              "type": {
-                "name": "boolean"
-              },
-              "required": false,
-              "description": "optional — pending spinner on the action"
-            },
-            "requiresConfirmation": {
-              "type": {
-                "name": "boolean"
-              },
-              "required": false,
-              "description": "optional — inline confirm before executing"
-            },
-            "confirmMessage": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "optional — default \"Are you sure?\""
-            }
-          }
-        }
-      },
-      "examples": [
-        "<BulkActionBar\n  show={selected.length > 0}\n  count={selected.length}\n  onClearSelection={() => setSelected([])}\n  actions={[\n    { label: 'Archive', icon: IconArchive, onClick: archiveSelected },\n    { label: 'Delete', icon: IconTrash, onClick: deleteSelected, color: 'error' },\n  ]}\n/>"
-      ],
-      "gotchas": [
-        "Renders via `createPortal` into `document.body` — will not appear during SSR (mounts only client-side)",
-        "Positioned fixed at bottom-center with `z-50`; ensure no other fixed elements conflict",
-        "Uses Framer Motion AnimatePresence for slide-in/out animation"
-      ]
-    },
     "command-palette": {
       "displayName": "CommandPalette",
       "tier": "composed",
@@ -14022,6 +14033,14 @@
         "name": "--color-segment-thumb",
         "value": "var(--neutral-5)"
       },
+      {
+        "name": "--color-field",
+        "value": "Canvas"
+      },
+      {
+        "name": "--color-field-hover",
+        "value": "Canvas"
+      },
       {
         "name": "--color-overlay",
         "value": "Canvas"
@@ -14054,6 +14073,10 @@
         "name": "--color-error-7",
         "value": "CanvasText"
       },
+      {
+        "name": "--color-error-8",
+        "value": "CanvasText"
+      },
       {
         "name": "--color-error-9",
         "value": "Mark"
@@ -14094,6 +14117,10 @@
         "name": "--color-success-7",
         "value": "CanvasText"
       },
+      {
+        "name": "--color-success-8",
+        "value": "CanvasText"
+      },
       {
         "name": "--color-success-9",
         "value": "Highlight"
@@ -14774,7 +14801,7 @@
       },
       {
         "name": "--shadow-pressed",
-        "value": "0 0 0 1px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength)))"
+        "value": "0 0 0 1px oklch(1 0 0 / 0.10)"
       },
       {
         "name": "--shadow-success",
@@ -14797,6 +14824,11 @@
         "value": "1",
         "darkValue": "2.5"
       },
+      {
+        "name": "--shadow-color",
+        "value": "0.263 0.029 259",
+        "darkValue": "0.05 0.012 260"
+      },
       {
         "name": "--shadow-edge-ring",
         "value": "0 0 0 1px oklch(var(--shadow-color) / calc(0.09 * var(--shadow-strength)))",
@@ -14807,10 +14839,6 @@
         "value": "0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength)))",
         "darkValue": "0 0 0 1px oklch(1 0 0 / 0.07)"
       },
-      {
-        "name": "--shadow-color",
-        "value": "0.15 0.015 260"
-      },
       {
         "name": "--shadow-transition",
         "value": "box-shadow var(--duration-fast-02) var(--ease-productive-standard)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "description": "Devalok Design System — accessible React components, OKLCH design tokens, and Tailwind 4 CSS-first setup. Ships with AI-agent setup recipes.",
   "license": "MIT",
   "author": "Devalok Design & Strategy Studios <shilp-sutra@devalok.in>",
@@ -133,6 +133,11 @@
       "import": "./dist/ui/button.js",
       "default": "./dist/ui/button.js"
     },
+    "./ui/bulk-action-bar": {
+      "types": "./dist/ui/bulk-action-bar.d.ts",
+      "import": "./dist/ui/bulk-action-bar.js",
+      "default": "./dist/ui/bulk-action-bar.js"
+    },
     "./ui/button-group": {
       "types": "./dist/ui/button-group.d.ts",
       "import": "./dist/ui/button-group.js",

package/skill/SKILL.md

@@ -3,7 +3,7 @@ name: shilp-sutra
 description: Add, configure, and use components from Devalok's shilp-sutra design system (@devalok/shilp-sutra) — a Tailwind 4 + React 19 + CVA library with 110+ accessible components, OKLCH design tokens, framer-motion animations, and per-component RSC-safe entry points. Use this skill whenever the user mentions shilp-sutra, Devalok, the @devalok npm scope, or asks to install/add/style/theme UI in any React project that already depends on the package — even if they don't name it explicitly. Use it instead of generic shadcn/ui, MUI, or Chakra knowledge when shilp-sutra is in the project. Covers Next.js (App + Pages), Vite, Astro, Remix, TanStack Start setup playbooks; component API and variant reference; brand token customization; Server Component import patterns; and a troubleshoot tree for the thirteen most common breakages.
 license: MIT
 metadata:
-  version: "0.59.0"
+  version: "0.60.0"
   author: Devalok Design & Strategy Studios
   homepage: https://github.com/devalok-design/shilp-sutra
   npm: https://www.npmjs.com/package/@devalok/shilp-sutra

package/skill/references/components.md

@@ -2,7 +2,7 @@
 
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.59.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.60.0.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 
@@ -122,7 +122,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 ### composed
 - [activity-feed](docs/components/composed/activity-feed.md)
 - [avatar-group](docs/components/composed/avatar-group.md)
-- [bulk-action-bar](docs/components/composed/bulk-action-bar.md)
+- [bulk-action-bar](docs/components/composed/bulk-action-bar.md): Floating selection toolbar for bulk actions — re-exported from `ui/bulk-action-bar`
 - [command-palette](docs/components/composed/command-palette.md)
 - [confirm-dialog](docs/components/composed/confirm-dialog.md)
 - [content-card](docs/components/composed/content-card.md): **DEPRECATED (v0.44.0)** — will be removed in the next major

package/dist/composed/bulk-action-bar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bulk-action-bar.js","names":[],"sources":["../../src/composed/bulk-action-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\ntype ButtonColor = React.ComponentProps<typeof Button>['color']\n\nexport interface BulkActionBarAction {\n  label: string\n  icon?: IconInput\n  onClick: () => void\n  /** Any Button color. @default 'accent' (or 'error' for destructive). */\n  color?: ButtonColor\n  disabled?: boolean\n  /** Show a pending spinner on the action (e.g. slow bulk op in flight). */\n  loading?: boolean\n  /** Show inline confirmation before executing the action. */\n  requiresConfirmation?: boolean\n  /** Custom confirmation message. @default 'Are you sure?' */\n  confirmMessage?: string\n}\n\nexport interface BulkActionBarProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    // Keys whose types collide with framer-motion's HTMLMotionProps.\n    'children' | 'color' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'style'\n  > {\n  show: boolean\n  count: number\n  onClearSelection: () => void\n  actions: BulkActionBarAction[]\n  /** Total items available for selection (enables \"Select all\"). */\n  totalCount?: number\n  /** Called when the user clicks \"Select all\". */\n  onSelectAll?: () => void\n}\n\n/**\n * BulkActionBar — floating selection toolbar. Follows the ARIA toolbar model:\n * a single tab stop with roving focus (Arrow keys / Home / End) across ALL\n * controls (Select-all, actions, Clear), focus landing on the real buttons so\n * Enter/Space activate them. Arrow direction mirrors under `dir=\"rtl\"`. Escape\n * clears the selection (or cancels a pending confirmation).\n */\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    { show, count, onClearSelection, actions, totalCount, onSelectAll, className, ...props },\n    forwardedRef,\n  ) {\n    const reduced = useReducedMotion()\n    const [mounted, setMounted] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(0)\n    const [confirming, setConfirming] = React.useState<number | null>(null)\n    const controlRefs = React.useRef<Array<HTMLButtonElement | null>>([])\n    const confirmRef = React.useRef<HTMLButtonElement | null>(null)\n\n    const hasSelectAll = totalCount != null && totalCount > count && !!onSelectAll\n    const selectAllOffset = hasSelectAll ? 1 : 0\n    const total = selectAllOffset + actions.length + 1 // + Clear\n\n    React.useEffect(() => { setMounted(true) }, [])\n    React.useEffect(() => { setFocusedIndex(0); setConfirming(null) }, [actions.length])\n    // Move focus to Confirm when a confirmation opens.\n    React.useEffect(() => {\n      if (confirming != null) confirmRef.current?.focus()\n    }, [confirming])\n\n    const focusAt = (i: number) => {\n      const clamped = (i + total) % total\n      setFocusedIndex(clamped)\n      controlRefs.current[clamped]?.focus()\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        if (confirming != null) { setConfirming(null); focusAt(focusedIndex) }\n        else onClearSelection()\n        return\n      }\n      if (confirming != null) return // roving suspended during confirm\n      const rtl = e.currentTarget.dir === 'rtl' || document.dir === 'rtl'\n      const fwd = rtl ? 'ArrowLeft' : 'ArrowRight'\n      const back = rtl ? 'ArrowRight' : 'ArrowLeft'\n      if (e.key === fwd) { e.preventDefault(); focusAt(focusedIndex + 1) }\n      else if (e.key === back) { e.preventDefault(); focusAt(focusedIndex - 1) }\n      else if (e.key === 'Home') { e.preventDefault(); focusAt(0) }\n      else if (e.key === 'End') { e.preventDefault(); focusAt(total - 1) }\n    }\n\n    if (!mounted) return null\n\n    const slideTransition = reduced ? { duration: 0 } : springs.smooth\n\n    return createPortal(\n      <AnimatePresence>\n        {show && (\n          <motion.div\n            ref={forwardedRef}\n            initial={reduced ? { opacity: 0 } : { y: 100, opacity: 0 }}\n            animate={reduced ? { opacity: 1 } : { y: 0, opacity: 1 }}\n            exit={reduced ? { opacity: 0 } : { y: 100, opacity: 0 }}\n            transition={slideTransition}\n            className={cn(\n              'fixed bottom-ds-06 start-1/2 z-sticky -translate-x-1/2',\n              'flex items-center gap-ds-04 rounded-surface bg-surface-overlay px-ds-05 py-ds-03 shadow-floating',\n              className,\n            )}\n            role=\"toolbar\"\n            aria-label={`${count} items selected`}\n            onKeyDown={handleKeyDown}\n            {...props}\n          >\n            <Badge variant=\"solid\" size=\"sm\">{count} selected</Badge>\n\n            {hasSelectAll && (\n              <Button\n                ref={(el) => { controlRefs.current[0] = el }}\n                variant=\"link\"\n                size=\"xs\"\n                tabIndex={focusedIndex === 0 ? 0 : -1}\n                onClick={onSelectAll}\n              >\n                Select all {totalCount}\n              </Button>\n            )}\n\n            <div className=\"flex items-center gap-ds-02\">\n              {actions.map((action, i) => {\n                const controlIndex = selectAllOffset + i\n                const isConfirming = confirming === i\n                if (isConfirming) {\n                  return (\n                    <div\n                      key={action.label}\n                      role=\"group\"\n                      aria-live=\"assertive\"\n                      className=\"flex items-center gap-ds-02\"\n                    >\n                      <span className=\"whitespace-nowrap text-body-sm text-surface-fg-muted\">\n                        {action.confirmMessage ?? 'Are you sure?'}\n                      </span>\n                      <Button\n                        ref={confirmRef}\n                        variant=\"solid\"\n                        size=\"sm\"\n                        color={action.color === 'error' ? 'error' : (action.color ?? 'accent')}\n                        onClick={() => { setConfirming(null); action.onClick() }}\n                      >\n                        Confirm\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={() => { setConfirming(null); focusAt(controlIndex) }}\n                      >\n                        Cancel\n                      </Button>\n                    </div>\n                  )\n                }\n                return (\n                  <Button\n                    key={action.label}\n                    ref={(el) => { controlRefs.current[controlIndex] = el }}\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    color={action.color ?? 'accent'}\n                    disabled={action.disabled}\n                    loading={action.loading}\n                    startIcon={action.icon ?? undefined}\n                    tabIndex={focusedIndex === controlIndex ? 0 : -1}\n                    onClick={action.requiresConfirmation ? () => setConfirming(i) : action.onClick}\n                  >\n                    {action.label}\n                  </Button>\n                )\n              })}\n            </div>\n\n            <Button\n              ref={(el) => { controlRefs.current[total - 1] = el }}\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              tabIndex={focusedIndex === total - 1 ? 0 : -1}\n              onClick={onClearSelection}\n              aria-label=\"Clear selection\"\n            >\n              <Icon icon={IconX} size=\"sm\" />\n            </Button>\n          </motion.div>\n        )}\n      </AnimatePresence>,\n      document.body,\n    )\n  },\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\nexport { BulkActionBar }\n"],"mappings":"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"}