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

package/docs/components/radio/custom-colors.md

@@ -0,0 +1,24 @@
+---
+section: custom-colors
+order: 7
+---
+
+Override radio colors with custom OKLCH, hex, or CSS variable values.
+
+```vue
+<SkRadioGroup v-model="selected" kind="primary">
+  <SkRadio
+    value="purple"
+    label="Custom purple"
+    base-color="oklch(0.7 0.25 300)"
+    text-color="white"
+  />
+  <SkRadio
+    value="green"
+    label="Custom green"
+    base-color="#10b981"
+    text-color="white"
+  />
+  <SkRadio value="default" label="Default styling" />
+</SkRadioGroup>
+```

package/docs/components/radio/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkRadio
+
+A radio button component for exclusive selection within a group. SkRadio must be used inside SkRadioGroup. Built on RekaUI's RadioGroup primitive.

package/docs/components/radio/kinds.md

@@ -0,0 +1,23 @@
+---
+section: kinds
+order: 3
+---
+
+Radio groups support all semantic kinds for different contexts. These are theme-aware. Set on the group to apply to all radios, or override per individual radio.
+
+```vue
+<SkRadioGroup v-model="selected" kind="neutral">
+  <SkRadio value="a" label="Option A" />
+  <SkRadio value="b" label="Option B" />
+</SkRadioGroup>
+
+<SkRadioGroup v-model="selected" kind="primary">
+  <SkRadio value="a" label="Option A" />
+  <SkRadio value="b" label="Option B" />
+</SkRadioGroup>
+
+<SkRadioGroup v-model="selected" kind="accent">
+  <SkRadio value="a" label="Inherits accent" />
+  <SkRadio value="b" label="Override to danger" kind="danger" />
+</SkRadioGroup>
+```

package/docs/components/radio/orientation.md

@@ -0,0 +1,22 @@
+---
+section: orientation
+order: 4
+---
+
+Radio groups can be arranged horizontally or vertically.
+
+```vue
+<!-- Vertical (default) -->
+<SkRadioGroup v-model="selected" kind="primary" orientation="vertical">
+  <SkRadio value="1" label="Option 1" />
+  <SkRadio value="2" label="Option 2" />
+  <SkRadio value="3" label="Option 3" />
+</SkRadioGroup>
+
+<!-- Horizontal -->
+<SkRadioGroup v-model="selected" kind="primary" orientation="horizontal">
+  <SkRadio value="1" label="Option 1" />
+  <SkRadio value="2" label="Option 2" />
+  <SkRadio value="3" label="Option 3" />
+</SkRadioGroup>
+```

package/docs/components/radio/sizes.md

@@ -0,0 +1,23 @@
+---
+section: sizes
+order: 5
+---
+
+Radio buttons come in four sizes. Set on the group or individual radios.
+
+```vue
+<SkRadioGroup v-model="selected" kind="primary" size="sm">
+  <SkRadio value="a" label="Small" />
+  <SkRadio value="b" label="Another" />
+</SkRadioGroup>
+
+<SkRadioGroup v-model="selected" kind="primary" size="md">
+  <SkRadio value="a" label="Medium (default)" />
+  <SkRadio value="b" label="Another" />
+</SkRadioGroup>
+
+<SkRadioGroup v-model="selected" kind="primary" size="lg">
+  <SkRadio value="a" label="Large" />
+  <SkRadio value="b" label="Another" />
+</SkRadioGroup>
+```

package/docs/components/radio/states.md

@@ -0,0 +1,21 @@
+---
+section: states
+order: 6
+---
+
+Individual radios or entire groups can be disabled.
+
+```vue
+<!-- Disabled entire group -->
+<SkRadioGroup v-model="selected" kind="primary" disabled>
+  <SkRadio value="a" label="Option A" />
+  <SkRadio value="b" label="Option B" />
+</SkRadioGroup>
+
+<!-- Disabled individual radio -->
+<SkRadioGroup v-model="selected" kind="primary">
+  <SkRadio value="a" label="Option A" />
+  <SkRadio value="b" label="Option B (disabled)" disabled />
+  <SkRadio value="c" label="Option C" />
+</SkRadioGroup>
+```

package/docs/components/radio/usage.md

