@skewedaspect/sleekspace-ui 0.2.0-beta.1 → 0.2.0-beta.2

package/docs/components/dropdown.md

@@ -1,88 +0,0 @@
----
-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

@@ -1,80 +0,0 @@
----
-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

@@ -1,41 +0,0 @@
----
-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

@@ -1,84 +0,0 @@
----
-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

@@ -1,82 +0,0 @@
----
-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

@@ -1,101 +0,0 @@
----
-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.

package/docs/components/navbar.md

@@ -1,64 +0,0 @@
----
-component: SkNavBar
-category: Navigation
----
-
-# SkNavBar
-
-A top navigation bar component with three content zones: brand, navigation, and actions. Sticky by default so it stays visible during scroll.
-
-## Usage
-
-```vue
-<template>
-  <SkNavBar kind="primary" sticky>
-    <template #brand>
-      <a href="/">MyApp</a>
-    </template>
-    <template #nav>
-      <a href="/about">About</a>
-      <a href="/docs">Docs</a>
-    </template>
-    <template #actions>
-      <SkButton kind="accent" size="sm">Sign In</SkButton>
-    </template>
-  </SkNavBar>
-</template>
-```
-
-## Slots
-
-- **brand** -- Left-aligned area for logo or brand name.
-- **nav** -- Center area for navigation links.
-- **actions** -- Right-aligned area for action buttons.
-
-## Kinds
-
-```vue
-<SkNavBar kind="primary">...</SkNavBar>
-<SkNavBar kind="accent">...</SkNavBar>
-<SkNavBar kind="neutral">...</SkNavBar>
-```
-
-## Sticky Behavior
-
-The navbar is sticky by default (`sticky: true`). Set `sticky` to `false` for a static navbar:
-
-```vue
-<SkNavBar :sticky="false">...</SkNavBar>
-```
-
-## Custom Colors
-
-```vue
-<SkNavBar
-  base-color="oklch(0.2 0.05 260)"
-  text-color="oklch(0.9 0 0)"
->
-  <template #brand>Dark Nav</template>
-</SkNavBar>
-```
-
-## Accessibility
-
-Renders as a semantic `<nav>` element. The developer should provide meaningful link text and aria attributes for the navigation structure.

package/docs/components/number-input.md

@@ -1,78 +0,0 @@
----
-component: SkNumberInput
-category: Forms
----
-
-# SkNumberInput
-
-A numeric input component with increment/decrement stepper buttons. Supports keyboard navigation, min/max bounds, and step increments. Built on RekaUI's NumberField primitive.
-
-## Usage
-
-```vue
-<script setup>
-import { ref } from 'vue';
-
-const quantity = ref(1);
-</script>
-
-<template>
-  <SkNumberInput v-model="quantity" :min="0" :max="100" :step="1" />
-</template>
-```
-
-## Min, Max, and Step
-
-```vue
-<SkNumberInput v-model="value" :min="0" :max="10" :step="0.5" />
-```
-
-## Kinds
-
-```vue
-<SkNumberInput v-model="val" kind="primary" />
-<SkNumberInput v-model="val" kind="danger" />
-```
-
-When nested inside SkField, the kind is automatically injected based on field validation state.
-
-## Sizes
-
-```vue
-<SkNumberInput v-model="val" size="sm" />
-<SkNumberInput v-model="val" size="md" />
-<SkNumberInput v-model="val" size="lg" />
-```
-
-## States
-
-```vue
-<SkNumberInput v-model="val" disabled />
-<SkNumberInput v-model="val" readonly />
-```
-
-## Custom Colors
-
-```vue
-<SkNumberInput
-  v-model="val"
-  base-color="oklch(0.5 0.2 280)"
-  text-color="white"
-/>
-```
-
-## Composition
-
-Pair with SkField for labels and validation:
-
-```vue
-<SkField label="Quantity" :error="quantityError">
-  <template #default="{ id, ...attrs }">
-    <SkNumberInput :id="id" v-bind="attrs" v-model="quantity" :min="0" />
-  </template>
-</SkField>
-```
-
-## Accessibility
-
-Built on RekaUI NumberField which provides `role="spinbutton"`, `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`. Arrow Up/Down keys increment and decrement the value. The stepper buttons are accessible via keyboard.

package/docs/components/page.md

@@ -1,77 +0,0 @@
----
-component: SkPage
-category: Layout
----
-
-# SkPage
-
-A full-page layout component that provides a structured page skeleton with header, sidebar, content, and footer regions. Designed for application-level layouts.
-
-## Usage
-
-```vue
-<template>
-  <SkPage>
-    <template #header>
-      <SkNavBar kind="primary">
-        <template #brand>MyApp</template>
-      </SkNavBar>
-    </template>
-
-    <template #sidebar>
-      <SkSidebar>
-        <SkSidebarItem href="/">Home</SkSidebarItem>
-        <SkSidebarItem href="/settings">Settings</SkSidebarItem>
-      </SkSidebar>
-    </template>
-
-    <h1>Page Content</h1>
-    <p>Main content area.</p>
-
-    <template #footer>
-      <p>Footer content</p>
-    </template>
-  </SkPage>
-</template>
-```
-
-## Slots
-
-- **header** -- Top region, typically for a navbar.
-- **sidebar** -- Side navigation area.
-- **default** -- Main content rendered in a `<main>` element.
-- **footer** -- Bottom region.
-
-All slots are optional; the layout adapts when slots are not provided.
-
-## Sidebar Position
-
-```vue
-<SkPage sidebar-position="left">...</SkPage>
-<SkPage sidebar-position="right">...</SkPage>
-```
-
-## Fixed Header and Footer
-
-Keep the header or footer fixed while the content area scrolls:
-
-```vue
-<SkPage fixed-header fixed-footer>
-  <template #header>...</template>
-  <template #footer>...</template>
-  Main content scrolls independently.
-</SkPage>
-```
-
-## Custom Sidebar Width
-
-```vue
-<SkPage sidebar-width="250px">
-  <template #sidebar>...</template>
-  Content
-</SkPage>
-```
-
-## Accessibility
-
-Uses semantic HTML: the main content renders in a `<main>` element, header in `<header>`, and footer in `<footer>`. Sidebar renders in an `<aside>` element.