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

package/docs/components/card/neon-kinds.md

@@ -0,0 +1,24 @@
+---
+section: neon-kinds
+order: 4
+---
+
+Use vibrant neon colors for eye-catching cards that stand out: `neon-blue`, `neon-orange`, `neon-purple`, `neon-green`, `neon-mint`, and `neon-pink`.
+
+```vue
+<SkCard kind="neon-blue" title="Neon Blue">
+    <p>Electric blue styling</p>
+</SkCard>
+
+<SkCard kind="neon-orange" title="Neon Orange">
+    <p>Vibrant orange styling</p>
+</SkCard>
+
+<SkCard kind="neon-purple" title="Neon Purple">
+    <p>Bold purple styling</p>
+</SkCard>
+
+<SkCard kind="neon-green" title="Neon Green">
+    <p>Bright green styling</p>
+</SkCard>
+```

package/docs/components/card/no-decoration.md

@@ -0,0 +1,15 @@
+---
+section: no-decoration
+order: 7
+---
+
+Remove the corner decoration for a cleaner, more minimalist appearance using the `no-decoration` prop.
+
+```vue
+<SkCard kind="primary" title="Clean Card" :no-decoration="true">
+    <p>This card has no corner decoration for a cleaner look.</p>
+    <template #footer>
+        <SkButton size="sm" kind="primary">Action</SkButton>
+    </template>
+</SkCard>
+```

package/docs/components/card/scrollable.md

@@ -0,0 +1,23 @@
+---
+section: scrollable
+order: 6
+---
+
+Use the `scrollable` prop to make the content area scroll while keeping header and footer fixed. The card needs a constrained height.
+
+```vue
+<!-- With footer -->
+<SkCard kind="primary" title="With Footer" scrollable style="height: 280px;">
+    <p>This content area is scrollable. The header and footer remain fixed.</p>
+    <p class="mt-4">Lorem ipsum dolor sit amet...</p>
+    <template #footer>
+        <SkButton size="sm" kind="primary">Fixed Footer Action</SkButton>
+    </template>
+</SkCard>
+
+<!-- Without footer - scrollbar respects cut corner -->
+<SkCard kind="accent" title="No Footer" scrollable style="height: 280px;">
+    <p>Scrollable card without a footer. The scrollbar respects the cut corner.</p>
+    <p class="mt-4">Lorem ipsum dolor sit amet...</p>
+</SkCard>
+```

package/docs/components/card/usage.md

@@ -0,0 +1,12 @@
+---
+section: usage
+order: 2
+---
+
+Use the `title` prop and default slot for basic cards with a header and content. The `footer` slot is typically used for action buttons.
+
+```vue
+<SkCard title="Card Title">
+    <p>This is a basic card with a title and content.</p>
+</SkCard>
+```

package/docs/components/checkbox/_meta.yaml

@@ -0,0 +1,11 @@
+component: SkCheckbox
+category: Forms
+sections:
+  - intro
+  - usage
+  - kinds
+  - color-kinds
+  - sizes
+  - states
+  - custom-colors
+  - form-example

package/docs/components/checkbox/color-kinds.md

@@ -0,0 +1,17 @@
+---
+section: color-kinds
+order: 4
+---
+
+Checkboxes also support direct color palette kinds for vibrant cyberpunk colors.
+
+```vue
+<SkCheckbox v-model="checked" kind="neon-blue" label="Neon Blue" />
+<SkCheckbox v-model="checked" kind="neon-purple" label="Neon Purple" />
+<SkCheckbox v-model="checked" kind="neon-orange" label="Neon Orange" />
+<SkCheckbox v-model="checked" kind="neon-green" label="Neon Green" />
+<SkCheckbox v-model="checked" kind="neon-mint" label="Neon Mint" />
+<SkCheckbox v-model="checked" kind="neon-pink" label="Neon Pink" />
+<SkCheckbox v-model="checked" kind="yellow" label="Yellow" />
+<SkCheckbox v-model="checked" kind="red" label="Red" />
+```

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

