@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/docs/components/sidebar.md

@@ -0,0 +1,74 @@
+---
+component: SkSidebar
+category: Navigation
+---
+
+# SkSidebar
+
+A sticky navigation sidebar container with semantic color theming. Composed of SkSidebarSection and SkSidebarItem for structured navigation.
+
+## Usage
+
+```vue
+<template>
+  <SkSidebar kind="neutral" width="220px">
+    <SkSidebarSection title="Navigation">
+      <SkSidebarItem href="/">Home</SkSidebarItem>
+      <SkSidebarItem href="/docs">Documentation</SkSidebarItem>
+    </SkSidebarSection>
+    <SkSidebarSection title="Account">
+      <SkSidebarItem href="/settings">Settings</SkSidebarItem>
+      <SkSidebarItem href="/logout">Logout</SkSidebarItem>
+    </SkSidebarSection>
+  </SkSidebar>
+</template>
+```
+
+## Composition
+
+- **SkSidebar** -- Root container with width and color.
+- **SkSidebarSection** -- Groups items under an optional title heading.
+- **SkSidebarItem** -- Individual navigation link.
+
+## Item Rendering
+
+SkSidebarItem renders differently based on props:
+
+- **`to`** -- Renders as `<router-link>` for Vue Router.
+- **`href`** -- Renders as `<a>` for standard links.
+- **`active`** -- Highlights the item as the current page.
+
+```vue
+<SkSidebarItem :to="{ name: 'dashboard' }" :active="isActive">
+  Dashboard
+</SkSidebarItem>
+```
+
+## Width
+
+```vue
+<SkSidebar width="200px">...</SkSidebar>
+<SkSidebar width="15rem">...</SkSidebar>
+```
+
+## Kinds
+
+```vue
+<SkSidebar kind="primary">...</SkSidebar>
+<SkSidebar kind="accent">...</SkSidebar>
+```
+
+## Custom Colors
+
+```vue
+<SkSidebar
+  base-color="oklch(0.15 0.05 260)"
+  text-color="oklch(0.85 0 0)"
+>
+  <SkSidebarItem href="/">Dark sidebar</SkSidebarItem>
+</SkSidebar>
+```
+
+## Accessibility
+
+The sidebar is a presentational container. Apply `role="navigation"` and `aria-label` on the sidebar or a wrapping `<nav>` element to provide context for screen readers.

package/docs/components/skeleton.md

@@ -0,0 +1,76 @@
+---
+component: SkSkeleton
+category: Feedback
+---
+
+# SkSkeleton
+
+A loading placeholder component with animated shimmer or pulse effects. Use to indicate content is being fetched and provide a visual preview of the expected layout.
+
+## Usage
+
+```vue
+<template>
+  <SkSkeleton width="200px" height="1rem" />
+</template>
+```
+
+## Variants
+
+- **text** (default) -- Rectangular shape with a slight height suitable for text lines.
+- **rectangular** -- Generic rectangular block.
+- **circular** -- Perfect circle (height matches width automatically).
+- **square** -- Square shape (height matches width automatically).
+
+```vue
+<SkSkeleton variant="text" width="80%" />
+<SkSkeleton variant="rectangular" width="100%" height="200px" />
+<SkSkeleton variant="circular" width="48px" />
+<SkSkeleton variant="square" width="48px" />
+```
+
+## Animation
+
+- **shimmer** (default) -- A sliding highlight effect.
+- **pulse** -- A fading opacity cycle.
+- **none** -- Static placeholder with no animation.
+
+```vue
+<SkSkeleton animation="shimmer" width="100%" />
+<SkSkeleton animation="pulse" width="100%" />
+<SkSkeleton animation="none" width="100%" />
+```
+
+## Custom Beveling
+
+Override which corners are beveled and the bevel size:
+
+```vue
+<SkSkeleton
+  variant="rectangular"
+  width="200px"
+  height="100px"
+  :corners="['top-left', 'bottom-right']"
+  bevel="1rem"
+/>
+```
+
+Available corners: `top-left`, `top-right`, `bottom-left`, `bottom-right`.
+
+## Composition
+
+Build skeleton layouts that mirror your real content:
+
+```vue
+<div style="display: flex; gap: 1rem; align-items: center;">
+  <SkSkeleton variant="circular" width="48px" />
+  <div style="flex: 1;">
+    <SkSkeleton variant="text" width="60%" />
+    <SkSkeleton variant="text" width="40%" />
+  </div>
+</div>
+```
+
+## Accessibility
+
+SkSkeleton is a visual placeholder and does not convey loading status to assistive technology. Use `aria-busy="true"` on the parent container and provide a visually hidden loading message for screen readers.

