@devalok/shilp-sutra 0.34.0 → 0.36.0

package/docs/components/composed/markdown-viewer.md

@@ -1,27 +1,27 @@
-# MarkdownViewer
-
-- Import: @devalok/shilp-sutra/composed/markdown-viewer
-- Server-safe: No
-- Category: composed
-
-## Props
-    content: string (markdown source)
-    compact: boolean (tighter spacing for inline use)
-    allowHtml: boolean (allow raw HTML in markdown)
-    linkTarget: string (target attribute for links)
-
-## Defaults
-    compact={false}, allowHtml={false}, linkTarget="_blank"
-
-## Example
-```jsx
-<MarkdownViewer content={message.body} />
-<MarkdownViewer content={comment} compact />
-<MarkdownViewer content={trustedHtml} allowHtml />
-```
-
-## Gotchas
-- Code blocks with a language fence are syntax-highlighted via `react-syntax-highlighter` (lazy-loaded) — the first render shows a plain `<pre>` fallback
-- GFM (tables, strikethrough, task lists) is supported via `remark-gfm`
-- Raw HTML is stripped by default — only enable `allowHtml` for trusted content
-- Links open in a new tab by default (`target="_blank"` with `rel="noopener noreferrer"`)
+# MarkdownViewer
+
+- Import: @devalok/shilp-sutra/composed/markdown-viewer
+- Server-safe: No
+- Category: composed
+
+## Props
+    content: string (markdown source)
+    compact: boolean (tighter spacing for inline use)
+    allowHtml: boolean (allow raw HTML in markdown)
+    linkTarget: string (target attribute for links)
+
+## Defaults
+    compact={false}, allowHtml={false}, linkTarget="_blank"
+
+## Example
+```jsx
+<MarkdownViewer content={message.body} />
+<MarkdownViewer content={comment} compact />
+<MarkdownViewer content={trustedHtml} allowHtml />
+```
+
+## Gotchas
+- Code blocks with a language fence are syntax-highlighted via `react-syntax-highlighter` (lazy-loaded) — the first render shows a plain `<pre>` fallback
+- GFM (tables, strikethrough, task lists) is supported via `remark-gfm`
+- Raw HTML is stripped by default — only enable `allowHtml` for trusted content
+- Links open in a new tab by default (`target="_blank"` with `rel="noopener noreferrer"`)

package/docs/components/composed/master-detail.md

