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

package/docs/components/modal/controlled-state.md

@@ -0,0 +1,29 @@
+---
+section: controlled-state
+order: 9
+---
+
+Use `v-model:open` to control the modal state programmatically. This allows opening the modal from external triggers or closing it after async operations complete.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const isModalOpen = ref(false);
+</script>
+
+<template>
+  <SkButton @click="isModalOpen = true">
+    Open Modal Programmatically
+  </SkButton>
+
+  <SkModal v-model:open="isModalOpen" title="Controlled Modal" kind="info">
+    <p>This modal's state is controlled by a variable.</p>
+    <template #footer>
+      <SkButton kind="neutral" variant="ghost" @click="isModalOpen = false">
+        Close
+      </SkButton>
+    </template>
+  </SkModal>
+</template>
+```

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

@@ -0,0 +1,25 @@
+---
+section: custom-colors
+order: 5
+---
+
+Use `baseColor` and `textColor` for full color control. These props accept any valid CSS color value including OKLCH, hex, and CSS variables.
+
+```vue
+<SkModal
+  title="Custom Purple Modal"
+  trigger-text="Purple"
+  base-color="oklch(0.5 0.25 300)"
+  text-color="white"
+>
+  <p>This modal uses custom purple colors.</p>
+</SkModal>
+<SkModal
+  title="Custom Orange Modal"
+  trigger-text="Orange"
+  base-color="oklch(0.65 0.2 50)"
+  text-color="oklch(0.95 0.03 85)"
+>
+  <p>This modal uses custom orange colors.</p>
+</SkModal>
+```

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

@@ -0,0 +1,28 @@
+---
+section: custom-trigger
+order: 8
+---
+
+Use the `trigger` slot to provide a custom trigger element instead of the default button. Any clickable element can be used.
+
+```vue
+<SkModal title="Settings">
+  <template #trigger>
+    <SkButton kind="accent" variant="outline">Open Settings</SkButton>
+  </template>
+  <div class="flex flex-col gap-4">
+    <SkField label="Theme">
+      <SkListbox>
+        <SkListboxItem value="light">Light</SkListboxItem>
+        <SkListboxItem value="dark">Dark</SkListboxItem>
+      </SkListbox>
+    </SkField>
+    <SkField label="Notifications">
+      <SkSwitch />
+    </SkField>
+  </div>
+  <template #footer>
+    <SkButton kind="primary">Save Changes</SkButton>
+  </template>
+</SkModal>
+```

package/docs/components/modal/form-modal.md

@@ -0,0 +1,23 @@
+---
+section: form-modal
+order: 7
+---
+
+Modal containing a form for user input. Combine with SkField and other form components for a complete form experience.
+
+```vue
+<SkModal kind="primary" title="Create New Project" trigger-text="New Project">
+  <div class="flex flex-col gap-4">
+    <SkField label="Project Name" required>
+      <SkInput placeholder="Enter project name" />
+    </SkField>
+    <SkField label="Description">
+      <SkTextarea placeholder="Describe your project" :rows="4" />
+    </SkField>
+  </div>
+  <template #footer>
+    <SkButton kind="neutral" variant="ghost">Cancel</SkButton>
+    <SkButton kind="primary">Create Project</SkButton>
+  </template>
+</SkModal>
+```

package/docs/components/modal/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkModal
+
+A dialog overlay component for presenting focused content that requires user attention or interaction. Includes a backdrop, close button, and optional trigger. Built on RekaUI's Dialog primitive and uses a portal.

package/docs/components/modal/kinds.md

@@ -0,0 +1,30 @@
+---
+section: kinds
+order: 3
+---
+
+Seven semantic kinds that control the modal's color scheme. Use `kind` to match the modal's purpose to your application's design language.
+
+```vue
+<SkModal kind="neutral" title="Neutral Modal" trigger-text="Neutral">
+  <p>This is a neutral modal for general content.</p>
+</SkModal>
+<SkModal kind="primary" title="Primary Modal" trigger-text="Primary">
+  <p>This is a primary modal for main actions.</p>
+</SkModal>
+<SkModal kind="accent" title="Accent Modal" trigger-text="Accent">
+  <p>This is an accent modal for highlighted content.</p>
+</SkModal>
+<SkModal kind="info" title="Info Modal" trigger-text="Info">
+  <p>This is an info modal for informational messages.</p>
+</SkModal>
+<SkModal kind="success" title="Success Modal" trigger-text="Success">
+  <p>This is a success modal for positive feedback.</p>
+</SkModal>
+<SkModal kind="warning" title="Warning Modal" trigger-text="Warning">
+  <p>This is a warning modal for cautionary messages.</p>
+</SkModal>
+<SkModal kind="danger" title="Danger Modal" trigger-text="Danger">
+  <p>This is a danger modal for critical actions.</p>
+</SkModal>
+```

package/docs/components/modal/sizes.md

@@ -0,0 +1,21 @@
+---
+section: sizes
+order: 4
+---
+
+Four size options: `sm` (24rem), `md` (32rem), `lg` (48rem), and `xl` (64rem). Choose based on the amount of content your modal needs to display.
+
+```vue
+<SkModal size="sm" title="Small Modal" trigger-text="Small">
+  <p>This is a small modal with a narrower width.</p>
+</SkModal>
+<SkModal size="md" title="Medium Modal" trigger-text="Medium">
+  <p>This is a medium modal (default size).</p>
+</SkModal>
+<SkModal size="lg" title="Large Modal" trigger-text="Large">
+  <p>This is a large modal with more space for content.</p>
+</SkModal>
+<SkModal size="xl" title="Extra Large Modal" trigger-text="Extra Large">
+  <p>This is an extra large modal for extensive content.</p>
+</SkModal>
+```

package/docs/components/modal/usage.md

@@ -0,0 +1,15 @@
+---
+section: usage
+order: 2
+---
+
+Basic modal with trigger button, title, body content, and footer actions. Use `trigger-text` or the `trigger` slot for an inline trigger button.
+
+```vue
+<SkModal title="Welcome" trigger-text="Open Modal">
+  <p>This is a basic modal dialog. It displays content in an overlay with a backdrop.</p>
+  <template #footer>
+    <SkButton kind="primary">Confirm</SkButton>
+  </template>
+</SkModal>
+```

package/docs/components/navbar/_meta.yaml

@@ -0,0 +1,11 @@
+component: SkNavBar
+category: Navigation
+sections:
+  - intro
+  - usage
+  - kinds
+  - icons
+  - sticky
+  - custom-colors
+  - neon-colors
+  - complex-layouts

package/docs/components/navbar/complex-layouts.md

@@ -0,0 +1,34 @@
+---
+section: complex-layouts
+order: 8
+---
+
+Build feature-rich navigation bars combining brand, multiple links, and various action controls like switches, buttons, and tags.
+
+```vue
+<!-- Full Featured Navigation -->
+<SkNavBar kind="neutral" :sticky="false">
+    <template #brand>
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <FontAwesomeIcon :icon="['fasds', 'cubes']" style="font-size: 1.5rem;" />
+            <span style="font-weight: 600; font-size: 1.25rem;">SleekSpace</span>
+        </div>
+    </template>
+
+    <a href="#" class="nav-link">Home</a>
+    <a href="#" class="nav-link">Documentation</a>
+    <a href="#" class="nav-link">Components</a>
+
+    <template #actions>
+        <SkSwitch
+            :model-value="false"
+            kind="neutral"
+            label-on="Dark"
+            label-off="Light"
+        />
+        <SkButton kind="primary" size="sm">
+            Get Started
+        </SkButton>
+    </template>
+</SkNavBar>
+```

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

@@ -0,0 +1,24 @@
+---
+section: custom-colors
+order: 6
+---
+
+Use `base-color` for custom CSS colors. Text color is automatically calculated for optimal contrast, or you can specify it explicitly with `text-color`.
+
+```vue
+<SkNavBar base-color="#8B5CF6" :sticky="false">
+    <template #brand>
+        <span style="font-weight: 600;">Purple Nav</span>
+    </template>
+    <a href="#" class="nav-link">Home</a>
+    <a href="#" class="nav-link">About</a>
+</SkNavBar>
+
+<SkNavBar base-color="oklch(0.65 0.22 60)" :sticky="false">
+    <template #brand>
+        <span style="font-weight: 600;">Gold Nav</span>
+    </template>
+    <a href="#" class="nav-link">Home</a>
+    <a href="#" class="nav-link">About</a>
+</SkNavBar>
+```

package/docs/components/navbar/icons.md

@@ -0,0 +1,33 @@
+---
+section: icons
+order: 4
+---
+
+Enhance your navbar with FontAwesome icons for better visual identification. Icons can be added to the brand, navigation links, and action buttons.
+
+```vue
+<SkNavBar kind="accent" :sticky="false">
+    <template #brand>
+        <div style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.25rem;">
+            <FontAwesomeIcon :icon="['fasds', 'rocket']" />
+            <span>Project</span>
+        </div>
+    </template>
+    <a href="#" class="nav-link">
+        <FontAwesomeIcon :icon="['fasds', 'cubes']" style="margin-right: 0.5rem;" />
+        Components
+    </a>
+    <a href="#" class="nav-link">
+        <FontAwesomeIcon :icon="['fasds', 'code']" style="margin-right: 0.5rem;" />
+        Code
+    </a>
+
+    <template #actions>
+        <SkButton kind="neutral" size="sm" variant="ghost">
+            <template #icon>
+                <FontAwesomeIcon :icon="['fasds', 'download']" />
+            </template>
+        </SkButton>
+    </template>
+</SkNavBar>
+```

package/docs/components/navbar/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkNavBar
+
+A top navigation bar component with three content zones: brand, navigation, and actions. Sticky by default so it stays visible during scroll.

package/docs/components/navbar/kinds.md

@@ -0,0 +1,24 @@
+---
+section: kinds
+order: 3
+---
+
+Choose from semantic kinds (`neutral`, `primary`, `accent`, `info`, `success`, `warning`, `danger`) to match your application theme and indicate purpose.
+
+```vue
+<SkNavBar kind="neutral" :sticky="false">
+    <template #brand>
+        <span style="font-weight: 600;">Neutral</span>
+    </template>
+    <a href="#" class="nav-link">Home</a>
+    <a href="#" class="nav-link">About</a>
+</SkNavBar>
+
+<SkNavBar kind="primary" :sticky="false">
+    <template #brand>
+        <span style="font-weight: 600;">Primary</span>
+    </template>
+    <a href="#" class="nav-link">Home</a>
+    <a href="#" class="nav-link">About</a>
+</SkNavBar>
+```

package/docs/components/navbar/neon-colors.md

@@ -0,0 +1,24 @@
+---
+section: neon-colors
+order: 7
+---
+
+Use direct color palette kinds for fixed neon colors that don't change with themes. These provide vibrant cyberpunk aesthetics.
+
+```vue
+<SkNavBar kind="neon-blue" :sticky="false">
+    <template #brand>
+        <span style="font-weight: 600;">Neon Blue</span>
+    </template>
+    <a href="#" class="nav-link">Dashboard</a>
+    <a href="#" class="nav-link">Settings</a>
+</SkNavBar>
+
+<SkNavBar kind="neon-orange" :sticky="false">
+    <template #brand>
+        <span style="font-weight: 600;">Neon Orange</span>
+    </template>
+    <a href="#" class="nav-link">Dashboard</a>
+    <a href="#" class="nav-link">Settings</a>
+</SkNavBar>
+```

package/docs/components/navbar/sticky.md

@@ -0,0 +1,22 @@
+---
+section: sticky
+order: 5
+---
+
+By default, navbars are sticky and stay at the top when scrolling. Set `:sticky="false"` to disable this behavior for a static navbar that scrolls with the page.
+
+```vue
+<!-- Sticky (Default) -->
+<SkNavBar kind="info">
+    <template #brand>Sticky Nav</template>
+    <a href="#" class="nav-link">Link 1</a>
+    <a href="#" class="nav-link">Link 2</a>
+</SkNavBar>
+
+<!-- Non-Sticky -->
+<SkNavBar kind="success" :sticky="false">
+    <template #brand>Non-Sticky Nav</template>
+    <a href="#" class="nav-link">Link 1</a>
+    <a href="#" class="nav-link">Link 2</a>
+</SkNavBar>
+```

package/docs/components/navbar/usage.md

@@ -0,0 +1,25 @@
+---
+section: usage
+order: 2
+---
+
+Use the `brand` slot for your logo or app name, default slot for navigation links, and `actions` slot for buttons or controls.
+
+```vue
+<SkNavBar kind="neutral" :sticky="false">
+    <template #brand>
+        <div style="font-weight: 600; font-size: 1.25rem;">
+            My App
+        </div>
+    </template>
+    <a href="#" class="nav-link">Home</a>
+    <a href="#" class="nav-link">Docs</a>
+    <a href="#" class="nav-link">Components</a>
+
+    <template #actions>
+        <SkButton kind="primary" size="sm">
+            Get Started
+        </SkButton>
+    </template>
+</SkNavBar>
+```

package/docs/components/number-input/_meta.yaml

@@ -0,0 +1,12 @@
+component: SkNumberInput
+category: Forms
+sections:
+  - intro
+  - usage
+  - min-max-step
+  - sizes
+  - kinds
+  - color-kinds
+  - states
+  - custom-colors
+  - form-example

package/docs/components/number-input/color-kinds.md

@@ -0,0 +1,17 @@
+---
+section: color-kinds
+order: 6
+---
+
+Number inputs also support direct color palette kinds for vibrant cyberpunk colors. These are fixed colors that don't change with themes.
+
+```vue
+<SkNumberInput v-model="value" kind="neon-blue" />
+<SkNumberInput v-model="value" kind="neon-purple" />
+<SkNumberInput v-model="value" kind="neon-orange" />
+<SkNumberInput v-model="value" kind="neon-green" />
+<SkNumberInput v-model="value" kind="neon-mint" />
+<SkNumberInput v-model="value" kind="neon-pink" />
+<SkNumberInput v-model="value" kind="yellow" />
+<SkNumberInput v-model="value" kind="red" />
+```

package/docs/components/number-input/custom-colors.md

@@ -0,0 +1,21 @@
+---
+section: custom-colors
+order: 8
+---
+
+Override number input colors with custom OKLCH, hex, or CSS variable values using `baseColor` and `textColor` props.
+
+```vue
+<SkNumberInput
+  v-model="value"
+  base-color="oklch(0.7 0.25 300)"
+  text-color="white"
+  placeholder="Custom purple"
+/>
+<SkNumberInput
+  v-model="value"
+  base-color="#10b981"
+  text-color="white"
+  placeholder="Custom green"
+/>
+```

package/docs/components/number-input/form-example.md

@@ -0,0 +1,55 @@
+---
+section: form-example
+order: 9
+---
+
+Pair with SkField for labels and validation. Real-world forms using NumberInput with validation display.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const age = ref(0);
+const quantity = ref(1);
+const price = ref(0);
+
+const ageValid = ref(null);
+const quantityValid = ref(true);
+
+const validateAge = () => {
+  if (age.value >= 18 && age.value <= 120) {
+    ageValid.value = true;
+  } else {
+    ageValid.value = false;
+  }
+};
+
+const validateQuantity = () => {
+  quantityValid.value = quantity.value >= 1 && quantity.value <= 100;
+};
+</script>
+
+<template>
+  <SkField
+    label="Age"
+    required
+    :state="ageValid"
+    :error="ageValid === false ? 'Age must be between 18 and 120' : undefined"
+  >
+    <SkNumberInput v-model="age" :min="18" :max="120" @input="validateAge" />
+  </SkField>
+
+  <SkField
+    label="Quantity"
+    required
+    :state="quantityValid"
+    description="Select quantity (1-100)"
+  >
+    <SkNumberInput v-model="quantity" :min="1" :max="100" @input="validateQuantity" />
+  </SkField>
+
+  <SkField label="Price" description="Enter price (increments of $0.25)">
+    <SkNumberInput v-model="price" :min="0" :step="0.25" />
+  </SkField>
+</template>
+```

