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

package/docs/components/page/real-world.md

@@ -0,0 +1,37 @@
+---
+section: real-world
+order: 6
+---
+
+A complete application layout with all features including fixed header and footer, navigation sidebar, and dashboard content.
+
+```vue
+<SkPage fixed-header fixed-footer>
+    <template #header>
+        <div class="p-4 flex items-center justify-between">
+            <div class="flex items-center gap-4">
+                <div class="w-8 h-8 bg-primary rounded">A</div>
+                <h3>My Application</h3>
+            </div>
+            <SkButton size="sm">Profile</SkButton>
+        </div>
+    </template>
+
+    <template #sidebar>
+        <nav class="p-4">
+            <!-- Navigation menu -->
+        </nav>
+    </template>
+
+    <div class="p-8">
+        <h1>Dashboard</h1>
+        <!-- Dashboard content -->
+    </div>
+
+    <template #footer>
+        <div class="p-4 text-center">
+            © 2024 My Application
+        </div>
+    </template>
+</SkPage>
+```

package/docs/components/page/sidebar-position.md

@@ -0,0 +1,18 @@
+---
+section: sidebar-position
+order: 4
+---
+
+Use `sidebarPosition` to place the sidebar on the left (default) or right side of the content area.
+
+```vue
+<!-- Left sidebar (default) -->
+<SkPage sidebar-position="left">
+    <!-- ... -->
+</SkPage>
+
+<!-- Right sidebar -->
+<SkPage sidebar-position="right">
+    <!-- ... -->
+</SkPage>
+```

package/docs/components/page/usage.md

@@ -0,0 +1,33 @@
+---
+section: usage
+order: 2
+---
+
+A complete page layout with header, sidebar, content, and footer. All slots are optional and the layout adapts when slots are not provided.
+
+```vue
+<SkPage>
+    <template #header>
+        <div class="p-4">
+            <h3>Application Header</h3>
+        </div>
+    </template>
+
+    <template #sidebar>
+        <nav class="p-4">
+            <!-- Navigation items -->
+        </nav>
+    </template>
+
+    <div class="p-8">
+        <h1>Page Content</h1>
+        <p>Main content area</p>
+    </div>
+
+    <template #footer>
+        <div class="p-4 text-center">
+            © 2024 Your Application
+        </div>
+    </template>
+</SkPage>
+```

package/docs/components/pagination/_meta.yaml

@@ -0,0 +1,12 @@
+component: SkPagination
+category: Navigation
+sections:
+  - intro
+  - usage
+  - kinds
+  - sizes
+  - variants
+  - config-options
+  - states
+  - custom-colors
+  - table-example

package/docs/components/pagination/config-options.md

@@ -0,0 +1,17 @@
+---
+section: config-options
+order: 6
+---
+
+Configure navigation controls and sibling count. Use `show-first-last` and `show-prev-next` to toggle button visibility, and `sibling-count` to control how many page numbers appear around the current page.
+
+```vue
+<!-- Without first/last buttons -->
+<SkPagination v-model="page" :total="20" :show-first-last="false" />
+
+<!-- Without prev/next buttons -->
+<SkPagination v-model="page" :total="20" :show-prev-next="false" />
+
+<!-- More siblings (shows 2 pages on each side) -->
+<SkPagination v-model="page" :total="20" :sibling-count="2" />
+```

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

@@ -0,0 +1,15 @@
+---
+section: custom-colors
+order: 8
+---
+
+Override pagination colors with custom values using `baseColor` and `textColor` props.
+
+```vue
+<SkPagination
+    v-model="page"
+    :total="10"
+    base-color="#9333ea"
+    text-color="#f3e8ff"
+/>
+```

package/docs/components/pagination/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkPagination
+
+A pagination control for navigating through pages of content. Automatically calculates page ranges with ellipsis for large page counts.

package/docs/components/pagination/kinds.md

@@ -0,0 +1,13 @@
+---
+section: kinds
+order: 3
+---
+
+Seven semantic kinds (`neutral`, `primary`, `accent`, `info`, `success`, `warning`, `danger`) that control the pagination's color scheme.
+
+```vue
+<SkPagination v-model="page" :total="10" kind="primary" />
+<SkPagination v-model="page" :total="10" kind="accent" />
+<SkPagination v-model="page" :total="10" kind="info" />
+<!-- Available kinds: neutral, primary, accent, info, success, warning, danger -->
+```