@@ -1,48 +1,48 @@
-# MasterDetail
-
-- Import: @devalok/shilp-sutra/composed/master-detail
-- Server-safe: No
-- Category: composed
-
-## Compound Components
-MasterDetail (root), MasterDetail.List, MasterDetail.Detail, MasterDetail.ListItem
-
-## Props
-
-### MasterDetail (root)
-    selected: string | null (ID of currently selected item; null = show list on mobile)
-    onBack: () => void (called when mobile back button is pressed)
-    masterWidth: string (master panel width on desktop)
-    breakpoint: "sm" | "md" | "lg" (below this, stacked mobile mode activates)
-
-### MasterDetail.ListItem
-    active: boolean (highlights the item)
-    (extends ButtonHTMLAttributes)
-
-## Defaults
-    selected={null}, masterWidth="280px", breakpoint="md"
-
-## Example
-```jsx
-<MasterDetail selected={selectedId} onBack={() => setSelectedId(null)}>
-  <MasterDetail.List>
-    {items.map((item) => (
-      <MasterDetail.ListItem
-        key={item.id}
-        active={item.id === selectedId}
-        onClick={() => setSelectedId(item.id)}
-      >
-        {item.name}
-      </MasterDetail.ListItem>
-    ))}
-  </MasterDetail.List>
-  <MasterDetail.Detail>
-    {selectedId ? <ItemDetail id={selectedId} /> : <EmptyState />}
-  </MasterDetail.Detail>
-</MasterDetail>
-```
-
-## Gotchas
-- On mobile (below breakpoint), List and Detail are mutually exclusive — selecting an item hides the list
-- The `onBack` callback is required for the mobile back button to appear in the Detail pane
-- Uses `window.matchMedia` — SSR renders desktop layout initially, then hydrates to correct mode
+# MasterDetail
+
+- Import: @devalok/shilp-sutra/composed/master-detail
+- Server-safe: No
+- Category: composed
+
+## Compound Components
+MasterDetail (root), MasterDetail.List, MasterDetail.Detail, MasterDetail.ListItem
+
+## Props
+
+### MasterDetail (root)
+    selected: string | null (ID of currently selected item; null = show list on mobile)
+    onBack: () => void (called when mobile back button is pressed)
+    masterWidth: string (master panel width on desktop)
+    breakpoint: "sm" | "md" | "lg" (below this, stacked mobile mode activates)
+
+### MasterDetail.ListItem
+    active: boolean (highlights the item)
+    (extends ButtonHTMLAttributes)
+
+## Defaults
+    selected={null}, masterWidth="280px", breakpoint="md"
+
+## Example
+```jsx
+<MasterDetail selected={selectedId} onBack={() => setSelectedId(null)}>
+  <MasterDetail.List>
+    {items.map((item) => (
+      <MasterDetail.ListItem
+        key={item.id}
+        active={item.id === selectedId}
+        onClick={() => setSelectedId(item.id)}
+      >
+        {item.name}
+      </MasterDetail.ListItem>
+    ))}
+  </MasterDetail.List>
+  <MasterDetail.Detail>
+    {selectedId ? <ItemDetail id={selectedId} /> : <EmptyState />}
+  </MasterDetail.Detail>
+</MasterDetail>
+```
+
+## Gotchas
+- On mobile (below breakpoint), List and Detail are mutually exclusive — selecting an item hides the list
+- The `onBack` callback is required for the mobile back button to appear in the Detail pane
+- Uses `window.matchMedia` — SSR renders desktop layout initially, then hydrates to correct mode

package/docs/components/composed/member-picker.md

@@ -1,35 +1,35 @@
-# MemberPicker
-
-- Import: @devalok/shilp-sutra/composed/member-picker
-- Server-safe: No
-- Category: composed
-
-## Props
-    members: MemberPickerMember[] (REQUIRED) — { id, name, avatar? }
-    selectedIds: string[] (REQUIRED)
-    onSelect: (memberId: string) => void (REQUIRED)
-    multiple: boolean (default: false)
-    placeholder: string (default: "Search members...")
-    children: ReactNode (trigger element)
-
-## Defaults
-    multiple=false, placeholder="Search members..."
-
-## Example
-```jsx
-<MemberPicker members={teamMembers} selectedIds={assignees} onSelect={toggleAssignee} multiple>
-  <Button variant="outline">Assign Members</Button>
-</MemberPicker>
-```
-
-## Gotchas
-- `children` is used as the trigger element (e.g., a Button)
-- `onSelect` is called with a single `memberId` — toggle logic is up to the consumer
-- When `multiple=false`, selecting a new member replaces the previous selection
-
-## Changes
-### v0.18.0
-- **Fixed** Added `aria-label` to search input
-
-### v0.1.0
-- **Added** Initial release
+# MemberPicker
+
+- Import: @devalok/shilp-sutra/composed/member-picker
+- Server-safe: No
+- Category: composed
+
+## Props
+    members: MemberPickerMember[] (REQUIRED) — { id, name, avatar? }
+    selectedIds: string[] (REQUIRED)
+    onSelect: (memberId: string) => void (REQUIRED)
+    multiple: boolean (default: false)
+    placeholder: string (default: "Search members...")
+    children: ReactNode (trigger element)
+
+## Defaults
+    multiple=false, placeholder="Search members..."
+
+## Example
+```jsx
+<MemberPicker members={teamMembers} selectedIds={assignees} onSelect={toggleAssignee} multiple>
+  <Button variant="outline">Assign Members</Button>
+</MemberPicker>
+```
+
+## Gotchas
+- `children` is used as the trigger element (e.g., a Button)
+- `onSelect` is called with a single `memberId` — toggle logic is up to the consumer
+- When `multiple=false`, selecting a new member replaces the previous selection
+
+## Changes
+### v0.18.0
+- **Fixed** Added `aria-label` to search input
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/multi-select-popover.md

