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

package/docs/components/spinner.md

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

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

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

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

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

package/docs/components/tags-input.md

@@ -1,88 +0,0 @@
----
-component: SkTagsInput
-category: Forms
----
-
-# SkTagsInput
-
-A multi-value tag input component for entering a list of string values. Type text and press Enter to add tags; use Backspace or the delete button to remove them. Built on RekaUI's TagsInput primitive.
-
-## Usage
-
-```vue
-<script setup>
-import { ref } from 'vue';
-
-const tags = ref(['vue', 'typescript']);
-</script>
-
-<template>
-  <SkTagsInput v-model="tags" placeholder="Add tag..." kind="primary" />
-</template>
-```
-
-## Max Tags
-
-Limit the number of tags. The input field disables when the limit is reached, but existing tags can still be removed:
-
-```vue
-<SkTagsInput v-model="tags" :max="5" />
-```
-
-## Paste Support
-
-By default, pasting text adds tags (splitting on common delimiters). Disable with:
-
-```vue
-<SkTagsInput v-model="tags" :add-on-paste="false" />
-```
-
-## Tag Styling
-
-Control the appearance of the tag badges within the input:
-
-```vue
-<SkTagsInput
-  v-model="tags"
-  kind="primary"
-  tag-kind="accent"
-  tag-variant="outline"
-/>
-```
-
-## Kinds
-
-```vue
-<SkTagsInput v-model="tags" kind="primary" />
-<SkTagsInput v-model="tags" kind="accent" />
-```
-
-When nested inside SkField, the kind is automatically injected.
-
-## Sizes
-
-```vue
-<SkTagsInput v-model="tags" size="sm" />
-<SkTagsInput v-model="tags" size="md" />
-<SkTagsInput v-model="tags" size="lg" />
-```
-
-## States
-
-```vue
-<SkTagsInput v-model="tags" disabled />
-```
-
-## Custom Colors
-
-```vue
-<SkTagsInput
-  v-model="tags"
-  base-color="oklch(0.5 0.2 260)"
-  text-color="white"
-/>
-```
-
-## Accessibility
-
-Built on RekaUI TagsInput which provides keyboard management: Enter adds a tag, Backspace removes the last tag when the input is empty, and Delete buttons on individual tags are keyboard-accessible.

package/docs/components/textarea.md

@@ -1,80 +0,0 @@
----
-component: SkTextarea
-category: Forms
----
-
-# SkTextarea
-
-A multiline text input component with validation states and semantic color support. Automatically inherits kind from a parent SkField.
-
-## Usage
-
-```vue
-<script setup>
-import { ref } from 'vue';
-
-const message = ref('');
-</script>
-
-<template>
-  <SkTextarea v-model="message" placeholder="Write your message..." :rows="6" />
-</template>
-```
-
-## Rows
-
-Control the visible height with the `rows` prop (default: 4):
-
-```vue
-<SkTextarea v-model="val" :rows="8" />
-```
-
-## Kinds
-
-```vue
-<SkTextarea v-model="val" kind="success" placeholder="Valid" />
-<SkTextarea v-model="val" kind="danger" placeholder="Invalid" />
-```
-
-When nested inside SkField, the kind is automatically injected based on field validation state.
-
-## Sizes
-
-```vue
-<SkTextarea v-model="val" size="sm" />
-<SkTextarea v-model="val" size="md" />
-<SkTextarea v-model="val" size="lg" />
-```
-
-## States
-
-```vue
-<SkTextarea v-model="val" disabled placeholder="Disabled" />
-<SkTextarea v-model="val" readonly />
-```
-
-## Custom Colors
-
-```vue
-<SkTextarea
-  v-model="val"
-  base-color="oklch(0.5 0.15 260)"
-  text-color="white"
-/>
-```
-
-## Composition
-
-Pair with SkField for labels, descriptions, and error messages:
-
-```vue
-<SkField label="Bio" description="Tell us about yourself." :error="bioError">
-  <template #default="{ id, ...attrs }">
-    <SkTextarea :id="id" v-bind="attrs" v-model="bio" :rows="4" />
-  </template>
-</SkField>
-```
-
-## Accessibility
-
-Renders as a native `<textarea>` 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/theme.md

@@ -1,65 +0,0 @@
----
-component: SkTheme
-category: Theming
----
-
-# SkTheme
-
-A theme provider component that controls the color scheme for all child components. Sets a `data-scheme` attribute that CSS rules use to apply different semantic token values.
-
-## Usage
-
-```vue
-<template>
-  <SkTheme theme="colorful">
-    <SkPanel kind="primary">
-      <SkButton kind="accent">Themed Button</SkButton>
-    </SkPanel>
-  </SkTheme>
-</template>
-```
-
-## Available Themes
-
-- **greyscale** (default) -- Monochromatic palette.
-- **colorful** -- Vibrant cyberpunk colors.
-
-Custom theme names can be used if matching CSS custom property overrides are defined under the corresponding `[data-scheme="..."]` selector.
-
-## Nested Themes
-
-Themes can be nested. The inner SkTheme overrides the outer one for its subtree:
-
-```vue
-<SkTheme theme="greyscale">
-  <SkButton kind="primary">Greyscale</SkButton>
-
-  <SkTheme theme="colorful">
-    <SkButton kind="primary">Colorful</SkButton>
-  </SkTheme>
-</SkTheme>
-```
-
-## Programmatic Switching
-
-The `useTheme` composable enables runtime theme changes:
-
-```vue
-<script setup>
-import { useTheme } from '@skewedaspect/sleekspace-ui';
-
-const { currentTheme, setTheme } = useTheme();
-</script>
-
-<template>
-  <SkButton @click="setTheme('colorful')">Go Colorful</SkButton>
-</template>
-```
-
-## Portal Components
-
-SkTheme provides the current theme value via Vue's provide/inject system. Portal components (SkModal, SkDropdown, SkListbox, SkTooltip, SkPopover, SkToast) automatically consume this value and apply `data-scheme` on their portaled content so they inherit the correct theme.
-
-## Accessibility
-
-SkTheme is a transparent wrapper that does not affect the DOM semantics. It renders a single `<div>` with a `data-scheme` attribute.