package/docs/components/number-input/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkNumberInput
+
+A numeric input component with increment/decrement stepper buttons. Supports keyboard navigation, min/max bounds, and step increments. Built on RekaUI's NumberField primitive.

package/docs/components/number-input/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 5
+---
+
+Use semantic kinds for validation states. When nested inside SkField, the kind is automatically injected based on field validation state.
+
+```vue
+<SkNumberInput v-model="value" kind="neutral" />
+<SkNumberInput v-model="value" kind="primary" />
+<SkNumberInput v-model="value" kind="accent" />
+<SkNumberInput v-model="value" kind="info" />
+<SkNumberInput v-model="value" kind="success" />
+<SkNumberInput v-model="value" kind="warning" />
+<SkNumberInput v-model="value" kind="danger" />
+```

package/docs/components/number-input/min-max-step.md

@@ -0,0 +1,11 @@
+---
+section: min-max-step
+order: 3
+---
+
+Configure min/max bounds and step increments to constrain the input range. Values outside bounds will be clamped when using stepper buttons.
+
+```vue
+<SkNumberInput v-model="quantity" :min="1" :max="10" />
+<SkNumberInput v-model="price" :min="0" :step="0.5" placeholder="0.00" />
+```

package/docs/components/number-input/sizes.md

@@ -0,0 +1,13 @@
+---
+section: sizes
+order: 4
+---
+
+Number inputs come in four sizes (`sm`, `md`, `lg`, `xl`) matching other form inputs for consistent layouts.
+
+```vue
+<SkNumberInput v-model="value" kind="primary" size="sm" />
+<SkNumberInput v-model="value" kind="primary" size="md" />
+<SkNumberInput v-model="value" kind="primary" size="lg" />
+<SkNumberInput v-model="value" kind="primary" size="xl" />
+```

