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

package/docs/components/field/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkField
+category: Forms
+sections:
+  - intro
+  - usage
+  - description
+  - validation
+  - required
+  - label-position
+  - accessibility

package/docs/components/field/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 7
+---
+
+Generates a unique `id` for the input (or uses a provided one). Links the label via `for`, provides `aria-describedby` pointing to the description or error message, and sets `aria-invalid` when an error is present. All these attributes are passed to the default slot.

package/docs/components/field/description.md

@@ -0,0 +1,15 @@
+---
+section: description
+order: 3
+---
+
+Add helper text to guide users with the `description` prop. The description appears below the input.
+
+```vue
+<SkField
+  label="Username"
+  description="Your username must be unique and at least 3 characters."
+>
+  <SkInput v-model="username" placeholder="Enter username" />
+</SkField>
+```

package/docs/components/field/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkField
+
+A form field wrapper that provides label, description, error message, and validation state management. Automatically wires up accessibility attributes between the label, input, and messages.

package/docs/components/field/label-position.md

@@ -0,0 +1,16 @@
+---
+section: label-position
+order: 6
+---
+
+Labels can be positioned above (default) or to the left of the input using the `labelPosition` prop.
+
+```vue
+<SkField label="Top Label (default)" labelPosition="top">
+  <SkInput v-model="value" placeholder="Label above" />
+</SkField>
+
+<SkField label="Left Label" labelPosition="left">
+  <SkInput v-model="value" placeholder="Label to the left" />
+</SkField>
+```

package/docs/components/field/required.md

@@ -0,0 +1,12 @@
+---
+section: required
+order: 5
+---
+
+Mark required fields with an asterisk using the `required` prop. This adds a visual indicator but does not enforce validation.
+
+```vue
+<SkField label="Full Name" required>
+  <SkInput v-model="name" placeholder="John Doe" />
+</SkField>
+```

package/docs/components/field/usage.md

@@ -0,0 +1,19 @@
+---
+section: usage
+order: 2
+---
+
+Wrap any input component with SkField to add a label. The field automatically generates IDs and accessibility attributes.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const email = ref('')
+</script>
+
+<template>
+  <SkField label="Email Address">
+    <SkInput v-model="email" type="email" placeholder="you@example.com" />
+  </SkField>
+</template>
+```

package/docs/components/field/validation.md

@@ -0,0 +1,32 @@
+---
+section: validation
+order: 4
+---
+
+Use the `state` prop to automatically apply success (green) or error (red) styling. When `error` is provided, it replaces the description. Child inputs automatically inherit the validation kind.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const validEmail = ref('user@example.com')
+const invalidPassword = ref('123')
+const neutralValue = ref('')
+</script>
+
+<template>
+  <!-- Valid state (green) -->
+  <SkField label="Valid Email" :state="true" description="Email format is correct.">
+    <SkInput v-model="validEmail" type="email" />
+  </SkField>
+
+  <!-- Invalid state (red) -->
+  <SkField label="Invalid Password" :state="false" error="Password must be at least 8 characters.">
+    <SkInput v-model="invalidPassword" type="password" />
+  </SkField>
+
+  <!-- Neutral state (default) -->
+  <SkField label="Neutral Field" :state="null" description="No validation state.">
+    <SkInput v-model="neutralValue" />
+  </SkField>
+</template>
+```

package/docs/components/group/_meta.yaml

@@ -0,0 +1,7 @@
+component: SkGroup
+category: Layout
+sections:
+  - intro
+  - usage
+  - orientation
+  - accessibility

package/docs/components/group/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 4
+---
+
+SkGroup is a presentational layout component. It does not add any ARIA attributes. Apply appropriate roles and labels to the container or children as needed for your use case.

package/docs/components/group/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkGroup
+
+A layout container that arranges child elements with consistent spacing in a horizontal or vertical direction.

package/docs/components/group/orientation.md

