@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Tabs/README.md

@@ -0,0 +1,331 @@
+# Tabs Component
+
+A flexible, accessible tabbed interface component for organizing content into switchable panels. Built on RekaUI with keyboard navigation, ARIA support, and semantic color theming.
+
+## Architecture
+
+The Tabs component is composed of five sub-components that work together:
+
+```
+SkTabs (root container)
+├── SkTabList (tabs navigation container)
+│   └── SkTab (individual tab trigger)
+└── SkTabPanels (content container)
+    └── SkTabPanel (individual content panel)
+```
+
+### Component Roles
+
+- **SkTabs**: Root container that manages state and provides context to children
+- **SkTabList**: Container for tab triggers with optional orientation/placement
+- **SkTab**: Individual clickable tab trigger
+- **SkTabPanels**: Container for tab content panels
+- **SkTabPanel**: Individual content panel (shown when corresponding tab is active)
+
+## Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const activeTab = ref('overview');
+</script>
+
+<template>
+  <SkTabs v-model="activeTab">
+    <SkTabList>
+      <SkTab name="overview">Overview</SkTab>
+      <SkTab name="details">Details</SkTab>
+      <SkTab name="settings">Settings</SkTab>
+    </SkTabList>
+
+    <SkTabPanels>
+      <SkTabPanel name="overview">
+        <h3>Overview</h3>
+        <p>Overview content goes here...</p>
+      </SkTabPanel>
+
+      <SkTabPanel name="details">
+        <h3>Details</h3>
+        <p>Detailed information goes here...</p>
+      </SkTabPanel>
+
+      <SkTabPanel name="settings">
+        <h3>Settings</h3>
+        <p>Settings configuration goes here...</p>
+      </SkTabPanel>
+    </SkTabPanels>
+  </SkTabs>
+</template>
+```
+
+## Orientation
+
+Tabs can be displayed horizontally (default) or vertically:
+
+```vue
+<SkTabs v-model="activeTab" orientation="vertical">
+  <SkTabList>
+    <SkTab name="tab1">Tab 1</SkTab>
+    <SkTab name="tab2">Tab 2</SkTab>
+  </SkTabList>
+  <SkTabPanels>
+    <SkTabPanel name="tab1">Content 1</SkTabPanel>
+    <SkTabPanel name="tab2">Content 2</SkTabPanel>
+  </SkTabPanels>
+</SkTabs>
+```
+
+## Placement
+
+Control where the tab list appears relative to content:
+
+```vue
+<!-- Horizontal tabs -->
+<SkTabs v-model="activeTab" placement="start">  <!-- tabs on top (default) -->
+<SkTabs v-model="activeTab" placement="end">    <!-- tabs on bottom -->
+
+<!-- Vertical tabs -->
+<SkTabs v-model="activeTab" orientation="vertical" placement="start">  <!-- tabs on left (default) -->
+<SkTabs v-model="activeTab" orientation="vertical" placement="end">    <!-- tabs on right -->
+```
+
+## Semantic Colors
+
+Apply semantic color themes to all tabs:
+
+```vue
+<SkTabs v-model="activeTab" kind="primary">
+  <SkTabList>
+    <SkTab name="tab1">Tab 1</SkTab>
+    <SkTab name="tab2">Tab 2</SkTab>
+  </SkTabList>
+  <SkTabPanels>
+    <SkTabPanel name="tab1">Content 1</SkTabPanel>
+    <SkTabPanel name="tab2">Content 2</SkTabPanel>
+  </SkTabPanels>
+</SkTabs>
+```
+
+Available kinds: `neutral`, `primary`, `accent`, `info`, `success`, `warning`, `danger`
+
+Individual tabs can override the parent kind:
+
+```vue
+<SkTabs v-model="activeTab" kind="neutral">
+  <SkTabList>
+    <SkTab name="normal">Normal</SkTab>
+    <SkTab name="important" kind="warning">Important</SkTab>
+  </SkTabList>
+  <!-- ... -->
+</SkTabs>
+```
+
+## Custom Colors
+
+Use custom colors for complete theming control:
+
+```vue
+<SkTabs
+  v-model="activeTab"
+  base-color="oklch(0.65 0.25 280)"
+  text-color="white"
+>
+  <SkTabList>
+    <SkTab name="tab1">Custom Purple Tab</SkTab>
+    <SkTab name="tab2">Another Tab</SkTab>
+  </SkTabList>
+  <SkTabPanels>
+    <SkTabPanel name="tab1">Content with custom colors</SkTabPanel>
+    <SkTabPanel name="tab2">More content</SkTabPanel>
+  </SkTabPanels>
+</SkTabs>
+```
+
+## Icons in Tabs
+
+Add icons to tabs using the `icon` slot:
+
+```vue
+<SkTab name="home">
+  <template #icon>
+    <FontAwesomeIcon :icon="['fas', 'home']" />
+  </template>
+  Home
+</SkTab>
+```
+
+## Disabled Tabs
+
+Disable specific tabs to prevent interaction:
+
+```vue
+<SkTab name="comingSoon" :disabled="true">
+  Coming Soon
+</SkTab>
+```
+
+## Flush Mode
+
+Use negative margins to align tabs with parent container edges:
+
+```vue
+<SkTabs v-model="activeTab" flush>
+  <!-- tabs will align flush with container edges -->
+</SkTabs>
+```
+
+## Accessibility
+
+The Tabs component follows WAI-ARIA authoring practices:
+
+- **Keyboard Navigation**:
+  - `Tab`: Move focus into and out of tab list
+  - `Arrow Left/Right` (horizontal): Navigate between tabs
+  - `Arrow Up/Down` (vertical): Navigate between tabs
+  - `Home`: Focus first tab
+  - `End`: Focus last tab
+  - `Enter/Space`: Activate focused tab
+
+- **ARIA Attributes**:
+  - `role="tablist"` on SkTabList
+  - `role="tab"` on SkTab
+  - `role="tabpanel"` on SkTabPanel
+  - `aria-selected` indicates active tab
+  - `aria-controls` links tabs to panels
+  - `aria-labelledby` links panels to tabs
+
+- **Focus Management**: Active tab receives focus, inactive panels are hidden from screen readers
+
+## API Reference
+
+### SkTabs Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `string \| number` | (required) | Currently active tab identifier |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab layout direction |
+| `placement` | `'start' \| 'end'` | `'start'` | Tab list position relative to content |
+| `kind` | `ComponentKind` | `undefined` | Semantic color kind for all tabs |
+| `flush` | `boolean` | `false` | Use negative margins for edge alignment |
+| `baseColor` | `string` | `undefined` | Custom base color (CSS color value) |
+| `textColor` | `string` | `undefined` | Custom text color (CSS color value) |
+
+### SkTabs Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `string \| number` | Emitted when active tab changes |
+
+### SkTab Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string \| number` | (required) | Unique identifier matching SkTabPanel |
+| `label` | `string` | `undefined` | Tab label text (can use default slot instead) |
+| `disabled` | `boolean` | `false` | Whether tab is disabled |
+| `kind` | `ComponentKind` | `undefined` | Override parent tabs kind |
+
+### SkTab Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Tab label content (overrides `label` prop) |
+| `icon` | Icon displayed before label |
+
+## Best Practices
+
+1. **Unique Names**: Ensure each tab `name` matches exactly one panel `name`
+2. **Meaningful Labels**: Use clear, concise tab labels that describe content
+3. **Limited Tabs**: Avoid more than 5-7 tabs; consider alternative UI patterns for more
+4. **Consistent Height**: Keep tab panel content height consistent to avoid layout shifts
+5. **Loading States**: Show loading indicators when switching tabs with async content
+6. **Preserve State**: Consider using `<KeepAlive>` to preserve panel state when switching
+
+## Common Patterns
+
+### Tabs with Icons
+
+```vue
+<SkTabList>
+  <SkTab name="home">
+    <template #icon>
+      <HomeIcon />
+    </template>
+    Home
+  </SkTab>
+  <SkTab name="settings">
+    <template #icon>
+      <SettingsIcon />
+    </template>
+    Settings
+  </SkTab>
+</SkTabList>
+```
+
+### Conditional Tabs
+
+```vue
+<SkTabList>
+  <SkTab name="public">Public</SkTab>
+  <SkTab v-if="isAdmin" name="admin">Admin</SkTab>
+</SkTabList>
+
+<SkTabPanels>
+  <SkTabPanel name="public">Public content</SkTabPanel>
+  <SkTabPanel v-if="isAdmin" name="admin">Admin content</SkTabPanel>
+</SkTabPanels>
+```
+
+### Async Tab Content
+
+```vue
+<script setup>
+const activeTab = ref('overview');
+const data = ref(null);
+const loading = ref(false);
+
+watch(activeTab, async (newTab) => {
+  loading.value = true;
+  data.value = await fetchTabData(newTab);
+  loading.value = false;
+});
+</script>
+
+<template>
+  <SkTabs v-model="activeTab">
+    <SkTabList>
+      <SkTab name="overview">Overview</SkTab>
+      <SkTab name="details">Details</SkTab>
+    </SkTabList>
+
+    <SkTabPanels>
+      <SkTabPanel name="overview">
+        <div v-if="loading">Loading...</div>
+        <div v-else>{{ data }}</div>
+      </SkTabPanel>
+      <SkTabPanel name="details">
+        <div v-if="loading">Loading...</div>
+        <div v-else>{{ data }}</div>
+      </SkTabPanel>
+    </SkTabPanels>
+  </SkTabs>
+</template>
+```
+
+## Styling
+
+Tabs use CSS custom properties for theming:
+
+```css
+.sk-tabs {
+  --sk-tab-color-base: /* base color for active tab indicator */
+  --sk-tab-fg: /* text color */
+  --sk-tab-padding: /* tab padding */
+  --sk-tab-gap: /* gap between tabs */
+  --sk-tab-border-width: /* active indicator height */
+  --sk-tab-inactive-opacity: /* opacity for inactive tabs */
+}
+```
+
+Override these in your styles or use the `baseColor`/`textColor` props for component-level customization.

