@devalok/shilp-sutra 0.34.0 → 0.36.0

package/docs/components/ui/form.md

@@ -1,51 +1,51 @@
-# FormField / FormHelperText / useFormField
-
-- Import: @devalok/shilp-sutra/ui/form
-- Server-safe: No
-- Category: ui
-
-## Props
-### FormField
-    state: "helper" | "error" | "warning" | "success" (default: "helper")
-    helperTextId: string (auto-generated if omitted)
-    required: boolean
-
-### FormHelperText
-    state: "helper" | "error" | "warning" | "success" (inherits from FormField context)
-
-## Types
-    FormHelperState = 'helper' | 'error' | 'warning' | 'success'
-
-## Hook
-    useFormField() => { state, helperTextId, required }
-
-## Defaults
-    state: "helper"
-
-## Example
-```jsx
-<FormField state="error">
-  <Label htmlFor="email">Email</Label>
-  <Input id="email" state="error" />
-  <FormHelperText>Please enter a valid email.</FormHelperText>
-</FormField>
-```
-
-## Gotchas
-- getFormFieldA11y() was REMOVED — use useFormField() hook instead
-- FormHelperText auto-reads state and id from FormField context
-- FormHelperText renders role="alert" when state="error"
-
-## Changes
-### v0.18.0
-- **Fixed** Wrapped FormField context provider value in `useMemo` for performance
-
-### v0.8.0
-- **Fixed** Input/Textarea now consume FormField context automatically (`aria-describedby`, `aria-invalid`, `aria-required`)
-
-### v0.3.0
-- **Added** `useFormField()` hook for automatic aria-describedby wiring
-- **Changed** (BREAKING) FormField auto-wires `aria-describedby` via context. `getFormFieldA11y()` removed
-
-### v0.1.0
-- **Added** Initial release
+# FormField / FormHelperText / useFormField
+
+- Import: @devalok/shilp-sutra/ui/form
+- Server-safe: No
+- Category: ui
+
+## Props
+### FormField
+    state: "helper" | "error" | "warning" | "success" (default: "helper")
+    helperTextId: string (auto-generated if omitted)
+    required: boolean
+
+### FormHelperText
+    state: "helper" | "error" | "warning" | "success" (inherits from FormField context)
+
+## Types
+    FormHelperState = 'helper' | 'error' | 'warning' | 'success'
+
+## Hook
+    useFormField() => { state, helperTextId, required }
+
+## Defaults
+    state: "helper"
+
+## Example
+```jsx
+<FormField state="error">
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" state="error" />
+  <FormHelperText>Please enter a valid email.</FormHelperText>
+</FormField>
+```
+
+## Gotchas
+- getFormFieldA11y() was REMOVED — use useFormField() hook instead
+- FormHelperText auto-reads state and id from FormField context
+- FormHelperText renders role="alert" when state="error"
+
+## Changes
+### v0.18.0
+- **Fixed** Wrapped FormField context provider value in `useMemo` for performance
+
+### v0.8.0
+- **Fixed** Input/Textarea now consume FormField context automatically (`aria-describedby`, `aria-invalid`, `aria-required`)
+
+### v0.3.0
+- **Added** `useFormField()` hook for automatic aria-describedby wiring
+- **Changed** (BREAKING) FormField auto-wires `aria-describedby` via context. `getFormFieldA11y()` removed
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/hover-card.md

