@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Spinner/SkSpinner.vue

@@ -0,0 +1,105 @@
+<template>
+    <div
+        :class="classes"
+        :style="customStyles"
+        role="status"
+        aria-live="polite"
+        aria-label="Loading"
+    >
+        <!-- Circular variant -->
+        <div
+            v-if="variant === 'circular'"
+            class="sk-spinner-circular"
+        >
+            <div class="sk-arc sk-arc-large" />
+            <div class="sk-arc sk-arc-small" />
+        </div>
+
+        <!-- Dots variant -->
+        <div
+            v-else-if="variant === 'dots'"
+            class="sk-spinner-dots"
+        >
+            <div class="sk-dot" />
+            <div class="sk-dot" />
+            <div class="sk-dot" />
+        </div>
+
+        <!-- Crosshair variant -->
+        <div v-else-if="variant === 'crosshair'" class="sk-crosshair-loader" />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_spinner.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSpinner
+     * An animated loading spinner component with multiple variants.
+     * Supports all 7 semantic kinds and custom colors.
+     */
+
+    import { computed } from 'vue';
+
+    // Types
+    import type { ComponentKind } from '@/types';
+    import type { SkSpinnerSize, SkSpinnerVariant } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSpinnerComponentProps
+    {
+        /** Semantic color kind */
+        kind ?: ComponentKind;
+        /** Spinner size */
+        size ?: SkSpinnerSize;
+        /** Animation variant */
+        variant ?: SkSpinnerVariant;
+        /** Custom spinner color (overrides kind) */
+        color ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSpinnerComponentProps>(), {
+        kind: 'primary',
+        size: 'md',
+        variant: 'circular',
+        color: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Classes
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-spinner': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.size }`]: true,
+        [`sk-variant-${ props.variant }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Custom Colors
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customStyles = computed(() =>
+    {
+        if(!props.color)
+        {
+            return {};
+        }
+
+        return {
+            '--sk-spinner-color': props.color,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Spinner/index.ts

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

package/src/components/Spinner/types.ts

@@ -0,0 +1,28 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Spinner Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+/** Spinner animation variant */
+export type SkSpinnerVariant = 'circular' | 'dots' | 'crosshair';
+
+/** Spinner size */
+export type SkSpinnerSize = ComponentSize;
+
+/** Spinner props interface */
+export interface SkSpinnerProps
+{
+    /** Semantic color kind */
+    kind ?: ComponentKind;
+    /** Spinner size */
+    size ?: SkSpinnerSize;
+    /** Animation variant */
+    variant ?: SkSpinnerVariant;
+    /** Custom spinner color (overrides kind) */
+    color ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Switch/SkSwitch.vue

@@ -0,0 +1,215 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Switch Component (powered by RekaUI)
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div class="sk-switch-wrapper">
+        <SwitchRoot
+            :model-value="modelValue"
+            :disabled="disabled"
+            :name="name"
+            :value="value"
+            :required="required"
+            :class="classes"
+            :style="customColorStyles"
+            @update:model-value="$emit('update:modelValue', $event)"
+        >
+            <SwitchThumb :class="thumbClasses" />
+        </SwitchRoot>
+        <label v-if="showLabel" class="sk-switch-label">
+            <!-- Default slot overrides everything -->
+            <slot v-if="slots.default" />
+            <!-- If using on/off labels with animation -->
+            <Transition v-else-if="useOnOffLabels && !disableLabelAnimation" name="sk-switch-label-fade" mode="out-in">
+                <span v-if="modelValue" :key="'on'">
+                    <slot v-if="slots['label-on']" name="label-on" />
+                    <template v-else>
+                        {{ labelOn }}
+                    </template>
+                </span>
+                <span v-else :key="'off'">
+                    <slot v-if="slots['label-off']" name="label-off" />
+                    <template v-else>
+                        {{ labelOff }}
+                    </template>
+                </span>
+            </Transition>
+            <!-- If using on/off labels without animation -->
+            <template v-else-if="useOnOffLabels && disableLabelAnimation">
+                <span v-if="modelValue">
+                    <slot v-if="slots['label-on']" name="label-on" />
+                    <template v-else>
+                        {{ labelOn }}
+                    </template>
+                </span>
+                <span v-else>
+                    <slot v-if="slots['label-off']" name="label-off" />
+                    <template v-else>
+                        {{ labelOff }}
+                    </template>
+                </span>
+            </template>
+            <!-- Otherwise just show static label -->
+            <template v-else>
+                {{ label }}
+            </template>
+        </label>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A toggle switch component for binary choices powered by RekaUI.
+     * Supports dynamic labels that change based on state and flexible styling options.
+     */
+
+    import { computed, toRef, useSlots } from 'vue';
+    import { SwitchRoot, SwitchThumb } from 'reka-ui';
+    import type { SkSwitchKind, SkSwitchSize } from './types';
+    import type { ComponentCustomColors } from '@/types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A toggle switch component for binary choices powered by RekaUI.
+     * Supports dynamic labels that change based on state and flexible styling options.
+     *
+     * @example Basic switch
+     * ```vue
+     * <SkSwitch v-model="enabled" label="Enable notifications" />
+     * ```
+     *
+     * @example Custom colors
+     * ```vue
+     * <SkSwitch
+     *   v-model="premium"
+     *   base-color="oklch(0.7 0.25 45)"
+     *   text-color="white"
+     *   label="Premium Features"
+     * />
+     * ```
+     */
+    export interface SkSwitchComponentProps extends ComponentCustomColors
+    {
+        /** Current state of the switch (true for on, false for off) */
+        modelValue : boolean;
+        /** Static label text (used as fallback for labelOn/labelOff if not provided) */
+        label ?: string;
+        /** Label text displayed when switch is on (with animation if enabled) */
+        labelOn ?: string;
+        /** Label text displayed when switch is off (with animation if enabled) */
+        labelOff ?: string;
+        /** Semantic color kind for the switch background */
+        kind ?: SkSwitchKind;
+        /** Semantic color kind for the switch thumb (overrides main kind) */
+        thumbKind ?: SkSwitchKind;
+        /** Size of the switch control */
+        size ?: SkSwitchSize;
+        /** Whether the switch is disabled */
+        disabled ?: boolean;
+        /** Whether to disable the fade animation when labels change */
+        disableLabelAnimation ?: boolean;
+        /** Name attribute for form submission */
+        name ?: string;
+        /** Value attribute for form submission */
+        value ?: string;
+        /** Whether the switch is required in a form */
+        required ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSwitchComponentProps>(), {
+        label: undefined,
+        labelOn: undefined,
+        labelOff: undefined,
+        kind: 'neutral',
+        thumbKind: undefined,
+        size: 'md',
+        disabled: false,
+        disableLabelAnimation: false,
+        name: undefined,
+        value: 'on',
+        required: false,
+    });
+
+    defineEmits<{
+        'update:modelValue' : [value : boolean];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const slots = useSlots();
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-switch': true,
+            [`sk-${ props.kind }`]: true,
+            [`sk-${ props.size }`]: true,
+        };
+    });
+
+    const thumbClasses = computed(() =>
+    {
+        return {
+            'sk-switch-thumb': true,
+            [`sk-thumb-${ props.thumbKind }`]: props.thumbKind !== undefined,
+        };
+    });
+
+    const showLabel = computed(() =>
+    {
+        // Show label if:
+        // - Default slot is provided, OR
+        // - labelOn/labelOff props are provided, OR
+        // - label-on/label-off slots are provided, OR
+        // - fallback label prop is provided
+        return Boolean(
+            slots.default
+                || props.labelOn
+                || props.labelOff
+                || slots['label-on']
+                || slots['label-off']
+                || props.label
+        );
+    });
+
+    const useOnOffLabels = computed(() =>
+    {
+        // Use on/off label logic (with animation) only if:
+        // - labelOn or labelOff props are provided, OR
+        // - label-on or label-off slots are provided
+        return Boolean(
+            props.labelOn
+                || props.labelOff
+                || slots['label-on']
+                || slots['label-off']
+        );
+    });
+
+    const labelOn = computed(() =>
+    {
+        return props.labelOn ?? props.label;
+    });
+
+    const labelOff = computed(() =>
+    {
+        return props.labelOff ?? props.label;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'switch',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Switch/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkSwitch } from './SkSwitch.vue';
+export type { SkSwitchKind, SkSwitchSize } from './types.ts';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Switch/types.ts

@@ -0,0 +1,12 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkSwitchKind = ComponentKind;
+export type SkSwitchSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Table/SkTable.vue

@@ -0,0 +1,109 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Table Component
+  - Style-only table component with clean, rounded styling
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="wrapperClasses">
+        <table :class="tableClasses" :style="customColorStyles">
+            <slot />
+        </table>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_table.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A flexible table component with clean, rounded styling.
+     * Supports various visual styles including striping, hover effects, and custom borders.
+     */
+
+    import { computed, toRef } from 'vue';
+    import type { SkTableKind, SkTableVariant } from './types';
+    import type { ComponentCustomColors } from '@/types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A flexible table component with clean, rounded styling.
+     * Supports various visual styles including striping, hover effects, and custom borders.
+     */
+    export interface SkTableComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for the table */
+        kind ?: SkTableKind;
+        /** Visual variant style (default or compact) */
+        variant ?: SkTableVariant;
+        /** Whether to alternate row background colors */
+        striped ?: boolean;
+        /** Whether rows highlight on hover */
+        hoverable ?: boolean;
+        /** Whether to show outer borders around the table */
+        bordered ?: boolean;
+        /** Whether to show borders between cells and rows */
+        innerBorders ?: boolean;
+        /** Whether the table has a dark background context */
+        darkBackground ?: boolean;
+        /** Whether to use subtle, lighter styling */
+        subtle ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTableComponentProps>(), {
+        kind: 'neutral',
+        variant: 'default',
+        striped: false,
+        hoverable: true,
+        bordered: true,
+        innerBorders: false,
+        darkBackground: false,
+        subtle: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() =>
+    {
+        return {
+            'sk-table-wrapper': true,
+            [`sk-table-wrapper-${ props.kind }`]: true,
+            'sk-dark-background': props.darkBackground,
+            'sk-subtle': props.subtle,
+        };
+    });
+
+    const tableClasses = computed(() =>
+    {
+        return {
+            'sk-table': true,
+            [`sk-${ props.kind }`]: true,
+            [`sk-${ props.variant }`]: true,
+            'sk-striped': props.striped,
+            'sk-hoverable': props.hoverable,
+            'sk-bordered': props.bordered,
+            'sk-no-inner-borders': !props.innerBorders,
+            'sk-subtle': props.subtle,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'table',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { default as SkTable } from './SkTable.vue';
+export type { SkTableKind, SkTableVariant } from './types';

package/src/components/Table/types.ts

@@ -0,0 +1,15 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Table Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Table semantic kinds
+export type SkTableKind = ComponentKind;
+
+// Table visual variants
+export type SkTableVariant = 'default' | 'compact' | 'comfortable';
+
+//----------------------------------------------------------------------------------------------------------------------