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

package/docs/components/spinner/variants.md

@@ -0,0 +1,12 @@
+---
+section: variants
+order: 3
+---
+
+Choose from three animation styles to match your design aesthetic: `circular` (default) for a dual rotating arc, `dots` for three bouncing dots, and `crosshair` for a rotating targeting animation.
+
+```vue
+<SkSpinner variant="circular" />
+<SkSpinner variant="dots" />
+<SkSpinner variant="crosshair" />
+```

package/docs/components/switch/_meta.yaml

@@ -0,0 +1,12 @@
+component: SkSwitch
+category: Forms
+sections:
+  - intro
+  - usage
+  - kinds
+  - sizes
+  - dynamic-labels
+  - thumb-color
+  - disabled
+  - custom-colors
+  - accessibility

package/docs/components/switch/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 9
+---
+
+Built on RekaUI Switch which provides `role="switch"` and `aria-checked`. The label is associated via a wrapping `<label>` element. Space key toggles the state.

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

@@ -0,0 +1,29 @@
+---
+section: custom-colors
+order: 8
+---
+
+Use `base-color` to customize the switch track with any CSS color value. Provide `text-color` if needed for labels.
+
+```vue
+<SkSwitch
+    v-model="value"
+    base-color="oklch(0.7 0.25 45)"
+    text-color="white"
+    label="Custom Orange Switch"
+/>
+
+<SkSwitch
+    v-model="value"
+    base-color="oklch(0.65 0.25 280)"
+    text-color="white"
+    label="Custom Purple Switch"
+/>
+
+<SkSwitch
+    v-model="value"
+    base-color="#10B981"
+    text-color="white"
+    label="Hex Color (Green)"
+/>
+```

package/docs/components/switch/disabled.md

@@ -0,0 +1,11 @@
+---
+section: disabled
+order: 7
+---
+
+Disabled switches have reduced opacity and cannot be toggled.
+
+```vue
+<SkSwitch :model-value="true" :disabled="true" label="Disabled (On)" />
+<SkSwitch :model-value="false" :disabled="true" label="Disabled (Off)" />
+```

package/docs/components/switch/dynamic-labels.md

@@ -0,0 +1,12 @@
+---
+section: dynamic-labels
+order: 5
+---
+
+Use `labelOn` and `labelOff` props to display different text based on the switch state. Labels animate by default.
+
+```vue
+<SkSwitch v-model="value" kind="success" label-on="Enabled" label-off="Disabled" />
+<SkSwitch v-model="darkMode" kind="primary" label-on="Dark Mode" label-off="Light Mode" />
+<SkSwitch v-model="visibility" kind="warning" label-on="Public" label-off="Private" />
+```

package/docs/components/switch/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkSwitch
+
+A toggle switch component for binary on/off choices. Supports dynamic labels that change with state and flexible thumb styling. Built on RekaUI's Switch primitive.

package/docs/components/switch/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 3
+---
+
+Choose from semantic kinds to match your theme or indicate status.
+
+```vue
+<SkSwitch v-model="value" kind="neutral" label="Neutral" />
+<SkSwitch v-model="value" kind="primary" label="Primary" />
+<SkSwitch v-model="value" kind="accent" label="Accent" />
+<SkSwitch v-model="value" kind="info" label="Info" />
+<SkSwitch v-model="value" kind="success" label="Success" />
+<SkSwitch v-model="value" kind="warning" label="Warning" />
+<SkSwitch v-model="value" kind="danger" label="Danger" />
+```

package/docs/components/switch/sizes.md

@@ -0,0 +1,14 @@
+---
+section: sizes
+order: 4
+---
+
+Five sizes available from `xs` to `xl`.
+
+```vue
+<SkSwitch v-model="value" size="xs" label="Extra Small" />
+<SkSwitch v-model="value" size="sm" label="Small" />
+<SkSwitch v-model="value" size="md" label="Medium" />
+<SkSwitch v-model="value" size="lg" label="Large" />
+<SkSwitch v-model="value" size="xl" label="Extra Large" />
+```

package/docs/components/switch/thumb-color.md

@@ -0,0 +1,16 @@
+---
+section: thumb-color
+order: 6
+---
+
+Use `thumbKind` to customize the thumb color independently from the track.
+
+```vue
+<SkSwitch
+    v-model="value"
+    kind="primary"
+    thumb-kind="warning"
+    label="Primary track, Warning thumb"
+/>
+<SkSwitch v-model="value" kind="success" thumb-kind="danger" label="Success track, Danger thumb" />
+```