package/docs/components/pagination/sizes.md

@@ -0,0 +1,14 @@
+---
+section: sizes
+order: 4
+---
+
+Five size options (`xs`, `sm`, `md`, `lg`, `xl`) to match your design needs and surrounding content.
+
+```vue
+<SkPagination v-model="page" :total="10" size="xs" />
+<SkPagination v-model="page" :total="10" size="sm" />
+<SkPagination v-model="page" :total="10" size="md" />
+<SkPagination v-model="page" :total="10" size="lg" />
+<SkPagination v-model="page" :total="10" size="xl" />
+```

package/docs/components/pagination/states.md

@@ -0,0 +1,10 @@
+---
+section: states
+order: 7
+---
+
+The entire pagination component can be disabled to prevent interaction while maintaining visual context.
+
+```vue
+<SkPagination v-model="page" :total="20" disabled />
+```

package/docs/components/pagination/table-example.md

@@ -0,0 +1,28 @@
+---
+section: table-example
+order: 9
+---
+
+Pagination integrated with a data table showing items per page. A common pattern for displaying paginated data with results count.
+
+```vue
+<SkTable>
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Status</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr v-for="item in paginatedData" :key="item.id">
+            <td>{{ item.id }}</td>
+            <td>{{ item.name }}</td>
+            <td>{{ item.email }}</td>
+            <td>{{ item.status }}</td>
+        </tr>
+    </tbody>
+</SkTable>
+<SkPagination v-model="page" :total="totalPages" kind="primary" />
+```

package/docs/components/pagination/usage.md

@@ -0,0 +1,10 @@
+---
+section: usage
+order: 2
+---
+
+Basic pagination with page navigation. The `v-model` tracks the current page and `total` specifies the total number of pages.
+
+```vue
+<SkPagination v-model="currentPage" :total="20" />
+```

package/docs/components/pagination/variants.md

@@ -0,0 +1,13 @@
+---
+section: variants
+order: 5
+---
+
+Pagination follows button styling with `solid`, `outline`, `subtle`, and `ghost` variants for different visual weight.
+
+```vue
+<SkPagination v-model="page" :total="10" variant="solid" kind="primary" />
+<SkPagination v-model="page" :total="10" variant="outline" kind="primary" />
+<SkPagination v-model="page" :total="10" variant="subtle" kind="primary" />
+<SkPagination v-model="page" :total="10" variant="ghost" kind="primary" />
+```

package/docs/components/panel/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkPanel
+category: Layout
+sections:
+  - intro
+  - usage
+  - kinds
+  - sizes
+  - decoration
+  - scrollable
+  - custom-colors

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

@@ -0,0 +1,18 @@
+---
+section: custom-colors
+order: 7
+---
+
+Use `base-color` for custom CSS colors. Text color is automatically calculated for optimal contrast.
+
+```vue
+<SkPanel base-color="#8B5CF6">
+    <h4>Custom Purple</h4>
+    <p>Panel with hex color value. Text color auto-calculated.</p>
+</SkPanel>
+
+<SkPanel base-color="oklch(0.7 0.25 180)">
+    <h4>OKLCH Teal</h4>
+    <p>Using OKLCH color space for precise color control.</p>
+</SkPanel>
+```

package/docs/components/panel/decoration.md

@@ -0,0 +1,20 @@
+---
+section: decoration
+order: 5
+---
+
+Set `:show-decoration="false"` to hide the corner decoration while keeping the border. Use `:no-border="true"` to remove both the border and decoration for a borderless container.
+
+```vue
+<!-- Without decoration -->
+<SkPanel kind="primary" :show-decoration="false">
+    <h4>Without Decoration</h4>
+    <p>Panel with border but no corner decoration.</p>
+</SkPanel>
+
+<!-- Without border -->
+<SkPanel kind="primary" :no-border="true">
+    <h4>Borderless Panel</h4>
+    <p>No border or decoration.</p>
+</SkPanel>
+```

package/docs/components/panel/intro.md

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

package/docs/components/panel/kinds.md

