@devalok/shilp-sutra 0.34.0 → 0.36.0

package/docs/components/ui/button.md

@@ -1,93 +1,94 @@
-# Button
-
-- Import: @devalok/shilp-sutra/ui/button
-- Server-safe: No
-- Category: ui
-
-## Props
-    variant: "solid" | "soft" | "outline" | "ghost" | "link" | "default" (alias->solid) | "destructive" (alias->solid+error)
-    color: "accent" | "error" | "success" | "warning" | "neutral" | "default" (alias->accent)
-    size: "xs" | "sm" | "md" | "lg" | "compact-xs" | "compact-sm" | "compact-md" | "icon" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg"
-    weight: "semibold" | "normal"
-    shape: "default" | "pill"
-    startIcon: ReactElement (use <Icon icon={...} />) | null
-    endIcon: ReactElement (use <Icon icon={...} />) | null
-    loading: boolean (disables button, shows spinner)
-    loadingPosition: "start" | "end" | "center" (default: "start")
-    fullWidth: boolean
-    asChild: boolean
-    processing: boolean | 'ambient' | 'working' | 'urgent' (marching ants SVG border)
-    processingColor: 'accent' | 'error' | 'success' | 'warning' | 'neutral' (override animation color)
-    processingDisabled: boolean (disable button during processing, default: true)
-    onClickAsync: (e: MouseEvent) => Promise<void> (auto loading->success/error->idle, auto-activates processing)
-    asyncFeedbackDuration: number (ms, default 1500)
-
-## Defaults
-    variant="solid", color="accent", weight="semibold", size="md", shape="default"
-
-## Example
-```jsx
-<Button variant="solid" color="error" startIcon={<Icon icon={IconTrash} />} loading={isDeleting}>
-  Delete project
-</Button>
-<Button variant="soft" color="success" startIcon={<Icon icon={IconCheck} />}>Approved</Button>
-<Button variant="soft" color="warning" size="compact-sm" shape="pill">Overdue</Button>
-```
-
-## Gotchas
-- DO NOT use variant="destructive" — use variant="solid" color="error"
-- DO NOT use variant="secondary" — use variant="outline" or variant="ghost"
-- DO NOT use size="default" — use size="md"
-- DO NOT use color="danger" or color="default" — use color="error" or color="accent"
-- startIcon/endIcon now expect `<Icon icon={...} />` wrapper, not bare icon components
-- Inherits variant/color/size/weight/shape from ButtonGroup context if present
-- onClickAsync overrides onClick and loading when active; also auto-activates processing='working' during loading phase
-- processing forces soft variant so marching ants pop against the background
-- processingDisabled=true (default) makes button aria-disabled and pointer-events-none during processing
-- Grain children (DevalokGrain) are auto-separated and rendered as direct button children for absolute positioning
-
-## Changes
-### v0.33.0
-- **Added** `disabled` inherited from ButtonGroup context
-- **Added** Position-aware border-radius when inside an attached ButtonGroup (compound component pattern)
-
-### v0.29.0
-- **Added** `soft` variant — tinted background, colored text (new middle ground between solid and ghost)
-- **Added** 5 color options: `accent` (default), `error`, `success`, `warning`, `neutral` (replaces old `default`/`error`-only axis)
-- **Added** `shape` prop: `"default"` | `"pill"` (rounded-full with extra horizontal padding)
-- **Added** compact sizes: `compact-xs`, `compact-sm`, `compact-md` (height-less inline buttons)
-- **Added** `xs` size and `icon-xs` size
-- **Added** `weight` prop: `"semibold"` (default) | `"normal"` for lighter labels
-- **Changed** `startIcon`/`endIcon` now accept `<Icon icon={...} />` wrapper (auto-sized via IconProvider context per button size)
-- **Changed** Default color is now `"accent"` (was `"default"`)
-- **Changed** Solid hover adds tinted shadows per color (e.g., `hover:shadow-brand`, `hover:shadow-error`)
-- **Changed** Icon slots get negative-margin inset to tighten padding against button edges
-- **Added** DevalokGrain support — grain children are auto-separated and rendered for texture overlays
-- **Added** `processing` prop — marching ants SVG border while content stays visible (`"ambient"` (3s) | `"working"` (2s) | `"urgent"` (1s) | boolean). Forces soft variant so ants pop.
-- **Added** `processingColor` — override processing animation color independently of button color
-- **Added** `processingDisabled` — disable button during processing (default: true). Set false for cancel-by-click patterns.
-- **Added** Auto-processing during `onClickAsync` — loading phase auto-activates `processing='working'` when no explicit `processing` prop is set
-- **Added** Always-on layout animation — smooth width/height transitions via Framer Motion FLIP
-
-### v0.22.0
-- **Changed** Active/pressed scale from `0.97` to `0.95` for snappier press feedback.
-- **Fixed** Ghost/outline hover not fading — `transition-transform` in base overrode `transition-colors` from variant. Combined into single `transition-[color,background-color,border-color,box-shadow,transform]`.
-- **Added** `disabled:cursor-not-allowed` to button base (was missing).
-
-### v0.18.0
-- **Added** `onClickAsync` prop — promise-driven loading -> success/error state machine
-- **Added** `asyncFeedbackDuration` prop (default 1500ms)
-- **Changed** whileTap scale animation added via Framer Motion
-- **Fixed** Async feedback colors — `bg-success text-text-on-color` changed to `bg-success-9 text-accent-fg`
-- **Fixed** `onClickAsync` added `isMountedRef` guard to prevent set-state-after-unmount
-
-### v0.4.2
-- **Fixed** `Omit<HTMLAttributes, 'color'>` resolves TS2320 conflict with CVA color prop
-- **Fixed** `className` was passed inside `buttonVariants()` (silently dropped by CVA) — now separate `cn()` argument
-
-### v0.3.0
-- **Changed** (BREAKING) `variant="primary"` renamed to `variant="solid"`, `variant="secondary"` renamed to `variant="outline"`, `variant="error"` moved to `color="error"`
-- **Fixed** All dismiss/close buttons now meet WCAG 2.5.8 minimum 24px touch target
-
-### v0.1.0
-- **Added** Initial release
+# Button
+
+- Import: @devalok/shilp-sutra/ui/button
+- Server-safe: No
+- Category: ui
+
+## Props
+    variant: "solid" | "soft" | "outline" | "ghost" | "link"
+    color: "accent" | "error" | "success" | "warning" | "neutral"
+    size: "xs" | "sm" | "md" | "lg" | "compact-xs" | "compact-sm" | "compact-md" | "icon" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg"
+    weight: "semibold" | "normal"
+    shape: "default" | "pill"
+    startIcon: ReactElement (use <Icon icon={...} />) | null
+    endIcon: ReactElement (use <Icon icon={...} />) | null
+    loading: boolean (disables button, shows spinner)
+    loadingPosition: "start" | "end" | "center" (default: "start")
+    fullWidth: boolean
+    asChild: boolean
+    processing: boolean | 'ambient' | 'working' | 'urgent' (marching ants SVG border)
+    processingColor: 'accent' | 'error' | 'success' | 'warning' | 'neutral' (override animation color)
+    processingDisabled: boolean (disable button during processing, default: true)
+    onClickAsync: (e: MouseEvent) => Promise<void> (auto loading->success/error->idle, auto-activates processing)
+    asyncFeedbackDuration: number (ms, default 1500)
+
+## Defaults
+    variant="solid", color="accent", weight="semibold", size="md", shape="default"
+
+## Example
+```jsx
+<Button variant="solid" color="error" startIcon={<Icon icon={IconTrash} />} loading={isDeleting}>
+  Delete project
+</Button>
+<Button variant="soft" color="success" startIcon={<Icon icon={IconCheck} />}>Approved</Button>
+<Button variant="soft" color="warning" size="compact-sm" shape="pill">Overdue</Button>
+```
+
+## Gotchas
+- **Prefer `variant="soft"` over `variant="outline"` for secondary actions.** Soft (tinted step-3 bg, step-11 text) is the Devalok-recommended default — it feels warmer and brand-consistent. Use `outline` only when soft's tint would disappear (on colored/surface-raised bg), in toolbar/icon-dense contexts, or when you need outline's stronger hierarchy next to a primary action.
+- DO NOT use variant="destructive" — use variant="solid" color="error"
+- DO NOT use variant="secondary" — use variant="soft" (preferred) or variant="ghost"
+- DO NOT use size="default" — use size="md"
+- DO NOT use color="danger" or color="default" — use color="error" or color="accent"
+- startIcon/endIcon now expect `<Icon icon={...} />` wrapper, not bare icon components
+- Inherits variant/color/size/weight/shape from ButtonGroup context if present
+- onClickAsync overrides onClick and loading when active; also auto-activates processing='working' during loading phase
+- processing forces soft variant so marching ants pop against the background
+- processingDisabled=true (default) makes button aria-disabled and pointer-events-none during processing
+- Grain children (DevalokGrain) are auto-separated and rendered as direct button children for absolute positioning
+
+## Changes
+### v0.33.0
+- **Added** `disabled` inherited from ButtonGroup context
+- **Added** Position-aware border-radius when inside an attached ButtonGroup (compound component pattern)
+
+### v0.29.0
+- **Added** `soft` variant — tinted background, colored text (new middle ground between solid and ghost)
+- **Added** 5 color options: `accent` (default), `error`, `success`, `warning`, `neutral` (replaces old `default`/`error`-only axis)
+- **Added** `shape` prop: `"default"` | `"pill"` (rounded-full with extra horizontal padding)
+- **Added** compact sizes: `compact-xs`, `compact-sm`, `compact-md` (height-less inline buttons)
+- **Added** `xs` size and `icon-xs` size
+- **Added** `weight` prop: `"semibold"` (default) | `"normal"` for lighter labels
+- **Changed** `startIcon`/`endIcon` now accept `<Icon icon={...} />` wrapper (auto-sized via IconProvider context per button size)
+- **Changed** Default color is now `"accent"` (was `"default"`)
+- **Changed** Solid hover adds tinted shadows per color (e.g., `hover:shadow-brand`, `hover:shadow-error`)
+- **Changed** Icon slots get negative-margin inset to tighten padding against button edges
+- **Added** DevalokGrain support — grain children are auto-separated and rendered for texture overlays
+- **Added** `processing` prop — marching ants SVG border while content stays visible (`"ambient"` (3s) | `"working"` (2s) | `"urgent"` (1s) | boolean). Forces soft variant so ants pop.
+- **Added** `processingColor` — override processing animation color independently of button color
+- **Added** `processingDisabled` — disable button during processing (default: true). Set false for cancel-by-click patterns.
+- **Added** Auto-processing during `onClickAsync` — loading phase auto-activates `processing='working'` when no explicit `processing` prop is set
+- **Added** Always-on layout animation — smooth width/height transitions via Framer Motion FLIP
+
+### v0.22.0
+- **Changed** Active/pressed scale from `0.97` to `0.95` for snappier press feedback.
+- **Fixed** Ghost/outline hover not fading — `transition-transform` in base overrode `transition-colors` from variant. Combined into single `transition-[color,background-color,border-color,box-shadow,transform]`.
+- **Added** `disabled:cursor-not-allowed` to button base (was missing).
+
+### v0.18.0
+- **Added** `onClickAsync` prop — promise-driven loading -> success/error state machine
+- **Added** `asyncFeedbackDuration` prop (default 1500ms)
+- **Changed** whileTap scale animation added via Framer Motion
+- **Fixed** Async feedback colors — `bg-success text-text-on-color` changed to `bg-success-9 text-accent-fg`
+- **Fixed** `onClickAsync` added `isMountedRef` guard to prevent set-state-after-unmount
+
+### v0.4.2
+- **Fixed** `Omit<HTMLAttributes, 'color'>` resolves TS2320 conflict with CVA color prop
+- **Fixed** `className` was passed inside `buttonVariants()` (silently dropped by CVA) — now separate `cn()` argument
+
+### v0.3.0
+- **Changed** (BREAKING) `variant="primary"` renamed to `variant="solid"`, `variant="secondary"` renamed to `variant="outline"`, `variant="error"` moved to `color="error"`
+- **Fixed** All dismiss/close buttons now meet WCAG 2.5.8 minimum 24px touch target
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/card.md

