@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Toast/SkToast.vue

@@ -0,0 +1,156 @@
+<template>
+    <ToastRoot
+        :class="classes"
+        :duration="duration"
+        @update:open="onOpenChange"
+    >
+        <!-- Icon -->
+        <div class="sk-toast-icon">
+            <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>
+        </div>
+
+        <!-- Content -->
+        <div class="sk-toast-content">
+            <ToastTitle v-if="title" class="sk-toast-title">
+                {{ title }}
+            </ToastTitle>
+            <ToastDescription class="sk-toast-description">
+                {{ message }}
+            </ToastDescription>
+        </div>
+
+        <!-- Close button -->
+        <ToastClose v-if="closable" class="sk-toast-close" aria-label="Close">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+        </ToastClose>
+    </ToastRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Toast styles are implemented in /src/styles/components/_toast.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Internal toast component used by SkToastProvider.
+     * Not exported directly - use useToast() to create toasts.
+     */
+
+    import { computed } from 'vue';
+    import {
+        ToastClose,
+        ToastDescription,
+        ToastRoot,
+        ToastTitle,
+    } from 'reka-ui';
+
+    // Types
+    import type { SkToastKind } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    interface SkToastProps
+    {
+        /** Toast ID for tracking */
+        id : string;
+        /** Semantic kind */
+        kind : SkToastKind;
+        /** Optional title */
+        title ?: string;
+        /** Toast message */
+        message : string;
+        /** Duration in ms (0 = no auto-dismiss) */
+        duration ?: number;
+        /** Whether to show close button */
+        closable : boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = defineProps<SkToastProps>();
+
+    const emit = defineEmits<{
+        dismiss : [ id : string ];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-toast': true,
+        [`sk-${ props.kind }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function onOpenChange(open : boolean) : void
+    {
+        if(!open)
+        {
+            emit('dismiss', props.id);
+        }
+    }
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Toast/SkToastProvider.vue

@@ -0,0 +1,180 @@
+<template>
+    <ToastProvider
+        :duration="duration"
+        :swipe-direction="swipeDirection"
+        :swipe-threshold="swipeThreshold"
+    >
+        <slot />
+        <ToastViewport
+            :class="viewportClasses"
+            :data-scheme="theme"
+            :hotkey="hotkey"
+        >
+            <SkToast
+                v-for="toast in toasts"
+                :id="toast.id"
+                :key="toast.id"
+                :kind="toast.kind"
+                :title="toast.title"
+                :message="toast.message"
+                :duration="toast.duration"
+                :closable="toast.closable"
+                @dismiss="dismissToast"
+            />
+        </ToastViewport>
+    </ToastProvider>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Toast viewport styles are implemented in /src/styles/components/_toast.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Toast provider and viewport combined.
+     *
+     * Wrap your app (or a section) with this component to enable toasts.
+     * Use the useToast() composable to show toasts from anywhere in the tree.
+     */
+
+    import { computed, provide, ref } from 'vue';
+    import { ToastProvider, ToastViewport } from 'reka-ui';
+
+    // Types
+    import type { SkToastPosition, SkToastSwipeDirection, ToastAPI, ToastOptions, ToastState } from './types';
+
+    // Components
+    import SkToast from './SkToast.vue';
+
+    // Composables
+    import { usePortalContext } from '@/composables/usePortalContext';
+    import { TOAST_INJECTION_KEY } from './useToast';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Toast provider that manages and displays toast notifications.
+     *
+     * Wrap your app with this component to enable toasts. Use useToast() composable
+     * to show notifications from anywhere in the tree.
+     *
+     * @see useToast - Composable for showing toasts
+     */
+    export interface SkToastProviderComponentProps
+    {
+        /**
+         * Preset position for the viewport. If omitted, position via CSS/classes.
+         */
+        position ?: SkToastPosition;
+
+        /**
+         * Default duration (ms) before auto-dismiss.
+         * @default 5000
+         */
+        duration ?: number;
+
+        /**
+         * Direction to swipe to dismiss.
+         * @default 'right'
+         */
+        swipeDirection ?: SkToastSwipeDirection;
+
+        /**
+         * Distance (px) to swipe before dismissing.
+         * @default 50
+         */
+        swipeThreshold ?: number;
+
+        /**
+         * Keyboard shortcut to focus toasts.
+         * @default ['F8']
+         */
+        hotkey ?: string[];
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkToastProviderComponentProps>(), {
+        position: undefined,
+        duration: 5000,
+        swipeDirection: 'right',
+        swipeThreshold: 50,
+        hotkey: () => [ 'F8' ],
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Toast State Management
+    //------------------------------------------------------------------------------------------------------------------
+
+    const toasts = ref<ToastState[]>([]);
+    let toastCounter = 0;
+
+    function generateId() : string
+    {
+        return `toast-${ ++toastCounter }-${ Date.now() }`;
+    }
+
+    function addToast(options : ToastOptions) : string
+    {
+        const id = options.id ?? generateId();
+
+        const toast : ToastState = {
+            id,
+            kind: options.kind ?? 'info',
+            title: options.title ?? '',
+            message: options.message,
+            duration: options.duration,
+            closable: options.closable ?? true,
+        };
+
+        toasts.value.push(toast);
+        return id;
+    }
+
+    function dismissToast(id : string) : void
+    {
+        const index = toasts.value.findIndex((item) => item.id === id);
+        if(index !== -1)
+        {
+            toasts.value.splice(index, 1);
+        }
+    }
+
+    function dismissAllToasts() : void
+    {
+        toasts.value = [];
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Provide Toast API
+    //------------------------------------------------------------------------------------------------------------------
+
+    const toastAPI : ToastAPI = {
+        add: addToast,
+        dismiss: dismissToast,
+        dismissAll: dismissAllToasts,
+    };
+
+    provide(TOAST_INJECTION_KEY, toastAPI);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Viewport Classes
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewportClasses = computed(() => ({
+        'sk-toast-viewport': true,
+        [`sk-${ props.position }`]: props.position !== undefined,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Toast/index.ts

@@ -0,0 +1,15 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkToastProvider } from './SkToastProvider.vue';
+export { useToast } from './useToast';
+export type {
+    SkToastKind,
+    SkToastPosition,
+    SkToastSwipeDirection,
+    ToastAPI,
+    ToastOptions,
+} from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Toast/types.ts

@@ -0,0 +1,63 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Types
+//----------------------------------------------------------------------------------------------------------------------
+
+/** Toast semantic kinds (subset of ComponentKind for notifications) */
+export type SkToastKind = 'info' | 'success' | 'warning' | 'danger';
+
+/** Toast viewport position presets */
+export type SkToastPosition
+    = 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right';
+
+/** Swipe direction for dismissing toasts */
+export type SkToastSwipeDirection = 'right' | 'left' | 'up' | 'down';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Options (for useToast composable)
+//----------------------------------------------------------------------------------------------------------------------
+
+/** Options for creating a toast */
+export interface ToastOptions
+{
+    /** Unique ID for the toast. Auto-generated if not provided */
+    id ?: string;
+    /** Semantic kind (default: 'info') */
+    kind ?: SkToastKind;
+    /** Optional heading text */
+    title ?: string;
+    /** Toast message content (required) */
+    message : string;
+    /** Duration in ms before auto-dismiss. Use 0 for no auto-dismiss */
+    duration ?: number;
+    /** Whether to show close button (default: true) */
+    closable ?: boolean;
+}
+
+/** Internal toast state */
+export interface ToastState extends Required<Omit<ToastOptions, 'duration'>>
+{
+    /** Duration can be undefined to use provider default */
+    duration ?: number;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toast API (returned by useToast)
+//----------------------------------------------------------------------------------------------------------------------
+
+/** Toast management API */
+export interface ToastAPI
+{
+    /** Add a new toast and return its ID */
+    add : (options : ToastOptions) => string;
+    /** Dismiss a specific toast by ID */
+    dismiss : (id : string) => void;
+    /** Dismiss all active toasts */
+    dismissAll : () => void;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Toast/useToast.ts

@@ -0,0 +1,78 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Composable
+//----------------------------------------------------------------------------------------------------------------------
+
+import { inject } from 'vue';
+
+// Types
+import type { ToastAPI, ToastOptions } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Injection Key
+//----------------------------------------------------------------------------------------------------------------------
+
+export const TOAST_INJECTION_KEY = Symbol.for('sk-toast-provider');
+
+//----------------------------------------------------------------------------------------------------------------------
+// useToast Composable
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Get the toast API for showing notifications.
+ *
+ * Must be used within a component tree that contains SkToastProvider.
+ *
+ * @example
+ * ```typescript
+ * import { useToast } from '@skewedaspect/sleekspace-ui';
+ *
+ * const toast = useToast();
+ *
+ * // Show a success toast
+ * toast.add({
+ *   kind: 'success',
+ *   title: 'Saved!',
+ *   message: 'Your changes have been saved.'
+ * });
+ *
+ * // Show an error toast that doesn't auto-dismiss
+ * toast.add({
+ *   kind: 'danger',
+ *   title: 'Error',
+ *   message: 'Something went wrong.',
+ *   duration: 0
+ * });
+ *
+ * // Dismiss all toasts
+ * toast.dismissAll();
+ * ```
+ */
+export function useToast() : ToastAPI
+{
+    const api = inject<ToastAPI>(TOAST_INJECTION_KEY);
+
+    if(!api)
+    {
+        // Return a no-op API with warnings
+        console.warn('[SkToast] useToast() must be used within SkToastProvider');
+        return {
+            add: (_options : ToastOptions) =>
+            {
+                console.warn('[SkToast] Cannot add toast - no provider found');
+                return '';
+            },
+            dismiss: () =>
+            {
+                console.warn('[SkToast] Cannot dismiss toast - no provider found');
+            },
+            dismissAll: () =>
+            {
+                console.warn('[SkToast] Cannot dismiss toasts - no provider found');
+            },
+        };
+    }
+
+    return api;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Tooltip/SkTooltip.vue

@@ -0,0 +1,162 @@
+<template>
+    <!-- When inside SkTooltipProvider, skip creating our own provider -->
+    <TooltipProvider v-if="!hasProvider" :delay-duration="delayDuration">
+        <TooltipRoot>
+            <TooltipTrigger as-child>
+                <slot name="trigger" />
+            </TooltipTrigger>
+            <TooltipPortal>
+                <TooltipContent
+                    :class="contentClasses"
+                    :style="customColorStyles"
+                    :data-scheme="theme"
+                    :side="side"
+                    :align="align"
+                    :side-offset="sideOffset"
+                >
+                    <slot />
+                    <TooltipArrow v-if="showArrow" class="sk-tooltip-arrow" />
+                </TooltipContent>
+            </TooltipPortal>
+        </TooltipRoot>
+    </TooltipProvider>
+
+    <!-- When inside SkTooltipProvider, use shared provider context -->
+    <TooltipRoot v-else>
+        <TooltipTrigger as-child>
+            <slot name="trigger" />
+        </TooltipTrigger>
+        <TooltipPortal>
+            <TooltipContent
+                :class="contentClasses"
+                :style="customColorStyles"
+                :data-scheme="theme"
+                :side="side"
+                :align="align"
+                :side-offset="sideOffset"
+            >
+                <slot />
+                <TooltipArrow v-if="showArrow" class="sk-tooltip-arrow" />
+            </TooltipContent>
+        </TooltipPortal>
+    </TooltipRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Tooltip styles are implemented in /src/styles/components/_tooltip.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Tooltip component for displaying hover hints
+     */
+
+    import { computed, inject, toRef } from 'vue';
+    import {
+        TooltipArrow,
+        TooltipContent,
+        TooltipPortal,
+        TooltipProvider,
+        TooltipRoot,
+        TooltipTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors, ComponentKind } from '@/types';
+    import type { SkTooltipSide } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Tooltip component for displaying hover hints.
+     *
+     * Works in two modes:
+     * - **Standalone**: Each tooltip manages its own timing (default)
+     * - **With Provider**: Wrap tooltips in SkTooltipProvider for coordinated behavior
+     *
+     * The provider enables "skip delay" - moving quickly between tooltips shows them instantly.
+     *
+     * @example Standalone (works out of the box)
+     * ```vue
+     * <SkTooltip>
+     *   <template #trigger><SkButton>Hover me</SkButton></template>
+     *   Tooltip content
+     * </SkTooltip>
+     * ```
+     *
+     * @example With provider (coordinated tooltips)
+     * ```vue
+     * <SkTooltipProvider :delay-duration="300">
+     *   <SkTooltip>...</SkTooltip>
+     *   <SkTooltip>...</SkTooltip>
+     * </SkTooltipProvider>
+     * ```
+     */
+    export interface SkTooltipComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind */
+        kind ?: ComponentKind;
+        /** Visual variant */
+        variant ?: 'solid' | 'outline';
+        /** Which side of the trigger to show the tooltip */
+        side ?: SkTooltipSide;
+        /** Alignment along the side */
+        align ?: 'start' | 'center' | 'end';
+        /** Offset from the trigger in pixels */
+        sideOffset ?: number;
+        /**
+         * Delay before showing tooltip (ms). Only used in standalone mode.
+         * When inside SkTooltipProvider, the provider's delayDuration is used instead.
+         */
+        delayDuration ?: number;
+        /** Whether to show the arrow pointing to the trigger */
+        showArrow ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTooltipComponentProps>(), {
+        kind: 'neutral',
+        variant: 'solid',
+        side: 'top',
+        align: 'center',
+        sideOffset: 5,
+        delayDuration: 400,
+        showArrow: true,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Check if we're inside an SkTooltipProvider
+    const hasProvider = inject('sk-tooltip-provider', false);
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-tooltip-content': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.variant }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'tooltip',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->