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

package/docs/components/tag/sizes.md

@@ -0,0 +1,13 @@
+---
+section: sizes
+order: 5
+---
+
+Four sizes available: `sm`, `md` (default), `lg` and `xl`.
+
+```vue
+<SkTag size="sm" kind="primary">Small</SkTag>
+<SkTag size="md" kind="primary">Medium</SkTag>
+<SkTag size="lg" kind="primary">Large</SkTag>
+<SkTag size="xl" kind="primary">Extra Large</SkTag>
+```

package/docs/components/tag/usage.md

@@ -0,0 +1,13 @@
+---
+section: usage
+order: 2
+---
+
+Tags are inline elements that label and categorize content. Use them for categories, tags, status indicators, or to display lists of items.
+
+```vue
+<SkTag>Default Tag</SkTag>
+<SkTag kind="primary">Primary</SkTag>
+<SkTag kind="success">Active</SkTag>
+<SkTag kind="warning">Pending</SkTag>
+```

package/docs/components/tag/variants.md

@@ -0,0 +1,13 @@
+---
+section: variants
+order: 3
+---
+
+Four visual variants: `solid` for high contrast, `outline` for bordered style, `subtle` for reduced opacity, and `ghost` for minimal emphasis.
+
+```vue
+<SkTag variant="solid" kind="primary">Solid</SkTag>
+<SkTag variant="outline" kind="primary">Outline</SkTag>
+<SkTag variant="subtle" kind="primary">Subtle</SkTag>
+<SkTag variant="ghost" kind="primary">Ghost</SkTag>
+```

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

@@ -0,0 +1,13 @@
+component: SkTagsInput
+category: Forms
+sections:
+  - intro
+  - usage
+  - tag-customization
+  - sizes
+  - max-tags
+  - kinds
+  - color-kinds
+  - states
+  - custom-colors
+  - form-example

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

@@ -0,0 +1,17 @@
+---
+section: color-kinds
+order: 7
+---
+
+TagsInput supports vibrant color palette kinds for a more colorful appearance.
+
+```vue
+<SkTagsInput v-model="tags" kind="neon-blue" placeholder="Neon Blue" />
+<SkTagsInput v-model="tags" kind="neon-purple" placeholder="Neon Purple" />
+<SkTagsInput v-model="tags" kind="neon-orange" placeholder="Neon Orange" />
+<SkTagsInput v-model="tags" kind="neon-green" placeholder="Neon Green" />
+<SkTagsInput v-model="tags" kind="neon-mint" placeholder="Neon Mint" />
+<SkTagsInput v-model="tags" kind="neon-pink" placeholder="Neon Pink" />
+<SkTagsInput v-model="tags" kind="yellow" placeholder="Yellow" />
+<SkTagsInput v-model="tags" kind="red" placeholder="Red" />
+```

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

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

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

