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

package/docs/components/accordion.md

@@ -1,92 +0,0 @@
----
-component: SkAccordion
-category: Layout
----
-
-# SkAccordion
-
-A collapsible sections container for organizing content into expandable panels. Supports single or multiple open items with smooth animations. Built on RekaUI's Accordion primitive.
-
-## Usage
-
-```vue
-<script setup>
-import { ref } from 'vue';
-
-const openItem = ref('item-1');
-</script>
-
-<template>
-  <SkAccordion v-model="openItem" kind="primary">
-    <SkAccordionItem value="item-1" title="Section One">
-      Content for section one.
-    </SkAccordionItem>
-    <SkAccordionItem value="item-2" title="Section Two">
-      Content for section two.
-    </SkAccordionItem>
-  </SkAccordion>
-</template>
-```
-
-## Single vs Multiple Mode
-
-By default, only one item can be open at a time (`type="single"`). Set `type="multiple"` to allow several items to be expanded simultaneously:
-
-```vue
-<script setup>
-import { ref } from 'vue';
-
-const openItems = ref(['item-1']);
-</script>
-
-<template>
-  <SkAccordion type="multiple" v-model="openItems">
-    <SkAccordionItem value="item-1" title="First">...</SkAccordionItem>
-    <SkAccordionItem value="item-2" title="Second">...</SkAccordionItem>
-    <SkAccordionItem value="item-3" title="Third">...</SkAccordionItem>
-  </SkAccordion>
-</template>
-```
-
-In single mode, set `collapsible` to allow closing all items (by default, one item always stays open).
-
-## Kinds
-
-The `kind` prop on SkAccordion is inherited by all child items:
-
-```vue
-<SkAccordion kind="accent">
-  <SkAccordionItem value="a" title="Accent Item">...</SkAccordionItem>
-</SkAccordion>
-```
-
-Individual items can override the parent kind with their own `kind` prop.
-
-## Slots
-
-SkAccordionItem exposes a `title` slot for custom header content:
-
-```vue
-<SkAccordionItem value="item-1">
-  <template #title="{ open }">
-    <span>Custom Title</span>
-    <SkTag v-if="open" kind="primary" size="sm">Open</SkTag>
-  </template>
-  Panel content here.
-</SkAccordionItem>
-```
-
-## Custom Colors
-
-```vue
-<SkAccordion
-  base-color="oklch(0.6 0.2 280)"
-  text-color="white"
->
-  <SkAccordionItem value="a" title="Custom Colors">...</SkAccordionItem>
-</SkAccordion>
-```
-
-## Accessibility
-
-Built on RekaUI Accordion which provides full WAI-ARIA accordion pattern support. Keyboard navigation with Arrow keys moves focus between headers, Enter/Space toggles the focused item, and Home/End jump to first/last header.

package/docs/components/alert.md

@@ -1,72 +0,0 @@
----
-component: SkAlert
-category: Feedback
----
-
-# SkAlert
-
-A feedback component for displaying informational messages. Each kind renders a corresponding icon (info circle, checkmark, warning triangle, or error cross) alongside the message content.
-
-## Usage
-
-```vue
-<template>
-  <SkAlert kind="success">
-    Your changes have been saved.
-  </SkAlert>
-</template>
-```
-
-## Kinds
-
-Alert supports a focused subset of semantic kinds: `info` (default), `success`, `warning`, and `danger`. Each kind includes a matching SVG icon.
-
-```vue
-<template>
-  <SkAlert kind="info">Informational note.</SkAlert>
-  <SkAlert kind="success">Operation completed.</SkAlert>
-  <SkAlert kind="warning">Proceed with caution.</SkAlert>
-  <SkAlert kind="danger">An error occurred.</SkAlert>
-</template>
-```
-
-## Variants
-
-Set `prominent` to apply a bolder, darker background style:
-
-```vue
-<SkAlert kind="danger" prominent>
-  Critical system failure.
-</SkAlert>
-```
-
-## Slots
-
-The `icon` slot replaces the default kind-specific icon:
-
-```vue
-<SkAlert kind="info">
-  <template #icon>
-    <MyCustomIcon />
-  </template>
-  Custom icon alert.
-</SkAlert>
-```
-
-The default slot holds the message content.
-
-## Custom Colors
-
-```vue
-<SkAlert
-  base-color="oklch(0.65 0.25 280)"
-  text-color="white"
-  prominent
->
-  Custom purple alert.
-</SkAlert>
-```
-
-## Accessibility
-
-Renders with `role="alert"` which announces the content to screen readers when it appears in the DOM.

package/docs/components/avatar.md

