@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.1

package/dist/components/Toast/Toast.js

@@ -0,0 +1,314 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/Toast/Toast.tsx
+/**
+* Creates an isolated toast manager for a scoped `<Toaster />` (a preview
+* frame, a second stack with different placement, tests). Pass it to that
+* Toaster's `toastManager` prop and call `manager.add/close/update/promise`
+* on it directly — the `toast` helpers always target the built-in default
+* manager, not scoped ones.
+*/
+const createToastManager = Toast.createToastManager;
+const viewportBaseClasses = "fixed z-[60] w-[calc(100vw-2rem)] sm:w-[22.5rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const viewportPositionClasses = {
+	"top-left": "top-4 left-4 sm:top-8 sm:left-8",
+	"top-center": "top-4 right-0 left-0 mx-auto sm:top-8",
+	"top-right": "top-4 right-4 sm:top-8 sm:right-8",
+	"bottom-left": "bottom-4 left-4 sm:bottom-8 sm:left-8",
+	"bottom-center": "bottom-4 right-0 left-0 mx-auto sm:bottom-8",
+	"bottom-right": "bottom-4 right-4 sm:bottom-8 sm:right-8"
+};
+const swipeDirections = {
+	"top-left": ["up", "left"],
+	"top-center": ["up"],
+	"top-right": ["up", "right"],
+	"bottom-left": ["down", "left"],
+	"bottom-center": ["down"],
+	"bottom-right": ["down", "right"]
+};
+const rootBaseClasses = "[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] absolute right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full select-none h-[var(--height)] data-expanded:h-[var(--toast-height)] rounded-md border border-border bg-background text-foreground shadow-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-ending-style:opacity-0 data-limited:opacity-0 after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] motion-safe:[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]";
+const rootBottomClasses = "bottom-0 origin-bottom after:top-full [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]";
+const rootTopClasses = "top-0 origin-top after:bottom-full [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] data-starting-style:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]";
+const contentClasses = "flex h-full items-start gap-3 overflow-hidden p-4 motion-safe:[transition:opacity_250ms_cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100";
+const iconSlotClasses = "flex shrink-0 items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5";
+const titleClasses = "m-0 font-sans text-sm font-semibold text-foreground";
+const descriptionClasses = "m-0 font-sans text-sm text-muted-foreground";
+const actionClasses = "inline-flex h-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-background px-2.5 font-sans text-xs font-semibold whitespace-nowrap text-foreground transition-colors duration-150 hover:bg-muted active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const closeClasses = "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+function SuccessIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "m8.5 12.4 2.4 2.4 4.6-5.2" })]
+	});
+}
+function ErrorIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "m9.5 9.5 5 5m0-5-5 5" })]
+	});
+}
+function WarningIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+		]
+	});
+}
+function InfoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+		]
+	});
+}
+function SpinnerIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className: cn("animate-spin", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4",
+			className: "opacity-25"
+		}), /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			className: "opacity-75",
+			d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		})]
+	});
+}
+function XIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m3.5 3.5 9 9m-9 0 9-9" })
+	});
+}
+const typeIcons = {
+	success: /* @__PURE__ */ jsx(SuccessIcon, { className: "text-success" }),
+	error: /* @__PURE__ */ jsx(ErrorIcon, { className: "text-destructive" }),
+	warning: /* @__PURE__ */ jsx(WarningIcon, { className: "text-warning-700" }),
+	info: /* @__PURE__ */ jsx(InfoIcon, { className: "text-info" }),
+	loading: /* @__PURE__ */ jsx(SpinnerIcon, { className: "text-muted-foreground" })
+};
+const defaultToastManager = Toast.createToastManager();
+function toTitleOptions(value) {
+	return typeof value === "string" ? { title: value } : value;
+}
+function normalizePromiseState(state) {
+	return typeof state === "function" ? (arg) => toTitleOptions(state(arg)) : toTitleOptions(state);
+}
+/**
+* Imperative toast API, callable from anywhere — components, stores, fetch
+* wrappers. Requires one default `<Toaster />` (no `toastManager` prop)
+* mounted in the app. Every method accepts Base UI's full option set
+* (`description`, `timeout`, `priority`, `onClose`, `actionProps`,
+* `data.icon`, …); `add` with an existing `id` updates that toast in place,
+* which is how repeated events deduplicate.
+*/
+const toast = {
+	/** Queue a toast with full control over its options. Returns the toast id. */
+	add(options) {
+		return defaultToastManager.add(options);
+	},
+	/** Success feedback: green check icon, polite announcement. */
+	success(title, options = {}) {
+		return defaultToastManager.add({
+			...options,
+			type: "success",
+			title
+		});
+	},
+	/** Informational notice: blue info icon, polite announcement. */
+	info(title, options = {}) {
+		return defaultToastManager.add({
+			...options,
+			type: "info",
+			title
+		});
+	},
+	/** Warning: amber triangle icon, polite announcement. */
+	warning(title, options = {}) {
+		return defaultToastManager.add({
+			...options,
+			type: "warning",
+			title
+		});
+	},
+	/**
+	* Failure feedback: red icon, announced assertively (`priority: "high"`)
+	* so screen readers interrupt with it, as errors warrant. For critical
+	* errors the user must act on, add `timeout: 0` so the toast persists.
+	*/
+	error(title, options = {}) {
+		return defaultToastManager.add({
+			priority: "high",
+			...options,
+			type: "error",
+			title
+		});
+	},
+	/**
+	* Spinner toast for manual async flows. Never auto-dismisses (the
+	* operation decides when it ends) — resolve it via
+	* `toast.update(id, { type: "success", … })` or `toast.close(id)`.
+	* Prefer `toast.promise` when a promise already models the operation.
+	*/
+	loading(title, options = {}) {
+		return defaultToastManager.add({
+			timeout: 0,
+			...options,
+			type: "loading",
+			title
+		});
+	},
+	/**
+	* One toast tracking a promise through loading → success/error, switching
+	* `type` (spinner → check/cross) at each step. States take a string
+	* (shorthand for the title), an options object, or — for
+	* `success`/`error` — a function of the resolved value/rejection reason.
+	* Returns the input promise's result, so it can be awaited in place.
+	*/
+	promise(promise, options) {
+		return defaultToastManager.promise(promise, {
+			loading: toTitleOptions(options.loading),
+			success: normalizePromiseState(options.success),
+			error: normalizePromiseState(options.error)
+		});
+	},
+	/** Update a queued toast in place (content, type, timing) by id. */
+	update(toastId, options) {
+		defaultToastManager.update(toastId, options);
+	},
+	/** Close one toast by id, or every toast when called with no argument. */
+	close(toastId) {
+		defaultToastManager.close(toastId);
+	}
+};
+function ToastIcon({ toastObject }) {
+	const icon = toastObject.data?.icon ?? (toastObject.type == null ? null : typeIcons[toastObject.type]);
+	if (icon == null) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: iconSlotClasses,
+		children: icon
+	});
+}
+function ToastList({ position, closeLabel }) {
+	const { toasts } = Toast.useToastManager();
+	return toasts.map((toastObject) => /* @__PURE__ */ jsx(Toast.Root, {
+		toast: toastObject,
+		swipeDirection: swipeDirections[position],
+		className: cn(rootBaseClasses, position.startsWith("top") ? rootTopClasses : rootBottomClasses),
+		children: /* @__PURE__ */ jsxs(Toast.Content, {
+			className: contentClasses,
+			children: [
+				/* @__PURE__ */ jsx(ToastIcon, { toastObject }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-1",
+					children: [/* @__PURE__ */ jsx(Toast.Title, { className: titleClasses }), /* @__PURE__ */ jsx(Toast.Description, { className: descriptionClasses })]
+				}),
+				toastObject.actionProps != null && /* @__PURE__ */ jsx(Toast.Action, { className: actionClasses }),
+				/* @__PURE__ */ jsx(Toast.Close, {
+					"aria-label": closeLabel,
+					className: closeClasses,
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})
+			]
+		})
+	}, toastObject.id));
+}
+/**
+* The toast stack. Mount one per app (typically at the root); after that,
+* `toast.success("Saved")` & co. work from anywhere. Bundles Base UI's
+* Provider, Portal, and Viewport with fully styled toasts: severity icon,
+* title, description, optional action button, and an always-visible
+* dismiss button.
+*
+* Collapsed toasts stack with a peek; hovering or focusing the stack
+* expands it and pauses dismiss timers. Every toast can be dismissed by
+* pointer (×), swipe, or keyboard, and F6 jumps focus into the stack.
+* Announcements use the toast's `title`/`description` strings — polite by
+* default, assertive for `priority: "high"`. The stack portals to `<body>`;
+* consumer apps should set `isolation: isolate` on their root so page
+* stacking contexts stay below it.
+*/
+const Toaster = forwardRef(({ position = "bottom-right", limit = 3, timeout = 5e3, toastManager, container, closeLabel = "Close", className, ...rest }, ref) => /* @__PURE__ */ jsx(Toast.Provider, {
+	limit,
+	timeout,
+	toastManager: toastManager ?? defaultToastManager,
+	children: /* @__PURE__ */ jsx(Toast.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			ref,
+			className: cn(viewportBaseClasses, viewportPositionClasses[position], className),
+			...rest,
+			children: /* @__PURE__ */ jsx(ToastList, {
+				position,
+				closeLabel
+			})
+		})
+	})
+}));
+Toaster.displayName = "Toaster";
+//#endregion
+export { Toaster, createToastManager, toast };

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