package/docs/components/slider.md

@@ -0,0 +1,94 @@
+---
+component: SkSlider
+category: Forms
+---
+
+# SkSlider
+
+A range slider component for selecting numeric values. Supports single-thumb and multi-thumb (range) modes with horizontal and vertical orientations. Built on RekaUI's Slider primitive.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const volume = ref(50);
+</script>
+
+<template>
+  <SkSlider v-model="volume" :min="0" :max="100" kind="primary" />
+</template>
+```
+
+## Range Mode
+
+Pass an array to enable multiple thumbs for selecting a range:
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const range = ref([20, 80]);
+</script>
+
+<template>
+  <SkSlider
+    v-model="range"
+    :min="0"
+    :max="100"
+    :min-steps-between-thumbs="5"
+    kind="accent"
+  />
+</template>
+```
+
+## Step
+
+```vue
+<SkSlider v-model="value" :step="10" :min="0" :max="100" />
+```
+
+## Orientation
+
+```vue
+<SkSlider v-model="value" orientation="vertical" style="height: 200px;" />
+```
+
+## Kinds
+
+```vue
+<SkSlider v-model="val" kind="primary" />
+<SkSlider v-model="val" kind="success" />
+<SkSlider v-model="val" kind="danger" />
+```
+
+## Sizes
+
+```vue
+<SkSlider v-model="val" size="sm" />
+<SkSlider v-model="val" size="md" />
+<SkSlider v-model="val" size="lg" />
+```
+
+## States
+
+```vue
+<SkSlider v-model="val" disabled />
+```
+
+## Custom Colors
+
+Use `baseColor` for the track fill and `thumbColor` for the thumb:
+
+```vue
+<SkSlider
+  v-model="val"
+  base-color="oklch(0.7 0.25 300)"
+  thumb-color="oklch(0.9 0.1 300)"
+/>
+```
+
+## Accessibility
+
+Built on RekaUI Slider which provides `role="slider"`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-orientation`. Arrow keys adjust the value by the step amount. Home/End jump to min/max.

package/docs/components/spinner.md

@@ -0,0 +1,59 @@
+---
+component: SkSpinner
+category: Feedback
+---
+
+# SkSpinner
+
+An animated loading indicator with three cyberpunk-themed animation variants. Use to communicate ongoing processing or loading.
+
+## Usage
+
+```vue
+<template>
+  <SkSpinner kind="primary" />
+</template>
+```
+
+## Variants
+
+- **circular** (default) -- Dual rotating arc animation.
+- **dots** -- Three bouncing dots.
+- **crosshair** -- A rotating crosshair targeting animation.
+
+```vue
+<SkSpinner variant="circular" />
+<SkSpinner variant="dots" />
+<SkSpinner variant="crosshair" />
+```
+
+## Kinds
+
+```vue
+<SkSpinner kind="primary" />
+<SkSpinner kind="accent" />
+<SkSpinner kind="success" />
+<SkSpinner kind="danger" />
+```
+
+## Sizes
+
+```vue
+<SkSpinner size="xs" />
+<SkSpinner size="sm" />
+<SkSpinner size="md" />
+<SkSpinner size="lg" />
+<SkSpinner size="xl" />
+```
+
+## Custom Color
+
+Use the `color` prop (not `baseColor`) for a custom spinner color:
+
+```vue
+<SkSpinner color="oklch(0.7 0.25 300)" />
+```
+
+## Accessibility
+
+Renders with `role="status"`, `aria-live="polite"`, and `aria-label="Loading"`. Screen readers will announce the loading state.

package/docs/components/switch.md

@@ -0,0 +1,97 @@
+---
+component: SkSwitch
+category: Forms
+---
+
+# SkSwitch
+
+A toggle switch component for binary on/off choices. Supports dynamic labels that change with state and flexible thumb styling. Built on RekaUI's Switch primitive.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const enabled = ref(false);
+</script>
+
+<template>
+  <SkSwitch v-model="enabled" label="Enable notifications" kind="primary" />
+</template>
+```
+
+## Dynamic Labels
+
+Use `label-on` and `label-off` for labels that change based on the toggle state with a fade animation:
+
+```vue
+<SkSwitch
+  v-model="enabled"
+  label-on="Enabled"
+  label-off="Disabled"
+  kind="success"
+/>
+```
+
+Disable the fade animation with `disable-label-animation`.
+
+## Slots
+
+- **default** -- Custom label content (overrides all label props).
+- **label-on** -- Custom content shown when the switch is on.
+- **label-off** -- Custom content shown when the switch is off.
+
+```vue
+<SkSwitch v-model="premium">
+  <template #label-on>
+    <SkTag kind="success" size="sm">Active</SkTag>
+  </template>
+  <template #label-off>
+    <SkTag kind="neutral" size="sm">Inactive</SkTag>
+  </template>
+</SkSwitch>
+```
+
+## Kinds
+
+```vue
+<SkSwitch v-model="val" kind="primary" label="Primary" />
+<SkSwitch v-model="val" kind="accent" label="Accent" />
+<SkSwitch v-model="val" kind="success" label="Success" />
+```
+
+The `thumbKind` prop overrides the thumb color independently from the track:
+
+```vue
+<SkSwitch v-model="val" kind="neutral" thumb-kind="primary" label="Custom Thumb" />
+```
+
+## Sizes
+
+```vue
+<SkSwitch v-model="val" size="sm" label="Small" />
+<SkSwitch v-model="val" size="md" label="Medium" />
+<SkSwitch v-model="val" size="lg" label="Large" />
+```
+
+## States
+
+```vue
+<SkSwitch v-model="val" disabled label="Disabled" />
+```
+
+## Custom Colors
+
+```vue
+<SkSwitch
+  v-model="val"
+  base-color="oklch(0.7 0.25 45)"
+  text-color="white"
+  label="Custom Orange"
+/>
+```
+
+## Accessibility
+
+Built on RekaUI Switch which provides `role="switch"` and `aria-checked`. The label is associated via a wrapping `<label>` element. Space key toggles the state.

