@devalok/shilp-sutra 0.34.1 → 0.36.0

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

@@ -1,130 +1,130 @@
-# DatePicker
-
-- Import: @devalok/shilp-sutra/composed/date-picker
-- Server-safe: No
-- Category: composed
-
-## Props
-
-### DatePicker
-    value?: Date | null
-    onChange?: (date: Date | null) => void
-    placeholder: string (default: "Pick a date")
-    formatStr: string (default: "MMM d, yyyy")
-    minDate: Date
-    maxDate: Date
-    disabledDates: (date: Date) => boolean
-    className: string
-
-### DateRangePicker
-    startDate?: Date | null
-    endDate?: Date | null
-    onChange?: (range: { start: Date | null, end: Date | null }) => void
-    placeholder: string (default: "Pick a date range")
-    formatStr: string (default: "MMM d, yyyy")
-    minDate: Date
-    maxDate: Date
-    disabledDates: (date: Date) => boolean
-    presets: PresetKey[] (shows quick-select sidebar)
-    numberOfMonths: number (default: 1)
-
-### DateTimePicker
-    value: Date | null
-    onChange: (date: Date | null) => void
-    minDate: Date
-    maxDate: Date
-    disabledDates: (date: Date) => boolean
-    timeFormat: "12h" | "24h"
-    minuteStep: number
-    placeholder: string
-    className: string
-
-### TimePicker
-    value?: Date | null (time stored as a Date object)
-    onChange?: (date: Date) => void
-    format: "12h" | "24h" (default: "12h")
-    minuteStep: number (default: 1)
-    secondStep: number (default: 1)
-    showSeconds: boolean (default: false)
-    placeholder: string (default: "Pick a time")
-    disabled: boolean (default: false)
-    className: string
-
-### CalendarGrid
-    currentMonth: Date (REQUIRED)
-    selected?: Date | null
-    rangeStart?: Date | null
-    rangeEnd?: Date | null
-    hoverDate?: Date | null
-    onSelect: (date: Date) => void (REQUIRED)
-    onHover?: (date: Date | null) => void
-    onMonthChange: (date: Date) => void (REQUIRED)
-    onHeaderClick?: () => void
-    disabledDates: (date: Date) => boolean
-    minDate: Date
-    maxDate: Date
-    hidePrevNav: boolean
-    hideNextNav: boolean
-    events: CalendarEvent[] — { date: Date, color?: string, label?: string }
-
-### YearPicker
-    currentYear: number (REQUIRED)
-    selectedYear: number
-    onYearSelect: (year: number) => void (REQUIRED)
-    minDate: Date
-    maxDate: Date
-
-### MonthPicker
-    currentYear: number (REQUIRED)
-    selectedMonth: number (0-11)
-    onMonthSelect: (month: number) => void (REQUIRED)
-    minDate: Date
-    maxDate: Date
-
-### Presets
-    presets: PresetKey[] (REQUIRED)
-    onSelect: (start: Date, end: Date) => void (REQUIRED)
-    className: string
-
-PresetKey: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisMonth' | 'lastMonth' | 'thisYear'
-
-### useCalendar hook
-    useCalendar(initialMonth?: Date) => { currentMonth, setCurrentMonth, goToPreviousMonth, goToNextMonth, goToMonth, goToYear }
-
-## Defaults
-    DatePicker: placeholder="Pick a date", formatStr="MMM d, yyyy"
-    DateRangePicker: placeholder="Pick a date range", formatStr="MMM d, yyyy", numberOfMonths=1
-    TimePicker: format="12h", minuteStep=1, secondStep=1, showSeconds=false
-
-## Example
-```jsx
-<DatePicker value={date} onChange={setDate} placeholder="Select date" />
-
-<DateRangePicker
-  startDate={start}
-  endDate={end}
-  onChange={({ start, end }) => { setStart(start); setEnd(end); }}
-/>
-
-<DateTimePicker value={dateTime} onChange={setDateTime} timeFormat="12h" minuteStep={15} />
-
-<TimePicker value={time} onChange={setTime} format="24h" minuteStep={15} />
-```
-
-## Gotchas
-- TimePicker stores time inside a Date object — only hours/minutes/seconds are meaningful
-- CalendarGrid is a low-level building block — prefer DatePicker/DateRangePicker for most use cases
-- MonthPicker month values are 0-indexed (Jan=0, Dec=11) — same as JavaScript `Date.getMonth()`
-- YearPicker displays a 12-year grid based on the decade of `currentYear`
-- CalendarGrid supports up to 3 event dots per day cell
-- useCalendar is a convenience hook for managing calendar month state
-
-## Changes
-### v0.18.0
-- **Fixed** Added `aria-label` to DatePicker/DateRangePicker trigger buttons
-
-### v0.4.2
-- **Changed** DateRangePicker default `formatStr` from `'MMM d'` to `'MMM d, yyyy'`
-
-### v0.1.0
-- **Added** Initial release
+# DatePicker
+
+- Import: @devalok/shilp-sutra/composed/date-picker
+- Server-safe: No
+- Category: composed
+
+## Props
+
+### DatePicker
+    value?: Date | null
+    onChange?: (date: Date | null) => void
+    placeholder: string (default: "Pick a date")
+    formatStr: string (default: "MMM d, yyyy")
+    minDate: Date
+    maxDate: Date
+    disabledDates: (date: Date) => boolean
+    className: string
+
+### DateRangePicker
+    startDate?: Date | null
+    endDate?: Date | null
+    onChange?: (range: { start: Date | null, end: Date | null }) => void
+    placeholder: string (default: "Pick a date range")
+    formatStr: string (default: "MMM d, yyyy")
+    minDate: Date
+    maxDate: Date
+    disabledDates: (date: Date) => boolean
+    presets: PresetKey[] (shows quick-select sidebar)
+    numberOfMonths: number (default: 1)
+
+### DateTimePicker
+    value: Date | null
+    onChange: (date: Date | null) => void
+    minDate: Date
+    maxDate: Date
+    disabledDates: (date: Date) => boolean
+    timeFormat: "12h" | "24h"
+    minuteStep: number
+    placeholder: string
+    className: string
+
+### TimePicker
+    value?: Date | null (time stored as a Date object)
+    onChange?: (date: Date) => void
+    format: "12h" | "24h" (default: "12h")
+    minuteStep: number (default: 1)
+    secondStep: number (default: 1)
+    showSeconds: boolean (default: false)
+    placeholder: string (default: "Pick a time")
+    disabled: boolean (default: false)
+    className: string
+
+### CalendarGrid
+    currentMonth: Date (REQUIRED)
+    selected?: Date | null
+    rangeStart?: Date | null
+    rangeEnd?: Date | null
+    hoverDate?: Date | null
+    onSelect: (date: Date) => void (REQUIRED)
+    onHover?: (date: Date | null) => void
+    onMonthChange: (date: Date) => void (REQUIRED)
+    onHeaderClick?: () => void
+    disabledDates: (date: Date) => boolean
+    minDate: Date
+    maxDate: Date
+    hidePrevNav: boolean
+    hideNextNav: boolean
+    events: CalendarEvent[] — { date: Date, color?: string, label?: string }
+
+### YearPicker
+    currentYear: number (REQUIRED)
+    selectedYear: number
+    onYearSelect: (year: number) => void (REQUIRED)
+    minDate: Date
+    maxDate: Date
+
+### MonthPicker
+    currentYear: number (REQUIRED)
+    selectedMonth: number (0-11)
+    onMonthSelect: (month: number) => void (REQUIRED)
+    minDate: Date
+    maxDate: Date
+
+### Presets
+    presets: PresetKey[] (REQUIRED)
+    onSelect: (start: Date, end: Date) => void (REQUIRED)
+    className: string
+
+PresetKey: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisMonth' | 'lastMonth' | 'thisYear'
+
+### useCalendar hook
+    useCalendar(initialMonth?: Date) => { currentMonth, setCurrentMonth, goToPreviousMonth, goToNextMonth, goToMonth, goToYear }
+
+## Defaults
+    DatePicker: placeholder="Pick a date", formatStr="MMM d, yyyy"
+    DateRangePicker: placeholder="Pick a date range", formatStr="MMM d, yyyy", numberOfMonths=1
+    TimePicker: format="12h", minuteStep=1, secondStep=1, showSeconds=false
+
+## Example
+```jsx
+<DatePicker value={date} onChange={setDate} placeholder="Select date" />
+
+<DateRangePicker
+  startDate={start}
+  endDate={end}
+  onChange={({ start, end }) => { setStart(start); setEnd(end); }}
+/>
+
+<DateTimePicker value={dateTime} onChange={setDateTime} timeFormat="12h" minuteStep={15} />
+
+<TimePicker value={time} onChange={setTime} format="24h" minuteStep={15} />
+```
+
+## Gotchas
+- TimePicker stores time inside a Date object — only hours/minutes/seconds are meaningful
+- CalendarGrid is a low-level building block — prefer DatePicker/DateRangePicker for most use cases
+- MonthPicker month values are 0-indexed (Jan=0, Dec=11) — same as JavaScript `Date.getMonth()`
+- YearPicker displays a 12-year grid based on the decade of `currentYear`
+- CalendarGrid supports up to 3 event dots per day cell
+- useCalendar is a convenience hook for managing calendar month state
+
+## Changes
+### v0.18.0
+- **Fixed** Added `aria-label` to DatePicker/DateRangePicker trigger buttons
+
+### v0.4.2
+- **Changed** DateRangePicker default `formatStr` from `'MMM d'` to `'MMM d, yyyy'`
+
+### v0.1.0
+- **Added** Initial release

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