@@ -0,0 +1,21 @@
+---
+section: custom-colors
+order: 7
+---
+
+Override checkbox colors with custom OKLCH, hex, or CSS variable values.
+
+```vue
+<SkCheckbox
+  v-model="checked"
+  base-color="oklch(0.7 0.25 300)"
+  text-color="white"
+  label="Custom purple"
+/>
+<SkCheckbox
+  v-model="checked"
+  base-color="#10b981"
+  text-color="white"
+  label="Custom green"
+/>
+```

package/docs/components/checkbox/form-example.md

@@ -0,0 +1,24 @@
+---
+section: form-example
+order: 8
+---
+
+Real-world form with multiple checkboxes for options selection.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const emailNotif = ref(true)
+const pushNotif = ref(false)
+const smsNotif = ref(false)
+const newsletter = ref(false)
+</script>
+
+<template>
+  <h3>Notification Preferences</h3>
+  <SkCheckbox v-model="emailNotif" kind="primary" label="Email notifications" />
+  <SkCheckbox v-model="pushNotif" kind="primary" label="Push notifications" />
+  <SkCheckbox v-model="smsNotif" kind="primary" label="SMS notifications" />
+  <SkCheckbox v-model="newsletter" kind="accent" label="Subscribe to newsletter" />
+</template>
+```

package/docs/components/checkbox/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkCheckbox
+
+A checkbox component supporting boolean and indeterminate states. Built on RekaUI's Checkbox primitive with beveled corner styling and full keyboard accessibility.

package/docs/components/checkbox/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 3
+---
+
+Checkboxes support all semantic kinds for different contexts. These are theme-aware.
+
+```vue
+<SkCheckbox v-model="checked" kind="neutral" label="Neutral" />
+<SkCheckbox v-model="checked" kind="primary" label="Primary" />
+<SkCheckbox v-model="checked" kind="accent" label="Accent" />
+<SkCheckbox v-model="checked" kind="info" label="Info" />
+<SkCheckbox v-model="checked" kind="success" label="Success" />
+<SkCheckbox v-model="checked" kind="warning" label="Warning" />
+<SkCheckbox v-model="checked" kind="danger" label="Danger" />
+```

package/docs/components/checkbox/sizes.md

@@ -0,0 +1,13 @@
+---
+section: sizes
+order: 5
+---
+
+Checkboxes come in four sizes to fit different contexts: `sm`, `md` (default), `lg`, and `xl`.
+
+```vue
+<SkCheckbox v-model="checked" kind="primary" size="sm" label="Small" />
+<SkCheckbox v-model="checked" kind="primary" size="md" label="Medium" />
+<SkCheckbox v-model="checked" kind="primary" size="lg" label="Large" />
+<SkCheckbox v-model="checked" kind="primary" size="xl" label="Extra Large" />
+```

package/docs/components/checkbox/states.md

@@ -0,0 +1,14 @@
+---
+section: states
+order: 6
+---
+
+Checkboxes support checked, unchecked, indeterminate, and disabled states. The indeterminate state displays a horizontal dash instead of a checkmark.
+
+```vue
+<SkCheckbox :checked="true" kind="primary" label="Checked" />
+<SkCheckbox :checked="false" kind="primary" label="Unchecked" />
+<SkCheckbox :checked="'indeterminate'" kind="primary" label="Indeterminate" />
+<SkCheckbox :checked="true" kind="primary" disabled label="Checked (disabled)" />
+<SkCheckbox :checked="false" kind="primary" disabled label="Unchecked (disabled)" />
+```

package/docs/components/checkbox/usage.md

@@ -0,0 +1,17 @@
+---
+section: usage
+order: 2
+---
+
+Simple checkbox with label. Use `v-model` for two-way binding with boolean values.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const agreed = ref(false)
+</script>
+
+<template>
+  <SkCheckbox v-model="agreed" label="Accept terms and conditions" />
+</template>
+```

package/docs/components/collapsible/_meta.yaml

@@ -0,0 +1,9 @@
+component: SkCollapsible
+category: Layout
+sections:
+  - intro
+  - usage
+  - custom-trigger
+  - kinds
+  - custom-colors
+  - accessibility

package/docs/components/collapsible/accessibility.md

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

