@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/ToggleButton/ToggleButton.cjs

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
 const require_utils = require("../utils.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
-const require_ButtonGroupContext = require("../ButtonGroupContext-NtkVeDVE.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
+const require_ButtonGroupContext = require("../ButtonGroupContext-n0wa0q6H.cjs");
 const require_Button = require("../Button.cjs");
-const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-Ewc5Ixas.cjs");
+const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-CHA83ShW.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/ToggleButton/ToggleButton/ToggleButton.tsx
+// src/ToggleButton/ToggleButton/ToggleButton.tsx
 const stateStyles = ({ theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default"), isSelected }) => {
 	const c = theme.palette[color];
 	if (isSelected) return {
@@ -54,5 +54,4 @@ function ToggleButton({ value, isSelected, color, onChange, onClick, type = "but
 		...rest
 	});
 }
-//#endregion
 exports.ToggleButton = ToggleButton;

package/dist/ToggleButton/ToggleButton.d.cts

@@ -1,6 +1,5 @@
-import { i as ButtonProps } from "../index-DAwcmIjN.cjs";
-import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.cjs";
-//#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
+import { i as ButtonProps } from "../index-BzQze7eY.cjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.cjs";
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
   /** The value associated with the button inside a `ToggleButtonGroup`. */
   value: ToggleButtonValue;
@@ -10,5 +9,4 @@ interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'targ
   onChange?: (value: ToggleButtonValue) => void;
 }
 declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;
-//#endregion
 export { ToggleButton, ToggleButtonProps };

package/dist/ToggleButton/ToggleButton.d.mts

@@ -1,6 +1,5 @@
-import { i as ButtonProps } from "../index-CG_1uPrD.mjs";
-import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.mjs";
-//#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
+import { i as ButtonProps } from "../index-BChRNCld.mjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.mjs";
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
   /** The value associated with the button inside a `ToggleButtonGroup`. */
   value: ToggleButtonValue;
@@ -10,5 +9,4 @@ interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'targ
   onChange?: (value: ToggleButtonValue) => void;
 }
 declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;
-//#endregion
 export { ToggleButton, ToggleButtonProps };

package/dist/ToggleButton/ToggleButton.mjs

@@ -1,13 +1,13 @@
-import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
-import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
+import { a as src_exports, o as styled } from "../src-B-rNjHIL.mjs";
 import { alpha } from "../utils.mjs";
-import { r as useTheme } from "../theme-Z9_QludW.mjs";
-import { t as ButtonGroupContext } from "../ButtonGroupContext-DS-kl9lG.mjs";
+import { r as useTheme } from "../theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
+import { t as ButtonGroupContext } from "../ButtonGroupContext-DK9whWFt.mjs";
 import { Button } from "../Button.mjs";
-import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";
+import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-C0owas90.mjs";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/ToggleButton/ToggleButton/ToggleButton.tsx
+// src/ToggleButton/ToggleButton/ToggleButton.tsx
 const stateStyles = ({ theme, color = themeDefault(theme, "neutralColor", "default"), isSelected }) => {
 	const c = theme.palette[color];
 	if (isSelected) return {
@@ -53,5 +53,4 @@ function ToggleButton({ value, isSelected, color, onChange, onClick, type = "but
 		...rest
 	});
 }
-//#endregion
 export { ToggleButton };

package/dist/ToggleButton/ToggleButtonGroup.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
 const require_ButtonGroup = require("../ButtonGroup.cjs");
-const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-Ewc5Ixas.cjs");
+const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-CHA83ShW.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx
+// src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx
 const selectedEdgeStyles = ({ theme, orientation = "horizontal", color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
 	return { "& > [aria-pressed=\"true\"]:not(:first-of-type)": { [orientation === "vertical" ? "borderTopColor" : "borderLeftColor"]: theme.palette[color].main } };
 };
@@ -50,5 +50,4 @@ function ToggleButtonGroup({ value = null, onChange, isExclusive = false, color:
 		})
 	});
 }
-//#endregion
 exports.ToggleButtonGroup = ToggleButtonGroup;

package/dist/ToggleButton/ToggleButtonGroup.d.cts

@@ -1,6 +1,5 @@
-import { a as ButtonGroupProps } from "../index-CQfJZADG.cjs";
-import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.cjs";
-//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
+import { a as ButtonGroupProps } from "../index-hoHPfsc1.cjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.cjs";
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
   /** Selected value(s) - single when `isExclusive`, array otherwise. Controlled. */
   value?: ToggleButtonValue | ToggleButtonValue[] | null;
@@ -19,5 +18,4 @@ interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onC
  * through `ButtonGroup` as usual.
  */
 declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;
-//#endregion
 export { ToggleButtonGroup, ToggleButtonGroupProps };

package/dist/ToggleButton/ToggleButtonGroup.d.mts

@@ -1,6 +1,5 @@
-import { a as ButtonGroupProps } from "../index-BrgwkY6z.mjs";
-import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.mjs";
-//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
+import { a as ButtonGroupProps } from "../index-tOrd12AJ.mjs";
+import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.mjs";
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
   /** Selected value(s) - single when `isExclusive`, array otherwise. Controlled. */
   value?: ToggleButtonValue | ToggleButtonValue[] | null;
@@ -19,5 +18,4 @@ interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onC
  * through `ButtonGroup` as usual.
  */
 declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;
-//#endregion
 export { ToggleButtonGroup, ToggleButtonGroupProps };

package/dist/ToggleButton/ToggleButtonGroup.mjs

@@ -1,11 +1,11 @@
-import { o as styled } from "../src-DLGYOJMh.mjs";
-import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "../theme-Z9_QludW.mjs";
+import { o as styled } from "../src-B-rNjHIL.mjs";
+import { r as useTheme } from "../theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
 import { ButtonGroup } from "../ButtonGroup.mjs";
-import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";
+import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-C0owas90.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx
+// src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx
 const selectedEdgeStyles = ({ theme, orientation = "horizontal", color = themeDefault(theme, "neutralColor", "default") }) => {
 	return { "& > [aria-pressed=\"true\"]:not(:first-of-type)": { [orientation === "vertical" ? "borderTopColor" : "borderLeftColor"]: theme.palette[color].main } };
 };
@@ -49,5 +49,4 @@ function ToggleButtonGroup({ value = null, onChange, isExclusive = false, color:
 		})
 	});
 }
