@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/overlays/Popover/PopoverContent.d.ts

@@ -0,0 +1,41 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode, RefObject } from 'react';
+import { FocusTarget } from '../../../hooks/useFocusTrap';
+import { Size } from '../../../types/common';
+/** Popover width preset (max inline size) and padding. */
+export type PopoverSize = Size;
+export interface PopoverContentProps extends ComponentPropsWithRef<"div"> {
+    /** The popover's content: usually a `Popover.Title`, `Popover.Description`, and a body. */
+    children?: ReactNode;
+    /**
+     * Accessible name. Required when there is no `Popover.Title` (the title
+     * names the dialog through `aria-labelledby` otherwise).
+     */
+    "aria-label"?: string;
+    /**
+     * Element to focus when the popover opens: an element, a ref, or a
+     * function. A function runs after the content has rendered and been
+     * positioned, so it can pick a node inside the content (e.g.
+     * `() => listRef.current?.querySelector("[aria-selected=true]")`).
+     * Defaults to the first focusable element, then the popover itself.
+     */
+    initialFocus?: FocusTarget;
+    /** Same as `initialFocus`, as a ref. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Show a pointer arrow on the side facing the anchor. @default false */
+    showArrow?: boolean;
+    /** Show a "Close" icon button in the top-end corner. @default false */
+    showClose?: boolean;
+    /** Accessible name of the `showClose` button. @default "Close" */
+    closeLabel?: string;
+    /** Width preset and padding: `sm` 16rem, `md` 20rem, `lg` 30rem max width. @default "md" */
+    size?: PopoverSize;
+    /** Custom max width (any CSS length, or px as a number). Overrides the `size` width. */
+    maxWidth?: CSSProperties["maxWidth"];
+    /** Element to portal into. @default document.body */
+    container?: HTMLElement | null;
+}
+/**
+ * The floating dialog. Rendered in a portal, positioned against the anchor
+ * (or trigger) with flip and viewport clamping, and mounted only while open.
+ */
+export declare const PopoverContent: ({ container, ...props }: PopoverContentProps) => import("react").JSX.Element | null;

package/dist/components/overlays/Popover/PopoverContent.mjs

