@devalok/shilp-sutra 0.44.1 → 0.45.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/AGENTS.md +13 -11
- package/BREAKING.json +209 -27
- package/MIGRATION.md +34 -0
- package/README.md +12 -0
- package/dist/_chunks/badge-group.js +1 -0
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/block-shell.js +25 -0
- package/dist/_chunks/block-shell.js.map +1 -0
- package/dist/_chunks/chat.js +4 -2
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/document-preview.js +1 -1
- package/dist/_chunks/image-preview.js +4 -4
- package/dist/_chunks/shared.js +65 -78
- package/dist/_chunks/shared.js.map +1 -1
- package/dist/_chunks/success.js +108 -106
- package/dist/_chunks/success.js.map +1 -1
- package/dist/ai/blocks/block-shell.d.ts +19 -0
- package/dist/ai/blocks/block-shell.d.ts.map +1 -0
- package/dist/ai/blocks/block-table.d.ts.map +1 -1
- package/dist/ai/blocks/confirm.d.ts.map +1 -1
- package/dist/ai/blocks/error.d.ts.map +1 -1
- package/dist/ai/blocks/error.js +5 -5
- package/dist/ai/blocks/error.js.map +1 -1
- package/dist/ai/blocks/success.d.ts.map +1 -1
- package/dist/ai/blocks/text.d.ts.map +1 -1
- package/dist/ai/blocks/text.js +4 -3
- package/dist/ai/blocks/text.js.map +1 -1
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js +14 -12
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/file-preview/audio-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/shared.d.ts +10 -0
- 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 +149 -188
- package/dist/composed/file-preview.js.map +1 -1
- package/dist/composed/master-detail.d.ts.map +1 -1
- package/dist/composed/master-detail.js +13 -4
- package/dist/composed/master-detail.js.map +1 -1
- package/dist/composed/schedule-view.d.ts.map +1 -1
- package/dist/composed/schedule-view.js +52 -39
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/shell/notification-preferences.d.ts.map +1 -1
- package/dist/shell/notification-preferences.js +115 -114
- package/dist/shell/notification-preferences.js.map +1 -1
- package/dist/ui/badge-group.d.ts.map +1 -1
- package/dist/ui/card.d.ts +66 -16
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +85 -60
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/color-input.d.ts.map +1 -1
- package/dist/ui/color-input.js +18 -18
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/data-table-body.d.ts.map +1 -1
- package/dist/ui/data-table-body.js +94 -64
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-card.d.ts.map +1 -1
- package/dist/ui/data-table-card.js +50 -43
- package/dist/ui/data-table-card.js.map +1 -1
- package/dist/ui/data-table-context.d.ts +0 -4
- package/dist/ui/data-table-context.d.ts.map +1 -1
- package/dist/ui/data-table-context.js +8 -12
- 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 +2 -2
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table.d.ts.map +1 -1
- package/dist/ui/data-table.js +185 -182
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/index.d.ts +3 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +59 -58
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/segmented-control.js +4 -4
- package/dist/ui/segmented-control.js.map +1 -1
- package/dist/ui/separator.d.ts +6 -5
- package/dist/ui/separator.d.ts.map +1 -1
- package/dist/ui/separator.js +7 -10
- package/dist/ui/separator.js.map +1 -1
- package/dist/ui/split-button.d.ts.map +1 -1
- package/dist/ui/split-button.js +62 -129
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stat-card.d.ts +7 -0
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +144 -126
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/table-row-link.d.ts +45 -0
- package/dist/ui/table-row-link.d.ts.map +1 -0
- package/dist/ui/table-row-link.js +16 -0
- package/dist/ui/table-row-link.js.map +1 -0
- package/dist/ui/table.d.ts +49 -5
- package/dist/ui/table.d.ts.map +1 -1
- package/dist/ui/table.js +39 -29
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/toast-types.d.ts +10 -0
- package/dist/ui/toast-types.d.ts.map +1 -1
- package/dist/ui/toast.d.ts +6 -2
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +56 -54
- package/dist/ui/toast.js.map +1 -1
- package/docs/components/composed/content-card.md +2 -0
- package/docs/components/ui/button.md +3 -3
- package/docs/components/ui/card.md +27 -10
- package/docs/components/ui/color-input.md +2 -2
- package/docs/components/ui/data-table.md +8 -1
- package/docs/components/ui/segmented-control.md +2 -2
- package/docs/components/ui/separator.md +3 -1
- package/docs/components/ui/split-button.md +3 -0
- package/docs/components/ui/stat-card.md +10 -2
- package/docs/components/ui/table-row-link.md +41 -0
- package/docs/components/ui/table.md +69 -0
- package/docs/components/ui/toast.md +10 -6
- package/docs/recipes/install-next-app-router.md +1 -1
- package/docs/recipes/troubleshoot.md +1 -1
- package/llms.txt +159 -781
- package/make-kit/components/card.md +54 -16
- package/make-kit/components/table.md +45 -7
- package/make-kit/foundations/spacing.md +3 -1
- package/make-kit/foundations/surfaces.md +1 -1
- package/mcp-manifest.json +12349 -0
- package/mcp-manifest.schema.json +232 -0
- package/package.json +3 -3
- package/skill/README.md +0 -1
- package/skill/SKILL.md +9 -8
- package/skill/references/components.md +159 -781
- package/skill/references/setup-next-app-router.md +1 -1
- package/skill/references/troubleshoot.md +1 -1
- package/llms-full.txt +0 -7198
- package/llms-quick.txt +0 -251
- package/skill/references/components-full.md +0 -7200
package/llms-quick.txt
DELETED
|
@@ -1,251 +0,0 @@
|
|
|
1
|
-
# @devalok/shilp-sutra — quick reference for AI agents
|
|
2
|
-
|
|
3
|
-
> Tailwind 4 + React 19 + CVA design system. 110+ components, OKLCH tokens, framer-motion. **Not shadcn/ui** — APIs diverge in ways noted below.
|
|
4
|
-
>
|
|
5
|
-
> This file is the ≤15K-token fast-path summary. Reach for `llms.txt` (~27K tokens) or `llms-full.txt` (~140K tokens) only when this isn't enough.
|
|
6
|
-
|
|
7
|
-
## SETUP (consumer install, ~5 min)
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
pnpm add @devalok/shilp-sutra framer-motion next-themes
|
|
11
|
-
pnpm add -D tailwindcss@^4 @tailwindcss/postcss # or @tailwindcss/vite
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
Then 4 files:
|
|
15
|
-
|
|
16
|
-
```css
|
|
17
|
-
/* globals.css — order matters */
|
|
18
|
-
@import "tailwindcss";
|
|
19
|
-
@import "@devalok/shilp-sutra/css";
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
```ts
|
|
23
|
-
// next.config.ts — only if Next.js
|
|
24
|
-
transpilePackages: ["@devalok/shilp-sutra"]
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
```tsx
|
|
28
|
-
// app/layout.tsx — Next App Router
|
|
29
|
-
<html lang="en" suppressHydrationWarning> {/* required for next-themes */}
|
|
30
|
-
<body><Providers>{children}</Providers></body>
|
|
31
|
-
</html>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
```tsx
|
|
35
|
-
// app/providers.tsx
|
|
36
|
-
'use client'
|
|
37
|
-
import { ThemeProvider } from 'next-themes'
|
|
38
|
-
import { Toaster } from '@devalok/shilp-sutra/ui/toaster'
|
|
39
|
-
export function Providers({ children }) {
|
|
40
|
-
return <ThemeProvider attribute="class" defaultTheme="system" enableSystem>{children}<Toaster /></ThemeProvider>
|
|
41
|
-
}
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
Per-framework recipes: `node_modules/@devalok/shilp-sutra/docs/recipes/install-<framework>.md` (six recipes — Next App Router, Next Pages, Vite, Astro, Remix, TanStack Start).
|
|
45
|
-
|
|
46
|
-
**Theme it in 30 seconds:** https://shilp-sutra.devalok.in/themer — outputs a copy-pasteable CSS block (12-step OKLCH ramp + role tokens). Paste *after* the `@devalok/shilp-sutra/css` import.
|
|
47
|
-
|
|
48
|
-
**Lint + migrate:** `pnpm add -D @devalok/eslint-plugin-shilp-sutra`, then `shilpSutra.configs['flat/recommended']`. Catches deprecated APIs, peer-cliff barrel imports, TW3 classes — most autofixable. Use the `migration` preset (`pnpm eslint --fix`) when upgrading across breaking versions.
|
|
49
|
-
|
|
50
|
-
**Machine-readable breaks:** `node_modules/@devalok/shilp-sutra/BREAKING.json` lists every breaking change per version as structured data (moves, narrowings, removals). Read this for programmatic upgrade planning instead of parsing CHANGELOG prose. Schema: `BREAKING.schema.json`.
|
|
51
|
-
|
|
52
|
-
## OPTIONAL PEER DEPENDENCIES (install BEFORE first import)
|
|
53
|
-
|
|
54
|
-
| When you import… | Install |
|
|
55
|
-
|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
|
|
56
|
-
| `@devalok/shilp-sutra/ui/charts/*` | `pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition` |
|
|
57
|
-
| `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
|
|
58
|
-
| `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns` |
|
|
59
|
-
| `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder` |
|
|
60
|
-
| `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
|
|
61
|
-
| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
|
|
62
|
-
| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
|
|
63
|
-
| `@devalok/shilp-sutra/ui/toaster` or `…/ui/toast` | `pnpm add sonner` |
|
|
64
|
-
| Tabler icons in `<Icon>`, `<Button startIcon>`, etc. | `pnpm add @tabler/icons-react` |
|
|
65
|
-
|
|
66
|
-
## HARD CONSTRAINTS
|
|
67
|
-
|
|
68
|
-
1. **Tailwind 4 only.** No `tailwind.config.ts presets: [shilpSutra]` — that was removed in 0.38. CSS-only setup as above.
|
|
69
|
-
2. **`framer-motion@^12` required peer.** Single copy — configure pnpm/yarn overrides if you see duplicates.
|
|
70
|
-
3. **`sonner@^2`** required only when you render `<Toaster />` or call `toast.*`. Optional otherwise.
|
|
71
|
-
4. **Per-component imports keep RSC fast AND avoid peer-dep cliffs.** Barrel `@devalok/shilp-sutra/ui` works in client contexts but inflates client bundle and forces optional peers to be installed. Prefer `…/ui/text`, `…/ui/dialog`, etc. The barrel **no longer** re-exports peer-cliff symbols (`Toaster`, `toast`, `InputOTP`, `DatePicker`, `RichTextEditor`, `EmojiPicker`, `FilePreview`, `MarkdownViewer`, `BlockRenderer`, `ErrorBlock`, `TextBlock`) as of 0.40.0 — import per-component.
|
|
72
|
-
5. **Spacing namespace is `--spacing-ds-*`.** `p-ds-04`, `gap-ds-03` — these DO NOT replace TW4 default `p-4`, `gap-2`. Both coexist by design. Pick `p-ds-*` for values that should track DS theme changes, `p-N` for one-off layout values. **Cadence when building layouts:** pick a 3-tier scale, not every adjacent token — `ds-03` (related: label↔field), `ds-05` (grouped: between field-groups), `ds-07` (section: between blocks), optional `ds-08`+ (hero). 3-4 distinct gaps per surface max; 5+ = muddy rhythm. Anti-pattern: `ds-02` + `ds-04` as different signals on one surface (they collapse). Squint test must still show grouping.
|
|
73
|
-
6. **Bare `shadow` class renders no shadow in TW4.** Use `shadow-raised` (cards), `shadow-floating` (dropdowns), `shadow-overlay` (dialogs), `shadow-ring` (focus).
|
|
74
|
-
7. **Variant names must match CVA source exactly** — invented variant names silently no-op (CVA falls back to defaults). Grep `packages/core/src/ui/<component>.tsx` if in doubt.
|
|
75
|
-
8. **Default to `variant="soft"`** over `variant="outline"` for non-primary Button actions. Outline only on colored backgrounds or where primary/secondary hierarchy needs a hard border.
|
|
76
|
-
|
|
77
|
-
## ICON API (one shape across every component, v0.40.0+)
|
|
78
|
-
|
|
79
|
-
Every icon-accepting prop (`startIcon`, `endIcon`, `icon`, …) takes `IconInput`:
|
|
80
|
-
|
|
81
|
-
```tsx
|
|
82
|
-
import { IconPlus } from '@tabler/icons-react'
|
|
83
|
-
import { Icon } from '@devalok/shilp-sutra/ui/icon'
|
|
84
|
-
|
|
85
|
-
<Button startIcon={<Icon icon={IconPlus} />}>Add</Button> // canonical
|
|
86
|
-
<Button startIcon={<IconPlus />}>Add</Button> // raw Tabler element
|
|
87
|
-
<Button startIcon={IconPlus}>Add</Button> // component ref
|
|
88
|
-
<Button startIcon={<span>+</span>}>Add</Button> // custom node
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
All four work. Size flows from `<IconProvider>` context — don't pass `className="h-4 w-4"`. On 22 components: Button, IconButton, Badge, Combobox, SegmentedControl, Stepper, StatCard, TreeItem, OAuthButton, Chat.Message.*, AIConversation, EmptyState, BulkActionBar, ActivityFeed, CommandPalette, TopBar, Sidebar, BottomNavbar, AppCommandPalette, CommandRegistry.
|
|
92
|
-
|
|
93
|
-
## IMPORT PATH CHEATSHEET (don't guess)
|
|
94
|
-
|
|
95
|
-
| Component / API | Exact import path |
|
|
96
|
-
|------------------------------------------------|----|
|
|
97
|
-
| `FormField`, `FormHelperText`, `useFormField` | `@devalok/shilp-sutra/ui/form` (NOT `ui/form-field`)|
|
|
98
|
-
| `Label` | `@devalok/shilp-sutra/ui/label`|
|
|
99
|
-
| `AppSidebar` | `@devalok/shilp-sutra/shell/sidebar` (NOT `shell/app-sidebar`)|
|
|
100
|
-
| `TopBar`, `TopBar.*` | `@devalok/shilp-sutra/shell/top-bar`|
|
|
101
|
-
| `BottomNavbar` | `@devalok/shilp-sutra/shell/bottom-navbar`|
|
|
102
|
-
| `AppCommandPalette` | `@devalok/shilp-sutra/shell/app-command-palette`|
|
|
103
|
-
| `NotificationCenter` | `@devalok/shilp-sutra/shell/notification-center`|
|
|
104
|
-
| `CommandPalette` (lower-level) | `@devalok/shilp-sutra/composed/command-palette`|
|
|
105
|
-
| `BarChart`, `LineChart`, `AreaChart`, `PieChart`, `RadarChart`, `GaugeChart`, `Sparkline`, `ChartContainer`, `Legend` | `@devalok/shilp-sutra/ui/charts` (or per-chart subpath `…/ui/charts/bar-chart`) |
|
|
106
|
-
| `DataTable` | `@devalok/shilp-sutra/ui/data-table`|
|
|
107
|
-
| **`DatePicker`** family | `@devalok/shilp-sutra/composed/date-picker` **(per-component required since 0.40)** |
|
|
108
|
-
| **`Toaster`** | `@devalok/shilp-sutra/ui/toaster` **(per-component required since 0.40, pulls `sonner`)** |
|
|
109
|
-
| **`toast`** | `@devalok/shilp-sutra/ui/toast` **(per-component required since 0.40)** |
|
|
110
|
-
| **`InputOTP`** family | `@devalok/shilp-sutra/ui/input-otp` **(per-component required since 0.40)** |
|
|
111
|
-
| **`EmojiPicker`** | `@devalok/shilp-sutra/composed/emoji-picker` **(per-component since 0.40)** |
|
|
112
|
-
| **`FilePreview`** | `@devalok/shilp-sutra/composed/file-preview` **(per-component since 0.40)** |
|
|
113
|
-
| **`MarkdownViewer`** | `@devalok/shilp-sutra/composed/markdown-viewer` **(per-component since 0.40)** |
|
|
114
|
-
| **`RichTextEditor`** / **`RichChatInput`** | `@devalok/shilp-sutra/composed/rich-{text-editor,chat-input}` **(per-component since 0.40)** |
|
|
115
|
-
| **`BlockRenderer`**, **`ErrorBlock`**, **`TextBlock`** | `@devalok/shilp-sutra/ai/{block-renderer,blocks/error,blocks/text}` **(per-component since 0.40)** |
|
|
116
|
-
| `useColorMode` | `@devalok/shilp-sutra/hooks/use-color-mode`|
|
|
117
|
-
| `MotionProvider`, `springs`, `tweens` | `@devalok/shilp-sutra/motion`|
|
|
118
|
-
|
|
119
|
-
Components whose import path is the kebab-case of their name (`Button` → `ui/button`, `Card` → `ui/card`, `Avatar` → `ui/avatar`, `Stack` → `ui/stack`, `Text` → `ui/text`) follow the obvious rule. The table above lists the ones that DON'T.
|
|
120
|
-
|
|
121
|
-
## TWO-AXIS VARIANT SYSTEM (vs shadcn's one-axis)
|
|
122
|
-
|
|
123
|
-
Many components take BOTH `variant` (shape/surface) AND `color` (intent/semantics):
|
|
124
|
-
|
|
125
|
-
```tsx
|
|
126
|
-
<Button variant="solid" color="error">Delete</Button> // red solid
|
|
127
|
-
<Button variant="soft" color="warning">Pending</Button> // amber tinted
|
|
128
|
-
<Button variant="outline" color="accent">Cancel</Button> // bordered
|
|
129
|
-
<Badge variant="solid" color="success">Active</Badge> // green solid
|
|
130
|
-
<Alert variant="subtle" color="info" title="Note" /> // tinted blue
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
Components with the two-axis system: **Button, Badge, Alert, Banner, Progress, StatusBadge**.
|
|
134
|
-
|
|
135
|
-
## TOP DIFFERENCES FROM SHADCN/UI (will trip you up)
|
|
136
|
-
|
|
137
|
-
| shadcn pattern | shilp-sutra equivalent |
|
|
138
|
-
|---|---|
|
|
139
|
-
| `variant="destructive"` | `color="error"` |
|
|
140
|
-
| `size="default"` | `size="md"` (always — never "default") |
|
|
141
|
-
| `<Select size="lg">` | `<SelectTrigger size="lg">` (size on trigger, NOT root) |
|
|
142
|
-
| `<Chip>` | `<Badge onClick={...}>` (Chip removed 0.32) |
|
|
143
|
-
| `useToast() + toast({variant})` | `import { toast }`, then `toast.success('msg')` |
|
|
144
|
-
| `Badge variant="destructive"` | `Badge variant="solid" color="error"` |
|
|
145
|
-
| `Alert + AlertTitle + AlertDescription` | `<Alert title="..." color="error">` (single component) |
|
|
146
|
-
| `Form + FormField + FormItem + FormLabel + FormControl + …` | `<FormField>` + `<Label>` + `<Input>` + `<FormHelperText>` + `useFormField()` hook |
|
|
147
|
-
|
|
148
|
-
## COMMON MISTAKES — DO NOT
|
|
149
|
-
|
|
150
|
-
- DO NOT use `variant="destructive"` — use `color="error"`
|
|
151
|
-
- DO NOT use `variant="default"` on Button — use `variant="solid"`
|
|
152
|
-
- DO NOT use `size="default"` — use `size="md"`
|
|
153
|
-
- DO NOT put `size` on `<Select>` — put it on `<SelectTrigger size="md">`
|
|
154
|
-
- DO NOT use `<Chip>` — use `<Badge onClick={...}>`
|
|
155
|
-
- DO NOT call `useToast()` hook — use `import { toast } from '@devalok/shilp-sutra/ui/toast'`
|
|
156
|
-
- DO NOT call `toast({title, color})` object form — use `toast.success('message', { description })`
|
|
157
|
-
- DO NOT call `toast()` without `<Toaster />` mounted
|
|
158
|
-
- DO NOT use `<Alert><AlertTitle>...</AlertTitle></Alert>` — use `<Alert title="..." />`
|
|
159
|
-
- DO NOT codemod `p-4` → `p-ds-04` — both coexist by design
|
|
160
|
-
- DO NOT use bare `shadow` class — pick `shadow-raised` / `shadow-floating` / `shadow-overlay`
|
|
161
|
-
- DO NOT use `tailwind.config.ts presets: [shilpSutra]` — JS preset removed 0.38
|
|
162
|
-
- DO NOT use `bg-surface-1..4` — renamed to `bg-surface-{base,raised,raised-hover,raised-active}` in 0.23
|
|
163
|
-
- DO NOT use `shadow-01..05` — renamed to `shadow-{raised,raised-hover,floating,overlay}` in 0.23
|
|
164
|
-
- DO NOT use TW3 `bg-gradient-to-*` — use TW4 `bg-linear-to-*` (since 0.37)
|
|
165
|
-
- DO NOT use TW3 `w-[--var]` — use TW4 `w-(--var)` (since 0.37)
|
|
166
|
-
- DO NOT pass `children` to `<IconButton>` — use the `icon` prop
|
|
167
|
-
|
|
168
|
-
## TOP 30 COMPONENTS QUICK-REF
|
|
169
|
-
|
|
170
|
-
### Inputs & buttons
|
|
171
|
-
- **Button**: variant(solid|soft|outline|ghost|link) color(accent|error|success|warning|neutral) size(xs|sm|md|lg|compact-xs|compact-sm|compact-md|icon-xs|icon-sm|icon-md|icon-lg) shape(default|pill) + loading, startIcon, endIcon, asChild, processing, onClickAsync
|
|
172
|
-
- **IconButton**: icon(IconInput, required) shape(square|circle) size(sm|md|lg) + aria-label required. Children rejected by type.
|
|
173
|
-
- **SplitButton**: `[Action | ▼]` with dropdown. triggerSide, dropdownContent.
|
|
174
|
-
- **Input**: size(xs|sm|md|lg) state(default|error|warning|success) + startSection, endSection (auto-typed icon vs label).
|
|
175
|
-
- **NumberInput**: value + onValueChange + min/max/step.
|
|
176
|
-
- **Textarea**, **SearchInput**, **ColorInput**.
|
|
177
|
-
- **Checkbox**: checked, onCheckedChange, indeterminate, error, size.
|
|
178
|
-
- **Switch**: checked, onCheckedChange, error, size, color, thumbIcon.
|
|
179
|
-
- **RadioGroup > RadioGroupItem**.
|
|
180
|
-
- **Select > SelectTrigger(size) > SelectValue; SelectContent > SelectItem**.
|
|
181
|
-
- **Combobox**: discriminated union — `multiple?: false` (value: string) | `multiple: true` (value: string[]).
|
|
182
|
-
- **Autocomplete**, **Slider**, **Toggle**, **ToggleGroup**, **SegmentedControl**.
|
|
183
|
-
- **FormField + Label + Input + FormHelperText + useFormField()** — replaces shadcn's Form + FormItem + FormControl + FormDescription + FormMessage.
|
|
184
|
-
|
|
185
|
-
### Display
|
|
186
|
-
- **Text**: variant(heading-2xl..xs, body-lg..xs, label-lg..xs, caption, overline, code). Polymorphic `as` prop.
|
|
187
|
-
- **Stack**: direction(vertical|horizontal) gap(SpacingToken) align/justify/wrap.
|
|
188
|
-
- **Container**, **Separator**.
|
|
189
|
-
- **Card**: variant(default|elevated|outline|flat) accent(left|top|right|bottom). Compound: CardHeader > CardTitle, CardDescription; CardContent; CardFooter.
|
|
190
|
-
- **Badge**: variant(subtle|solid|outline|soft) color(default|accent|error|success|warning|info|neutral + 7 categories + custom) size(xs|sm|md|lg) + onClick, onDismiss, dot, startIcon, endIcon, truncate. Compound: Badge.Indicator, Badge.Group.
|
|
191
|
-
- **Avatar**: size(xs|sm|md|lg|xl) shape(circle|square|rounded) status, ring, badge.
|
|
192
|
-
- **Spinner**, **Progress** (autoColor!), **Skeleton**, **StatCard**, **StatusDot**, **ColorSwatch**.
|
|
193
|
-
- **Alert**: variant(subtle|solid|outline) color(info|success|warning|error|neutral) + title, onDismiss. Single component, not compound.
|
|
194
|
-
- **Banner**: color(...) + actions, onDismiss. Mobile-responsive.
|
|
195
|
-
- **Toast**: imperative `toast.success('msg')` / `.error/.warning/.info/.loading/.message/.promise/.upload/.custom`. Requires `<Toaster />`.
|
|
196
|
-
|
|
197
|
-
### Overlays
|
|
198
|
-
- **Dialog**: compound (DialogTrigger; DialogContent > DialogHeader > DialogTitle; …; DialogFooter). Mobile auto-fullscreens.
|
|
199
|
-
- **AlertDialog**: same compound, mobile bottom-sheet via `responsive` prop.
|
|
200
|
-
- **Sheet**: side(top|bottom|left|right). Mobile auto-bottom + swipe-to-dismiss.
|
|
201
|
-
- **Popover**, **Tooltip** (auto-wraps Provider), **HoverCard**, **Collapsible**.
|
|
202
|
-
|
|
203
|
-
### Navigation
|
|
204
|
-
- **Tabs**: TabsList(variant: line|contained) > TabsTrigger; TabsContent. color, size, orientation.
|
|
205
|
-
- **Accordion**: AccordionItem > AccordionTrigger; AccordionContent.
|
|
206
|
-
- **Breadcrumb**, **PaginationRoot**, **DropdownMenu**, **ContextMenu**, **Menubar**, **NavigationMenu**.
|
|
207
|
-
|
|
208
|
-
### Composed (per-component subpaths)
|
|
209
|
-
- **DatePicker**, **DateRangePicker**, **DateTimePicker**, **TimePicker**, **CalendarGrid** — `@devalok/shilp-sutra/composed/date-picker`. Needs `date-fns` peer.
|
|
210
|
-
- **EmptyState**: icon(IconInput) + title, description, action, compact, iconSize.
|
|
211
|
-
- **CommandPalette**, **AppCommandPalette**, **MultiSelectPopover**, **MemberPicker**, **MasterDetail**, **ActivityFeed**, **PageHeader**, **InlineEdit**, **FormSection**, **BulkActionBar**, **DeadlineIndicator**.
|
|
212
|
-
- **RichTextEditor**, **RichTextViewer**, **RichChatInput** — needs `@tiptap/*` peers.
|
|
213
|
-
- **FilePreview**, **MarkdownViewer**, **EmojiPicker**.
|
|
214
|
-
|
|
215
|
-
### Shell
|
|
216
|
-
- **TopBar**: Composition-based. `TopBar.Left/Center/Right/Section/IconButton/Title/UserMenu`.
|
|
217
|
-
- **AppSidebar**: `NavItem[]` + `NavGroup[]` + `footer.{links,version,promo,slot}`.
|
|
218
|
-
- **BottomNavbar**: mobile.
|
|
219
|
-
- **NotificationCenter**, **NotificationPreferences**, **LinkProvider**.
|
|
220
|
-
|
|
221
|
-
### AI module
|
|
222
|
-
- **CommandBar**, **AIConversation**, **BlockRenderer** (per-component, pulls `react-markdown`), **AICommandProvider**, **DevadootIcon**.
|
|
223
|
-
- AI blocks (barrel-safe): BlockTable, ConfirmBlock, DividerBlock, InfoBlock, LoadingBlock, StatRowBlock, SuccessBlock.
|
|
224
|
-
- AI blocks (per-component required): ErrorBlock (`/ai/blocks/error`), TextBlock (`/ai/blocks/text`).
|
|
225
|
-
|
|
226
|
-
## SERVER-SAFE COMPONENTS (`@server-safe` annotation in source)
|
|
227
|
-
|
|
228
|
-
UI: `Text`, `Skeleton`, `Stack`, `Container`, `Table` (+ sub), `Code`, `VisuallyHidden`.
|
|
229
|
-
Composed: `ContentCard`, `PageHeader`, `LoadingSkeleton`, `PageSkeletons`, `PriorityIndicator`.
|
|
230
|
-
|
|
231
|
-
Use per-component subpaths in Server Components: `import { Text } from '@devalok/shilp-sutra/ui/text'`.
|
|
232
|
-
|
|
233
|
-
## TROUBLESHOOTING
|
|
234
|
-
|
|
235
|
-
13 symptoms with diagnosis + fix at `node_modules/@devalok/shilp-sutra/docs/recipes/troubleshoot.md`. Most common:
|
|
236
|
-
|
|
237
|
-
- **`Cannot find module 'sonner'` / `'input-otp'` / `'date-fns'`** → missing optional peer; install per the matrix above.
|
|
238
|
-
- **Spacing utilities don't apply** → Tailwind not seeing `node_modules/@devalok/shilp-sutra/dist`; ensure `transpilePackages` in `next.config` OR Tailwind 4 auto-discovery.
|
|
239
|
-
- **`<Toaster />` mounted but `toast()` silent** → check sonner peer installed + Toaster mounted ONCE at layout root.
|
|
240
|
-
- **Hydration warning on every page** → add `suppressHydrationWarning` to `<html>` (needed for next-themes).
|
|
241
|
-
- **Bare `shadow` produces no shadow** → TW4 has no `--shadow-DEFAULT`; pick `shadow-raised`/`-floating`/`-overlay`.
|
|
242
|
-
|
|
243
|
-
## NEED MORE?
|
|
244
|
-
|
|
245
|
-
- `llms.txt` — full ~27K-token reference (this file is the slice)
|
|
246
|
-
- `llms-full.txt` — exhaustive per-component prop tables (~140K tokens)
|
|
247
|
-
- `docs/recipes/install-<framework>.md` — per-framework setup with edge cases
|
|
248
|
-
- `docs/recipes/customize-brand.md` — token override cookbook
|
|
249
|
-
- `MIGRATION.md` — every breaking change since 0.18
|
|
250
|
-
|
|
251
|
-
This file regenerates from `llms.txt` when component APIs change; expect it to track v0.40+ closely.
|