@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Tooltip/SkTooltipProvider.vue

@@ -0,0 +1,114 @@
+<template>
+    <TooltipProvider
+        :delay-duration="delayDuration"
+        :skip-delay-duration="skipDelayDuration"
+        :disable-hoverable-content="disableHoverableContent"
+        :disable-closing-trigger="disableClosingTrigger"
+        :ignore-non-keyboard-focus="ignoreNonKeyboardFocus"
+        :disabled="disabled"
+    >
+        <slot />
+    </TooltipProvider>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Provider component for tooltips that enables shared behavior across all child SkTooltip instances.
+     *
+     * When SkTooltip components are wrapped in SkTooltipProvider, they share a common context that enables:
+     * - **Skip delay**: Moving quickly between tooltips shows the next one immediately
+     * - **Shared configuration**: Set delay duration once for all tooltips
+     * - **Consistent behavior**: All tooltips behave as a coordinated group
+     *
+     * Without a provider, each SkTooltip creates its own isolated context and works independently.
+     * Both patterns are valid - use the provider when you want coordinated tooltip behavior.
+     */
+
+    import { provide } from 'vue';
+    import { TooltipProvider } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Provider component for tooltips that enables shared behavior.
+     *
+     * @example Basic usage - wrap your app or a section
+     * ```vue
+     * <SkTooltipProvider :delay-duration="300" :skip-delay-duration="100">
+     *   <MyApp />
+     * </SkTooltipProvider>
+     * ```
+     *
+     * @example In App.vue for app-wide tooltip coordination
+     * ```vue
+     * <template>
+     *   <SkTheme theme="colorful">
+     *     <SkTooltipProvider>
+     *       <RouterView />
+     *     </SkTooltipProvider>
+     *   </SkTheme>
+     * </template>
+     * ```
+     */
+    export interface SkTooltipProviderProps
+    {
+        /**
+         * The duration (ms) from when the pointer enters the trigger until the tooltip opens.
+         * @default 400
+         */
+        delayDuration ?: number;
+
+        /**
+         * How much time (ms) a user has to enter another trigger without incurring a delay again.
+         * This creates the "skip delay" behavior where moving between tooltips feels instant.
+         * @default 300
+         */
+        skipDelayDuration ?: number;
+
+        /**
+         * When true, hovering over the tooltip content will close it (pointer must stay on trigger).
+         * @default false
+         */
+        disableHoverableContent ?: boolean;
+
+        /**
+         * When true, clicking on the trigger will not close the tooltip.
+         * @default false
+         */
+        disableClosingTrigger ?: boolean;
+
+        /**
+         * When true, tooltips only open on keyboard focus (not mouse focus).
+         * Matches against :focus-visible selector.
+         * @default false
+         */
+        ignoreNonKeyboardFocus ?: boolean;
+
+        /**
+         * When true, disables all tooltips within this provider.
+         * @default false
+         */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkTooltipProviderProps>(), {
+        delayDuration: 400,
+        skipDelayDuration: 300,
+        disableHoverableContent: false,
+        disableClosingTrigger: false,
+        ignoreNonKeyboardFocus: false,
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Signal to child SkTooltip components that they're inside a provider
+    provide('sk-tooltip-provider', true);
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Tooltip/index.ts

@@ -0,0 +1,9 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Tooltip Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkTooltip } from './SkTooltip.vue';
+export { default as SkTooltipProvider } from './SkTooltipProvider.vue';
+export type { SkTooltipKind, SkTooltipSide } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Tooltip/types.ts

@@ -0,0 +1,13 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Tooltip Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentVariant } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkTooltipKind = ComponentKind;
+export type SkTooltipVariant = ComponentVariant;
+export type SkTooltipSide = 'top' | 'right' | 'bottom' | 'left';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/composables/useCustomColors.test.ts