@@ -0,0 +1,2 @@
+import { ToastData, ToastManager, ToastObject, ToastOptions, ToastPosition, ToastPromiseOptions, ToastType, ToastUpdateOptions, Toaster, ToasterProps, createToastManager, toast } from "./Toast.js";
+export { type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, createToastManager, toast };

package/dist/components/Toast/index.js

@@ -0,0 +1,2 @@
+import { Toaster, createToastManager, toast } from "./Toast.js";
+export { Toaster, createToastManager, toast };

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

@@ -0,0 +1,104 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/Tooltip/Tooltip.d.ts
+/**
+ * Shares tooltip timing for every tooltip inside it: `delay`/`closeDelay`
+ * set the subtree's defaults, and once one tooltip has shown, moving to a
+ * nearby trigger within `timeout` (400ms) opens the next tooltip instantly
+ * instead of re-waiting the open delay. Mount one around toolbars and icon
+ * rows (or once at the app root) — without it every tooltip waits the full
+ * delay on its own.
+ */
+declare const TooltipProvider: import("react").FC<import("@base-ui/react").TooltipProviderProps>;
+type TooltipProviderProps = ComponentPropsWithoutRef<typeof Tooltip.Provider>;
+/**
+ * Groups the tooltip parts and owns the open state. Accepts Base UI's Root
+ * props: `open`/`defaultOpen`/`onOpenChange` for control, `disabled` to keep
+ * the tooltip from opening, `trackCursorAxis` to follow the pointer (chart
+ * and canvas surfaces), `actionsRef` for imperative close, and
+ * `handle`/`triggerId` for detached triggers.
+ */
+declare const Tooltip$1: <Payload>(props: Tooltip.Root.Props<Payload>) => import("react").JSX.Element;
+type TooltipProps = ComponentPropsWithoutRef<typeof Tooltip.Root>;
+/**
+ * Creates a handle that links `Tooltip` with `TooltipTrigger`s rendered
+ * elsewhere in the tree (table rows, toolbars). Triggers may attach a
+ * `payload`, which the `Tooltip` children render function receives — one
+ * mounted tooltip serving many targets.
+ */
+declare const createTooltipHandle: typeof Tooltip.createHandle;
+type TooltipHandle<Payload = unknown> = Tooltip.Handle<Payload>;
+interface TooltipTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Tooltip.Trigger>, "className"> {
+  className?: string;
+}
+/**
+ * The element the tooltip describes. A `<button>` by default and unstyled on
+ * purpose — compose the real control via `render`:
+ *
+ *   <TooltipTrigger render={<Button iconOnly aria-label="Delete" />}>
+ *     <TrashIcon />
+ *   </TooltipTrigger>
+ *
+ * The popup text is invisible to assistive technology (see `TooltipPopup`),
+ * so the trigger must carry its own accessible name — icon-only Buttons
+ * already enforce one at the type level. Non-interactive targets (truncated
+ * text, a wrapper around a disabled control) need `render={<span tabIndex={0} />}`
+ * so keyboard users can focus them to see the hint. Per-trigger timing comes
+ * from `delay`/`closeDelay` (600/0ms defaults); while its tooltip is open the
+ * element carries `data-popup-open` as a styling hook.
+ */
+declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof Tooltip.Positioner>;
+type TooltipSide = NonNullable<BasePositionerProps["side"]>;
+type TooltipAlign = NonNullable<BasePositionerProps["align"]>;
+interface TooltipPopupVariantsOptions {
+  className?: string;
+}
+/**
+ * Class list for an element styled as the tooltip chip — for floating hints
+ * that don't come from Base UI (chart hover tooltips, custom floating-ui
+ * popups) so every hint in the product shares one look.
+ */
+declare function tooltipPopupVariants({ className }?: TooltipPopupVariantsOptions): string;
+interface TooltipPopupProps extends Omit<ComponentPropsWithoutRef<typeof Tooltip.Popup>, "className"> {
+  /** Side of the trigger to place the tooltip on; flips automatically when there is no room. */
+  side?: TooltipSide;
+  /** How the tooltip lines up along the chosen side. */
+  align?: TooltipAlign;
+  /** Gap between trigger and tooltip in pixels. The default 8px leaves room for the `arrow`. */
+  sideOffset?: BasePositionerProps["sideOffset"];
+  /** Additional shift along the alignment axis in pixels. */
+  alignOffset?: BasePositionerProps["alignOffset"];
+  /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
+  collisionPadding?: BasePositionerProps["collisionPadding"];
+  /** Position against this element instead of the trigger (e.g. a chart point or a text selection). */
+  anchor?: BasePositionerProps["anchor"];
+  /** Keep the closed tooltip in the DOM — for measuring; closed tooltips normally unmount. */
+  keepMounted?: boolean;
+  /**
+   * Portal destination. Defaults to `document.body`. When the tooltip renders
+   * open on first paint (`defaultOpen`) and the container mounts in the same
+   * commit, pass the element via callback-ref state — a `RefObject` to an
+   * ancestor is not attached yet when the portal first resolves.
+   */
+  container?: ComponentPropsWithoutRef<typeof Tooltip.Portal>["container"];
+  /** Caret pointing at the trigger. On by default — it ties the hint to small targets in dense rows. */
+  arrow?: boolean;
+  /**
+   * Applied to the popup chip. The chip is content-sized up to 17.5rem —
+   * set `max-w-*` to change the cap.
+   */
+  className?: string;
+}
+/**
+ * The floating hint, with the portal and positioning plumbing folded in.
+ * Text only: the popup never receives focus and Base UI exposes none of it
+ * to assistive technology, so it must stay a redundant visual label — never
+ * the sole carrier of essential information (tooltips also cannot open on
+ * touch), and never a host for links or buttons (that content belongs in a
+ * Popover). Stays open while the pointer is over the trigger or the popup,
+ * and Escape dismisses it (WCAG 1.4.13).
+ */
+declare const TooltipPopup: import("react").ForwardRefExoticComponent<TooltipPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipAlign, TooltipHandle, TooltipPopup, TooltipPopupProps, TooltipPopupVariantsOptions, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide, TooltipTrigger, TooltipTriggerProps, createTooltipHandle, tooltipPopupVariants };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,95 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/Tooltip/Tooltip.tsx
+/**
+* Shares tooltip timing for every tooltip inside it: `delay`/`closeDelay`
+* set the subtree's defaults, and once one tooltip has shown, moving to a
+* nearby trigger within `timeout` (400ms) opens the next tooltip instantly
+* instead of re-waiting the open delay. Mount one around toolbars and icon
+* rows (or once at the app root) — without it every tooltip waits the full
+* delay on its own.
+*/
+const TooltipProvider = Tooltip.Provider;
+/**
+* Groups the tooltip parts and owns the open state. Accepts Base UI's Root
+* props: `open`/`defaultOpen`/`onOpenChange` for control, `disabled` to keep
+* the tooltip from opening, `trackCursorAxis` to follow the pointer (chart
+* and canvas surfaces), `actionsRef` for imperative close, and
+* `handle`/`triggerId` for detached triggers.
+*/
+const Tooltip$1 = Tooltip.Root;
+/**
+* Creates a handle that links `Tooltip` with `TooltipTrigger`s rendered
+* elsewhere in the tree (table rows, toolbars). Triggers may attach a
+* `payload`, which the `Tooltip` children render function receives — one
+* mounted tooltip serving many targets.
+*/
+const createTooltipHandle = Tooltip.createHandle;
+/**
+* The element the tooltip describes. A `<button>` by default and unstyled on
+* purpose — compose the real control via `render`:
+*
+*   <TooltipTrigger render={<Button iconOnly aria-label="Delete" />}>
+*     <TrashIcon />
+*   </TooltipTrigger>
+*
+* The popup text is invisible to assistive technology (see `TooltipPopup`),
+* so the trigger must carry its own accessible name — icon-only Buttons
+* already enforce one at the type level. Non-interactive targets (truncated
+* text, a wrapper around a disabled control) need `render={<span tabIndex={0} />}`
+* so keyboard users can focus them to see the hint. Per-trigger timing comes
+* from `delay`/`closeDelay` (600/0ms defaults); while its tooltip is open the
+* element carries `data-popup-open` as a styling hook.
+*/
+const TooltipTrigger = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Tooltip.Trigger, {
+	ref,
+	className,
+	...rest
+}));
+TooltipTrigger.displayName = "TooltipTrigger";
+const popupSurfaceClasses = "rounded-md bg-foreground px-3 py-1.5 font-sans text-xs text-balance text-background shadow-sm";
+const popupBehaviorClasses = "origin-[var(--transform-origin)] max-w-[min(17.5rem,var(--available-width))] motion-safe:transition-[scale,opacity] motion-safe:duration-100 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-instant:transition-none!";
+const arrowClasses = "relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:bg-foreground before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)]";
+const ARROW_PADDING = 8;
+/**
+* Class list for an element styled as the tooltip chip — for floating hints
+* that don't come from Base UI (chart hover tooltips, custom floating-ui
+* popups) so every hint in the product shares one look.
+*/
+function tooltipPopupVariants({ className } = {}) {
+	return cn(popupSurfaceClasses, className);
+}
+/**
+* The floating hint, with the portal and positioning plumbing folded in.
+* Text only: the popup never receives focus and Base UI exposes none of it
+* to assistive technology, so it must stay a redundant visual label — never
+* the sole carrier of essential information (tooltips also cannot open on
+* touch), and never a host for links or buttons (that content belongs in a
+* Popover). Stays open while the pointer is over the trigger or the popup,
+* and Escape dismisses it (WCAG 1.4.13).
+*/
+const TooltipPopup = forwardRef(({ side = "top", align = "center", sideOffset = 8, alignOffset = 0, collisionPadding, anchor, keepMounted = false, container, arrow = true, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(Tooltip.Portal, {
+	container,
+	keepMounted,
+	children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		anchor,
+		arrowPadding: ARROW_PADDING,
+		className: "z-50",
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			ref,
+			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
+			...rest,
+			children: [arrow && /* @__PURE__ */ jsx(Tooltip.Arrow, { className: arrowClasses }), children]
+		})
+	})
+}));
+TooltipPopup.displayName = "TooltipPopup";
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createTooltipHandle, tooltipPopupVariants };

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

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipAlign, TooltipHandle, TooltipPopup, TooltipPopupProps, TooltipPopupVariantsOptions, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide, TooltipTrigger, TooltipTriggerProps, createTooltipHandle, tooltipPopupVariants } from "./Tooltip.js";
+export { Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, createTooltipHandle, tooltipPopupVariants };

