@devalok/shilp-sutra 0.34.1 → 0.36.0

package/docs/components/ui/stepper.md

@@ -1,49 +1,49 @@
-# Stepper / Step
-
-- Import: @devalok/shilp-sutra/ui/stepper
-- Server-safe: No
-- Category: ui
-
-## Props
-### Stepper
-    activeStep: number (REQUIRED, 0-indexed)
-    orientation: "horizontal" | "vertical"
-    children: <Step> elements
-
-### Step
-    label: string (REQUIRED)
-    description: string
-    icon: ReactNode (overrides default number/checkmark)
-
-## Defaults
-    orientation: "horizontal"
-
-### StepperContent
-    activeStep: number (REQUIRED, 0-indexed — matches Stepper's activeStep)
-    children: ReactNode (one child per step, only the active one is visible)
-    className: string
-
-## Compound Components
-    Stepper (root)
-      Step (label, description, icon)
-    StepperContent (content panel, animates active step)
-
-## Example
-```jsx
-<Stepper activeStep={1}>
-  <Step label="Account" description="Create credentials" />
-  <Step label="Profile" description="Add details" />
-  <Step label="Review" />
-</Stepper>
-```
-
-## Gotchas
-- Steps before activeStep are "completed", at activeStep is "active", after is "pending"
-
-## Changes
-### v0.18.0
-- **Fixed** `bg-interactive` changed to `bg-accent-9` (OKLCH migration)
-- **Fixed** Wrapped Stepper context provider value in `useMemo` for performance
-
-### v0.1.0
-- **Added** Initial release
+# Stepper / Step
+
+- Import: @devalok/shilp-sutra/ui/stepper
+- Server-safe: No
+- Category: ui
+
+## Props
+### Stepper
+    activeStep: number (REQUIRED, 0-indexed)
+    orientation: "horizontal" | "vertical"
+    children: <Step> elements
+
+### Step
+    label: string (REQUIRED)
+    description: string
+    icon: ReactNode (overrides default number/checkmark)
+
+## Defaults
+    orientation: "horizontal"
+
+### StepperContent
+    activeStep: number (REQUIRED, 0-indexed — matches Stepper's activeStep)
+    children: ReactNode (one child per step, only the active one is visible)
+    className: string
+
+## Compound Components
+    Stepper (root)
+      Step (label, description, icon)
+    StepperContent (content panel, animates active step)
+
+## Example
+```jsx
+<Stepper activeStep={1}>
+  <Step label="Account" description="Create credentials" />
+  <Step label="Profile" description="Add details" />
+  <Step label="Review" />
+</Stepper>
+```
+
+## Gotchas
+- Steps before activeStep are "completed", at activeStep is "active", after is "pending"
+
+## Changes
+### v0.18.0
+- **Fixed** `bg-interactive` changed to `bg-accent-9` (OKLCH migration)
+- **Fixed** Wrapped Stepper context provider value in `useMemo` for performance
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/switch.md

@@ -1,47 +1,47 @@
-# Switch
-
-- Import: @devalok/shilp-sutra/ui/switch
-- Server-safe: No
-- Category: ui
-
-## Props
-    checked: boolean
-    onCheckedChange: (checked: boolean) => void
-    error: boolean (shows red border/bg)
-    disabled: boolean
-    size: "sm" | "md" | "lg"
-    color: "accent" | "success" | "warning"
-    thumbIcon: ReactNode (icon rendered inside the thumb)
-
-## Defaults
-    size="md", color="accent"
-
-## Example
-```jsx
-<Switch checked={enabled} onCheckedChange={setEnabled} />
-<Switch size="lg" color="success" thumbIcon={<IconCheck size={14} />} />
-```
-
-## Gotchas
-- Use error prop for validation states (matches Checkbox API)
-- `error` overrides `color` — when error is true, checked state always uses error-9
-
-## Changes
-### v0.29.0
-- **Added** `size` prop: `"sm"` (18px track) | `"md"` (24px, default) | `"lg"` (28px track)
-- **Added** `color` prop: `"accent"` (default) | `"success"` | `"warning"` for checked-state color
-- **Added** `thumbIcon` prop — renders any ReactNode inside the thumb circle (e.g., check icon)
-
-### v0.18.0
-- **Changed** Migrated to Framer Motion spring thumb animation
-- **Fixed** Added visible border on unchecked state (`border-surface-border-strong`) — was borderless, making unchecked state hard to see
-
-### v0.4.2
-- **Fixed** `React.ComponentRef` changed to `React.ElementRef` for consistency
-
-### v0.3.0
-- **Added** `SwitchProps` type export
-- **Added** `error` prop (matches Checkbox API)
-
-### v0.1.0
-- **Added** Initial release
+# Switch
+
+- Import: @devalok/shilp-sutra/ui/switch
+- Server-safe: No
+- Category: ui
+
+## Props
+    checked: boolean
+    onCheckedChange: (checked: boolean) => void
+    error: boolean (shows red border/bg)
+    disabled: boolean
+    size: "sm" | "md" | "lg"
+    color: "accent" | "success" | "warning"
+    thumbIcon: ReactNode (icon rendered inside the thumb)
+
+## Defaults
+    size="md", color="accent"
+
+## Example
+```jsx
+<Switch checked={enabled} onCheckedChange={setEnabled} />
+<Switch size="lg" color="success" thumbIcon={<IconCheck size={14} />} />
+```
+
+## Gotchas
+- Use error prop for validation states (matches Checkbox API)
+- `error` overrides `color` — when error is true, checked state always uses error-9
+
+## Changes
+### v0.29.0
+- **Added** `size` prop: `"sm"` (18px track) | `"md"` (24px, default) | `"lg"` (28px track)
+- **Added** `color` prop: `"accent"` (default) | `"success"` | `"warning"` for checked-state color
+- **Added** `thumbIcon` prop — renders any ReactNode inside the thumb circle (e.g., check icon)
+
+### v0.18.0
+- **Changed** Migrated to Framer Motion spring thumb animation
+- **Fixed** Added visible border on unchecked state (`border-surface-border-strong`) — was borderless, making unchecked state hard to see
+
+### v0.4.2
+- **Fixed** `React.ComponentRef` changed to `React.ElementRef` for consistency
+
+### v0.3.0
+- **Added** `SwitchProps` type export
+- **Added** `error` prop (matches Checkbox API)
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/table.md

@@ -1,47 +1,47 @@
-# Table
-
-- Import: @devalok/shilp-sutra/ui/table
-- Server-safe: Yes
-- Category: ui
-
-## Compound Components
-    Table (root <table>)
-      TableHeader (<thead>)
-        TableRow (<tr>)
-          TableHead (<th>)
-      TableBody (<tbody>)
-        TableRow (<tr>)
-          TableCell (<td>)
-      TableFooter (<tfoot>)
-      TableCaption (<caption>)
-
-## Example
-```jsx
-<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Name</TableHead>
-      <TableHead>Status</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>Project Alpha</TableCell>
-      <TableCell><Badge color="success">Active</Badge></TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
-```
-
-## Gotchas
-- Table headers automatically have scope="col" for screen reader navigation
-
-## Changes
-### v0.18.0
-- **Added** `TableProps`, `TableRowProps`, `TableCellProps` type exports
-
-### v0.17.0
-- **Fixed** TableCell: Added `px-ds-03` horizontal padding — was `px-0`, causing content to hug container edges
-
-### v0.1.0
-- **Added** Initial release
+# Table
+
+- Import: @devalok/shilp-sutra/ui/table
+- Server-safe: Yes
+- Category: ui
+
+## Compound Components
+    Table (root <table>)
+      TableHeader (<thead>)
+        TableRow (<tr>)
+          TableHead (<th>)
+      TableBody (<tbody>)
+        TableRow (<tr>)
+          TableCell (<td>)
+      TableFooter (<tfoot>)
+      TableCaption (<caption>)
+
+## Example
+```jsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Project Alpha</TableCell>
+      <TableCell><Badge color="success">Active</Badge></TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Gotchas
+- Table headers automatically have scope="col" for screen reader navigation
+
+## Changes
+### v0.18.0
+- **Added** `TableProps`, `TableRowProps`, `TableCellProps` type exports
+
+### v0.17.0
+- **Fixed** TableCell: Added `px-ds-03` horizontal padding — was `px-0`, causing content to hug container edges
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/tabs.md

@@ -1,60 +1,60 @@
-# Tabs
-
-- Import: @devalok/shilp-sutra/ui/tabs
-- Server-safe: No
-- Category: ui
-
-## Props
-### Tabs (root)
-    defaultValue: string
-    value: string
-    onValueChange: (value: string) => void
-
-### TabsList
-    variant: "line" | "contained"
-
-### TabsTrigger
-    value: string (REQUIRED)
-    variant: (inherits from TabsList)
-
-### TabsContent
-    value: string (REQUIRED)
-
-## Compound Components
-    Tabs (root)
-      TabsList (variant)
-        TabsTrigger (value)
-      TabsContent (value)
-
-## Defaults
-    TabsList variant: "line"
-
-## Example
-```jsx
-<Tabs defaultValue="overview">
-  <TabsList variant="contained">
-    <TabsTrigger value="overview">Overview</TabsTrigger>
-    <TabsTrigger value="activity">Activity</TabsTrigger>
-  </TabsList>
-  <TabsContent value="overview">Overview content</TabsContent>
-  <TabsContent value="activity">Activity content</TabsContent>
-</Tabs>
-```
-
-## Gotchas
-- variant goes on TabsList, NOT on individual TabsTrigger (propagates via context)
-- Normally omit `variant` on TabsTrigger — it inherits from TabsList via context. You CAN set it per-trigger to override.
-
-## Changes
-### v0.31.0
-- **Added** `size` prop on TabsList: `sm | md | lg`. Scales height and trigger padding.
-- **Added** `color` prop on TabsList: `accent | neutral`. Affects line variant indicator.
-
-### v0.18.0
-- **Fixed** Wrapped TabsList context provider value in `useMemo` for performance
-
-### v0.14.0
-- **Changed** TabsTrigger: Added `gap-ds-02` (4px) between icon and label for better spacing
-
-### v0.1.0
-- **Added** Initial release
+# Tabs
+
+- Import: @devalok/shilp-sutra/ui/tabs
+- Server-safe: No
+- Category: ui
+
+## Props
+### Tabs (root)
+    defaultValue: string
+    value: string
+    onValueChange: (value: string) => void
+
+### TabsList
+    variant: "line" | "contained"
+
+### TabsTrigger
+    value: string (REQUIRED)
+    variant: (inherits from TabsList)
+
+### TabsContent
+    value: string (REQUIRED)
+
+## Compound Components
+    Tabs (root)
+      TabsList (variant)
+        TabsTrigger (value)
+      TabsContent (value)
+
+## Defaults
+    TabsList variant: "line"
+
+## Example
+```jsx
+<Tabs defaultValue="overview">
+  <TabsList variant="contained">
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="activity">Activity</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview content</TabsContent>
+  <TabsContent value="activity">Activity content</TabsContent>
+</Tabs>
+```
+
+## Gotchas
+- variant goes on TabsList, NOT on individual TabsTrigger (propagates via context)
+- Normally omit `variant` on TabsTrigger — it inherits from TabsList via context. You CAN set it per-trigger to override.
+
+## Changes
+### v0.31.0
+- **Added** `size` prop on TabsList: `sm | md | lg`. Scales height and trigger padding.
+- **Added** `color` prop on TabsList: `accent | neutral`. Affects line variant indicator.
+
+### v0.18.0
+- **Fixed** Wrapped TabsList context provider value in `useMemo` for performance
+
+### v0.14.0
+- **Changed** TabsTrigger: Added `gap-ds-02` (4px) between icon and label for better spacing
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/text.md

@@ -1,37 +1,37 @@
-# Text
-
-- Import: @devalok/shilp-sutra/ui/text
-- Server-safe: Yes
-- Category: ui
-
-## Props
-    variant: TextVariant
-    as: ElementType (override the auto-selected HTML element)
-
-## Types
-    TextVariant = 'heading-2xl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs' | 'label-lg' | 'label-md' | 'label-sm' | 'label-xs' | 'caption' | 'overline'
-
-## Defaults
-    variant: "body-md"
-
-## Default Element Mapping
-    heading-2xl -> h1, heading-xl -> h2, heading-lg -> h3, heading-md -> h4, heading-sm -> h5, heading-xs -> h6
-    body-* -> p, label-* -> span, caption -> span, overline -> span
-
-## Example
-```jsx
-<Text variant="heading-2xl">Page Title</Text>
-<Text variant="body-sm" as="span">Inline text</Text>
-<Text variant="label-sm" className="text-text-secondary">SECTION LABEL</Text>
-```
-
-## Gotchas
-- label-* and overline variants are automatically uppercase
-- Use "as" prop to override the HTML element when needed
-
-## Changes
-### v0.2.0
-- **Fixed** `as` prop widened to accept any `React.ElementType` — `<Text as="h1">` no longer causes TypeScript errors
-
-### v0.1.0
-- **Added** Initial release
+# Text
+
+- Import: @devalok/shilp-sutra/ui/text
+- Server-safe: Yes
+- Category: ui
+
+## Props
+    variant: TextVariant
+    as: ElementType (override the auto-selected HTML element)
+
+## Types
+    TextVariant = 'heading-2xl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs' | 'label-lg' | 'label-md' | 'label-sm' | 'label-xs' | 'caption' | 'overline'
+
+## Defaults
+    variant: "body-md"
+
+## Default Element Mapping
+    heading-2xl -> h1, heading-xl -> h2, heading-lg -> h3, heading-md -> h4, heading-sm -> h5, heading-xs -> h6
+    body-* -> p, label-* -> span, caption -> span, overline -> span
+
+## Example
+```jsx
+<Text variant="heading-2xl">Page Title</Text>
+<Text variant="body-sm" as="span">Inline text</Text>
+<Text variant="label-sm" className="text-text-secondary">SECTION LABEL</Text>
+```
+
+## Gotchas
+- label-* and overline variants are automatically uppercase
+- Use "as" prop to override the HTML element when needed
+
+## Changes
+### v0.2.0
+- **Fixed** `as` prop widened to accept any `React.ElementType` — `<Text as="h1">` no longer causes TypeScript errors
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/textarea.md

@@ -1,39 +1,39 @@
-# Textarea
-
-- Import: @devalok/shilp-sutra/ui/textarea
-- Server-safe: No
-- Category: ui
-
-## Props
-    size: "sm" | "md" | "lg"
-    state: "default" | "error" | "warning" | "success"
-    (plus standard textarea attributes except native "size")
-
-## Defaults
-    size: "md"
-
-## Example
-```jsx
-<Textarea size="lg" state="error" placeholder="Describe the issue..." />
-```
-
-## Gotchas
-- state="error" sets aria-invalid automatically; all sizes are vertically resizable
-- Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
-
-## Changes
-### v0.15.0
-- **Changed** `lg` size font changed from `text-ds-lg` (18px) to `text-ds-md` (14px) — all input sizes now use 14px for consistency
-- **Changed** `md` size font standardized to `text-ds-md` (14px)
-
-### v0.8.0
-- **Fixed** Now consumes FormField context automatically (`aria-describedby`, `aria-invalid`, `aria-required`)
-
-### v0.4.2
-- **Added** `textareaVariants` export
-
-### v0.1.1
-- **Fixed** Added `aria-invalid` for error state (matching Input pattern)
-
-### v0.1.0
-- **Added** Initial release
+# Textarea
+
+- Import: @devalok/shilp-sutra/ui/textarea
+- Server-safe: No
+- Category: ui
+
+## Props
+    size: "sm" | "md" | "lg"
+    state: "default" | "error" | "warning" | "success"
+    (plus standard textarea attributes except native "size")
+
+## Defaults
+    size: "md"
+
+## Example
+```jsx
+<Textarea size="lg" state="error" placeholder="Describe the issue..." />
+```
+
+## Gotchas
+- state="error" sets aria-invalid automatically; all sizes are vertically resizable
+- Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
+
+## Changes
+### v0.15.0
+- **Changed** `lg` size font changed from `text-ds-lg` (18px) to `text-ds-md` (14px) — all input sizes now use 14px for consistency
+- **Changed** `md` size font standardized to `text-ds-md` (14px)
+
+### v0.8.0
+- **Fixed** Now consumes FormField context automatically (`aria-describedby`, `aria-invalid`, `aria-required`)
+
+### v0.4.2
+- **Added** `textareaVariants` export
+
+### v0.1.1
+- **Fixed** Added `aria-invalid` for error state (matching Input pattern)
+
+### v0.1.0
+- **Added** Initial release