@@ -0,0 +1,22 @@
+---
+section: orientation
+order: 3
+---
+
+Set `orientation="vertical"` for stacked button groups, useful for sidebars or dropdown-style menus.
+
+```vue
+<!-- Horizontal (default) -->
+<SkGroup orientation="horizontal">
+  <SkButton>A</SkButton>
+  <SkButton>B</SkButton>
+  <SkButton>C</SkButton>
+</SkGroup>
+
+<!-- Vertical -->
+<SkGroup orientation="vertical">
+  <SkButton>A</SkButton>
+  <SkButton>B</SkButton>
+  <SkButton>C</SkButton>
+</SkGroup>
+```

package/docs/components/group/usage.md

@@ -0,0 +1,14 @@
+---
+section: usage
+order: 2
+---
+
+Wrap related elements in SkGroup for consistent spacing and alignment. Most commonly used for button groups.
+
+```vue
+<SkGroup>
+    <SkButton>First</SkButton>
+    <SkButton>Second</SkButton>
+    <SkButton>Third</SkButton>
+</SkGroup>
+```

package/docs/components/input/_meta.yaml

@@ -0,0 +1,11 @@
+component: SkInput
+category: Forms
+sections:
+  - intro
+  - usage
+  - types
+  - kinds
+  - sizes
+  - states
+  - custom-colors
+  - accessibility

package/docs/components/input/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 8
+---
+
+Renders as a native `<input>` 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/input/custom-colors.md

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

package/docs/components/input/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkInput
+
+A text input component with validation states, semantic color support, and multiple input types. Automatically inherits kind from a parent SkField when used together.

package/docs/components/input/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 4
+---
+
+Use semantic kinds for validation states and different contexts. These are theme-aware. Inputs also support direct color palette kinds for vibrant cyberpunk colors.
+
+```vue
+<SkInput v-model="value" kind="neutral" placeholder="Neutral" />
+<SkInput v-model="value" kind="primary" placeholder="Primary" />
+<SkInput v-model="value" kind="accent" placeholder="Accent" />
+<SkInput v-model="value" kind="info" placeholder="Info" />
+<SkInput v-model="value" kind="success" placeholder="Success" />
+<SkInput v-model="value" kind="warning" placeholder="Warning" />
+<SkInput v-model="value" kind="danger" placeholder="Danger" />
+```

package/docs/components/input/sizes.md

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

package/docs/components/input/states.md

@@ -0,0 +1,12 @@
+---
+section: states
+order: 6
+---
+
+Inputs support `disabled` and `readonly` states for different use cases.
+
+```vue
+<SkInput v-model="normal" kind="primary" placeholder="Normal" />
+<SkInput v-model="disabled" kind="primary" disabled placeholder="Disabled" />
+<SkInput v-model="readonly" kind="primary" readonly placeholder="Readonly" />
+```

package/docs/components/input/types.md

@@ -0,0 +1,15 @@
+---
+section: types
+order: 3
+---
+
+Input supports various HTML5 input types for different data formats: `text` (default), `email`, `password`, `url`, `tel`, `search`, and `number`.
+
+```vue
+<SkInput v-model="value" type="text" placeholder="Text" />
+<SkInput v-model="email" type="email" placeholder="Email" />
+<SkInput v-model="password" type="password" placeholder="Password" />
+<SkInput v-model="url" type="url" placeholder="URL" />
+<SkInput v-model="tel" type="tel" placeholder="Phone" />
+<SkInput v-model="search" type="search" placeholder="Search" />
+```

package/docs/components/input/usage.md

