@devalok/shilp-sutra 0.34.0 → 0.36.0

package/docs/components/composed/empty-state.md

@@ -1,53 +1,53 @@
-# EmptyState
-
-- Import: @devalok/shilp-sutra/composed/empty-state
-- Server-safe: No
-- Category: composed
-
-Note: EmptyState was server-safe prior to v0.18.0 but is NO LONGER server-safe due to Framer Motion dependency.
-
-## Props
-    title: string (REQUIRED)
-    description: string
-    icon: ReactNode | ComponentType<{ className?: string }> (default: Devalok chakra icon)
-    action: ReactNode (e.g. a Button)
-    compact: boolean (smaller layout)
-    iconSize: 'sm' | 'md' | 'lg' (default 'md', compact defaults to 'sm') — sm=h-ico-sm, md=h-ico-lg, lg=h-ico-xl
-
-## Defaults
-    iconSize="md" (compact defaults to "sm")
-
-## Example
-```jsx
-<EmptyState
-  title="No tasks found"
-  description="Create your first task to get started."
-  action={<Button>Create Task</Button>}
-  iconSize="lg"
-/>
-```
-
-## Gotchas
-- `icon` accepts both JSX elements (`<IconFolder />`) and component references (`IconFolder`). Component references are auto-instantiated with correct sizing classes.
-- `iconSize` controls icon dimensions regardless of icon type. When `compact=true` and no `iconSize`, defaults to `'sm'`.
-- As of v0.18.0, EmptyState is NOT server-safe (Framer Motion dependency). Use per-component import in client components.
-
-## Changes
-### v0.18.0
-- **Changed** No longer server-safe due to Framer Motion dependency
-
-### v0.16.0
-- **Added** `iconSize?: 'sm' | 'md' | 'lg'` — control icon dimensions
-
-### v0.13.0
-- **Changed** `icon` prop now accepts `React.ComponentType<{ className?: string }>` in addition to `ReactNode` — component references are auto-instantiated
-
-### v0.5.0
-- **Changed** `icon` prop changed from `TablerIcon` (component ref) to `React.ReactNode` — use `icon={<MyIcon />}` instead of `icon={MyIcon}`
-- **Changed** Default icon is now the Devalok swadhisthana chakra (inline SVG)
-
-### v0.2.0
-- **Added** Identified as server-safe component (later reverted in v0.18.0)
-
-### v0.1.0
-- **Added** Initial release
+# EmptyState
+
+- Import: @devalok/shilp-sutra/composed/empty-state
+- Server-safe: No
+- Category: composed
+
+Note: EmptyState was server-safe prior to v0.18.0 but is NO LONGER server-safe due to Framer Motion dependency.
+
+## Props
+    title: string (REQUIRED)
+    description: string
+    icon: ReactNode | ComponentType<{ className?: string }> (default: Devalok chakra icon)
+    action: ReactNode (e.g. a Button)
+    compact: boolean (smaller layout)
+    iconSize: 'sm' | 'md' | 'lg' (default 'md', compact defaults to 'sm') — sm=h-ico-sm, md=h-ico-lg, lg=h-ico-xl
+
+## Defaults
+    iconSize="md" (compact defaults to "sm")
+
+## Example
+```jsx
+<EmptyState
+  title="No tasks found"
+  description="Create your first task to get started."
+  action={<Button>Create Task</Button>}
+  iconSize="lg"
+/>
+```
+
+## Gotchas
+- `icon` accepts both JSX elements (`<IconFolder />`) and component references (`IconFolder`). Component references are auto-instantiated with correct sizing classes.
+- `iconSize` controls icon dimensions regardless of icon type. When `compact=true` and no `iconSize`, defaults to `'sm'`.
+- As of v0.18.0, EmptyState is NOT server-safe (Framer Motion dependency). Use per-component import in client components.
+
+## Changes
+### v0.18.0
+- **Changed** No longer server-safe due to Framer Motion dependency
+
+### v0.16.0
+- **Added** `iconSize?: 'sm' | 'md' | 'lg'` — control icon dimensions
+
+### v0.13.0
+- **Changed** `icon` prop now accepts `React.ComponentType<{ className?: string }>` in addition to `ReactNode` — component references are auto-instantiated
+
+### v0.5.0
+- **Changed** `icon` prop changed from `TablerIcon` (component ref) to `React.ReactNode` — use `icon={<MyIcon />}` instead of `icon={MyIcon}`
+- **Changed** Default icon is now the Devalok swadhisthana chakra (inline SVG)
+
+### v0.2.0
+- **Added** Identified as server-safe component (later reverted in v0.18.0)
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/error-boundary.md