@@ -0,0 +1,30 @@
+---
+section: form-example
+order: 10
+---
+
+Use SkTagsInput with SkField for labels, descriptions, and validation messages.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const keywords = ref([])
+const valid = ref(null)
+
+const validate = () => {
+  valid.value = keywords.value.length >= 2
+}
+</script>
+
+<template>
+  <SkField
+    label="Keywords"
+    required
+    :state="valid"
+    :error="valid === false ? 'Please add at least 2 keywords' : undefined"
+    description="Add 2-5 keywords for your article"
+  >
+    <SkTagsInput v-model="keywords" :max="5" @update:model-value="validate" />
+  </SkField>
+</template>
+```

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

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkTagsInput
+
+A multi-value tag input component for entering a list of string values. Type text and press Enter to add tags; use Backspace or the delete button to remove them. Built on RekaUI's TagsInput primitive.

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

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 6
+---
+
+TagsInput supports all semantic kinds. These are theme-aware.
+
+```vue
+<SkTagsInput v-model="tags" kind="neutral" placeholder="Neutral" />
+<SkTagsInput v-model="tags" kind="primary" placeholder="Primary" />
+<SkTagsInput v-model="tags" kind="accent" placeholder="Accent" />
+<SkTagsInput v-model="tags" kind="info" placeholder="Info" />
+<SkTagsInput v-model="tags" kind="success" placeholder="Success" />
+<SkTagsInput v-model="tags" kind="warning" placeholder="Warning" />
+<SkTagsInput v-model="tags" kind="danger" placeholder="Danger" />
+```

package/docs/components/tags-input/max-tags.md

@@ -0,0 +1,10 @@
+---
+section: max-tags
+order: 5
+---
+
+Input disables when max is reached, but you can still remove tags.
+
+```vue
+<SkTagsInput v-model="tags" :max="3" placeholder="Max 3 tags..." />
+```

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

@@ -0,0 +1,13 @@
+---
+section: sizes
+order: 4
+---
+
+TagsInput comes in four sizes matching other form inputs.
+
+```vue
+<SkTagsInput v-model="tags" kind="primary" size="sm" placeholder="Small" />
+<SkTagsInput v-model="tags" kind="primary" size="md" placeholder="Medium" />
+<SkTagsInput v-model="tags" kind="primary" size="lg" placeholder="Large" />
+<SkTagsInput v-model="tags" kind="primary" size="xl" placeholder="Extra Large" />
+```

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

@@ -0,0 +1,10 @@
+---
+section: states
+order: 8
+---
+
+Disabled state prevents all interaction (adding and removing tags).
+
+```vue
+<SkTagsInput v-model="tags" disabled placeholder="Disabled" />
+```

package/docs/components/tags-input/tag-customization.md

@@ -0,0 +1,17 @@
+---
+section: tag-customization
+order: 3
+---
+
+Customize tag appearance with `tagKind` and `tagVariant` props. By default, tags inherit the input's kind.
+
+```vue
+<!-- Tags inherit input kind -->
+<SkTagsInput v-model="tags" kind="primary" placeholder="Add tags..." />
+
+<!-- Custom tag kind -->
+<SkTagsInput v-model="tags" kind="primary" tag-kind="accent" placeholder="Add tags..." />
+
+<!-- Custom tag variant -->
+<SkTagsInput v-model="tags" kind="primary" tag-variant="outline" placeholder="Add tags..." />
+```

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

@@ -0,0 +1,17 @@
+---
+section: usage
+order: 2
+---
+
+Type a value and press Enter to add a tag. Backspace to remove last tag.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const tags = ref([])
+</script>
+
+<template>
+  <SkTagsInput v-model="tags" placeholder="Add tags..." />
+</template>
+```

