@skewedaspect/sleekspace-ui 0.2.0-beta.1 → 0.2.0-beta.3

package/dist/components/Textarea/types.d.ts

@@ -0,0 +1,3 @@
+import { ComponentKind, ComponentSize } from '../../types';
+export type SkTextareaKind = ComponentKind;
+export type SkTextareaSize = ComponentSize;

package/dist/components/Theme/SkTheme.vue.d.ts

@@ -0,0 +1,20 @@
+import { SkThemeComponentProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkThemeComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkThemeComponentProps> & Readonly<{}>, {
+    theme: import('./types').SkThemeName;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Theme/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Available theme names that control the overall color scheme of the application.
+ * - 'greyscale': A monochromatic theme with neutral grays and subtle accents
+ * - 'colorful': A vibrant theme with saturated colors and stronger contrasts
+ */
+export type SkThemeName = 'greyscale' | 'colorful';
+export interface SkThemeComponentProps {
+    /**
+     * The active theme name that controls the color scheme for all child components.
+     * Changing this prop reactively updates the theme across the entire subtree.
+     * Portal components (dropdowns, modals, tooltips) automatically inherit this
+     * theme even though they render outside the DOM hierarchy.
+     * @default 'greyscale'
+     */
+    theme?: SkThemeName;
+}

package/dist/components/Theme/useTheme.d.ts

@@ -0,0 +1,84 @@
+import { Ref } from 'vue';
+import { SkThemeName } from './types';
+/**
+ * Context object for theme management.
+ * Provides reactive theme state and methods to change the theme.
+ */
+export interface ThemeContext {
+    /** Reactive reference to the currently active theme */
+    currentTheme: Ref<SkThemeName>;
+    /** Function to change the active theme */
+    setTheme: (theme: SkThemeName) => void;
+}
+/**
+ * Provides theme context to child components.
+ * Call this function at the root of your component tree (typically in SkTheme component).
+ *
+ * @param initialTheme - The initial theme to use. Defaults to 'greyscale'
+ * @returns ThemeContext object containing currentTheme ref and setTheme function
+ *
+ * @example Basic usage
+ * ```ts
+ * const theme = provideTheme('blue');
+ * ```
+ *
+ * @example Changing theme
+ * ```ts
+ * const theme = provideTheme();
+ * theme.setTheme('blue'); // Switch to blue theme
+ * ```
+ */
+export declare function provideTheme(initialTheme?: SkThemeName): ThemeContext;
+/**
+ * Accesses the theme context in a child component.
+ * Must be called within a component that has an SkTheme ancestor.
+ *
+ * @returns ThemeContext object containing currentTheme ref and setTheme function
+ * @throws Error if called outside of an SkTheme component tree
+ *
+ * @example Get current theme
+ * ```vue
+ * <script setup>
+ * import { useTheme } from '@skewedaspect/sleekspace-ui';
+ *
+ * const { currentTheme } = useTheme();
+ * console.log(currentTheme.value); // 'greyscale', 'blue', etc.
+ * </script>
+ * ```
+ *
+ * @example Change theme
+ * ```vue
+ * <script setup>
+ * import { useTheme } from '@skewedaspect/sleekspace-ui';
+ *
+ * const { setTheme } = useTheme();
+ *
+ * function switchToDarkTheme() {
+ *   setTheme('blue');
+ * }
+ * </script>
+ *
+ * <template>
+ *   <button @click="switchToDarkTheme">Switch to Blue Theme</button>
+ * </template>
+ * ```
+ *
+ * @example Reactive theme usage
+ * ```vue
+ * <script setup>
+ * import { computed } from 'vue';
+ * import { useTheme } from '@skewedaspect/sleekspace-ui';
+ *
+ * const { currentTheme } = useTheme();
+ * const isDarkTheme = computed(() => currentTheme.value === 'blue');
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     Current theme: {{ currentTheme }}
+ *     <span v-if="isDarkTheme">Dark mode active</span>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useTheme(): ThemeContext;

package/dist/components/Toast/SkToast.vue.d.ts

@@ -0,0 +1,42 @@
+import { SkToastKind } from './types';
+interface SkToastProps {
+    /**
+     * Unique identifier for this toast instance. Used internally for tracking and dismissing
+     * specific toasts. Generated automatically by SkToastProvider when using useToast().
+     */
+    id: string;
+    /**
+     * Semantic color kind that determines the toast's visual appearance and icon. Each kind
+     * displays a contextually appropriate icon: info (circle-i), success (checkmark),
+     * warning (triangle), danger (x-circle). The kind also sets the background and text colors.
+     */
+    kind: SkToastKind;
+    /**
+     * Optional bold title text displayed above the message. Use for brief headings like
+     * "Success!", "Error", or "Warning". When omitted, only the message is displayed.
+     */
+    title?: string;
+    /**
+     * The main toast message content. This is the primary text users will read, describing
+     * what happened or what action was taken. Keep messages concise and actionable.
+     */
+    message: string;
+    /**
+     * Time in milliseconds before the toast automatically dismisses. Set to 0 or undefined
+     * to disable auto-dismiss and require manual closure. When set, a progress indicator
+     * may show remaining time. Overrides the provider's default duration.
+     */
+    duration?: number;
+    /**
+     * When true, displays an X button allowing users to manually dismiss the toast before
+     * the duration expires. Essential for toasts with important information users may need
+     * more time to read, or when auto-dismiss is disabled.
+     */
+    closable: boolean;
+}
+declare const _default: import('vue').DefineComponent<SkToastProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dismiss: (id: string) => any;
+}, string, import('vue').PublicProps, Readonly<SkToastProps> & Readonly<{
+    onDismiss?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/Toast/SkToastProvider.vue.d.ts

@@ -0,0 +1,62 @@
+import { SkToastPosition, SkToastSwipeDirection } from './types';
+export interface SkToastProviderComponentProps {
+    /**
+     * Preset position for the toast viewport on the screen. Controls where toasts appear
+     * and stack. Choose a position that doesn't obstruct important UI elements. Common
+     * choices are 'bottom-right' for desktop apps and 'top-center' for mobile-first designs.
+     * When omitted, you can position the viewport via custom CSS instead.
+     * @default undefined
+     */
+    position?: SkToastPosition;
+    /**
+     * Default duration in milliseconds before toasts automatically dismiss. Individual
+     * toasts can override this value. Set to 0 to disable auto-dismiss by default,
+     * requiring users to manually close each toast. Recommended range: 3000-7000ms.
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Direction users can swipe to dismiss toasts on touch devices. The natural direction
+     * often matches the toast position - 'right' for right-positioned toasts, 'up' for
+     * top-positioned, etc. Set to the direction that feels like "dismissing" the toast.
+     * @default 'right'
+     */
+    swipeDirection?: SkToastSwipeDirection;
+    /**
+     * Minimum distance in pixels a user must swipe before the toast dismisses. Lower values
+     * make dismissal easier but may cause accidental dismissals. Higher values require more
+     * intentional swipes. Balance based on your target devices and user needs.
+     * @default 50
+     */
+    swipeThreshold?: number;
+    /**
+     * Keyboard shortcut(s) to focus the toast region for screen reader users and keyboard
+     * navigation. When pressed, focus moves to the toast viewport. Use an array to define
+     * multiple shortcuts. Keys use standard keyboard event key names.
+     * @default ['F8']
+     */
+    hotkey?: string[];
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkToastProviderComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkToastProviderComponentProps> & Readonly<{}>, {
+    position: SkToastPosition;
+    duration: number;
+    swipeDirection: SkToastSwipeDirection;
+    swipeThreshold: number;
+    hotkey: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Toast/index.d.ts

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

package/dist/components/Toast/types.d.ts

@@ -0,0 +1,35 @@
+/** 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';
+/** 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 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/dist/components/Toast/useToast.d.ts

@@ -0,0 +1,33 @@
+import { ToastAPI } from './types';
+export declare const TOAST_INJECTION_KEY: unique symbol;
+/**
+ * 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 declare function useToast(): ToastAPI;

package/dist/components/Tooltip/SkTooltip.vue.d.ts

@@ -0,0 +1,81 @@
+import { ComponentCustomColors, ComponentKind } from '../../types';
+import { SkTooltipSide } from './types';
+export interface SkTooltipComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the tooltip's background and text colors. Semantic kinds
+     * (neutral, primary, accent, info, success, warning, danger) adapt to your theme. Use 'neutral'
+     * for general hints, or match the kind to contextual meaning (e.g., 'warning' for caution tips).
+     * @default 'neutral'
+     */
+    kind?: ComponentKind;
+    /**
+     * Visual variant that controls the tooltip's appearance. 'solid' shows a filled background
+     * with the kind color, ideal for high-contrast visibility. 'outline' shows a bordered style
+     * with transparent background, useful for subtle hints that don't distract from content.
+     * @default 'solid'
+     */
+    variant?: 'solid' | 'outline';
+    /**
+     * Which side of the trigger element to display the tooltip. The tooltip automatically
+     * flips to the opposite side if there isn't enough space. Common choices: 'top' for
+     * buttons, 'right' for inline help icons, 'bottom' for navigation items.
+     * @default 'top'
+     */
+    side?: SkTooltipSide;
+    /**
+     * Alignment of the tooltip along its side. 'center' centers the tooltip on the trigger,
+     * 'start' aligns to the left/top edge, 'end' aligns to the right/bottom edge. Use 'start'
+     * or 'end' when the trigger is near a screen edge to prevent clipping.
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Distance in pixels between the tooltip and its trigger element. Increase for more
+     * breathing room, decrease for tighter coupling. The arrow (if shown) extends from
+     * this offset toward the trigger.
+     * @default 5
+     */
+    sideOffset?: number;
+    /**
+     * Delay in milliseconds before the tooltip appears after hovering the trigger. Only used
+     * in standalone mode - when inside SkTooltipProvider, the provider's delayDuration takes
+     * precedence. Set to 0 for instant tooltips, or higher values to avoid accidental triggers.
+     * @default 400
+     */
+    delayDuration?: number;
+    /**
+     * Whether to display a small arrow pointing from the tooltip toward its trigger element.
+     * Arrows help visually connect the tooltip to its trigger, especially useful when multiple
+     * interactive elements are close together. Disable for a cleaner, more minimal appearance.
+     * @default true
+     */
+    showArrow?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        trigger?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkTooltipComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkTooltipComponentProps> & Readonly<{}>, {
+    kind: ComponentKind;
+    variant: "solid" | "outline";
+    side: SkTooltipSide;
+    align: "start" | "center" | "end";
+    sideOffset: number;
+    showArrow: boolean;
+    delayDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Tooltip/SkTooltipProvider.vue.d.ts

@@ -0,0 +1,70 @@
+export interface SkTooltipProviderProps {
+    /**
+     * Delay in milliseconds from when the pointer enters a tooltip trigger until the tooltip
+     * opens. Applies to all SkTooltip components within this provider. A short delay (200-400ms)
+     * prevents tooltips from flashing when users move the mouse across the UI. Set to 0 for
+     * instant tooltips, though this may feel jarring.
+     * @default 400
+     */
+    delayDuration?: number;
+    /**
+     * Time window in milliseconds during which moving to another tooltip skips the delay entirely.
+     * After showing one tooltip, if the user hovers another trigger within this window, it appears
+     * instantly. This creates smooth "scanning" behavior when exploring a toolbar or menu. Set to
+     * 0 to disable skip delay behavior.
+     * @default 300
+     */
+    skipDelayDuration?: number;
+    /**
+     * When true, moving the pointer from the trigger onto the tooltip content closes the tooltip.
+     * By default, users can hover over tooltip content (useful for links or selectable text).
+     * Enable this for simpler tooltips where you want strict trigger-only behavior.
+     * @default false
+     */
+    disableHoverableContent?: boolean;
+    /**
+     * When true, clicking the trigger element does not close an open tooltip. By default,
+     * clicking the trigger dismisses the tooltip. Enable this if your trigger performs an
+     * action where the tooltip should remain visible for confirmation feedback.
+     * @default false
+     */
+    disableClosingTrigger?: boolean;
+    /**
+     * When true, tooltips only appear on keyboard focus (Tab navigation), not on mouse focus.
+     * Uses the `:focus-visible` heuristic to distinguish intentional keyboard focus from
+     * programmatic or mouse-triggered focus. Enable for reduced visual noise on mouse-heavy UIs.
+     * @default false
+     */
+    ignoreNonKeyboardFocus?: boolean;
+    /**
+     * When true, completely disables all tooltips within this provider. Useful for temporarily
+     * suppressing tooltips during certain UI states (like drag operations or touch interactions)
+     * or for user preference settings. Tooltips remain in the DOM but won't open.
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkTooltipProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkTooltipProviderProps> & Readonly<{}>, {
+    disabled: boolean;
+    delayDuration: number;
+    skipDelayDuration: number;
+    disableHoverableContent: boolean;
+    disableClosingTrigger: boolean;
+    ignoreNonKeyboardFocus: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Tooltip/index.d.ts

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

package/dist/components/Tooltip/types.d.ts

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

package/dist/composables/useCustomColors.d.ts

@@ -0,0 +1,74 @@
+import { Ref } from 'vue';
+/**
+ * Composable for handling custom color props in components.
+ *
+ * This composable provides a consistent way to apply custom colors to components by generating
+ * CSS variables that override the component's default color tokens. It supports any CSS color
+ * format including hex, rgb, hsl, oklch, named colors, and CSS variables.
+ *
+ * Works with any component that follows the CSS variable naming convention:
+ * - `--sk-{componentName}-color-base` for the base/background color
+ * - `--sk-{componentName}-fg` for the foreground/text color
+ *
+ * @param componentName - The component name used in CSS variable naming
+ *                        (e.g., 'button', 'panel', 'my-custom-component')
+ * @param baseColor - The base/background color (any CSS color value, including CSS variables)
+ * @param textColor - Optional foreground/text color. If not provided, falls back to `--sk-neutral-text`
+ *
+ * @returns Computed style object with CSS variables ready to bind to a component's style attribute
+ *
+ * @example Basic usage with base color only
+ * ```vue
+ * <script setup>
+ * import { useCustomColors } from '@/composables/useCustomColors';
+ *
+ * const props = defineProps<{ baseColor?: string }>();
+ * const customColors = useCustomColors('button', toRef(() => props.baseColor), undefined);
+ * </script>
+ *
+ * <template>
+ *   <button :style="customColors">Click me</button>
+ * </template>
+ * ```
+ *
+ * @example With both base and text colors
+ * ```vue
+ * <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">
+ *   Custom Purple Button
+ * </SkButton>
+ * ```
+ *
+ * @example Using CSS variables
+ * ```vue
+ * <SkPanel base-color="var(--my-custom-color)" text-color="var(--my-text-color)">
+ *   Content
+ * </SkPanel>
+ * ```
+ *
+ * @example Custom component
+ * ```vue
+ * <script setup>
+ * import { useCustomColors } from '@/composables/useCustomColors';
+ *
+ * const props = defineProps<{ baseColor?: string; textColor?: string }>();
+ * const customColors = useCustomColors('my-widget', toRef(() => props.baseColor), toRef(() => props.textColor));
+ * </script>
+ *
+ * <template>
+ *   <div class="my-widget" :style="customColors">
+ *     <!-- Will generate: --sk-my-widget-color-base and --sk-my-widget-fg -->
+ *   </div>
+ * </template>
+ * ```
+ *
+ * Generated CSS variables:
+ * - `--sk-{componentName}-color-base` - The base color for backgrounds and accents
+ * - `--sk-{componentName}-fg` - The foreground/text color
+ *
+ * @remarks
+ * - If `textColor` is not provided, components will use `--sk-neutral-text` from the active theme
+ * - For best contrast, always provide `textColor` when using custom `baseColor`
+ * - The generated CSS variables integrate with the component's existing token system
+ * - Works with any component name - no need to register components beforehand
+ */
+export declare function useCustomColors(componentName: string, baseColor: Ref<string | undefined> | string | undefined, textColor: Ref<string | undefined> | string | undefined): Ref<Record<string, string>>;

package/dist/composables/useCustomColors.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/usePortalContext.d.ts

@@ -0,0 +1,75 @@
+import { Ref } from 'vue';
+/**
+ * Composable for handling context propagation through portals.
+ *
+ * **The Portal Problem:**
+ * When components use portals (Modal, Dropdown, Tooltip, Listbox, Popover), the portaled content
+ * is teleported to `<body>`, breaking two critical things:
+ *
+ * 1. **CSS Cascade** - CSS custom properties defined on parent elements don't inherit to portaled
+ *    content because it's no longer a DOM descendant.
+ *
+ * 2. **Vue's provide/inject** - The Vue component tree is preserved, but nested portal components
+ *    (e.g., Listbox inside Modal) need the theme re-provided to reach their own portaled content.
+ *
+ * **This composable solves both problems by:**
+ * - Injecting the current theme (with a safe default)
+ * - Re-providing it for any nested portal components
+ * - Returning the theme ref for binding to `data-scheme` on portaled elements
+ *
+ * **IMPORTANT:** All portal components MUST:
+ * 1. Use this composable
+ * 2. Apply `:data-scheme="theme"` to their portaled content root element(s)
+ * 3. Apply kind classes directly on portaled content (CSS can't cascade from parent)
+ *
+ * @returns Object containing:
+ *   - `theme`: Readonly ref of current theme name for `:data-scheme` binding
+ *
+ * @example Basic usage in a portal component
+ * ```vue
+ * <script setup lang="ts">
+ * import { usePortalContext } from '@/composables/usePortalContext';
+ *
+ * const { theme } = usePortalContext();
+ * </script>
+ *
+ * <template>
+ *   <SomePortal>
+ *     <SomeContent :data-scheme="theme" :class="contentClasses">
+ *       <slot />
+ *     </SomeContent>
+ *   </SomePortal>
+ * </template>
+ * ```
+ *
+ * @example With multiple portaled elements (Modal with overlay)
+ * ```vue
+ * <template>
+ *   <DialogPortal>
+ *     <DialogOverlay :data-scheme="theme" />
+ *     <DialogContent :data-scheme="theme" :class="contentClasses">
+ *       <slot />
+ *     </DialogContent>
+ *   </DialogPortal>
+ * </template>
+ * ```
+ *
+ * @remarks
+ * - The default theme is 'greyscale' if no SkTheme wrapper is present
+ * - This composable automatically handles provide/inject - you don't need to do it manually
+ * - The returned `theme` ref is readonly to prevent accidental mutation
+ * - Nested portals (e.g., Dropdown inside Modal) work automatically because each portal
+ *   component re-provides the theme
+ *
+ * **Portal components in this library:**
+ * - SkModal (DialogPortal)
+ * - SkDropdown (DropdownMenuPortal)
+ * - SkDropdownSubmenu (DropdownMenuPortal)
+ * - SkListbox (ComboboxPortal)
+ * - SkTooltip (TooltipPortal)
+ * - SkPopover (PopoverPortal) - future
+ * - SkToast (ToastPortal) - future
+ */
+export declare function usePortalContext(): {
+    theme: Ref<string>;
+};

package/dist/composables/usePortalContext.test.d.ts

@@ -0,0 +1 @@
+export {};