@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/utils/Popper.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import type { Coords, Middleware, Placement, Strategy } from '@floating-ui/dom';
+	import * as dom from '@floating-ui/dom';
+	// import Arrow from './Arrow.svelte';
+	import { fade } from 'svelte/transition';
+	import { sineIn } from 'svelte/easing';
+	import clsx from 'clsx';
+	import type { ParamsType, PopperProps, TriggeredToggleEvent } from '../types/index.js';
+
+	let {
+		triggeredBy,
+		triggerDelay = 200,
+		trigger = 'click',
+		placement = 'top',
+		offset = 8,
+		arrow = false,
+		yOnly = false,
+		strategy = 'absolute',
+		reference,
+		middlewares = [dom.flip(), dom.shift()],
+		onbeforetoggle: _onbeforetoggle,
+		ontoggle: _ontoggle,
+		class: className = '',
+		arrowClass = '',
+		isOpen = $bindable(false),
+		transitionParams,
+		transition = fade,
+		children,
+		...restProps
+	}: PopperProps = $props();
+
+	let focusable: boolean = true;
+	let clickable: boolean = $derived(trigger === 'click');
+	let hoverable: boolean = $derived(trigger === 'hover');
+
+	let popover: HTMLElement | null = $state(null);
+	let invoker: HTMLElement | null = null;
+	let referenceElement: HTMLElement | null = null;
+	let triggerEls: HTMLElement[] = [];
+	let arrowParams: { placement: Placement; cords: Partial<Coords>; strategy: Strategy } = $state({
+		placement,
+		cords: { x: 0, y: 0 },
+		strategy
+	});
+
+	const paramsDefault = { duration: 100, easing: sineIn };
+	const paramsOptions = $derived(transitionParams ?? paramsDefault);
+
+	const px = (n: number | undefined) => (n ? `${n}px` : '');
+
+	function updatePopoverPosition() {
+		if (!invoker || !popover) {
+			return;
+		}
+
+		const arrowEl: HTMLElement | null = popover.querySelector('.popover-arrow');
+
+		let middleware: Middleware[] = [...middlewares, dom.offset(offset)];
+		if (arrowEl) middleware.push(dom.arrow({ element: arrowEl }));
+
+		return dom
+			.computePosition(referenceElement ?? invoker, popover, { placement, middleware, strategy })
+			.then(({ x, y, middlewareData: { arrow }, placement: pl, strategy }) => {
+				if (popover) {
+					Object.assign(popover.style, {
+						position: strategy,
+						left: yOnly ? '0' : px(x),
+						top: px(y)
+					});
+
+					if (arrow && arrowEl) {
+						arrowParams = { placement: pl, cords: { x: arrow.x, y: arrow.y }, strategy };
+					}
+				}
+			});
+	}
+
+	let isTriggered: boolean = false;
+
+	async function open_popover(ev: Event) {
+		// throttle
+		isTriggered = true;
+		await new Promise((resolve) => setTimeout(resolve, triggerDelay));
+		if (!isTriggered) {
+			return;
+		}
+
+		ev.preventDefault();
+
+		if (ev.target !== invoker && triggerEls.includes(ev.target as HTMLElement)) {
+			invoker = ev.target as HTMLElement;
+			// if (invoker) invoker.popoverTargetElement = popover;
+			isOpen = false;
+			await new Promise((resolve) => setTimeout(resolve, triggerDelay));
+		}
+
+		if (ev.type === 'mousedown') {
+			isOpen = !isOpen;
+		} else {
+			isOpen = true;
+		}
+	}
+
+	async function close_popover(ev: Event) {
+		// For click triggers, don't close on focusout events from inside the popover
+		if (trigger === 'click' && ev.type === 'focusout') {
+			const relatedTarget = (ev as FocusEvent).relatedTarget as HTMLElement;
+
+			// If focus is moving to somewhere inside the popover, don't close
+			if (popover && relatedTarget && popover.contains(relatedTarget)) {
+				return;
+			}
+
+			// If focus is moving to nowhere (like when clicking), don't close for click triggers
+			if (!relatedTarget) {
+				return;
+			}
+		}
+
+		isTriggered = false;
+		await new Promise((resolve) => setTimeout(resolve, triggerDelay));
+		if (isTriggered) {
+			return;
+		}
+
+		// if popover has focus don't close when leaving the invoker
+		if (ev?.type === 'mouseleave' && popover?.contains(popover.ownerDocument.activeElement)) {
+			return;
+		}
+		if (ev?.type === 'focusout' && popover?.contains(popover.ownerDocument.activeElement)) {
+			return;
+		}
+
+		isOpen = false;
+	}
+
+	let autoUpdateDestroy = () => {};
+
+	function on_before_toggle(ev: ToggleEvent) {
+		if (!invoker || !popover) return;
+
+		(ev as TriggeredToggleEvent).trigger = invoker;
+		_onbeforetoggle?.(ev as TriggeredToggleEvent);
+
+		// Floating UI instance when it's closed we need to keep a autoUpdate destroy function
+
+		if (ev.newState === 'open') {
+			autoUpdateDestroy = dom.autoUpdate(
+				referenceElement ?? invoker,
+				popover,
+				updatePopoverPosition
+			);
+			popover.ownerDocument.addEventListener('click', closeOnClickOutside);
+			popover.ownerDocument.addEventListener('keydown', closeOnEscape);
+		} else {
+			autoUpdateDestroy();
+			popover.ownerDocument.removeEventListener('click', closeOnClickOutside);
+			popover.ownerDocument.removeEventListener('keydown', closeOnEscape);
+		}
+	}
+
+	function on_toggle(ev: ToggleEvent) {
+		if (!invoker) return;
+
+		// Update isOpen value when popover state changes through other means
+		isOpen = ev.newState === 'open';
+
+		(ev as TriggeredToggleEvent).trigger = invoker;
+		_ontoggle?.(ev as TriggeredToggleEvent);
+	}
+
+	function set_triggers(node: HTMLElement) {
+		const events: [string, any, boolean][] = [
+			['focusin', open_popover, focusable],
+			['focusout', close_popover, focusable],
+			['mousedown', open_popover, clickable],
+			['mouseenter', open_popover, hoverable],
+			['mouseleave', close_popover, hoverable]
+		];
+
+		if (triggeredBy)
+			triggerEls = [...node.ownerDocument.querySelectorAll<HTMLElement>(triggeredBy)];
+		else if (node.previousElementSibling) triggerEls = [node.previousElementSibling as HTMLElement];
+		else if (node.parentElement) triggerEls = [node.parentElement];
+
+		if (!triggerEls.length) {
+			console.error('No triggers found.', triggeredBy);
+			return;
+		}
+
+		if (reference) referenceElement = node.ownerDocument.querySelector<HTMLElement>(reference);
+		invoker = triggerEls[0];
+
+		triggerEls.forEach((element: HTMLElement) => {
+			if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
+			for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
+		});
+
+		$effect(() => {
+			return () => {
+				triggerEls.forEach((element: HTMLElement) => {
+					for (const [name, handler, cond] of events)
+						if (cond) element.removeEventListener(name, handler);
+				});
+			};
+		});
+	}
+
+	function closeOnEscape(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			isOpen = false;
+		}
+	}
+
+	function closeOnClickOutside(event: MouseEvent) {
+		if (!popover) {
+			return;
+		}
+
+		const clickPath = event.composedPath();
+
+		const isClickInsidePopover = clickPath.includes(popover);
+		const isClickOnTrigger = triggerEls.some((el) => clickPath.includes(el));
+
+		// Only close if click is outside both popover and trigger elements
+		if (!isClickInsidePopover && !isClickOnTrigger) {
+			close_popover(event);
+			isOpen = false;
+		}
+	}
+</script>
+
+<div use:set_triggers hidden></div>
+
+{#if isOpen}
+	<div
+		popover="manual"
+		role="tooltip"
+		bind:this={popover}
+		class:overflow-visible={true}
+		onfocusout={close_popover}
+		onmouseleave={hoverable ? close_popover : undefined}
+		onmouseenter={hoverable ? open_popover : undefined}
+		onbeforetoggle={on_before_toggle}
+		ontoggle={on_toggle}
+		class={clsx(className)}
+		transition:transition={paramsOptions as ParamsType}
+		onintrostart={() => popover?.showPopover()}
+		onoutroend={() => popover?.hidePopover()}
+		{...restProps}
+	>
+		{@render children()}
+		<!-- {#if arrow}
+			<Arrow {...arrowParams} class={arrowClass} />
+		{/if} -->
+	</div>
+{/if}

package/dist/utils/Popper.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopperProps } from '../types/index.js';
+declare const Popper: import("svelte").Component<PopperProps, {}, "isOpen">;
+type Popper = ReturnType<typeof Popper>;
+export default Popper;

package/dist/utils/action.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export declare function trapFocus(node: HTMLElement, options?: {
+    onEscape?: () => void;
+    isClosing?: boolean;
+} | null): {
+    update(newOptions?: {
+        onEscape?: () => void;
+        isClosing?: boolean;
+    } | null): void;
+    destroy(): void;
+};

package/dist/utils/action.js

@@ -0,0 +1,107 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export function trapFocus(node, options = {}) {
+    // If options is null, don't trap focus at all
+    if (options === null) {
+        return {
+            update(newOptions = {}) {
+                options = newOptions;
+            },
+            destroy() { }
+        };
+    }
+    const previous = document.activeElement;
+    // Track if we're currently closing via outside click
+    let isClosingViaOutsideClick = false;
+    // Create a flag to prevent re-focusing when focus is moved outside
+    let isFocusMovedOutside = false;
+    function focusable() {
+        return Array.from(node.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+    }
+    function handleKeydown(event) {
+        if (event.key === "Tab" && options !== null) {
+            const current = document.activeElement;
+            const elements = focusable();
+            const first = elements.at(0);
+            const last = elements.at(-1);
+            if (event.shiftKey && current === first) {
+                last?.focus();
+                event.preventDefault();
+            }
+            if (!event.shiftKey && current === last) {
+                first?.focus();
+                event.preventDefault();
+            }
+        }
+        else if (event.key === "Escape" && options !== null && options.onEscape) {
+            event.preventDefault();
+            // Mark as closing via escape to prevent focus restoration
+            isClosingViaOutsideClick = true;
+            options.onEscape();
+        }
+    }
+    // Handler for when focus moves outside the trapped area
+    function handleFocusOut(event) {
+        // If focus is moving outside our node and not to one of our triggers
+        if (!node.contains(event.relatedTarget) && event.relatedTarget !== previous) {
+            isFocusMovedOutside = true;
+        }
+    }
+    // Initialize the action
+    function initialize() {
+        // Only add event listeners if options is not null
+        if (options !== null) {
+            // Check if we're currently in a closing state
+            isClosingViaOutsideClick = !!options.isClosing;
+            // Only auto-focus if not closing from outside click
+            if (!isClosingViaOutsideClick && !isFocusMovedOutside) {
+                const elements = focusable();
+                if (elements.length > 0) {
+                    elements[0].focus();
+                }
+            }
+            node.addEventListener("keydown", handleKeydown);
+            node.addEventListener("focusout", handleFocusOut);
+        }
+    }
+    // Cleanup function
+    function cleanup() {
+        if (options !== null) {
+            node.removeEventListener("keydown", handleKeydown);
+            node.removeEventListener("focusout", handleFocusOut);
+            // Only restore focus if not closing via outside click and focus hasn't moved outside
+            if (!isClosingViaOutsideClick && !isFocusMovedOutside && previous) {
+                setTimeout(() => {
+                    previous.focus({ preventScroll: true });
+                }, 0);
+            }
+        }
+    }
+    // Initialize on mount
+    initialize();
+    // Return the action object with update and destroy methods
+    return {
+        update(newOptions = {}) {
+            // Clean up existing listeners first
+            node.removeEventListener("keydown", handleKeydown);
+            node.removeEventListener("focusout", handleFocusOut);
+            // Update the closing state
+            if (newOptions && newOptions.isClosing !== undefined) {
+                isClosingViaOutsideClick = newOptions.isClosing;
+            }
+            options = newOptions;
+            // Reinitialize with new options
+            if (options !== null) {
+                node.addEventListener("keydown", handleKeydown);
+                node.addEventListener("focusout", handleFocusOut);
+            }
+        },
+        destroy() {
+            cleanup();
+        }
+    };
+}

package/dist/utils/closeButton/CloseButton.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+	export type CloseButtonProps = CloseButtonVariants &
+		AnchorButtonAttributes & {
+			onclick?: (ev: MouseEvent) => void;
+			name?: string;
+			ariaLabel?: string;
+			class?: string;
+			svgClass?: string;
+		};
+</script>
+
+<script lang="ts">
+	import clsx from 'clsx';
+	import { closeButton } from './index.js';
+	import { useDismiss } from '../dismissable.js';
+	import type { AnchorButtonAttributes } from '../../types/index.js';
+	import type { CloseButtonVariants } from './theme.js';
+
+	let {
+		children,
+		color = 'gray',
+		onclick: onclickorg,
+		name = 'Close',
+		ariaLabel,
+		size = 'md',
+		class: className,
+		svgClass,
+		...restProps
+	}: CloseButtonProps = $props();
+
+	const { base, svg } = $derived(closeButton({ color, size }));
+
+	const context = useDismiss();
+
+	function onclick(event: MouseEvent) {
+		onclickorg?.(event);
+		if (event.defaultPrevented) return;
+		context?.dismiss?.(event);
+	}
+</script>
+
+{#if restProps.href === undefined}
+	<button
+		type="button"
+		{...restProps}
+		class={base({ class: clsx(className) })}
+		{onclick}
+		aria-label={ariaLabel ?? name}
+	>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg
+				class={svg({ class: svgClass })}
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</button>
+{:else}
+	<a
+		{...restProps}
+		{onclick}
+		class={base({ class: clsx(className) })}
+		aria-label={ariaLabel ?? name}
+	>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+				<path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</a>
+{/if}

package/dist/utils/closeButton/CloseButton.svelte.d.ts

@@ -0,0 +1,12 @@
+export type CloseButtonProps = CloseButtonVariants & AnchorButtonAttributes & {
+    onclick?: (ev: MouseEvent) => void;
+    name?: string;
+    ariaLabel?: string;
+    class?: string;
+    svgClass?: string;
+};
+import type { AnchorButtonAttributes } from '../../types/index.js';
+import type { CloseButtonVariants } from './theme.js';
+declare const CloseButton: import("svelte").Component<CloseButtonProps, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;

package/dist/utils/closeButton/index.d.ts

@@ -0,0 +1,2 @@
+export { closeButton } from './theme.js';
+export { default as CloseButton } from './CloseButton.svelte';

package/dist/utils/closeButton/index.js

@@ -0,0 +1,2 @@
+export { closeButton } from './theme.js';
+export { default as CloseButton } from './CloseButton.svelte';

package/dist/utils/closeButton/theme.d.ts

@@ -0,0 +1,100 @@
+import type { Classes } from "../../themes/themeUtils.js";
+import { type VariantProps } from "tailwind-variants";
+export type CloseButtonVariants = VariantProps<typeof closeButton> & Classes<typeof closeButton>;
+export declare const closeButton: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal", unknown, unknown, undefined>>;

package/dist/utils/closeButton/theme.js

@@ -0,0 +1,69 @@
+import { tv } from "tailwind-variants";
+export const closeButton = tv({
+    base: "focus:outline-hidden whitespace-normal",
+    variants: {
+        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        color: {
+            primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
+            secondary: "text-secondary-500 focus:ring-secondary-400 hover:bg-secondary-200 dark:hover:bg-secondary-800 dark:hover:text-secondary-300",
+            gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+            red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
+            orange: "text-orange-500 focus:ring-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 dark:hover:text-orange-300",
+            amber: "text-amber-500 focus:ring-amber-400 hover:bg-amber-200 dark:hover:bg-amber-800 dark:hover:text-amber-300",
+            yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
+            lime: "text-lime-500 focus:ring-lime-400 hover:bg-lime-200 dark:hover:bg-lime-800 dark:hover:text-lime-300",
+            green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
+            emerald: "text-emerald-500 focus:ring-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 dark:hover:text-emerald-300",
+            teal: "text-teal-500 focus:ring-teal-400 hover:bg-teal-200 dark:hover:bg-teal-800 dark:hover:text-teal-300",
+            cyan: "text-cyan-500 focus:ring-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-800 dark:hover:text-cyan-300",
+            sky: "text-sky-500 focus:ring-sky-400 hover:bg-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-300",
+            blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
+            indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
+            violet: "text-violet-500 focus:ring-violet-400 hover:bg-violet-200 dark:hover:bg-violet-800 dark:hover:text-violet-300",
+            purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
+            fuchsia: "text-fuchsia-500 focus:ring-fuchsia-400 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 dark:hover:text-fuchsia-300",
+            pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
+            rose: "text-rose-500 focus:ring-rose-400 hover:bg-rose-200 dark:hover:bg-rose-800 dark:hover:text-rose-300",
+            none: ""
+        },
+        size: {
+            xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
+            sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
+            md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
+            lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
+        }
+    },
+    defaultVariants: {
+        color: "gray",
+        size: "md",
+        href: null
+    },
+    slots: {
+        svg: ""
+    },
+    compoundVariants: [
+        {
+            size: "xs",
+            class: {
+                svg: "w-3 h-3"
+            }
+        },
+        {
+            size: "sm",
+            class: {
+                svg: "w-3.5 h-3.5"
+            }
+        },
+        {
+            size: ["md", "lg"],
+            class: {
+                svg: "w-5 h-5"
+            }
+        },
+        {
+            size: ["xs", "sm", "md", "lg"],
+            color: "none",
+            class: "focus:ring-0 rounded-none m-0"
+        }
+    ]
+});

package/dist/utils/dismissable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * DismissableContext provides a way to dismiss a component or modal.
+ * It should be used within a component that needs to provide dismiss functionality.
+ */
+export type DismissableContext = {
+    dismiss: (event: MouseEvent) => void;
+};
+export declare function createDismissableContext(onDismiss: (event: MouseEvent) => void): DismissableContext;
+export declare function useDismiss(): DismissableContext;

package/dist/utils/dismissable.js

@@ -0,0 +1,16 @@
+import { getContext, setContext } from "svelte";
+const DISMISSABLE_KEY = Symbol("dismissable");
+export function createDismissableContext(onDismiss) {
+    const context = {
+        dismiss: onDismiss
+    };
+    return setContext(DISMISSABLE_KEY, context);
+}
+export function useDismiss() {
+    const context = getContext(DISMISSABLE_KEY);
+    if (!context) {
+        // uncomment below line if you want to trace usage without the context
+        // console.warn('useDismiss must be used within a Dismissable component'); // For development purposes
+    }
+    return context;
+}