package/docs/components/textarea/_meta.yaml

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+---
+section: form-example
+order: 9
+---
+
+Real-world form using textarea for longer text input with character count.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const description = ref('')
+const comments = ref('Looking good so far!')
+</script>
+
+<template>
+  <div>
+    <label>Description</label>
+    <SkTextarea
+      v-model="description"
+      kind="neutral"
+      placeholder="Describe your project..."
+      :rows="6"
+    />
+  </div>
+
+  <div>
+    <label>Comments</label>
+    <SkTextarea
+      v-model="comments"
+      kind="success"
+      placeholder="Additional comments..."
+      :rows="4"
+    />
+    <span style="color: var(--sk-success-base)">{{ comments.length }} characters</span>
+  </div>
+</template>
+```

package/docs/components/textarea/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkTextarea
+
+A multiline text input component with validation states and semantic color support. Automatically inherits kind from a parent SkField.

package/docs/components/textarea/kinds.md

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

package/docs/components/textarea/rows.md

@@ -0,0 +1,12 @@
+---
+section: rows
+order: 3
+---
+
+Control the initial height with the `rows` prop.
+
+```vue
+<SkTextarea v-model="value" :rows="2" placeholder="Compact (2 rows)" />
+<SkTextarea v-model="value" :rows="4" placeholder="Default (4 rows)" />
+<SkTextarea v-model="value" :rows="8" placeholder="Tall (8 rows)" />
+```

package/docs/components/textarea/sizes.md

@@ -0,0 +1,13 @@
+---
+section: sizes
+order: 6
+---
+
+Textareas come in four sizes with different padding and font sizes.
+
+```vue
+<SkTextarea v-model="value" kind="primary" size="sm" placeholder="Small" :rows="3" />
+<SkTextarea v-model="value" kind="primary" size="md" placeholder="Medium" :rows="3" />
+<SkTextarea v-model="value" kind="primary" size="lg" placeholder="Large" :rows="3" />
+<SkTextarea v-model="value" kind="primary" size="xl" placeholder="Extra Large" :rows="3" />
+```

package/docs/components/textarea/states.md

@@ -0,0 +1,12 @@
+---
+section: states
+order: 7
+---
+
+Textareas support disabled and readonly states. Resizing is disabled for both.
+
+```vue
+<SkTextarea v-model="normal" kind="primary" placeholder="Normal" />
+<SkTextarea v-model="disabled" kind="primary" disabled placeholder="Disabled" />
+<SkTextarea v-model="readonly" kind="primary" readonly placeholder="Readonly" />
+```

package/docs/components/textarea/usage.md

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

package/docs/components/theme/_meta.yaml

@@ -0,0 +1,9 @@
+component: SkTheme
+category: Theming
+sections:
+  - intro
+  - usage
+  - available-themes
+  - nested-themes
+  - programmatic-switching
+  - portal-components

package/docs/components/theme/available-themes.md

@@ -0,0 +1,16 @@
+---
+section: available-themes
+order: 3
+---
+
+Two built-in themes are available: `greyscale` (default) for a monochromatic palette, and `colorful` for vibrant cyberpunk colors. Custom theme names can be used if matching CSS custom property overrides are defined under the corresponding `[data-scheme="..."]` selector.
+
+```vue
+<SkTheme theme="greyscale">
+  <SkButton kind="primary">Greyscale Theme</SkButton>
+</SkTheme>
+
+<SkTheme theme="colorful">
+  <SkButton kind="primary">Colorful Theme</SkButton>
+</SkTheme>
+```

package/docs/components/theme/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkTheme
+
+A theme provider component that controls the color scheme for all child components. Sets a `data-scheme` attribute that CSS rules use to apply different semantic token values.

package/docs/components/theme/nested-themes.md

@@ -0,0 +1,16 @@
+---
+section: nested-themes
+order: 4
+---
+
+Themes can be nested. The inner SkTheme overrides the outer one for its subtree.
+
+```vue
+<SkTheme theme="greyscale">
+  <SkButton kind="primary">Greyscale</SkButton>
+
+  <SkTheme theme="colorful">
+    <SkButton kind="primary">Colorful</SkButton>
+  </SkTheme>
+</SkTheme>
+```

package/docs/components/theme/portal-components.md

@@ -0,0 +1,19 @@
+---
+section: portal-components
+order: 6
+---
+
+SkTheme provides the current theme value via Vue's provide/inject system. Portal components (SkModal, SkDropdown, SkListbox, SkTooltip, SkPopover, SkToast) automatically consume this value and apply `data-scheme` on their portaled content so they inherit the correct theme.
+
+```vue
+<!-- Portal components automatically inherit theme -->
+<SkTheme theme="colorful">
+  <SkModal>
+    <!-- Modal content uses colorful theme -->
+  </SkModal>
+
+  <SkDropdown>
+    <!-- Dropdown content uses colorful theme -->
+  </SkDropdown>
+</SkTheme>
+```

package/docs/components/theme/programmatic-switching.md

@@ -0,0 +1,19 @@
+---
+section: programmatic-switching
+order: 5
+---
+
+The `useTheme` composable enables runtime theme changes from any component.
+
+```vue
+<script setup>
+import { useTheme } from '@skewedaspect/sleekspace-ui';
+
+const { currentTheme, setTheme } = useTheme();
+</script>
+
+<template>
+  <SkButton @click="setTheme('colorful')">Go Colorful</SkButton>
+  <SkButton @click="setTheme('greyscale')">Go Greyscale</SkButton>
+</template>
+```

package/docs/components/theme/usage.md

@@ -0,0 +1,16 @@
+---
+section: usage
+order: 2
+---
+
+Wrap components in SkTheme to apply a color scheme. All child components will inherit the theme.
+
+```vue
+<template>
+  <SkTheme theme="colorful">
+    <SkPanel kind="primary">
+      <SkButton kind="accent">Themed Button</SkButton>
+    </SkPanel>
+  </SkTheme>
+</template>
+```

package/docs/components/toast/_meta.yaml

@@ -0,0 +1,11 @@
+component: SkToast
+category: Feedback
+sections:
+  - intro
+  - usage
+  - kinds
+  - with-title
+  - duration
+  - dismiss
+  - real-world
+  - setup

package/docs/components/toast/dismiss.md

@@ -0,0 +1,15 @@
+---
+section: dismiss
+order: 6
+---
+
+Use `toast.dismissAll()` to clear all active toasts, or `toast.dismiss(id)` to dismiss a specific toast.
+
+```vue
+// Dismiss all active toasts
+toast.dismissAll();
+
+// Dismiss a specific toast by ID
+const id = toast.add({ message: 'Hello' });
+toast.dismiss(id);
+```

package/docs/components/toast/duration.md

@@ -0,0 +1,23 @@
+---
+section: duration
+order: 5
+---
+
+Override the auto-dismiss duration. Use `duration: 0` for toasts that don't auto-dismiss.
+
+```vue
+// Quick toast (2 seconds)
+toast.add({
+  kind: 'info',
+  message: 'Quick notification',
+  duration: 2000
+});
+
+// Persistent toast (no auto-dismiss)
+toast.add({
+  kind: 'danger',
+  title: 'Attention Required',
+  message: 'Click X to dismiss',
+  duration: 0
+});
+```

package/docs/components/toast/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkToast
+
+A notification toast system for showing brief messages that appear and auto-dismiss. Composed of SkToastProvider (wraps your app) and the `useToast` composable (shows toasts from anywhere). Built on RekaUI's Toast primitive.

package/docs/components/toast/kinds.md

@@ -0,0 +1,13 @@
+---
+section: kinds
+order: 3
+---
+
+Four semantic kinds: `info`, `success`, `warning`, and `danger`.
+
+```vue
+toast.add({ kind: 'info', message: 'Informational message' });
+toast.add({ kind: 'success', message: 'Success message' });
+toast.add({ kind: 'warning', message: 'Warning message' });
+toast.add({ kind: 'danger', message: 'Error message' });
+```

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

@@ -0,0 +1,23 @@
+---
+section: real-world
+order: 7
+---
+
+Common toast patterns for form submissions, errors, and status updates.
+
+```vue
+// Form save success
+toast.add({
+  kind: 'success',
+  title: 'Saved!',
+  message: 'Your changes have been saved.'
+});
+
+// API error
+toast.add({
+  kind: 'danger',
+  title: 'Connection Error',
+  message: 'Failed to connect. Please retry.',
+  duration: 0  // Don't auto-dismiss errors
+});
+```

package/docs/components/toast/setup.md

@@ -0,0 +1,16 @@
+---
+section: setup
+order: 8
+---
+
+Add `SkToastProvider` to your App.vue to enable toasts throughout your application. The provider should be placed inside your theme wrapper but outside router content.
+
+```vue
+<!-- App.vue -->
+<template>
+  <SkTheme theme="colorful">
+    <RouterView />
+    <SkToastProvider position="bottom-right" />
+  </SkTheme>
+</template>
+```

package/docs/components/toast/usage.md

@@ -0,0 +1,18 @@
+---
+section: usage
+order: 2
+---
+
+Use the `useToast()` composable to show toast notifications. Click the buttons below to see different toast types.
+
+```vue
+import { useToast } from '@skewedaspect/sleekspace-ui';
+
+const toast = useToast();
+
+// Show a simple toast
+toast.add({
+  kind: 'success',
+  message: 'Operation completed!'
+});
+```