@@ -1,62 +1,62 @@
-# MultiSelectPopover
-
-- Import: @devalok/shilp-sutra/composed/multi-select-popover
-- Server-safe: No
-- Category: composed
-
-## Props
-    items: MultiSelectItem[] (flat list — use `groups` for grouped rendering)
-    groups: MultiSelectGroup[] (grouped items with section headers)
-    value: string[] (currently selected item IDs)
-    onValueChange: (ids: string[]) => void
-    searchPlaceholder: string
-    onSearch: (query: string) => Promise<MultiSelectItem[]> (async search — replaces local filter)
-    searchDebounce: number (debounce for async search in ms)
-    renderItem: (item: MultiSelectItem, selected: boolean) => ReactNode (custom item renderer)
-    emptyMessage: string (message when no items match)
-    maxSelections: number (cap on selections)
-    align: "start" | "center" | "end"
-    width: string | number (popover width)
-    children: ReactNode (trigger element)
-
-### MultiSelectItem
-    id: string
-    label: string
-    image?: string
-    description?: string
-    disabled?: boolean
-
-### MultiSelectGroup
-    label: string
-    items: MultiSelectItem[]
-
-## Defaults
-    searchPlaceholder="Search...", searchDebounce={300}, emptyMessage="No results found", align="start", width={240}
-
-## Example
-```jsx
-<MultiSelectPopover
-  items={[
-    { id: '1', label: 'Alice', image: '/alice.jpg' },
-    { id: '2', label: 'Bob' },
-  ]}
-  value={selected}
-  onValueChange={setSelected}
->
-  <Button>Assign members</Button>
-</MultiSelectPopover>
-```
-
-## Gotchas
-- Supply either `items` (flat) or `groups` (sectioned), not both
-- When `onSearch` is provided, local filtering is disabled — the callback must return results
-- Search state resets when the popover closes
-- `maxSelections: 1` acts as single-select — clicking a new item replaces the current one
-
-## Changes
-
-### v0.27.2
-- **Fixed** `maxSelections` at limit now replaces oldest selection instead of blocking. Single-select (`maxSelections: 1`) swaps in the new value.
-
-### v0.26.0
-- **Added** Initial release
+# MultiSelectPopover
+
+- Import: @devalok/shilp-sutra/composed/multi-select-popover
+- Server-safe: No
+- Category: composed
+
+## Props
+    items: MultiSelectItem[] (flat list — use `groups` for grouped rendering)
+    groups: MultiSelectGroup[] (grouped items with section headers)
+    value: string[] (currently selected item IDs)
+    onValueChange: (ids: string[]) => void
+    searchPlaceholder: string
+    onSearch: (query: string) => Promise<MultiSelectItem[]> (async search — replaces local filter)
+    searchDebounce: number (debounce for async search in ms)
+    renderItem: (item: MultiSelectItem, selected: boolean) => ReactNode (custom item renderer)
+    emptyMessage: string (message when no items match)
+    maxSelections: number (cap on selections)
+    align: "start" | "center" | "end"
+    width: string | number (popover width)
+    children: ReactNode (trigger element)
+
+### MultiSelectItem
+    id: string
+    label: string
+    image?: string
+    description?: string
+    disabled?: boolean
+
+### MultiSelectGroup
+    label: string
+    items: MultiSelectItem[]
+
+## Defaults
+    searchPlaceholder="Search...", searchDebounce={300}, emptyMessage="No results found", align="start", width={240}
+
+## Example
+```jsx
+<MultiSelectPopover
+  items={[
+    { id: '1', label: 'Alice', image: '/alice.jpg' },
+    { id: '2', label: 'Bob' },
+  ]}
+  value={selected}
+  onValueChange={setSelected}
+>
+  <Button>Assign members</Button>
+</MultiSelectPopover>
+```
+
+## Gotchas
+- Supply either `items` (flat) or `groups` (sectioned), not both
+- When `onSearch` is provided, local filtering is disabled — the callback must return results
+- Search state resets when the popover closes
+- `maxSelections: 1` acts as single-select — clicking a new item replaces the current one
+
+## Changes
+
+### v0.27.2
+- **Fixed** `maxSelections` at limit now replaces oldest selection instead of blocking. Single-select (`maxSelections: 1`) swaps in the new value.
+
+### v0.26.0
+- **Added** Initial release