@@ -0,0 +1,16 @@
+---
+section: custom-colors
+order: 5
+---
+
+Override the kind with custom `baseColor` and `textColor` props using hex, OKLCH, or any valid CSS color value.
+
+```vue
+<SkCollapsible base-color="#8B5CF6" trigger-text="Custom Purple">
+    Using hex color #8B5CF6
+</SkCollapsible>
+
+<SkCollapsible base-color="oklch(0.75 0.2 180)" trigger-text="Custom Teal">
+    Using OKLCH color oklch(0.75 0.2 180)
+</SkCollapsible>
+```

package/docs/components/collapsible/custom-trigger.md

@@ -0,0 +1,35 @@
+---
+section: custom-trigger
+order: 3
+---
+
+Use the trigger slot with the `open` prop to create custom toggle buttons with dynamic labels or icons.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const customOpen = ref(false);
+</script>
+
+<template>
+    <SkCollapsible v-model:open="customOpen" kind="accent">
+        <template #trigger="{ open }">
+            <SkButton kind="accent" variant="outline">
+                {{ open ? 'Hide' : 'Show' }} Advanced Options
+                <template #trailing>
+                    <FontAwesomeIcon :icon="['fasds', open ? 'chevron-up' : 'chevron-down']" />
+                </template>
+            </SkButton>
+        </template>
+        <div style="padding: 1rem;">
+            <SkField label="API Key">
+                <SkInput placeholder="Enter your API key" />
+            </SkField>
+            <SkField label="Webhook URL">
+                <SkInput placeholder="https://example.com/webhook" />
+            </SkField>
+        </div>
+    </SkCollapsible>
+</template>
+```

package/docs/components/collapsible/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkCollapsible
+
+A single-section disclosure component for showing and hiding content with smooth height animations. Built on RekaUI's Collapsible primitive.

package/docs/components/collapsible/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 4
+---
+
+All seven semantic kinds adapt to your theme colors, making it easy to match the collapsible to your content's purpose.
+
+```vue
+<SkCollapsible kind="neutral" trigger-text="Neutral">Content</SkCollapsible>
+<SkCollapsible kind="primary" trigger-text="Primary">Content</SkCollapsible>
+<SkCollapsible kind="accent" trigger-text="Accent">Content</SkCollapsible>
+<SkCollapsible kind="success" trigger-text="Success">Content</SkCollapsible>
+<SkCollapsible kind="warning" trigger-text="Warning">Content</SkCollapsible>
+<SkCollapsible kind="danger" trigger-text="Danger">Content</SkCollapsible>
+<SkCollapsible kind="info" trigger-text="Info">Content</SkCollapsible>
+```

package/docs/components/collapsible/usage.md

@@ -0,0 +1,22 @@
+---
+section: usage
+order: 2
+---
+
+Basic collapsible with default trigger button. Use `v-model:open` to control the expanded/collapsed state.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+    <SkCollapsible v-model:open="isOpen" kind="primary" trigger-text="Show Details">
+        <p>
+            This content is hidden by default and revealed when you click the trigger button.
+        </p>
+    </SkCollapsible>
+</template>
+```

package/docs/components/divider/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkDivider
+category: Layout
+sections:
+  - intro
+  - usage
+  - kinds
+  - sizes
+  - variants
+  - orientation
+  - accessibility

package/docs/components/divider/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 7
+---
+
+Renders with `role="separator"` and `aria-orientation` matching the `orientation` prop.

package/docs/components/divider/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkDivider
+
+A visual separator component for dividing content sections. Renders as an `<hr>` element with support for both horizontal and vertical orientations.

package/docs/components/divider/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 3
+---
+
+Choose from semantic kinds to match your content's purpose and adapt to your theme colors.
+
+```vue
+<!-- Semantic Kinds -->
+<SkDivider kind="primary" />
+<SkDivider kind="accent" />
+<SkDivider kind="info" />
+<SkDivider kind="success" />
+<SkDivider kind="warning" />
+<SkDivider kind="danger" />
+```

package/docs/components/divider/orientation.md