@@ -1,27 +1,27 @@
-# DeadlineIndicator
-
-- Import: @devalok/shilp-sutra/composed/deadline-indicator
-- Server-safe: Yes
-- Category: composed
-
-## Props
-    deadline: Date | string (deadline timestamp)
-    warningThreshold: number (minutes before deadline to show warning color)
-    criticalThreshold: number (minutes before deadline to show critical/error color)
-    format: "relative" | "absolute"
-    showIcon: boolean (show clock icon prefix)
-
-## Defaults
-    warningThreshold={1440} (24h), criticalThreshold={240} (4h), format="relative", showIcon={false}
-
-## Example
-```jsx
-<DeadlineIndicator deadline={task.dueDate} />
-<DeadlineIndicator deadline="2026-03-20T17:00:00Z" showIcon format="absolute" />
-<DeadlineIndicator deadline={task.dueDate} warningThreshold={2880} criticalThreshold={480} />
-```
-
-## Gotchas
-- Color is semantic: green (on-track) -> yellow (warning threshold) -> red (critical/overdue)
-- Overdue deadlines show bold red text with "Overdue by Xd/h/m"
-- Relative format uses `Date.now()` at render time — does not live-update (re-render to refresh)
+# DeadlineIndicator
+
+- Import: @devalok/shilp-sutra/composed/deadline-indicator
+- Server-safe: Yes
+- Category: composed
+
+## Props
+    deadline: Date | string (deadline timestamp)
+    warningThreshold: number (minutes before deadline to show warning color)
+    criticalThreshold: number (minutes before deadline to show critical/error color)
+    format: "relative" | "absolute"
+    showIcon: boolean (show clock icon prefix)
+
+## Defaults
+    warningThreshold={1440} (24h), criticalThreshold={240} (4h), format="relative", showIcon={false}
+
+## Example
+```jsx
+<DeadlineIndicator deadline={task.dueDate} />
+<DeadlineIndicator deadline="2026-03-20T17:00:00Z" showIcon format="absolute" />
+<DeadlineIndicator deadline={task.dueDate} warningThreshold={2880} criticalThreshold={480} />
+```
+
+## Gotchas
+- Color is semantic: green (on-track) -> yellow (warning threshold) -> red (critical/overdue)
+- Overdue deadlines show bold red text with "Overdue by Xd/h/m"
+- Relative format uses `Date.now()` at render time — does not live-update (re-render to refresh)

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