@@ -0,0 +1,23 @@
+---
+section: kinds
+order: 3
+---
+
+Choose from semantic kinds to match your theme or indicate purpose.
+
+```vue
+<SkPanel kind="neutral">
+    <h4>Neutral</h4>
+    <p>Default panel style</p>
+</SkPanel>
+
+<SkPanel kind="primary">
+    <h4>Primary</h4>
+    <p>Primary content panel</p>
+</SkPanel>
+
+<SkPanel kind="success">
+    <h4>Success</h4>
+    <p>Positive feedback</p>
+</SkPanel>
+```

package/docs/components/panel/scrollable.md

@@ -0,0 +1,18 @@
+---
+section: scrollable
+order: 6
+---
+
+For panels with scrolling content, wrap content in a `.sk-panel-scroll-content` div. The scrollbar will match the panel's kind color, and the border/decoration remain fixed while content scrolls.
+
+```vue
+<SkPanel kind="primary" style="height: 300px;">
+    <div class="sk-panel-scroll-content">
+        <h4>Primary Scrollable Panel</h4>
+        <p>Notice the scrollbar matches the primary kind color.</p>
+        <p v-for="i in 20" :key="i" class="mb-2">
+            Item {{ i }} - This is scrollable content with a color-matched scrollbar.
+        </p>
+    </div>
+</SkPanel>
+```

package/docs/components/panel/sizes.md

@@ -0,0 +1,20 @@
+---
+section: sizes
+order: 4
+---
+
+The `size` prop controls the corner decoration size. Panel padding and dimensions remain consistent.
+
+```vue
+<SkPanel size="xs" kind="primary">
+    <p><strong>Extra Small (xs):</strong> Minimal decoration</p>
+</SkPanel>
+
+<SkPanel size="md" kind="primary">
+    <p><strong>Medium (md):</strong> Default decoration size</p>
+</SkPanel>
+
+<SkPanel size="xl" kind="primary">
+    <p><strong>Extra Large (xl):</strong> Maximum decoration size</p>
+</SkPanel>
+```

package/docs/components/panel/usage.md

@@ -0,0 +1,13 @@
+---
+section: usage
+order: 2
+---
+
+Use panels to group related content with visual containment. The default panel includes a border and corner decoration.
+
+```vue
+<SkPanel>
+    <h3>Panel Title</h3>
+    <p>This is a basic panel with default styling.</p>
+</SkPanel>
+```

package/docs/components/popover/_meta.yaml

@@ -0,0 +1,9 @@
+component: SkPopover
+category: Feedback
+sections:
+  - intro
+  - usage
+  - kinds
+  - positioning
+  - arrow
+  - custom-colors

package/docs/components/popover/arrow.md

@@ -0,0 +1,15 @@
+---
+section: arrow
+order: 5
+---
+
+Set `:show-arrow="false"` for a cleaner look without the connecting arrow.
+
+```vue
+<SkPopover title="No Arrow" :show-arrow="false">
+  <template #trigger>
+    <SkButton>No Arrow</SkButton>
+  </template>
+  <p>This popover has no arrow pointing to the trigger.</p>
+</SkPopover>
+```

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

@@ -0,0 +1,19 @@
+---
+section: custom-colors
+order: 6
+---
+
+Use `baseColor` and `textColor` for custom styling.
+
+```vue
+<SkPopover
+  title="Purple Theme"
+  base-color="oklch(0.5 0.25 300)"
+  text-color="white"
+>
+  <template #trigger>
+    <SkButton>Purple Popover</SkButton>
+  </template>
+  <p>This popover uses custom purple colors.</p>
+</SkPopover>
+```

package/docs/components/popover/intro.md

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

package/docs/components/popover/kinds.md

@@ -0,0 +1,24 @@
+---
+section: kinds
+order: 3
+---
+
+Seven semantic kinds that control the popover's color scheme.
+
+```vue
+<SkPopover kind="neutral" title="Neutral">
+  <template #trigger>
+    <SkButton kind="neutral" variant="outline">Neutral</SkButton>
+  </template>
+  <p>This is a neutral popover.</p>
+</SkPopover>
+
+<SkPopover kind="primary" title="Primary">
+  <template #trigger>
+    <SkButton kind="primary" variant="outline">Primary</SkButton>
+  </template>
+  <p>This is a primary popover.</p>
+</SkPopover>
+
+<!-- Same pattern for: accent, info, success, warning, danger -->
+```