package/docs/components/switch/usage.md

@@ -0,0 +1,18 @@
+---
+section: usage
+order: 2
+---
+
+Use `v-model` for two-way binding. Add a `label` prop to describe the switch's purpose.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const isEnabled = ref(true);
+</script>
+
+<template>
+    <SkSwitch v-model="isEnabled" label="Enable notifications" />
+</template>
+```

package/docs/components/table/_meta.yaml

@@ -0,0 +1,12 @@
+component: SkTable
+category: Feedback
+sections:
+  - intro
+  - usage
+  - kinds
+  - striped
+  - hoverable
+  - borders
+  - variants
+  - subtle
+  - accessibility

package/docs/components/table/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 9
+---
+
+SkTable renders as a standard `<table>` element. Use semantic `<thead>`, `<tbody>`, `<th>`, and `<td>` elements. Add `scope="col"` or `scope="row"` to header cells for screen reader clarity.

package/docs/components/table/borders.md

@@ -0,0 +1,17 @@
+---
+section: borders
+order: 6
+---
+
+Control table borders with the `bordered` and `innerBorders` props. Inner borders are disabled by default for a cleaner look.
+
+```vue
+<!-- With inner borders -->
+<SkTable :inner-borders="true">...</SkTable>
+
+<!-- No inner borders (default) -->
+<SkTable>...</SkTable>
+
+<!-- No borders at all -->
+<SkTable :bordered="false">...</SkTable>
+```

package/docs/components/table/hoverable.md

@@ -0,0 +1,26 @@
+---
+section: hoverable
+order: 5
+---
+
+The `hoverable` prop is enabled by default. Rows highlight on hover for better interactivity.
+
+```vue
+<SkTable hoverable>
+    <thead>
+        <tr>
+            <th>Project</th>
+            <th>Progress</th>
+            <th>Status</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Website Redesign</td>
+            <td>75%</td>
+            <td>In Progress</td>
+        </tr>
+        <!-- More rows... -->
+    </tbody>
+</SkTable>
+```

package/docs/components/table/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkTable
+
+A styled HTML table component with striped rows, hover effects, and configurable borders. Wraps standard `<table>` markup with consistent theming.

package/docs/components/table/kinds.md

@@ -0,0 +1,18 @@
+---
+section: kinds
+order: 3
+---
+
+Choose from semantic kinds (`neutral`, `primary`, `accent`, etc.) that adapt to your theme, or color palette kinds (`neon-blue`, `neon-pink`, etc.) for vibrant, eye-catching designs.
+
+```vue
+<!-- All semantic kinds available -->
+<SkTable kind="neutral">...</SkTable>
+<SkTable kind="primary">...</SkTable>
+<SkTable kind="secondary">...</SkTable>
+<SkTable kind="accent">...</SkTable>
+<SkTable kind="info">...</SkTable>
+<SkTable kind="success">...</SkTable>
+<SkTable kind="warning">...</SkTable>
+<SkTable kind="danger">...</SkTable>
+```

package/docs/components/table/striped.md

@@ -0,0 +1,28 @@
+---
+section: striped
+order: 4
+---
+
+Add the `striped` prop to alternate row background colors for better readability of large tables.
+
+```vue
+<SkTable striped>
+    <thead>
+        <tr>
+            <th>#</th>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Status</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>1</td>
+            <td>alice_j</td>
+            <td>alice@example.com</td>
+            <td>Active</td>
+        </tr>
+        <!-- More rows... -->
+    </tbody>
+</SkTable>
+```

package/docs/components/table/subtle.md

@@ -0,0 +1,26 @@
+---
+section: subtle
+order: 8
+---
+
+Use the `subtle` prop for more transparent borders, headers, and footers. Subtle tables use reduced opacity for borders, creating a lighter, more refined aesthetic.
+
+```vue
+<SkTable :subtle="true">
+    <thead>
+        <tr>
+            <th>Product</th>
+            <th>Price</th>
+            <th>Stock</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Keyboard</td>
+            <td>$89.99</td>
+            <td>45</td>
+        </tr>
+        <!-- More rows... -->
+    </tbody>
+</SkTable>
+```

package/docs/components/table/usage.md

@@ -0,0 +1,30 @@
+---
+section: usage
+order: 2
+---
+
+Wrap standard HTML table elements (`<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`) to apply clean, professional table styling with rounded corners and consistent spacing.
+
+```vue
+<SkTable>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Alice Johnson</td>
+            <td>alice@example.com</td>
+            <td>Developer</td>
+        </tr>
+        <tr>
+            <td>Bob Smith</td>
+            <td>bob@example.com</td>
+            <td>Designer</td>
+        </tr>
+    </tbody>
+</SkTable>
+```

package/docs/components/table/variants.md

@@ -0,0 +1,23 @@
+---
+section: variants
+order: 7
+---
+
+Control cell padding with the `variant` prop: `compact`, `default`, or `comfortable`.
+
+```vue
+<!-- Compact spacing -->
+<SkTable variant="compact">
+    ...
+</SkTable>
+
+<!-- Default spacing -->
+<SkTable variant="default">
+    ...
+</SkTable>
+
+<!-- Comfortable spacing -->
+<SkTable variant="comfortable">
+    ...
+</SkTable>
+```

package/docs/components/tabs/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkTabs
+category: Navigation
+sections:
+  - intro
+  - usage
+  - kinds
+  - vertical
+  - icons
+  - custom-colors
+  - accessibility

package/docs/components/tabs/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 7
+---
+
+Built on RekaUI Tabs which provides `role="tablist"`, `role="tab"`, and `role="tabpanel"` with proper `aria-selected`, `aria-controls`, and `aria-labelledby` associations. Arrow keys navigate between tabs, Home/End jump to first/last tab.

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

@@ -0,0 +1,23 @@
+---
+section: custom-colors
+order: 6
+---
+
+Use `base-color` to customize tab colors with any CSS color value. Provide `text-color` for tab text colors.
+
+```vue
+<SkTabs v-model="activeTab" base-color="oklch(0.65 0.25 280)" text-color="white">
+    <SkTabList>
+        <SkTab name="overview">Overview</SkTab>
+        <SkTab name="details">Details</SkTab>
+        <SkTab name="analytics">Analytics</SkTab>
+    </SkTabList>
+    <SkTabPanels>
+        <SkTabPanel name="overview">
+            <h4>Overview</h4>
+            <p>Custom purple tabs with white text using OKLCH color values.</p>
+        </SkTabPanel>
+        <!-- More panels -->
+    </SkTabPanels>
+</SkTabs>
+```

package/docs/components/tabs/icons.md

@@ -0,0 +1,23 @@
+---
+section: icons
+order: 5
+---
+
+Enhance tab triggers with FontAwesome icons for visual identification.
+
+```vue
+<SkTabs v-model="activeTab" kind="primary">
+    <SkTabList>
+        <SkTab name="home">
+            <FontAwesomeIcon :icon="['fasds', 'house']" class="mr-2" /> Home
+        </SkTab>
+        <SkTab name="user">
+            <FontAwesomeIcon :icon="['fasds', 'user']" class="mr-2" /> Profile
+        </SkTab>
+        <SkTab name="settings">
+            <FontAwesomeIcon :icon="['fasds', 'gear']" class="mr-2" /> Settings
+        </SkTab>
+    </SkTabList>
+    <!-- Content panels -->
+</SkTabs>
+```

package/docs/components/tabs/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkTabs
+
+A tabbed interface for organizing content into switchable panels. Composed of SkTabs, SkTabList, SkTab, SkTabPanels, and SkTabPanel. Built on RekaUI's Tabs primitive.

package/docs/components/tabs/kinds.md

@@ -0,0 +1,30 @@
+---
+section: kinds
+order: 3
+---
+
+Apply semantic colors to tabs using the `kind` prop.
+
+```vue
+<SkTabs v-model="activeTab" kind="primary">
+    <SkTabList>
+        <SkTab name="tab1">Tab One</SkTab>
+        <SkTab name="tab2">Tab Two</SkTab>
+    </SkTabList>
+    <SkTabPanels>
+        <SkTabPanel name="tab1">Primary kind tabs</SkTabPanel>
+        <SkTabPanel name="tab2">Content for tab two</SkTabPanel>
+    </SkTabPanels>
+</SkTabs>
+
+<SkTabs v-model="activeTab" kind="success">
+    <SkTabList>
+        <SkTab name="tab1">Tab One</SkTab>
+        <SkTab name="tab2">Tab Two</SkTab>
+    </SkTabList>
+    <SkTabPanels>
+        <SkTabPanel name="tab1">Success kind tabs</SkTabPanel>
+        <SkTabPanel name="tab2">Content for tab two</SkTabPanel>
+    </SkTabPanels>
+</SkTabs>
+```

package/docs/components/tabs/usage.md

@@ -0,0 +1,38 @@
+---
+section: usage
+order: 2
+---
+
+Use `v-model` to control the active tab. Each tab trigger and content panel needs a matching `name` prop.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const activeTab = ref('profile');
+</script>
+
+<template>
+    <SkTabs v-model="activeTab">
+        <SkTabList>
+            <SkTab name="profile">Profile</SkTab>
+            <SkTab name="settings">Settings</SkTab>
+            <SkTab name="notifications">Notifications</SkTab>
+        </SkTabList>
+        <SkTabPanels>
+            <SkTabPanel name="profile">
+                <h4>Profile Settings</h4>
+                <p>Manage your personal information.</p>
+            </SkTabPanel>
+            <SkTabPanel name="settings">
+                <h4>General Settings</h4>
+                <p>Configure application settings.</p>
+            </SkTabPanel>
+            <SkTabPanel name="notifications">
+                <h4>Notification Preferences</h4>
+                <p>Choose how you want to be notified.</p>
+            </SkTabPanel>
+        </SkTabPanels>
+    </SkTabs>
+</template>
+```

