@devalok/shilp-sutra 0.34.0 → 0.36.0

package/docs/components/composed/confirm-dialog.md

@@ -1,46 +1,46 @@
-# ConfirmDialog
-
-- Import: @devalok/shilp-sutra/composed/confirm-dialog
-- Server-safe: No
-- Category: composed
-
-## Props
-    open: boolean (REQUIRED, controlled)
-    onOpenChange: (open: boolean) => void (REQUIRED)
-    title: string (REQUIRED)
-    description: string (REQUIRED)
-    confirmText: string (default: "Confirm")
-    cancelText: string (default: "Cancel")
-    color: "default" | "error" (controls confirm button color)
-    loading: boolean (default: false, disables buttons and replaces confirm button text with 'Processing...')
-    onConfirm: () => void | Promise<void> (REQUIRED)
-
-## Defaults
-    confirmText="Confirm", cancelText="Cancel", color="default", loading=false
-
-## Example
-```jsx
-const [open, setOpen] = useState(false)
-<ConfirmDialog
-  open={open}
-  onOpenChange={setOpen}
-  title="Delete project?"
-  description="This action cannot be undone."
-  color="error"
-  confirmText="Delete"
-  loading={isDeleting}
-  onConfirm={async () => { await deleteProject(); setOpen(false) }}
-/>
-```
-
-## Gotchas
-- Dialog stays open after confirm — consumer must close it via `onOpenChange`
-- Built on AlertDialog internally
-- Fully controlled — `open` and `onOpenChange` are required
-
-## Changes
-### v0.18.0
-- **Fixed** Converted to `forwardRef` pattern
-
-### v0.1.0
-- **Added** Initial release
+# ConfirmDialog
+
+- Import: @devalok/shilp-sutra/composed/confirm-dialog
+- Server-safe: No
+- Category: composed
+
+## Props
+    open: boolean (REQUIRED, controlled)
+    onOpenChange: (open: boolean) => void (REQUIRED)
+    title: string (REQUIRED)
+    description: string (REQUIRED)
+    confirmText: string (default: "Confirm")
+    cancelText: string (default: "Cancel")
+    color: "default" | "error" (controls confirm button color)
+    loading: boolean (default: false, disables buttons and replaces confirm button text with 'Processing...')
+    onConfirm: () => void | Promise<void> (REQUIRED)
+
+## Defaults
+    confirmText="Confirm", cancelText="Cancel", color="default", loading=false
+
+## Example
+```jsx
+const [open, setOpen] = useState(false)
+<ConfirmDialog
+  open={open}
+  onOpenChange={setOpen}
+  title="Delete project?"
+  description="This action cannot be undone."
+  color="error"
+  confirmText="Delete"
+  loading={isDeleting}
+  onConfirm={async () => { await deleteProject(); setOpen(false) }}
+/>
+```
+
+## Gotchas
+- Dialog stays open after confirm — consumer must close it via `onOpenChange`
+- Built on AlertDialog internally
+- Fully controlled — `open` and `onOpenChange` are required
+
+## Changes
+### v0.18.0
+- **Fixed** Converted to `forwardRef` pattern
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/content-card.md

@@ -1,36 +1,36 @@
-# ContentCard
-
-- Import: @devalok/shilp-sutra/composed/content-card
-- Server-safe: Yes
-- Category: composed
-
-## Props
-    variant: "default" | "outline" | "ghost"
-    padding: "default" | "compact" | "spacious" | "none"
-    header: ReactNode (custom header content)
-    headerTitle: string (simple text header)
-    headerActions: ReactNode (actions in header area)
-    footer: ReactNode
-    children: ReactNode (body)
-
-## Defaults
-    variant="default", padding="default"
-
-## Example
-```jsx
-<ContentCard headerTitle="Team Members" headerActions={<Button size="sm">Add</Button>}>
-  <p>Member list here</p>
-</ContentCard>
-```
-
-## Gotchas
-- Server-safe: can be imported directly in Next.js Server Components
-- Use `headerTitle` for simple text headers; use `header` for custom header content
-- `header` takes precedence over `headerTitle` if both are provided
-
-## Changes
-### v0.2.0
-- **Added** Identified as server-safe component
-
-### v0.1.0
-- **Added** Initial release
+# ContentCard
+
+- Import: @devalok/shilp-sutra/composed/content-card
+- Server-safe: Yes
+- Category: composed
+
+## Props
+    variant: "default" | "outline" | "ghost"
+    padding: "default" | "compact" | "spacious" | "none"
+    header: ReactNode (custom header content)
+    headerTitle: string (simple text header)
+    headerActions: ReactNode (actions in header area)
+    footer: ReactNode
+    children: ReactNode (body)
+
+## Defaults
+    variant="default", padding="default"
+
+## Example
+```jsx
+<ContentCard headerTitle="Team Members" headerActions={<Button size="sm">Add</Button>}>
+  <p>Member list here</p>
+</ContentCard>
+```
+
+## Gotchas
+- Server-safe: can be imported directly in Next.js Server Components
+- Use `headerTitle` for simple text headers; use `header` for custom header content
+- `header` takes precedence over `headerTitle` if both are provided
+
+## Changes
+### v0.2.0
+- **Added** Identified as server-safe component
+
+### v0.1.0
+- **Added** Initial release

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