@@ -1,52 +1,52 @@
-# EmojiPicker
-
-- Import: @devalok/shilp-sutra/composed/emoji-picker
-- Server-safe: No
-- Category: composed
-
-## Exports
-EmojiPicker, EmojiPickerPopover
-
-## Props
-
-### EmojiPicker
-    onSelect: (emoji: EmojiData) => void
-    theme: "auto" | "light" | "dark"
-    previewPosition: "top" | "bottom" | "none"
-    skinTonePosition: "search" | "preview" | "none"
-    className: string
-
-### EmojiPickerPopover (extends EmojiPicker props)
-    children: ReactNode (trigger element)
-    align: "start" | "center" | "end"
-
-### EmojiData
-    id: string
-    native: string (the emoji character)
-    shortcodes: string
-
-## Defaults
-    theme="auto", previewPosition="none", skinTonePosition="search", align="start"
-
-## Example
-```jsx
-<EmojiPickerPopover onSelect={(emoji) => insertEmoji(emoji.native)}>
-  <Button variant="ghost" size="icon-sm">😀</Button>
-</EmojiPickerPopover>
-
-<EmojiPicker onSelect={handleEmoji} theme="dark" />
-```
-
-## Gotchas
-- Wraps `@emoji-mart/react` which is lazy-loaded — shows a Skeleton placeholder while loading
-- `theme="auto"` reads the `.dark` class on `<html>` to pick light/dark
-- EmojiPickerPopover auto-closes after selection
-
-## Changes
-
-### v0.33.0
-- **Added** `set` prop on EmojiPicker and EmojiPickerPopover — `EmojiSet` type: 'native' | 'apple' | 'google' | 'twitter' | 'facebook'
-- **Added** `EmojiNode` TipTap extension — inline atom node with spritesheet rendering for consistent emoji art styles
-- **Added** `createEmojiSuggestion(set?)` factory — replaces `EmojiSuggestion` named export
-- **Added** `EmojiSet` type exported from barrel
-- **Breaking** `EmojiSuggestion` named export removed — use `createEmojiSuggestion()` factory
+# EmojiPicker
+
+- Import: @devalok/shilp-sutra/composed/emoji-picker
+- Server-safe: No
+- Category: composed
+
+## Exports
+EmojiPicker, EmojiPickerPopover
+
+## Props
+
+### EmojiPicker
+    onSelect: (emoji: EmojiData) => void
+    theme: "auto" | "light" | "dark"
+    previewPosition: "top" | "bottom" | "none"
+    skinTonePosition: "search" | "preview" | "none"
+    className: string
+
+### EmojiPickerPopover (extends EmojiPicker props)
+    children: ReactNode (trigger element)
+    align: "start" | "center" | "end"
+
+### EmojiData
+    id: string
+    native: string (the emoji character)
+    shortcodes: string
+
+## Defaults
+    theme="auto", previewPosition="none", skinTonePosition="search", align="start"
+
+## Example
+```jsx
+<EmojiPickerPopover onSelect={(emoji) => insertEmoji(emoji.native)}>
+  <Button variant="ghost" size="icon-sm">😀</Button>
+</EmojiPickerPopover>
+
+<EmojiPicker onSelect={handleEmoji} theme="dark" />
+```
+
+## Gotchas
+- Wraps `@emoji-mart/react` which is lazy-loaded — shows a Skeleton placeholder while loading
+- `theme="auto"` reads the `.dark` class on `<html>` to pick light/dark
+- EmojiPickerPopover auto-closes after selection
+
+## Changes
+
+### v0.33.0
+- **Added** `set` prop on EmojiPicker and EmojiPickerPopover — `EmojiSet` type: 'native' | 'apple' | 'google' | 'twitter' | 'facebook'
+- **Added** `EmojiNode` TipTap extension — inline atom node with spritesheet rendering for consistent emoji art styles
+- **Added** `createEmojiSuggestion(set?)` factory — replaces `EmojiSuggestion` named export
+- **Added** `EmojiSet` type exported from barrel
+- **Breaking** `EmojiSuggestion` named export removed — use `createEmojiSuggestion()` factory

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