@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/docs/components/navbar.md

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

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

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

package/docs/components/pagination.md

@@ -0,0 +1,88 @@
+---
+component: SkPagination
+category: Navigation
+---
+
+# SkPagination
+
+A pagination control for navigating through pages of content. Automatically calculates page ranges with ellipsis for large page counts.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const currentPage = ref(1);
+</script>
+
+<template>
+  <SkPagination v-model="currentPage" :total="20" kind="primary" />
+</template>
+```
+
+## Navigation Controls
+
+By default, first/last and previous/next buttons are shown. Disable them individually:
+
+```vue
+<SkPagination
+  v-model="page"
+  :total="10"
+  :show-first-last="false"
+  :show-prev-next="true"
+/>
+```
+
+## Sibling Count
+
+Control how many page numbers appear around the current page:
+
+```vue
+<!-- Shows: 1 ... 4 5 [6] 7 8 ... 20 -->
+<SkPagination v-model="page" :total="20" :sibling-count="2" />
+```
+
+## Variants
+
+```vue
+<SkPagination variant="solid" v-model="page" :total="10" />
+<SkPagination variant="outline" v-model="page" :total="10" />
+<SkPagination variant="subtle" v-model="page" :total="10" />
+<SkPagination variant="ghost" v-model="page" :total="10" />
+```
+
+## Kinds
+
+```vue
+<SkPagination kind="primary" v-model="page" :total="10" />
+<SkPagination kind="accent" v-model="page" :total="10" />
+```
+
+## Sizes
+
+```vue
+<SkPagination size="sm" v-model="page" :total="10" />
+<SkPagination size="lg" v-model="page" :total="10" />
+```
+
+## States
+
+```vue
+<SkPagination disabled v-model="page" :total="10" />
+```
+
+## Custom Colors
+
+```vue
+<SkPagination
+  base-color="oklch(0.6 0.2 280)"
+  text-color="white"
+  v-model="page"
+  :total="10"
+/>
+```
+
+## Accessibility
+
+Renders inside a `<nav>` element with `aria-label="Pagination"`. Current page button is visually distinguished. First, last, previous, and next buttons are disabled when at boundary pages.

package/docs/components/panel.md

@@ -0,0 +1,74 @@
+---
+component: SkPanel
+category: Layout
+---
+
+# SkPanel
+
+The foundational container component of SleekSpace UI. Provides borders, background colors, beveled corners, and an optional decorative accent line. Serves as the base for SkCard and other container components.
+
+## Usage
+
+```vue
+<template>
+  <SkPanel kind="primary" size="lg">
+    <h2>Panel Content</h2>
+    <p>Any content goes here.</p>
+  </SkPanel>
+</template>
+```
+
+## Kinds
+
+```vue
+<SkPanel kind="neutral">Neutral</SkPanel>
+<SkPanel kind="primary">Primary</SkPanel>
+<SkPanel kind="accent">Accent</SkPanel>
+<SkPanel kind="info">Info</SkPanel>
+<SkPanel kind="success">Success</SkPanel>
+<SkPanel kind="warning">Warning</SkPanel>
+<SkPanel kind="danger">Danger</SkPanel>
+```
+
+## Sizes
+
+The `size` prop controls the bevel cut size:
+
+```vue
+<SkPanel size="xs">Extra Small</SkPanel>
+<SkPanel size="sm">Small</SkPanel>
+<SkPanel size="md">Medium</SkPanel>
+<SkPanel size="lg">Large</SkPanel>
+<SkPanel size="xl">Extra Large</SkPanel>
+```
+
+## Decoration
+
+Panels include a decorative accent border by default. Disable it with `show-decoration`:
+
+```vue
+<SkPanel :show-decoration="false">No accent line.</SkPanel>
+```
+
+Remove the entire border with `no-border`:
+
+```vue
+<SkPanel no-border>Borderless panel.</SkPanel>
+```
+
+Setting `no-border` also disables the decoration.
+
+## Custom Colors
+
+```vue
+<SkPanel
+  base-color="oklch(0.2 0.1 260)"
+  text-color="oklch(0.9 0 0)"
+>
+  Dark panel with custom colors.
+</SkPanel>
+```
+
+## Accessibility
+
+SkPanel is a presentational container. Apply appropriate ARIA roles and labels based on the content it wraps.

package/docs/components/popover.md

@@ -0,0 +1,93 @@
+---
+component: SkPopover
+category: Feedback
+---
+
+# SkPopover
+
+A floating panel positioned relative to a trigger element. Combines tooltip-like positioning with card-like structure, supporting a header with title, body content, footer, and a connecting arrow. Built on RekaUI's Popover primitive and uses a portal.
+
+## Usage
+
+```vue
+<template>
+  <SkPopover title="Settings">
+    <template #trigger>
+      <SkButton>Open Settings</SkButton>
+    </template>
+    <p>Adjust your preferences here.</p>
+  </SkPopover>
+</template>
+```
+
+## Slots
+
+- **trigger** -- The element that opens the popover on click.
+- **header** -- Additional header content alongside the title.
+- **default** -- Body content of the popover.
+- **footer** -- Footer area for actions.
+
+```vue
+<SkPopover title="Confirm" kind="danger">
+  <template #trigger>
+    <SkButton kind="danger">Delete</SkButton>
+  </template>
+  <p>Are you sure?</p>
+  <template #footer>
+    <SkButton variant="ghost" size="sm">Cancel</SkButton>
+    <SkButton kind="danger" size="sm">Delete</SkButton>
+  </template>
+</SkPopover>
+```
+
+## Positioning
+
+```vue
+<SkPopover side="right" align="start" :side-offset="12">
+  ...
+</SkPopover>
+```
+
+Available `side` values: `top`, `right`, `bottom` (default), `left`. Available `align` values: `start`, `center` (default), `end`.
+
+## Arrow
+
+The connecting arrow is shown by default. Hide it with:
+
+```vue
+<SkPopover :show-arrow="false">...</SkPopover>
+```
+
+## Closable
+
+A close button appears in the header by default. Disable it:
+
+```vue
+<SkPopover :closable="false" title="Persistent">
+  ...
+</SkPopover>
+```
+
+## Kinds
+
+```vue
+<SkPopover kind="primary" title="Primary Popover">...</SkPopover>
+<SkPopover kind="accent" title="Accent Popover">...</SkPopover>
+```
+
+## Custom Colors
+
+```vue
+<SkPopover
+  base-color="oklch(0.3 0.1 260)"
+  text-color="white"
+  title="Custom"
+>
+  <template #trigger><SkButton>Open</SkButton></template>
+  Dark popover content.
+</SkPopover>
+```
+
+## Accessibility
+
+Built on RekaUI Popover which manages focus movement into the popover on open, focus trapping within the popover content, and Escape to close. The close button has `aria-label="Close"`. Content is portaled and inherits the active theme.

package/docs/components/progress.md

@@ -0,0 +1,76 @@
+---
+component: SkProgress
+category: Feedback
+---
+
+# SkProgress
+
+A progress bar component with both determinate and indeterminate modes. Supports percentage labels and custom colors. Built on RekaUI's Progress primitive.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const progress = ref(45);
+</script>
+
+<template>
+  <SkProgress :value="progress" kind="primary" />
+</template>
+```
+
+## Indeterminate Mode
+
+Omit the `value` prop or pass `null` to show an animated indeterminate progress bar:
+
+```vue
+<SkProgress kind="accent" />
+```
+
+## Value Label
+
+Display the current percentage:
+
+```vue
+<SkProgress :value="75" show-value />
+<SkProgress :value="75" show-value value-position="left" />
+<SkProgress :value="75" show-value value-position="right" />
+```
+
+## Kinds
+
+```vue
+<SkProgress :value="60" kind="primary" />
+<SkProgress :value="60" kind="success" />
+<SkProgress :value="60" kind="warning" />
+<SkProgress :value="60" kind="danger" />
+```
+
+## Sizes
+
+Controls the bar height:
+
+```vue
+<SkProgress :value="50" size="xs" />
+<SkProgress :value="50" size="sm" />
+<SkProgress :value="50" size="md" />
+<SkProgress :value="50" size="lg" />
+```
+
+## Custom Colors
+
+Use `baseColor` for the filled bar and `trackColor` for the background track:
+
+```vue
+<SkProgress
+  :value="65"
+  base-color="oklch(0.7 0.25 300)"
+  track-color="oklch(0.2 0.05 300)"
+/>
+```
+
+## Accessibility
+
+Built on RekaUI Progress which provides `role="progressbar"`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow` (omitted in indeterminate mode). Screen readers announce the progress value.

package/docs/components/radio.md

@@ -0,0 +1,86 @@
+---
+component: SkRadio
+category: Forms
+---
+
+# SkRadio
+
+A radio button component for exclusive selection within a group. SkRadio must be used inside SkRadioGroup. Built on RekaUI's RadioGroup primitive.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const selected = ref('option-a');
+</script>
+
+<template>
+  <SkRadioGroup v-model="selected" kind="primary">
+    <SkRadio value="option-a" label="Option A" />
+    <SkRadio value="option-b" label="Option B" />
+    <SkRadio value="option-c" label="Option C" />
+  </SkRadioGroup>
+</template>
+```
+
+## Orientation
+
+The radio group arranges items vertically by default. Switch to horizontal:
+
+```vue
+<SkRadioGroup v-model="val" orientation="horizontal">
+  <SkRadio value="a" label="A" />
+  <SkRadio value="b" label="B" />
+</SkRadioGroup>
+```
+
+## Kinds
+
+Set on the group to apply to all radios, or override per individual radio:
+
+```vue
+<SkRadioGroup v-model="val" kind="accent">
+  <SkRadio value="a" label="Inherits accent" />
+  <SkRadio value="b" label="Override to danger" kind="danger" />
+</SkRadioGroup>
+```
+
+## Sizes
+
+Set on the group or individual radios:
+
+```vue
+<SkRadioGroup v-model="val" size="lg">
+  <SkRadio value="a" label="Large Radio" />
+</SkRadioGroup>
+```
+
+## States
+
+```vue
+<SkRadioGroup v-model="val" disabled>
+  <SkRadio value="a" label="All disabled" />
+</SkRadioGroup>
+
+<SkRadioGroup v-model="val">
+  <SkRadio value="a" label="Enabled" />
+  <SkRadio value="b" label="Individually disabled" disabled />
+</SkRadioGroup>
+```
+
+## Custom Colors
+
+```vue
+<SkRadio
+  value="custom"
+  base-color="oklch(0.6 0.25 300)"
+  text-color="white"
+  label="Custom purple"
+/>
+```
+
+## Accessibility
+
+Built on RekaUI RadioGroup which provides `role="radiogroup"` on the group and `role="radio"` on each item. Arrow keys navigate between options, and the group supports `aria-required` when `required` is set. Labels are associated via wrapping `<label>` elements.