@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Divider/SkDivider.vue

@@ -0,0 +1,63 @@
+<!--------------------------------------------------------------------------------------------------------------------
+  - Divider Component
+  -------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <hr :class="classes" role="separator" :aria-orientation="orientation">
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A visual separator component for dividing content.
+     * Supports horizontal and vertical orientations with subtle or default styling.
+     */
+
+    import { computed } from 'vue';
+    import type { ComponentKind, ComponentSize } from '@/types';
+    import type { SkDividerOrientation, SkDividerVariant } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A visual separator component for dividing content.
+     * Supports horizontal and vertical orientations with subtle or default styling.
+     */
+    export interface SkDividerComponentProps
+    {
+        /** Orientation of the divider line (horizontal or vertical) */
+        orientation ?: SkDividerOrientation;
+        /** Semantic color kind for the divider */
+        kind ?: ComponentKind;
+        /** Visual variant (subtle for lighter appearance) */
+        variant ?: SkDividerVariant;
+        /** Size of the divider (controls thickness and spacing) */
+        size ?: ComponentSize;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkDividerComponentProps>(), {
+        orientation: 'horizontal',
+        kind: 'neutral',
+        variant: undefined,
+        size: 'md',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-divider': true,
+            [`sk-${ props.orientation }`]: true,
+            [`sk-${ props.kind }`]: true,
+            [`sk-${ props.size }`]: true,
+            'sk-subtle': props.variant === 'subtle',
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Divider/types.ts

@@ -0,0 +1,15 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Divider Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Divider orientation options
+ */
+export type SkDividerOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Divider variant options
+ */
+export type SkDividerVariant = 'subtle';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Dropdown/SkDropdown.vue

@@ -0,0 +1,150 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Dropdown Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuRoot>
+        <DropdownMenuTrigger as-child>
+            <slot name="trigger">
+                <SkButton :kind="kind">
+                    {{ triggerText }}
+                    <template #trailing>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="square"
+                            stroke-linejoin="miter"
+                            style="width: 1rem; height: 1rem;"
+                        >
+                            <polyline :points="caretPoints" />
+                        </svg>
+                    </template>
+                </SkButton>
+            </slot>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuPortal>
+            <DropdownMenuContent
+                :data-scheme="theme"
+                :class="classes"
+                :style="customColorStyles"
+                :side="side"
+                :align="align"
+                :side-offset="sideOffset"
+            >
+                <slot />
+            </DropdownMenuContent>
+        </DropdownMenuPortal>
+    </DropdownMenuRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles use shared menu styles from /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A dropdown menu component combining a trigger button and menu content powered by RekaUI.
+     * Use with SkMenuItem and SkMenuSeparator components.
+     */
+
+    import { computed, provide, toRef } from 'vue';
+    import {
+        DropdownMenuContent,
+        DropdownMenuPortal,
+        DropdownMenuRoot,
+        DropdownMenuTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkDropdownAlign, SkDropdownKind, SkDropdownSide } from './types';
+
+    // Components
+    import SkButton from '../Button/SkButton.vue';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A dropdown menu component combining a trigger button and menu content powered by RekaUI.
+     */
+    export interface SkDropdownComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind */
+        kind ?: SkDropdownKind;
+        /** Text for default trigger button (use trigger slot for custom trigger) */
+        triggerText ?: string;
+        /** Side of the trigger to position menu */
+        side ?: SkDropdownSide;
+        /** Alignment relative to trigger */
+        align ?: SkDropdownAlign;
+        /** Offset from the trigger in pixels */
+        sideOffset ?: number;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkDropdownComponentProps>(), {
+        kind: 'neutral',
+        triggerText: 'Menu',
+        side: 'bottom',
+        align: 'start',
+        sideOffset: 4,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    // Provide kind for submenus (reactive computed so changes propagate)
+    provide('dropdown-kind', computed(() => props.kind));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Caret direction based on menu side
+    const caretPoints = computed(() =>
+    {
+        switch (props.side)
+        {
+            case 'top':
+                return '6 15 12 9 18 15'; // Point up
+            case 'right':
+                return '9 6 15 12 9 18'; // Point right
+            case 'left':
+                return '15 6 9 12 15 18'; // Point left
+            case 'bottom':
+            default:
+                return '6 9 12 15 18 9'; // Point down
+        }
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-dropdown-menu-content': true,
+        [`sk-${ props.kind }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'dropdown',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/SkDropdownMenuItem.vue

@@ -0,0 +1,58 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - MenuItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuItem :class="classes" :disabled="disabled" @click="$emit('click', $event)">
+        <slot />
+    </DropdownMenuItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A menu item component for use within SkDropdown.
+     */
+
+    import { computed } from 'vue';
+    import { DropdownMenuItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A menu item component for use within SkDropdown.
+     */
+    export interface SkDropdownMenuItemComponentProps
+    {
+        /** Disabled state */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkDropdownMenuItemComponentProps>(), {
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        click : [event : Event];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-dropdown-menu-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/SkDropdownMenuSeparator.vue

@@ -0,0 +1,26 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - MenuSeparator Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuSeparator class="sk-menu-separator" />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A menu separator component for use within SkDropdown.
+     */
+
+    import { DropdownMenuSeparator } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/SkDropdownSubmenu.vue

@@ -0,0 +1,107 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - DropdownSubmenu Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuSub>
+        <DropdownMenuSubTrigger :class="triggerClasses">
+            {{ triggerText }}
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="square"
+                stroke-linejoin="miter"
+                class="sk-submenu-caret"
+            >
+                <polyline points="9 6 15 12 9 18" />
+            </svg>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuPortal>
+            <DropdownMenuSubContent
+                :data-scheme="theme"
+                :class="contentClasses"
+            >
+                <slot />
+            </DropdownMenuSubContent>
+        </DropdownMenuPortal>
+    </DropdownMenuSub>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles use shared menu styles from /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A dropdown submenu component for nested menus.
+     * Use with SkDropdownMenuItem components in default slot.
+     */
+
+    import { computed, inject } from 'vue';
+
+    // Composables
+    import { usePortalContext } from '@/composables/usePortalContext';
+    import {
+        DropdownMenuPortal,
+        DropdownMenuSub,
+        DropdownMenuSubContent,
+        DropdownMenuSubTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { SkDropdownKind } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A dropdown submenu component for nested menus.
+     */
+    export interface SkDropdownSubmenuComponentProps
+    {
+        /** Text for submenu trigger */
+        triggerText : string;
+        /** Semantic color kind (inherits from parent dropdown if not set) */
+        kind ?: SkDropdownKind;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkDropdownSubmenuComponentProps>(), {
+        kind: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    // Inject parent dropdown kind (will be a ComputedRef)
+    const parentKind = inject<any>('dropdown-kind', computed(() => 'neutral'));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => props.kind || parentKind.value || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const triggerClasses = computed(() => ({
+        'sk-dropdown-menu-item': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-dropdown-menu-content': true,
+        [`sk-${ effectiveKind.value }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/index.ts

@@ -0,0 +1,11 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Dropdown Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkDropdown } from './SkDropdown.vue';
+export { default as SkDropdownMenuItem } from './SkDropdownMenuItem.vue';
+export { default as SkDropdownMenuSeparator } from './SkDropdownMenuSeparator.vue';
+export { default as SkDropdownSubmenu } from './SkDropdownSubmenu.vue';
+export type { SkDropdownAlign, SkDropdownKind, SkDropdownSide } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Dropdown/types.ts

@@ -0,0 +1,11 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Dropdown Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+export type SkDropdownKind = ComponentKind;
+export type SkDropdownSide = 'top' | 'right' | 'bottom' | 'left';
+export type SkDropdownAlign = 'start' | 'center' | 'end';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Field/SkField.vue

@@ -0,0 +1,152 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Field Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="classes">
+        <label v-if="label" :for="fieldId" class="sk-field-label">
+            {{ label }}
+            <span v-if="required" class="sk-field-required">*</span>
+        </label>
+
+        <div class="sk-field-input-wrapper">
+            <slot :id="fieldId" :aria-describedby="ariaDescribedBy" :aria-invalid="ariaInvalid" :kind="effectiveKind" />
+        </div>
+
+        <p v-if="description && !error" :id="descriptionId" class="sk-field-description">
+            {{ description }}
+        </p>
+
+        <p v-if="error" :id="errorId" class="sk-field-error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_field.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A form field wrapper that provides label, description, and error message support.
+     * Automatically wires up accessibility attributes (id, aria-describedby, aria-invalid).
+     */
+
+    import { computed, provide } from 'vue';
+
+    // Types
+    import type { SkFieldLabelPosition } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A form field wrapper that provides label, description, and error message support.
+     */
+    export interface SkFieldComponentProps
+    {
+        /** Label text for the field */
+        label ?: string;
+        /** Description/help text */
+        description ?: string;
+        /** Error message (overrides description when present) */
+        error ?: string;
+        /** Required field indicator */
+        required ?: boolean;
+        /** Label position */
+        labelPosition ?: SkFieldLabelPosition;
+        /** Custom field ID (auto-generated if not provided) */
+        id ?: string;
+        /** Validation state (true = valid, false = invalid, null/undefined = neutral) */
+        state ?: boolean | null;
+        /** Kind to use when state is true (valid) */
+        validKind ?: string;
+        /** Kind to use when state is false (invalid) */
+        invalidKind ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkFieldComponentProps>(), {
+        label: undefined,
+        description: undefined,
+        error: undefined,
+        required: false,
+        labelPosition: 'top',
+        id: undefined,
+        state: null,
+        validKind: 'success',
+        invalidKind: 'danger',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Generate unique ID for field
+    const fieldId = computed(() =>
+    {
+        return props.id || `sk-field-${ Math.random()
+            .toString(36)
+            .substr(2, 9) }`;
+    });
+
+    const descriptionId = computed(() => `${ fieldId.value }-description`);
+    const errorId = computed(() => `${ fieldId.value }-error`);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const ariaDescribedBy = computed(() =>
+    {
+        if(props.error)
+        {
+            return errorId.value;
+        }
+        else if(props.description)
+        {
+            return descriptionId.value;
+        }
+        return undefined;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const ariaInvalid = computed(() =>
+    {
+        return props.error ? 'true' : undefined;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Determine the kind to apply based on state prop
+    const effectiveKind = computed(() =>
+    {
+        if(props.state === true)
+        {
+            return props.validKind;
+        }
+        else if(props.state === false)
+        {
+            return props.invalidKind;
+        }
+        return undefined; // Let the input use its own kind prop
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Provide kind to child inputs so they can automatically pick it up
+    provide('field-kind', effectiveKind);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-field': true,
+        [`sk-label-${ props.labelPosition }`]: true,
+        'sk-has-error': !!props.error,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Field/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Field Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkField } from './SkField.vue';
+export type { SkFieldLabelPosition } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Field/types.ts

@@ -0,0 +1,7 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Field Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkFieldLabelPosition = 'top' | 'left';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Group/SkGroup.vue

@@ -0,0 +1,52 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Group Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A layout container that groups child elements with consistent spacing.
+     * Automatically arranges children in horizontal or vertical orientation.
+     */
+
+    import { computed } from 'vue';
+    import type { SkGroupOrientation } from './types.ts';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A layout container that groups child elements with consistent spacing.
+     * Automatically arranges children in horizontal or vertical orientation.
+     */
+    export interface SkGroupComponentProps
+    {
+        /** Orientation for arranging child elements (horizontal or vertical) */
+        orientation ?: SkGroupOrientation;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkGroupComponentProps>(), {
+        orientation: 'horizontal',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-group': true,
+            [`sk-${ props.orientation }`]: true,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->