style: format and fix docs

Author: segunadebayo

.claude/docs/development.md

@@ -115,6 +115,7 @@ bun run svelte dev     # Port 6006
 ### Component Development Process
 
 1. **Component Structure Setup:**
+
    ```bash
    packages/{framework}/src/components/{component-name}/
    ├── index.{tsx,ts}                     # Main export file
@@ -132,6 +133,7 @@ bun run svelte dev     # Port 6006
    ```
 
 2. **Anatomy Definition (Required):**
+
    ```ts
    // {component}.anatomy.ts
    import { createAnatomy } from '@zag-js/anatomy'
@@ -155,6 +157,7 @@ bun run svelte dev     # Port 6006
 ### Story File Requirements
 
 **Naming Convention:**
+
 ```ts
 // {component}.stories.{tsx,vue,svelte}
 export default {
@@ -167,6 +170,7 @@ export const WithField = () => ({ ... })
 ```
 
 **Story Categories:**
+
 - **Basic**: Default component usage
 - **Controlled**: External state management
 - **Variants**: Different visual styles
@@ -176,11 +180,13 @@ export const WithField = () => ({ ... })
 ### Example Development Guidelines
 
 **Example Naming Requirements:**
+
 - Use descriptive, consistent names across frameworks
 - Follow existing patterns from similar components
 - Include common scenarios (basic, controlled, disabled, invalid)
 
 **Framework Consistency:**
+
 ```bash
 # All frameworks should have equivalent examples
 packages/react/src/components/field/examples/controlled.tsx
@@ -190,13 +196,15 @@ packages/svelte/src/lib/components/field/examples/controlled.svelte
 ```
 
 **Example Documentation:**
+
 - Update `COMPONENT_EXAMPLES_DIFF.md` when adding examples
 - Include description of what the example demonstrates
 - Note framework-specific implementation details
 
 ### Type System Requirements
 
 **Required Type Exports:**
+
 ```ts
 // Every component part must export both BaseProps and Props
 export interface ComponentRootBaseProps extends UseComponentProps, PolymorphicProps {}
@@ -210,6 +218,7 @@ export type RootEmits = { ... }
 ### Quality Checklist
 
 **Before Component Completion:**
+
 - [ ] Anatomy file created and exported
 - [ ] All component parts have BaseProps and Props types
 - [ ] Context provider implemented
@@ -220,6 +229,7 @@ export type RootEmits = { ... }
 - [ ] `COMPONENT_EXAMPLES_DIFF.md` updated
 
 **Before Release:**
+
 - [ ] All frameworks have equivalent functionality
 - [ ] Examples work identically across frameworks
 - [ ] Types generated for website documentation
@@ -228,7 +238,8 @@ export type RootEmits = { ... }
 
 ## Website Development
 
-The Ark UI documentation website is built with Next.js and uses several key patterns for content management and documentation generation.
+The Ark UI documentation website is built with Next.js and uses several key patterns for content management and
+documentation generation.
 
 ### Website Structure
 
@@ -424,4 +435,4 @@ bun run web build
 
 # Generate content (Velite)
 bun run web prepare
-```
+```

.claude/docs/documentation-patterns.md

@@ -55,11 +55,13 @@ Non-interactive guides with code snippets.
 ### Examples vs Guides
 
 **Examples Section** - Interactive demos with `<Example id="..." />`:
+
 - Show component behavior through working demos
 - Framework-agnostic (shown for all frameworks via tabs)
 - Each example has a brief description
 
 **Guides Section** - Non-interactive implementation guidance:
+
 - CSS styling patterns and animations
 - Integration guides (Next.js, Remix, router setup)
 - Advanced configuration and type safety patterns
@@ -119,11 +121,7 @@ To create a controlled component, manage the state using the `value` and `onValu
 
 The following CSS variables are exposed to the `Component.Positioner`:
 
-\`\`\`css
---reference-width: <pixel-value>;
---available-width: <pixel-value>;
---available-height: <pixel-value>;
-\`\`\`
+\`\`\`css --reference-width: <pixel-value>; --available-width: <pixel-value>; --available-height: <pixel-value>; \`\`\`
 ```
 
 ### CSS Animations
@@ -133,11 +131,7 @@ The following CSS variables are exposed to the `Component.Positioner`:
 
 Use the `--height` CSS variable to animate content:
 
-\`\`\`css
-@keyframes slideDown {
-  to { height: var(--height); }
-}
-\`\`\`
+\`\`\`css @keyframes slideDown { to { height: var(--height); } } \`\`\`
 ```
 
 ### Framework Integration
@@ -147,11 +141,7 @@ Use the `--height` CSS variable to animate content:
 
 Here's an example using `next/image`:
 
-\`\`\`tsx
-import { Component } from '@ark-ui/react/component'
-import { getImageProps } from 'next/image'
-// ...
-\`\`\`
+\`\`\`tsx import { Component } from '@ark-ui/react/component' import { getImageProps } from 'next/image' // ... \`\`\`
 ```
 
 ### Router Integration
@@ -164,9 +154,7 @@ Control active state based on URL:
 - Set `value` prop to current URL path
 - Listen to `onValueChange` and update URL
 
-\`\`\`tsx
-// Remix Router example
-\`\`\`
+\`\`\`tsx // Remix Router example \`\`\`
 ```
 
 ## Formatting
@@ -176,13 +164,9 @@ Control active state based on URL:
 Specify language for syntax highlighting:
 
 ```markdown
-\`\`\`tsx
-// TypeScript code
-\`\`\`
+\`\`\`tsx // TypeScript code \`\`\`
 
-\`\`\`css
-/* CSS code */
-\`\`\`
+\`\`\`css /_ CSS code _/ \`\`\`
 ```
 
 ### Notes and Warnings
@@ -225,17 +209,13 @@ Use kebab-case, descriptive IDs:
 
 ## Common Mistakes
 
-❌ Don't include CSS examples in Examples section
-✅ Move CSS examples to Guides
+❌ Don't include CSS examples in Examples section ✅ Move CSS examples to Guides
 
-❌ Don't include router integration in Examples
-✅ Move integration guides to Guides
+❌ Don't include router integration in Examples ✅ Move integration guides to Guides
 
-❌ Don't write generic descriptions
-✅ Write specific descriptions explaining props/features
+❌ Don't write generic descriptions ✅ Write specific descriptions explaining props/features
 
-❌ Don't use code blocks without `<Example>` tags in Examples
-✅ Use `<Example>` tags or move to Guides
+❌ Don't use code blocks without `<Example>` tags in Examples ✅ Use `<Example>` tags or move to Guides
 
 ## Adding to Showcase
 
@@ -246,6 +226,7 @@ Add projects/design systems built with Ark UI to `website/src/content/showcases.
    - Or capture screenshot with Playwright using `networkidle` and `viewport: { width: 1200, height: 630 }`
 
 2. **Add entry** to `showcases.json`:
+
    ```json
    {
      "title": "Project Name",

.claude/docs/framework_patterns.md

@@ -12,7 +12,7 @@ When using icons from Lucide in examples, follow these framework-specific import
 import { XIcon } from 'lucide-react'
 
 // Usage
-<TagsInput.ItemDeleteTrigger>
+;<TagsInput.ItemDeleteTrigger>
   <XIcon />
 </TagsInput.ItemDeleteTrigger>
 ```
@@ -23,7 +23,7 @@ import { XIcon } from 'lucide-react'
 import { XIcon } from 'lucide-solid'
 
 // Usage
-<TagsInput.ItemDeleteTrigger>
+;<TagsInput.ItemDeleteTrigger>
   <XIcon />
 </TagsInput.ItemDeleteTrigger>
 ```
@@ -55,6 +55,7 @@ import { XIcon } from 'lucide-vue-next'
 ```
 
 **Icon Naming Convention:**
+
 - Always import icons with the `Icon` suffix (e.g., `XIcon`, `CheckIcon`, `ChevronDownIcon`)
 - Use the full icon name directly from Lucide (don't rename with `as`)
 - This maintains consistency across all framework examples
@@ -97,15 +98,18 @@ Solid.js uses the `<Show>` component for conditional rendering instead of boolea
 import { Show } from 'solid-js'
 
 // Preferred: Use Show component
-<Show when={isVisible()}>
+;<Show when={isVisible()}>
   <div>Content to show conditionally</div>
 </Show>
 
 // Avoid: Boolean expression rendering
-{isVisible() && <div>Content</div>}
+{
+  isVisible() && <div>Content</div>
+}
 ```
 
 **Benefits of `<Show>`:**
+
 - Better performance with reactive updates
 - Proper cleanup of nested reactive computations
 - More explicit conditional rendering semantics
@@ -161,14 +165,15 @@ useForwardExpose() // Handles complex ref forwarding
 
 ## asChild Pattern Implementation
 
-The `asChild` pattern allows replacing a component's root element with a custom element while preserving the component's functionality and props. Each framework implements this pattern differently.
+The `asChild` pattern allows replacing a component's root element with a custom element while preserving the component's
+functionality and props. Each framework implements this pattern differently.
 
 ### React asChild Pattern
 
 ```tsx
 import { Menu } from '@ark-ui/react/menu'
 
-<Menu.Item value="docs" asChild>
+;<Menu.Item value="docs" asChild>
   <a href="https://ark-ui.com">Documentation</a>
 </Menu.Item>
 ```
@@ -183,7 +188,14 @@ import { Menu } from '@ark-ui/react/menu'
 ```tsx
 import { Menu } from '@ark-ui/solid/menu'
 
-<Menu.Item value="docs" asChild={(itemProps) => <a href="https://ark-ui.com" {...itemProps()}>Documentation</a>} />
+;<Menu.Item
+  value="docs"
+  asChild={(itemProps) => (
+    <a href="https://ark-ui.com" {...itemProps()}>
+      Documentation
+    </a>
+  )}
+/>
 ```
 
 - **Type**: `(props: PropsFn) => JSX.Element`
@@ -231,12 +243,12 @@ import { Menu } from '@ark-ui/vue/menu'
 
 ### asChild Pattern Summary
 
-| Framework | Prop Name | Prop Type | Usage Pattern |
-|-----------|-----------|-----------|---------------|
-| **React** | `asChild` | `boolean` | Boolean flag with children wrapping |
-| **Solid** | `asChild` | `(props: PropsFn) => JSX.Element` | Function that receives props function |
-| **Vue** | `as-child` | `boolean` | Boolean flag (kebab-case in templates) |
-| **Svelte** | `asChild` | `Snippet<[PropsFn]>` | Snippet/template slot with props function |
+| Framework  | Prop Name  | Prop Type                         | Usage Pattern                             |
+| ---------- | ---------- | --------------------------------- | ----------------------------------------- |
+| **React**  | `asChild`  | `boolean`                         | Boolean flag with children wrapping       |
+| **Solid**  | `asChild`  | `(props: PropsFn) => JSX.Element` | Function that receives props function     |
+| **Vue**    | `as-child` | `boolean`                         | Boolean flag (kebab-case in templates)    |
+| **Svelte** | `asChild`  | `Snippet<[PropsFn]>`              | Snippet/template slot with props function |
 
 ### Common Use Cases for asChild
 
@@ -588,9 +600,11 @@ Svelte requires proper closing tags for non-void HTML elements to avoid ambiguit
 ```
 
 **Non-void elements that require closing tags:**
+
 - `<textarea>`, `<div>`, `<span>`, `<button>`, `<a>`, `<form>`, etc.
 
 **Void elements that can be self-closing:**
+
 - `<input>`, `<img>`, `<br>`, `<hr>`, `<meta>`, `<link>`, etc.
 
 ## Framework-Specific Utilities

.claude/docs/overview.md

@@ -1,6 +1,7 @@
 # Ark UI - Project Overview
 
-Ark UI is a headless component library for building scalable Design Systems across React, Solid, Svelte, and Vue. Built on top of Zag.js state machines, it provides unstyled, accessible UI components.
+Ark UI is a headless component library for building scalable Design Systems across React, Solid, Svelte, and Vue. Built
+on top of Zag.js state machines, it provides unstyled, accessible UI components.
 
 ## Project Structure
 
@@ -19,7 +20,8 @@ ark/
 
 ## Available Components
 
-- **Form Controls**: Checkbox, Field, Fieldset, Number Input, Password Input, Pin Input, Radio Group, Select, Switch, Tags Input
+- **Form Controls**: Checkbox, Field, Fieldset, Number Input, Password Input, Pin Input, Radio Group, Select, Switch,
+  Tags Input
 - **Data Display**: Avatar, Progress, Rating Group, Signature Pad, Toast, Tree View
 - **Navigation**: Menu, Pagination, Tabs, Tour
 - **Layout**: Accordion, Collapsible, Splitter
@@ -39,7 +41,8 @@ ark/
 
 ## Example Development Status
 
-The project tracks component example consistency across frameworks in `COMPONENT_EXAMPLES_DIFF.md`. Key areas needing attention:
+The project tracks component example consistency across frameworks in `COMPONENT_EXAMPLES_DIFF.md`. Key areas needing
+attention:
 
 ### Priority Areas
 
@@ -69,7 +72,8 @@ When designing components and APIs, we draw inspiration from these leading headl
 - **[Base UI](https://mui.com/base-ui/)** - MUI's headless component library with excellent accessibility patterns
 - **[Reka UI](https://reka-ui.com/)** - Vue-focused headless components with clean API design
 - **[Radix UI](https://radix-ui.com/)** - React primitives with exceptional accessibility and developer experience
-- **[React Spectrum](https://react-spectrum.adobe.com/)** - Adobe's design system with robust accessibility and internationalization
+- **[React Spectrum](https://react-spectrum.adobe.com/)** - Adobe's design system with robust accessibility and
+  internationalization
 
 **What to Learn:**
 
@@ -93,4 +97,4 @@ When designing components and APIs, we draw inspiration from these leading headl
 3. Include Storybook stories for components
 4. Write tests for component behavior
 5. Ensure accessibility compliance
-6. Update `COMPONENT_EXAMPLES_DIFF.md` when adding examples
+6. Update `COMPONENT_EXAMPLES_DIFF.md` when adding examples

.storybook/styles/password-input.css

@@ -1,29 +1,29 @@
-[data-scope="password-input"][data-part="root"] {
+[data-scope='password-input'][data-part='root'] {
   max-width: 20rem;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-[data-scope="password-input"][data-part="control"] {
+[data-scope='password-input'][data-part='control'] {
   position: relative;
   display: flex;
   align-items: center;
 }
 
-[data-scope="password-input"][data-part="input"] {
+[data-scope='password-input'][data-part='input'] {
   width: 100%;
   height: 100%;
   padding: 0.5rem 3rem 0.5rem 0.5rem;
   flex: 1;
 }
 
-[data-scope="password-input"][data-part="indicator"] {
+[data-scope='password-input'][data-part='indicator'] {
   display: contents;
 }
 
-[data-scope="password-input"][data-part="visibility-trigger"] {
+[data-scope='password-input'][data-part='visibility-trigger'] {
   position: absolute;
   inset-inline-end: 0.4rem;
   display: flex;