@@ -0,0 +1,505 @@
+import { describe, expect, it } from 'vitest';
+import { nextTick, ref } from 'vue';
+import { useCustomColors } from './useCustomColors';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('useCustomColors', () =>
+{
+    describe('with no colors provided', () =>
+    {
+        it('should return empty styles object when baseColor is undefined', () =>
+        {
+            const result = useCustomColors('button', undefined, undefined);
+
+            expect(result.value).toEqual({});
+        });
+
+        it('should return empty styles object when baseColor ref is undefined', () =>
+        {
+            const baseColor = ref<string | undefined>(undefined);
+            const result = useCustomColors('button', baseColor, undefined);
+
+            expect(result.value).toEqual({});
+        });
+    });
+
+    describe('with baseColor only', () =>
+    {
+        it('should generate base color variable with OKLCH value', () =>
+        {
+            const result = useCustomColors('button', 'oklch(0.7 0.25 300)', undefined);
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'var(--sk-neutral-text)',
+            });
+        });
+
+        it('should generate base color variable with hex value', () =>
+        {
+            const result = useCustomColors('panel', '#FF6B6B', undefined);
+
+            expect(result.value).toEqual({
+                '--sk-panel-color-base': '#FF6B6B',
+                '--sk-panel-fg': 'var(--sk-neutral-text)',
+            });
+        });
+
+        it('should generate base color variable with CSS variable', () =>
+        {
+            const result = useCustomColors('alert', 'var(--my-custom-color)', undefined);
+
+            expect(result.value).toEqual({
+                '--sk-alert-color-base': 'var(--my-custom-color)',
+                '--sk-alert-fg': 'var(--sk-neutral-text)',
+            });
+        });
+
+        it('should fallback to --sk-neutral-text when textColor not provided', () =>
+        {
+            const result = useCustomColors('tag', 'oklch(0.65 0.2 150)', undefined);
+
+            expect(result.value['--sk-tag-fg']).toBe('var(--sk-neutral-text)');
+        });
+    });
+
+    describe('with both baseColor and textColor', () =>
+    {
+        it('should generate both color variables', () =>
+        {
+            const result = useCustomColors(
+                'button',
+                'oklch(0.7 0.25 300)',
+                'white'
+            );
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+        });
+
+        it('should use provided textColor instead of fallback', () =>
+        {
+            const result = useCustomColors(
+                'panel',
+                'oklch(0.3 0.15 260)',
+                'oklch(0.85 0.05 260)'
+            );
+
+            expect(result.value).toEqual({
+                '--sk-panel-color-base': 'oklch(0.3 0.15 260)',
+                '--sk-panel-fg': 'oklch(0.85 0.05 260)',
+            });
+        });
+
+        it('should work with hex colors for both values', () =>
+        {
+            const result = useCustomColors('alert', '#10B981', '#FFFFFF');
+
+            expect(result.value).toEqual({
+                '--sk-alert-color-base': '#10B981',
+                '--sk-alert-fg': '#FFFFFF',
+            });
+        });
+    });
+
+    describe('with reactive refs', () =>
+    {
+        it('should react to baseColor changes', async () =>
+        {
+            const baseColor = ref('oklch(0.7 0.25 300)');
+            const result = useCustomColors('button', baseColor, undefined);
+
+            expect(result.value['--sk-button-color-base']).toBe('oklch(0.7 0.25 300)');
+
+            baseColor.value = 'oklch(0.6 0.2 150)';
+            await nextTick();
+
+            expect(result.value['--sk-button-color-base']).toBe('oklch(0.6 0.2 150)');
+        });
+
+        it('should react to textColor changes', async () =>
+        {
+            const baseColor = ref('oklch(0.7 0.25 300)');
+            const textColor = ref('white');
+            const result = useCustomColors('button', baseColor, textColor);
+
+            expect(result.value['--sk-button-fg']).toBe('white');
+
+            textColor.value = 'black';
+            await nextTick();
+
+            expect(result.value['--sk-button-fg']).toBe('black');
+        });
+
+        it('should return empty object when baseColor ref changes to undefined', async () =>
+        {
+            const baseColor = ref<string | undefined>('oklch(0.7 0.25 300)');
+            const result = useCustomColors('button', baseColor, undefined);
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'var(--sk-neutral-text)',
+            });
+
+            baseColor.value = undefined;
+            await nextTick();
+
+            expect(result.value).toEqual({});
+        });
+
+        it('should fallback to neutral when textColor ref changes to undefined', async () =>
+        {
+            const baseColor = ref('oklch(0.7 0.25 300)');
+            const textColor = ref<string | undefined>('white');
+            const result = useCustomColors('button', baseColor, textColor);
+
+            expect(result.value['--sk-button-fg']).toBe('white');
+
+            textColor.value = undefined;
+            await nextTick();
+
+            expect(result.value['--sk-button-fg']).toBe('var(--sk-neutral-text)');
+        });
+    });
+
+    describe('component name flexibility', () =>
+    {
+        it('should work with any component name', () =>
+        {
+            const result = useCustomColors('my-custom-widget', 'oklch(0.7 0.25 45)', 'white');
+
+            expect(result.value).toEqual({
+                '--sk-my-custom-widget-color-base': 'oklch(0.7 0.25 45)',
+                '--sk-my-custom-widget-fg': 'white',
+            });
+        });
+
+        it('should work with kebab-case names', () =>
+        {
+            const result = useCustomColors('custom-component', '#FF0000', '#FFFFFF');
+
+            expect(result.value).toEqual({
+                '--sk-custom-component-color-base': '#FF0000',
+                '--sk-custom-component-fg': '#FFFFFF',
+            });
+        });
+
+        it('should work with all built-in component names', () =>
+        {
+            const components = [
+                'button',
+                'panel',
+                'navbar',
+                'table',
+                'alert',
+                'tag',
+                'card',
+                'switch',
+                'tabs',
+                'sidebar',
+            ];
+
+            components.forEach((component) =>
+            {
+                const result = useCustomColors(component, 'oklch(0.7 0.25 300)', 'white');
+
+                expect(result.value).toEqual({
+                    [`--sk-${ component }-color-base`]: 'oklch(0.7 0.25 300)',
+                    [`--sk-${ component }-fg`]: 'white',
+                });
+            });
+        });
+    });
+
+    describe('CSS color format support', () =>
+    {
+        it('should support hex colors', () =>
+        {
+            const result = useCustomColors('button', '#FF6B6B', '#FFFFFF');
+
+            expect(result.value['--sk-button-color-base']).toBe('#FF6B6B');
+            expect(result.value['--sk-button-fg']).toBe('#FFFFFF');
+        });
+
+        it('should support RGB colors', () =>
+        {
+            const result = useCustomColors('button', 'rgb(255, 107, 107)', 'rgb(255, 255, 255)');
+
+            expect(result.value['--sk-button-color-base']).toBe('rgb(255, 107, 107)');
+            expect(result.value['--sk-button-fg']).toBe('rgb(255, 255, 255)');
+        });
+
+        it('should support HSL colors', () =>
+        {
+            const result = useCustomColors('button', 'hsl(0, 100%, 71%)', 'hsl(0, 0%, 100%)');
+
+            expect(result.value['--sk-button-color-base']).toBe('hsl(0, 100%, 71%)');
+            expect(result.value['--sk-button-fg']).toBe('hsl(0, 0%, 100%)');
+        });
+
+        it('should support OKLCH colors', () =>
+        {
+            const result = useCustomColors('button', 'oklch(0.7 0.25 300)', 'oklch(0.95 0.05 300)');
+
+            expect(result.value['--sk-button-color-base']).toBe('oklch(0.7 0.25 300)');
+            expect(result.value['--sk-button-fg']).toBe('oklch(0.95 0.05 300)');
+        });
+
+        it('should support named colors', () =>
+        {
+            const result = useCustomColors('button', 'tomato', 'white');
+
+            expect(result.value['--sk-button-color-base']).toBe('tomato');
+            expect(result.value['--sk-button-fg']).toBe('white');
+        });
+
+        it('should support CSS variables', () =>
+        {
+            const result = useCustomColors(
+                'button',
+                'var(--my-brand-color)',
+                'var(--my-text-color)'
+            );
+
+            expect(result.value['--sk-button-color-base']).toBe('var(--my-brand-color)');
+            expect(result.value['--sk-button-fg']).toBe('var(--my-text-color)');
+        });
+
+        it('should support color-mix functions', () =>
+        {
+            const result = useCustomColors(
+                'button',
+                'color-mix(in oklch, red, blue)',
+                'white'
+            );
+
+            expect(result.value['--sk-button-color-base']).toBe('color-mix(in oklch, red, blue)');
+        });
+    });
+
+    describe('mixed ref and string parameters', () =>
+    {
+        it('should work with string baseColor and ref textColor', async () =>
+        {
+            const textColor = ref('white');
+            const result = useCustomColors('button', 'oklch(0.7 0.25 300)', textColor);
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+
+            textColor.value = 'black';
+            await nextTick();
+
+            expect(result.value['--sk-button-fg']).toBe('black');
+        });
+
+        it('should work with ref baseColor and string textColor', async () =>
+        {
+            const baseColor = ref('oklch(0.7 0.25 300)');
+            const result = useCustomColors('button', baseColor, 'white');
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+
+            baseColor.value = 'oklch(0.6 0.2 150)';
+            await nextTick();
+
+            expect(result.value['--sk-button-color-base']).toBe('oklch(0.6 0.2 150)');
+        });
+
+        it('should work with both refs', async () =>
+        {
+            const baseColor = ref('oklch(0.7 0.25 300)');
+            const textColor = ref('white');
+            const result = useCustomColors('button', baseColor, textColor);
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+
+            baseColor.value = 'oklch(0.6 0.2 150)';
+            textColor.value = 'black';
+            await nextTick();
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.6 0.2 150)',
+                '--sk-button-fg': 'black',
+            });
+        });
+
+        it('should work with both strings', () =>
+        {
+            const result = useCustomColors('button', 'oklch(0.7 0.25 300)', 'white');
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+        });
+    });
+
+    describe('edge cases', () =>
+    {
+        it('should handle empty string baseColor as falsy', () =>
+        {
+            const result = useCustomColors('button', '', undefined);
+
+            expect(result.value).toEqual({});
+        });
+
+        it('should handle empty string textColor', () =>
+        {
+            const result = useCustomColors('button', 'oklch(0.7 0.25 300)', '');
+
+            // Empty string is falsy for textColor, should use fallback
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'var(--sk-neutral-text)',
+            });
+        });
+
+        it('should work with component names containing numbers', () =>
+        {
+            const result = useCustomColors('widget-v2', 'oklch(0.7 0.25 300)', 'white');
+
+            expect(result.value).toEqual({
+                '--sk-widget-v2-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-widget-v2-fg': 'white',
+            });
+        });
+
+        it('should preserve exact color values without modification', () =>
+        {
+            const complexColor = 'oklch(from var(--base) calc(l * 0.9) c h)';
+            const result = useCustomColors('button', complexColor, 'white');
+
+            expect(result.value['--sk-button-color-base']).toBe(complexColor);
+        });
+    });
+
+    describe('reactivity', () =>
+    {
+        it('should recompute when reactive baseColor changes', async () =>
+        {
+            const baseColor = ref('oklch(0.7 0.25 300)');
+            const result = useCustomColors('button', baseColor, 'white');
+
+            const initialValue = result.value;
+            expect(initialValue['--sk-button-color-base']).toBe('oklch(0.7 0.25 300)');
+
+            baseColor.value = 'oklch(0.8 0.3 150)';
+            await nextTick();
+
+            const updatedValue = result.value;
+            expect(updatedValue['--sk-button-color-base']).toBe('oklch(0.8 0.3 150)');
+
+            // Should generate new object (computed reactivity)
+            expect(updatedValue).not.toBe(initialValue);
+        });
+
+        it('should recompute when reactive textColor changes', async () =>
+        {
+            const textColor = ref('white');
+            const result = useCustomColors('button', 'oklch(0.7 0.25 300)', textColor);
+
+            expect(result.value['--sk-button-fg']).toBe('white');
+
+            textColor.value = 'oklch(0.2 0.05 300)';
+            await nextTick();
+
+            expect(result.value['--sk-button-fg']).toBe('oklch(0.2 0.05 300)');
+        });
+
+        it('should recompute when both reactive colors change', async () =>
+        {
+            const baseColor = ref('oklch(0.7 0.25 300)');
+            const textColor = ref('white');
+            const result = useCustomColors('button', baseColor, textColor);
+
+            baseColor.value = 'oklch(0.8 0.3 150)';
+            textColor.value = 'black';
+            await nextTick();
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.8 0.3 150)',
+                '--sk-button-fg': 'black',
+            });
+        });
+    });
+
+    describe('multiple component instances', () =>
+    {
+        it('should generate unique variables for different components', () =>
+        {
+            const button = useCustomColors('button', 'oklch(0.7 0.25 300)', 'white');
+            const panel = useCustomColors('panel', 'oklch(0.6 0.2 150)', 'black');
+
+            expect(button.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+
+            expect(panel.value).toEqual({
+                '--sk-panel-color-base': 'oklch(0.6 0.2 150)',
+                '--sk-panel-fg': 'black',
+            });
+        });
+
+        it('should not interfere with each other when using refs', async () =>
+        {
+            const buttonBase = ref('oklch(0.7 0.25 300)');
+            const panelBase = ref('oklch(0.6 0.2 150)');
+
+            const button = useCustomColors('button', buttonBase, 'white');
+            const panel = useCustomColors('panel', panelBase, 'black');
+
+            buttonBase.value = 'oklch(0.8 0.3 45)';
+            await nextTick();
+
+            // Button should update
+            expect(button.value['--sk-button-color-base']).toBe('oklch(0.8 0.3 45)');
+
+            // Panel should remain unchanged
+            expect(panel.value['--sk-panel-color-base']).toBe('oklch(0.6 0.2 150)');
+        });
+    });
+
+    describe('type coercion', () =>
+    {
+        it('should handle Ref<string | undefined> correctly', () =>
+        {
+            const baseColor = ref<string | undefined>('oklch(0.7 0.25 300)');
+            const textColor = ref<string | undefined>('white');
+
+            const result = useCustomColors('button', baseColor, textColor);
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+        });
+
+        it('should handle string | undefined correctly', () =>
+        {
+            const baseColor : string | undefined = 'oklch(0.7 0.25 300)';
+            const textColor : string | undefined = 'white';
+
+            const result = useCustomColors('button', baseColor, textColor);
+
+            expect(result.value).toEqual({
+                '--sk-button-color-base': 'oklch(0.7 0.25 300)',
+                '--sk-button-fg': 'white',
+            });
+        });
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------