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

package/docs/components/pagination.md

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

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

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

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

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

package/docs/components/sidebar.md

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

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

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