package/docs/components/popover/positioning.md

@@ -0,0 +1,36 @@
+---
+section: positioning
+order: 4
+---
+
+Use `side` and `align` to control positioning. Available `side` values: `top`, `right`, `bottom` (default), `left`. Available `align` values: `start`, `center` (default), `end`.
+
+```vue
+<SkPopover side="top" title="Top">
+  <template #trigger>
+    <SkButton variant="outline">Top</SkButton>
+  </template>
+  <p>Positioned above the trigger.</p>
+</SkPopover>
+
+<SkPopover side="right" title="Right">
+  <template #trigger>
+    <SkButton variant="outline">Right</SkButton>
+  </template>
+  <p>Positioned to the right.</p>
+</SkPopover>
+
+<SkPopover side="bottom" title="Bottom">
+  <template #trigger>
+    <SkButton variant="outline">Bottom</SkButton>
+  </template>
+  <p>Positioned below (default).</p>
+</SkPopover>
+
+<SkPopover side="left" title="Left">
+  <template #trigger>
+    <SkButton variant="outline">Left</SkButton>
+  </template>
+  <p>Positioned to the left.</p>
+</SkPopover>
+```

package/docs/components/popover/usage.md

@@ -0,0 +1,15 @@
+---
+section: usage
+order: 2
+---
+
+Basic popover with a trigger button and content. Click outside or press Escape to close.
+
+```vue
+<SkPopover title="Quick Info">
+  <template #trigger>
+    <SkButton>Open Popover</SkButton>
+  </template>
+  <p>This is a popover with some helpful information.</p>
+</SkPopover>
+```

package/docs/components/progress/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkProgress
+category: Feedback
+sections:
+  - intro
+  - usage
+  - kinds
+  - sizes
+  - indeterminate
+  - value-label
+  - custom-colors

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

@@ -0,0 +1,14 @@
+---
+section: custom-colors
+order: 7
+---
+
+Override the bar and track colors with custom values.
+
+```vue
+<SkProgress
+    :value="70"
+    base-color="oklch(0.7 0.2 150)"
+    track-color="oklch(0.3 0.05 150 / 0.3)"
+/>
+```

package/docs/components/progress/indeterminate.md

@@ -0,0 +1,11 @@
+---
+section: indeterminate
+order: 5
+---
+
+Set `value` to `null` for an animated indeterminate state when the progress is unknown.
+
+```vue
+<!-- Indeterminate state - animated loading bar -->
+<SkProgress :value="null" />
+```

package/docs/components/progress/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkProgress
+
+A progress bar component with both determinate and indeterminate modes. Supports percentage labels and custom colors. Built on RekaUI's Progress primitive.

package/docs/components/progress/kinds.md

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

package/docs/components/progress/sizes.md

@@ -0,0 +1,14 @@
+---
+section: sizes
+order: 4
+---
+
+Control the bar height with the `size` prop.
+
+```vue
+<SkProgress size="xs" :value="60" />
+<SkProgress size="sm" :value="60" />
+<SkProgress size="md" :value="60" />
+<SkProgress size="lg" :value="60" />
+<SkProgress size="xl" :value="60" />
+```

package/docs/components/progress/usage.md

@@ -0,0 +1,13 @@
+---
+section: usage
+order: 2
+---
+
+Use progress bars to show completion status of operations. Pass a value between 0 and max (default 100).
+
+```vue
+<SkProgress :value="25" />
+<SkProgress :value="50" />
+<SkProgress :value="75" />
+<SkProgress :value="100" />
+```

package/docs/components/progress/value-label.md

@@ -0,0 +1,12 @@
+---
+section: value-label
+order: 6
+---
+
+Enable `show-value` to display the percentage on larger bars.
+
+```vue
+<SkProgress :value="33" size="md" show-value />
+<SkProgress :value="66" size="lg" show-value kind="success" />
+<SkProgress :value="100" size="xl" show-value kind="accent" />
+```

package/docs/components/radio/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkRadio
+category: Forms
+sections:
+  - intro
+  - usage
+  - kinds
+  - orientation
+  - sizes
+  - states
+  - custom-colors