@@ -0,0 +1,18 @@
+---
+section: orientation
+order: 6
+---
+
+Set `orientation="vertical"` to create vertical dividers for side-by-side content, toolbars, or navigation elements.
+
+```vue
+<div class="flex items-center" style="height: 100px;">
+    <div class="flex-1 text-center">
+        <p>Left Content</p>
+    </div>
+    <SkDivider orientation="vertical" />
+    <div class="flex-1 text-center">
+        <p>Right Content</p>
+    </div>
+</div>
+```

package/docs/components/divider/sizes.md

@@ -0,0 +1,24 @@
+---
+section: sizes
+order: 4
+---
+
+Control divider thickness and spacing with the `size` prop. Larger sizes create more prominent visual breaks, while smaller sizes work well for subtle separations.
+
+```vue
+<!-- Horizontal sizes -->
+<SkDivider kind="primary" size="xs" />  <!-- Native hr (0px border, tight spacing) -->
+<SkDivider kind="primary" size="sm" />  <!-- Thin (1px) -->
+<SkDivider kind="primary" size="md" />  <!-- Normal (2px) - Default -->
+<SkDivider kind="primary" size="lg" />  <!-- Thick (4px) -->
+<SkDivider kind="primary" size="xl" />  <!-- Heavy (6px) -->
+
+<!-- Vertical sizes -->
+<div class="flex" style="height: 200px;">
+    <SkDivider kind="primary" orientation="vertical" size="xs" />
+    <SkDivider kind="primary" orientation="vertical" size="sm" />
+    <SkDivider kind="primary" orientation="vertical" size="md" />
+    <SkDivider kind="primary" orientation="vertical" size="lg" />
+    <SkDivider kind="primary" orientation="vertical" size="xl" />
+</div>
+```

package/docs/components/divider/usage.md

@@ -0,0 +1,14 @@
+---
+section: usage
+order: 2
+---
+
+Use dividers to separate content sections. Place them between elements to create visual hierarchy and improve content organization.
+
+```vue
+<div>
+    <p>Content above the divider...</p>
+    <SkDivider />
+    <p>Content below the divider...</p>
+</div>
+```

package/docs/components/divider/variants.md

@@ -0,0 +1,14 @@
+---
+section: variants
+order: 5
+---
+
+Use `variant="subtle"` for a more understated divider. Default dividers use 50% opacity, while subtle dividers use 20% opacity.
+
+```vue
+<!-- Default (50% opacity) -->
+<SkDivider kind="primary" />
+
+<!-- Subtle (20% opacity) -->
+<SkDivider kind="primary" variant="subtle" />
+```

package/docs/components/dropdown/_meta.yaml

@@ -0,0 +1,11 @@
+component: SkDropdown
+category: Forms
+sections:
+  - intro
+  - usage
+  - custom-trigger
+  - submenus
+  - positioning
+  - kinds
+  - custom-colors
+  - accessibility

package/docs/components/dropdown/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 8
+---
+
+Built on RekaUI DropdownMenu which provides full WAI-ARIA menu pattern. Arrow keys navigate items, Enter/Space activates, Escape closes, and submenus open on ArrowRight. The menu content is portaled to the body for correct stacking.

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

@@ -0,0 +1,17 @@
+---
+section: custom-colors
+order: 7
+---
+
+Override menu colors with custom OKLCH, hex, or CSS variable values using `baseColor` and `textColor` props.
+
+```vue
+<SkDropdown
+  trigger-text="Custom Purple"
+  base-color="oklch(0.7 0.25 300)"
+  text-color="white"
+>
+  <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Item 2</SkDropdownMenuItem>
+</SkDropdown>
+```

package/docs/components/dropdown/custom-trigger.md

@@ -0,0 +1,18 @@
+---
+section: custom-trigger
+order: 3
+---
+
+Use the trigger slot to provide your own trigger element instead of the default button.
+
+```vue
+<SkDropdown kind="accent">
+  <template #trigger>
+    <SkButton kind="accent" variant="outline">Custom Trigger</SkButton>
+  </template>
+  <SkDropdownMenuItem>Profile</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Settings</SkDropdownMenuItem>
+  <SkDropdownMenuSeparator />
+  <SkDropdownMenuItem>Logout</SkDropdownMenuItem>
+</SkDropdown>
+```