@@ -0,0 +1,21 @@
+---
+section: usage
+order: 2
+---
+
+Radio group with multiple options. Only one can be selected at a time. Defaults to neutral kind.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const selected = ref('option1')
+</script>
+
+<template>
+  <SkRadioGroup v-model="selected">
+    <SkRadio value="option1" label="Option 1" />
+    <SkRadio value="option2" label="Option 2" />
+    <SkRadio value="option3" label="Option 3" />
+  </SkRadioGroup>
+</template>
+```

package/docs/components/sidebar/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkSidebar
+category: Navigation
+sections:
+  - intro
+  - usage
+  - sections
+  - router
+  - active-state
+  - kinds
+  - custom-colors

package/docs/components/sidebar/active-state.md

@@ -0,0 +1,35 @@
+---
+section: active-state
+order: 5
+---
+
+Manually control the active state with the `active` prop when not using Vue Router.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const activeItem = ref('option1');
+</script>
+
+<template>
+    <SkSidebar kind="success">
+        <SkSidebarSection title="Menu">
+            <SkSidebarItem
+                href="#option1"
+                :active="activeItem === 'option1'"
+                @click="activeItem = 'option1'"
+            >
+                Option 1
+            </SkSidebarItem>
+            <SkSidebarItem
+                href="#option2"
+                :active="activeItem === 'option2'"
+                @click="activeItem = 'option2'"
+            >
+                Option 2
+            </SkSidebarItem>
+        </SkSidebarSection>
+    </SkSidebar>
+</template>
+```

package/docs/components/sidebar/custom-colors.md

@@ -0,0 +1,20 @@
+---
+section: custom-colors
+order: 7
+---
+
+Use `base-color` to customize the sidebar background with any CSS color value. Provide `text-color` for sidebar text.
+
+```vue
+<SkSidebar
+    base-color="oklch(0.3 0.15 260)"
+    text-color="oklch(0.85 0.05 260)"
+>
+    <SkSidebarSection title="Navigation">
+        <SkSidebarItem href="#dashboard">Dashboard</SkSidebarItem>
+        <SkSidebarItem href="#analytics">Analytics</SkSidebarItem>
+        <SkSidebarItem href="#reports">Reports</SkSidebarItem>
+        <SkSidebarItem href="#settings">Settings</SkSidebarItem>
+    </SkSidebarSection>
+</SkSidebar>
+```

package/docs/components/sidebar/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkSidebar
+
+A sticky navigation sidebar container with semantic color theming. Composed of SkSidebarSection and SkSidebarItem for structured navigation.

package/docs/components/sidebar/kinds.md

@@ -0,0 +1,22 @@
+---
+section: kinds
+order: 6
+---
+
+Apply semantic colors to sidebars using the `kind` prop.
+
+```vue
+<SkSidebar kind="primary">
+    <SkSidebarSection title="Primary">
+        <SkSidebarItem href="#">Item 1</SkSidebarItem>
+        <SkSidebarItem href="#">Item 2</SkSidebarItem>
+    </SkSidebarSection>
+</SkSidebar>
+
+<SkSidebar kind="success">
+    <SkSidebarSection title="Success">
+        <SkSidebarItem href="#">Item 1</SkSidebarItem>
+        <SkSidebarItem href="#">Item 2</SkSidebarItem>
+    </SkSidebarSection>
+</SkSidebar>
+```

package/docs/components/sidebar/router.md

@@ -0,0 +1,24 @@
+---
+section: router
+order: 4
+---
+
+Use the `as` prop to render items as RouterLink components. The `.router-link-active` class is automatically styled.
+
+```vue
+<SkSidebar kind="accent">
+    <SkSidebarSection title="Pages">
+        <SkSidebarItem as="RouterLink" to="/dashboard">
+            Dashboard
+        </SkSidebarItem>
+        <SkSidebarItem as="RouterLink" to="/projects">
+            Projects
+        </SkSidebarItem>
+        <SkSidebarItem as="RouterLink" to="/settings">
+            Settings
+        </SkSidebarItem>
+    </SkSidebarSection>
+</SkSidebar>
+
+<!-- Active route automatically highlighted with .router-link-active -->
+```

package/docs/components/sidebar/sections.md