@@ -0,0 +1,158 @@
+import { resolveElement as e } from "../../../hooks/elementSource.mjs";
+import { OverlayLayerProvider as t, useOverlayLayer as n } from "../../../hooks/useOverlayLayer.mjs";
+import { useDismiss as r } from "../../../hooks/useDismiss.mjs";
+import { useFloatingPosition as i } from "../../../hooks/useFloatingPosition.mjs";
+import { getFocusable as a, useFocusTrap as o } from "../../../hooks/useFocusTrap.mjs";
+import { useMessages as s } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useMergedRef as c } from "../../../hooks/useMergedRef.mjs";
+import { cx as l } from "../../../utils/cx.mjs";
+import { Portal as u } from "../../utilities/Portal/Portal.mjs";
+import { IconButton as d } from "../../primitives/Button/Button.mjs";
+import { CloseIcon as f } from "../../primitives/Icon/icons.mjs";
+import { usePopoverContext as p } from "./PopoverContext.mjs";
+import m from "./Popover.module.css.mjs";
+import { useEffect as h, useLayoutEffect as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/overlays/Popover/PopoverContent.tsx
+var x = {
+	sm: m.sm,
+	md: m.md,
+	lg: m.lg
+}, S = ({ container: e, ...t }) => {
+	let n = p("Popover.Content");
+	return n.open ? /* @__PURE__ */ y(u, {
+		container: e,
+		children: /* @__PURE__ */ y(w, {
+			...t,
+			ctx: n
+		})
+	}) : null;
+}, C = 9, w = ({ ctx: u, children: p, initialFocus: S, initialFocusRef: w, showArrow: T = !1, showClose: E = !1, closeLabel: D, size: O = "md", maxWidth: k, className: A, style: j, ref: M, onKeyDown: N, onBlur: P, "aria-label": F, "aria-labelledby": I, "aria-describedby": L, ...R }) => {
+	let z = s(), B = D ?? z.popover.close, V = _(null), H = c(u.contentRef, M), U = u.anchorRef.current ? u.anchorRef : u.triggerRef, [W, G] = v(C);
+	g(() => {
+		let e = u.contentRef.current;
+		if (!T || !e) return;
+		let t = parseFloat(getComputedStyle(e).borderTopLeftRadius) || 0;
+		G(t + C);
+	}, [T, u.contentRef]);
+	let K = i(U, V, {
+		open: !0,
+		placement: u.placement,
+		offset: u.offset ?? (T ? 12 : 8),
+		arrowPadding: W
+	}), q = K.isPositioned, J = K.placement.split("-")[0], Y = K.arrow ? K.arrow.x ?? K.arrow.y ?? null : null, X = n({
+		active: !0,
+		modal: u.modal,
+		elements: () => [
+			V,
+			u.contentRef,
+			u.triggerRef,
+			u.anchorRef
+		]
+	}), Z = X.contains, Q = _(!1);
+	h(() => {
+		if (!q || u.modal || Q.current) return;
+		let t = u.contentRef.current;
+		t && (Q.current = !0, ((typeof S == "function" ? S() ?? null : e(S)) ?? w?.current ?? a(t)[0] ?? t).focus({ preventScroll: !0 }));
+	}, [
+		q,
+		u.modal,
+		u.contentRef,
+		w
+	]), o(u.contentRef, {
+		active: u.modal && q,
+		initialFocus: S,
+		initialFocusRef: w,
+		restoreFocus: !1,
+		layer: X
+	}), g(() => {
+		let { contentRef: e, triggerRef: t, returnFocusRef: n, restoreModeRef: r } = u, i = e.current;
+		return () => {
+			let e = r.current;
+			r.current = "auto";
+			let a = !!i && i.contains(document.activeElement), o = () => {
+				let e = t.current ?? n.current;
+				e?.isConnected && e.focus({ preventScroll: !0 });
+			};
+			e === "force" || e === "auto" && a ? o() : e === "deferred" && window.setTimeout(o, 0);
+		};
+	}, []);
+	let { setOpen: $, closeOnEscape: ee } = u;
+	r([], {
+		active: !0,
+		layer: X,
+		escapeKey: ee,
+		outsidePress: u.closeOnOutsidePress,
+		onDismiss: (e) => {
+			if (e.type === "keydown") {
+				$(!1, "force");
+				return;
+			}
+			let t = e.target instanceof Element ? e.target : null;
+			$(!1, t?.closest("a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]") ? "none" : "deferred");
+		}
+	});
+	let te = (e) => {
+		if (N?.(e), e.defaultPrevented || e.key !== "Tab" || u.modal) return;
+		let t = u.contentRef.current, n = u.triggerRef.current;
+		if (!t || !n) return;
+		let r = a(t), i = document.activeElement, o = r[0], s = r[r.length - 1];
+		if (e.shiftKey && (i === t || i === o)) e.preventDefault(), n.focus();
+		else if (!e.shiftKey && (i === s || r.length === 0)) {
+			let t = a(document.body).find((e) => !Z(e) && n.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING);
+			t && (e.preventDefault(), t.focus());
+		}
+	}, ne = (e) => {
+		if (P?.(e), !u.closeOnFocusOut || u.modal) return;
+		let t = e.relatedTarget;
+		t && !Z(t) && $(!1, "none");
+	}, re = I ?? (u.hasTitle && !F ? u.titleId : void 0), ie = l(u.hasDescription && u.descriptionId, L) || void 0;
+	return /* @__PURE__ */ y(t, {
+		layer: X,
+		children: /* @__PURE__ */ y("div", {
+			ref: V,
+			className: m.positioner,
+			style: K.style,
+			children: /* @__PURE__ */ b("div", {
+				role: "dialog",
+				id: u.contentId,
+				"aria-modal": u.modal ? !0 : void 0,
+				"aria-label": F,
+				"aria-labelledby": re,
+				"aria-describedby": ie,
+				tabIndex: -1,
+				...R,
+				ref: H,
+				className: l(m.content, x[O], E && m.hasClose, A),
+				style: k === void 0 ? j : {
+					...j,
+					maxWidth: k
+				},
+				"data-side": J,
+				"data-state": "open",
+				onKeyDown: te,
+				onBlur: ne,
+				children: [
+					T && /* @__PURE__ */ y("span", {
+						"aria-hidden": "true",
+						className: m.arrow,
+						"data-side": J,
+						style: Y === null ? void 0 : J === "top" || J === "bottom" ? { left: `calc(${Y}px - var(--space-3) / 2)` } : { top: `calc(${Y}px - var(--space-3) / 2)` }
+					}),
+					E && /* @__PURE__ */ y(d, {
+						"aria-label": B,
+						variant: "ghost",
+						tone: "neutral",
+						size: "sm",
+						className: m.closeButton,
+						onClick: () => $(!1, "force"),
+						children: /* @__PURE__ */ y(f, {})
+					}),
+					p
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { S as PopoverContent };

package/dist/components/overlays/Popover/PopoverContext.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=(0,e.createContext)(null);function n(n){let r=(0,e.useContext)(t);if(!r)throw Error(`${n} must be rendered inside <Popover>.`);return r}var r=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]`;exports.PRESS_FOCUSABLE=r,exports.PopoverContext=t,exports.usePopoverContext=n;

package/dist/components/overlays/Popover/PopoverContext.d.ts

@@ -0,0 +1,38 @@
+import { RefObject } from 'react';
+import { Placement } from '../../../types/common';
+/**
+ * How focus is handled when the popover closes.
+ * - `force`: always move focus back to the trigger (Escape, Close button, trigger toggle).
+ * - `auto`: move focus back only if it was inside the popover (e.g. a controlled close from a Save button).
+ * - `deferred`: move focus back after the current pointer interaction settles (outside press on a non-focusable spot).
+ * - `none`: leave focus where it is (focus moved out, or an outside press landed on another focusable element).
+ */
+export type FocusRestoreMode = "force" | "auto" | "deferred" | "none";
+export interface PopoverContextValue {
+    open: boolean;
+    /** Request a change. When closing, `restore` says how to handle focus. */
+    setOpen: (open: boolean, restore?: FocusRestoreMode) => void;
+    placement: Placement;
+    offset?: number;
+    modal: boolean;
+    closeOnOutsidePress: boolean;
+    closeOnEscape: boolean;
+    closeOnFocusOut: boolean;
+    triggerRef: RefObject<HTMLElement | null>;
+    anchorRef: RefObject<HTMLElement | null>;
+    contentRef: RefObject<HTMLElement | null>;
+    /** Element focused when the popover opened; the fallback focus-return target. */
+    returnFocusRef: RefObject<HTMLElement | null>;
+    restoreModeRef: RefObject<FocusRestoreMode>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    hasTitle: boolean;
+    hasDescription: boolean;
+    setHasTitle: (present: boolean) => void;
+    setHasDescription: (present: boolean) => void;
+}
+export declare const PopoverContext: import('react').Context<PopoverContextValue | null>;
+export declare function usePopoverContext(part: string): PopoverContextValue;
+/** Elements that take focus on press, so an outside press on them keeps focus there. */
+export declare const PRESS_FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]";

package/dist/components/overlays/Popover/PopoverContext.mjs

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/overlays/Popover/PopoverContext.ts
+var n = e(null);
+function r(e) {
+	let r = t(n);
+	if (!r) throw Error(`${e} must be rendered inside <Popover>.`);
+	return r;
+}
+var i = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]";
+//#endregion
+export { i as PRESS_FOCUSABLE, n as PopoverContext, r as usePopoverContext };

package/dist/components/overlays/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/components/overlays/Tooltip/Tooltip.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useDismiss.cjs.js"),n=require("../../../hooks/useFloatingPosition.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/cx.cjs.js"),ee=require("../../utilities/Portal/Portal.cjs.js"),te=require("../../primitives/Kbd/Kbd.cjs.js"),a=require("./Tooltip.module.css.cjs.js");let o=require("react"),s=require("react/jsx-runtime");function c(e,t){if(e!==`start`&&e!==`end`)return e;let n=t?getComputedStyle(t).direction===`rtl`:!1;return e===`end`===n?`left`:`right`}var l={neutral:a.default.neutral,primary:a.default.primary},u={delay:400,closeDelay:100,skipDelayDuration:300},d=(0,o.createContext)(u);function f({delay:e=u.delay,closeDelay:t=u.closeDelay,skipDelayDuration:n=u.skipDelayDuration,children:r}){return(0,s.jsx)(d.Provider,{value:{delay:e,closeDelay:t,skipDelayDuration:n},children:r})}var p={active:null,lastClosedAt:-1/0};function m(...e){return e.filter(Boolean).join(` `)||void 0}function ne(e){try{return e.matches(`:focus-visible`)}catch{return!0}}var re=globalThis.process?.env?.NODE_ENV!==`production`,h=`a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])`;function g({children:u,content:f,shortcut:g,placement:_=`top`,offset:v=8,open:y,defaultOpen:b=!1,onOpenChange:x,delay:ie,closeDelay:ae,disabled:S=!1,showArrow:C=!0,tone:w=`neutral`,relationship:T=`description`,className:oe,style:se,id:ce}){let E=(0,o.useContext)(d),D=ie??E.delay,O=ae??E.closeDelay,k=(0,o.useId)(),A=ce??`tooltip-${k}`,[le,j]=e.useControllableState({value:y,defaultValue:b,onChange:x}),M=le&&!S,N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,I]=(0,o.useState)(null),L=(0,o.useRef)(!1),R=(0,o.useRef)(!1),z=(0,o.useRef)(void 0),B=(0,o.useCallback)(()=>{z.current!==void 0&&clearTimeout(z.current),z.current=void 0},[]);(0,o.useEffect)(()=>B,[B]);let V=(0,o.useCallback)(e=>{B(),j(e)},[B,j]),H=()=>{B(),!S&&(p.active!==null||Date.now()-p.lastClosedAt<E.skipDelayDuration||D<=0?V(!0):z.current=setTimeout(()=>V(!0),D))},U=()=>{B(),!(L.current||R.current)&&(O<=0?V(!1):z.current=setTimeout(()=>V(!1),O))};(0,o.useEffect)(()=>{if(!M)return;let e={close:()=>V(!1)};return p.active&&p.active.close(),p.active=e,()=>{p.active===e&&(p.active=null),p.lastClosedAt=Date.now()}},[M,V]),t.useDismiss([N,P],{active:M,outsidePress:!1,onDismiss:()=>V(!1)});let[ue,de]=(0,o.useState)(()=>c(_,null));(0,o.useLayoutEffect)(()=>{M&&de(c(_,N.current))},[M,_]);let W=n.useFloatingPosition(N,F,{open:M,placement:ue,offset:v}),fe=W.placement.split(`-`)[0],G=W.arrow?W.arrow.x??W.arrow.y??null:null;(0,o.useEffect)(()=>{re&&F&&F.querySelector(h)&&console.warn("[Tooltip] `content` contains focusable elements. Tooltips can't receive focus, so keyboard users can't reach them. Use a Popover for interactive content.")},[F,f]);let K=o.Children.only(u),q=(0,o.useRef)(void 0);q.current=(0,o.isValidElement)(K)?K.props.ref:void 0;let pe=(0,o.useCallback)(e=>{N.current=e,r.assignRef(q.current,e)},[]),me=(0,o.useCallback)(e=>{P.current=e,I(e)},[]);if(!(0,o.isValidElement)(K))return u;let J=K.props,Y=f!=null&&f!==!1&&f!==``&&!S,X=g!==void 0&&g.length>0,Z=`${A}-content`,Q=`${A}-shortcut`,$={ref:pe};Y&&($.onPointerEnter=e=>{J.onPointerEnter?.(e),e.pointerType!==`touch`&&(L.current=!0,M?B():H())},$.onPointerLeave=e=>{J.onPointerLeave?.(e),e.pointerType!==`touch`&&(L.current=!1,M?U():R.current||B())},$.onFocus=e=>{J.onFocus?.(e),ne(e.currentTarget)&&(R.current=!0,M||H())},$.onBlur=e=>{J.onBlur?.(e),R.current&&(R.current=!1,!L.current&&V(!1))},T===`label`?($[`aria-labelledby`]=m(J[`aria-labelledby`],Z),X&&($[`aria-describedby`]=m(J[`aria-describedby`],Q))):$[`aria-describedby`]=m(J[`aria-describedby`],A));let he={...se,...W.style,"--_tooltip-offset":`${v}px`,...G===null?null:{"--_arrow-pos":`${G}px`}};return(0,s.jsxs)(s.Fragment,{children:[(0,o.cloneElement)(K,$),Y&&(0,s.jsx)(ee.Portal,{children:(0,s.jsx)(`div`,{ref:me,id:A,role:`tooltip`,hidden:!M,"data-side":fe,className:i.cx(a.default.tooltip,l[w],oe),style:he,onPointerEnter:e=>{e.pointerType!==`touch`&&(L.current=!0,B())},onPointerLeave:e=>{e.pointerType!==`touch`&&(L.current=!1,U())},children:(0,s.jsxs)(`div`,{className:a.default.bubble,children:[(0,s.jsx)(`span`,{id:Z,className:a.default.content,children:f}),X&&(0,s.jsx)(`span`,{id:Q,className:a.default.shortcut,children:(0,s.jsx)(te.KbdShortcut,{keys:g,size:`sm`,variant:`outline`})}),C&&(0,s.jsx)(`span`,{className:a.default.arrow,"aria-hidden":`true`})]})})})]})}exports.Tooltip=g,exports.TooltipProvider=f;

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

@@ -0,0 +1,104 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { Placement } from '../../../types/common';
+import { KbdShortcutProps } from '../../primitives/Kbd';
+/**
+ * Where the tooltip sits. Any `Placement`, or the logical `start` / `end`
+ * (the inline-start or inline-end side of the trigger), which follow the
+ * text direction: `end` is the right side in left-to-right layouts and the
+ * left side in right-to-left ones.
+ */
+export type TooltipPlacement = Placement | "start" | "end";
+/**
+ * Tooltip color. `neutral` (default) is an inverted bubble
+ * (`--color-on-neutral` on `--color-neutral`); `primary` is brand blue
+ * (`--color-on-primary` on `--color-primary`). Both are verified pairs.
+ */
+export type TooltipTone = "neutral" | "primary";
+/**
+ * How the tooltip names the trigger.
+ * - `description` (default): adds `aria-describedby`; the trigger keeps its own name.
+ * - `label`: adds `aria-labelledby`, so the tooltip text becomes the trigger's
+ *   accessible name. Use it for icon-only controls whose tooltip text *is* the
+ *   name, so screen readers don't hear it twice ("Save, Save").
+ */
+export type TooltipRelationship = "description" | "label";
+/** Props for `TooltipProvider`. */
+export interface TooltipProviderProps {
+    /** Default open delay for every tooltip inside, in ms. @default 400 */
+    delay?: number;
+    /** Default close delay for every tooltip inside, in ms. @default 100 */
+    closeDelay?: number;
+    /**
+     * After a tooltip closes, other tooltips open instantly (no `delay`) for this
+     * many ms, so scanning across a toolbar feels immediate. `0` turns it off.
+     * @default 300
+     */
+    skipDelayDuration?: number;
+    children?: ReactNode;
+}
+/**
+ * Optional. Sets shared timing for the tooltips inside it. Tooltips work
+ * without a provider, using the defaults.
+ */
+export declare function TooltipProvider({ delay, closeDelay, skipDelayDuration, children, }: TooltipProviderProps): import("react").JSX.Element;
+/** Props for `Tooltip`. */
+export interface TooltipProps {
+    /**
+     * The trigger: exactly one focusable element (a `Button`, `IconButton`,
+     * link, or input) that accepts a `ref`, event handlers, and `aria-*` props.
+     * Its existing handlers, ref, and `aria-describedby` / `aria-labelledby` are kept.
+     *
+     * Disabled elements fire no pointer or focus events, so a `disabled` button
+     * never shows a tooltip. Don't wrap it in a focusable `<span>`; use
+     * `aria-disabled="true"` on the button instead (and ignore its clicks), so
+     * it stays focusable and the tooltip can explain why it's unavailable.
+     */
+    children: ReactElement;
+    /**
+     * Short, plain text describing or naming the trigger. Never put interactive
+     * content (links, buttons, inputs) here: a tooltip can't receive focus.
+     * Use a Popover for that. A dev-mode warning fires if focusable content is found.
+     */
+    content: ReactNode;
+    /** Keys of a keyboard shortcut, rendered as a `KbdShortcut` after `content` (e.g. `["mod", "S"]`). */
+    shortcut?: KbdShortcutProps["keys"];
+    /**
+     * Preferred side and alignment, or a logical `start` / `end` side that
+     * follows the text direction. Flips to the opposite side when there isn't
+     * room. @default "top"
+     */
+    placement?: TooltipPlacement;
+    /** Gap between the trigger and the tooltip, in px. @default 8 */
+    offset?: number;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Delay before opening on hover or keyboard focus, in ms. Falls back to `TooltipProvider`, then 400. */
+    delay?: number;
+    /** Delay before closing after the pointer leaves, in ms; gives the pointer time to reach the tooltip. Falls back to `TooltipProvider`, then 100. */
+    closeDelay?: number;
+    /** Never open, and don't wire `aria-*` onto the trigger. @default false */
+    disabled?: boolean;
+    /** Show an arrow pointing at the trigger. @default true */
+    showArrow?: boolean;
+    /** Color. `neutral` is an inverted bubble; `primary` is brand blue. @default "neutral" */
+    tone?: TooltipTone;
+    /** How the tooltip relates to the trigger: `description` (`aria-describedby`) or `label` (`aria-labelledby`). @default "description" */
+    relationship?: TooltipRelationship;
+    /** Class name for the tooltip element. */
+    className?: string;
+    /** Style for the tooltip element. Positioning styles are applied on top. */
+    style?: CSSProperties;
+    /** Id for the tooltip element. Generated when omitted. */
+    id?: string;
+}
+/**
+ * A short, non-interactive label or description that appears on hover and on
+ * keyboard focus. Follows the WAI-ARIA tooltip pattern and WCAG 1.4.13: it
+ * can be dismissed with Escape, the pointer can move onto it, and it stays
+ * open until the pointer or focus leaves. Use `Popover` for interactive content.
+ */
+export declare function Tooltip({ children, content, shortcut, placement, offset, open: openProp, defaultOpen, onOpenChange, delay: delayProp, closeDelay: closeDelayProp, disabled, showArrow, tone, relationship, className, style, id: idProp, }: TooltipProps): import("react").JSX.Element;

package/dist/components/overlays/Tooltip/Tooltip.mjs

@@ -0,0 +1,153 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useDismiss as t } from "../../../hooks/useDismiss.mjs";
+import { useFloatingPosition as n } from "../../../hooks/useFloatingPosition.mjs";
+import { assignRef as r } from "../../../utils/refs.mjs";
+import { cx as ee } from "../../../utils/cx.mjs";
+import { Portal as te } from "../../utilities/Portal/Portal.mjs";
+import { KbdShortcut as ne } from "../../primitives/Kbd/Kbd.mjs";
+import i from "./Tooltip.module.css.mjs";
+import { Children as re, cloneElement as ie, createContext as a, isValidElement as o, useCallback as s, useContext as ae, useEffect as c, useId as oe, useLayoutEffect as se, useRef as l, useState as u } from "react";
+import { Fragment as ce, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/overlays/Tooltip/Tooltip.tsx
+function p(e, t) {
+	if (e !== "start" && e !== "end") return e;
+	let n = t ? getComputedStyle(t).direction === "rtl" : !1;
+	return e === "end" === n ? "left" : "right";
+}
+var m = {
+	neutral: i.neutral,
+	primary: i.primary
+}, h = {
+	delay: 400,
+	closeDelay: 100,
+	skipDelayDuration: 300
+}, g = a(h);
+function _({ delay: e = h.delay, closeDelay: t = h.closeDelay, skipDelayDuration: n = h.skipDelayDuration, children: r }) {
+	return /* @__PURE__ */ d(g.Provider, {
+		value: {
+			delay: e,
+			closeDelay: t,
+			skipDelayDuration: n
+		},
+		children: r
+	});
+}
+var v = {
+	active: null,
+	lastClosedAt: -Infinity
+};
+function y(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function le(e) {
+	try {
+		return e.matches(":focus-visible");
+	} catch {
+		return !0;
+	}
+}
+var ue = globalThis.process?.env?.NODE_ENV !== "production", b = "a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex=\"-1\"]), [contenteditable]:not([contenteditable=\"false\"])";
+function x({ children: a, content: h, shortcut: _, placement: x = "top", offset: S = 8, open: de, defaultOpen: fe = !1, onOpenChange: C, delay: w, closeDelay: T, disabled: E = !1, showArrow: pe = !0, tone: me = "neutral", relationship: he = "description", className: ge, style: _e, id: ve }) {
+	let D = ae(g), O = w ?? D.delay, k = T ?? D.closeDelay, ye = oe(), A = ve ?? `tooltip-${ye}`, [j, M] = e({
+		value: de,
+		defaultValue: fe,
+		onChange: C
+	}), N = j && !E, P = l(null), F = l(null), [I, be] = u(null), L = l(!1), R = l(!1), z = l(void 0), B = s(() => {
+		z.current !== void 0 && clearTimeout(z.current), z.current = void 0;
+	}, []);
+	c(() => B, [B]);
+	let V = s((e) => {
+		B(), M(e);
+	}, [B, M]), H = () => {
+		B(), !E && (v.active !== null || Date.now() - v.lastClosedAt < D.skipDelayDuration || O <= 0 ? V(!0) : z.current = setTimeout(() => V(!0), O));
+	}, U = () => {
+		B(), !(L.current || R.current) && (k <= 0 ? V(!1) : z.current = setTimeout(() => V(!1), k));
+	};
+	c(() => {
+		if (!N) return;
+		let e = { close: () => V(!1) };
+		return v.active && v.active.close(), v.active = e, () => {
+			v.active === e && (v.active = null), v.lastClosedAt = Date.now();
+		};
+	}, [N, V]), t([P, F], {
+		active: N,
+		outsidePress: !1,
+		onDismiss: () => V(!1)
+	});
+	let [xe, Se] = u(() => p(x, null));
+	se(() => {
+		N && Se(p(x, P.current));
+	}, [N, x]);
+	let W = n(P, I, {
+		open: N,
+		placement: xe,
+		offset: S
+	}), Ce = W.placement.split("-")[0], G = W.arrow ? W.arrow.x ?? W.arrow.y ?? null : null;
+	c(() => {
+		ue && I && I.querySelector(b) && console.warn("[Tooltip] `content` contains focusable elements. Tooltips can't receive focus, so keyboard users can't reach them. Use a Popover for interactive content.");
+	}, [I, h]);
+	let K = re.only(a), q = l(void 0);
+	q.current = o(K) ? K.props.ref : void 0;
+	let we = s((e) => {
+		P.current = e, r(q.current, e);
+	}, []), Te = s((e) => {
+		F.current = e, be(e);
+	}, []);
+	if (!o(K)) return a;
+	let J = K.props, Y = h != null && h !== !1 && h !== "" && !E, X = _ !== void 0 && _.length > 0, Z = `${A}-content`, Q = `${A}-shortcut`, $ = { ref: we };
+	Y && ($.onPointerEnter = (e) => {
+		J.onPointerEnter?.(e), e.pointerType !== "touch" && (L.current = !0, N ? B() : H());
+	}, $.onPointerLeave = (e) => {
+		J.onPointerLeave?.(e), e.pointerType !== "touch" && (L.current = !1, N ? U() : R.current || B());
+	}, $.onFocus = (e) => {
+		J.onFocus?.(e), le(e.currentTarget) && (R.current = !0, N || H());
+	}, $.onBlur = (e) => {
+		J.onBlur?.(e), R.current && (R.current = !1, !L.current && V(!1));
+	}, he === "label" ? ($["aria-labelledby"] = y(J["aria-labelledby"], Z), X && ($["aria-describedby"] = y(J["aria-describedby"], Q))) : $["aria-describedby"] = y(J["aria-describedby"], A));
+	let Ee = {
+		..._e,
+		...W.style,
+		"--_tooltip-offset": `${S}px`,
+		...G === null ? null : { "--_arrow-pos": `${G}px` }
+	};
+	return /* @__PURE__ */ f(ce, { children: [ie(K, $), Y && /* @__PURE__ */ d(te, { children: /* @__PURE__ */ d("div", {
+		ref: Te,
+		id: A,
+		role: "tooltip",
+		hidden: !N,
+		"data-side": Ce,
+		className: ee(i.tooltip, m[me], ge),
+		style: Ee,
+		onPointerEnter: (e) => {
+			e.pointerType !== "touch" && (L.current = !0, B());
+		},
+		onPointerLeave: (e) => {
+			e.pointerType !== "touch" && (L.current = !1, U());
+		},
+		children: /* @__PURE__ */ f("div", {
+			className: i.bubble,
+			children: [
+				/* @__PURE__ */ d("span", {
+					id: Z,
+					className: i.content,
+					children: h
+				}),
+				X && /* @__PURE__ */ d("span", {
+					id: Q,
+					className: i.shortcut,
+					children: /* @__PURE__ */ d(ne, {
+						keys: _,
+						size: "sm",
+						variant: "outline"
+					})
+				}),
+				pe && /* @__PURE__ */ d("span", {
+					className: i.arrow,
+					"aria-hidden": "true"
+				})
+			]
+		})
+	}) })] });
+}
+//#endregion
+export { x as Tooltip, _ as TooltipProvider };

package/dist/components/overlays/Tooltip/Tooltip.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_tooltip_r0vss_11`,t=`_bubble_r0vss_5`,n=`_content_r0vss_153`,r=`_neutral_r0vss_217`,i=`_primary_r0vss_229`,a=`_shortcut_r0vss_247`,o=`_arrow_r0vss_267`,s={tooltip:e,bubble:t,"tooltip-pop":`_tooltip-pop_r0vss_1`,content:n,neutral:r,primary:i,shortcut:a,arrow:o};exports.arrow=o,exports.bubble=t,exports.content=n,exports.default=s,exports.neutral=r,exports.primary=i,exports.shortcut=a,exports.tooltip=e;

package/dist/components/overlays/Tooltip/Tooltip.module.css.mjs

@@ -0,0 +1,13 @@
+//#region src/components/overlays/Tooltip/Tooltip.module.css
+var e = "_tooltip_r0vss_11", t = "_bubble_r0vss_5", n = "_content_r0vss_153", r = "_neutral_r0vss_217", i = "_primary_r0vss_229", a = "_shortcut_r0vss_247", o = "_arrow_r0vss_267", s = {
+	tooltip: e,
+	bubble: t,
+	"tooltip-pop": "_tooltip-pop_r0vss_1",
+	content: n,
+	neutral: r,
+	primary: i,
+	shortcut: a,
+	arrow: o
+};
+//#endregion
+export { o as arrow, t as bubble, n as content, s as default, r as neutral, i as primary, a as shortcut, e as tooltip };

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

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/components/primitives/Button/Button.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../../utils/announce.cjs.js"),r=require("../../feedback/Spinner/Spinner.cjs.js"),i=require("./Button.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s={solid:i.default.solid,soft:i.default.soft,outline:i.default.outline,ghost:i.default.ghost,link:i.default.link,inverse:i.default.inverse},c={neutral:i.default.neutral,primary:i.default.primary,accent:i.default.accent,success:i.default.success,warning:i.default.warning,danger:i.default.danger,info:i.default.info},l={xs:i.default.xs,sm:i.default.sm,md:i.default.md,lg:i.default.lg},u={none:i.default.radiusNone,xs:i.default.radiusXs,sm:i.default.radiusSm,md:i.default.radiusMd,lg:i.default.radiusLg,xl:i.default.radiusXl,"2xl":i.default.radius2xl,pill:i.default.radiusPill},d={0:i.default.gap0,1:i.default.gap1,2:i.default.gap2,3:i.default.gap3,4:i.default.gap4,5:i.default.gap5,6:i.default.gap6,8:i.default.gap8,10:i.default.gap10,12:i.default.gap12,16:i.default.gap16,20:i.default.gap20,24:i.default.gap24},f={xs:`sm`,sm:`sm`,md:`md`,lg:`lg`},p=(0,a.createContext)(null),m=({iconOnly:d=!1,variant:m,tone:h,size:g,radius:_,disabled:v,loading:y=!1,loadingText:b,loadingLabel:x,fullWidth:S,compact:C=!1,startIcon:w,endIcon:T,children:E,className:D,href:O,as:k,type:A,ref:j,onClick:M,"aria-disabled":N,"aria-busy":P,...F})=>{let I=e.useMessages(),L=x??I.button.loading,R=(0,a.useContext)(p),z=m??R?.variant??`solid`,B=h??R?.tone??`primary`,V=g??R?.size??`md`,H=_??R?.radius,U=v??R?.disabled??!1,W=N===!0||N===`true`,G=!d&&(S??R?.fullWidth??!1),K=U||W||y,q=y&&!d&&b!=null,J=t.cx(i.default.root,s[z],c[B],l[V],H?u[H]:i.default.radiusDefault,d&&i.default.iconOnly,C&&!d&&i.default.compact,G&&i.default.fullWidth,!K&&i.default.interactive,y&&i.default.loading,(U||W)&&i.default.disabled,D),Y=(0,a.useRef)(y);(0,a.useEffect)(()=>{y&&!Y.current&&n.announce(typeof b==`string`?b:L),Y.current=y},[y,b,L]);let X=e=>{if(K){e.preventDefault(),e.stopPropagation();return}M?.(e)},Z=(0,o.jsxs)(`span`,{className:i.default.inner,children:[(0,o.jsx)(`span`,{className:i.default.content,"aria-hidden":q?!0:void 0,children:d?(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:E}):(0,o.jsxs)(o.Fragment,{children:[w!=null&&(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:w}),E!=null&&(0,o.jsx)(`span`,{className:i.default.label,children:E}),T!=null&&(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:T})]})}),y&&(0,o.jsxs)(`span`,{className:i.default.loadingLayer,children:[(0,o.jsx)(r.Spinner,{decorative:!0,size:f[V],className:i.default.spinner}),q&&(0,o.jsx)(`span`,{className:i.default.label,children:b})]})]});if(k!==void 0){if(K){let{to:e,href:t,...n}=F;return(0,o.jsx)(`a`,{...n,ref:j,className:J,role:`link`,"aria-disabled":!0,"aria-busy":y?!0:P,onClick:X,children:Z})}return(0,o.jsx)(k,{...F,ref:j,className:J,type:A,"aria-disabled":N,"aria-busy":P,onClick:X,children:Z})}return O===void 0?(0,o.jsx)(`button`,{...F,ref:j,type:A??`button`,className:J,disabled:U,"aria-disabled":y?!0:N,"aria-busy":y?!0:P,onClick:X,children:Z}):(0,o.jsx)(`a`,{...F,ref:j,className:J,href:K?void 0:O,type:A,role:K?`link`:F.role,"aria-disabled":K?!0:N,"aria-busy":y?!0:P,onClick:X,children:Z})};function h(e){return(0,o.jsx)(m,{...e})}function g(e){return(0,o.jsx)(m,{...e,iconOnly:!0})}var _=({attached:e=!1,orientation:n=`horizontal`,gap:r=2,size:s,variant:c,tone:l,radius:u,disabled:f,fullWidth:m,className:h,children:g,..._})=>{let v=(0,a.useMemo)(()=>({size:s,variant:c,tone:l,radius:u,disabled:f,fullWidth:m}),[s,c,l,u,f,m]),y=n===`vertical`;return(0,o.jsx)(`div`,{role:`group`,"data-orientation":n,..._,className:t.cx(i.default.group,y&&i.default.groupVertical,e?y?i.default.attachedVertical:i.default.attachedHorizontal:d[r],e&&i.default.attached,m&&i.default.groupFullWidth,h),children:(0,o.jsx)(p.Provider,{value:v,children:g})})};exports.Button=h,exports.ButtonGroup=_,exports.IconButton=g;