@@ -1,52 +1,52 @@
-# Card
-
-- Import: @devalok/shilp-sutra/ui/card
-- Server-safe: No
-- Category: ui
-
-## Props
-    variant: "default" | "elevated" | "outline" | "flat"
-    interactive: boolean (enables hover shadow lift + pointer cursor)
-
-## Compound Components
-    Card (root)
-      CardHeader
-        CardTitle
-        CardDescription
-      CardContent
-      CardFooter
-
-## Defaults
-    variant="default"
-
-## Example
-```jsx
-<Card variant="elevated" interactive onClick={() => navigate(url)}>
-  <CardHeader>
-    <CardTitle>Project</CardTitle>
-    <CardDescription>Last updated 2h ago</CardDescription>
-  </CardHeader>
-  <CardContent><p>Content here</p></CardContent>
-</Card>
-```
-
-## Gotchas
-- Use `interactive` prop for clickable cards — adds hover lift and pointer cursor
-
-## Changes
-### v0.31.0
-- **Added** `color` prop: semantic border color (accent, error, success, warning, info, neutral)
-- **Added** `size` prop: `sm | md | lg` — padding propagated to sub-components via React context
-
-### v0.18.0
-- **Changed** Interactive card hover lift animation migrated to Framer Motion
-
-### v0.4.2
-- **Changed** (BREAKING) `variant="outlined"` renamed to `variant="outline"`
-- **Added** `cardVariants` export
-
-### v0.1.1
-- **Fixed** `leading-none tracking-tight` changed to `leading-ds-none tracking-ds-tight` for token compliance
-
-### v0.1.0
-- **Added** Initial release
+# Card
+
+- Import: @devalok/shilp-sutra/ui/card
+- Server-safe: No
+- Category: ui
+
+## Props
+    variant: "default" | "elevated" | "outline" | "flat"
+    interactive: boolean (enables hover shadow lift + pointer cursor)
+
+## Compound Components
+    Card (root)
+      CardHeader
+        CardTitle
+        CardDescription
+      CardContent
+      CardFooter
+
+## Defaults
+    variant="default"
+
+## Example
+```jsx
+<Card variant="elevated" interactive onClick={() => navigate(url)}>
+  <CardHeader>
+    <CardTitle>Project</CardTitle>
+    <CardDescription>Last updated 2h ago</CardDescription>
+  </CardHeader>
+  <CardContent><p>Content here</p></CardContent>
+</Card>
+```
+
+## Gotchas
+- Use `interactive` prop for clickable cards — adds hover lift and pointer cursor
+
+## Changes
+### v0.31.0
+- **Added** `color` prop: semantic border color (accent, error, success, warning, info, neutral)
+- **Added** `size` prop: `sm | md | lg` — padding propagated to sub-components via React context
+
+### v0.18.0
+- **Changed** Interactive card hover lift animation migrated to Framer Motion
+
+### v0.4.2
+- **Changed** (BREAKING) `variant="outlined"` renamed to `variant="outline"`
+- **Added** `cardVariants` export
+
+### v0.1.1
+- **Fixed** `leading-none tracking-tight` changed to `leading-ds-none tracking-ds-tight` for token compliance
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/charts.md