-//#endregion
 export { ToggleButtonGroup };

package/dist/ToggleButton.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_ToggleButtonGroupContext = require("./ToggleButtonGroupContext-Ewc5Ixas.cjs");
+const require_ToggleButtonGroupContext = require("./ToggleButtonGroupContext-CHA83ShW.cjs");
 const require_ToggleButton_ToggleButton = require("./ToggleButton/ToggleButton.cjs");
 const require_ToggleButton_ToggleButtonGroup = require("./ToggleButton/ToggleButtonGroup.cjs");
 exports.ToggleButton = require_ToggleButton_ToggleButton.ToggleButton;

package/dist/ToggleButton.d.cts

@@ -1,4 +1,4 @@
-import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-10jEsQdg.cjs";
+import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CA-4EgZL.cjs";
 import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.cjs";
 import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.cjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/ToggleButton.d.mts

@@ -1,4 +1,4 @@
-import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-10jEsQdg.mjs";
+import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CA-4EgZL.mjs";
 import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.mjs";
 import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.mjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/ToggleButton.mjs

@@ -1,4 +1,4 @@
-import { t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-DxIyy8ze.mjs";
+import { t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-C0owas90.mjs";
 import { ToggleButton } from "./ToggleButton/ToggleButton.mjs";
 import { ToggleButtonGroup } from "./ToggleButton/ToggleButtonGroup.mjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext };

package/dist/{ToggleButtonGroupContext-DxIyy8ze.mjs → ToggleButtonGroupContext-C0owas90.mjs}

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-//#region src/ToggleButton/ToggleButtonGroupContext.ts
+// src/ToggleButton/ToggleButtonGroupContext.ts
 const ToggleButtonGroupContext = createContext({});
-//#endregion
 export { ToggleButtonGroupContext as t };

package/dist/{ToggleButtonGroupContext-10jEsQdg.d.cts → ToggleButtonGroupContext-CA-4EgZL.d.cts}

@@ -1,4 +1,3 @@
-//#region src/ToggleButton/ToggleButtonGroupContext.d.ts
 type ToggleButtonValue = string | number;
 /**
  * Selection state provided by `ToggleButtonGroup` and consumed by `ToggleButton`.
@@ -11,5 +10,4 @@ interface ToggleButtonGroupContextValue {
   onToggle?: (value: ToggleButtonValue) => void;
 }
 declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue>;
-//#endregion
 export { ToggleButtonGroupContextValue as n, ToggleButtonValue as r, ToggleButtonGroupContext as t };

package/dist/{ToggleButtonGroupContext-10jEsQdg.d.mts → ToggleButtonGroupContext-CA-4EgZL.d.mts}

@@ -1,4 +1,3 @@
-//#region src/ToggleButton/ToggleButtonGroupContext.d.ts
 type ToggleButtonValue = string | number;
 /**
  * Selection state provided by `ToggleButtonGroup` and consumed by `ToggleButton`.
@@ -11,5 +10,4 @@ interface ToggleButtonGroupContextValue {
   onToggle?: (value: ToggleButtonValue) => void;
 }
 declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue>;
-//#endregion
 export { ToggleButtonGroupContextValue as n, ToggleButtonValue as r, ToggleButtonGroupContext as t };

package/dist/{ToggleButtonGroupContext-Ewc5Ixas.cjs → ToggleButtonGroupContext-CHA83ShW.cjs}

@@ -1,6 +1,5 @@
-//#region src/ToggleButton/ToggleButtonGroupContext.ts
+// src/ToggleButton/ToggleButtonGroupContext.ts
 const ToggleButtonGroupContext = (0, require("react").createContext)({});
-//#endregion
 Object.defineProperty(exports, "ToggleButtonGroupContext", {
 	enumerable: true,
 	get: function() {

package/dist/Tooltip.cjs

@@ -0,0 +1,268 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
+const require_Portal = require("./Portal.cjs");
+const require_useAnchoredPlacement = require("./useAnchoredPlacement-ee6KzG3t.cjs");
+const require_useMergedRefs = require("./useMergedRefs-BtctsnmX.cjs");
+const require_getTooltipOrigins = require("./getTooltipOrigins-8b5zQafY.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/Tooltip/hooks/useTooltip.ts
+const isKeyboardFocus = (event) => {
+	try {
+		return event.target.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+};
+/**
+* The state of a tooltip: whether it is open (its own, or its owner's), the timers that open and
+* close it, and the handlers its child and the tooltip itself take. Opening and closing are
+* delayed; moving from the child onto the tooltip does not close it, so its text can be read and
+* selected (WCAG 1.4.13); Escape closes it at once.
+*/
+function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDelay, leaveDelay, enterTouchDelay, leaveTouchDelay, shouldOpenOnHover, shouldOpenOnFocus, shouldOpenOnTouch }) {
+	const [isOpen, setIsOpen] = require_useControlled.useControlled({
+		controlled: isOpenProp,
+		default: defaultOpen
+	});
+	const timer = (0, react.useRef)(void 0);
+	const latest = (0, react.useRef)({
+		isOpen,
+		isOpenProp,
+		onOpen,
+		onClose
+	});
+	(0, react.useEffect)(() => {
+		latest.current = {
+			isOpen,
+			isOpenProp,
+			onOpen,
+			onClose
+		};
+	});
+	const clear = (0, react.useCallback)(() => window.clearTimeout(timer.current), []);
+	const ask = (0, react.useCallback)((next, event, delay) => {
+		clear();
+		timer.current = window.setTimeout(() => {
+			const current = latest.current;
+			if (current.isOpen === next) return;
+			if (current.isOpenProp === void 0) setIsOpen(next);
+			(next ? current.onOpen : current.onClose)?.(event);
+		}, delay);
+	}, [clear, setIsOpen]);
+	(0, react.useEffect)(() => clear, [clear]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return void 0;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") ask(false, event, 0);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen, ask]);
+	return {
+		isOpen,
+		childHandlers: {
+			onMouseEnter: (event) => {
+				if (shouldOpenOnHover) ask(true, event, enterDelay);
+			},
+			onMouseLeave: (event) => {
+				if (shouldOpenOnHover) ask(false, event, leaveDelay);
+			},
+			onFocus: (event) => {
+				if (shouldOpenOnFocus && isKeyboardFocus(event)) ask(true, event, enterDelay);
+			},
+			onBlur: (event) => {
+				if (shouldOpenOnFocus) ask(false, event, leaveDelay);
+			},
+			onTouchStart: (event) => {
+				if (shouldOpenOnTouch) ask(true, event, enterTouchDelay);
+			},
+			onTouchEnd: (event) => {
+				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			},
+			onTouchCancel: (event) => {
+				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			}
+		},
+		surfaceHandlers: {
+			onMouseEnter: () => {
+				if (shouldOpenOnHover) clear();
+			},
+			onMouseLeave: (event) => {
+				if (shouldOpenOnHover) ask(false, event, leaveDelay);
+			}
+		}
+	};
+}
+// src/Tooltip/Tooltip.tsx
+const MARGIN = 8;
+const GAP = 8;
+const ARROW = 8;
+const TooltipSurface = require_src.styled("div", {
+	name: "Tooltip",
+	label: "Tooltip",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"layer",
+		"borderRadius",
+		"bg",
+		"textColor"
+	])
+})(({ theme, layer, borderRadius, bg, textColor }) => ({
+	position: "fixed",
+	top: 0,
+	left: 0,
+	visibility: "hidden",
+	zIndex: theme.zOrder[layer],
+	boxSizing: "border-box",
+	maxWidth: "20rem",
+	padding: `${theme.space[.5]} ${theme.space[1]}`,
+	borderRadius: require_getSurfaceRadius.getSurfaceRadius(theme, borderRadius),
+	boxShadow: theme.shadows[4],
+	backgroundColor: (0, require_src.src_exports.get)(theme, `background.${bg ?? "modal"}`),
+	color: (0, require_src.src_exports.get)(theme, `text.${textColor ?? require_themeDefault.themeDefault(theme, "textColor", "initial")}`),
+	fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+	fontSize: theme.fontSizes[0],
+	lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
+	overflowWrap: "break-word"
+}));
+const TooltipArrow = require_src.styled("span", {
+	name: "Tooltip",
+	slot: "arrow",
+	label: "TooltipArrow"
+})({
+	position: "absolute",
+	width: ARROW,
+	height: ARROW,
+	backgroundColor: "inherit",
+	transform: "rotate(45deg)",
+	pointerEvents: "none"
+});
+const getArrow = ({ anchorRect, surfaceSize, top, left }) => {
+	const { width, height } = surfaceSize;
+	if (top + height <= anchorRect.top + 1 || top >= anchorRect.bottom - 1) {
+		const side = top + height <= anchorRect.top + 1 ? "top" : "bottom";
+		const middle = anchorRect.left + anchorRect.width / 2 - left;
+		return {
+			side,
+			offset: Math.min(Math.max(middle, ARROW), width - ARROW)
+		};
+	}
+	const side = left + width <= anchorRect.left + 1 ? "left" : "right";
+	const middle = anchorRect.top + anchorRect.height / 2 - top;
+	return {
+		side,
+		offset: Math.min(Math.max(middle, ARROW), height - ARROW)
+	};
+};
+const isSameArrow = (a, b) => a !== null && a.side === b.side && a.offset === b.offset;
+const getArrowStyle = ({ side, offset }) => {
+	const half = ARROW / 2;
+	if (side === "top") return {
+		bottom: -4,
+		left: offset - half
+	};
+	if (side === "bottom") return {
+		top: -4,
+		left: offset - half
+	};
+	if (side === "left") return {
+		right: -4,
+		top: offset - half
+	};
+	return {
+		left: -4,
+		top: offset - half
+	};
+};
+/**
+* @description A short description of one child, shown on hover, keyboard focus and a long touch -
+* a `role="tooltip"` in a `Portal`, placed beside its child and flipped for want of room. The
+* child is named by it (`aria-label`) or described by it (`aria-describedby`, with
+* `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
+* on the tooltip itself, closes on Escape, and never takes or traps the focus.
+*/
+function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, "data-testid": dataTestid }) {
+	const dp = require_theme.useDefaultProps("Tooltip");
+	const placement = placementProp ?? dp.placement ?? "top";
+	const hasArrow = hasArrowProp ?? dp.hasArrow ?? false;
+	const shouldDescribeChild = shouldDescribeChildProp ?? dp.shouldDescribeChild ?? false;
+	const layer = layerProp ?? dp.layer ?? "tooltip";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const bg = bgProp ?? dp.bg;
+	const textColor = textColorProp ?? dp.textColor;
+	const id = (0, react.useId)();
+	const { isOpen, childHandlers, surfaceHandlers } = useTooltip({
+		isOpen: isOpenProp,
+		defaultOpen,
+		onOpen,
+		onClose,
+		enterDelay: enterDelayProp ?? dp.enterDelay ?? 100,
+		leaveDelay: leaveDelayProp ?? dp.leaveDelay ?? 0,
+		enterTouchDelay: enterTouchDelayProp ?? dp.enterTouchDelay ?? 700,
+		leaveTouchDelay: leaveTouchDelayProp ?? dp.leaveTouchDelay ?? 1500,
+		shouldOpenOnHover: shouldOpenOnHoverProp ?? dp.shouldOpenOnHover ?? true,
+		shouldOpenOnFocus: shouldOpenOnFocusProp ?? dp.shouldOpenOnFocus ?? true,
+		shouldOpenOnTouch: shouldOpenOnTouchProp ?? dp.shouldOpenOnTouch ?? true
+	});
+	const isShown = isOpen && title !== void 0 && title !== null && title !== "";
+	const anchorRef = (0, react.useRef)(null);
+	const surfaceRef = (0, react.useRef)(null);
+	const own = children.props;
+	const ref = require_useMergedRefs.useMergedRefs(anchorRef, own.ref);
+	const [arrow, setArrow] = (0, react.useState)(null);
+	const getOrigins = (0, react.useCallback)((context) => require_getTooltipOrigins.getTooltipOrigins(require_getTooltipOrigins.resolveTooltipPlacement(placement, context), context.isRtl), [placement]);
+	const onPlaced = (0, react.useCallback)((placed) => {
+		if (!hasArrow) return;
+		const next = getArrow(placed);
+		setArrow((current) => isSameArrow(current, next) ? current : next);
+	}, [hasArrow]);
+	require_useAnchoredPlacement.useAnchoredPlacement({
+		isOpen: isShown,
+		anchorRef,
+		surfaceRef,
+		getOrigins,
+		margin: MARGIN,
+		gap: GAP,
+		onPlaced
+	});
+	const handlers = Object.fromEntries(Object.entries(childHandlers).map(([name, handler]) => [name, (event) => {
+		own[name]?.(event);
+		handler(event);
+	}]));
+	const ownDescription = own["aria-describedby"];
+	const names = typeof title === "string" && own["aria-label"] === void 0 && own["aria-labelledby"] === void 0 ? { "aria-label": title } : {};
+	const ariaProps = shouldDescribeChild ? { "aria-describedby": isShown ? [ownDescription, id].filter(Boolean).join(" ") : ownDescription } : names;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.cloneElement)(children, {
+		...handlers,
+		...ariaProps,
+		ref
+	}), isShown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipSurface, {
+		...slotProps?.root,
+		as: slots?.root,
+		ref: surfaceRef,
+		id,
+		role: "tooltip",
+		layer,
+		borderRadius,
+		bg,
+		textColor,
+		className: [slotProps?.root?.className, className].filter(Boolean).join(" ") || void 0,
+		"data-testid": dataTestid ?? slotProps?.root?.["data-testid"],
+		...surfaceHandlers,
+		children: [title, hasArrow && arrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrow, {
+			...slotProps?.arrow,
+			as: slots?.arrow,
+			style: {
+				...slotProps?.arrow?.style,
+				...getArrowStyle(arrow)
+			},
+			"aria-hidden": "true"
+		}) : null]
+	}) })] });
+}
+exports.Tooltip = Tooltip;

