@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Alert/SkAlert.vue

@@ -0,0 +1,137 @@
+<!--------------------------------------------------------------------------------------------------------------------
+  - Alert Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="classes" :style="customColorStyles" role="alert">
+        <div class="sk-alert-icon">
+            <slot name="icon">
+                <!-- Default icons for each kind -->
+                <svg
+                    v-if="kind === 'info'"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="16" x2="12" y2="12" />
+                    <circle cx="12" cy="8" r="0.5" fill="currentColor" />
+                </svg>
+                <svg
+                    v-else-if="kind === 'success'"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                    <polyline points="22 4 12 14.01 9 11.01" />
+                </svg>
+                <svg
+                    v-else-if="kind === 'warning'"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path
+                        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                    />
+                    <line x1="12" y1="9" x2="12" y2="13" />
+                    <circle cx="12" cy="17" r="0.5" fill="currentColor" />
+                </svg>
+                <svg
+                    v-else-if="kind === 'danger'"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="15" y1="9" x2="9" y2="15" />
+                    <line x1="9" y1="9" x2="15" y2="15" />
+                </svg>
+            </slot>
+        </div>
+        <div class="sk-alert-content">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A flexible alert component for displaying informational messages.
+     * Supports multiple semantic kinds (info, success, warning, danger) with optional prominent styling.
+     */
+
+    import { computed, toRef } from 'vue';
+    import type { SkAlertKind } from './types';
+    import type { ComponentCustomColors } from '@/types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A flexible alert component for displaying informational messages.
+     * Supports multiple semantic kinds (info, success, warning, danger) with optional prominent styling.
+     *
+     * @example Basic alert
+     * ```vue
+     * <SkAlert kind="success">
+     *   Your changes have been saved!
+     * </SkAlert>
+     * ```
+     *
+     * @example Custom colors
+     * ```vue
+     * <SkAlert
+     *   base-color="oklch(0.65 0.25 280)"
+     *   text-color="white"
+     *   prominent
+     * >
+     *   Custom purple alert with custom colors
+     * </SkAlert>
+     * ```
+     */
+    export interface SkAlertComponentProps extends ComponentCustomColors
+    {
+        /** Semantic kind determining the alert color and icon (info, success, warning, danger) */
+        kind ?: SkAlertKind;
+        /** Whether to use prominent styling with darker background and bolder appearance */
+        prominent ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkAlertComponentProps>(), {
+        kind: 'info',
+        prominent: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-alert': true,
+            [`sk-${ props.kind }`]: true,
+            'sk-prominent': props.prominent,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'alert',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Alert/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Alert Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Alert semantic kinds (feedback-focused subset)
+ */
+export type SkAlertKind = 'info' | 'success' | 'warning' | 'danger';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Avatar/SkAvatar.vue

@@ -0,0 +1,141 @@
+<template>
+    <div
+        :class="classes"
+        :style="customStyles"
+    >
+        <img
+            v-if="src && !imageError"
+            :src="src"
+            :alt="alt"
+            class="sk-avatar-image"
+            @error="handleImageError"
+        >
+        <span
+            v-else-if="initials"
+            class="sk-avatar-initials"
+        >
+            {{ displayInitials }}
+        </span>
+        <slot v-else name="icon">
+            <svg
+                class="sk-avatar-icon"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+            >
+                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+            </svg>
+        </slot>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_avatar.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAvatar
+     * A user profile avatar component with image, initials, or icon fallback.
+     * Square shape with beveled top-left and bottom-right corners.
+     * Supports all 7 semantic kinds and custom colors.
+     */
+
+    import { computed, ref } from 'vue';
+
+    // Types
+    import type { ComponentKind } from '@/types';
+    import type { SkAvatarSize } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkAvatarComponentProps
+    {
+        /** Image source URL */
+        src ?: string;
+        /** Alt text for image */
+        alt ?: string;
+        /** Fallback initials (1-2 characters) */
+        initials ?: string;
+        /** Semantic color kind */
+        kind ?: ComponentKind;
+        /** Avatar size */
+        size ?: SkAvatarSize;
+        /** Custom background color (overrides kind) */
+        baseColor ?: string;
+        /** Custom text color */
+        textColor ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkAvatarComponentProps>(), {
+        src: undefined,
+        alt: '',
+        initials: undefined,
+        kind: 'neutral',
+        size: 'md',
+        baseColor: undefined,
+        textColor: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // State
+    //------------------------------------------------------------------------------------------------------------------
+
+    const imageError = ref(false);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Computed
+    //------------------------------------------------------------------------------------------------------------------
+
+    const displayInitials = computed(() =>
+    {
+        if(!props.initials)
+        {
+            return '';
+        }
+        return props.initials.slice(0, 2).toUpperCase();
+    });
+
+    const classes = computed(() => ({
+        'sk-avatar': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Custom Colors
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customStyles = computed(() =>
+    {
+        const styles : Record<string, string> = {};
+
+        if(props.baseColor)
+        {
+            styles['--sk-avatar-color-base'] = props.baseColor;
+        }
+
+        if(props.textColor)
+        {
+            styles['--sk-avatar-fg'] = props.textColor;
+        }
+
+        return styles;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Methods
+    //------------------------------------------------------------------------------------------------------------------
+
+    function handleImageError() : void
+    {
+        imageError.value = true;
+    }
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Avatar/index.ts

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

package/src/components/Avatar/types.ts

@@ -0,0 +1,31 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Avatar Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+/** Avatar size */
+export type SkAvatarSize = ComponentSize;
+
+/** Avatar props interface */
+export interface SkAvatarProps
+{
+    /** Image source URL */
+    src ?: string;
+    /** Alt text for image */
+    alt ?: string;
+    /** Fallback initials (1-2 characters) */
+    initials ?: string;
+    /** Semantic color kind */
+    kind ?: ComponentKind;
+    /** Avatar size */
+    size ?: SkAvatarSize;
+    /** Custom background color (overrides kind) */
+    baseColor ?: string;
+    /** Custom text color */
+    textColor ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Breadcrumbs/SkBreadcrumbItem.vue

@@ -0,0 +1,76 @@
+<template>
+    <li class="sk-breadcrumb-item">
+        <component
+            :is="componentTag"
+            :class="linkClasses"
+            :to="to"
+            :href="href"
+            :aria-current="current ? 'page' : undefined"
+            :disabled="disabled"
+        >
+            <slot name="icon" />
+            <slot />
+        </component>
+    </li>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Styles implemented in /src/styles/components/_breadcrumbs.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, inject } from 'vue';
+    import { RouterLink } from 'vue-router';
+
+    // Types
+    import type { SkBreadcrumbItemProps, SkBreadcrumbsKind } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export type SkBreadcrumbItemComponentProps = SkBreadcrumbItemProps;
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkBreadcrumbItemComponentProps>(), {
+        to: undefined,
+        href: undefined,
+        current: false,
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const kind = inject<SkBreadcrumbsKind>('breadcrumbs-kind', 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const componentTag = computed<string | typeof RouterLink>(() =>
+    {
+        if(props.current || props.disabled)
+        {
+            return 'span';
+        }
+        if(props.to !== undefined)
+        {
+            return RouterLink;
+        }
+        if(props.href !== undefined)
+        {
+            return 'a';
+        }
+        return 'button';
+    });
+
+    const linkClasses = computed(() => ({
+        'sk-breadcrumb-link': true,
+        [`sk-${ kind }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Breadcrumbs/SkBreadcrumbSeparator.vue

@@ -0,0 +1,38 @@
+<template>
+    <span class="sk-breadcrumb-separator" aria-hidden="true">
+        {{ displaySeparator }}
+    </span>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Styles implemented in /src/styles/components/_breadcrumbs.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, inject } from 'vue';
+
+    // Types
+    import type { SkBreadcrumbSeparatorProps } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkBreadcrumbSeparatorProps>(), {
+        separator: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const parentSeparator = inject<string>('breadcrumbs-separator', '/');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const displaySeparator = computed<string>(() => props.separator ?? parentSeparator);
+
+    //------------------------------------------------------------------------------------------------------------------
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Breadcrumbs/SkBreadcrumbs.vue

@@ -0,0 +1,93 @@
+<template>
+    <nav :class="classes" :style="customColorStyles" aria-label="Breadcrumb">
+        <ol class="sk-breadcrumbs-list">
+            <template v-for="(item, index) in processedItems" :key="index">
+                <component :is="item" />
+                <SkBreadcrumbSeparator v-if="index < processedItems.length - 1" />
+            </template>
+        </ol>
+    </nav>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Styles implemented in /src/styles/components/_breadcrumbs.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { type Slots, type VNode, computed, provide, toRef, useSlots } from 'vue';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkBreadcrumbsProps } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkBreadcrumbsComponentProps extends SkBreadcrumbsProps, ComponentCustomColors
+    {
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Components
+    import SkBreadcrumbSeparator from './SkBreadcrumbSeparator.vue';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkBreadcrumbsComponentProps>(), {
+        kind: 'neutral',
+        separator: '/',
+        baseColor: undefined,
+        textColor: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    provide('breadcrumbs-kind', toRef(() => props.kind));
+    provide('breadcrumbs-separator', toRef(() => props.separator));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'breadcrumbs',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-breadcrumbs': true,
+        [`sk-${ props.kind }`]: true,
+    }));
+
+    const processedItems = computed<VNode[]>(() =>
+    {
+        if(!slots.default)
+        {
+            return [];
+        }
+
+        const defaultSlot = slots.default();
+        if(!defaultSlot || defaultSlot.length === 0)
+        {
+            return [];
+        }
+
+        return defaultSlot;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Breadcrumbs Components
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkBreadcrumbItem } from './SkBreadcrumbItem.vue';
+export { default as SkBreadcrumbs } from './SkBreadcrumbs.vue';
+export { default as SkBreadcrumbSeparator } from './SkBreadcrumbSeparator.vue';
+export * from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Breadcrumbs/types.ts

@@ -0,0 +1,36 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Types for SkBreadcrumbs
+//----------------------------------------------------------------------------------------------------------------------
+
+// Types
+import type { ComponentKind } from '@/types';
+import type { RouteLocationRaw } from 'vue-router';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkBreadcrumbsKind = ComponentKind;
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface SkBreadcrumbsProps
+{
+    kind ?: SkBreadcrumbsKind;
+    separator ?: string;
+    baseColor ?: string;
+    textColor ?: string;
+}
+
+export interface SkBreadcrumbItemProps
+{
+    to ?: string | RouteLocationRaw;
+    href ?: string;
+    current ?: boolean;
+    disabled ?: boolean;
+}
+
+export interface SkBreadcrumbSeparatorProps
+{
+    separator ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------