package/docs/components/tabs/vertical.md

@@ -0,0 +1,23 @@
+---
+section: vertical
+order: 4
+---
+
+Set `orientation="vertical"` to display tabs in a column layout.
+
+```vue
+<SkTabs v-model="activeTab" orientation="vertical" kind="primary">
+    <SkTabList>
+        <SkTab name="account">Account</SkTab>
+        <SkTab name="appearance">Appearance</SkTab>
+        <SkTab name="notifications">Notifications</SkTab>
+    </SkTabList>
+    <SkTabPanels>
+        <SkTabPanel name="account">
+            <h4>Account Settings</h4>
+            <p>Manage your account details.</p>
+        </SkTabPanel>
+        <!-- More content panels -->
+    </SkTabPanels>
+</SkTabs>
+```

package/docs/components/tag/_meta.yaml

@@ -0,0 +1,11 @@
+component: SkTag
+category: Feedback
+sections:
+  - intro
+  - usage
+  - variants
+  - kinds
+  - sizes
+  - removable
+  - custom-colors
+  - accessibility

package/docs/components/tag/accessibility.md

@@ -0,0 +1,6 @@
+---
+section: accessibility
+order: 8
+---
+
+The remove button is keyboard-accessible. Developers should provide context (such as an `aria-label`) if the tag content alone does not convey its purpose to screen readers.

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