@@ -0,0 +1,24 @@
+---
+section: sections
+order: 3
+---
+
+Organize navigation into multiple sections with titles. Use SkDivider to visually separate sections.
+
+```vue
+<SkSidebar kind="primary">
+    <SkSidebarSection title="Main">
+        <SkSidebarItem href="#dashboard">Dashboard</SkSidebarItem>
+        <SkSidebarItem href="#projects">Projects</SkSidebarItem>
+        <SkSidebarItem href="#tasks">Tasks</SkSidebarItem>
+    </SkSidebarSection>
+
+    <SkDivider kind="primary" />
+
+    <SkSidebarSection title="Settings">
+        <SkSidebarItem href="#profile">Profile</SkSidebarItem>
+        <SkSidebarItem href="#preferences">Preferences</SkSidebarItem>
+        <SkSidebarItem href="#logout">Logout</SkSidebarItem>
+    </SkSidebarSection>
+</SkSidebar>
+```

package/docs/components/sidebar/usage.md

@@ -0,0 +1,25 @@
+---
+section: usage
+order: 2
+---
+
+Create a sidebar with sections and items. The sidebar is sticky and will scroll independently if content exceeds viewport height.
+
+```vue
+<template>
+    <div class="layout">
+        <SkSidebar kind="neutral">
+            <SkSidebarSection title="Navigation">
+                <SkSidebarItem href="#home">Home</SkSidebarItem>
+                <SkSidebarItem href="#products">Products</SkSidebarItem>
+                <SkSidebarItem href="#about">About</SkSidebarItem>
+                <SkSidebarItem href="#contact">Contact</SkSidebarItem>
+            </SkSidebarSection>
+        </SkSidebar>
+
+        <main class="content">
+            <!-- Your content here -->
+        </main>
+    </div>
+</template>
+```

package/docs/components/skeleton/_meta.yaml

@@ -0,0 +1,8 @@
+component: SkSkeleton
+category: Feedback
+sections:
+  - intro
+  - usage
+  - variants
+  - animations
+  - composition

package/docs/components/skeleton/animations.md

@@ -0,0 +1,17 @@
+---
+section: animations
+order: 4
+---
+
+Two animation styles are available: shimmer (gradient sweep) and pulse (opacity fade).
+
+```vue
+<!-- Shimmer - gradient sweep (default) -->
+<SkSkeleton animation="shimmer" />
+
+<!-- Pulse - opacity fade -->
+<SkSkeleton animation="pulse" />
+
+<!-- None - static placeholder -->
+<SkSkeleton animation="none" />
+```

package/docs/components/skeleton/composition.md

@@ -0,0 +1,22 @@
+---
+section: composition
+order: 5
+---
+
+Combine skeletons to create loading states for complex components like cards.
+
+```vue
+<SkPanel kind="neutral">
+    <div class="flex gap-3 mb-4">
+        <SkSkeleton variant="circular" width="40px" />
+        <div class="flex-1 flex flex-col gap-2">
+            <SkSkeleton width="60%" />
+            <SkSkeleton width="40%" />
+        </div>
+    </div>
+    <SkSkeleton variant="rectangular" height="120px" class="mb-4" />
+    <SkSkeleton class="mb-2" />
+    <SkSkeleton width="80%" class="mb-2" />
+    <SkSkeleton width="60%" />
+</SkPanel>
+```

package/docs/components/skeleton/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# 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.

package/docs/components/skeleton/usage.md

@@ -0,0 +1,12 @@
+---
+section: usage
+order: 2
+---
+
+Use skeleton loaders to show placeholder content while data is being fetched.
+
+```vue
+<SkSkeleton />
+<SkSkeleton width="80%" />
+<SkSkeleton width="60%" />
+```

package/docs/components/skeleton/variants.md

@@ -0,0 +1,17 @@
+---
+section: variants
+order: 3
+---
+
+Choose a variant that matches the content being loaded: `text` (default) for text lines, `circular` for avatars and icons, `rectangular` for cards and images.
+
+```vue
+<!-- Text (pill-shaped) -->
+<SkSkeleton variant="text" width="200px" />
+
+<!-- Circular (perfect circle) -->
+<SkSkeleton variant="circular" width="48px" />
+
+<!-- Rectangular (beveled corners) -->
+<SkSkeleton variant="rectangular" width="200px" height="120px" />
+```

package/docs/components/slider/_meta.yaml

@@ -0,0 +1,12 @@
+component: SkSlider
+category: Forms
+sections:
+  - intro
+  - usage
+  - kinds
+  - sizes
+  - range
+  - vertical
+  - step
+  - custom-colors
+  - accessibility

package/docs/components/slider/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 9
+---
+
+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/slider/custom-colors.md