package/docs/components/number-input/states.md

@@ -0,0 +1,12 @@
+---
+section: states
+order: 7
+---
+
+Number inputs support disabled and readonly states. Disabled inputs cannot be interacted with, while readonly inputs display the value but prevent modification.
+
+```vue
+<SkNumberInput v-model="value" kind="primary" />
+<SkNumberInput v-model="value" kind="primary" disabled />
+<SkNumberInput v-model="value" kind="primary" readonly />
+```

package/docs/components/number-input/usage.md

@@ -0,0 +1,18 @@
+---
+section: usage
+order: 2
+---
+
+Simple number input with stepper buttons. Click the buttons or use arrow keys to increment/decrement the value.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+</script>
+
+<template>
+  <SkNumberInput v-model="value" placeholder="Enter a number" />
+</template>
+```

package/docs/components/page/_meta.yaml

@@ -0,0 +1,9 @@
+component: SkPage
+category: Layout
+sections:
+  - intro
+  - usage
+  - fixed-header
+  - sidebar-position
+  - custom-width
+  - real-world

package/docs/components/page/custom-width.md

@@ -0,0 +1,17 @@
+---
+section: custom-width
+order: 5
+---
+
+Use `sidebarWidth` to customize the sidebar width. Accepts any valid CSS width value.
+
+```vue
+<SkPage sidebar-width="20rem">
+    <template #sidebar>
+        <div class="p-4">
+            Wider sidebar content
+        </div>
+    </template>
+    <!-- ... -->
+</SkPage>
+```

package/docs/components/page/fixed-header.md

@@ -0,0 +1,17 @@
+---
+section: fixed-header
+order: 3
+---
+
+Use `fixedHeader` to make the header stay at the top when scrolling. The content area scrolls independently while the header remains visible.
+
+```vue
+<SkPage fixed-header>
+    <template #header>
+        <div class="p-4">
+            <h3>Fixed Header</h3>
+        </div>
+    </template>
+    <!-- ... -->
+</SkPage>
+```

package/docs/components/page/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkPage
+
+A full-page layout component that provides a structured page skeleton with header, sidebar, content, and footer regions. Designed for application-level layouts with semantic HTML elements.