@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Radio/SkRadio.vue

@@ -0,0 +1,110 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Radio Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <label :class="labelClasses">
+        <RadioGroupItem
+            :class="classes"
+            :style="customColorStyles"
+            :value="value"
+            :disabled="disabled"
+        >
+            <RadioGroupIndicator class="sk-radio-indicator" />
+        </RadioGroupItem>
+        <span v-if="label || $slots.default" class="sk-radio-label">
+            <slot>{{ label }}</slot>
+        </span>
+    </label>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_radio.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * An individual radio button component powered by RekaUI.
+     * Must be used within SkRadioGroup.
+     */
+
+    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkRadioKind, SkRadioSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * An individual radio button component powered by RekaUI.
+     * Must be used within SkRadioGroup.
+     */
+    export interface SkRadioComponentProps extends ComponentCustomColors
+    {
+        /** Value for this radio option */
+        value : string | number;
+        /** Label text (can be overridden by default slot) */
+        label ?: string;
+        /** Disabled state */
+        disabled ?: boolean;
+        /** Semantic color kind (inherits from parent if not set) */
+        kind ?: SkRadioKind;
+        /** Size (inherits from parent if not set) */
+        size ?: SkRadioSize;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkRadioComponentProps>(), {
+        label: undefined,
+        disabled: false,
+        kind: undefined,
+        size: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Inject parent kind and size
+    const parentKind = inject<ComputedRef<SkRadioKind | undefined>>('radio-kind', computed(() => undefined));
+    const parentSize = inject<ComputedRef<SkRadioSize | undefined>>('radio-size', computed(() => undefined));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => props.kind ?? parentKind.value ?? 'neutral');
+    const effectiveSize = computed(() => props.size ?? parentSize.value ?? 'md');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-radio': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const labelClasses = computed(() => ({
+        'sk-radio-wrapper': true,
+        'sk-disabled': props.disabled,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'radio',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Radio/SkRadioGroup.vue

@@ -0,0 +1,92 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - RadioGroup Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <RadioGroupRoot
+        v-model="modelValue"
+        :class="classes"
+        :orientation="orientation"
+        :disabled="disabled"
+        :required="required"
+        :name="name"
+    >
+        <slot />
+    </RadioGroupRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_radio.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A radio group container for exclusive selection powered by RekaUI.
+     * Manages state and keyboard navigation for child SkRadio components.
+     */
+
+    import { computed, provide } from 'vue';
+    import { RadioGroupRoot } from 'reka-ui';
+
+    // Types
+    import type { SkRadioGroupOrientation, SkRadioKind, SkRadioSize } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A radio group container for exclusive selection powered by RekaUI.
+     */
+    export interface SkRadioGroupComponentProps
+    {
+        /** Orientation for layout */
+        orientation ?: SkRadioGroupOrientation;
+        /** Semantic color kind for all radios */
+        kind ?: SkRadioKind;
+        /** Size for all radios */
+        size ?: SkRadioSize;
+        /** Disabled state for entire group */
+        disabled ?: boolean;
+        /** Required for form validation */
+        required ?: boolean;
+        /** Form field name */
+        name ?: string;
+        /** Enable circular keyboard navigation */
+        loop ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkRadioGroupComponentProps>(), {
+        orientation: 'vertical',
+        kind: 'neutral',
+        size: 'md',
+        disabled: false,
+        required: false,
+        name: undefined,
+        loop: true,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const modelValue = defineModel<string | number>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Provide kind and size to child radios
+    provide('radio-kind', computed(() => props.kind));
+    provide('radio-size', computed(() => props.size));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-radio-group': true,
+        [`sk-${ props.orientation }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Radio/index.ts

@@ -0,0 +1,9 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Radio Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkRadio } from './SkRadio.vue';
+export { default as SkRadioGroup } from './SkRadioGroup.vue';
+export type { SkRadioKind, SkRadioGroupOrientation, SkRadioSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Radio/types.ts

@@ -0,0 +1,11 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Radio Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkRadioKind = ComponentKind;
+export type SkRadioSize = ComponentSize;
+export type SkRadioGroupOrientation = 'horizontal' | 'vertical';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Sidebar/README.md

@@ -0,0 +1,405 @@
+# Sidebar Component
+
+A flexible navigation sidebar container with semantic color theming, styled sections, and angled clip-path hover effects. Built on the Panel component with active link highlighting and router integration support.
+
+## Architecture
+
+The Sidebar component consists of three sub-components:
+
+```
+SkSidebar (root container)
+└── SkSidebarSection (optional grouping)
+    └── SkSidebarItem (navigation link)
+```
+
+### Component Roles
+
+- **SkSidebar**: Root container that wraps a Panel for consistent styling
+- **SkSidebarSection**: Optional grouping component with a title for organizing nav items
+- **SkSidebarItem**: Individual navigation link (supports any element type)
+
+## Basic Usage
+
+```vue
+<template>
+  <div class="layout">
+    <SkSidebar>
+      <SkSidebarSection title="Navigation">
+        <SkSidebarItem href="/">Home</SkSidebarItem>
+        <SkSidebarItem href="/products">Products</SkSidebarItem>
+        <SkSidebarItem href="/about">About</SkSidebarItem>
+        <SkSidebarItem href="/contact">Contact</SkSidebarItem>
+      </SkSidebarSection>
+    </SkSidebar>
+
+    <main class="content">
+      <!-- Your page content -->
+    </main>
+  </div>
+</template>
+
+<style>
+.layout {
+  display: flex;
+  gap: 1rem;
+}
+
+.content {
+  flex: 1;
+}
+</style>
+```
+
+## Multiple Sections
+
+Organize navigation into logical groups using multiple sections:
+
+```vue
+<SkSidebar>
+  <SkSidebarSection title="Application">
+    <SkSidebarItem href="/dashboard">Dashboard</SkSidebarItem>
+    <SkSidebarItem href="/analytics">Analytics</SkSidebarItem>
+  </SkSidebarSection>
+
+  <SkDivider />
+
+  <SkSidebarSection title="Management">
+    <SkSidebarItem href="/users">Users</SkSidebarItem>
+    <SkSidebarItem href="/teams">Teams</SkSidebarItem>
+  </SkSidebarSection>
+
+  <SkDivider />
+
+  <SkSidebarSection title="Account">
+    <SkSidebarItem href="/settings">Settings</SkSidebarItem>
+    <SkSidebarItem href="/billing">Billing</SkSidebarItem>
+  </SkSidebarSection>
+</SkSidebar>
+```
+
+## Semantic Colors
+
+Apply semantic color themes to the entire sidebar:
+
+```vue
+<SkSidebar kind="primary">
+  <SkSidebarSection title="Navigation">
+    <SkSidebarItem href="/">Home</SkSidebarItem>
+  </SkSidebarSection>
+</SkSidebar>
+```
+
+Available kinds: `neutral` (default), `primary`, `accent`, `info`, `success`, `warning`, `danger`
+
+## Custom Colors
+
+Use custom colors for complete theming control:
+
+```vue
+<SkSidebar
+  base-color="oklch(0.3 0.15 260)"
+  text-color="oklch(0.85 0.05 260)"
+>
+  <SkSidebarSection title="Navigation">
+    <SkSidebarItem href="/dashboard">Dashboard</SkSidebarItem>
+    <SkSidebarItem href="/analytics">Analytics</SkSidebarItem>
+  </SkSidebarSection>
+</SkSidebar>
+```
+
+## Width Control
+
+Customize the sidebar width:
+
+```vue
+<SkSidebar width="250px">
+  <!-- Navigation items -->
+</SkSidebar>
+```
+
+## Router Integration
+
+### Vue Router
+
+Use with Vue Router's `<RouterLink>`:
+
+```vue
+<SkSidebarItem as="RouterLink" to="/">
+  Home
+</SkSidebarItem>
+```
+
+The `router-link-active` class is automatically applied to active routes.
+
+### Manual Active State
+
+Control active state manually:
+
+```vue
+<script setup>
+const currentPage = ref('home');
+</script>
+
+<template>
+  <SkSidebarItem
+    href="/"
+    :active="currentPage === 'home'"
+  >
+    Home
+  </SkSidebarItem>
+</template>
+```
+
+## Icons
+
+Add icons to sidebar items:
+
+```vue
+<SkSidebarItem href="/dashboard">
+  <FontAwesomeIcon :icon="['fas', 'chart-line']" class="mr-2" />
+  Dashboard
+</SkSidebarItem>
+```
+
+## Without Sections
+
+Sections are optional - items can be direct children of the sidebar:
+
+```vue
+<SkSidebar>
+  <SkSidebarItem href="/">Home</SkSidebarItem>
+  <SkSidebarItem href="/about">About</SkSidebarItem>
+  <SkSidebarItem href="/contact">Contact</SkSidebarItem>
+</SkSidebar>
+```
+
+## Button Items
+
+Render items as buttons for non-navigation actions:
+
+```vue
+<SkSidebarSection title="Actions">
+  <SkSidebarItem
+    as="button"
+    @click="handleLogout"
+  >
+    Logout
+  </SkSidebarItem>
+</SkSidebarSection>
+```
+
+## Positioning
+
+The Sidebar component does NOT include positioning styles - you control the layout:
+
+### Fixed Positioning
+
+```vue
+<template>
+  <div class="app-layout">
+    <div class="sidebar-wrapper">
+      <SkSidebar>
+        <!-- nav items -->
+      </SkSidebar>
+    </div>
+    <main class="main-content">
+      <!-- content -->
+    </main>
+  </div>
+</template>
+
+<style>
+.app-layout {
+  display: flex;
+}
+
+.sidebar-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 10;
+}
+
+.main-content {
+  margin-left: 180px; /* match sidebar width */
+  flex: 1;
+}
+</style>
+```
+
+### Sticky Positioning
+
+```vue
+<style>
+.sidebar-wrapper {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+</style>
+```
+
+### Flex Layout
+
+```vue
+<template>
+  <div class="flex-layout">
+    <SkSidebar />
+    <main class="flex-1">
+      <!-- content -->
+    </main>
+  </div>
+</template>
+
+<style>
+.flex-layout {
+  display: flex;
+  gap: 1rem;
+}
+</style>
+```
+
+## API Reference
+
+### SkSidebar Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `ComponentKind` | `'neutral'` | Semantic color kind for the sidebar |
+| `width` | `string` | `'180px'` | CSS width value for the sidebar |
+| `baseColor` | `string` | `undefined` | Custom base color (CSS color value) |
+| `textColor` | `string` | `undefined` | Custom text color (CSS color value) |
+
+### SkSidebarSection Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `undefined` | Optional section heading |
+
+### SkSidebarItem Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `as` | `string` | `'a'` | HTML tag or component name to render as |
+| `active` | `boolean` | `false` | Whether this item is currently active |
+
+**Note**: All HTML attributes and component props are passed through via `v-bind="$attrs"`, so you can use `href`, `to`, `@click`, etc. directly on `SkSidebarItem`.
+
+## Styling
+
+Sidebar uses CSS custom properties inherited from Panel:
+
+```css
+.sk-sidebar {
+  --sk-sidebar-width: /* sidebar width */
+  --sk-panel-color-base: /* background color from Panel */
+  --sk-panel-fg: /* text color from Panel */
+}
+
+.sk-sidebar-item {
+  /* Angled clip-path on hover/active */
+  clip-path: polygon(
+    10px 0%,
+    100% 0%,
+    100% calc(100% - 10px),
+    calc(100% - 10px) 100%,
+    0% 100%,
+    0% 10px
+  );
+}
+```
+
+## Common Patterns
+
+### Collapsible Sidebar
+
+```vue
+<script setup>
+const collapsed = ref(false);
+</script>
+
+<template>
+  <SkSidebar :width="collapsed ? '60px' : '180px'">
+    <button @click="collapsed = !collapsed" class="collapse-btn">
+      {{ collapsed ? '→' : '←' }}
+    </button>
+    <SkSidebarSection v-if="!collapsed" title="Navigation">
+      <SkSidebarItem href="/">Home</SkSidebarItem>
+    </SkSidebarSection>
+  </SkSidebar>
+</template>
+```
+
+### Sidebar with User Profile
+
+```vue
+<SkSidebar>
+  <SkSidebarSection title="Navigation">
+    <SkSidebarItem href="/dashboard">Dashboard</SkSidebarItem>
+    <SkSidebarItem href="/projects">Projects</SkSidebarItem>
+  </SkSidebarSection>
+
+  <SkDivider />
+
+  <SkSidebarSection title="Account">
+    <div class="user-profile">
+      <img :src="user.avatar" class="avatar" />
+      <span>{{ user.name }}</span>
+    </div>
+    <SkSidebarItem href="/settings">Settings</SkSidebarItem>
+    <SkSidebarItem as="button" @click="logout">Logout</SkSidebarItem>
+  </SkSidebarSection>
+</SkSidebar>
+```
+
+### Conditional Navigation
+
+```vue
+<SkSidebar>
+  <SkSidebarSection title="Main">
+    <SkSidebarItem href="/">Home</SkSidebarItem>
+    <SkSidebarItem href="/dashboard">Dashboard</SkSidebarItem>
+  </SkSidebarSection>
+
+  <SkSidebarSection v-if="isAdmin" title="Admin">
+    <SkSidebarItem href="/admin/users">Manage Users</SkSidebarItem>
+    <SkSidebarItem href="/admin/settings">System Settings</SkSidebarItem>
+  </SkSidebarSection>
+</SkSidebar>
+```
+
+## Best Practices
+
+1. **Semantic Sections**: Group related navigation items into logical sections
+2. **Clear Labels**: Use concise, descriptive labels for navigation items
+3. **Active States**: Always indicate the current page/section
+4. **Consistent Width**: Maintain consistent sidebar width across your application
+5. **Icons**: Use icons consistently - either all items have icons or none do
+6. **Keyboard Navigation**: Ensure items are keyboard-accessible (native with links/buttons)
+7. **Mobile Considerations**: Consider a drawer/overlay pattern for mobile viewports
+8. **Logical Order**: Place most important/frequently used items at the top
+
+## Accessibility
+
+- **Semantic HTML**: Uses `<aside>` and `<nav>` elements for proper landmark roles
+- **Link Accessibility**: Links and buttons receive proper focus states
+- **Active Indication**: Active items visually and programmatically indicated
+- **Keyboard Navigation**: All items accessible via Tab key
+- **Screen Readers**: Section titles provide context for navigation groups
+
+## Layout Considerations
+
+The Sidebar component is a **presentational component** - it does not include positioning or layout styles. This gives you complete control over how it fits into your application's layout.
+
+**Why no built-in positioning?**
+- Different apps have different layout needs (fixed, sticky, flex, grid)
+- Avoids conflicts with parent layout systems
+- Keeps the component flexible and reusable
+- Prevents z-index and stacking context issues
+
+**You are responsible for:**
+- Positioning the sidebar in your layout
+- Managing responsive behavior (mobile drawers, etc.)
+- Coordinating with other fixed/sticky elements (headers, footers)
+- Handling overflow and scrolling behavior