package/src/components/Tabs/SkTab.vue

@@ -0,0 +1,84 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Tab Component (powered by RekaUI)
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <TabsTrigger
+        :value="String(name)"
+        :disabled="disabled"
+        :class="classes"
+    >
+        <span v-if="$slots.icon" class="sk-tab-icon">
+            <slot name="icon" />
+        </span>
+        <span class="sk-tab-label">
+            <span class="sk-tab-label-normal">
+                <slot>{{ label }}</slot>
+            </span>
+            <span class="sk-tab-label-bold" aria-hidden="true">
+                <slot>{{ label }}</slot>
+            </span>
+        </span>
+    </TabsTrigger>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * An individual tab trigger component powered by RekaUI.
+     * Used within SkTabList to switch between tab panels.
+     */
+
+    import { type ComputedRef, computed, inject } from 'vue';
+    import { TabsTrigger } from 'reka-ui';
+    import type { ComponentKind } from '@/types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * An individual tab trigger component powered by RekaUI.
+     * Used within SkTabList to switch between tab panels.
+     */
+    export interface SkTabComponentProps
+    {
+        /** Unique identifier matching the corresponding SkTabPanel */
+        name : string | number;
+        /** Text label displayed in the tab (can be overridden by default slot) */
+        label ?: string;
+        /** Whether the tab is disabled and unclickable */
+        disabled ?: boolean;
+        /** Semantic color kind (overrides parent tabs kind if provided) */
+        kind ?: ComponentKind;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTabComponentProps>(), {
+        label: undefined,
+        disabled: false,
+        kind: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Inject parent kind (Sleekspace-specific for theming)
+    const parentKind = inject<ComputedRef<ComponentKind | undefined>>('tabs-kind', computed(() => undefined));
+
+    // Use prop kind if provided, otherwise use parent kind
+    const kind = computed(() => props.kind ?? parentKind.value);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-tab': true,
+            [`sk-${ kind.value }`]: !!kind.value,
+            'sk-disabled': props.disabled,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Tabs/SkTabList.vue

@@ -0,0 +1,62 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Tab List Component (powered by RekaUI)
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <TabsList :class="classes">
+        <slot />
+    </TabsList>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A container component for SkTab components powered by RekaUI.
+     * Arranges tabs in horizontal or vertical orientation.
+     */
+
+    import { computed, inject } from 'vue';
+    import { TabsList } from 'reka-ui';
+    import type { SkTabsOrientation } from './types.ts';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A container component for SkTab components powered by RekaUI.
+     * Arranges tabs in horizontal or vertical orientation.
+     */
+    export interface SkTabListComponentProps
+    {
+        /** Orientation for arranging tabs (overrides parent SkTabs orientation if provided) */
+        orientation ?: SkTabsOrientation;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTabListComponentProps>(), {
+        orientation: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Inject orientation from parent (if prop not provided)
+    // Note: RekaUI's TabsList gets orientation from TabsRoot context automatically,
+    // but we need it for our styling classes
+    const contextOrientation = inject<any>('tabs-orientation', 'horizontal');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveOrientation = computed(() => props.orientation || contextOrientation.value);
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-tab-list': true,
+            [`sk-${ effectiveOrientation.value }`]: true,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Tabs/SkTabPanel.vue

@@ -0,0 +1,47 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Tab Panel Component (powered by RekaUI)
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <TabsContent
+        :value="String(name)"
+        :force-mount="keepAlive"
+        class="sk-tab-panel"
+    >
+        <slot />
+    </TabsContent>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A content panel component for displaying tab content powered by RekaUI.
+     * Automatically shown/hidden based on the active tab in the parent SkTabs.
+     */
+
+    import { TabsContent } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A content panel component for displaying tab content powered by RekaUI.
+     * Automatically shown/hidden based on the active tab in the parent SkTabs.
+     */
+    export interface SkTabPanelComponentProps
+    {
+        /** Unique identifier matching the corresponding SkTab */
+        name : string | number;
+        /** Whether to keep panel mounted in DOM even when inactive */
+        keepAlive ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkTabPanelComponentProps>(), {
+        keepAlive: false,
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Tabs/SkTabPanels.vue

@@ -0,0 +1,23 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Tab Panels Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div class="sk-tab-panels">
+        <slot />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A simple container component for grouping SkTabPanel components.
+     * Provides semantic structure for organizing tab content.
+     */
+
+    // No props or logic needed - just provides semantic structure
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Tabs/SkTabs.vue

@@ -0,0 +1,124 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Tabs Component (powered by RekaUI)
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <TabsRoot
+        :model-value="modelValue"
+        :orientation="orientation"
+        :class="classes"
+        :style="customColorStyles"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <slot />
+    </TabsRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A tabbed interface component for organizing content into switchable panels powered by RekaUI.
+     * Manages active tab state and provides context to child tab components.
+     */
+
+    import { computed, provide, toRef } from 'vue';
+    import { TabsRoot } from 'reka-ui';
+    import type {
+        SkTabsOrientation,
+        SkTabsPlacement,
+    } from './types';
+    import type { ComponentCustomColors, ComponentKind } from '@/types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A tabbed interface component for organizing content into switchable panels powered by RekaUI.
+     * Manages active tab state and provides context to child tab components.
+     *
+     * @example Basic tabs
+     * ```vue
+     * <SkTabs v-model="activeTab">
+     *   <SkTabList>
+     *     <SkTab name="overview">Overview</SkTab>
+     *     <SkTab name="details">Details</SkTab>
+     *   </SkTabList>
+     *   <SkTabPanels>
+     *     <SkTabPanel name="overview">Overview content</SkTabPanel>
+     *     <SkTabPanel name="details">Details content</SkTabPanel>
+     *   </SkTabPanels>
+     * </SkTabs>
+     * ```
+     *
+     * @example Custom colors
+     * ```vue
+     * <SkTabs
+     *   v-model="activeTab"
+     *   base-color="oklch(0.65 0.2 280)"
+     *   text-color="white"
+     * >
+     *   <!-- Tab content -->
+     * </SkTabs>
+     * ```
+     */
+    export interface SkTabsComponentProps extends ComponentCustomColors
+    {
+        /** Currently active tab identifier (matching a SkTab name) */
+        modelValue : string | number;
+        /** Orientation for tab layout (horizontal or vertical) */
+        orientation ?: SkTabsOrientation;
+        /** Placement of tabs relative to content (start, center, end) */
+        placement ?: SkTabsPlacement;
+        /** Semantic color kind for all tabs (can be overridden per tab) */
+        kind ?: ComponentKind;
+        /** Whether to use negative margins to align with parent container edges */
+        flush ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTabsComponentProps>(), {
+        orientation: 'horizontal',
+        placement: 'start',
+        kind: undefined,
+        flush: false,
+    });
+
+    defineEmits<{
+        'update:modelValue' : [value : string | number];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Provide our custom props to child components for styling
+    // (RekaUI handles its own context internally, but we need these for our CSS classes)
+    provide('tabs-orientation', computed(() => props.orientation));
+    provide('tabs-placement', computed(() => props.placement));
+    provide('tabs-kind', computed(() => props.kind));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-tabs': true,
+            [`sk-${ props.orientation }`]: true,
+            [`sk-placement-${ props.placement }`]: true,
+            [`sk-${ props.kind }`]: !!props.kind,
+            'sk-flush': props.flush,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'tabs',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Tabs/types.ts

@@ -0,0 +1,21 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Tabs Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { SkButtonKind, SkButtonSize, SkButtonVariant } from '../Button/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Tabs visual variant
+export type SkTabsVariant = 'underline' | 'buttons';
+
+// Tabs orientation
+export type SkTabsOrientation = 'horizontal' | 'vertical';
+
+// Tab list placement (for vertical: start=left, end=right; for horizontal: start=top, end=bottom)
+export type SkTabsPlacement = 'start' | 'end';
+
+// Re-export button types for convenience
+export type { SkButtonKind, SkButtonVariant, SkButtonSize };
+
+//----------------------------------------------------------------------------------------------------------------------