package/docs/components/composed/page-header.md

@@ -1,41 +1,41 @@
-# PageHeader
-
-- Import: @devalok/shilp-sutra/composed/page-header
-- Server-safe: Yes
-- Category: composed
-
-## Props
-    title: string (falls back to last breadcrumb label if omitted)
-    subtitle: string
-    actions: ReactNode (action buttons)
-    breadcrumbs: Breadcrumb[] — { label: string, href?: string }
-    titleClassName: string
-
-## Defaults
-    None
-
-## Example
-```jsx
-<PageHeader
-  title="Project Settings"
-  subtitle="Configure your project preferences"
-  breadcrumbs={[
-    { label: 'Home', href: '/' },
-    { label: 'Projects', href: '/projects' },
-    { label: 'Settings' },
-  ]}
-  actions={<Button>Save</Button>}
-/>
-```
-
-## Gotchas
-- Server-safe: can be imported directly in Next.js Server Components
-- If `title` is omitted, the last breadcrumb's `label` is used as the page title
-- The last breadcrumb should not have an `href` (it represents the current page)
-
-## Changes
-### v0.2.0
-- **Added** Identified as server-safe component
-
-### v0.1.0
-- **Added** Initial release
+# PageHeader
+
+- Import: @devalok/shilp-sutra/composed/page-header
+- Server-safe: Yes
+- Category: composed
+
+## Props
+    title: string (falls back to last breadcrumb label if omitted)
+    subtitle: string
+    actions: ReactNode (action buttons)
+    breadcrumbs: Breadcrumb[] — { label: string, href?: string }
+    titleClassName: string
+
+## Defaults
+    None
+
+## Example
+```jsx
+<PageHeader
+  title="Project Settings"
+  subtitle="Configure your project preferences"
+  breadcrumbs={[
+    { label: 'Home', href: '/' },
+    { label: 'Projects', href: '/projects' },
+    { label: 'Settings' },
+  ]}
+  actions={<Button>Save</Button>}
+/>
+```
+
+## Gotchas
+- Server-safe: can be imported directly in Next.js Server Components
+- If `title` is omitted, the last breadcrumb's `label` is used as the page title
+- The last breadcrumb should not have an `href` (it represents the current page)
+
+## Changes
+### v0.2.0
+- **Added** Identified as server-safe component
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/page-skeletons.md

@@ -1,32 +1,32 @@
-# PageSkeletons
-
-- Import: @devalok/shilp-sutra/composed/page-skeletons
-- Server-safe: Yes
-- Category: composed
-
-Exports: DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton
-
-## Props
-    className?: string (plus all standard HTML div attributes via React.ComponentPropsWithoutRef<'div'>)
-
-## Defaults
-    None
-
-## Example
-```jsx
-<DashboardSkeleton />
-<ProjectListSkeleton />
-<TaskDetailSkeleton />
-```
-
-## Gotchas
-- Server-safe: can be imported directly in Next.js Server Components
-- These are full-page skeleton layouts — for smaller skeleton sections, use LoadingSkeleton components
-- Accept `className` and standard div attributes but render fixed layout structures
-
-## Changes
-### v0.2.0
-- **Added** Identified as server-safe component
-
-### v0.1.0
-- **Added** Initial release
+# PageSkeletons
+
+- Import: @devalok/shilp-sutra/composed/page-skeletons
+- Server-safe: Yes
+- Category: composed
+
+Exports: DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton
+
+## Props
+    className?: string (plus all standard HTML div attributes via React.ComponentPropsWithoutRef<'div'>)
+
+## Defaults
+    None
+
+## Example
+```jsx
+<DashboardSkeleton />
+<ProjectListSkeleton />
+<TaskDetailSkeleton />
+```
+
+## Gotchas
+- Server-safe: can be imported directly in Next.js Server Components
+- These are full-page skeleton layouts — for smaller skeleton sections, use LoadingSkeleton components
+- Accept `className` and standard div attributes but render fixed layout structures
+
+## Changes
+### v0.2.0
+- **Added** Identified as server-safe component
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/priority-indicator.md