@@ -1,29 +1,29 @@
-# ErrorDisplay
-
-- Import: @devalok/shilp-sutra/composed/error-boundary
-- Server-safe: No
-- Category: composed
-
-## Props
-    error: unknown (REQUIRED — Error object, status object, or string)
-    onReset: () => void (optional retry button)
-
-## Defaults
-    None
-
-## Example
-```jsx
-<ErrorDisplay error={error} onReset={() => refetch()} />
-```
-
-## Gotchas
-- Auto-detects HTTP status codes (404, 403, 500) and shows appropriate icon/message
-- Shows stack trace in development mode only
-- The import path is `error-boundary` but the component is named `ErrorDisplay`
-
-## Changes
-### v0.18.0
-- **Added** ErrorBoundary tests (13 new tests)
-
-### v0.1.0
-- **Added** Initial release
+# ErrorDisplay
+
+- Import: @devalok/shilp-sutra/composed/error-boundary
+- Server-safe: No
+- Category: composed
+
+## Props
+    error: unknown (REQUIRED — Error object, status object, or string)
+    onReset: () => void (optional retry button)
+
+## Defaults
+    None
+
+## Example
+```jsx
+<ErrorDisplay error={error} onReset={() => refetch()} />
+```
+
+## Gotchas
+- Auto-detects HTTP status codes (404, 403, 500) and shows appropriate icon/message
+- Shows stack trace in development mode only
+- The import path is `error-boundary` but the component is named `ErrorDisplay`
+
+## Changes
+### v0.18.0
+- **Added** ErrorBoundary tests (13 new tests)
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/file-preview.md

@@ -1,40 +1,40 @@
-# FilePreview
-
-- Import: @devalok/shilp-sutra/composed/file-preview
-- Server-safe: No
-- Category: composed
-
-## Props
-    url: string (file URL — required)
-    type: "image" | "pdf" | "video" | "audio" | "embed" (auto-detected from URL/mimeType)
-    mimeType: string (helps auto-detection)
-    alt: string (image alt text)
-    initialPage: number (PDF starting page, default 1)
-    fileName: string (displayed in file info bar)
-    fileSize: string (displayed as badge, e.g. "2.4 MB")
-    onError: (error: string) => void (called on load failures)
-
-## Defaults
-    initialPage={1}, type auto-detected
-
-## Features by Type
-
-**Image:** Pinch/scroll zoom (0.1x–8x), double-click toggle, floating toolbar (zoom %/reset/fullscreen), keyboard (+/-/0/F/Esc)
-**PDF:** react-pdf page nav (prev/next + direct input), keyboard (←→), crossfade between pages
-**Video:** Custom branded player, play overlay, auto-hiding controls, progress bar + scrub handle, mute, fullscreen
-**Audio:** Branded mini-player, full-width progress bar with hover tooltip + scrub handle, volume, file name display
-**Embed:** 16:9 aspect ratio, auto-converts YouTube/Vimeo/Figma/Loom URLs, 15s timeout
-
-## Example
-```jsx
-<FilePreview url="/uploads/mockup.png" fileName="mockup.png" fileSize="2.4 MB" />
-<FilePreview url="/docs/contract.pdf" initialPage={3} />
-<FilePreview url="https://youtube.com/watch?v=..." />
-```
-
-## Gotchas
-- Image/PDF lazy-loaded (Skeleton on first render)
-- PDF worker from unpkg CDN — configure workerSrc for offline apps
-- All types have error fallback with download link
-- Embed URLs auto-converted to embed format
-- Audio player doesn't show separate Download button (integrated in card)
+# FilePreview
+
+- Import: @devalok/shilp-sutra/composed/file-preview
+- Server-safe: No
+- Category: composed
+
+## Props
+    url: string (file URL — required)
+    type: "image" | "pdf" | "video" | "audio" | "embed" (auto-detected from URL/mimeType)
+    mimeType: string (helps auto-detection)
+    alt: string (image alt text)
+    initialPage: number (PDF starting page, default 1)
+    fileName: string (displayed in file info bar)
+    fileSize: string (displayed as badge, e.g. "2.4 MB")
+    onError: (error: string) => void (called on load failures)
+
+## Defaults
+    initialPage={1}, type auto-detected
+
+## Features by Type
+
+**Image:** Pinch/scroll zoom (0.1x–8x), double-click toggle, floating toolbar (zoom %/reset/fullscreen), keyboard (+/-/0/F/Esc)
+**PDF:** react-pdf page nav (prev/next + direct input), keyboard (←→), crossfade between pages
+**Video:** Custom branded player, play overlay, auto-hiding controls, progress bar + scrub handle, mute, fullscreen
+**Audio:** Branded mini-player, full-width progress bar with hover tooltip + scrub handle, volume, file name display
+**Embed:** 16:9 aspect ratio, auto-converts YouTube/Vimeo/Figma/Loom URLs, 15s timeout
+
+## Example
+```jsx
+<FilePreview url="/uploads/mockup.png" fileName="mockup.png" fileSize="2.4 MB" />
+<FilePreview url="/docs/contract.pdf" initialPage={3} />
+<FilePreview url="https://youtube.com/watch?v=..." />
+```
+
+## Gotchas
+- Image/PDF lazy-loaded (Skeleton on first render)
+- PDF worker from unpkg CDN — configure workerSrc for offline apps
+- All types have error fallback with download link
+- Embed URLs auto-converted to embed format
+- Audio player doesn't show separate Download button (integrated in card)