package/dist/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createTooltipHandle, tooltipPopupVariants } from "./Tooltip.js";
+export { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createTooltipHandle, tooltipPopupVariants };

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,38 @@
+import { ElementType, HTMLAttributes } from "react";
+//#region src/components/Typography/Typography.d.ts
+type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "overline";
+interface TypographyVariantsOptions {
+  variant?: TypographyVariant;
+  className?: string;
+}
+/**
+ * Class list for an element styled per the ArcFusion type scale.
+ *
+ * Use it where the element must stay native (form labels, `figcaption`,
+ * `time`) and inside other primitives — primitives must not nest
+ * `<Typography>` (it would block `render` composition), so they mirror the
+ * recipe instead:
+ *
+ *   <label className={typographyVariants({ variant: "body-sm" })}>Email</label>
+ */
+declare function typographyVariants({ variant, className }?: TypographyVariantsOptions): string;
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Text style from the ArcFusion type scale. `display`–`h4` render in
+   * Poppins ("the Brand Voice"); `body-lg` down to `overline` render in
+   * Inter ("the Context"). The variant also picks the default element:
+   * `display` → `h1`, headings → their level, body styles → `p`,
+   * `caption`/`overline` → `span`.
+   */
+  variant?: TypographyVariant;
+  /**
+   * Override the rendered element without changing the visual style, e.g.
+   * `variant="h4" as="h2"` when the document outline needs a level-2 heading
+   * with a compact look. Heading levels must descend without skipping — pick
+   * `as` from the outline, `variant` from the design.
+   */
+  as?: ElementType;
+}
+declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Typography, TypographyProps, TypographyVariant, TypographyVariantsOptions, typographyVariants };