package/docs/components/dropdown/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkDropdown
+
+A dropdown menu component with a trigger button and floating menu content. Supports submenus, menu items, and separators. Built on RekaUI's DropdownMenu primitive and uses a portal for rendering.

package/docs/components/dropdown/kinds.md

@@ -0,0 +1,23 @@
+---
+section: kinds
+order: 6
+---
+
+Dropdowns support all semantic kinds for menu styling, as well as direct color palette kinds for vibrant cyberpunk colors.
+
+```vue
+<SkDropdown trigger-text="Neutral" kind="neutral">
+  <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Item 2</SkDropdownMenuItem>
+</SkDropdown>
+
+<SkDropdown trigger-text="Primary" kind="primary">
+  <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Item 2</SkDropdownMenuItem>
+</SkDropdown>
+
+<SkDropdown trigger-text="Accent" kind="accent">
+  <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Item 2</SkDropdownMenuItem>
+</SkDropdown>
+```

package/docs/components/dropdown/positioning.md

@@ -0,0 +1,23 @@
+---
+section: positioning
+order: 5
+---
+
+Control menu position with `side` and `align` props. Available sides: `top`, `right`, `bottom` (default), `left`. Available alignments: `start` (default), `center`, `end`.
+
+```vue
+<SkDropdown trigger-text="Bottom (default)" side="bottom">
+  <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Item 2</SkDropdownMenuItem>
+</SkDropdown>
+
+<SkDropdown trigger-text="Top" side="top">
+  <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Item 2</SkDropdownMenuItem>
+</SkDropdown>
+
+<SkDropdown trigger-text="Right" side="right">
+  <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>
+  <SkDropdownMenuItem>Item 2</SkDropdownMenuItem>
+</SkDropdown>
+```

package/docs/components/dropdown/submenus.md

@@ -0,0 +1,28 @@
+---
+section: submenus
+order: 4
+---
+
+Nested menus for hierarchical actions. Hover over a submenu trigger to see the nested items. Submenus inherit the parent's kind by default but can override it.
+
+```vue
+<!-- Inherited kind (submenu uses parent's primary) -->
+<SkDropdown trigger-text="File" kind="primary">
+  <SkDropdownMenuItem>New File</SkDropdownMenuItem>
+  <SkDropdownSubmenu trigger-text="Open Recent">
+    <SkDropdownMenuItem>document1.txt</SkDropdownMenuItem>
+    <SkDropdownMenuItem>document2.txt</SkDropdownMenuItem>
+  </SkDropdownSubmenu>
+  <SkDropdownMenuItem>Save</SkDropdownMenuItem>
+</SkDropdown>
+
+<!-- Mixed kinds (submenu overrides to accent) -->
+<SkDropdown trigger-text="Actions" kind="primary">
+  <SkDropdownMenuItem>Dashboard</SkDropdownMenuItem>
+  <SkDropdownSubmenu trigger-text="Settings" kind="accent">
+    <SkDropdownMenuItem>Profile</SkDropdownMenuItem>
+    <SkDropdownMenuItem>Preferences</SkDropdownMenuItem>
+  </SkDropdownSubmenu>
+  <SkDropdownMenuItem>Logout</SkDropdownMenuItem>
+</SkDropdown>
+```

package/docs/components/dropdown/usage.md

@@ -0,0 +1,24 @@
+---
+section: usage
+order: 2
+---
+
+Simple dropdown with menu items. Click to open and select an action.
+
+```vue
+<script setup>
+const handleAction = (action) => {
+  console.log('Action:', action)
+}
+</script>
+
+<template>
+  <SkDropdown trigger-text="Actions">
+    <SkDropdownMenuItem @click="handleAction('new')">New File</SkDropdownMenuItem>
+    <SkDropdownMenuItem @click="handleAction('open')">Open</SkDropdownMenuItem>
+    <SkDropdownMenuItem @click="handleAction('save')">Save</SkDropdownMenuItem>
+    <SkDropdownMenuSeparator />
+    <SkDropdownMenuItem @click="handleAction('exit')">Exit</SkDropdownMenuItem>
+  </SkDropdown>
+</template>
+```