@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/docs/components/checkbox.md

@@ -0,0 +1,77 @@
+---
+component: SkCheckbox
+category: Forms
+---
+
+# SkCheckbox
+
+A checkbox component supporting boolean and indeterminate states. Built on RekaUI's Checkbox primitive with beveled corner styling.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const agreed = ref(false);
+</script>
+
+<template>
+  <SkCheckbox v-model="agreed" label="I agree to the terms" kind="primary" />
+</template>
+```
+
+## Indeterminate State
+
+The model value can be `true`, `false`, or `'indeterminate'`. The indeterminate state displays a horizontal dash instead of a checkmark:
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const state = ref<boolean | 'indeterminate'>('indeterminate');
+</script>
+
+<template>
+  <SkCheckbox v-model="state" label="Select all" />
+</template>
+```
+
+## Kinds
+
+```vue
+<SkCheckbox v-model="val" kind="primary" label="Primary" />
+<SkCheckbox v-model="val" kind="accent" label="Accent" />
+<SkCheckbox v-model="val" kind="success" label="Success" />
+<SkCheckbox v-model="val" kind="danger" label="Danger" />
+```
+
+## Sizes
+
+```vue
+<SkCheckbox v-model="val" size="sm" label="Small" />
+<SkCheckbox v-model="val" size="md" label="Medium" />
+<SkCheckbox v-model="val" size="lg" label="Large" />
+```
+
+## States
+
+```vue
+<SkCheckbox v-model="val" disabled label="Disabled checkbox" />
+<SkCheckbox v-model="val" required label="Required field" />
+```
+
+## Custom Colors
+
+```vue
+<SkCheckbox
+  v-model="val"
+  base-color="oklch(0.6 0.25 300)"
+  text-color="white"
+  label="Custom purple"
+/>
+```
+
+## Accessibility
+
+Built on RekaUI which manages `role="checkbox"`, `aria-checked` (including `mixed` for indeterminate), and keyboard toggling via Space. The label is associated via a wrapping `<label>` element.

package/docs/components/collapsible.md