@@ -1,69 +0,0 @@
----
-component: SkAvatar
-category: Feedback
----
-
-# SkAvatar
-
-A user profile avatar component with three fallback levels: image, initials, and a default person icon. Renders as a square with beveled top-left and bottom-right corners.
-
-## Usage
-
-```vue
-<template>
-  <SkAvatar src="/photo.jpg" alt="Jane Doe" />
-</template>
-```
-
-## Fallback Chain
-
-The avatar displays content in priority order:
-
-1. **Image** -- If `src` is provided and loads successfully.
-2. **Initials** -- If the image fails or no `src`, displays up to 2 uppercase characters from `initials`.
-3. **Icon** -- Falls back to a default person silhouette SVG, or content from the `icon` slot.
-
-```vue
-<template>
-  <!-- Image avatar -->
-  <SkAvatar src="/photo.jpg" alt="Jane" />
-
-  <!-- Initials avatar -->
-  <SkAvatar initials="JD" kind="primary" />
-
-  <!-- Default icon avatar -->
-  <SkAvatar kind="accent" />
-</template>
-```
-
-## Sizes
-
-```vue
-<SkAvatar size="xs" initials="XS" />
-<SkAvatar size="sm" initials="SM" />
-<SkAvatar size="md" initials="MD" />
-<SkAvatar size="lg" initials="LG" />
-<SkAvatar size="xl" initials="XL" />
-```
-
-## Kinds
-
-```vue
-<SkAvatar kind="primary" initials="PR" />
-<SkAvatar kind="accent" initials="AC" />
-<SkAvatar kind="success" initials="OK" />
-```
-
-## Custom Colors
-
-```vue
-<SkAvatar
-  base-color="oklch(0.6 0.25 300)"
-  text-color="white"
-  initials="AB"
-/>
-```
-
-## Accessibility
-
-Provide meaningful `alt` text when using image avatars. For initials-only or icon avatars, surrounding context should convey the user identity.

package/docs/components/breadcrumbs.md

@@ -1,65 +0,0 @@
----
-component: SkBreadcrumbs
-category: Navigation
----
-
-# SkBreadcrumbs
-
-A navigation breadcrumb trail showing the current page location within a hierarchy. Automatically inserts separator characters between items.
-
-## Usage
-
-```vue
-<template>
-  <SkBreadcrumbs>
-    <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
-    <SkBreadcrumbItem href="/docs">Docs</SkBreadcrumbItem>
-    <SkBreadcrumbItem current>Button</SkBreadcrumbItem>
-  </SkBreadcrumbs>
-</template>
-```
-
-## Separator
-
-The default separator is `/`. Override it with the `separator` prop:
-
-```vue
-<SkBreadcrumbs separator=">">
-  <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
-  <SkBreadcrumbItem current>Page</SkBreadcrumbItem>
-</SkBreadcrumbs>
-```
-
-## Item Rendering
-
-SkBreadcrumbItem renders as different elements based on its props:
-
-- **`to`** -- Renders as `<router-link>` for Vue Router navigation.
-- **`href`** -- Renders as `<a>` for standard links.
-- **`current`** or **`disabled`** -- Renders as `<span>` (non-interactive).
-- **No navigation prop** -- Renders as `<button>`.
-
-## Kinds
-
-```vue
-<SkBreadcrumbs kind="primary">
-  <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
-  <SkBreadcrumbItem current>Current Page</SkBreadcrumbItem>
-</SkBreadcrumbs>
-```
-
-## Custom Colors
-
-```vue
-<SkBreadcrumbs
-  base-color="oklch(0.7 0.2 260)"
-  text-color="white"
->
-  <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
-  <SkBreadcrumbItem current>Page</SkBreadcrumbItem>
-</SkBreadcrumbs>
-```
-
-## Accessibility
-
-Renders inside a `<nav>` element with `aria-label="Breadcrumb"`. The current page item receives `aria-current="page"`. Disabled items are non-interactive.

package/docs/components/button.md