@@ -1,32 +1,32 @@
-# HoverCard
-
-- Import: @devalok/shilp-sutra/ui/hover-card
-- Server-safe: No
-- Category: ui
-
-## Compound Components
-    HoverCard (root)
-      HoverCardTrigger
-      HoverCardContent
-
-## Example
-```jsx
-<HoverCard>
-  <HoverCardTrigger asChild><span>Hover me</span></HoverCardTrigger>
-  <HoverCardContent>Preview content</HoverCardContent>
-</HoverCard>
-```
-
-## Gotchas
-- Overlay component — uses Framer Motion for enter/exit animations (v0.18.0)
-
-## Changes
-### v0.18.0
-- **Changed** Migrated to Framer Motion for enter/exit animations
-- **Added** `HoverCardContentProps` type export
-
-### v0.14.0
-- **Changed** z-index promoted from `z-dropdown` (1000) to `z-popover` (1400) — fixes content rendering behind Sheet/Dialog overlays
-
-### v0.1.0
-- **Added** Initial release
+# HoverCard
+
+- Import: @devalok/shilp-sutra/ui/hover-card
+- Server-safe: No
+- Category: ui
+
+## Compound Components
+    HoverCard (root)
+      HoverCardTrigger
+      HoverCardContent
+
+## Example
+```jsx
+<HoverCard>
+  <HoverCardTrigger asChild><span>Hover me</span></HoverCardTrigger>
+  <HoverCardContent>Preview content</HoverCardContent>
+</HoverCard>
+```
+
+## Gotchas
+- Overlay component — uses Framer Motion for enter/exit animations (v0.18.0)
+
+## Changes
+### v0.18.0
+- **Changed** Migrated to Framer Motion for enter/exit animations
+- **Added** `HoverCardContentProps` type export
+
+### v0.14.0
+- **Changed** z-index promoted from `z-dropdown` (1000) to `z-popover` (1400) — fixes content rendering behind Sheet/Dialog overlays
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/icon-button.md

