beez-ui 2.5.0 → 2.6.1

package/dist/components/pagination.js

@@ -1,12 +1,20 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import * as React from "react";
-import { Link } from "./link.js";
-import { GlideSlot } from "../motion/glide-slot.js";
-import { cn } from "../lib/utils.js";
-import { ControlButton } from "./control-button.js";
+import { cva } from "class-variance-authority";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { PAGINATION_DEFAULT_COPY } from "../constants/pagination.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { useArcPress } from "../motion/arc-press.js";
+import { GlideSlot } from "../motion/glide-slot.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { Link } from "./link.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Landmark that holds the page controls.
+* @param props - Native `nav` attributes; `aria-label` defaults to Spanish copy.
+* @returns The navigation landmark.
+*/
 function Pagination(t0) {
 	const $ = _c(8);
 	let className;
@@ -32,7 +40,7 @@ function Pagination(t0) {
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx("nav", {
 			role: "navigation",
-			"aria-label": "pagination",
+			"aria-label": PAGINATION_DEFAULT_COPY.navigationLabel,
 			"data-slot": "pagination",
 			className: t1,
 			...props
@@ -45,7 +53,7 @@ function Pagination(t0) {
 	}
 	return t2;
 }
-/** Lists page links; the current page's highlight glides to the newly selected page. */
+/** Lists page links; the current page's mark glides to the newly selected page. */
 function PaginationContent(t0) {
 	const $ = _c(8);
 	let className;
@@ -61,7 +69,7 @@ function PaginationContent(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex items-center gap-1", className);
+		t1 = cn("flex flex-wrap items-center gap-(--space-1)", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -108,69 +116,134 @@ function PaginationItem(t0) {
 	}
 	return t1;
 }
+/**
+* Arc's page control: a control-height square for numbers, padded for labelled arrows. The current page draws the
+* raised mark (border, surface and resting shadow) that the glide copies while it travels.
+*/
+const paginationLinkVariants = cva("relative inline-flex h-(--control-height-sm) min-w-(--control-height-sm) shrink-0 cursor-pointer items-center justify-center gap-1 rounded-(--radius-control) border border-transparent bg-transparent font-sans text-xs font-medium whitespace-nowrap text-text-secondary tabular-nums no-underline [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,box-shadow,opacity] duration-(--duration-fast) ease-(--ease-standard) select-none motion-reduce:transition-none hover-fine:bg-surface-muted hover-fine:text-foreground aria-[current=page]:border-border aria-[current=page]:bg-surface aria-[current=page]:text-foreground aria-[current=page]:shadow-(--shadow-resting) aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: { size: {
+		default: "px-(--space-3)",
+		xs: "px-(--space-2)",
+		sm: "px-(--space-2)",
+		lg: "px-(--space-4)",
+		icon: "px-0",
+		"icon-xs": "px-0",
+		"icon-sm": "px-0",
+		"icon-lg": "px-0"
+	} },
+	defaultVariants: { size: "icon" }
+});
+/**
+* One page, rendered through the provider's `Link` adapter or the `component` passed to it.
+* @param props - `isActive` marks the current page (`aria-current="page"`); `size` keeps the previous size names
+*   and only changes the horizontal padding; every other prop reaches the link. With `aria-disabled` the link
+*   stays visible but never navigates, whether clicked or activated with Enter, and `onClick` is not called.
+* @returns The page link.
+*/
 function PaginationLink(t0) {
-	const $ = _c(16);
+	const $ = _c(19);
 	let className;
 	let isActive;
+	let onClick;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({className, isActive, size: t1, ...props} = t0);
+		({className, isActive, size: t1, onClick, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = isActive;
-		$[3] = props;
-		$[4] = t1;
+		$[3] = onClick;
+		$[4] = props;
+		$[5] = t1;
 	} else {
 		className = $[1];
 		isActive = $[2];
-		props = $[3];
-		t1 = $[4];
+		onClick = $[3];
+		props = $[4];
+		t1 = $[5];
 	}
 	const size = t1 === undefined ? "icon" : t1;
-	const t2 = isActive ? "outline" : "ghost";
-	let t3;
-	if ($[5] !== className) {
-		t3 = cn(className);
-		$[5] = className;
-		$[6] = t3;
+	const isDisabled = props["aria-disabled"] === true || props["aria-disabled"] === "true";
+	let t2;
+	if ($[6] !== isDisabled || $[7] !== onClick) {
+		t2 = function handleClick(event) {
+			if (isDisabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+		};
+		$[6] = isDisabled;
+		$[7] = onClick;
+		$[8] = t2;
 	} else {
-		t3 = $[6];
+		t2 = $[8];
+	}
+	const handleClick = t2;
+	const t3 = isActive ? "page" : undefined;
+	let t4;
+	if ($[9] !== className || $[10] !== size) {
+		t4 = cn(paginationLinkVariants({ size }), className);
+		$[9] = className;
+		$[10] = size;
+		$[11] = t4;
+	} else {
+		t4 = $[11];
 	}
-	const t4 = isActive ? "page" : undefined;
 	let t5;
-	if ($[7] !== isActive || $[8] !== props || $[9] !== t4) {
+	if ($[12] !== handleClick || $[13] !== isActive || $[14] !== props || $[15] !== size || $[16] !== t3 || $[17] !== t4) {
 		t5 = /* @__PURE__ */ _jsx(Link, {
-			"aria-current": t4,
+			"aria-current": t3,
 			"data-slot": "pagination-link",
 			"data-active": isActive,
-			...props
+			"data-size": size,
+			className: t4,
+			...props,
+			onClick: handleClick
 		});
-		$[7] = isActive;
-		$[8] = props;
-		$[9] = t4;
-		$[10] = t5;
+		$[12] = handleClick;
+		$[13] = isActive;
+		$[14] = props;
+		$[15] = size;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else {
+		t5 = $[18];
+	}
+	return t5;
+}
+/** A previous or next arrow: Arc presses it in, while page numbers stay still and let the mark travel. */
+function PaginationStep(t0) {
+	const $ = _c(6);
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
 	} else {
-		t5 = $[10];
+		props = $[1];
+		ref = $[2];
 	}
-	let t6;
-	if ($[11] !== size || $[12] !== t2 || $[13] !== t3 || $[14] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(ControlButton, {
-			asChild: true,
-			variant: t2,
-			size,
-			className: t3,
-			children: t5
+	const reduceMotion = usePrefersReducedMotion();
+	const [element, attach] = useAttachedElement(ref);
+	useArcPress(element, !reduceMotion);
+	let t1;
+	if ($[3] !== attach || $[4] !== props) {
+		t1 = /* @__PURE__ */ _jsx(PaginationLink, {
+			ref: attach,
+			size: "default",
+			...props
 		});
-		$[11] = size;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t5;
-		$[15] = t6;
+		$[3] = attach;
+		$[4] = props;
+		$[5] = t1;
 	} else {
-		t6 = $[15];
+		t1 = $[5];
 	}
-	return t6;
+	return t1;
 }
 function PaginationPrevious(t0) {
 	const $ = _c(13);
@@ -188,10 +261,10 @@ function PaginationPrevious(t0) {
 		props = $[2];
 		t1 = $[3];
 	}
-	const text = t1 === undefined ? "Previous" : t1;
+	const text = t1 === undefined ? PAGINATION_DEFAULT_COPY.previousText : t1;
 	let t2;
 	if ($[4] !== className) {
-		t2 = cn("pl-2!", className);
+		t2 = cn("pl-(--space-2)", className);
 		$[4] = className;
 		$[5] = t2;
 	} else {
@@ -199,7 +272,10 @@ function PaginationPrevious(t0) {
 	}
 	let t3;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(ChevronLeftIcon, { "data-icon": "inline-start" });
+		t3 = /* @__PURE__ */ _jsx(ChevronLeftIcon, {
+			"data-icon": "inline-start",
+			"aria-hidden": "true"
+		});
 		$[6] = t3;
 	} else {
 		t3 = $[6];
@@ -217,9 +293,8 @@ function PaginationPrevious(t0) {
 	}
 	let t5;
 	if ($[9] !== props || $[10] !== t2 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ _jsxs(PaginationLink, {
-			"aria-label": "Go to previous page",
-			size: "default",
+		t5 = /* @__PURE__ */ _jsxs(PaginationStep, {
+			"aria-label": PAGINATION_DEFAULT_COPY.previousLabel,
 			className: t2,
 			...props,
 			children: [t3, t4]
@@ -249,10 +324,10 @@ function PaginationNext(t0) {
 		props = $[2];
 		t1 = $[3];
 	}
-	const text = t1 === undefined ? "Next" : t1;
+	const text = t1 === undefined ? PAGINATION_DEFAULT_COPY.nextText : t1;
 	let t2;
 	if ($[4] !== className) {
-		t2 = cn("pr-2!", className);
+		t2 = cn("pr-(--space-2)", className);
 		$[4] = className;
 		$[5] = t2;
 	} else {
@@ -271,16 +346,18 @@ function PaginationNext(t0) {
 	}
 	let t4;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ _jsx(ChevronRightIcon, { "data-icon": "inline-end" });
+		t4 = /* @__PURE__ */ _jsx(ChevronRightIcon, {
+			"data-icon": "inline-end",
+			"aria-hidden": "true"
+		});
 		$[8] = t4;
 	} else {
 		t4 = $[8];
 	}
 	let t5;
 	if ($[9] !== props || $[10] !== t2 || $[11] !== t3) {
-		t5 = /* @__PURE__ */ _jsxs(PaginationLink, {
-			"aria-label": "Go to next page",
-			size: "default",
+		t5 = /* @__PURE__ */ _jsxs(PaginationStep, {
+			"aria-label": PAGINATION_DEFAULT_COPY.nextLabel,
 			className: t2,
 			...props,
 			children: [t3, t4]
@@ -309,7 +386,7 @@ function PaginationEllipsis(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn("flex size-(--control-height-sm) items-center justify-center text-text-muted [&_svg:not([class*='size-'])]:size-4", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -321,7 +398,7 @@ function PaginationEllipsis(t0) {
 		t2 = /* @__PURE__ */ _jsx(MoreHorizontalIcon, {});
 		t3 = /* @__PURE__ */ _jsx("span", {
 			className: "sr-only",
-			children: "More pages"
+			children: PAGINATION_DEFAULT_COPY.morePages
 		});
 		$[5] = t2;
 		$[6] = t3;

package/dist/components/popover.d.ts

@@ -1,13 +1,22 @@
+/**
+ * Arc's Popover (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a raised panel with Arc's panel radius
+ * and floating shadow that starts a few pixels toward its trigger and settles on a spring, leaving faster than it
+ * arrives. It keeps the Radix composition and adds Arc's `PopoverClose`.
+ */
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+/** Closes the popover that contains it, such as a "Listo" or "Cancelar" button inside the panel. */
+declare function PopoverClose({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;
 /**
- * Renders floating details with compact padding and spacing.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
+ * Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
+ * Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
+ * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
+ *   to 10px.
+ * @returns The portaled panel.
  */
-declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
 /**
  * Groups popover headings with compact spacing.
@@ -17,4 +26,4 @@ declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof Popover
 declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
 declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/dist/components/popover.js

@@ -1,10 +1,16 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Popover (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a raised panel with Arc's panel radius
+* and floating shadow that starts a few pixels toward its trigger and settles on a spring, leaving faster than it
+* arrives. It keeps the Radix composition and adds Arc's `PopoverClose`.
+*/
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { ArcFloatingSlot } from "../motion/arc-floating-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
+import { POPOVER_COLLISION_PADDING_PX, POPOVER_MOTION, POPOVER_SIDE_OFFSET_PX } from "../constants/popover.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Popover(t0) {
 	const $ = _c(9);
@@ -70,79 +76,115 @@ function PopoverTrigger(t0) {
 	}
 	return t1;
 }
+/** Closes the popover that contains it, such as a "Listo" or "Cancelar" button inside the panel. */
+function PopoverClose(t0) {
+	const $ = _c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ _jsx(PopoverPrimitive.Close, {
+			"data-slot": "popover-close",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+/** Every popover enters and leaves on the same path. */
+function resolvePopoverMotion() {
+	return POPOVER_MOTION;
+}
 /**
-* Renders floating details with compact padding and spacing.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
+* Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
+* Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
+* @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
+*   to 10px.
+* @returns The portaled panel.
 */
 function PopoverContent(t0) {
-	const $ = _c(15);
+	const $ = _c(17);
 	let className;
 	let props;
 	let t1;
 	let t2;
+	let t3;
 	if ($[0] !== t0) {
-		({className, align: t1, sideOffset: t2, ...props} = t0);
+		({className, align: t1, sideOffset: t2, collisionPadding: t3, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = props;
 		$[3] = t1;
 		$[4] = t2;
+		$[5] = t3;
 	} else {
 		className = $[1];
 		props = $[2];
 		t1 = $[3];
 		t2 = $[4];
+		t3 = $[5];
 	}
 	const align = t1 === undefined ? "center" : t1;
-	const sideOffset = t2 === undefined ? 4 : t2;
-	const t3 = props.forceMount;
-	let t4;
-	if ($[5] !== className) {
-		t4 = cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden ", className);
-		$[5] = className;
-		$[6] = t4;
+	const sideOffset = t2 === undefined ? POPOVER_SIDE_OFFSET_PX : t2;
+	const collisionPadding = t3 === undefined ? POPOVER_COLLISION_PADDING_PX : t3;
+	const t4 = props.forceMount;
+	let t5;
+	if ($[6] !== className) {
+		t5 = cn("z-50 flex max-h-(--radix-popover-content-available-height) w-72 max-w-[calc(100vw-20px)] origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 overflow-y-auto overscroll-contain *:shrink-0 rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
+		$[6] = className;
+		$[7] = t5;
 	} else {
-		t4 = $[6];
+		t5 = $[7];
 	}
-	let t5;
-	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
+	let t6;
+	if ($[8] !== align || $[9] !== collisionPadding || $[10] !== props || $[11] !== sideOffset || $[12] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(ArcFloatingSlot, {
+			motion: resolvePopoverMotion,
 			children: /* @__PURE__ */ _jsx(PopoverPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "popover-content",
 				align,
 				sideOffset,
-				className: t4,
+				collisionPadding,
+				className: t5,
 				...props
 			})
 		});
-		$[7] = align;
-		$[8] = props;
-		$[9] = sideOffset;
-		$[10] = t4;
-		$[11] = t5;
+		$[8] = align;
+		$[9] = collisionPadding;
+		$[10] = props;
+		$[11] = sideOffset;
+		$[12] = t5;
+		$[13] = t6;
 	} else {
-		t5 = $[11];
+		t6 = $[13];
 	}
-	let t6;
-	if ($[12] !== props.forceMount || $[13] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(PopoverPrimitive.Portal, {
+	let t7;
+	if ($[14] !== props.forceMount || $[15] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(PopoverPrimitive.Portal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "popover",
-				forceMount: t3,
-				children: t5
+				forceMount: t4,
+				children: t6
 			})
 		});
-		$[12] = props.forceMount;
-		$[13] = t5;
-		$[14] = t6;
+		$[14] = props.forceMount;
+		$[15] = t6;
+		$[16] = t7;
 	} else {
-		t6 = $[14];
+		t7 = $[16];
 	}
-	return t6;
+	return t7;
 }
 function PopoverAnchor(t0) {
 	const $ = _c(4);
@@ -280,4 +322,4 @@ function PopoverDescription(t0) {
 	}
 	return t2;
 }
-export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/components/radio-group.d.ts

@@ -1,5 +1,21 @@
-import * as React from "react";
+import type { ComponentProps } from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
-declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
+/**
+ * Hosts the radios, controlled or uncontrolled like Radix's radio group, and moves the highlight of option rows.
+ * @param radioGroupProps - Every Radix radio group prop, including `ref`.
+ * @returns The radio group.
+ */
+declare function RadioGroup({ className, children, value, defaultValue, onValueChange, ref, asChild, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>): import("react").JSX.Element;
+export type RadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    /** Visible option label: turns the item into Arc's option row, which also names the radio. */
+    label?: string;
+    /** Helper copy under the label, linked through `aria-describedby`. Shown only with a `label`. */
+    description?: string;
+};
+/**
+ * One radio of the group: a bare mark, or Arc's option row when it receives a `label`.
+ * @param radioGroupItemProps - Every Radix radio item prop, including `ref`, plus optional Arc `label` and `description`.
+ * @returns The radio, wrapped in its option row when it has a label.
+ */
+declare function RadioGroupItem({ className, label, description, id, value, ...props }: RadioGroupItemProps): import("react").JSX.Element;
 export { RadioGroup, RadioGroupItem };