@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+export type ToastIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export type ToastPlacement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export interface ToastOptions {
+    /** Reuse an id to replace a toast that is still open. Generated when omitted. */
+    id?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** @default 'neutral' */
+    intent?: ToastIntent;
+    /**
+     * Milliseconds before it closes on its own. `null` keeps it open until dismissed. Defaults to
+     * the provider's `duration`.
+     */
+    duration?: number | null;
+    /** Button shown in the toast. Dismisses the toast after `onClick` runs. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Called when the toast closes, for any reason. */
+    onDismiss?: () => void;
+}
+export interface ToastContextValue {
+    /** Shows a toast, or queues it while `max` toasts are visible. Returns its id. */
+    toast: (options: ToastOptions) => string;
+    /** Closes the toast with this id, or every toast when called without one. */
+    dismiss: (id?: string) => void;
+}
+/** Shows and dismisses toasts. Must be called inside a `ToastProvider`. */
+export declare function useToast(): ToastContextValue;
+export interface ToastProviderProps {
+    children?: ReactNode;
+    /**
+     * Default time, in milliseconds, before a toast closes on its own.
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Toasts visible at once. The rest wait in a queue and appear as others close.
+     * @default 3
+     */
+    max?: number;
+    /** @default 'bottom-end' */
+    placement?: ToastPlacement;
+    /**
+     * Accessible name of the notification region.
+     * @default 'Notifications'
+     */
+    label?: string;
+    /**
+     * Key that moves focus to the newest toast, so keyboard users can reach its buttons.
+     * @default 'F8'
+     */
+    hotkey?: string;
+    /**
+     * Accessible name of the dismiss button of each toast.
+     * @default 'Dismiss notification'
+     */
+    dismissLabel?: string;
+}
+/**
+ * Renders the toasts requested with `useToast`. Timers pause while the pointer is over the
+ * toasts or focus is inside them, and new toasts are announced by a live region.
+ */
+export declare function ToastProvider({ children, duration, max, placement, label, hotkey, dismissLabel, }: ToastProviderProps): import('react').JSX.Element;

package/dist/components/Toast/Toast.js