@@ -0,0 +1,17 @@
+---
+section: usage
+order: 2
+---
+
+Simple text input with placeholder. Use `v-model` for two-way binding.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const value = ref('')
+</script>
+
+<template>
+  <SkInput v-model="value" placeholder="Enter your name" />
+</template>
+```

package/docs/components/listbox/_meta.yaml

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

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

@@ -0,0 +1,27 @@
+---
+section: color-kinds
+order: 5
+---
+
+Listboxes also support direct color palette kinds for vibrant cyberpunk colors. These are fixed colors that don't change with themes.
+
+```vue
+<SkListbox v-model="value" kind="neon-blue" placeholder="Neon Blue">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="neon-purple" placeholder="Neon Purple">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="neon-orange" placeholder="Neon Orange">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="neon-green" placeholder="Neon Green">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="neon-mint" placeholder="Neon Mint">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="neon-pink" placeholder="Neon Pink">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+```

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

@@ -0,0 +1,18 @@
+---
+section: custom-colors
+order: 8
+---
+
+Override colors with custom OKLCH, hex, or CSS variable values using `baseColor` and `textColor` props.
+
+```vue
+<SkListbox
+  v-model="value"
+  base-color="oklch(0.7 0.25 300)"
+  text-color="white"
+  placeholder="Custom purple"
+>
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+  <SkListboxItem value="2">Item 2</SkListboxItem>
+</SkListbox>
+```

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

@@ -0,0 +1,36 @@
+---
+section: form-example
+order: 9
+---
+
+Pair with SkField for labels and validation. The listbox inherits the field's validation state and displays appropriate styling.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const country = ref('');
+const valid = ref(null);
+
+const validate = () => {
+  valid.value = !!country.value;
+};
+</script>
+
+<template>
+  <SkField
+    label="Country"
+    required
+    :state="valid"
+    :error="valid === false ? 'Please select a country' : undefined"
+  >
+    <SkListbox v-model="country" placeholder="Select your country..." @update:model-value="validate">
+      <SkListboxItem value="us">United States</SkListboxItem>
+      <SkListboxItem value="ca">Canada</SkListboxItem>
+      <SkListboxItem value="uk">United Kingdom</SkListboxItem>
+      <SkListboxItem value="de">Germany</SkListboxItem>
+      <SkListboxItem value="fr">France</SkListboxItem>
+    </SkListbox>
+  </SkField>
+</template>
+```

package/docs/components/listbox/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkListbox
+
+A searchable select component for choosing from a list of predefined options. Features a combobox-style input with a dropdown list of items. Built on RekaUI's Combobox primitive and uses a portal for the dropdown.

package/docs/components/listbox/kinds.md

@@ -0,0 +1,30 @@
+---
+section: kinds
+order: 4
+---
+
+Listboxes support all semantic kinds (`neutral`, `primary`, `accent`, `info`, `success`, `warning`, `danger`). These are theme-aware and will adapt to light/dark modes. When nested inside SkField, the kind is automatically injected based on field validation state.
+
+```vue
+<SkListbox v-model="value" kind="neutral" placeholder="Neutral">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="primary" placeholder="Primary">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="accent" placeholder="Accent">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="info" placeholder="Info">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="success" placeholder="Success">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="warning" placeholder="Warning">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+<SkListbox v-model="value" kind="danger" placeholder="Danger">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+```

package/docs/components/listbox/separators.md

@@ -0,0 +1,19 @@
+---
+section: separators
+order: 6
+---
+
+Use `SkListboxSeparator` to visually divide option groups within the dropdown.
+
+```vue
+<SkListbox v-model="value" placeholder="Select an action...">
+  <SkListboxItem value="new">New File</SkListboxItem>
+  <SkListboxItem value="open">Open</SkListboxItem>
+  <SkListboxItem value="save">Save</SkListboxItem>
+  <SkListboxSeparator />
+  <SkListboxItem value="export">Export</SkListboxItem>
+  <SkListboxItem value="import">Import</SkListboxItem>
+  <SkListboxSeparator />
+  <SkListboxItem value="exit">Exit</SkListboxItem>
+</SkListbox>
+```

package/docs/components/listbox/sizes.md

@@ -0,0 +1,24 @@
+---
+section: sizes
+order: 3
+---
+
+Listboxes come in four sizes (`sm`, `md`, `lg`, `xl`) matching other form inputs for consistent layouts.
+
+```vue
+<SkListbox v-model="value" kind="primary" size="sm" placeholder="Small">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+
+<SkListbox v-model="value" kind="primary" size="md" placeholder="Medium">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+
+<SkListbox v-model="value" kind="primary" size="lg" placeholder="Large">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+
+<SkListbox v-model="value" kind="primary" size="xl" placeholder="Extra Large">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+</SkListbox>
+```

package/docs/components/listbox/states.md