@@ -0,0 +1,32 @@
+---
+section: custom-colors
+order: 7
+---
+
+Use `base-color` with any CSS color value. Provide `text-color` for optimal contrast, or it defaults to the theme's neutral text.
+
+```vue
+<SkTag
+    base-color="oklch(0.75 0.2 150)"
+    text-color="white"
+    variant="solid"
+>
+    Custom Green
+</SkTag>
+
+<SkTag
+    base-color="oklch(0.7 0.25 300)"
+    text-color="white"
+    variant="solid"
+>
+    Custom Purple
+</SkTag>
+
+<SkTag
+    base-color="#FF6B6B"
+    text-color="white"
+    variant="outline"
+>
+    Hex Color
+</SkTag>
+```

package/docs/components/tag/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkTag
+
+A compact label component for metadata, categories, status indicators, or keywords. Supports removable tags with a close button.

package/docs/components/tag/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 4
+---
+
+Choose from semantic kinds to indicate status, category, or priority.
+
+```vue
+<SkTag kind="neutral">Neutral</SkTag>
+<SkTag kind="primary">Primary</SkTag>
+<SkTag kind="accent">Accent</SkTag>
+<SkTag kind="info">Info</SkTag>
+<SkTag kind="success">Success</SkTag>
+<SkTag kind="warning">Warning</SkTag>
+<SkTag kind="danger">Danger</SkTag>
+```

package/docs/components/tag/removable.md

@@ -0,0 +1,33 @@
+---
+section: removable
+order: 6
+---
+
+Enable `removable` to add a remove button. Handle the `@remove` event to respond when users click the remove button.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const tags = ref(['JavaScript', 'TypeScript', 'Vue.js', 'React', 'Angular']);
+
+function removeTag(tag) {
+    const index = tags.value.indexOf(tag);
+    if (index > -1) {
+        tags.value.splice(index, 1);
+    }
+}
+</script>
+
+<template>
+    <SkTag
+        v-for="tag in tags"
+        :key="tag"
+        :removable="true"
+        kind="primary"
+        @remove="removeTag(tag)"
+    >
+        {{ tag }}
+    </SkTag>
+</template>
+```