@@ -1,43 +1,43 @@
-# Charts
-
-- Import: @devalok/shilp-sutra/ui/charts
-- Server-safe: No
-- Category: ui
-
-## Props
-    Charts is a collection of chart components. Each accepts data-specific props.
-
-    Exported components:
-      ChartContainer — wrapper with responsive sizing
-      BarChart
-      LineChart
-      AreaChart
-      PieChart
-      Sparkline
-      GaugeChart
-      RadarChart
-      Legend — chart legend with LegendItem[]
-
-## Defaults
-    none
-
-## Example
-```jsx
-import { BarChart } from '@devalok/shilp-sutra/ui/charts'
-
-<BarChart data={salesData} />
-```
-
-## Gotchas
-- Barrel-isolated since v0.5.0 — must use `@devalok/shilp-sutra/ui/charts`, NOT the `ui` barrel
-- Requires D3 as an optional peer dependency
-
-## Changes
-### v0.18.0
-- **Changed** All 8 chart types migrated to Framer Motion entrance animations
-
-### v0.5.0
-- **Changed** (BREAKING) All chart components removed from `@devalok/shilp-sutra/ui` barrel export. Must use `@devalok/shilp-sutra/ui/charts` import path.
-
-### v0.1.0
-- **Added** Initial release
+# Charts
+
+- Import: @devalok/shilp-sutra/ui/charts
+- Server-safe: No
+- Category: ui
+
+## Props
+    Charts is a collection of chart components. Each accepts data-specific props.
+
+    Exported components:
+      ChartContainer — wrapper with responsive sizing
+      BarChart
+      LineChart
+      AreaChart
+      PieChart
+      Sparkline
+      GaugeChart
+      RadarChart
+      Legend — chart legend with LegendItem[]
+
+## Defaults
+    none
+
+## Example
+```jsx
+import { BarChart } from '@devalok/shilp-sutra/ui/charts'
+
+<BarChart data={salesData} />
+```
+
+## Gotchas
+- Barrel-isolated since v0.5.0 — must use `@devalok/shilp-sutra/ui/charts`, NOT the `ui` barrel
+- Requires D3 as an optional peer dependency
+
+## Changes
+### v0.18.0
+- **Changed** All 8 chart types migrated to Framer Motion entrance animations
+
+### v0.5.0
+- **Changed** (BREAKING) All chart components removed from `@devalok/shilp-sutra/ui` barrel export. Must use `@devalok/shilp-sutra/ui/charts` import path.
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/checkbox.md