@@ -0,0 +1,166 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { CloseIcon as t, ErrorIcon as n, InfoIcon as r, SuccessIcon as i, WarningIcon as a } from "../Icon/icons.js";
+import { Button as o } from "../Button/Button.js";
+import { IconButton as s } from "../IconButton/IconButton.js";
+import { Portal as c } from "../Portal/Portal.js";
+import l from "./Toast.module.js";
+import { createContext as u, useCallback as d, useContext as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+// src/components/Toast/Toast.tsx
+var y = {
+	"top-start": l.topStart,
+	"top-center": l.topCenter,
+	"top-end": l.topEnd,
+	"bottom-start": l.bottomStart,
+	"bottom-center": l.bottomCenter,
+	"bottom-end": l.bottomEnd
+}, b = u(null);
+function x() {
+	let e = f(b);
+	if (!e) throw Error("useToast must be used inside a ToastProvider.");
+	return e;
+}
+function S({ children: t, duration: n = 5e3, max: r = 3, placement: i = "bottom-end", label: a = "Notifications", hotkey: o = "F8", dismissLabel: s = "Dismiss notification" }) {
+	let [u, f] = g([]), [x, S] = g(!1), [C, T] = g(!1), E = h(0), [D, O] = g(null), k = h(u), A = h(D), j = h(null), M = h(null);
+	p(() => {
+		k.current = u, A.current = D;
+	}), p(() => {
+		M.current?.focus(), M.current = null;
+	}, [u]);
+	let N = d((e) => {
+		let t = k.current.filter((t) => e === void 0 || t.id === e);
+		for (let e of t) e.onDismiss?.();
+		let n = [...A.current?.querySelectorAll("[data-toast]") ?? []], r = (e) => t.some((t) => t.id === e.dataset.toast);
+		if (n.some((e) => r(e) && e.contains(document.activeElement))) {
+			let e = n.filter((e) => !r(e)).at(-1), t = j.current?.isConnected ? j.current : null;
+			M.current = t ?? e ?? null, M.current !== e && T(!1);
+		}
+		f((t) => e === void 0 ? [] : t.filter((t) => t.id !== e));
+	}, []), P = d((e) => {
+		let t = e.id ?? `toast-${++E.current}`;
+		return f((n) => {
+			let r = n.findIndex((e) => e.id === t);
+			return r === -1 ? [...n, {
+				...e,
+				id: t
+			}] : n.map((n, i) => i === r ? {
+				...e,
+				id: t
+			} : n);
+		}), t;
+	}, []);
+	p(() => {
+		if (!D) return;
+		let e = (e) => {
+			if (e.key !== o) return;
+			let t = [...D.querySelectorAll("[data-toast]")].at(-1);
+			t && (e.preventDefault(), D.contains(document.activeElement) || (j.current = document.activeElement), t.focus());
+		}, t = (e) => {
+			let t = e.target.closest("[data-toast]");
+			e.key === "Escape" && t?.dataset.toast && (e.stopPropagation(), N(t.dataset.toast));
+		}, n = () => S(!0), r = () => S(!1), i = () => T(!0), a = (e) => {
+			D.contains(e.relatedTarget) || (T(!1), j.current = null);
+		};
+		return document.addEventListener("keydown", e), D.addEventListener("keydown", t), D.addEventListener("pointerenter", n), D.addEventListener("pointerleave", r), D.addEventListener("focusin", i), D.addEventListener("focusout", a), () => {
+			document.removeEventListener("keydown", e), D.removeEventListener("keydown", t), D.removeEventListener("pointerenter", n), D.removeEventListener("pointerleave", r), D.removeEventListener("focusin", i), D.removeEventListener("focusout", a);
+		};
+	}, [
+		D,
+		o,
+		N
+	]);
+	let F = m(() => ({
+		toast: P,
+		dismiss: N
+	}), [P, N]), I = u.slice(0, r), L = x || C;
+	return /* @__PURE__ */ v(b.Provider, {
+		value: F,
+		children: [t, /* @__PURE__ */ _(c, { children: /* @__PURE__ */ _("section", {
+			"aria-label": a,
+			className: e(l.viewport, y[i]),
+			children: /* @__PURE__ */ _("ol", {
+				ref: O,
+				className: l.list,
+				"aria-live": "polite",
+				"aria-relevant": "additions text",
+				children: I.map((e) => /* @__PURE__ */ _(w, {
+					toast: e,
+					duration: e.duration === void 0 ? n : e.duration,
+					paused: L,
+					dismissLabel: s,
+					onDismiss: () => N(e.id)
+				}, e.id))
+			})
+		}) })]
+	});
+}
+var C = {
+	neutral: null,
+	info: /* @__PURE__ */ _(r, {}),
+	success: /* @__PURE__ */ _(i, {}),
+	warning: /* @__PURE__ */ _(a, {}),
+	danger: /* @__PURE__ */ _(n, {})
+};
+function w({ toast: n, duration: r, paused: i, dismissLabel: a, onDismiss: c }) {
+	let { title: u, description: d, intent: f = "neutral", action: m } = n, g = h(r), y = h(c);
+	return p(() => {
+		y.current = c;
+	}), p(() => {
+		g.current = r;
+	}, [r, n]), p(() => {
+		if (i || g.current === null) return;
+		let e = Date.now(), t = setTimeout(() => y.current(), g.current);
+		return () => {
+			clearTimeout(t), g.current !== null && (g.current -= Date.now() - e);
+		};
+	}, [
+		i,
+		r,
+		n
+	]), /* @__PURE__ */ v("li", {
+		"data-toast": n.id,
+		role: f === "danger" ? "alert" : void 0,
+		tabIndex: -1,
+		className: e(l.toast, l[f]),
+		children: [
+			C[f] && /* @__PURE__ */ _("span", {
+				className: l.icon,
+				"aria-hidden": "true",
+				children: C[f]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: l.content,
+				children: [
+					/* @__PURE__ */ _("p", {
+						className: l.title,
+						children: u
+					}),
+					d !== void 0 && /* @__PURE__ */ _("div", {
+						className: l.description,
+						children: d
+					}),
+					m && /* @__PURE__ */ _(o, {
+						size: "sm",
+						variant: "secondary",
+						className: l.action,
+						onClick: () => {
+							m.onClick(), c();
+						},
+						children: m.label
+					})
+				]
+			}),
+			/* @__PURE__ */ _(s, {
+				label: a,
+				size: "sm",
+				className: l.dismiss,
+				onClick: c,
+				children: /* @__PURE__ */ _(t, {})
+			})
+		]
+	});
+}
+export { S as ToastProvider, x as useToast };
+
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","names":["styles","Toast_module_default","placementClasses","ToastContext","createContext","useToast","context","useContext","ToastProvider","toasts","setToasts","useState","hovered","setHovered","focused","setFocused","counter","useRef","list","setList","toastsRef","listRef","returnFocus","pendingFocus","useEffect","dismiss","useCallback","closing","id","toast","items","isClosing","item","remaining","previous","current","options","index","position","onHotkey","event","hotkey","newest","onEscape","onPointerEnter","onPointerLeave","onFocusIn","onFocusOut","value","useMemo","visible","max","paused","children","Portal","label","cn","placement","ToastItem","duration","icons","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","onDismissRef","onDismiss","start","timer","intent","title","description","action","Button","IconButton","dismissLabel","CloseIcon"],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { cn } from '@/utils/cn';\nimport { Button } from '../Button';\nimport { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Portal } from '../Portal';\nimport styles from './Toast.module.css';\n\nexport type ToastIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\nexport type ToastPlacement =\n  'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';\n\nexport interface ToastOptions {\n  /** Reuse an id to replace a toast that is still open. Generated when omitted. */\n  id?: string;\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default 'neutral' */\n  intent?: ToastIntent;\n  /**\n   * Milliseconds before it closes on its own. `null` keeps it open until dismissed. Defaults to\n   * the provider's `duration`.\n   */\n  duration?: number | null;\n  /** Button shown in the toast. Dismisses the toast after `onClick` runs. */\n  action?: { label: string; onClick: () => void };\n  /** Called when the toast closes, for any reason. */\n  onDismiss?: () => void;\n}\n\ninterface ToastData extends ToastOptions {\n  id: string;\n}\n\nexport interface ToastContextValue {\n  /** Shows a toast, or queues it while `max` toasts are visible. Returns its id. */\n  toast: (options: ToastOptions) => string;\n  /** Closes the toast with this id, or every toast when called without one. */\n  dismiss: (id?: string) => void;\n}\n\nconst placementClasses: Record<ToastPlacement, string | undefined> = {\n  'top-start': styles.topStart,\n  'top-center': styles.topCenter,\n  'top-end': styles.topEnd,\n  'bottom-start': styles.bottomStart,\n  'bottom-center': styles.bottomCenter,\n  'bottom-end': styles.bottomEnd,\n};\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\n/** Shows and dismisses toasts. Must be called inside a `ToastProvider`. */\nexport function useToast(): ToastContextValue {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('useToast must be used inside a ToastProvider.');\n  return context;\n}\n\nexport interface ToastProviderProps {\n  children?: ReactNode;\n  /**\n   * Default time, in milliseconds, before a toast closes on its own.\n   * @default 5000\n   */\n  duration?: number;\n  /**\n   * Toasts visible at once. The rest wait in a queue and appear as others close.\n   * @default 3\n   */\n  max?: number;\n  /** @default 'bottom-end' */\n  placement?: ToastPlacement;\n  /**\n   * Accessible name of the notification region.\n   * @default 'Notifications'\n   */\n  label?: string;\n  /**\n   * Key that moves focus to the newest toast, so keyboard users can reach its buttons.\n   * @default 'F8'\n   */\n  hotkey?: string;\n  /**\n   * Accessible name of the dismiss button of each toast.\n   * @default 'Dismiss notification'\n   */\n  dismissLabel?: string;\n}\n\n/**\n * Renders the toasts requested with `useToast`. Timers pause while the pointer is over the\n * toasts or focus is inside them, and new toasts are announced by a live region.\n */\nexport function ToastProvider({\n  children,\n  duration = 5000,\n  max = 3,\n  placement = 'bottom-end',\n  label = 'Notifications',\n  hotkey = 'F8',\n  dismissLabel = 'Dismiss notification',\n}: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastData[]>([]);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const counter = useRef(0);\n  const [list, setList] = useState<HTMLOListElement | null>(null);\n  const toastsRef = useRef(toasts);\n  const listRef = useRef(list);\n  const returnFocus = useRef<HTMLElement | null>(null);\n  const pendingFocus = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    toastsRef.current = toasts;\n    listRef.current = list;\n  });\n\n  useEffect(() => {\n    pendingFocus.current?.focus();\n    pendingFocus.current = null;\n  }, [toasts]);\n\n  const dismiss = useCallback((id?: string) => {\n    const closing = toastsRef.current.filter((toast) => id === undefined || toast.id === id);\n    for (const toast of closing) toast.onDismiss?.();\n\n    // Removing the toast that holds focus would drop it on the page body.\n    const items = [...(listRef.current?.querySelectorAll<HTMLElement>('[data-toast]') ?? [])];\n    const isClosing = (item: HTMLElement) =>\n      closing.some((toast) => toast.id === item.dataset.toast);\n    if (items.some((item) => isClosing(item) && item.contains(document.activeElement))) {\n      const remaining = items.filter((item) => !isClosing(item)).at(-1);\n      const previous = returnFocus.current?.isConnected ? returnFocus.current : null;\n      pendingFocus.current = previous ?? remaining ?? null;\n      if (pendingFocus.current !== remaining) setFocused(false);\n    }\n\n    setToasts((current) => (id === undefined ? [] : current.filter((toast) => toast.id !== id)));\n  }, []);\n\n  const toast = useCallback((options: ToastOptions) => {\n    const id = options.id ?? `toast-${++counter.current}`;\n    setToasts((current) => {\n      const index = current.findIndex((item) => item.id === id);\n      if (index === -1) return [...current, { ...options, id }];\n      return current.map((item, position) => (position === index ? { ...options, id } : item));\n    });\n    return id;\n  }, []);\n\n  useEffect(() => {\n    if (!list) return;\n\n    const onHotkey = (event: KeyboardEvent) => {\n      if (event.key !== hotkey) return;\n      const newest = [...list.querySelectorAll<HTMLElement>('[data-toast]')].at(-1);\n      if (!newest) return;\n      event.preventDefault();\n      if (!list.contains(document.activeElement)) {\n        returnFocus.current = document.activeElement as HTMLElement | null;\n      }\n      newest.focus();\n    };\n    const onEscape = (event: KeyboardEvent) => {\n      const item = (event.target as Element).closest<HTMLElement>('[data-toast]');\n      if (event.key !== 'Escape' || !item?.dataset.toast) return;\n      event.stopPropagation();\n      dismiss(item.dataset.toast);\n    };\n    const onPointerEnter = () => setHovered(true);\n    const onPointerLeave = () => setHovered(false);\n    const onFocusIn = () => setFocused(true);\n    const onFocusOut = (event: FocusEvent) => {\n      if (list.contains(event.relatedTarget as Node | null)) return;\n      setFocused(false);\n      returnFocus.current = null;\n    };\n\n    document.addEventListener('keydown', onHotkey);\n    list.addEventListener('keydown', onEscape);\n    list.addEventListener('pointerenter', onPointerEnter);\n    list.addEventListener('pointerleave', onPointerLeave);\n    list.addEventListener('focusin', onFocusIn);\n    list.addEventListener('focusout', onFocusOut);\n    return () => {\n      document.removeEventListener('keydown', onHotkey);\n      list.removeEventListener('keydown', onEscape);\n      list.removeEventListener('pointerenter', onPointerEnter);\n      list.removeEventListener('pointerleave', onPointerLeave);\n      list.removeEventListener('focusin', onFocusIn);\n      list.removeEventListener('focusout', onFocusOut);\n    };\n  }, [list, hotkey, dismiss]);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n  const visible = toasts.slice(0, max);\n  const paused = hovered || focused;\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <Portal>\n        <section aria-label={label} className={cn(styles.viewport, placementClasses[placement])}>\n          <ol\n            ref={setList}\n            className={styles.list}\n            aria-live=\"polite\"\n            aria-relevant=\"additions text\"\n          >\n            {visible.map((item) => (\n              <ToastItem\n                key={item.id}\n                toast={item}\n                duration={item.duration === undefined ? duration : item.duration}\n                paused={paused}\n                dismissLabel={dismissLabel}\n                onDismiss={() => dismiss(item.id)}\n              />\n            ))}\n          </ol>\n        </section>\n      </Portal>\n    </ToastContext.Provider>\n  );\n}\n\nconst icons: Record<ToastIntent, ReactNode> = {\n  neutral: null,\n  info: <InfoIcon />,\n  success: <SuccessIcon />,\n  warning: <WarningIcon />,\n  danger: <ErrorIcon />,\n};\n\ninterface ToastItemProps {\n  toast: ToastData;\n  duration: number | null;\n  paused: boolean;\n  dismissLabel: string;\n  onDismiss: () => void;\n}\n\nfunction ToastItem({ toast, duration, paused, dismissLabel, onDismiss }: ToastItemProps) {\n  const { title, description, intent = 'neutral', action } = toast;\n  const remaining = useRef(duration);\n  const onDismissRef = useRef(onDismiss);\n\n  useEffect(() => {\n    onDismissRef.current = onDismiss;\n  });\n\n  useEffect(() => {\n    remaining.current = duration;\n  }, [duration, toast]);\n\n  useEffect(() => {\n    if (paused || remaining.current === null) return;\n\n    const start = Date.now();\n    const timer = setTimeout(() => onDismissRef.current(), remaining.current);\n    return () => {\n      clearTimeout(timer);\n      if (remaining.current !== null) remaining.current -= Date.now() - start;\n    };\n  }, [paused, duration, toast]);\n\n  return (\n    <li\n      data-toast={toast.id}\n      role={intent === 'danger' ? 'alert' : undefined}\n      tabIndex={-1}\n      className={cn(styles.toast, styles[intent])}\n    >\n      {icons[intent] && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icons[intent]}\n        </span>\n      )}\n      <div className={styles.content}>\n        <p className={styles.title}>{title}</p>\n        {description !== undefined && <div className={styles.description}>{description}</div>}\n        {action && (\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            className={styles.action}\n            onClick={() => {\n              action.onClick();\n              onDismiss();\n            }}\n          >\n            {action.label}\n          </Button>\n        )}\n      </div>\n      <IconButton label={dismissLabel} size=\"sm\" className={styles.dismiss} onClick={onDismiss}>\n        <CloseIcon />\n      </IconButton>\n    </li>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Toast/Toast.module.js

@@ -0,0 +1,27 @@
+// src/components/Toast/Toast.module.css
+var e = "onyx-viewport-5YhJF", t = "onyx-topStart-0XZdj", n = "onyx-topCenter-zZRNd", r = "onyx-topEnd-FVWcz", i = "onyx-bottomStart-6E4W-", a = "onyx-bottomCenter-F5vQK", o = "onyx-bottomEnd-L7DQ-", s = "onyx-list-f-3zk", c = "onyx-toast-FLdHz", l = "onyx-toast-in-s3-NH", u = "onyx-info-eq5bQ", d = "onyx-success-Oy694", f = "onyx-warning-84GC8", p = "onyx-danger-zx8Tv", m = "onyx-icon-VwvE1", h = "onyx-content-U6Xwq", g = "onyx-title--H6R2", _ = "onyx-description--QwfC", v = "onyx-action--b4jg", y = "onyx-dismiss-fj0MP", b = "onyx-toast-in-top-jN2e1", x = {
+	viewport: e,
+	topStart: t,
+	topCenter: n,
+	topEnd: r,
+	bottomStart: i,
+	bottomCenter: a,
+	bottomEnd: o,
+	list: s,
+	toast: c,
+	toastIn: l,
+	info: u,
+	success: d,
+	warning: f,
+	danger: p,
+	icon: m,
+	content: h,
+	title: g,
+	description: _,
+	action: v,
+	dismiss: y,
+	toastInTop: b
+};
+export { v as action, a as bottomCenter, o as bottomEnd, i as bottomStart, h as content, p as danger, x as default, _ as description, y as dismiss, m as icon, u as info, s as list, d as success, g as title, c as toast, l as toastIn, b as toastInTop, n as topCenter, r as topEnd, t as topStart, e as viewport, f as warning };
+
+//# sourceMappingURL=Toast.module.js.map

package/dist/components/Toast/Toast.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.js","names":["viewport","topStart","topCenter","topEnd","bottomStart","bottomCenter","bottomEnd","list","toast","toastIn","info","success","warning","danger","icon","content","title","description","action","dismiss","toastInTop","Toast_module_default"],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":[".viewport {\n  position: fixed;\n  z-index: var(--z-index-toast);\n  display: flex;\n  width: min(var(--size-overlay-sm), calc(100% - var(--space-4) * 2));\n  max-height: 100dvh;\n  padding: var(--space-4);\n  pointer-events: none;\n  box-sizing: content-box;\n}\n\n.topStart,\n.topCenter,\n.topEnd {\n  top: 0;\n}\n\n.bottomStart,\n.bottomCenter,\n.bottomEnd {\n  bottom: 0;\n}\n\n.topStart,\n.bottomStart {\n  inset-inline-start: 0;\n}\n\n.topEnd,\n.bottomEnd {\n  inset-inline-end: 0;\n}\n\n.topCenter,\n.bottomCenter {\n  left: 50%;\n  translate: -50%;\n}\n\n.list {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n:is(.bottomStart, .bottomCenter, .bottomEnd) .list {\n  justify-content: flex-end;\n}\n\n.toast {\n  --toast-accent: var(--color-text-muted);\n\n  display: flex;\n  gap: var(--space-3);\n  align-items: flex-start;\n  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n  color: var(--color-text);\n  pointer-events: auto;\n  background-color: var(--color-surface-raised);\n  border: var(--border-width-thin) solid var(--color-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n  animation: toast-in var(--duration-normal) var(--easing-enter);\n}\n\n.toast:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-focus);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.info {\n  --toast-accent: var(--color-info-text);\n}\n\n.success {\n  --toast-accent: var(--color-success-text);\n}\n\n.warning {\n  --toast-accent: var(--color-warning-text);\n}\n\n.danger {\n  --toast-accent: var(--color-danger-text);\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  height: 1lh;\n  color: var(--toast-accent);\n}\n\n.icon > svg {\n  width: var(--size-icon-md);\n  height: var(--size-icon-md);\n}\n\n.content {\n  display: grid;\n  flex: 1;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n}\n\n.description {\n  color: var(--color-text-muted);\n}\n\n.action {\n  justify-self: start;\n  margin-top: var(--space-1);\n}\n\n.dismiss {\n  margin-block: calc(var(--space-1) * -1);\n}\n\n@keyframes toast-in {\n  from {\n    opacity: 0;\n    translate: 0 var(--space-2);\n  }\n}\n\n:is(.topStart, .topCenter, .topEnd) .toast {\n  animation-name: toast-in-top;\n}\n\n@keyframes toast-in-top {\n  from {\n    opacity: 0;\n    translate: 0 calc(var(--space-2) * -1);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './Toast.js';
+export type { ToastContextValue, ToastIntent, ToastOptions, ToastPlacement, ToastProviderProps, } from './Toast.js';

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

@@ -0,0 +1,40 @@
+import { ReactElement, ReactNode } from 'react';
+import { Placement } from '../../utils/floating.js';
+export type TooltipPlacement = Placement;
+export interface TooltipProps {
+    /** Text shown in the tooltip. Keep it short and never put interactive content in it. */
+    content: ReactNode;
+    /** The element that shows the tooltip. It must be focusable and accept a ref. */
+    children: ReactElement;
+    /** @default 'top' */
+    placement?: TooltipPlacement;
+    /**
+     * Milliseconds the pointer has to rest on the trigger before the tooltip opens. Keyboard focus
+     * opens it right away.
+     * @default 300
+     */
+    openDelay?: number;
+    /**
+     * Milliseconds before it closes after the pointer leaves, so it can be hovered.
+     * @default 100
+     */
+    closeDelay?: number;
+    /** Open state, for a controlled tooltip. */
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Gap between the trigger and the tooltip, in pixels.
+     * @default 8
+     */
+    offset?: number;
+    /** @default false */
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Short description of an element, shown on hover and focus and linked with
+ * `aria-describedby`. Escape closes it; moving the pointer onto it keeps it open.
+ */
+export declare function Tooltip({ content, children, placement, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, offset, disabled, className, }: TooltipProps): import('react').JSX.Element;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,63 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { mergeRefs as n } from "../../utils/mergeRefs.js";
+import { useEscapeKey as r } from "../../hooks/useEscapeKey.js";
+import { Portal as i } from "../Portal/Portal.js";
+import { useTimeout as a } from "../../hooks/useTimeout.js";
+import { useFloatingLayer as o } from "../../utils/floating.js";
+import { getElementRef as s } from "../../utils/getElementRef.js";
+import c from "./Tooltip.module.js";
+import { cloneElement as l, isValidElement as u, useId as d, useMemo as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+// src/components/Tooltip/Tooltip.tsx
+function g({ content: g, children: _, placement: v = "top", openDelay: y = 300, closeDelay: b = 100, open: x, defaultOpen: S = !1, onOpenChange: C, offset: w = 8, disabled: T = !1, className: E }) {
+	let D = d(), O = a(), [k, A] = e({
+		value: x,
+		defaultValue: S,
+		onChange: C
+	}), j = k && !T, { setReference: M, setFloating: N, floatingStyles: P, side: F } = o({
+		open: j,
+		placement: v,
+		gap: w
+	}), I = u(_) ? s(_) : void 0, L = f(() => n(M, I), [M, I]);
+	r(() => A(!1), { enabled: j });
+	let R = (e, t) => {
+		O.clear(), t <= 0 ? A(e) : O.set(() => A(e), t);
+	};
+	if (!u(_)) return _;
+	let z = _.props, B = l(_, {
+		ref: L,
+		"aria-describedby": t(z["aria-describedby"], !T && D) || void 0,
+		onPointerEnter: (e) => {
+			z.onPointerEnter?.(e), e.pointerType !== "touch" && R(!0, y);
+		},
+		onPointerLeave: (e) => {
+			z.onPointerLeave?.(e), R(!1, b);
+		},
+		onFocus: (e) => {
+			z.onFocus?.(e), R(!0, 0);
+		},
+		onBlur: (e) => {
+			z.onBlur?.(e), R(!1, 0);
+		}
+	});
+	return /* @__PURE__ */ h(p, { children: [B, j ? /* @__PURE__ */ m(i, { children: /* @__PURE__ */ m("div", {
+		ref: N,
+		id: D,
+		role: "tooltip",
+		"data-side": F,
+		className: t(c.tooltip, E),
+		style: P,
+		onPointerEnter: O.clear,
+		onPointerLeave: () => R(!1, b),
+		children: g
+	}) }) : !T && /* @__PURE__ */ m("span", {
+		id: D,
+		hidden: !0,
+		children: g
+	})] });
+}
+export { g as Tooltip };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["_Fragment","styles","Tooltip_module_default","Tooltip","openProp","id","useId","timeout","useTimeout","openState","setOpen","useControllableState","defaultOpen","onOpenChange","open","disabled","useFloatingLayer","offset","childElementRef","isValidElement","children","getElementRef","attachTrigger","useMemo","mergeRefs","setReference","schedule","delay","next","childProps","trigger","cloneElement","cn","event","openDelay","closeDelay","Fragment","Portal","setFloating","side","className","floatingStyles","content"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useId,\n  useMemo,\n  type FocusEvent,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { useEscapeKey } from '@/hooks/useEscapeKey';\nimport { useTimeout } from '@/hooks/useTimeout';\nimport { cn } from '@/utils/cn';\nimport { useFloatingLayer, type Placement } from '@/utils/floating';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { Portal } from '../Portal';\nimport styles from './Tooltip.module.css';\n\nexport type TooltipPlacement = Placement;\n\ninterface TriggerProps {\n  'aria-describedby'?: string;\n  onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n  onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n  onFocus?: (event: FocusEvent<HTMLElement>) => void;\n  onBlur?: (event: FocusEvent<HTMLElement>) => void;\n}\n\nexport interface TooltipProps {\n  /** Text shown in the tooltip. Keep it short and never put interactive content in it. */\n  content: ReactNode;\n  /** The element that shows the tooltip. It must be focusable and accept a ref. */\n  children: ReactElement;\n  /** @default 'top' */\n  placement?: TooltipPlacement;\n  /**\n   * Milliseconds the pointer has to rest on the trigger before the tooltip opens. Keyboard focus\n   * opens it right away.\n   * @default 300\n   */\n  openDelay?: number;\n  /**\n   * Milliseconds before it closes after the pointer leaves, so it can be hovered.\n   * @default 100\n   */\n  closeDelay?: number;\n  /** Open state, for a controlled tooltip. */\n  open?: boolean;\n  /** @default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Gap between the trigger and the tooltip, in pixels.\n   * @default 8\n   */\n  offset?: number;\n  /** @default false */\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * Short description of an element, shown on hover and focus and linked with\n * `aria-describedby`. Escape closes it; moving the pointer onto it keeps it open.\n */\nexport function Tooltip({\n  content,\n  children,\n  placement = 'top',\n  openDelay = 300,\n  closeDelay = 100,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  offset = 8,\n  disabled = false,\n  className,\n}: TooltipProps) {\n  const id = useId();\n  const timeout = useTimeout();\n  const [openState, setOpen] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const open = openState && !disabled;\n  const { setReference, setFloating, floatingStyles, side } = useFloatingLayer({\n    open,\n    placement,\n    gap: offset,\n  });\n\n  const childElementRef = isValidElement(children)\n    ? getElementRef<HTMLElement>(children)\n    : undefined;\n  const attachTrigger = useMemo(\n    () => mergeRefs(setReference, childElementRef),\n    [setReference, childElementRef],\n  );\n\n  useEscapeKey(() => setOpen(false), { enabled: open });\n\n  const schedule = (next: boolean, delay: number) => {\n    timeout.clear();\n    if (delay <= 0) setOpen(next);\n    else timeout.set(() => setOpen(next), delay);\n  };\n\n  if (!isValidElement<TriggerProps>(children)) return children;\n\n  const childProps = children.props;\n  const trigger = cloneElement(children, {\n    ref: attachTrigger,\n    'aria-describedby': cn(childProps['aria-describedby'], !disabled && id) || undefined,\n    onPointerEnter: (event: PointerEvent<HTMLElement>) => {\n      childProps.onPointerEnter?.(event);\n      if (event.pointerType !== 'touch') schedule(true, openDelay);\n    },\n    onPointerLeave: (event: PointerEvent<HTMLElement>) => {\n      childProps.onPointerLeave?.(event);\n      schedule(false, closeDelay);\n    },\n    onFocus: (event: FocusEvent<HTMLElement>) => {\n      childProps.onFocus?.(event);\n      schedule(true, 0);\n    },\n    onBlur: (event: FocusEvent<HTMLElement>) => {\n      childProps.onBlur?.(event);\n      schedule(false, 0);\n    },\n  } as TriggerProps & { ref: unknown });\n\n  return (\n    <>\n      {trigger}\n      {open ? (\n        <Portal>\n          <div\n            ref={setFloating}\n            id={id}\n            role=\"tooltip\"\n            data-side={side}\n            className={cn(styles.tooltip, className)}\n            style={floatingStyles}\n            onPointerEnter={timeout.clear}\n            onPointerLeave={() => schedule(false, closeDelay)}\n          >\n            {content}\n          </div>\n        </Portal>\n      ) : (\n        !disabled && (\n          <span id={id} hidden>\n            {content}\n          </span>\n        )\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmEA,SAAgBG,EAAQ,EACtB,YACA,aACA,eAAY,OACZ,eAAY,KACZ,gBAAa,KACb,MAAMC,GACN,iBAAc,IACd,iBACA,YAAS,GACT,cAAW,IACX,gBACe;CACf,IAAMC,IAAKC,EAAM,GACXC,IAAUC,EAAW,GACrB,CAACC,GAAWC,KAAWC,EAAqB;EAChD,OAAOP;EACP,cAAcQ;EACd,UAAUC;CACZ,CAAC,GACKC,IAAOL,KAAa,CAACM,GACrB,EAAE,iBAAc,gBAAa,mBAAgB,YAASC,EAAiB;EAC3E;EACA;EACA,KAAKC;CACP,CAAC,GAEKC,IAAkBC,EAAeC,CAAQ,IAC3CC,EAA2BD,CAAQ,IACnC,KAAA,GACEE,IAAgBC,QACdC,EAAUC,GAAcP,CAAe,GAC7C,CAACO,GAAcP,CAAe,CAChC;CAEA,QAAmBR,EAAQ,EAAK,GAAG,EAAE,SAASI,EAAK,CAAC;CAEpD,IAAMY,KAAY,GAAe,MAAkB;EAEjD,AADAnB,EAAQ,MAAM,GACVoB,KAAS,IAAGjB,EAAQkB,CAAI,IACvBrB,EAAQ,UAAUG,EAAQkB,CAAI,GAAGD,CAAK;CAC7C;CAEA,IAAI,CAACR,EAA6BC,CAAQ,GAAG,OAAOA;CAEpD,IAAMS,IAAaT,EAAS,OACtBU,IAAUC,EAAaX,GAAU;EACrC,KAAKE;EACL,oBAAoBU,EAAGH,EAAW,qBAAqB,CAACd,KAAYV,CAAE,KAAK,KAAA;EAC3E,iBAAiB,MAAqC;GAEpD,AADAwB,EAAW,iBAAiBI,CAAK,GAC7BA,EAAM,gBAAgB,WAASP,EAAS,IAAMQ,CAAS;EAC7D;EACA,iBAAiB,MAAqC;GAEpD,AADAL,EAAW,iBAAiBI,CAAK,GACjCP,EAAS,IAAOS,CAAU;EAC5B;EACA,UAAU,MAAmC;GAE3C,AADAN,EAAW,UAAUI,CAAK,GAC1BP,EAAS,IAAM,CAAC;EAClB;EACA,SAAS,MAAmC;GAE1C,AADAG,EAAW,SAASI,CAAK,GACzBP,EAAS,IAAO,CAAC;EACnB;CACF,CAAoC;CAEpC,OACE,kBAAA1B,GAAA,EAAA,UAAA,CACG8B,GACAhB,IACC,kBAACuB,GAAD,EAAA,UACE,kBAAC,OAAD;EACE,KAAKC;EACD;EACJ,MAAK;EACL,aAAWC;EACX,WAAWP,EAAG/B,EAAO,SAASuC,CAAS;EACvC,OAAOC;EACP,gBAAgBlC,EAAQ;EACxB,sBAAsBmB,EAAS,IAAOS,CAAU;EAE/C,UAAAO;CACE,CAAA,EACC,CAAA,IAER,CAAC3B,KACC,kBAAC,QAAD;EAAU;EAAI,QAAA;EACX,UAAA2B;CACG,CAAA,CAGV,EAAA,CAAA;AAEN"}

package/dist/components/Tooltip/Tooltip.module.js

@@ -0,0 +1,8 @@
+// src/components/Tooltip/Tooltip.module.css
+var e = "onyx-tooltip-UA7H9", t = "onyx-tooltip-in-mJXdG", n = {
+	tooltip: e,
+	tooltipIn: t
+};
+export { n as default, e as tooltip, t as tooltipIn };
+
+//# sourceMappingURL=Tooltip.module.js.map

package/dist/components/Tooltip/Tooltip.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.js","names":["tooltip","tooltipIn","Tooltip_module_default"],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".tooltip {\n  z-index: var(--z-index-tooltip);\n  max-width: var(--size-tooltip);\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-normal);\n  color: var(--color-text-inverse);\n  overflow-wrap: break-word;\n  background-color: var(--color-bg-inverse);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  animation: tooltip-in var(--duration-fast) var(--easing-enter);\n}\n\n@keyframes tooltip-in {\n  from {\n    opacity: 0;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip.js';
+export type { TooltipPlacement, TooltipProps } from './Tooltip.js';

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent, PolymorphicPropsWithRef } from '../../utils/polymorphic.js';
+export type VisuallyHiddenProps<As extends ElementType = 'span'> = PolymorphicPropsWithRef<As>;
+export declare const VisuallyHidden: PolymorphicComponent<"span">;

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,16 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./VisuallyHidden.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var i = n(function({ as: n = "span", className: i, ...a }, o) {
+	return /* @__PURE__ */ r(n, {
+		ref: o,
+		className: e(t.visuallyHidden, i),
+		...a
+	});
+});
+export { i as VisuallyHidden };
+
+//# sourceMappingURL=VisuallyHidden.js.map

package/dist/components/VisuallyHidden/VisuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.js","names":["styles","VisuallyHidden_module_default","VisuallyHidden","forwardRef","Component","props","cn","className"],"sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import { forwardRef, type ElementType } from 'react';\nimport { cn } from '@/utils/cn';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  PolymorphicPropsWithRef,\n} from '@/utils/polymorphic';\nimport styles from './VisuallyHidden.module.css';\n\nexport type VisuallyHiddenProps<As extends ElementType = 'span'> = PolymorphicPropsWithRef<As>;\n\nexport const VisuallyHidden = forwardRef<HTMLSpanElement, PolymorphicProps<'span'>>(\n  function VisuallyHidden({ as: Component = 'span', className, ...props }, ref) {\n    return <Component ref={ref} className={cn(styles.visuallyHidden, className)} {...props} />;\n  },\n) as PolymorphicComponent<'span'>;\n"],"mappings":";;;;;;AAWA,IAAaE,IAAiBC,EAC5B,SAAwB,EAAE,IAAIC,IAAY,QAAQ,cAAW,GAAGC,KAAS,GAAK;CAC5E,OAAO,kBAACD,GAAD;EAAgB;EAAK,WAAWE,EAAGN,EAAO,gBAAgBO,CAAS;EAAG,GAAIF;CAAQ,CAAA;AAC3F,CACF"}

package/dist/components/VisuallyHidden/VisuallyHidden.module.js

@@ -0,0 +1,5 @@
+// src/components/VisuallyHidden/VisuallyHidden.module.css
+var e = "onyx-visuallyHidden-KiAzg", t = { visuallyHidden: e };
+export { t as default, e as visuallyHidden };
+
+//# sourceMappingURL=VisuallyHidden.module.js.map

package/dist/components/VisuallyHidden/VisuallyHidden.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.module.js","names":["visuallyHidden","VisuallyHidden_module_default"],"sources":["../../../src/components/VisuallyHidden/VisuallyHidden.module.css"],"sourcesContent":[".visuallyHidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from './VisuallyHidden.js';
+export type { VisuallyHiddenProps } from './VisuallyHidden.js';

package/dist/hooks/index.d.ts

@@ -0,0 +1,10 @@
+export { useClickOutside } from './useClickOutside.js';
+export type { UseClickOutsideOptions } from './useClickOutside.js';
+export { useControllableState } from './useControllableState.js';
+export type { UseControllableStateProps } from './useControllableState.js';
+export { useEscapeKey } from './useEscapeKey.js';
+export type { UseEscapeKeyOptions } from './useEscapeKey.js';
+export { useFocusTrap } from './useFocusTrap.js';
+export type { UseFocusTrapOptions } from './useFocusTrap.js';
+export { useScrollLock } from './useScrollLock.js';
+export type { UseScrollLockOptions } from './useScrollLock.js';

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+export interface UseClickOutsideOptions {
+    /** @default true */
+    enabled?: boolean;
+}
+/**
+ * Calls `onClickOutside` when a pointer is pressed outside every element in `refs`. Include the
+ * element that toggles the layer, or pressing it closes and reopens the layer.
+ */
+export declare function useClickOutside(refs: RefObject<Element | null> | readonly RefObject<Element | null>[], onClickOutside: (event: PointerEvent) => void, { enabled }?: UseClickOutsideOptions): void;

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,21 @@
+import { useLatestRef as e } from "./useLatestRef.js";
+import { useEffect as t } from "react";
+// src/hooks/useClickOutside.ts
+function n(n, r, { enabled: i = !0 } = {}) {
+	let a = e(n), o = e(r);
+	t(() => {
+		if (!i) return;
+		let e = (e) => {
+			let t = e.composedPath();
+			[a.current].flat().some(({ current: e }) => e !== null && t.includes(e)) || o.current(e);
+		};
+		return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
+	}, [
+		i,
+		a,
+		o
+	]);
+}
+export { n as useClickOutside };
+
+//# sourceMappingURL=useClickOutside.js.map

package/dist/hooks/useClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.js","names":["useClickOutside","refsRef","useLatestRef","refs","onClickOutsideRef","onClickOutside","enabled","onPointerDown","path","event","current"],"sources":["../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\nimport { useLatestRef } from './useLatestRef';\n\nexport interface UseClickOutsideOptions {\n  /** @default true */\n  enabled?: boolean;\n}\n\n/**\n * Calls `onClickOutside` when a pointer is pressed outside every element in `refs`. Include the\n * element that toggles the layer, or pressing it closes and reopens the layer.\n */\nexport function useClickOutside(\n  refs: RefObject<Element | null> | readonly RefObject<Element | null>[],\n  onClickOutside: (event: PointerEvent) => void,\n  { enabled = true }: UseClickOutsideOptions = {},\n): void {\n  const refsRef = useLatestRef(refs);\n  const onClickOutsideRef = useLatestRef(onClickOutside);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const onPointerDown = (event: PointerEvent) => {\n      const path = event.composedPath();\n      const inside = [refsRef.current]\n        .flat()\n        .some(({ current }) => current !== null && path.includes(current));\n\n      if (!inside) onClickOutsideRef.current(event);\n    };\n\n    document.addEventListener('pointerdown', onPointerDown, true);\n    return () => document.removeEventListener('pointerdown', onPointerDown, true);\n  }, [enabled, refsRef, onClickOutsideRef]);\n}\n"],"mappings":";;;AAYA,SAAgBA,EACd,GACA,GACA,EAAE,aAAU,OAAiC,CAAC,GACxC;CACN,IAAMC,IAAUC,EAAaC,CAAI,GAC3BC,IAAoBF,EAAaG,CAAc;CAErD,QAAgB;EACd,IAAI,CAACC,GAAS;EAEd,IAAMC,KAAiB,MAAwB;GAC7C,IAAMC,IAAOC,EAAM,aAAa;GAKhC,AAJe,CAACR,EAAQ,OAAO,CAAC,CAC7B,KAAK,CAAC,CACN,MAAM,EAAE,iBAAcS,MAAY,QAAQF,EAAK,SAASE,CAAO,CAE7D,KAAQN,EAAkB,QAAQK,CAAK;EAC9C;EAGA,OADA,SAAS,iBAAiB,eAAeF,GAAe,EAAI,SAC/C,SAAS,oBAAoB,eAAeA,GAAe,EAAI;CAC9E,GAAG;EAACD;EAASL;EAASG;CAAiB,CAAC;AAC1C"}

package/dist/hooks/useControllableState.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface UseControllableStateProps<T> {
+    /** Controlled value. While it is not `undefined`, the hook never changes it on its own. */
+    value?: T;
+    /** Initial value while uncontrolled. */
+    defaultValue: T;
+    /** Called with every new value, controlled or not. */
+    onChange?: (value: T) => void;
+}
+export declare function useControllableState<T>({ value, defaultValue, onChange, }: UseControllableStateProps<T>): [T, Dispatch<SetStateAction<T>>];

package/dist/hooks/useControllableState.js

@@ -0,0 +1,16 @@
+import { useCallback as e, useState as t } from "react";
+// src/hooks/useControllableState.ts
+function n({ value: n, defaultValue: r, onChange: i }) {
+	let [a, o] = t(r), s = n !== void 0, c = s ? n : a;
+	return [c, e((e) => {
+		let t = typeof e == "function" ? e(c) : e;
+		Object.is(t, c) || (s || o(t), i?.(t));
+	}, [
+		c,
+		s,
+		i
+	])];
+}
+export { n as useControllableState };
+
+//# sourceMappingURL=useControllableState.js.map

package/dist/hooks/useControllableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.js","names":["useControllableState","uncontrolledValue","setUncontrolledValue","useState","defaultValue","isControlled","value","current","useCallback","resolved","next","onChange"],"sources":["../../src/hooks/useControllableState.ts"],"sourcesContent":["import { useCallback, useState, type Dispatch, type SetStateAction } from 'react';\n\nexport interface UseControllableStateProps<T> {\n  /** Controlled value. While it is not `undefined`, the hook never changes it on its own. */\n  value?: T;\n  /** Initial value while uncontrolled. */\n  defaultValue: T;\n  /** Called with every new value, controlled or not. */\n  onChange?: (value: T) => void;\n}\n\nexport function useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n}: UseControllableStateProps<T>): [T, Dispatch<SetStateAction<T>>] {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : uncontrolledValue;\n\n  const setValue = useCallback(\n    (next: SetStateAction<T>) => {\n      const resolved = typeof next === 'function' ? (next as (previous: T) => T)(current) : next;\n      if (Object.is(resolved, current)) return;\n\n      if (!isControlled) setUncontrolledValue(resolved);\n      onChange?.(resolved);\n    },\n    [current, isControlled, onChange],\n  );\n\n  return [current, setValue];\n}\n"],"mappings":";;AAWA,SAAgBA,EAAwB,EACtC,UACA,iBACA,eACiE;CACjE,IAAM,CAACC,GAAmBC,KAAwBC,EAASC,CAAY,GACjEC,IAAeC,MAAU,KAAA,GACzBC,IAAUF,IAAeC,IAAQL;CAavC,OAAO,CAACM,GAXSC,GACd,MAA4B;EAC3B,IAAMC,IAAW,OAAOC,KAAS,aAAcA,EAA4BH,CAAO,IAAIG;EACtF,AAAI,OAAO,GAAGD,GAAUF,CAAO,MAE1BF,KAAcH,EAAqBO,CAAQ,GAChDE,IAAWF,CAAQ;CACrB,GACA;EAACF;EAASF;EAAcM;CAAQ,CAGjB,CAAQ;AAC3B"}

package/dist/hooks/useEscapeKey.d.ts

@@ -0,0 +1,9 @@
+export interface UseEscapeKeyOptions {
+    /** @default true */
+    enabled?: boolean;
+}
+/**
+ * Calls `onEscape` when Escape is pressed. With several enabled at once, only the most recently
+ * enabled one responds, so nested overlays close one at a time.
+ */
+export declare function useEscapeKey(onEscape: (event: KeyboardEvent) => void, { enabled }?: UseEscapeKeyOptions): void;

package/dist/hooks/useEscapeKey.js

@@ -0,0 +1,21 @@
+import { useLatestRef as e } from "./useLatestRef.js";
+import { useEffect as t } from "react";
+// src/hooks/useEscapeKey.ts
+var n = [];
+function r(r, { enabled: i = !0 } = {}) {
+	let a = e(r);
+	t(() => {
+		if (!i) return;
+		let e = {};
+		n.push(e);
+		let t = (t) => {
+			t.key !== "Escape" || t.isComposing || t.defaultPrevented || n.at(-1) === e && a.current(t);
+		};
+		return document.addEventListener("keydown", t), () => {
+			document.removeEventListener("keydown", t), n.splice(n.indexOf(e), 1);
+		};
+	}, [i, a]);
+}
+export { r as useEscapeKey };
+
+//# sourceMappingURL=useEscapeKey.js.map

package/dist/hooks/useEscapeKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscapeKey.js","names":["layers","useEscapeKey","onEscapeRef","useLatestRef","onEscape","enabled","layer","onKeyDown","event"],"sources":["../../src/hooks/useEscapeKey.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { useLatestRef } from './useLatestRef';\n\nexport interface UseEscapeKeyOptions {\n  /** @default true */\n  enabled?: boolean;\n}\n\nconst layers: object[] = [];\n\n/**\n * Calls `onEscape` when Escape is pressed. With several enabled at once, only the most recently\n * enabled one responds, so nested overlays close one at a time.\n */\nexport function useEscapeKey(\n  onEscape: (event: KeyboardEvent) => void,\n  { enabled = true }: UseEscapeKeyOptions = {},\n): void {\n  const onEscapeRef = useLatestRef(onEscape);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const layer = {};\n    layers.push(layer);\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape' || event.isComposing || event.defaultPrevented) return;\n      if (layers.at(-1) === layer) onEscapeRef.current(event);\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n      layers.splice(layers.indexOf(layer), 1);\n    };\n  }, [enabled, onEscapeRef]);\n}\n"],"mappings":";;;AAQA,IAAMA,IAAmB,CAAC;AAM1B,SAAgBC,EACd,GACA,EAAE,aAAU,OAA8B,CAAC,GACrC;CACN,IAAMC,IAAcC,EAAaC,CAAQ;CAEzC,QAAgB;EACd,IAAI,CAACC,GAAS;EAEd,IAAMC,IAAQ,CAAC;EACf,EAAO,KAAKA,CAAK;EAEjB,IAAMC,KAAa,MAAyB;GAC1C,AAAIC,EAAM,QAAQ,YAAYA,EAAM,eAAeA,EAAM,oBACrDR,EAAO,GAAG,EAAE,MAAMM,KAAOJ,EAAY,QAAQM,CAAK;EACxD;EAGA,OADA,SAAS,iBAAiB,WAAWD,CAAS,SACjC;GAEX,AADA,SAAS,oBAAoB,WAAWA,CAAS,GACjDP,EAAO,OAAOA,EAAO,QAAQM,CAAK,GAAG,CAAC;EACxC;CACF,GAAG,CAACD,GAASH,CAAW,CAAC;AAC3B"}