@@ -0,0 +1,19 @@
+---
+section: states
+order: 7
+---
+
+The entire listbox or individual items can be disabled. Disabled items cannot be selected and are visually dimmed.
+
+```vue
+<SkListbox v-model="value" disabled placeholder="Disabled listbox">
+  <SkListboxItem value="1">Item 1</SkListboxItem>
+  <SkListboxItem value="2">Item 2</SkListboxItem>
+</SkListbox>
+
+<SkListbox v-model="value" placeholder="With disabled item">
+  <SkListboxItem value="1">Enabled Item</SkListboxItem>
+  <SkListboxItem value="2" disabled>Disabled Item</SkListboxItem>
+  <SkListboxItem value="3">Another Enabled</SkListboxItem>
+</SkListbox>
+```

package/docs/components/listbox/usage.md

@@ -0,0 +1,23 @@
+---
+section: usage
+order: 2
+---
+
+Click to open, type to filter, select an item. The input field filters options as you type with RekaUI handling the filtering behavior internally.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const selected = ref('');
+</script>
+
+<template>
+  <SkListbox v-model="selected" placeholder="Select a framework...">
+    <SkListboxItem value="react">React</SkListboxItem>
+    <SkListboxItem value="vue">Vue</SkListboxItem>
+    <SkListboxItem value="angular">Angular</SkListboxItem>
+    <SkListboxItem value="svelte">Svelte</SkListboxItem>
+  </SkListbox>
+</template>
+```

package/docs/components/modal/_meta.yaml

@@ -0,0 +1,13 @@
+component: SkModal
+category: Feedback
+sections:
+  - intro
+  - usage
+  - kinds
+  - sizes
+  - custom-colors
+  - confirmation
+  - form-modal
+  - custom-trigger
+  - controlled-state
+  - close-behaviors

package/docs/components/modal/close-behaviors.md

@@ -0,0 +1,49 @@
+---
+section: close-behaviors
+order: 10
+---
+
+Control how the modal can be dismissed using `no-close-on-escape` and `no-close-on-overlay`. Use the `close` slot prop to close programmatically from within the modal.
+
+```vue
+<!-- Escape key disabled -->
+<SkModal
+  title="Escape Disabled"
+  trigger-text="No Escape Close"
+  kind="warning"
+  no-close-on-escape
+>
+  <p>This modal cannot be closed by pressing Escape.</p>
+  <template #footer="{ close }">
+    <SkButton kind="warning" @click="close">Close Modal</SkButton>
+  </template>
+</SkModal>
+
+<!-- Overlay click disabled -->
+<SkModal
+  title="Overlay Click Disabled"
+  trigger-text="No Overlay Close"
+  kind="warning"
+  no-close-on-overlay
+>
+  <p>This modal cannot be closed by clicking the overlay.</p>
+  <template #footer="{ close }">
+    <SkButton kind="warning" @click="close">Close Modal</SkButton>
+  </template>
+</SkModal>
+
+<!-- Both disabled - requires explicit action -->
+<SkModal
+  title="Required Action"
+  trigger-text="Strict Modal"
+  kind="danger"
+  no-close-on-escape
+  no-close-on-overlay
+>
+  <p>This modal requires explicit user action to close.</p>
+  <template #footer="{ close }">
+    <SkButton kind="neutral" variant="ghost" @click="close">Cancel</SkButton>
+    <SkButton kind="danger" @click="close">Confirm Action</SkButton>
+  </template>
+</SkModal>
+```

package/docs/components/modal/confirmation.md

@@ -0,0 +1,19 @@
+---
+section: confirmation
+order: 6
+---
+
+A common pattern for delete confirmations or destructive actions. Use the `danger` kind with clear messaging and explicit cancel/confirm buttons.
+
+```vue
+<SkModal kind="danger" title="Delete Account" trigger-text="Delete Account">
+  <p>
+    Are you sure you want to delete your account? This action cannot be undone and all your data will be
+    permanently removed.
+  </p>
+  <template #footer>
+    <SkButton kind="neutral" variant="ghost">Cancel</SkButton>
+    <SkButton kind="danger">Delete Account</SkButton>
+  </template>
+</SkModal>
+```