@@ -0,0 +1,71 @@
+---
+component: SkCollapsible
+category: Layout
+---
+
+# SkCollapsible
+
+A single-section disclosure component for showing and hiding content with smooth height animations. Built on RekaUI's Collapsible primitive.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <SkCollapsible v-model:open="isOpen" trigger-text="Show details">
+    <p>Hidden content revealed when expanded.</p>
+  </SkCollapsible>
+</template>
+```
+
+## Slots
+
+The `trigger` slot allows replacing the default button with custom trigger content:
+
+```vue
+<SkCollapsible v-model:open="isOpen">
+  <template #trigger="{ open }">
+    <SkButton kind="primary">
+      {{ open ? 'Hide' : 'Show' }} Details
+    </SkButton>
+  </template>
+  <p>Collapsible content here.</p>
+</SkCollapsible>
+```
+
+## Kinds
+
+```vue
+<SkCollapsible kind="primary" trigger-text="Primary">
+  Content
+</SkCollapsible>
+```
+
+## States
+
+```vue
+<SkCollapsible disabled trigger-text="Cannot toggle">
+  This content cannot be toggled.
+</SkCollapsible>
+```
+
+## Custom Colors
+
+```vue
+<SkCollapsible
+  base-color="oklch(0.5 0.2 260)"
+  text-color="white"
+  trigger-text="Custom Colors"
+>
+  Content with custom styling.
+</SkCollapsible>
+```
+
+## Accessibility
+
+Built on RekaUI Collapsible which provides `aria-expanded` on the trigger and `aria-controls` linking the trigger to the content panel. Space and Enter toggle the content.

package/docs/components/divider.md

@@ -0,0 +1,62 @@
+---
+component: SkDivider
+category: Layout
+---
+
+# SkDivider
+
+A visual separator component for dividing content sections. Renders as an `<hr>` element with support for both horizontal and vertical orientations.
+
+## Usage
+
+```vue
+<template>
+  <p>Section one</p>
+  <SkDivider />
+  <p>Section two</p>
+</template>
+```
+
+## Orientation
+
+```vue
+<!-- Horizontal (default) -->
+<SkDivider orientation="horizontal" />
+
+<!-- Vertical (use inside a flex container) -->
+<div style="display: flex; align-items: center; gap: 1rem;">
+  <span>Left</span>
+  <SkDivider orientation="vertical" />
+  <span>Right</span>
+</div>
+```
+
+## Kinds
+
+```vue
+<SkDivider kind="primary" />
+<SkDivider kind="accent" />
+<SkDivider kind="danger" />
+```
+
+## Variants
+
+The `subtle` variant produces a lighter, less prominent line:
+
+```vue
+<SkDivider variant="subtle" />
+```
+
+## Sizes
+
+Controls thickness and surrounding spacing:
+
+```vue
+<SkDivider size="sm" />
+<SkDivider size="md" />
+<SkDivider size="lg" />
+```
+
+## Accessibility
+
+Renders with `role="separator"` and `aria-orientation` matching the `orientation` prop.

package/docs/components/dropdown.md

@@ -0,0 +1,88 @@
+---
+component: SkDropdown
+category: Forms
+---
+
+# SkDropdown
+
+A dropdown menu component with a trigger button and floating menu content. Supports submenus, menu items, and separators. Built on RekaUI's DropdownMenu primitive and uses a portal for rendering.
+
+## Usage
+
+```vue
+<template>
+  <SkDropdown trigger-text="Actions" kind="primary">
+    <SkDropdownMenuItem>Edit</SkDropdownMenuItem>
+    <SkDropdownMenuItem>Duplicate</SkDropdownMenuItem>
+    <SkDropdownMenuSeparator />
+    <SkDropdownMenuItem>Delete</SkDropdownMenuItem>
+  </SkDropdown>
+</template>
+```
+
+## Slots
+
+The `trigger` slot replaces the default trigger button:
+
+```vue
+<SkDropdown>
+  <template #trigger>
+    <SkButton kind="accent" variant="outline">
+      Custom Trigger
+    </SkButton>
+  </template>
+  <SkDropdownMenuItem>Option A</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Option B</SkDropdownMenuItem>
+</SkDropdown>
+```
+
+## Submenus
+
+Use SkDropdownSubmenu for nested menu levels:
+
+```vue
+<SkDropdown trigger-text="File">
+  <SkDropdownMenuItem>New</SkDropdownMenuItem>
+  <SkDropdownSubmenu label="Open Recent">
+    <SkDropdownMenuItem>Document 1</SkDropdownMenuItem>
+    <SkDropdownMenuItem>Document 2</SkDropdownMenuItem>
+  </SkDropdownSubmenu>
+  <SkDropdownMenuSeparator />
+  <SkDropdownMenuItem>Exit</SkDropdownMenuItem>
+</SkDropdown>
+```
+
+## Positioning
+
+Control where the menu appears relative to the trigger:
+
+```vue
+<SkDropdown side="right" align="start" :side-offset="8">
+  ...
+</SkDropdown>
+```
+
+Available `side` values: `top`, `right`, `bottom` (default), `left`. Available `align` values: `start` (default), `center`, `end`.
+
+## Kinds
+
+```vue
+<SkDropdown kind="primary" trigger-text="Primary">...</SkDropdown>
+<SkDropdown kind="accent" trigger-text="Accent">...</SkDropdown>
+```
+
+## Custom Colors
+
+```vue
+<SkDropdown
+  base-color="oklch(0.5 0.15 260)"
+  text-color="white"
+  trigger-text="Custom"
+>
+  <SkDropdownMenuItem>Styled Item</SkDropdownMenuItem>
+</SkDropdown>
+```
+
+## Accessibility
+
+Built on RekaUI DropdownMenu which provides full WAI-ARIA menu pattern. Arrow keys navigate items, Enter/Space activates, Escape closes, and submenus open on ArrowRight. The menu content is portaled to the body for correct stacking.

package/docs/components/field.md

@@ -0,0 +1,80 @@
+---
+component: SkField
+category: Forms
+---
+
+# SkField
+
+A form field wrapper that provides label, description, error message, and validation state management. Automatically wires up accessibility attributes between the label, input, and messages.
+
+## Usage
+
+```vue
+<template>
+  <SkField label="Email" description="We'll never share your email.">
+    <template #default="{ id, ...attrs }">
+      <SkInput :id="id" v-bind="attrs" v-model="email" type="email" />
+    </template>
+  </SkField>
+</template>
+```
+
+## Validation State
+
+When `error` is provided, it replaces the description and the field enters an error state:
+
+```vue
+<SkField
+  label="Username"
+  :error="usernameError"
+  description="Choose a unique username."
+>
+  <template #default="{ id, ...attrs }">
+    <SkInput :id="id" v-bind="attrs" v-model="username" />
+  </template>
+</SkField>
+```
+
+## State-Driven Kind
+
+The `state` prop drives automatic kind injection into child inputs:
+
+- `true` -- Applies `validKind` (default: `success`) to the input.
+- `false` -- Applies `invalidKind` (default: `danger`) to the input.
+- `null` -- Neutral; input uses its own kind.
+
+```vue
+<SkField label="Password" :state="isValid">
+  <template #default="{ id, kind, ...attrs }">
+    <SkInput :id="id" :kind="kind" v-bind="attrs" v-model="password" />
+  </template>
+</SkField>
+```
+
+Inputs like SkInput, SkTextarea, SkListbox, SkNumberInput, and SkTagsInput automatically inject the field kind via provide/inject without needing to pass it explicitly.
+
+## Label Position
+
+```vue
+<SkField label="Name" label-position="left">
+  <template #default="{ id }">
+    <SkInput :id="id" v-model="name" />
+  </template>
+</SkField>
+```
+
+## Required Indicator
+
+```vue
+<SkField label="Email" required>
+  <template #default="{ id }">
+    <SkInput :id="id" v-model="email" required />
+  </template>
+</SkField>
+```
+
+This adds a visual asterisk (*) after the label.
+
+## Accessibility
+
+Generates a unique `id` for the input (or uses a provided one). Links the label via `for`, provides `aria-describedby` pointing to the description or error message, and sets `aria-invalid` when an error is present. All these attributes are passed to the default slot.

package/docs/components/group.md

@@ -0,0 +1,41 @@
+---
+component: SkGroup
+category: Layout
+---
+
+# SkGroup
+
+A layout container that arranges child elements with consistent spacing in a horizontal or vertical direction.
+
+## Usage
+
+```vue
+<template>
+  <SkGroup>
+    <SkButton kind="primary">Save</SkButton>
+    <SkButton variant="outline">Cancel</SkButton>
+  </SkGroup>
+</template>
+```
+
+## Orientation
+
+```vue
+<!-- Horizontal (default) -->
+<SkGroup orientation="horizontal">
+  <SkButton>A</SkButton>
+  <SkButton>B</SkButton>
+  <SkButton>C</SkButton>
+</SkGroup>
+
+<!-- Vertical -->
+<SkGroup orientation="vertical">
+  <SkButton>A</SkButton>
+  <SkButton>B</SkButton>
+  <SkButton>C</SkButton>
+</SkGroup>
+```
+
+## Accessibility
+
+SkGroup is a presentational layout component. It does not add any ARIA attributes. Apply appropriate roles and labels to the container or children as needed for your use case.

package/docs/components/input.md

@@ -0,0 +1,84 @@
+---
+component: SkInput
+category: Forms
+---
+
+# SkInput
+
+A text input component with validation states, semantic color support, and multiple input types. Automatically inherits kind from a parent SkField when used together.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const email = ref('');
+</script>
+
+<template>
+  <SkInput v-model="email" type="email" placeholder="Enter your email" />
+</template>
+```
+
+## Input Types
+
+Supports: `text` (default), `email`, `password`, `url`, `tel`, `search`, `number`.
+
+```vue
+<SkInput type="password" placeholder="Password" />
+<SkInput type="search" placeholder="Search..." />
+<SkInput type="url" placeholder="https://..." />
+```
+
+## Kinds
+
+The kind prop colors the input border, useful for showing validation states:
+
+```vue
+<SkInput kind="success" placeholder="Valid input" />
+<SkInput kind="danger" placeholder="Invalid input" />
+```
+
+When nested inside SkField, the kind is automatically injected based on the field's validation state.
+
+## Sizes
+
+```vue
+<SkInput size="sm" placeholder="Small" />
+<SkInput size="md" placeholder="Medium" />
+<SkInput size="lg" placeholder="Large" />
+```
+
+## States
+
+```vue
+<SkInput disabled placeholder="Disabled" />
+<SkInput readonly model-value="Read-only value" />
+```
+
+## Custom Colors
+
+```vue
+<SkInput
+  base-color="oklch(0.6 0.2 280)"
+  text-color="white"
+  placeholder="Custom styled"
+/>
+```
+
+## Composition
+
+Pair with SkField for labels, descriptions, and error messages:
+
+```vue
+<SkField label="Email" :error="emailError">
+  <template #default="{ id, ...attrs }">
+    <SkInput :id="id" v-bind="attrs" v-model="email" type="email" />
+  </template>
+</SkField>
+```
+
+## Accessibility
+
+Renders as a native `<input>` element. All standard HTML attributes are forwarded via `v-bind="$attrs"`. Use SkField to associate labels and error messages via `aria-describedby` and `aria-invalid`.