@@ -1,36 +1,36 @@
-# Checkbox
-
-- Import: @devalok/shilp-sutra/ui/checkbox
-- Server-safe: No
-- Category: ui
-
-## Props
-    checked: boolean | "indeterminate"
-    onCheckedChange: (checked: boolean | "indeterminate") => void
-    error: boolean (shows red border)
-    indeterminate: boolean (overrides checked, shows dash icon)
-    disabled: boolean
-
-## Defaults
-    none
-
-## Example
-```jsx
-<Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />
-```
-
-## Gotchas
-- indeterminate overrides checked visually
-
-## Changes
-### v0.22.0
-- **Changed** Check indicator animation from scale-bounce to path-draw (stroke draws progressively). Indeterminate dash also draws in.
-- **Fixed** Uncontrolled checkbox never showed checkmark — `checked` from props was `undefined`, so `isActive` was always `false`. Now tracks internal state.
-- **Added** Hover state on unchecked checkbox (subtle background highlight).
-
-### v0.18.0
-- **Changed** Bouncy check indicator animation migrated to Framer Motion
-- **Fixed** Icon sizing uses design tokens consistently
-
-### v0.1.0
-- **Added** Initial release
+# Checkbox
+
+- Import: @devalok/shilp-sutra/ui/checkbox
+- Server-safe: No
+- Category: ui
+
+## Props
+    checked: boolean | "indeterminate"
+    onCheckedChange: (checked: boolean | "indeterminate") => void
+    error: boolean (shows red border)
+    indeterminate: boolean (overrides checked, shows dash icon)
+    disabled: boolean
+
+## Defaults
+    none
+
+## Example
+```jsx
+<Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />
+```
+
+## Gotchas
+- indeterminate overrides checked visually
+
+## Changes
+### v0.22.0
+- **Changed** Check indicator animation from scale-bounce to path-draw (stroke draws progressively). Indeterminate dash also draws in.
+- **Fixed** Uncontrolled checkbox never showed checkmark — `checked` from props was `undefined`, so `isActive` was always `false`. Now tracks internal state.
+- **Added** Hover state on unchecked checkbox (subtle background highlight).
+
+### v0.18.0
+- **Changed** Bouncy check indicator animation migrated to Framer Motion
+- **Fixed** Icon sizing uses design tokens consistently
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/chip.md