package/docs/components/composed/filter-bar.md

@@ -1,57 +1,57 @@
-# FilterBar
-
-- Import: @devalok/shilp-sutra/composed/filter-bar
-- Server-safe: No
-- Category: composed
-
-## Exports
-FilterBar, FilterSelect, FilterMultiSelect
-
-## Props
-
-### FilterBar
-    searchValue: string
-    onSearchChange: (value: string) => void (renders SearchInput when provided)
-    searchPlaceholder: string
-    onClearAll: () => void (renders "Clear all" button when provided)
-    size: "xs" | "sm" | "md" (propagated to all child controls via context)
-    children: ReactNode (FilterSelect / FilterMultiSelect controls)
-
-### FilterSelect
-    label: string
-    value: string
-    onValueChange: (value: string) => void
-    options: { value: string; label: string }[]
-    allLabel: string (label for the "all" option)
-
-### FilterMultiSelect
-    label: string
-    value: string[]
-    onValueChange: (values: string[]) => void
-    options: { value: string; label: string }[]
-
-## Defaults
-    size="sm", searchPlaceholder="Search...", allLabel="All"
-
-## Example
-```jsx
-<FilterBar searchValue={search} onSearchChange={setSearch} onClearAll={clearFilters}>
-  <FilterSelect
-    label="Status"
-    value={status}
-    onValueChange={setStatus}
-    options={[{ value: 'active', label: 'Active' }, { value: 'done', label: 'Done' }]}
-  />
-  <FilterMultiSelect
-    label="Assignees"
-    value={assignees}
-    onValueChange={setAssignees}
-    options={memberOptions}
-  />
-</FilterBar>
-```
-
-## Gotchas
-- FilterSelect and FilterMultiSelect must be direct children of FilterBar to inherit the size context
-- FilterSelect uses `"all"` as the sentinel value for "no filter" — do not use `"all"` as a real option value
-- Active filters get an accent border highlight automatically
+# FilterBar
+
+- Import: @devalok/shilp-sutra/composed/filter-bar
+- Server-safe: No
+- Category: composed
+
+## Exports
+FilterBar, FilterSelect, FilterMultiSelect
+
+## Props
+
+### FilterBar
+    searchValue: string
+    onSearchChange: (value: string) => void (renders SearchInput when provided)
+    searchPlaceholder: string
+    onClearAll: () => void (renders "Clear all" button when provided)
+    size: "xs" | "sm" | "md" (propagated to all child controls via context)
+    children: ReactNode (FilterSelect / FilterMultiSelect controls)
+
+### FilterSelect
+    label: string
+    value: string
+    onValueChange: (value: string) => void
+    options: { value: string; label: string }[]
+    allLabel: string (label for the "all" option)
+
+### FilterMultiSelect
+    label: string
+    value: string[]
+    onValueChange: (values: string[]) => void
+    options: { value: string; label: string }[]
+
+## Defaults
+    size="sm", searchPlaceholder="Search...", allLabel="All"
+
+## Example
+```jsx
+<FilterBar searchValue={search} onSearchChange={setSearch} onClearAll={clearFilters}>
+  <FilterSelect
+    label="Status"
+    value={status}
+    onValueChange={setStatus}
+    options={[{ value: 'active', label: 'Active' }, { value: 'done', label: 'Done' }]}
+  />
+  <FilterMultiSelect
+    label="Assignees"
+    value={assignees}
+    onValueChange={setAssignees}
+    options={memberOptions}
+  />
+</FilterBar>
+```
+
+## Gotchas
+- FilterSelect and FilterMultiSelect must be direct children of FilterBar to inherit the size context
+- FilterSelect uses `"all"` as the sentinel value for "no filter" — do not use `"all"` as a real option value
+- Active filters get an accent border highlight automatically