package/docs/components/listbox.md

@@ -0,0 +1,82 @@
+---
+component: SkListbox
+category: Forms
+---
+
+# SkListbox
+
+A searchable select component for choosing from a list of predefined options. Features a combobox-style input with a dropdown list of items. Built on RekaUI's Combobox primitive and uses a portal for the dropdown.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const selected = ref('');
+</script>
+
+<template>
+  <SkListbox v-model="selected" placeholder="Select a fruit...">
+    <SkListboxItem value="apple">Apple</SkListboxItem>
+    <SkListboxItem value="banana">Banana</SkListboxItem>
+    <SkListboxItem value="cherry">Cherry</SkListboxItem>
+  </SkListbox>
+</template>
+```
+
+## Searchable
+
+The input field filters options as you type. RekaUI handles the filtering behavior internally.
+
+## Grouped Options
+
+Use SkListboxSeparator to visually divide option groups:
+
+```vue
+<SkListbox v-model="selected">
+  <SkListboxItem value="apple">Apple</SkListboxItem>
+  <SkListboxItem value="banana">Banana</SkListboxItem>
+  <SkListboxSeparator />
+  <SkListboxItem value="carrot">Carrot</SkListboxItem>
+  <SkListboxItem value="celery">Celery</SkListboxItem>
+</SkListbox>
+```
+
+## Kinds
+
+```vue
+<SkListbox kind="primary" v-model="val">...</SkListbox>
+<SkListbox kind="accent" v-model="val">...</SkListbox>
+```
+
+When nested inside SkField, the kind is automatically injected based on field validation state.
+
+## Sizes
+
+```vue
+<SkListbox size="sm" v-model="val">...</SkListbox>
+<SkListbox size="lg" v-model="val">...</SkListbox>
+```
+
+## States
+
+```vue
+<SkListbox disabled v-model="val">...</SkListbox>
+```
+
+## Custom Colors
+
+```vue
+<SkListbox
+  base-color="oklch(0.5 0.2 260)"
+  text-color="white"
+  v-model="val"
+>
+  <SkListboxItem value="a">Option A</SkListboxItem>
+</SkListbox>
+```
+
+## Accessibility
+
+Built on RekaUI Combobox which provides `role="combobox"` on the input, `role="listbox"` on the dropdown, and `role="option"` on each item. Arrow keys navigate options, Enter selects, and Escape closes the dropdown. The dropdown content is portaled and inherits the active theme.

package/docs/components/modal.md

@@ -0,0 +1,101 @@
+---
+component: SkModal
+category: Feedback
+---
+
+# SkModal
+
+A dialog overlay component for presenting focused content that requires user attention or interaction. Includes a backdrop, close button, and optional trigger. Built on RekaUI's Dialog primitive and uses a portal.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <SkModal v-model:open="isOpen" title="Confirm Action">
+    <p>Are you sure you want to proceed?</p>
+    <template #footer="{ close }">
+      <SkButton variant="ghost" @click="close">Cancel</SkButton>
+      <SkButton kind="primary" @click="doAction(); close()">Confirm</SkButton>
+    </template>
+  </SkModal>
+
+  <SkButton @click="isOpen = true">Open Modal</SkButton>
+</template>
+```
+
+## Built-in Trigger
+
+Use `trigger-text` or the `trigger` slot for an inline trigger button:
+
+```vue
+<SkModal trigger-text="Open" title="My Modal">
+  <p>Modal content.</p>
+</SkModal>
+```
+
+## Slots
+
+- **trigger** -- Custom trigger element (wraps in DialogTrigger).
+- **title** -- Custom title content; receives `{ close }` slot prop.
+- **default** -- Body content; receives `{ close }` slot prop.
+- **footer** -- Footer area for action buttons; receives `{ close }` slot prop.
+
+The `close` function is available in all slots for programmatic dismissal.
+
+## Sizes
+
+Controls the modal width:
+
+```vue
+<SkModal size="sm" title="Small">...</SkModal>
+<SkModal size="md" title="Medium">...</SkModal>
+<SkModal size="lg" title="Large">...</SkModal>
+<SkModal size="xl" title="Extra Large">...</SkModal>
+```
+
+## Kinds
+
+```vue
+<SkModal kind="danger" title="Delete Item">
+  <p>This action cannot be undone.</p>
+</SkModal>
+```
+
+## Dismissal Control
+
+Prevent closing via Escape key or overlay click:
+
+```vue
+<SkModal
+  title="Important Form"
+  no-close-on-escape
+  no-close-on-overlay
+>
+  <p>Must use buttons to close.</p>
+  <template #footer="{ close }">
+    <SkButton kind="primary" @click="close">Done</SkButton>
+  </template>
+</SkModal>
+```
+
+## Custom Colors
+
+```vue
+<SkModal
+  base-color="oklch(0.3 0.1 260)"
+  text-color="white"
+  title="Custom Modal"
+>
+  Dark purple modal.
+</SkModal>
+```
+
+## Accessibility
+
+Built on RekaUI Dialog which provides `role="dialog"`, `aria-modal="true"`, and focus trapping. Focus moves to the dialog on open and returns to the trigger on close. Escape key dismisses by default. The close button has `aria-label="Close"`. Content is portaled and inherits the active theme.