@@ -1,40 +1,40 @@
-# IconButton
-
-- Import: @devalok/shilp-sutra/ui/icon-button
-- Server-safe: No
-- Category: ui
-
-## Props
-    icon: ReactElement (REQUIRED — use <Icon icon={...} />)
-    aria-label: string (REQUIRED — WCAG AA mandatory)
-    shape: "square" | "circle"
-    size: "sm" | "md" | "lg"
-    variant: same as Button (solid, soft, outline, ghost, link)
-    color: same as Button (accent, error, success, warning, neutral)
-    loading: boolean
-    disabled: boolean
-
-## Defaults
-    shape: "square"
-    size: "md"
-
-## Example
-```jsx
-<IconButton icon={<Icon icon={IconEdit} />} variant="ghost" aria-label="Edit item" />
-<IconButton icon={<Icon icon={IconX} />} shape="circle" variant="ghost" size="sm" aria-label="Close" />
-<IconButton icon={<Icon icon={IconTrash} />} variant="solid" color="error" aria-label="Delete" />
-```
-
-## Gotchas
-- aria-label is enforced by TypeScript — you MUST provide it
-- Prefer IconButton over Button with size="icon-*" for icon-only buttons
-- `icon` prop should use `<Icon icon={...} />` wrapper (auto-sized via Button's IconProvider)
-
-## Changes
-### v0.29.0
-- **Changed** `icon` prop now expects `<Icon icon={...} />` wrapper (auto-sized via Button's IconProvider context)
-- **Changed** Inherits all new Button v2 colors: `accent`, `error`, `success`, `warning`, `neutral` (was `default`/`error` only)
-- **Changed** Inherits Button v2 variants including new `soft` variant
-
-### v0.1.0
-- **Added** Initial release
+# IconButton
+
+- Import: @devalok/shilp-sutra/ui/icon-button
+- Server-safe: No
+- Category: ui
+
+## Props
+    icon: ReactElement (REQUIRED — use <Icon icon={...} />)
+    aria-label: string (REQUIRED — WCAG AA mandatory)
+    shape: "square" | "circle"
+    size: "sm" | "md" | "lg"
+    variant: same as Button (solid, soft, outline, ghost, link)
+    color: same as Button (accent, error, success, warning, neutral)
+    loading: boolean
+    disabled: boolean
+
+## Defaults
+    shape: "square"
+    size: "md"
+
+## Example
+```jsx
+<IconButton icon={<Icon icon={IconEdit} />} variant="ghost" aria-label="Edit item" />
+<IconButton icon={<Icon icon={IconX} />} shape="circle" variant="ghost" size="sm" aria-label="Close" />
+<IconButton icon={<Icon icon={IconTrash} />} variant="solid" color="error" aria-label="Delete" />
+```
+
+## Gotchas
+- aria-label is enforced by TypeScript — you MUST provide it
+- Prefer IconButton over Button with size="icon-*" for icon-only buttons
+- `icon` prop should use `<Icon icon={...} />` wrapper (auto-sized via Button's IconProvider)
+
+## Changes
+### v0.29.0
+- **Changed** `icon` prop now expects `<Icon icon={...} />` wrapper (auto-sized via Button's IconProvider context)
+- **Changed** Inherits all new Button v2 colors: `accent`, `error`, `success`, `warning`, `neutral` (was `default`/`error` only)
+- **Changed** Inherits Button v2 variants including new `soft` variant
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/input-otp.md

@@ -1,44 +1,44 @@
-# InputOTP
-
-- Import: @devalok/shilp-sutra/ui/input-otp
-- Server-safe: No
-- Category: ui
-
-## Props
-    Standard input-otp props (maxLength, pattern, etc.)
-
-## Compound Components
-    InputOTP (root)
-      InputOTPGroup
-        InputOTPSlot (index: number, REQUIRED)
-      InputOTPSeparator
-
-## Example
-```jsx
-<InputOTP maxLength={6}>
-  <InputOTPGroup>
-    <InputOTPSlot index={0} />
-    <InputOTPSlot index={1} />
-    <InputOTPSlot index={2} />
-  </InputOTPGroup>
-  <InputOTPSeparator />
-  <InputOTPGroup>
-    <InputOTPSlot index={3} />
-    <InputOTPSlot index={4} />
-    <InputOTPSlot index={5} />
-  </InputOTPGroup>
-</InputOTP>
-```
-
-## Gotchas
-- Each InputOTPSlot requires an `index` prop (0-based)
-
-## Changes
-### v0.18.0
-- **Added** `InputOTPProps` type export
-
-### v0.1.1
-- **Fixed** `animate-caret-blink` keyframe added to Tailwind preset — caret animation was silently broken
-
-### v0.1.0
-- **Added** Initial release
+# InputOTP
+
+- Import: @devalok/shilp-sutra/ui/input-otp
+- Server-safe: No
+- Category: ui
+
+## Props
+    Standard input-otp props (maxLength, pattern, etc.)
+
+## Compound Components
+    InputOTP (root)
+      InputOTPGroup
+        InputOTPSlot (index: number, REQUIRED)
+      InputOTPSeparator
+
+## Example
+```jsx
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+## Gotchas
+- Each InputOTPSlot requires an `index` prop (0-based)
+
+## Changes
+### v0.18.0
+- **Added** `InputOTPProps` type export
+
+### v0.1.1
+- **Fixed** `animate-caret-blink` keyframe added to Tailwind preset — caret animation was silently broken
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/input.md

@@ -1,74 +1,74 @@
-# Input
-
-- Import: @devalok/shilp-sutra/ui/input
-- Server-safe: No
-- Category: ui
-
-## Props
-    size: "xs" | "sm" | "md" | "lg"
-    state: InputState
-    startSection: ReactNode (icon or content in the leading slot)
-    endSection: ReactNode (icon or content in the trailing slot)
-    startSectionClickable: boolean (enables pointer events on start section)
-    endSectionClickable: boolean (enables pointer events on end section)
-    startSectionType: 'icon' | 'label' (section display type — auto-inferred from content)
-    endSectionType: 'icon' | 'label' (section display type — auto-inferred from content)
-    wrapperClassName: string (classes for the wrapper div — border, bg, ring)
-    startIcon: ReactNode (@deprecated — use startSection)
-    endIcon: ReactNode (@deprecated — use endSection)
-    (plus all standard HTML input attributes except native "size")
-
-## Types
-    InputState = 'default' | 'error' | 'warning' | 'success'
-
-## Defaults
-    size: "md"
-
-## Example
-```jsx
-<Input type="email" placeholder="you@example.com" state="error" startSection={<Icon icon={IconMail} />} />
-<Input size="xs" placeholder="Quick search" startSection={<Icon icon={IconSearch} />} />
-<Input startSection="https://" startSectionType="label" placeholder="example.com" />
-<Input endSection=".00" endSectionType="label" startSection={<Icon icon={IconCurrencyDollar} />} placeholder="0" />
-```
-
-## Gotchas
-- HTML native "size" attribute is excluded — use CSS width instead
-- state="error" sets aria-invalid automatically
-- Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
-- `className` targets the `<input>` element; use `wrapperClassName` for border/bg/ring overrides
-- Focus ring is on the wrapper container (focus-within), not the input itself
-- Icons in startSection/endSection are auto-sized via IconProvider per input size
-- Sections are `pointer-events-none` by default — set `startSectionClickable`/`endSectionClickable` for interactive sections
-- Section type is auto-inferred: strings default to `'label'` (tinted bg + border), React elements default to `'icon'` (fixed-width centered). Override with `startSectionType`/`endSectionType`.
-
-## Changes
-### v0.29.0
-- **Changed** v2 rewrite: container-first architecture with wrapper div holding focus ring
-- **Added** `xs` size (28px height)
-- **Added** `startSection` / `endSection` props replacing `startIcon` / `endIcon` (deprecated but still work)
-- **Added** `startSectionClickable` / `endSectionClickable` props for interactive sections
-- **Added** `wrapperClassName` prop for styling the wrapper div (border, bg, ring)
-- **Changed** Focus ring now on wrapper via `focus-within` (container-level ring, not input-level)
-- **Changed** Icons auto-sized via `IconProvider` context per input size
-- **Deprecated** `startIcon` / `endIcon` — use `startSection` / `endSection`
-- **Added** `startSectionType` / `endSectionType` props — `'icon'` (fixed-width centered cell) or `'label'` (tinted background with border separator). Auto-inferred from content type (strings → label, React elements → icon).
-- **Changed** Sections use flexbox layout for consistent alignment
-- **Deprecated** `inputVariants` export — use `inputWrapperVariants` (semantics changed to target wrapper)
-
-### 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) from mixed values
-
-### v0.12.0
-- **Changed** Softer resting border (`border-border-subtle` instead of `border-border`), subtler focus ring (`ring-1 ring-focus/50` instead of `ring-2 ring-focus`)
-- **Changed** Reverted split `pl-*/pr-*` size variants back to `px-*`; icon padding uses `pl-ds-07`/`pr-ds-07`
-
-### v0.8.0
-- **Fixed** Now consumes FormField context automatically (`aria-describedby`, `aria-invalid`, `aria-required`)
-
-### v0.4.2
-- **Added** `inputVariants` export
-
-### v0.1.0
-- **Added** Initial release
+# Input
+
+- Import: @devalok/shilp-sutra/ui/input
+- Server-safe: No
+- Category: ui
+
+## Props
+    size: "xs" | "sm" | "md" | "lg"
+    state: InputState
+    startSection: ReactNode (icon or content in the leading slot)
+    endSection: ReactNode (icon or content in the trailing slot)
+    startSectionClickable: boolean (enables pointer events on start section)
+    endSectionClickable: boolean (enables pointer events on end section)
+    startSectionType: 'icon' | 'label' (section display type — auto-inferred from content)
+    endSectionType: 'icon' | 'label' (section display type — auto-inferred from content)
+    wrapperClassName: string (classes for the wrapper div — border, bg, ring)
+    startIcon: ReactNode (@deprecated — use startSection)
+    endIcon: ReactNode (@deprecated — use endSection)
+    (plus all standard HTML input attributes except native "size")
+
+## Types
+    InputState = 'default' | 'error' | 'warning' | 'success'
+
+## Defaults
+    size: "md"
+
+## Example
+```jsx
+<Input type="email" placeholder="you@example.com" state="error" startSection={<Icon icon={IconMail} />} />
+<Input size="xs" placeholder="Quick search" startSection={<Icon icon={IconSearch} />} />
+<Input startSection="https://" startSectionType="label" placeholder="example.com" />
+<Input endSection=".00" endSectionType="label" startSection={<Icon icon={IconCurrencyDollar} />} placeholder="0" />
+```
+
+## Gotchas
+- HTML native "size" attribute is excluded — use CSS width instead
+- state="error" sets aria-invalid automatically
+- Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
+- `className` targets the `<input>` element; use `wrapperClassName` for border/bg/ring overrides
+- Focus ring is on the wrapper container (focus-within), not the input itself
+- Icons in startSection/endSection are auto-sized via IconProvider per input size
+- Sections are `pointer-events-none` by default — set `startSectionClickable`/`endSectionClickable` for interactive sections
+- Section type is auto-inferred: strings default to `'label'` (tinted bg + border), React elements default to `'icon'` (fixed-width centered). Override with `startSectionType`/`endSectionType`.
+
+## Changes
+### v0.29.0
+- **Changed** v2 rewrite: container-first architecture with wrapper div holding focus ring
+- **Added** `xs` size (28px height)
+- **Added** `startSection` / `endSection` props replacing `startIcon` / `endIcon` (deprecated but still work)
+- **Added** `startSectionClickable` / `endSectionClickable` props for interactive sections
+- **Added** `wrapperClassName` prop for styling the wrapper div (border, bg, ring)
+- **Changed** Focus ring now on wrapper via `focus-within` (container-level ring, not input-level)
+- **Changed** Icons auto-sized via `IconProvider` context per input size
+- **Deprecated** `startIcon` / `endIcon` — use `startSection` / `endSection`
+- **Added** `startSectionType` / `endSectionType` props — `'icon'` (fixed-width centered cell) or `'label'` (tinted background with border separator). Auto-inferred from content type (strings → label, React elements → icon).
+- **Changed** Sections use flexbox layout for consistent alignment
+- **Deprecated** `inputVariants` export — use `inputWrapperVariants` (semantics changed to target wrapper)
+
+### 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) from mixed values
+
+### v0.12.0
+- **Changed** Softer resting border (`border-border-subtle` instead of `border-border`), subtler focus ring (`ring-1 ring-focus/50` instead of `ring-2 ring-focus`)
+- **Changed** Reverted split `pl-*/pr-*` size variants back to `px-*`; icon padding uses `pl-ds-07`/`pr-ds-07`
+
+### v0.8.0
+- **Fixed** Now consumes FormField context automatically (`aria-describedby`, `aria-invalid`, `aria-required`)
+
+### v0.4.2
+- **Added** `inputVariants` export
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/label.md

@@ -1,25 +1,25 @@
-# Label
-
-- Import: @devalok/shilp-sutra/ui/label
-- Server-safe: No
-- Category: ui
-
-## Props
-    required: boolean (shows red asterisk)
-    htmlFor: string
-    (plus standard Radix Label props)
-
-## Example
-```jsx
-<Label htmlFor="email" required>Email Address</Label>
-```
-
-## Gotchas
-- Use with FormField for automatic aria wiring
-
-## Changes
-### v0.2.0
-- **Fixed** Children rendering verified and covered by tests — issue was caused by `@primitives` type leak, not a runtime bug
-
-### v0.1.0
-- **Added** Initial release
+# Label
+
+- Import: @devalok/shilp-sutra/ui/label
+- Server-safe: No
+- Category: ui
+
+## Props
+    required: boolean (shows red asterisk)
+    htmlFor: string
+    (plus standard Radix Label props)
+
+## Example
+```jsx
+<Label htmlFor="email" required>Email Address</Label>
+```
+
+## Gotchas
+- Use with FormField for automatic aria wiring
+
+## Changes
+### v0.2.0
+- **Fixed** Children rendering verified and covered by tests — issue was caused by `@primitives` type leak, not a runtime bug
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/ui/link.md

@@ -1,29 +1,29 @@
-# Link
-
-- Import: @devalok/shilp-sutra/ui/link
-- Server-safe: No
-- Category: ui
-
-## Props
-    inline: boolean (default: true — "inline" or "block" display)
-    asChild: boolean (merge with child element, e.g. Next.js Link)
-    (plus standard anchor attributes)
-
-## Defaults
-    inline: true
-
-## Example
-```jsx
-<Link href="/docs">Documentation</Link>
-<Link asChild><NextLink href="/about">About</NextLink></Link>
-```
-
-## Gotchas
-- Use asChild with framework-specific Link components (e.g. Next.js Link)
-
-## Changes
-### v0.18.0
-- **Fixed** Color tokens — `text-info-9` changed to `text-accent-11` (links are interactive = accent scale)
-
-### v0.1.0
-- **Added** Initial release
+# Link
+
+- Import: @devalok/shilp-sutra/ui/link
+- Server-safe: No
+- Category: ui
+
+## Props
+    inline: boolean (default: true — "inline" or "block" display)
+    asChild: boolean (merge with child element, e.g. Next.js Link)
+    (plus standard anchor attributes)
+
+## Defaults
+    inline: true
+
+## Example
+```jsx
+<Link href="/docs">Documentation</Link>
+<Link asChild><NextLink href="/about">About</NextLink></Link>
+```
+
+## Gotchas
+- Use asChild with framework-specific Link components (e.g. Next.js Link)
+
+## Changes
+### v0.18.0
+- **Fixed** Color tokens — `text-info-9` changed to `text-accent-11` (links are interactive = accent scale)
+
+### v0.1.0
+- **Added** Initial release