@@ -1,32 +1,32 @@
-# PriorityIndicator
-
-- Import: @devalok/shilp-sutra/composed/priority-indicator
-- Server-safe: Yes
-- Category: composed
-
-## Props
-    priority: Priority
-    display: "compact" | "full" (default: "full")
-
-Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'
-
-## Defaults
-    display="full"
-
-## Example
-```jsx
-<PriorityIndicator priority="HIGH" />
-<PriorityIndicator priority="low" display="compact" />
-```
-
-## Gotchas
-- Case-insensitive — "low" and "LOW" both work
-- Server-safe: can be imported directly in Next.js Server Components
-- `compact` display shows only the icon; `full` shows icon + text label
-
-## Changes
-### v0.2.0
-- **Added** Identified as server-safe component
-
-### v0.1.0
-- **Added** Initial release
+# PriorityIndicator
+
+- Import: @devalok/shilp-sutra/composed/priority-indicator
+- Server-safe: Yes
+- Category: composed
+
+## Props
+    priority: Priority
+    display: "compact" | "full" (default: "full")
+
+Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'
+
+## Defaults
+    display="full"
+
+## Example
+```jsx
+<PriorityIndicator priority="HIGH" />
+<PriorityIndicator priority="low" display="compact" />
+```
+
+## Gotchas
+- Case-insensitive — "low" and "LOW" both work
+- Server-safe: can be imported directly in Next.js Server Components
+- `compact` display shows only the icon; `full` shows icon + text label
+
+## Changes
+### v0.2.0
+- **Added** Identified as server-safe component
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/responsive-overlay.md

@@ -1,34 +1,34 @@
-# ResponsiveOverlay
-
-- Import: @devalok/shilp-sutra/composed/responsive-overlay
-- Server-safe: No
-- Category: composed
-
-## Props
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    title: string
-    description: string
-    breakpoint: "sm" | "md" (below this renders as bottom Sheet; above as Dialog)
-    children: ReactNode
-    className: string
-
-## Defaults
-    breakpoint="md"
-
-## Example
-```jsx
-<ResponsiveOverlay
-  open={open}
-  onOpenChange={setOpen}
-  title="Edit task"
-  description="Update the task details"
->
-  <TaskForm />
-</ResponsiveOverlay>
-```
-
-## Gotchas
-- Renders a centered Dialog on desktop and a bottom Sheet on mobile — same content, different container
-- Uses `window.matchMedia` internally — SSR defaults to desktop (Dialog) until hydration
-- Title and description are optional; if omitted, no header is rendered in either mode
+# ResponsiveOverlay
+
+- Import: @devalok/shilp-sutra/composed/responsive-overlay
+- Server-safe: No
+- Category: composed
+
+## Props
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    title: string
+    description: string
+    breakpoint: "sm" | "md" (below this renders as bottom Sheet; above as Dialog)
+    children: ReactNode
+    className: string
+
+## Defaults
+    breakpoint="md"
+
+## Example
+```jsx
+<ResponsiveOverlay
+  open={open}
+  onOpenChange={setOpen}
+  title="Edit task"
+  description="Update the task details"
+>
+  <TaskForm />
+</ResponsiveOverlay>
+```
+
+## Gotchas
+- Renders a centered Dialog on desktop and a bottom Sheet on mobile — same content, different container
+- Uses `window.matchMedia` internally — SSR defaults to desktop (Dialog) until hydration
+- Title and description are optional; if omitted, no header is rendered in either mode