@@ -0,0 +1,14 @@
+---
+section: custom-colors
+order: 8
+---
+
+Override track and thumb colors with custom OKLCH values using `base-color` and `thumb-color`.
+
+```vue
+<SkSlider
+    v-model="value"
+    base-color="oklch(0.7 0.25 150)"
+    thumb-color="oklch(0.9 0.1 150)"
+/>
+```

package/docs/components/slider/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# 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.

package/docs/components/slider/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 3
+---
+
+All seven semantic kinds are available to match your content's purpose.
+
+```vue
+<SkSlider v-model="value" kind="neutral" />
+<SkSlider v-model="value" kind="primary" />
+<SkSlider v-model="value" kind="accent" />
+<SkSlider v-model="value" kind="info" />
+<SkSlider v-model="value" kind="success" />
+<SkSlider v-model="value" kind="warning" />
+<SkSlider v-model="value" kind="danger" />
+```

package/docs/components/slider/range.md

@@ -0,0 +1,16 @@
+---
+section: range
+order: 5
+---
+
+Use an array value to enable range selection with multiple thumbs.
+
+```vue
+<script setup>
+const range = ref([25, 75]);
+</script>
+
+<template>
+    <SkSlider v-model="range" kind="accent" />
+</template>
+```

package/docs/components/slider/sizes.md

@@ -0,0 +1,14 @@
+---
+section: sizes
+order: 4
+---
+
+Control the slider size with the `size` prop.
+
+```vue
+<SkSlider v-model="value" size="xs" />
+<SkSlider v-model="value" size="sm" />
+<SkSlider v-model="value" size="md" />
+<SkSlider v-model="value" size="lg" />
+<SkSlider v-model="value" size="xl" />
+```

package/docs/components/slider/step.md

@@ -0,0 +1,13 @@
+---
+section: step
+order: 7
+---
+
+Control the increment value with the `step` prop.
+
+```vue
+<SkSlider
+    v-model="value"
+    :step="10"
+/>
+```

package/docs/components/slider/usage.md

@@ -0,0 +1,16 @@
+---
+section: usage
+order: 2
+---
+
+Use sliders for numeric input where users can drag to select values within a range. Bind the value with `v-model`.
+
+```vue
+<script setup>
+const volume = ref(50);
+</script>
+
+<template>
+    <SkSlider v-model="volume" />
+</template>
+```

package/docs/components/slider/vertical.md

@@ -0,0 +1,14 @@
+---
+section: vertical
+order: 6
+---
+
+Set `orientation="vertical"` for vertical sliders.
+
+```vue
+<SkSlider
+    v-model="value"
+    orientation="vertical"
+    kind="primary"
+/>
+```

package/docs/components/spinner/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkSpinner
+category: Feedback
+sections:
+  - intro
+  - usage
+  - variants
+  - kinds
+  - sizes
+  - custom-colors
+  - accessibility

package/docs/components/spinner/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 7
+---
+
+Renders with `role="status"`, `aria-live="polite"`, and `aria-label="Loading"`. Screen readers will announce the loading state.

package/docs/components/spinner/custom-colors.md

@@ -0,0 +1,13 @@
+---
+section: custom-colors
+order: 6
+---
+
+Override the spinner color with custom OKLCH values using the `color` prop (not `baseColor`).
+
+```vue
+<SkSpinner
+    variant="circular"
+    color="oklch(0.7 0.25 150)"
+/>
+```

package/docs/components/spinner/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkSpinner
+
+An animated loading indicator with three cyberpunk-themed animation variants. Use to communicate ongoing processing or loading.

package/docs/components/spinner/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 4
+---
+
+All seven semantic kinds are available to match your content's purpose.
+
+```vue
+<SkSpinner kind="neutral" />
+<SkSpinner kind="primary" />
+<SkSpinner kind="accent" />
+<SkSpinner kind="info" />
+<SkSpinner kind="success" />
+<SkSpinner kind="warning" />
+<SkSpinner kind="danger" />
+```

package/docs/components/spinner/sizes.md

@@ -0,0 +1,14 @@
+---
+section: sizes
+order: 5
+---
+
+Control the spinner size with the `size` prop.
+
+```vue
+<SkSpinner size="xs" />
+<SkSpinner size="sm" />
+<SkSpinner size="md" />
+<SkSpinner size="lg" />
+<SkSpinner size="xl" />
+```

package/docs/components/spinner/usage.md

@@ -0,0 +1,10 @@
+---
+section: usage
+order: 2
+---
+
+Use spinners to indicate loading states. The default circular variant works well for most cases.
+
+```vue
+<SkSpinner />
+```