beez-ui 2.7.1 → 3.0.1

package/dist/components/tabs.js

@@ -7,7 +7,6 @@ import { c as _c } from "react/compiler-runtime";
 * panel. Radix keeps the roles, keyboard navigation and controlled or uncontrolled value.
 */
 import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
-import { cva } from "class-variance-authority";
 import { Slot, Tabs as TabsPrimitive } from "radix-ui";
 import { AnimatePresence, animate, motion, useIsPresent } from "motion/react";
 import { TABS_DIRECTION, TABS_PANEL_HEIGHT_TOLERANCE_PX, TABS_PANEL_OFFSET_PX, TABS_PANEL_REDUCED_EXIT_DURATION_S, TABS_REVEAL_MARGIN_PX } from "../constants/tabs.js";
@@ -167,16 +166,10 @@ function Tabs(t0) {
 	return t6;
 }
 /**
-* Arc's segmented list (`default`): a muted track whose active trigger is a raised surface. `line` keeps the
-* underline variant on the same tokens. Horizontal lists scroll sideways without a visible scrollbar.
+* Arc's segmented list: a muted track whose active trigger is a raised surface. Horizontal lists scroll sideways
+* without a visible scrollbar.
 */
-const tabsListVariants = cva("group/tabs-list inline-flex w-fit max-w-full min-w-0 items-center text-text-muted group-data-horizontal/tabs:overflow-x-auto group-data-horizontal/tabs:[scrollbar-width:none] group-data-horizontal/tabs:[&::-webkit-scrollbar]:hidden group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", {
-	variants: { variant: {
-		default: "gap-(--space-1) rounded-(--radius-control) border border-border bg-surface-muted p-(--space-1)",
-		line: "gap-(--space-1) bg-transparent"
-	} },
-	defaultVariants: { variant: "default" }
-});
+const tabsListClassName = "group/tabs-list inline-flex w-fit max-w-full min-w-0 items-center gap-(--space-1) rounded-(--radius-control) border border-border bg-surface-muted p-(--space-1) text-text-muted group-data-horizontal/tabs:overflow-x-auto group-data-horizontal/tabs:[scrollbar-width:none] group-data-horizontal/tabs:[&::-webkit-scrollbar]:hidden group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col";
 /**
 * Scrolls a horizontally overflowing list just enough to show the trigger, never the page around it. The target is an
 * absolute offset, so a second call while a smooth scroll is still running (focus and selection both reveal the
@@ -202,39 +195,35 @@ function revealTrigger(list, trigger, reduceMotion) {
 /**
 * Holds the triggers. The active highlight glides to the newly selected trigger and the list scrolls to keep the
 * active or focused trigger visible.
-* @param props - Radix list props, the `variant` and `ref`.
+* @param props - Radix list props, including `aria-label`, `loop` and `ref`.
 * @returns The tab list.
 */
 function TabsList(t0) {
-	const $ = _c(31);
+	const $ = _c(28);
 	let className;
 	let onFocusCapture;
 	let props;
 	let ref;
-	let t1;
 	if ($[0] !== t0) {
-		({className, variant: t1, ref, onFocusCapture, ...props} = t0);
+		({className, ref, onFocusCapture, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = onFocusCapture;
 		$[3] = props;
 		$[4] = ref;
-		$[5] = t1;
 	} else {
 		className = $[1];
 		onFocusCapture = $[2];
 		props = $[3];
 		ref = $[4];
-		t1 = $[5];
 	}
-	const variant = t1 === undefined ? "default" : t1;
 	const motionState = useContext(TabsMotionContext);
 	const reduceMotion = usePrefersReducedMotion();
 	const [list, attachList] = useAttachedElement(ref);
 	const activeValue = motionState?.activeValue;
-	let t2;
-	if ($[6] !== list || $[7] !== motionState?.orientation || $[8] !== reduceMotion) {
-		t2 = () => {
+	let t1;
+	if ($[5] !== list || $[6] !== motionState?.orientation || $[7] !== reduceMotion) {
+		t1 = () => {
 			if (!list || motionState?.orientation === "vertical") {
 				return;
 			}
@@ -246,34 +235,34 @@ function TabsList(t0) {
 			}
 			return () => observer.disconnect();
 		};
-		$[6] = list;
-		$[7] = motionState?.orientation;
-		$[8] = reduceMotion;
-		$[9] = t2;
+		$[5] = list;
+		$[6] = motionState?.orientation;
+		$[7] = reduceMotion;
+		$[8] = t1;
 	} else {
-		t2 = $[9];
+		t1 = $[8];
 	}
-	const t3 = motionState?.orientation;
-	let t4;
-	if ($[10] !== activeValue || $[11] !== list || $[12] !== reduceMotion || $[13] !== t3) {
-		t4 = [
+	const t2 = motionState?.orientation;
+	let t3;
+	if ($[9] !== activeValue || $[10] !== list || $[11] !== reduceMotion || $[12] !== t2) {
+		t3 = [
 			list,
 			activeValue,
-			t3,
+			t2,
 			reduceMotion
 		];
-		$[10] = activeValue;
-		$[11] = list;
-		$[12] = reduceMotion;
+		$[9] = activeValue;
+		$[10] = list;
+		$[11] = reduceMotion;
+		$[12] = t2;
 		$[13] = t3;
-		$[14] = t4;
 	} else {
-		t4 = $[14];
+		t3 = $[13];
 	}
-	useLayoutEffect(t2, t4);
-	let t5;
-	if ($[15] !== list || $[16] !== motionState?.orientation || $[17] !== onFocusCapture || $[18] !== reduceMotion) {
-		t5 = function handleFocusCapture(event) {
+	useLayoutEffect(t1, t3);
+	let t4;
+	if ($[14] !== list || $[15] !== motionState?.orientation || $[16] !== onFocusCapture || $[17] !== reduceMotion) {
+		t4 = function handleFocusCapture(event) {
 			onFocusCapture?.(event);
 			if (!list || motionState?.orientation === "vertical") {
 				return;
@@ -282,55 +271,52 @@ function TabsList(t0) {
 				revealTrigger(list, event.target, reduceMotion);
 			}
 		};
-		$[15] = list;
-		$[16] = motionState?.orientation;
-		$[17] = onFocusCapture;
-		$[18] = reduceMotion;
-		$[19] = t5;
+		$[14] = list;
+		$[15] = motionState?.orientation;
+		$[16] = onFocusCapture;
+		$[17] = reduceMotion;
+		$[18] = t4;
 	} else {
-		t5 = $[19];
+		t4 = $[18];
 	}
-	const handleFocusCapture = t5;
-	let t6;
-	if ($[20] !== className || $[21] !== variant) {
-		t6 = cn(tabsListVariants({ variant }), className);
-		$[20] = className;
-		$[21] = variant;
-		$[22] = t6;
+	const handleFocusCapture = t4;
+	let t5;
+	if ($[19] !== className) {
+		t5 = cn(tabsListClassName, className);
+		$[19] = className;
+		$[20] = t5;
 	} else {
-		t6 = $[22];
+		t5 = $[20];
 	}
-	let t7;
-	if ($[23] !== handleFocusCapture || $[24] !== props || $[25] !== t6 || $[26] !== variant) {
-		t7 = /* @__PURE__ */ _jsx(TabsPrimitive.List, {
+	let t6;
+	if ($[21] !== handleFocusCapture || $[22] !== props || $[23] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(TabsPrimitive.List, {
 			"data-slot": "tabs-list",
-			"data-variant": variant,
-			className: t6,
+			className: t5,
 			onFocusCapture: handleFocusCapture,
 			...props
 		});
-		$[23] = handleFocusCapture;
-		$[24] = props;
-		$[25] = t6;
-		$[26] = variant;
-		$[27] = t7;
+		$[21] = handleFocusCapture;
+		$[22] = props;
+		$[23] = t5;
+		$[24] = t6;
 	} else {
-		t7 = $[27];
+		t6 = $[24];
 	}
-	let t8;
-	if ($[28] !== attachList || $[29] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(GlideSlot, {
+	let t7;
+	if ($[25] !== attachList || $[26] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(GlideSlot, {
 			preset: "tabs",
 			ref: attachList,
-			children: t7
+			children: t6
 		});
-		$[28] = attachList;
-		$[29] = t7;
-		$[30] = t8;
+		$[25] = attachList;
+		$[26] = t6;
+		$[27] = t7;
 	} else {
-		t8 = $[30];
+		t7 = $[27];
 	}
-	return t8;
+	return t7;
 }
 /**
 * Selects a panel. Arc's trigger: muted label, accent label once active, hover only on fine pointers and the
@@ -356,7 +342,7 @@ function TabsTrigger(t0) {
 	}
 	let t1;
 	if ($[4] !== className) {
-		t1 = cn("relative inline-flex min-h-(--control-height-sm) min-w-[5.5rem] flex-[1_0_auto] cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--radius-control)-3px)] border border-transparent bg-transparent px-(--space-3) font-sans text-sm font-medium whitespace-nowrap text-text-muted [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-standard) select-none motion-reduce:transition-none hover-fine:text-foreground active:text-foreground disabled:cursor-not-allowed disabled:opacity-50 data-active:text-(--accent-strong) group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=default]/tabs-list:data-active:border-border group-data-[variant=default]/tabs-list:data-active:bg-surface group-data-[variant=default]/tabs-list:data-active:shadow-(--shadow-resting)", "after:absolute after:rounded-full after:bg-(--accent-strong) after:opacity-0 after:transition-opacity after:duration-(--duration-fast) group-data-horizontal/tabs:after:inset-x-(--space-2) group-data-horizontal/tabs:after:-bottom-px group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-(--space-2) group-data-vertical/tabs:after:-right-px group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 data-glide-target:after:opacity-0! data-glide-freeze:after:transition-none motion-reduce:after:transition-none", className);
+		t1 = cn("relative inline-flex min-h-(--control-height-sm) min-w-[5.5rem] flex-[1_0_auto] cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--radius-control)-3px)] border border-transparent bg-transparent px-(--space-3) font-sans text-sm font-medium whitespace-nowrap text-text-muted [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-standard) select-none motion-reduce:transition-none hover-fine:text-foreground active:text-foreground disabled:cursor-not-allowed disabled:opacity-50 data-active:text-(--accent-strong) group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-active:border-border data-active:bg-surface data-active:shadow-(--shadow-resting)", className);
 		$[4] = className;
 		$[5] = t1;
 	} else {
@@ -647,4 +633,4 @@ function TabsContent(t0) {
 	}
 	return t5;
 }
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components/themed-toaster.d.ts

@@ -1,7 +1,7 @@
 import type { ToasterProps } from "sonner";
 /**
  * Renders shared notification styling using the consumer's resolved theme, on top of beez-ui's `Toaster`, so its
- * toasts stay usable from an open `Dialog`, `AlertDialog` or `Sheet`.
+ * toasts stay usable from an open `Dialog` (also in `alert` mode) or `Sheet`.
  */
 declare const ThemedToaster: ({ theme, className, ...props }: ToasterProps) => import("react").JSX.Element;
 export { ThemedToaster };

package/dist/components/themed-toaster.js

@@ -8,7 +8,7 @@ import { CircleCheck, Info, TriangleAlert, OctagonAlert, Loader } from "lucide-r
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
 * Renders shared notification styling using the consumer's resolved theme, on top of beez-ui's `Toaster`, so its
-* toasts stay usable from an open `Dialog`, `AlertDialog` or `Sheet`.
+* toasts stay usable from an open `Dialog` (also in `alert` mode) or `Sheet`.
 */
 const ThemedToaster = (t0) => {
 	const $ = _c(16);

package/dist/components/toaster.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentProps } from "react";
 import { Toaster as SonnerToaster } from "sonner";
 /**
- * Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog`, `AlertDialog` or
+ * Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog` (also in `alert` mode) or
  * `Sheet` is open: the toast layer takes pointer input even though the modal disables pointer events on the page,
  * and Sonner's hotkey moves keyboard focus into the toasts past the modal's focus trap (focus returns to the modal
  * when the focused toast goes away). Accepts every Sonner prop, including `ref`, and keeps the consumer's `className`.

package/dist/components/toaster.js

@@ -6,7 +6,7 @@ import { useEffect } from "react";
 import { Toaster as SonnerToaster } from "sonner";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
-* Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog`, `AlertDialog` or
+* Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog` (also in `alert` mode) or
 * `Sheet` is open: the toast layer takes pointer input even though the modal disables pointer events on the page,
 * and Sonner's hotkey moves keyboard focus into the toasts past the modal's focus trap (focus returns to the modal
 * when the focused toast goes away). Accepts every Sonner prop, including `ref`, and keeps the consumer's `className`.

package/dist/components/tooltip.d.ts

@@ -1,38 +1,43 @@
 /**
  * Arc's Tooltip (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a short dark bubble on Arc's tokens that
  * waits a moment, then rises a few pixels from its trigger. While a tooltip is open, and briefly after it closes, the
- * next one opens at once and only fades. It keeps the Radix composition (`Tooltip`, `TooltipTrigger`,
- * `TooltipContent`, `TooltipProvider`) and adds Arc's shorthand: `<Tooltip content="..." side="...">` wraps its child.
+ * next one opens at once and only fades, without any app-level provider: the skip window is shared by every tooltip
+ * on the page. It follows Arc's closed API, `<Tooltip content="...">` around its trigger, plus placement and open
+ * state extensions.
  */
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-/**
- * Shares the open delay among the tooltips it wraps.
- * @param props - Radix provider properties. `delayDuration` defaults to Arc's 250ms.
- * @returns The provider.
- */
-declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
-export type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {
-    /**
-     * Arc's shorthand: the bubble's content. When set, the only child becomes the trigger (it must accept a ref and be
-     * focusable) and the tooltip renders its own `TooltipContent`.
-     */
-    content?: React.ReactNode;
-    /** Side of the trigger the shorthand bubble prefers. Defaults to `top`. */
-    side?: React.ComponentProps<typeof TooltipPrimitive.Content>["side"];
+import type { ReactElement, ReactNode } from "react";
+/** Side of the trigger a tooltip prefers. Arc offers `top` and `bottom`; beez-ui adds `left` and `right`. */
+export type TooltipSide = "top" | "bottom" | "left" | "right";
+/** Alignment of the bubble against its trigger. */
+export type TooltipAlign = "start" | "center" | "end";
+export type TooltipProps = {
+    /** Supplemental text of the bubble. Icon-only triggers still need their own `aria-label`. */
+    content: ReactNode;
+    /** The trigger. Rendered with `asChild`, so it must accept a ref and be focusable. */
+    children: ReactElement;
+    /** Preferred side of the trigger. Defaults to `top`. */
+    side?: TooltipSide;
+    /** Alignment against the trigger. Defaults to `center`. */
+    align?: TooltipAlign;
+    /** Gap, in px, between the bubble and its trigger. Defaults to 8. */
+    sideOffset?: number;
+    /** Distance, in px, the bubble keeps from the viewport edges. Defaults to 12. */
+    collisionPadding?: number;
+    /** Class added to the bubble. */
+    contentClassName?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the tooltip opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Milliseconds of hover or focus before the first tooltip opens. Defaults to Arc's 250. */
+    delayDuration?: number;
 };
 /**
- * Owns the open state of one tooltip. It works with or without a `TooltipProvider`: without one it brings its own,
- * as Arc's Tooltip does.
- * @param props - Radix root properties plus Arc's optional `content` and `side` shorthand.
- * @returns The tooltip root.
- */
-declare function Tooltip({ content, side, children, delayDuration, ...props }: TooltipProps): React.JSX.Element;
-declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
-/**
- * Renders Arc's bubble: inverted colors, a hairline border, the raised shadow and 15rem of maximum width.
- * @param props - Radix content properties. `sideOffset` defaults to 8px and `collisionPadding` to 12px.
- * @returns The portaled bubble.
+ * A short label on hover or focus that opens without delay when moving between tooltips.
+ * @param props - The bubble content, the trigger and optional placement and open state.
+ * @returns The trigger with its tooltip.
  */
-declare function TooltipContent({ className, sideOffset, collisionPadding, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+declare function Tooltip({ content, children, side, align, sideOffset, collisionPadding, contentClassName, open, defaultOpen, onOpenChange, delayDuration, }: TooltipProps): import("react").JSX.Element;
+export { Tooltip };