@@ -1,47 +1,47 @@
-# Chip
-
-- Import: @devalok/shilp-sutra/ui/chip
-- Server-safe: No
-- Category: ui
-
-## Props
-    label: string (REQUIRED — use this, NOT children)
-    variant: "subtle" | "outline"
-    color: "default" | "primary" | "success" | "error" | "warning" | "info" | "teal" | "amber" | "slate" | "indigo" | "cyan" | "orange" | "emerald"
-    size: "sm" | "md" | "lg"
-    icon: ReactNode
-    onClick: MouseEventHandler (renders as <button> when provided)
-    onDismiss: () => void (shows X button)
-    disabled: boolean
-
-## Defaults
-    variant="subtle", size="md", color="default"
-
-## Example
-```jsx
-<Chip label="In Progress" color="warning" />
-<Chip label="React" color="info" onDismiss={() => removeFilter('react')} />
-```
-
-## Additional Exports
-    ChipGroup — re-exported AnimatePresence from framer-motion; wrap a list of Chips for coordinated exit animations
-
-## Gotchas
-- MUST use label prop — children are NOT rendered
-- `<Chip>text</Chip>` is WRONG — use `<Chip label="text" />`
-- Wrap dynamic chip lists in `<ChipGroup>` for exit animations
-- `color="primary"` will be renamed to `color="brand"` in v1.0 — use `color="primary"` for now
-
-## Changes
-### v0.19.1
-- **Fixed** `active:scale-95` tap feedback broken by Framer Motion transform override — replaced with `whileTap={{ scale: 0.95 }}`
-
-### v0.4.2
-- **Changed** (BREAKING) `variant="filled"` renamed to `"subtle"`, `variant="outlined"` renamed to `"outline"`, `onDelete` renamed to `onDismiss`
-
-### v0.1.1
-- **Fixed** `opacity-[var(--action-disabled-opacity,0.38)]` replaced with `opacity-action-disabled`
-- **Fixed** Converted from `React.createElement` to JSX syntax
-
-### v0.1.0
-- **Added** Initial release
+# Chip
+
+- Import: @devalok/shilp-sutra/ui/chip
+- Server-safe: No
+- Category: ui
+
+## Props
+    label: string (REQUIRED — use this, NOT children)
+    variant: "subtle" | "outline"
+    color: "default" | "primary" | "success" | "error" | "warning" | "info" | "teal" | "amber" | "slate" | "indigo" | "cyan" | "orange" | "emerald"
+    size: "sm" | "md" | "lg"
+    icon: ReactNode
+    onClick: MouseEventHandler (renders as <button> when provided)
+    onDismiss: () => void (shows X button)
+    disabled: boolean
+
+## Defaults
+    variant="subtle", size="md", color="default"
+
+## Example
+```jsx
+<Chip label="In Progress" color="warning" />
+<Chip label="React" color="info" onDismiss={() => removeFilter('react')} />
+```
+
+## Additional Exports
+    ChipGroup — re-exported AnimatePresence from framer-motion; wrap a list of Chips for coordinated exit animations
+
+## Gotchas
+- MUST use label prop — children are NOT rendered
+- `<Chip>text</Chip>` is WRONG — use `<Chip label="text" />`
+- Wrap dynamic chip lists in `<ChipGroup>` for exit animations
+- `color="primary"` will be renamed to `color="brand"` in v1.0 — use `color="primary"` for now
+
+## Changes
+### v0.19.1
+- **Fixed** `active:scale-95` tap feedback broken by Framer Motion transform override — replaced with `whileTap={{ scale: 0.95 }}`
+
+### v0.4.2
+- **Changed** (BREAKING) `variant="filled"` renamed to `"subtle"`, `variant="outlined"` renamed to `"outline"`, `onDelete` renamed to `onDismiss`
+
+### v0.1.1
+- **Fixed** `opacity-[var(--action-disabled-opacity,0.38)]` replaced with `opacity-action-disabled`
+- **Fixed** Converted from `React.createElement` to JSX syntax
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/code.md