package/dist/Tooltip.d.cts

@@ -0,0 +1,74 @@
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { ElementType, HTMLAttributes, ReactElement, ReactNode, SyntheticEvent } from "react";
+/** A side of its child a tooltip sits on - and, after the dash, which end of that side it lines up with. */
+type FixedTooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/** A fixed placement, or `auto` - the side with the most room, chosen as it is placed. */
+type TooltipPlacement = FixedTooltipPlacement | 'auto' | 'auto-start' | 'auto-end';
+interface TooltipSlots {
+  root?: ElementType;
+  arrow?: ElementType;
+}
+type SlotProps = HTMLAttributes<HTMLElement> & {
+  'data-testid'?: string;
+};
+interface TooltipSlotProps {
+  root?: SlotProps;
+  arrow?: SlotProps;
+}
+interface TooltipProps {
+  /** The one element the tooltip is about - it holds a `ref` and takes the handlers. */
+  children: ReactElement;
+  /** What the tooltip says. Nothing says no tooltip. */
+  title?: ReactNode;
+  /** The side of the child it sits on, and the end it lines up with; `auto` takes the side with the most room. Flips for want of room. Default: `'top'`. */
+  placement?: TooltipPlacement;
+  /** Swaps the element a part is drawn as - it keeps its styles. `root` is the surface. */
+  slots?: TooltipSlots;
+  /** Props for a part: they are put first, so the tooltip's own `ref`, `id`, `role`, pointer handlers and the arrow's position win. */
+  slotProps?: TooltipSlotProps;
+  /** Draws an arrow towards the child. Default: `false`. */
+  hasArrow?: boolean;
+  /** How long the pointer or focus rests on the child before it opens, in milliseconds. Default: `100`. */
+  enterDelay?: number;
+  /** How long after they leave before it closes. Default: `0`. */
+  leaveDelay?: number;
+  /** How long a touch is held before it opens. Default: `700`. */
+  enterTouchDelay?: number;
+  /** How long after a touch ends before it closes. Default: `1500`. */
+  leaveTouchDelay?: number;
+  /** Describes the child (`aria-describedby`, while open) instead of naming it (`aria-label`). Default: `false`. */
+  shouldDescribeChild?: boolean;
+  /** Whether it is shown. Controlled with `onOpen` and `onClose`. */
+  isOpen?: boolean;
+  /** Whether it is shown at first, when uncontrolled. Default: `false`. */
+  defaultOpen?: boolean;
+  /** Fired when it asks to open. */
+  onOpen?: (event: Event | SyntheticEvent) => void;
+  /** Fired when it asks to close. */
+  onClose?: (event: Event | SyntheticEvent) => void;
+  /** Opens on hover. Default: `true`. */
+  shouldOpenOnHover?: boolean;
+  /** Opens on keyboard focus. Default: `true`. */
+  shouldOpenOnFocus?: boolean;
+  /** Opens on a long touch. Default: `true`. */
+  shouldOpenOnTouch?: boolean;
+  /** Corner radius, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
+  /** Background, resolves against `theme.background`. Default: `'modal'`. */
+  bg?: keyof Theme['background'];
+  /** Text color, resolves against `theme.text`. Default: `theme.defaults.textColor`, else `'initial'`. */
+  textColor?: keyof Theme['text'];
+  /** Stacking layer from `theme.zOrder`. Default: `'tooltip'`. */
+  layer?: keyof Theme['zOrder'];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A short description of one child, shown on hover, keyboard focus and a long touch -
+ * a `role="tooltip"` in a `Portal`, placed beside its child and flipped for want of room. The
+ * child is named by it (`aria-label`) or described by it (`aria-describedby`, with
+ * `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
+ * on the tooltip itself, closes on Escape, and never takes or traps the focus.
+ */
+declare function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isOpen: isOpenProp, defaultOpen, onOpen, onClose, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, 'data-testid': dataTestid }: Readonly<TooltipProps>): import("react").JSX.Element;
+export { Tooltip, type TooltipPlacement, TooltipProps, TooltipSlotProps, TooltipSlots };