package/dist/components/Typography/Typography.js

@@ -0,0 +1,53 @@
+import { cn } from "../../lib/cn.js";
+import { createElement, forwardRef } from "react";
+//#region src/components/Typography/Typography.tsx
+const variantClasses = {
+	display: "font-heading font-semibold text-6xl tracking-tight text-foreground",
+	h1: "font-heading font-semibold text-4xl tracking-tight text-foreground",
+	h2: "font-heading font-semibold text-3xl tracking-tight text-foreground",
+	h3: "font-heading font-semibold text-2xl text-foreground",
+	h4: "font-heading font-semibold text-xl text-foreground",
+	"body-lg": "font-sans text-lg text-foreground",
+	body: "font-sans text-base text-foreground",
+	"body-sm": "font-sans text-sm text-foreground",
+	caption: "font-sans text-xs text-muted-foreground",
+	overline: "font-sans text-xs font-medium uppercase tracking-widest text-muted-foreground"
+};
+const defaultElements = {
+	display: "h1",
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	"body-lg": "p",
+	body: "p",
+	"body-sm": "p",
+	caption: "span",
+	overline: "span"
+};
+/**
+* Class list for an element styled per the ArcFusion type scale.
+*
+* Use it where the element must stay native (form labels, `figcaption`,
+* `time`) and inside other primitives — primitives must not nest
+* `<Typography>` (it would block `render` composition), so they mirror the
+* recipe instead:
+*
+*   <label className={typographyVariants({ variant: "body-sm" })}>Email</label>
+*/
+function typographyVariants({ variant = "body", className } = {}) {
+	return cn(variantClasses[variant], className);
+}
+const Typography = forwardRef(({ variant = "body", as, className, ...rest }, ref) => {
+	return createElement(as ?? defaultElements[variant], {
+		ref,
+		className: typographyVariants({
+			variant,
+			className
+		}),
+		...rest
+	});
+});
+Typography.displayName = "Typography";
+//#endregion
+export { Typography, typographyVariants };

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

@@ -0,0 +1,2 @@
+import { Typography, TypographyProps, TypographyVariant, TypographyVariantsOptions, typographyVariants } from "./Typography.js";
+export { Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, typographyVariants };

package/dist/components/Typography/index.js

@@ -0,0 +1,2 @@
+import { Typography, typographyVariants } from "./Typography.js";
+export { Typography, typographyVariants };