@@ -1,28 +1,28 @@
-# Code
-
-- Import: @devalok/shilp-sutra/ui/code
-- Server-safe: Yes
-- Category: ui
-
-## Props
-    variant: "inline" | "block"
-    children: ReactNode
-
-## Defaults
-    variant="inline"
-
-## Example
-```jsx
-<Code>onClick</Code>
-<Code variant="block">{`const x = 1;\nconsole.log(x);`}</Code>
-```
-
-## Gotchas
-- "block" renders as `<pre><code>`, "inline" renders as `<code>`
-
-## Changes
-### v0.1.1
-- **Fixed** `leading-[150%]` replaced with `leading-ds-relaxed` for token compliance
-
-### v0.1.0
-- **Added** Initial release
+# Code
+
+- Import: @devalok/shilp-sutra/ui/code
+- Server-safe: Yes
+- Category: ui
+
+## Props
+    variant: "inline" | "block"
+    children: ReactNode
+
+## Defaults
+    variant="inline"
+
+## Example
+```jsx
+<Code>onClick</Code>
+<Code variant="block">{`const x = 1;\nconsole.log(x);`}</Code>
+```
+
+## Gotchas
+- "block" renders as `<pre><code>`, "inline" renders as `<code>`
+
+## Changes
+### v0.1.1
+- **Fixed** `leading-[150%]` replaced with `leading-ds-relaxed` for token compliance
+
+### v0.1.0
+- **Added** Initial release