@devalok/shilp-sutra 0.57.0 → 0.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MIGRATION.md +163 -0
- package/dist/_chunks/badge-group.js +75 -188
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chat.js +244 -243
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/image-preview.js +71 -70
- package/dist/_chunks/image-preview.js.map +1 -1
- package/dist/_chunks/motion-preference.js +15 -0
- package/dist/_chunks/motion-preference.js.map +1 -0
- package/dist/_chunks/motion-provider.js +1 -1
- package/dist/_chunks/motion-provider.js.map +1 -1
- package/dist/_chunks/popover.js +50 -49
- package/dist/_chunks/popover.js.map +1 -1
- package/dist/_chunks/primitives-internal.js +29 -29
- package/dist/_chunks/primitives-internal.js.map +1 -1
- package/dist/_chunks/shared.js +48 -47
- package/dist/_chunks/shared.js.map +1 -1
- package/dist/_chunks/success.js +34 -34
- package/dist/_chunks/tree-view.js +1 -1
- package/dist/_chunks/tree-view.js.map +1 -1
- package/dist/ai/block-renderer.js +8 -8
- package/dist/ai/command-bar.js +65 -65
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.js +35 -35
- package/dist/ai/conversation.js.map +1 -1
- package/dist/ai/index.js +4 -4
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js +108 -107
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/avatar-group.js +3 -3
- package/dist/composed/avatar-group.js.map +1 -1
- package/dist/composed/bulk-action-bar.d.ts +9 -35
- package/dist/composed/bulk-action-bar.d.ts.map +1 -1
- package/dist/composed/bulk-action-bar.js +2 -139
- package/dist/composed/command-palette.js +137 -137
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/content-card.js +1 -1
- package/dist/composed/content-card.js.map +1 -1
- package/dist/composed/date-picker/index.js +5 -5
- package/dist/composed/date-picker/index.js.map +1 -1
- package/dist/composed/empty-state.js +4 -4
- package/dist/composed/file-preview/image-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/shared.d.ts.map +1 -1
- package/dist/composed/file-preview/video-preview.d.ts.map +1 -1
- package/dist/composed/file-preview.js +151 -150
- package/dist/composed/file-preview.js.map +1 -1
- package/dist/composed/filter-bar.d.ts.map +1 -1
- package/dist/composed/filter-bar.js +53 -52
- package/dist/composed/filter-bar.js.map +1 -1
- package/dist/composed/form-section.d.ts.map +1 -1
- package/dist/composed/form-section.js +38 -37
- package/dist/composed/form-section.js.map +1 -1
- package/dist/composed/index.js +6 -5
- package/dist/composed/master-detail.d.ts.map +1 -1
- package/dist/composed/master-detail.js +1 -1
- package/dist/composed/master-detail.js.map +1 -1
- package/dist/composed/multi-select-popover.d.ts.map +1 -1
- package/dist/composed/multi-select-popover.js +109 -108
- package/dist/composed/multi-select-popover.js.map +1 -1
- package/dist/composed/rich-chat-input/attachment-strip.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/reply-banner.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/schedule-send.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.js +467 -466
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +3 -3
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.js +2 -2
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +29 -28
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/motion/index.d.ts +1 -0
- package/dist/motion/index.d.ts.map +1 -1
- package/dist/motion/index.js +2 -15
- package/dist/motion/motion-preference.d.ts +36 -0
- package/dist/motion/motion-preference.d.ts.map +1 -0
- package/dist/motion/motion-provider.d.ts +2 -1
- package/dist/motion/motion-provider.d.ts.map +1 -1
- package/dist/motion/primitives-index.js +103 -102
- package/dist/motion/primitives-index.js.map +1 -1
- package/dist/motion/primitives.d.ts.map +1 -1
- package/dist/shell/bottom-navbar.js +19 -19
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/index.d.ts +1 -1
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/notification-center.d.ts +17 -0
- package/dist/shell/notification-center.d.ts.map +1 -1
- package/dist/shell/notification-center.js +109 -104
- package/dist/shell/notification-center.js.map +1 -1
- package/dist/shell/notification-preferences.js +1 -1
- package/dist/shell/notification-preferences.js.map +1 -1
- package/dist/shell/top-bar.js +1 -1
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tokens/index.css +1 -0
- package/dist/tokens/palettes.css +292 -0
- package/dist/tokens/semantic.css +157 -11
- package/dist/tokens/shilp-sutra.css +1 -0
- package/dist/tokens/utilities.css +10 -7
- package/dist/ui/accordion.d.ts.map +1 -1
- package/dist/ui/accordion.js +27 -26
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/alert-dialog.d.ts.map +1 -1
- package/dist/ui/alert-dialog.js +60 -59
- package/dist/ui/alert-dialog.js.map +1 -1
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +55 -113
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/autocomplete.js +80 -80
- package/dist/ui/autocomplete.js.map +1 -1
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +71 -70
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-indicator.d.ts +4 -8
- package/dist/ui/badge-indicator.d.ts.map +1 -1
- package/dist/ui/badge-indicator.js +3 -8
- package/dist/ui/badge-indicator.js.map +1 -1
- package/dist/ui/badge.d.ts +8 -1
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/banner.d.ts.map +1 -1
- package/dist/ui/banner.js +42 -40
- package/dist/ui/banner.js.map +1 -1
- package/dist/ui/bulk-action-bar.d.ts +59 -0
- package/dist/ui/bulk-action-bar.d.ts.map +1 -0
- package/dist/ui/bulk-action-bar.js +145 -0
- package/dist/ui/bulk-action-bar.js.map +1 -0
- package/dist/ui/button-group.d.ts.map +1 -1
- package/dist/ui/button-group.js +3 -23
- package/dist/ui/button-group.js.map +1 -1
- package/dist/ui/button.d.ts +10 -1
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +79 -212
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +75 -72
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/charts/radar-chart.d.ts.map +1 -1
- package/dist/ui/charts/radar-chart.js +1 -1
- package/dist/ui/charts/radar-chart.js.map +1 -1
- package/dist/ui/chat/message-list.d.ts.map +1 -1
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/chat/typing-indicator.d.ts.map +1 -1
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +1 -1
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code.js +1 -1
- package/dist/ui/code.js.map +1 -1
- package/dist/ui/color-input.d.ts.map +1 -1
- package/dist/ui/color-input.js +151 -150
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/combobox.d.ts +14 -0
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +162 -158
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/context-menu.d.ts.map +1 -1
- package/dist/ui/context-menu.js +70 -69
- package/dist/ui/context-menu.js.map +1 -1
- package/dist/ui/data-table-body.d.ts.map +1 -1
- package/dist/ui/data-table-body.js +4 -3
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-bulk-actions.d.ts +26 -1
- package/dist/ui/data-table-bulk-actions.d.ts.map +1 -1
- package/dist/ui/data-table-bulk-actions.js +21 -46
- package/dist/ui/data-table-bulk-actions.js.map +1 -1
- package/dist/ui/data-table-context.d.ts +36 -2
- package/dist/ui/data-table-context.d.ts.map +1 -1
- package/dist/ui/data-table-context.js +25 -21
- package/dist/ui/data-table-context.js.map +1 -1
- package/dist/ui/data-table-header.d.ts.map +1 -1
- package/dist/ui/data-table-header.js +42 -40
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table-pagination.js +2 -2
- package/dist/ui/data-table-pagination.js.map +1 -1
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +61 -60
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dot.d.ts.map +1 -1
- package/dist/ui/dot.js +10 -41
- package/dist/ui/dot.js.map +1 -1
- package/dist/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/ui/dropdown-menu.js +79 -78
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +116 -115
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/form.d.ts.map +1 -1
- package/dist/ui/form.js +27 -26
- package/dist/ui/form.js.map +1 -1
- package/dist/ui/hover-card.d.ts.map +1 -1
- package/dist/ui/hover-card.js +26 -25
- package/dist/ui/hover-card.js.map +1 -1
- package/dist/ui/icon.js +7 -7
- package/dist/ui/index.d.ts +3 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +60 -59
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/input.d.ts.map +1 -1
- package/dist/ui/input.js +7 -7
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/menubar.d.ts.map +1 -1
- package/dist/ui/menubar.js +73 -72
- package/dist/ui/menubar.js.map +1 -1
- package/dist/ui/navigation-menu.d.ts.map +1 -1
- package/dist/ui/navigation-menu.js +80 -79
- package/dist/ui/navigation-menu.js.map +1 -1
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/progress.d.ts.map +1 -1
- package/dist/ui/progress.js +72 -68
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.d.ts.map +1 -1
- package/dist/ui/radio.js +35 -34
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/search-input.d.ts.map +1 -1
- package/dist/ui/search-input.js +28 -27
- package/dist/ui/search-input.js.map +1 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +70 -69
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/sidebar.d.ts.map +1 -1
- package/dist/ui/sidebar.js +4 -4
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/slider.d.ts +63 -9
- package/dist/ui/slider.d.ts.map +1 -1
- package/dist/ui/slider.js +74 -32
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/split-button.d.ts +8 -2
- package/dist/ui/split-button.d.ts.map +1 -1
- package/dist/ui/split-button.js +49 -95
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +89 -88
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/stat-flash.js +16 -16
- package/dist/ui/stepper.d.ts.map +1 -1
- package/dist/ui/stepper.js +63 -62
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/switch.d.ts.map +1 -1
- package/dist/ui/switch.js +2 -2
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/table.d.ts.map +1 -1
- package/dist/ui/table.js +3 -3
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +67 -66
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/textarea.d.ts.map +1 -1
- package/dist/ui/textarea.js +7 -7
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +196 -195
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toggle.d.ts.map +1 -1
- package/dist/ui/toggle.js +24 -22
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +37 -36
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tree-view/tree-item.d.ts.map +1 -1
- package/docs/components/composed/bulk-action-bar.md +14 -7
- package/docs/components/ui/bulk-action-bar.md +72 -0
- package/docs/recipes/customize-brand.md +58 -0
- package/docs/recipes/install-astro.md +1 -1
- package/docs/recipes/install-next-app-router.md +1 -1
- package/docs/recipes/install-next-pages.md +22 -1
- package/docs/recipes/install-remix.md +1 -1
- package/docs/recipes/install-tanstack-start.md +1 -1
- package/docs/recipes/install-vite.md +2 -1
- package/docs/recipes/server-components.md +7 -4
- package/docs/recipes/troubleshoot.md +1 -0
- package/llms.txt +2 -2
- package/make-kit/foundations/color.md +3 -1
- package/mcp-manifest.json +184 -151
- package/package.json +8 -2
- package/skill/SKILL.md +1 -1
- package/skill/references/components.md +2 -2
- package/skill/references/customize-brand.md +58 -0
- package/skill/references/server-components.md +7 -4
- package/skill/references/setup-astro.md +1 -1
- package/skill/references/setup-next-app-router.md +1 -1
- package/skill/references/setup-next-pages.md +22 -1
- package/skill/references/setup-remix.md +1 -1
- package/skill/references/setup-tanstack-start.md +1 -1
- package/skill/references/setup-vite.md +2 -1
- package/skill/references/troubleshoot.md +1 -0
- package/dist/composed/bulk-action-bar.js.map +0 -1
- package/dist/motion/check-motion-provider.d.ts +0 -2
- package/dist/motion/check-motion-provider.d.ts.map +0 -1
- package/dist/motion/index.js.map +0 -1
|
@@ -256,6 +256,64 @@ Every override should consider both modes. Pattern:
|
|
|
256
256
|
|
|
257
257
|
`.dark` is a regular class selector — its specificity is higher than `:root`/`@theme` body, so dark-mode overrides win when the class is active.
|
|
258
258
|
|
|
259
|
+
## High contrast (`[data-contrast]`)
|
|
260
|
+
|
|
261
|
+
WCAG 2.2 SC 1.4.11 asks for **3:1** between a control's edge and its background.
|
|
262
|
+
The default control edge here is **2.00:1** in light and **2.08:1** in dark — a
|
|
263
|
+
deliberately softer look, and deliberately under that bar. It is recorded as
|
|
264
|
+
`CONTROL-EDGE-BELOW-AA` in the deviations register.
|
|
265
|
+
|
|
266
|
+
Set `data-contrast="high"` to opt into edges that clear the threshold:
|
|
267
|
+
|
|
268
|
+
```html
|
|
269
|
+
<!-- whole app -->
|
|
270
|
+
<html data-contrast="high">
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
```tsx
|
|
274
|
+
{/* or one region — a data-entry screen inside an otherwise soft product */}
|
|
275
|
+
<div data-contrast="high">
|
|
276
|
+
<InvoiceForm />
|
|
277
|
+
</div>
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
| | control edge, light | control edge, dark |
|
|
281
|
+
|---|---|---|
|
|
282
|
+
| default | `#b7b7b7` — 2.00:1 | `#4c4c4c` — 2.08:1 |
|
|
283
|
+
| `data-contrast="high"` | `#868686` — **3.64:1** | `#767676` — **3.93:1** |
|
|
284
|
+
|
|
285
|
+
It affects Input, Textarea, Select, Combobox, Checkbox, Radio, Switch,
|
|
286
|
+
NumberInput and outlined Button — anything using the control-edge tier. It does
|
|
287
|
+
**not** touch decorative borders (card and panel hairlines stay soft), and it
|
|
288
|
+
does not touch the chromatic ramps, so an outlined Button on a colour is
|
|
289
|
+
unchanged.
|
|
290
|
+
|
|
291
|
+
Composes with everything else — it is a plain attribute, like `.dark` and
|
|
292
|
+
`data-shape`:
|
|
293
|
+
|
|
294
|
+
```html
|
|
295
|
+
<html class="dark" data-shape="sharp" data-contrast="high">
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
**Two things worth knowing.**
|
|
299
|
+
|
|
300
|
+
If you override the neutral ramp, high contrast follows automatically — the
|
|
301
|
+
block resolves `--neutral-8` / `--neutral-9` by name rather than hard-coding
|
|
302
|
+
hexes, so a rebrand gets a correctly-scaled high-contrast mode for free.
|
|
303
|
+
|
|
304
|
+
If you want the *opposite* — compliant edges everywhere, with no attribute to
|
|
305
|
+
remember — set the tokens directly and skip the attribute entirely:
|
|
306
|
+
|
|
307
|
+
```css
|
|
308
|
+
:root {
|
|
309
|
+
--color-surface-border-interactive: var(--neutral-8);
|
|
310
|
+
--color-surface-border-interactive-strong: var(--neutral-9);
|
|
311
|
+
}
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
That is worth considering. A default is what most products ship, so leaving the
|
|
315
|
+
attribute unset means shipping the edge that misses 1.4.11.
|
|
316
|
+
|
|
259
317
|
## Forced colors (Windows high-contrast)
|
|
260
318
|
|
|
261
319
|
If you override semantic colors, the `@media (forced-colors: active)` block in `semantic.css` continues to remap to system keywords. Your override is ignored when the user is in high-contrast mode — this is the correct behavior.
|
|
@@ -36,10 +36,10 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
|
|
|
36
36
|
| When you import… | Install |
|
|
37
37
|
|---|---|
|
|
38
38
|
| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
|
|
39
|
+
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
39
40
|
| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
|
|
40
41
|
| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
|
|
41
42
|
| `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
|
|
42
|
-
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
43
43
|
| `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
|
|
44
44
|
| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
|
|
45
45
|
| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
|
|
@@ -49,10 +49,10 @@ Some components depend on third-party libraries that ship as optional peers. **I
|
|
|
49
49
|
| When you import… | Install |
|
|
50
50
|
|---|---|
|
|
51
51
|
| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
|
|
52
|
+
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
52
53
|
| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
|
|
53
54
|
| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
|
|
54
55
|
| `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
|
|
55
|
-
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
56
56
|
| `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
|
|
57
57
|
| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
|
|
58
58
|
| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
|
|
@@ -16,7 +16,28 @@ If both `app/` and `pages/` exist, prefer [install-next-app-router.md](./install
|
|
|
16
16
|
|
|
17
17
|
Same dependencies as the App Router recipe — see [install-next-app-router.md § 2](./install-next-app-router.md#2-install-dependencies). Replace `next-themes`'s `attribute="class"` setup with the same on Pages Router (it works identically).
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
### 2a. Optional peer dependencies (install only when importing the matching subpath)
|
|
20
|
+
|
|
21
|
+
Some components depend on third-party libraries that ship as optional peers. **Install BEFORE first import** of the matching component, or `next build` will exit with `Module not found`. Skip entirely if you only use core components (`Button`, `Text`, `Stack`, `Dialog`, `Toast`, `Form*`, `Input`, `Card`, etc.).
|
|
22
|
+
|
|
23
|
+
| When you import… | Install |
|
|
24
|
+
|---|---|
|
|
25
|
+
| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
|
|
26
|
+
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
27
|
+
| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
|
|
28
|
+
| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
|
|
29
|
+
| `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
|
|
30
|
+
| `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
|
|
31
|
+
| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
|
|
32
|
+
| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
|
|
33
|
+
| `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
|
|
34
|
+
| `@devalok/shilp-sutra/ui/data-table-toolbar` | `pnpm add @tanstack/react-table` |
|
|
35
|
+
| `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
|
|
36
|
+
| `@devalok/shilp-sutra/ui/toast` | `pnpm add sonner` |
|
|
37
|
+
| `@devalok/shilp-sutra/ui/toaster` | `pnpm add sonner` |
|
|
38
|
+
| Any `Icon` / `IconButton` with Tabler icons (near-universal — most components use icons internally, so it is a base-install peer) | `pnpm add @tabler/icons-react` |
|
|
39
|
+
|
|
40
|
+
> These aren't in core deps so consumers who never render a chart, OTP input, or rich-text editor don't pay the install / bundle cost. One-time decision at install.
|
|
20
41
|
|
|
21
42
|
## 3. PostCSS
|
|
22
43
|
|
|
@@ -32,10 +32,10 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
|
|
|
32
32
|
| When you import… | Install |
|
|
33
33
|
|---|---|
|
|
34
34
|
| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
|
|
35
|
+
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
35
36
|
| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
|
|
36
37
|
| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
|
|
37
38
|
| `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
|
|
38
|
-
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
39
39
|
| `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
|
|
40
40
|
| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
|
|
41
41
|
| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
|
|
@@ -41,10 +41,10 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
|
|
|
41
41
|
| When you import… | Install |
|
|
42
42
|
|---|---|
|
|
43
43
|
| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
|
|
44
|
+
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
44
45
|
| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
|
|
45
46
|
| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
|
|
46
47
|
| `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
|
|
47
|
-
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
48
48
|
| `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
|
|
49
49
|
| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
|
|
50
50
|
| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
|
|
@@ -47,10 +47,10 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
|
|
|
47
47
|
| When you import… | Install |
|
|
48
48
|
|---|---|
|
|
49
49
|
| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
|
|
50
|
+
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
50
51
|
| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
|
|
51
52
|
| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
|
|
52
53
|
| `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
|
|
53
|
-
| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
|
|
54
54
|
| `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
|
|
55
55
|
| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
|
|
56
56
|
| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
|
|
@@ -137,6 +137,7 @@ export function ThemeToggle() {
|
|
|
137
137
|
|
|
138
138
|
If you installed `sonner`, mount the Toaster once near the app root:
|
|
139
139
|
|
|
140
|
+
<!-- typecheck-skip: imports the reader's own App entry -->
|
|
140
141
|
```tsx
|
|
141
142
|
// src/main.tsx
|
|
142
143
|
import { StrictMode } from "react";
|
|
@@ -78,7 +78,7 @@ export function MyButton() {
|
|
|
78
78
|
|---|---|
|
|
79
79
|
| `ContentCard` | All other composed components become client islands when rendered |
|
|
80
80
|
| `PageHeader` | |
|
|
81
|
-
| `
|
|
81
|
+
| `CardSkeleton` / `TableSkeleton` / `BoardSkeleton` / `ListSkeleton` | |
|
|
82
82
|
| `PageSkeletons` | |
|
|
83
83
|
|
|
84
84
|
### `@devalok/shilp-sutra/shell`
|
|
@@ -127,20 +127,23 @@ All shilp-sutra components SSR cleanly. They have no client-only side effects at
|
|
|
127
127
|
|
|
128
128
|
Use `<Suspense>` boundaries normally:
|
|
129
129
|
|
|
130
|
+
<!-- typecheck-skip: ClientHeavyComponent is the reader's own component -->
|
|
130
131
|
```tsx
|
|
131
132
|
import { Suspense } from "react";
|
|
132
|
-
import {
|
|
133
|
+
import { CardSkeleton } from "@devalok/shilp-sutra/composed/loading-skeleton";
|
|
133
134
|
|
|
134
135
|
export default function Page() {
|
|
135
136
|
return (
|
|
136
|
-
<Suspense fallback={<
|
|
137
|
+
<Suspense fallback={<CardSkeleton />}>
|
|
137
138
|
<ClientHeavyComponent />
|
|
138
139
|
</Suspense>
|
|
139
140
|
);
|
|
140
141
|
}
|
|
141
142
|
```
|
|
142
143
|
|
|
143
|
-
Both `<Suspense>` and
|
|
144
|
+
Both `<Suspense>` and the skeletons are server-safe. The module exports
|
|
145
|
+
`CardSkeleton`, `TableSkeleton`, `BoardSkeleton` and `ListSkeleton` — pick the
|
|
146
|
+
one whose shape matches what is loading.
|
|
144
147
|
|
|
145
148
|
## Common RSC mistakes
|
|
146
149
|
|
package/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @devalok/shilp-sutra
|
|
2
2
|
|
|
3
|
-
> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.
|
|
3
|
+
> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.60.0.
|
|
4
4
|
> Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
|
|
5
5
|
> 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).
|
|
6
6
|
|
|
@@ -120,7 +120,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
|
|
|
120
120
|
### composed
|
|
121
121
|
- [activity-feed](docs/components/composed/activity-feed.md)
|
|
122
122
|
- [avatar-group](docs/components/composed/avatar-group.md)
|
|
123
|
-
- [bulk-action-bar](docs/components/composed/bulk-action-bar.md)
|
|
123
|
+
- [bulk-action-bar](docs/components/composed/bulk-action-bar.md): Floating selection toolbar for bulk actions — re-exported from `ui/bulk-action-bar`
|
|
124
124
|
- [command-palette](docs/components/composed/command-palette.md)
|
|
125
125
|
- [confirm-dialog](docs/components/composed/confirm-dialog.md)
|
|
126
126
|
- [content-card](docs/components/composed/content-card.md): **DEPRECATED (v0.44.0)** — will be removed in the next major
|
|
@@ -31,7 +31,7 @@ Border?
|
|
|
31
31
|
→ standard hairline → border-surface-border
|
|
32
32
|
→ emphasized → border-surface-border-strong
|
|
33
33
|
→ subtle divider → border-surface-border-subtle
|
|
34
|
-
→ state (form invalid) → border-error-
|
|
34
|
+
→ state (form invalid) → border-error-8 (or use Input state="error" instead)
|
|
35
35
|
|
|
36
36
|
Status?
|
|
37
37
|
→ error → bg-error-3 / text-error-11 / border-error-7
|
|
@@ -57,6 +57,8 @@ Brand emphasis?
|
|
|
57
57
|
| `surface-overlay` | Floating layers — dialogs, popovers, dropdowns, inputs, toasts. |
|
|
58
58
|
| `surface-inverted` | Tooltips, inverted badges. Pair with `surface-inverted-fg`. |
|
|
59
59
|
| `surface-disabled` | Disabled controls. Pair with `surface-fg-disabled`. |
|
|
60
|
+
| `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. |
|
|
61
|
+
| `field-hover` | Hover state on a form control. |
|
|
60
62
|
|
|
61
63
|
Available as: `bg-surface-*`, `text-surface-*`, `border-surface-*`.
|
|
62
64
|
|
package/mcp-manifest.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$schema": "./mcp-manifest.schema.json",
|
|
3
3
|
"manifestVersion": "1.2.0",
|
|
4
4
|
"package": "@devalok/shilp-sutra",
|
|
5
|
-
"packageVersion": "0.
|
|
5
|
+
"packageVersion": "0.60.0",
|
|
6
6
|
"components": {
|
|
7
7
|
"accordion": {
|
|
8
8
|
"displayName": "Accordion",
|
|
@@ -1221,6 +1221,161 @@
|
|
|
1221
1221
|
}
|
|
1222
1222
|
]
|
|
1223
1223
|
},
|
|
1224
|
+
"bulk-action-bar": {
|
|
1225
|
+
"displayName": "BulkActionBar",
|
|
1226
|
+
"tier": "composed",
|
|
1227
|
+
"import": "@devalok/shilp-sutra/composed/bulk-action-bar",
|
|
1228
|
+
"serverSafe": false,
|
|
1229
|
+
"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.",
|
|
1230
|
+
"props": {
|
|
1231
|
+
"show": {
|
|
1232
|
+
"type": {
|
|
1233
|
+
"name": "boolean"
|
|
1234
|
+
},
|
|
1235
|
+
"required": false,
|
|
1236
|
+
"description": "controls visibility"
|
|
1237
|
+
},
|
|
1238
|
+
"count": {
|
|
1239
|
+
"type": {
|
|
1240
|
+
"name": "number"
|
|
1241
|
+
},
|
|
1242
|
+
"required": false,
|
|
1243
|
+
"description": "number of selected items — displayed in badge"
|
|
1244
|
+
},
|
|
1245
|
+
"onClearSelection": {
|
|
1246
|
+
"type": {
|
|
1247
|
+
"name": "function",
|
|
1248
|
+
"raw": "() => void"
|
|
1249
|
+
},
|
|
1250
|
+
"required": false
|
|
1251
|
+
},
|
|
1252
|
+
"actions": {
|
|
1253
|
+
"type": {
|
|
1254
|
+
"name": "object",
|
|
1255
|
+
"raw": "BulkActionBarAction[]"
|
|
1256
|
+
},
|
|
1257
|
+
"required": false
|
|
1258
|
+
},
|
|
1259
|
+
"totalCount": {
|
|
1260
|
+
"type": {
|
|
1261
|
+
"name": "number"
|
|
1262
|
+
},
|
|
1263
|
+
"required": false,
|
|
1264
|
+
"description": "optional — total selectable items; enables \"Select all\""
|
|
1265
|
+
},
|
|
1266
|
+
"onSelectAll": {
|
|
1267
|
+
"type": {
|
|
1268
|
+
"name": "function",
|
|
1269
|
+
"raw": "() => void (optional — called by the \"Select all\" control)"
|
|
1270
|
+
},
|
|
1271
|
+
"required": false
|
|
1272
|
+
},
|
|
1273
|
+
"placement": {
|
|
1274
|
+
"type": {
|
|
1275
|
+
"name": "enum",
|
|
1276
|
+
"value": [
|
|
1277
|
+
"bottom",
|
|
1278
|
+
"top",
|
|
1279
|
+
"inline"
|
|
1280
|
+
]
|
|
1281
|
+
},
|
|
1282
|
+
"required": false,
|
|
1283
|
+
"defaultValue": "bottom"
|
|
1284
|
+
},
|
|
1285
|
+
"className": {
|
|
1286
|
+
"type": {
|
|
1287
|
+
"name": "string"
|
|
1288
|
+
},
|
|
1289
|
+
"required": false
|
|
1290
|
+
}
|
|
1291
|
+
},
|
|
1292
|
+
"composition": {
|
|
1293
|
+
"notes": [
|
|
1294
|
+
"**Standalone floating toolbar** — use with DataTable, TreeView, or any selection-capable UI.",
|
|
1295
|
+
"**DataTable auto-integration:** DataTable's `bulkActions` prop renders this internally; `bulkActionsPosition` maps to `placement`.",
|
|
1296
|
+
"**Placement decides portalling** — `bottom` / `top` portal to the body, `inline` renders in flow."
|
|
1297
|
+
]
|
|
1298
|
+
},
|
|
1299
|
+
"docPath": "docs/components/composed/bulk-action-bar.md",
|
|
1300
|
+
"subComponents": {
|
|
1301
|
+
"BulkActionBarAction": {
|
|
1302
|
+
"props": {
|
|
1303
|
+
"label": {
|
|
1304
|
+
"type": {
|
|
1305
|
+
"name": "string"
|
|
1306
|
+
},
|
|
1307
|
+
"required": false
|
|
1308
|
+
},
|
|
1309
|
+
"icon": {
|
|
1310
|
+
"type": {
|
|
1311
|
+
"name": "object",
|
|
1312
|
+
"raw": "IconInput"
|
|
1313
|
+
},
|
|
1314
|
+
"required": false,
|
|
1315
|
+
"description": "optional — any icon component or element"
|
|
1316
|
+
},
|
|
1317
|
+
"onClick": {
|
|
1318
|
+
"type": {
|
|
1319
|
+
"name": "function",
|
|
1320
|
+
"raw": "() => void"
|
|
1321
|
+
},
|
|
1322
|
+
"required": false
|
|
1323
|
+
},
|
|
1324
|
+
"color": {
|
|
1325
|
+
"type": {
|
|
1326
|
+
"name": "enum",
|
|
1327
|
+
"value": [
|
|
1328
|
+
"accent",
|
|
1329
|
+
"error",
|
|
1330
|
+
"success",
|
|
1331
|
+
"warning",
|
|
1332
|
+
"info",
|
|
1333
|
+
"neutral"
|
|
1334
|
+
]
|
|
1335
|
+
},
|
|
1336
|
+
"required": false,
|
|
1337
|
+
"defaultValue": "accent"
|
|
1338
|
+
},
|
|
1339
|
+
"disabled": {
|
|
1340
|
+
"type": {
|
|
1341
|
+
"name": "boolean"
|
|
1342
|
+
},
|
|
1343
|
+
"required": false,
|
|
1344
|
+
"description": "optional"
|
|
1345
|
+
},
|
|
1346
|
+
"loading": {
|
|
1347
|
+
"type": {
|
|
1348
|
+
"name": "boolean"
|
|
1349
|
+
},
|
|
1350
|
+
"required": false,
|
|
1351
|
+
"description": "optional — pending spinner on the action"
|
|
1352
|
+
},
|
|
1353
|
+
"requiresConfirmation": {
|
|
1354
|
+
"type": {
|
|
1355
|
+
"name": "boolean"
|
|
1356
|
+
},
|
|
1357
|
+
"required": false,
|
|
1358
|
+
"description": "optional — inline confirm before executing"
|
|
1359
|
+
},
|
|
1360
|
+
"confirmMessage": {
|
|
1361
|
+
"type": {
|
|
1362
|
+
"name": "string"
|
|
1363
|
+
},
|
|
1364
|
+
"required": false,
|
|
1365
|
+
"description": "optional — default \"Are you sure?\""
|
|
1366
|
+
}
|
|
1367
|
+
}
|
|
1368
|
+
}
|
|
1369
|
+
},
|
|
1370
|
+
"examples": [
|
|
1371
|
+
"<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/>"
|
|
1372
|
+
],
|
|
1373
|
+
"gotchas": [
|
|
1374
|
+
"Prefer importing from `@devalok/shilp-sutra/ui/bulk-action-bar`. This path is kept so existing imports do not break.",
|
|
1375
|
+
"Portalled placements do not render during SSR; `inline` does.",
|
|
1376
|
+
"Inside a Dialog or Sheet use `placement=\"inline\"`, or the portal escapes the overlay's stacking context."
|
|
1377
|
+
]
|
|
1378
|
+
},
|
|
1224
1379
|
"button": {
|
|
1225
1380
|
"displayName": "Button",
|
|
1226
1381
|
"tier": "ui",
|
|
@@ -8659,150 +8814,6 @@
|
|
|
8659
8814
|
}
|
|
8660
8815
|
]
|
|
8661
8816
|
},
|
|
8662
|
-
"bulk-action-bar": {
|
|
8663
|
-
"displayName": "BulkActionBar",
|
|
8664
|
-
"tier": "composed",
|
|
8665
|
-
"import": "@devalok/shilp-sutra/composed/bulk-action-bar",
|
|
8666
|
-
"serverSafe": false,
|
|
8667
|
-
"description": "",
|
|
8668
|
-
"props": {
|
|
8669
|
-
"show": {
|
|
8670
|
-
"type": {
|
|
8671
|
-
"name": "boolean"
|
|
8672
|
-
},
|
|
8673
|
-
"required": false,
|
|
8674
|
-
"description": "controls visibility"
|
|
8675
|
-
},
|
|
8676
|
-
"count": {
|
|
8677
|
-
"type": {
|
|
8678
|
-
"name": "number"
|
|
8679
|
-
},
|
|
8680
|
-
"required": false,
|
|
8681
|
-
"description": "number of selected items — displayed in badge"
|
|
8682
|
-
},
|
|
8683
|
-
"onClearSelection": {
|
|
8684
|
-
"type": {
|
|
8685
|
-
"name": "function",
|
|
8686
|
-
"raw": "() => void"
|
|
8687
|
-
},
|
|
8688
|
-
"required": false
|
|
8689
|
-
},
|
|
8690
|
-
"actions": {
|
|
8691
|
-
"type": {
|
|
8692
|
-
"name": "object",
|
|
8693
|
-
"raw": "BulkActionBarAction[]"
|
|
8694
|
-
},
|
|
8695
|
-
"required": false
|
|
8696
|
-
},
|
|
8697
|
-
"totalCount": {
|
|
8698
|
-
"type": {
|
|
8699
|
-
"name": "number"
|
|
8700
|
-
},
|
|
8701
|
-
"required": false,
|
|
8702
|
-
"description": "optional — total selectable items; enables \"Select all\""
|
|
8703
|
-
},
|
|
8704
|
-
"onSelectAll": {
|
|
8705
|
-
"type": {
|
|
8706
|
-
"name": "function",
|
|
8707
|
-
"raw": "() => void (optional — called by the \"Select all\" control)"
|
|
8708
|
-
},
|
|
8709
|
-
"required": false
|
|
8710
|
-
},
|
|
8711
|
-
"className": {
|
|
8712
|
-
"type": {
|
|
8713
|
-
"name": "string"
|
|
8714
|
-
},
|
|
8715
|
-
"required": false
|
|
8716
|
-
}
|
|
8717
|
-
},
|
|
8718
|
-
"composition": {
|
|
8719
|
-
"notes": [
|
|
8720
|
-
"**Standalone floating toolbar** — use with DataTable, TreeView, or any selection-capable UI.",
|
|
8721
|
-
"**DataTable auto-integration:** DataTable's `bulkActions` prop renders this internally — typically you don't render BulkActionBar directly when using DataTable.",
|
|
8722
|
-
"**Data-driven actions:** `{ label, icon, onClick, color, disabled }[]`. For destructive confirmation, call ConfirmDialog from the onClick handler.",
|
|
8723
|
-
"**Portal to body + fixed bottom-center z-50** — independent of parent layout. Check for other fixed elements that might overlap."
|
|
8724
|
-
]
|
|
8725
|
-
},
|
|
8726
|
-
"docPath": "docs/components/composed/bulk-action-bar.md",
|
|
8727
|
-
"subComponents": {
|
|
8728
|
-
"BulkActionBarAction": {
|
|
8729
|
-
"props": {
|
|
8730
|
-
"label": {
|
|
8731
|
-
"type": {
|
|
8732
|
-
"name": "string"
|
|
8733
|
-
},
|
|
8734
|
-
"required": false
|
|
8735
|
-
},
|
|
8736
|
-
"icon": {
|
|
8737
|
-
"type": {
|
|
8738
|
-
"name": "object",
|
|
8739
|
-
"raw": "IconInput"
|
|
8740
|
-
},
|
|
8741
|
-
"required": false,
|
|
8742
|
-
"description": "optional — any icon component or element"
|
|
8743
|
-
},
|
|
8744
|
-
"onClick": {
|
|
8745
|
-
"type": {
|
|
8746
|
-
"name": "function",
|
|
8747
|
-
"raw": "() => void"
|
|
8748
|
-
},
|
|
8749
|
-
"required": false
|
|
8750
|
-
},
|
|
8751
|
-
"color": {
|
|
8752
|
-
"type": {
|
|
8753
|
-
"name": "enum",
|
|
8754
|
-
"value": [
|
|
8755
|
-
"accent",
|
|
8756
|
-
"error",
|
|
8757
|
-
"success",
|
|
8758
|
-
"warning",
|
|
8759
|
-
"info",
|
|
8760
|
-
"neutral"
|
|
8761
|
-
]
|
|
8762
|
-
},
|
|
8763
|
-
"required": false,
|
|
8764
|
-
"defaultValue": "accent"
|
|
8765
|
-
},
|
|
8766
|
-
"disabled": {
|
|
8767
|
-
"type": {
|
|
8768
|
-
"name": "boolean"
|
|
8769
|
-
},
|
|
8770
|
-
"required": false,
|
|
8771
|
-
"description": "optional"
|
|
8772
|
-
},
|
|
8773
|
-
"loading": {
|
|
8774
|
-
"type": {
|
|
8775
|
-
"name": "boolean"
|
|
8776
|
-
},
|
|
8777
|
-
"required": false,
|
|
8778
|
-
"description": "optional — pending spinner on the action"
|
|
8779
|
-
},
|
|
8780
|
-
"requiresConfirmation": {
|
|
8781
|
-
"type": {
|
|
8782
|
-
"name": "boolean"
|
|
8783
|
-
},
|
|
8784
|
-
"required": false,
|
|
8785
|
-
"description": "optional — inline confirm before executing"
|
|
8786
|
-
},
|
|
8787
|
-
"confirmMessage": {
|
|
8788
|
-
"type": {
|
|
8789
|
-
"name": "string"
|
|
8790
|
-
},
|
|
8791
|
-
"required": false,
|
|
8792
|
-
"description": "optional — default \"Are you sure?\""
|
|
8793
|
-
}
|
|
8794
|
-
}
|
|
8795
|
-
}
|
|
8796
|
-
},
|
|
8797
|
-
"examples": [
|
|
8798
|
-
"<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/>"
|
|
8799
|
-
],
|
|
8800
|
-
"gotchas": [
|
|
8801
|
-
"Renders via `createPortal` into `document.body` — will not appear during SSR (mounts only client-side)",
|
|
8802
|
-
"Positioned fixed at bottom-center with `z-50`; ensure no other fixed elements conflict",
|
|
8803
|
-
"Uses Framer Motion AnimatePresence for slide-in/out animation"
|
|
8804
|
-
]
|
|
8805
|
-
},
|
|
8806
8817
|
"command-palette": {
|
|
8807
8818
|
"displayName": "CommandPalette",
|
|
8808
8819
|
"tier": "composed",
|
|
@@ -14020,7 +14031,15 @@
|
|
|
14020
14031
|
},
|
|
14021
14032
|
{
|
|
14022
14033
|
"name": "--color-segment-thumb",
|
|
14023
|
-
"value": "var(--neutral-
|
|
14034
|
+
"value": "var(--neutral-5)"
|
|
14035
|
+
},
|
|
14036
|
+
{
|
|
14037
|
+
"name": "--color-field",
|
|
14038
|
+
"value": "Canvas"
|
|
14039
|
+
},
|
|
14040
|
+
{
|
|
14041
|
+
"name": "--color-field-hover",
|
|
14042
|
+
"value": "Canvas"
|
|
14024
14043
|
},
|
|
14025
14044
|
{
|
|
14026
14045
|
"name": "--color-overlay",
|
|
@@ -14054,6 +14073,10 @@
|
|
|
14054
14073
|
"name": "--color-error-7",
|
|
14055
14074
|
"value": "CanvasText"
|
|
14056
14075
|
},
|
|
14076
|
+
{
|
|
14077
|
+
"name": "--color-error-8",
|
|
14078
|
+
"value": "CanvasText"
|
|
14079
|
+
},
|
|
14057
14080
|
{
|
|
14058
14081
|
"name": "--color-error-9",
|
|
14059
14082
|
"value": "Mark"
|
|
@@ -14094,6 +14117,10 @@
|
|
|
14094
14117
|
"name": "--color-success-7",
|
|
14095
14118
|
"value": "CanvasText"
|
|
14096
14119
|
},
|
|
14120
|
+
{
|
|
14121
|
+
"name": "--color-success-8",
|
|
14122
|
+
"value": "CanvasText"
|
|
14123
|
+
},
|
|
14097
14124
|
{
|
|
14098
14125
|
"name": "--color-success-9",
|
|
14099
14126
|
"value": "Highlight"
|
|
@@ -14738,7 +14765,7 @@
|
|
|
14738
14765
|
},
|
|
14739
14766
|
{
|
|
14740
14767
|
"name": "--shadow-segment",
|
|
14741
|
-
"value": "0 1px 2px -0.5px oklch(
|
|
14768
|
+
"value": "0 0 0 1px oklch(1 0 0 / 0.07), 0 1px 2px -0.5px oklch(0 0 0 / 0.40), 0 3px 8px -2px oklch(0 0 0 / 0.30)"
|
|
14742
14769
|
},
|
|
14743
14770
|
{
|
|
14744
14771
|
"name": "--shadow-floating",
|
|
@@ -14774,7 +14801,7 @@
|
|
|
14774
14801
|
},
|
|
14775
14802
|
{
|
|
14776
14803
|
"name": "--shadow-pressed",
|
|
14777
|
-
"value": "0 0 0 1px oklch(
|
|
14804
|
+
"value": "0 0 0 1px oklch(1 0 0 / 0.10)"
|
|
14778
14805
|
},
|
|
14779
14806
|
{
|
|
14780
14807
|
"name": "--shadow-success",
|
|
@@ -14790,21 +14817,27 @@
|
|
|
14790
14817
|
},
|
|
14791
14818
|
{
|
|
14792
14819
|
"name": "--shadow-kbd",
|
|
14793
|
-
"value": "inset 0
|
|
14820
|
+
"value": "inset 0 1px 0 oklch(1 0 0 / 0.10)"
|
|
14794
14821
|
},
|
|
14795
14822
|
{
|
|
14796
14823
|
"name": "--shadow-strength",
|
|
14797
14824
|
"value": "1",
|
|
14798
14825
|
"darkValue": "2.5"
|
|
14799
14826
|
},
|
|
14827
|
+
{
|
|
14828
|
+
"name": "--shadow-color",
|
|
14829
|
+
"value": "0.263 0.029 259",
|
|
14830
|
+
"darkValue": "0.05 0.012 260"
|
|
14831
|
+
},
|
|
14800
14832
|
{
|
|
14801
14833
|
"name": "--shadow-edge-ring",
|
|
14802
14834
|
"value": "0 0 0 1px oklch(var(--shadow-color) / calc(0.09 * var(--shadow-strength)))",
|
|
14803
14835
|
"darkValue": "0 0 0 1px oklch(1 0 0 / 0.12)"
|
|
14804
14836
|
},
|
|
14805
14837
|
{
|
|
14806
|
-
"name": "--shadow-
|
|
14807
|
-
"value": "0
|
|
14838
|
+
"name": "--shadow-edge-ring-subtle",
|
|
14839
|
+
"value": "0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength)))",
|
|
14840
|
+
"darkValue": "0 0 0 1px oklch(1 0 0 / 0.07)"
|
|
14808
14841
|
},
|
|
14809
14842
|
{
|
|
14810
14843
|
"name": "--shadow-transition",
|