package/docs/components/composed/form-section.md

@@ -1,31 +1,31 @@
-# FormSection
-
-- Import: @devalok/shilp-sutra/composed/form-section
-- Server-safe: No
-- Category: composed
-
-## Props
-    title: string
-    description: string (subtitle text below the title)
-    collapsible: boolean (wraps content in a Collapsible)
-    defaultOpen: boolean (initial open state when collapsible)
-    children: ReactNode (form fields)
-
-## Defaults
-    collapsible={false}, defaultOpen={true}
-
-## Example
-```jsx
-<FormSection title="General" description="Basic project settings">
-  <FormField .../>
-  <FormField .../>
-</FormSection>
-
-<FormSection title="Advanced" collapsible defaultOpen={false}>
-  <FormField .../>
-</FormSection>
-```
-
-## Gotchas
-- `defaultOpen` only applies when `collapsible={true}` — otherwise the section is always open
-- Renders a horizontal rule between the header and content automatically
+# FormSection
+
+- Import: @devalok/shilp-sutra/composed/form-section
+- Server-safe: No
+- Category: composed
+
+## Props
+    title: string
+    description: string (subtitle text below the title)
+    collapsible: boolean (wraps content in a Collapsible)
+    defaultOpen: boolean (initial open state when collapsible)
+    children: ReactNode (form fields)
+
+## Defaults
+    collapsible={false}, defaultOpen={true}
+
+## Example
+```jsx
+<FormSection title="General" description="Basic project settings">
+  <FormField .../>
+  <FormField .../>
+</FormSection>
+
+<FormSection title="Advanced" collapsible defaultOpen={false}>
+  <FormField .../>
+</FormSection>
+```
+
+## Gotchas
+- `defaultOpen` only applies when `collapsible={true}` — otherwise the section is always open
+- Renders a horizontal rule between the header and content automatically

package/docs/components/composed/global-loading.md

@@ -1,27 +1,27 @@
-# GlobalLoading
-
-- Import: @devalok/shilp-sutra/composed/global-loading
-- Server-safe: No
-- Category: composed
-
-## Props
-    isLoading: boolean (REQUIRED)
-
-## Defaults
-    None
-
-## Example
-```jsx
-<GlobalLoading isLoading={isNavigating} />
-```
-
-## Gotchas
-- Fixed-position bar at top of viewport (z-toast layer)
-- Renders nothing when `isLoading` is false
-
-## Changes
-### v0.18.0
-- **Fixed** Track `setTimeout` with ref, add cleanup on unmount
-
-### v0.1.0
-- **Added** Initial release
+# GlobalLoading
+
+- Import: @devalok/shilp-sutra/composed/global-loading
+- Server-safe: No
+- Category: composed
+
+## Props
+    isLoading: boolean (REQUIRED)
+
+## Defaults
+    None
+
+## Example
+```jsx
+<GlobalLoading isLoading={isNavigating} />
+```
+
+## Gotchas
+- Fixed-position bar at top of viewport (z-toast layer)
+- Renders nothing when `isLoading` is false
+
+## Changes
+### v0.18.0
+- **Fixed** Track `setTimeout` with ref, add cleanup on unmount
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/inline-edit.md