package/docs/components/table.md

@@ -0,0 +1,91 @@
+---
+component: SkTable
+category: Feedback
+---
+
+# SkTable
+
+A styled HTML table component with striped rows, hover effects, and configurable borders. Wraps standard `<table>` markup with consistent theming.
+
+## Usage
+
+```vue
+<template>
+  <SkTable kind="neutral" striped hoverable>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Status</th>
+        <th>Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Alice</td>
+        <td>Active</td>
+        <td>Admin</td>
+      </tr>
+      <tr>
+        <td>Bob</td>
+        <td>Inactive</td>
+        <td>User</td>
+      </tr>
+    </tbody>
+  </SkTable>
+</template>
+```
+
+## Variants
+
+- **default** -- Standard spacing.
+- **compact** -- Reduced cell padding.
+- **comfortable** -- Increased cell padding.
+
+```vue
+<SkTable variant="compact">...</SkTable>
+<SkTable variant="comfortable">...</SkTable>
+```
+
+## Features
+
+```vue
+<!-- Alternating row colors -->
+<SkTable striped>...</SkTable>
+
+<!-- Row hover highlight -->
+<SkTable hoverable>...</SkTable>
+
+<!-- Outer border -->
+<SkTable bordered>...</SkTable>
+
+<!-- Cell borders -->
+<SkTable inner-borders>...</SkTable>
+
+<!-- Dark background -->
+<SkTable dark-background>...</SkTable>
+
+<!-- Subtle styling (lighter) -->
+<SkTable subtle>...</SkTable>
+```
+
+## Kinds
+
+```vue
+<SkTable kind="primary">...</SkTable>
+<SkTable kind="accent">...</SkTable>
+```
+
+## Custom Colors
+
+```vue
+<SkTable
+  base-color="oklch(0.2 0.05 260)"
+  text-color="oklch(0.9 0 0)"
+>
+  ...
+</SkTable>
+```
+
+## Accessibility
+
+SkTable renders as a standard `<table>` element. Use semantic `<thead>`, `<tbody>`, `<th>`, and `<td>` elements. Add `scope="col"` or `scope="row"` to header cells for screen reader clarity.

package/docs/components/tabs.md

