@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Sidebar/SkSidebar.vue

@@ -0,0 +1,88 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Sidebar Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <aside :class="classes">
+        <SkPanel
+            :kind="kind"
+            :base-color="baseColor"
+            :text-color="textColor"
+            class="sk-sidebar-panel"
+        >
+            <div class="sk-panel-scroll-content">
+                <nav class="sk-sidebar-nav">
+                    <slot />
+                </nav>
+            </div>
+        </SkPanel>
+    </aside>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A sticky navigation sidebar container with semantic color theming.
+     * Wrap SkSidebarSection and SkSidebarItem components inside.
+     */
+
+    import { computed } from 'vue';
+    import type { SkSidebarKind } from './types';
+    import type { ComponentCustomColors } from '@/types';
+    import SkPanel from '../Panel/SkPanel.vue';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A sticky navigation sidebar container with semantic color theming.
+     * Wrap SkSidebarSection and SkSidebarItem components inside.
+     *
+     * @example Basic sidebar
+     * ```vue
+     * <SkSidebar>
+     *   <SkSidebarSection title="Navigation">
+     *     <SkSidebarItem to="/home">Home</SkSidebarItem>
+     *     <SkSidebarItem to="/about">About</SkSidebarItem>
+     *   </SkSidebarSection>
+     * </SkSidebar>
+     * ```
+     *
+     * @example Custom colors
+     * ```vue
+     * <SkSidebar
+     *   base-color="oklch(0.3 0.15 260)"
+     *   text-color="oklch(0.85 0.05 260)"
+     * >
+     *   <!-- Sidebar content -->
+     * </SkSidebar>
+     * ```
+     */
+    export interface SkSidebarComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for the sidebar */
+        kind ?: SkSidebarKind;
+        /** CSS width value for the sidebar */
+        width ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSidebarComponentProps>(), {
+        kind: 'neutral',
+        width: '180px',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-sidebar': true,
+            [`sk-${ props.kind }`]: true,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Sidebar/SkSidebarItem.vue

@@ -0,0 +1,58 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Sidebar Item Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <component
+        :is="as"
+        :class="classes"
+        v-bind="$attrs"
+    >
+        <slot />
+    </component>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * An individual navigation item in the sidebar.
+     * Can render as any element (a, RouterLink, button, etc).
+     */
+
+    import { computed } from 'vue';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * An individual navigation item in the sidebar.
+     * Can render as any element (a, RouterLink, button, etc).
+     */
+    export interface SkSidebarItemComponentProps
+    {
+        /** HTML tag or component name to render as */
+        as ?: string;
+        /** Whether this item is currently active */
+        active ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSidebarItemComponentProps>(), {
+        as: 'a',
+        active: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-sidebar-item': true,
+            'sk-active': props.active,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Sidebar/SkSidebarSection.vue

@@ -0,0 +1,40 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Sidebar Section Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div class="sk-sidebar-section">
+        <h3 v-if="title" class="sk-sidebar-section-title">
+            {{ title }}
+        </h3>
+        <slot />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Groups sidebar items under an optional heading.
+     * Use this to organize navigation into logical sections.
+     */
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Groups sidebar items under an optional heading.
+     * Use this to organize navigation into logical sections.
+     */
+    export interface SkSidebarSectionComponentProps
+    {
+        /** Optional section heading */
+        title ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineProps<SkSidebarSectionComponentProps>();
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Sidebar/types.ts

@@ -0,0 +1,3 @@
+import type { ComponentKind } from '@/types';
+
+export type SkSidebarKind = ComponentKind;

package/src/components/Skeleton/SkSkeleton.vue

@@ -0,0 +1,171 @@
+<template>
+    <div
+        :class="classes"
+        :style="styles"
+    />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_skeleton.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSkeleton
+     * A loading placeholder component with shimmer or pulse animation.
+     * Use to indicate loading state while content is being fetched.
+     */
+
+    import { computed } from 'vue';
+
+    // Types
+    import type { SkSkeletonAnimation, SkSkeletonCorner, SkSkeletonVariant } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSkeletonComponentProps
+    {
+        /** Shape variant */
+        variant ?: SkSkeletonVariant;
+        /** Width (CSS value) */
+        width ?: string;
+        /** Height (CSS value) */
+        height ?: string;
+        /** Animation style */
+        animation ?: SkSkeletonAnimation;
+        /** Custom corners to bevel (overrides variant default) */
+        corners ?: SkSkeletonCorner[];
+        /** Custom bevel size (CSS value, e.g. '0.5rem', '8px') */
+        bevel ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSkeletonComponentProps>(), {
+        variant: 'text',
+        width: '100%',
+        height: undefined,
+        animation: 'shimmer',
+        corners: undefined,
+        bevel: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Clip Path Generation
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Generates a clip-path polygon for beveled corners.
+     * @param corners - Array of corners to bevel
+     * @param bevel - CSS value for bevel size
+     */
+    function generateClipPath(corners : SkSkeletonCorner[], bevel : string) : string
+    {
+        const hasCorner = (corner : SkSkeletonCorner) : boolean => corners.includes(corner);
+
+        // Build polygon points clockwise from top-left
+        const points : string[] = [];
+
+        // Top-left corner
+        if(hasCorner('top-left'))
+        {
+            points.push(`${ bevel } 0`);
+        }
+        else
+        {
+            points.push('0 0');
+        }
+
+        // Top-right corner
+        if(hasCorner('top-right'))
+        {
+            points.push(`calc(100% - ${ bevel }) 0`);
+            points.push(`100% ${ bevel }`);
+        }
+        else
+        {
+            points.push('100% 0');
+        }
+
+        // Bottom-right corner
+        if(hasCorner('bottom-right'))
+        {
+            points.push(`100% calc(100% - ${ bevel })`);
+            points.push(`calc(100% - ${ bevel }) 100%`);
+        }
+        else
+        {
+            points.push('100% 100%');
+        }
+
+        // Bottom-left corner
+        if(hasCorner('bottom-left'))
+        {
+            points.push(`${ bevel } 100%`);
+            points.push(`0 calc(100% - ${ bevel })`);
+        }
+        else
+        {
+            points.push('0 100%');
+        }
+
+        // Close top-left if beveled
+        if(hasCorner('top-left'))
+        {
+            points.push(`0 ${ bevel }`);
+        }
+
+        return `polygon(${ points.join(', ') })`;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Classes
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-skeleton': true,
+        [`sk-${ props.variant }`]: true,
+        [`sk-${ props.animation }`]: props.animation !== 'none',
+        'sk-custom-corners': !!props.corners,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Styles
+    //------------------------------------------------------------------------------------------------------------------
+
+    const styles = computed(() =>
+    {
+        const result : Record<string, string> = {};
+
+        if(props.width)
+        {
+            result.width = props.width;
+        }
+
+        if(props.height)
+        {
+            result.height = props.height;
+        }
+
+        // For circular or square variant, if only width is set, make it square
+        if((props.variant === 'circular' || props.variant === 'square') && props.width && !props.height)
+        {
+            result.height = props.width;
+        }
+
+        // Generate custom clip-path if corners are specified
+        if(props.corners && props.corners.length > 0)
+        {
+            const bevelSize = props.bevel ?? '0.5rem';
+            result.clipPath = generateClipPath(props.corners, bevelSize);
+        }
+
+        return result;
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Skeleton/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Skeleton Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkSkeleton } from './SkSkeleton.vue';
+export * from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Skeleton/types.ts

@@ -0,0 +1,31 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Skeleton Types
+//----------------------------------------------------------------------------------------------------------------------
+
+/** Skeleton shape variant */
+export type SkSkeletonVariant = 'text' | 'circular' | 'rectangular' | 'square';
+
+/** Skeleton animation style */
+export type SkSkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+
+/** Corner positions for beveling */
+export type SkSkeletonCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+/** Skeleton props interface */
+export interface SkSkeletonProps
+{
+    /** Shape variant */
+    variant ?: SkSkeletonVariant;
+    /** Width (CSS value) */
+    width ?: string;
+    /** Height (CSS value) */
+    height ?: string;
+    /** Animation style */
+    animation ?: SkSkeletonAnimation;
+    /** Custom corners to bevel (overrides variant default) */
+    corners ?: SkSkeletonCorner[];
+    /** Custom bevel size (CSS value, e.g. '0.5rem', '8px') */
+    bevel ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Slider/SkSlider.vue

@@ -0,0 +1,165 @@
+<template>
+    <SliderRoot
+        :model-value="normalizedValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        :orientation="orientation"
+        :disabled="disabled"
+        :name="name"
+        :min-steps-between-thumbs="minStepsBetweenThumbs"
+        :class="classes"
+        :style="customStyles"
+        @update:model-value="handleUpdate"
+    >
+        <SliderTrack class="sk-slider-track">
+            <SliderRange class="sk-slider-range" />
+        </SliderTrack>
+        <SliderThumb
+            v-for="(_, index) in thumbCount"
+            :key="index"
+            class="sk-slider-thumb"
+        />
+    </SliderRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_slider.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSlider
+     * A range slider component for selecting numeric values.
+     * Supports single and multi-thumb (range) modes.
+     * Powered by RekaUI with all 7 semantic kinds and custom colors.
+     */
+
+    import { computed } from 'vue';
+    import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui';
+
+    // Types
+    import type { ComponentKind } from '@/types';
+    import type { SkSliderOrientation, SkSliderSize } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSliderComponentProps
+    {
+        /** Current value(s) of the slider */
+        modelValue : number | number[];
+        /** Minimum value */
+        min ?: number;
+        /** Maximum value */
+        max ?: number;
+        /** Step increment */
+        step ?: number;
+        /** Semantic color kind */
+        kind ?: ComponentKind;
+        /** Slider size */
+        size ?: SkSliderSize;
+        /** Slider orientation */
+        orientation ?: SkSliderOrientation;
+        /** Whether the slider is disabled */
+        disabled ?: boolean;
+        /** Name attribute for form submission */
+        name ?: string;
+        /** Minimum steps between thumbs for range slider */
+        minStepsBetweenThumbs ?: number;
+        /** Custom track color (overrides kind) */
+        baseColor ?: string;
+        /** Custom thumb color */
+        thumbColor ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSliderComponentProps>(), {
+        min: 0,
+        max: 100,
+        step: 1,
+        kind: 'primary',
+        size: 'md',
+        orientation: 'horizontal',
+        disabled: false,
+        name: undefined,
+        minStepsBetweenThumbs: 0,
+        baseColor: undefined,
+        thumbColor: undefined,
+    });
+
+    const emit = defineEmits<{
+        'update:modelValue' : [value : number | number[]];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Computed
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Normalize single value to array for RekaUI
+    const normalizedValue = computed(() =>
+    {
+        return Array.isArray(props.modelValue) ? props.modelValue : [ props.modelValue ];
+    });
+
+    const thumbCount = computed(() =>
+    {
+        return normalizedValue.value.length;
+    });
+
+    const classes = computed(() => ({
+        'sk-slider': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.size }`]: true,
+        [`sk-${ props.orientation }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Custom Colors
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customStyles = computed(() =>
+    {
+        const styles : Record<string, string> = {};
+
+        if(props.baseColor)
+        {
+            styles['--sk-slider-color-base'] = props.baseColor;
+        }
+
+        if(props.thumbColor)
+        {
+            styles['--sk-slider-thumb-color'] = props.thumbColor;
+        }
+
+        return styles;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Methods
+    //------------------------------------------------------------------------------------------------------------------
+
+    function handleUpdate(value : number[] | undefined) : void
+    {
+        if(!value)
+        {
+            return;
+        }
+
+        // If original modelValue was a single number, emit single number
+        if(!Array.isArray(props.modelValue))
+        {
+            emit('update:modelValue', value[0]);
+        }
+        else
+        {
+            emit('update:modelValue', value);
+        }
+    }
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Slider/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Component
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default } from './SkSlider.vue';
+export * from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Slider/types.ts

@@ -0,0 +1,44 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+/** Slider size */
+export type SkSliderSize = ComponentSize;
+
+/** Slider orientation */
+export type SkSliderOrientation = 'horizontal' | 'vertical';
+
+/** Slider props interface */
+export interface SkSliderProps
+{
+    /** Current value(s) of the slider */
+    modelValue : number | number[];
+    /** Minimum value */
+    min ?: number;
+    /** Maximum value */
+    max ?: number;
+    /** Step increment */
+    step ?: number;
+    /** Semantic color kind */
+    kind ?: ComponentKind;
+    /** Slider size */
+    size ?: SkSliderSize;
+    /** Slider orientation */
+    orientation ?: SkSliderOrientation;
+    /** Whether the slider is disabled */
+    disabled ?: boolean;
+    /** Name attribute for form submission */
+    name ?: string;
+    /** Whether multiple thumbs are allowed (range slider) */
+    minStepsBetweenThumbs ?: number;
+    /** Custom track color (overrides kind) */
+    baseColor ?: string;
+    /** Custom thumb color */
+    thumbColor ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------