@@ -1,35 +1,35 @@
-# InlineEdit
-
-- Import: @devalok/shilp-sutra/composed/inline-edit
-- Server-safe: No
-- Category: composed
-
-## Props
-    value: string (current text value)
-    onSave: (newValue: string) => void | Promise<void> (called on commit; async shows spinner)
-    placeholder: string (shown when value is empty)
-    textClassName: string (CSS class for the editable text, e.g. "text-ds-lg font-semibold")
-    readOnly: boolean
-    maxLength: number
-    saving: boolean (external saving state — shows spinner, disables editing)
-
-## Defaults
-    placeholder="Click to edit", readOnly={false}, saving={false}
-
-## Example
-```jsx
-<InlineEdit
-  value={title}
-  onSave={(v) => updateTitle(v)}
-  textClassName="text-ds-lg font-semibold"
-/>
-```
-
-## Gotchas
-- Uses contentEditable — the text IS the editor. No input field appears.
-- Click to focus → cursor appears in text. Type to edit. Enter saves. Escape reverts.
-- Text is auto-selected on focus (like renaming a file in Finder)
-- Paste is restricted to plain text (no rich content)
-- The value is trimmed before calling `onSave`; if unchanged, `onSave` is not called
-- If `onSave` returns a Promise, a spinner is shown and editing is disabled until it resolves
-- On Promise rejection, the text reverts to the original value
+# InlineEdit
+
+- Import: @devalok/shilp-sutra/composed/inline-edit
+- Server-safe: No
+- Category: composed
+
+## Props
+    value: string (current text value)
+    onSave: (newValue: string) => void | Promise<void> (called on commit; async shows spinner)
+    placeholder: string (shown when value is empty)
+    textClassName: string (CSS class for the editable text, e.g. "text-ds-lg font-semibold")
+    readOnly: boolean
+    maxLength: number
+    saving: boolean (external saving state — shows spinner, disables editing)
+
+## Defaults
+    placeholder="Click to edit", readOnly={false}, saving={false}
+
+## Example
+```jsx
+<InlineEdit
+  value={title}
+  onSave={(v) => updateTitle(v)}
+  textClassName="text-ds-lg font-semibold"
+/>
+```
+
+## Gotchas
+- Uses contentEditable — the text IS the editor. No input field appears.
+- Click to focus → cursor appears in text. Type to edit. Enter saves. Escape reverts.
+- Text is auto-selected on focus (like renaming a file in Finder)
+- Paste is restricted to plain text (no rich content)
+- The value is trimmed before calling `onSave`; if unchanged, `onSave` is not called
+- If `onSave` returns a Promise, a spinner is shown and editing is disabled until it resolves
+- On Promise rejection, the text reverts to the original value

package/docs/components/composed/loading-skeleton.md

@@ -1,51 +1,51 @@
-# LoadingSkeleton
-
-- Import: @devalok/shilp-sutra/composed/loading-skeleton
-- Server-safe: Yes
-- Category: composed
-
-Exports: CardSkeleton, TableSkeleton, BoardSkeleton, ListSkeleton
-
-## Props
-
-### CardSkeleton
-    className: string
-
-### TableSkeleton
-    rows: number (default: 5)
-    columns: number (default: 4)
-    className: string
-
-### BoardSkeleton
-    columns: number (default: 4)
-    cardsPerColumn: number (default: 3)
-    className: string
-
-### ListSkeleton
-    rows: number (default: 6)
-    showAvatar: boolean (default: true)
-    className: string
-
-## Defaults
-    TableSkeleton: rows=5, columns=4
-    BoardSkeleton: columns=4, cardsPerColumn=3
-    ListSkeleton: rows=6, showAvatar=true
-
-## Example
-```jsx
-<CardSkeleton />
-<TableSkeleton rows={8} columns={5} />
-<BoardSkeleton columns={3} cardsPerColumn={4} />
-<ListSkeleton rows={10} showAvatar={false} />
-```
-
-## Gotchas
-- Server-safe: can be imported directly in Next.js Server Components
-- These are pre-composed skeleton layouts — for individual skeleton shapes, use the `Skeleton` UI component
-
-## Changes
-### v0.2.0
-- **Added** Identified as server-safe component
-
-### v0.1.0
-- **Added** Initial release
+# LoadingSkeleton
+
+- Import: @devalok/shilp-sutra/composed/loading-skeleton
+- Server-safe: Yes
+- Category: composed
+
+Exports: CardSkeleton, TableSkeleton, BoardSkeleton, ListSkeleton
+
+## Props
+
+### CardSkeleton
+    className: string
+
+### TableSkeleton
+    rows: number (default: 5)
+    columns: number (default: 4)
+    className: string
+
+### BoardSkeleton
+    columns: number (default: 4)
+    cardsPerColumn: number (default: 3)
+    className: string
+
+### ListSkeleton
+    rows: number (default: 6)
+    showAvatar: boolean (default: true)
+    className: string
+
+## Defaults
+    TableSkeleton: rows=5, columns=4
+    BoardSkeleton: columns=4, cardsPerColumn=3
+    ListSkeleton: rows=6, showAvatar=true
+
+## Example
+```jsx
+<CardSkeleton />
+<TableSkeleton rows={8} columns={5} />
+<BoardSkeleton columns={3} cardsPerColumn={4} />
+<ListSkeleton rows={10} showAvatar={false} />
+```
+
+## Gotchas
+- Server-safe: can be imported directly in Next.js Server Components
+- These are pre-composed skeleton layouts — for individual skeleton shapes, use the `Skeleton` UI component
+
+## Changes
+### v0.2.0
+- **Added** Identified as server-safe component
+
+### v0.1.0
+- **Added** Initial release