@@ -0,0 +1,108 @@
+---
+component: SkTabs
+category: Navigation
+---
+
+# SkTabs
+
+A tabbed interface for organizing content into switchable panels. Composed of SkTabs, SkTabList, SkTab, SkTabPanels, and SkTabPanel. Built on RekaUI's Tabs primitive.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const activeTab = ref('overview');
+</script>
+
+<template>
+  <SkTabs v-model="activeTab" kind="primary">
+    <SkTabList>
+      <SkTab value="overview">Overview</SkTab>
+      <SkTab value="details">Details</SkTab>
+      <SkTab value="settings">Settings</SkTab>
+    </SkTabList>
+    <SkTabPanels>
+      <SkTabPanel value="overview">Overview content</SkTabPanel>
+      <SkTabPanel value="details">Details content</SkTabPanel>
+      <SkTabPanel value="settings">Settings content</SkTabPanel>
+    </SkTabPanels>
+  </SkTabs>
+</template>
+```
+
+## Composition
+
+- **SkTabs** -- Root container managing state and providing context.
+- **SkTabList** -- Container for tab triggers (the clickable tab buttons).
+- **SkTab** -- Individual tab trigger. Requires a `value` matching a SkTabPanel.
+- **SkTabPanels** -- Container for tab content panels.
+- **SkTabPanel** -- Content panel shown when its matching tab is active.
+
+## Orientation
+
+```vue
+<!-- Horizontal (default) -->
+<SkTabs v-model="tab" orientation="horizontal">...</SkTabs>
+
+<!-- Vertical -->
+<SkTabs v-model="tab" orientation="vertical">...</SkTabs>
+```
+
+## Placement
+
+Controls where the tab list appears relative to the content:
+
+```vue
+<SkTabs v-model="tab" placement="start">...</SkTabs>
+<SkTabs v-model="tab" placement="end">...</SkTabs>
+```
+
+## Flush Mode
+
+Use `flush` to apply negative margins so the tab list aligns with the parent container edges:
+
+```vue
+<SkPanel>
+  <SkTabs v-model="tab" flush>
+    ...
+  </SkTabs>
+</SkPanel>
+```
+
+## Kinds
+
+Set on SkTabs to apply to all tabs, or override per individual tab:
+
+```vue
+<SkTabs v-model="tab" kind="accent">
+  <SkTabList>
+    <SkTab value="a">Inherits Accent</SkTab>
+    <SkTab value="b" kind="danger">Override to Danger</SkTab>
+  </SkTabList>
+  ...
+</SkTabs>
+```
+
+## Disabled Tabs
+
+```vue
+<SkTab value="locked" disabled>Locked</SkTab>
+```
+
+## Custom Colors
+
+```vue
+<SkTabs
+  v-model="tab"
+  base-color="oklch(0.65 0.2 280)"
+  text-color="white"
+>
+  ...
+</SkTabs>
+```
+
+## Accessibility
+
+Built on RekaUI Tabs which provides `role="tablist"`, `role="tab"`, and `role="tabpanel"` with proper `aria-selected`, `aria-controls`, and `aria-labelledby` associations. Arrow keys navigate between tabs, Home/End jump to first/last tab.

package/docs/components/tag.md

@@ -0,0 +1,75 @@
+---
+component: SkTag
+category: Feedback
+---
+
+# SkTag
+
+A compact label component for metadata, categories, status indicators, or keywords. Supports removable tags with a close button.
+
+## Usage
+
+```vue
+<template>
+  <SkTag kind="primary">Featured</SkTag>
+</template>
+```
+
+## Variants
+
+- **solid** (default) -- Filled background.
+- **outline** -- Transparent with colored border.
+- **subtle** -- Light tinted background.
+- **ghost** -- Minimal, text-only appearance.
+
+```vue
+<SkTag variant="solid" kind="primary">Solid</SkTag>
+<SkTag variant="outline" kind="primary">Outline</SkTag>
+<SkTag variant="subtle" kind="primary">Subtle</SkTag>
+<SkTag variant="ghost" kind="primary">Ghost</SkTag>
+```
+
+## Kinds
+
+```vue
+<SkTag kind="neutral">Neutral</SkTag>
+<SkTag kind="primary">Primary</SkTag>
+<SkTag kind="accent">Accent</SkTag>
+<SkTag kind="success">Active</SkTag>
+<SkTag kind="warning">Pending</SkTag>
+<SkTag kind="danger">Error</SkTag>
+<SkTag kind="info">Info</SkTag>
+```
+
+## Sizes
+
+```vue
+<SkTag size="sm">Small</SkTag>
+<SkTag size="md">Medium</SkTag>
+<SkTag size="lg">Large</SkTag>
+```
+
+## Removable
+
+Add a close button that emits a `remove` event:
+
+```vue
+<SkTag kind="danger" removable @remove="handleRemove">
+  Removable Tag
+</SkTag>
+```
+
+## Custom Colors
+
+```vue
+<SkTag
+  base-color="oklch(0.6 0.25 300)"
+  text-color="white"
+>
+  Custom Purple
+</SkTag>
+```
+
+## Accessibility
+
+The remove button is keyboard-accessible. Developers should provide context (such as an `aria-label`) if the tag content alone does not convey its purpose to screen readers.