@@ -1,110 +0,0 @@
----
-component: SkButton
-category: Forms
----
-
-# SkButton
-
-A versatile button component with multiple visual variants, sizes, and interactive states. Can render as a `<button>`, `<a>`, or `<router-link>` depending on the props provided.
-
-## Usage
-
-```vue
-<template>
-  <SkButton kind="primary" variant="solid">
-    Click Me
-  </SkButton>
-</template>
-```
-
-## Variants
-
-- **solid** (default) -- Filled background with contrasting text.
-- **outline** -- Transparent background with colored border.
-- **subtle** -- Light tinted background.
-- **ghost** -- No background, colored text only.
-- **link** -- Styled as an inline text link.
-
-```vue
-<SkButton variant="solid">Solid</SkButton>
-<SkButton variant="outline">Outline</SkButton>
-<SkButton variant="subtle">Subtle</SkButton>
-<SkButton variant="ghost">Ghost</SkButton>
-<SkButton variant="link">Link</SkButton>
-```
-
-## Kinds
-
-```vue
-<SkButton kind="primary">Primary</SkButton>
-<SkButton kind="accent">Accent</SkButton>
-<SkButton kind="success">Success</SkButton>
-<SkButton kind="warning">Warning</SkButton>
-<SkButton kind="danger">Danger</SkButton>
-<SkButton kind="info">Info</SkButton>
-<SkButton kind="neutral">Neutral</SkButton>
-```
-
-## Sizes
-
-```vue
-<SkButton size="xs">Extra Small</SkButton>
-<SkButton size="sm">Small</SkButton>
-<SkButton size="md">Medium</SkButton>
-<SkButton size="lg">Large</SkButton>
-<SkButton size="xl">Extra Large</SkButton>
-```
-
-## Slots
-
-- **leading** -- Icon or content before the button text.
-- **default** -- Button label text.
-- **trailing** -- Icon or content after the button text.
-- **icon** -- Icon-only mode (renders a square button when no default slot is used).
-
-```vue
-<SkButton kind="primary">
-  <template #leading><SearchIcon /></template>
-  Search
-</SkButton>
-
-<SkButton kind="danger">
-  <template #icon><TrashIcon /></template>
-</SkButton>
-```
-
-## States
-
-- **disabled** -- Reduces opacity and prevents interaction.
-- **loading** -- Shows a spinner overlay and disables the button.
-- **pressed** -- Toggle state for toolbar-style buttons. Sets `aria-pressed`.
-
-```vue
-<SkButton disabled>Disabled</SkButton>
-<SkButton :loading="isSaving">Save</SkButton>
-<SkButton :pressed="isBold" @click="isBold = !isBold">Bold</SkButton>
-```
-
-## Link Rendering
-
-Provide `href` for an anchor tag or `to` for Vue Router navigation:
-
-```vue
-<SkButton href="https://example.com">External Link</SkButton>
-<SkButton :to="{ name: 'dashboard' }">Dashboard</SkButton>
-```
-
-## Custom Colors
-
-```vue
-<SkButton
-  base-color="oklch(0.7 0.25 300)"
-  text-color="white"
->
-  Custom Purple
-</SkButton>
-```
-
-## Accessibility
-
-Renders with `role="button"`. Loading state sets `aria-busy="true"`. Pressed state sets `aria-pressed="true"`. Disabled buttons cannot receive focus via mouse click but remain in the tab order with the disabled attribute.

package/docs/components/card.md

@@ -1,87 +0,0 @@
----
-component: SkCard
-category: Layout
----
-
-# SkCard
-
-A structured content container with optional header, media, content, and footer sections. Built on top of SkPanel, it inherits beveled corners and decorative accents.
-
-## Usage
-
-```vue
-<template>
-  <SkCard kind="primary" title="Card Title">
-    <p>Card body content.</p>
-    <template #footer>
-      <SkButton kind="primary">Action</SkButton>
-    </template>
-  </SkCard>
-</template>
-```
-
-## Slots
-
-- **header** -- Rendered above the content area. Also appears when the `title` prop is set.
-- **media** -- Full-width section for images or video, rendered between header and content.
-- **default** -- Main content area.
-- **footer** -- Bottom section, typically for action buttons.
-
-```vue
-<SkCard>
-  <template #header>
-    <h3>Custom Header</h3>
-  </template>
-  <template #media>
-    <img src="/banner.jpg" alt="Banner" />
-  </template>
-  <p>Body content.</p>
-  <template #footer>
-    <SkButton variant="ghost">Cancel</SkButton>
-    <SkButton kind="primary">Save</SkButton>
-  </template>
-</SkCard>
-```
-
-## Kinds
-
-```vue
-<SkCard kind="accent" title="Accent Card">Content</SkCard>
-<SkCard kind="info" title="Info Card">Content</SkCard>
-```
-
-## Sizes
-
-The `size` prop controls padding and spacing within the card:
-
-```vue
-<SkCard size="sm" title="Compact">Small padding.</SkCard>
-<SkCard size="lg" title="Spacious">Large padding.</SkCard>
-```
-
-## Scrollable Content
-
-Set `scrollable` to make the content area independently scrollable when the card has a constrained height:
-
-```vue
-<SkCard scrollable style="height: 300px" title="Scrollable">
-  <p>Long content that scrolls...</p>
-</SkCard>
-```
-
-## Custom Colors
-
-```vue
-<SkCard
-  base-color="#1e293b"
-  text-color="#e2e8f0"
-  header-color="#0f172a"
-  title="Dark Card"
->
-  Custom colored card with a darker header.
-</SkCard>
-```
-
-## Accessibility
-
-Semantic structure is the developer's responsibility. Use appropriate heading levels in the header slot and provide alt text for media content.

package/docs/components/checkbox.md

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

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

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