beez-ui 2.7.1 → 3.0.1

package/dist/components/primitives/pagination.js

@@ -0,0 +1,373 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cva } from "class-variance-authority";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Landmark that holds the page controls.
+* @param props - Native `nav` attributes; the caller names it with `aria-label`.
+* @returns The navigation landmark.
+*/
+function PaginationRoot(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("mx-auto flex w-full justify-center", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("nav", {
+			"data-slot": "pagination",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/** Lists page controls; the current page's mark glides to the newly selected page. */
+function PaginationContent(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex flex-wrap items-center gap-(--space-1)", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(GlideSlot, {
+			preset: "pagination",
+			children: /* @__PURE__ */ _jsx("ul", {
+				"data-slot": "pagination-content",
+				className: t1,
+				...props
+			})
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+function PaginationItem(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("li", {
+			"data-slot": "pagination-item",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	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 paginationControlVariants = 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: {
+		page: "px-0",
+		step: "px-(--space-3)"
+	} },
+	defaultVariants: { size: "page" }
+});
+/**
+* Builds the attributes common to every control.
+* @param state - Whether the control is current or disabled, and its size.
+* @param className - Consumer classes.
+* @returns Attributes for the link or the button.
+*/
+function controlAttributes({ isActive, disabled, size = "page" }, className) {
+	return {
+		"aria-current": isActive ? "page" : undefined,
+		"aria-disabled": disabled ? true : undefined,
+		"data-slot": "pagination-link",
+		"data-active": isActive,
+		"data-size": size,
+		className: cn(paginationControlVariants({ size }), className)
+	};
+}
+/**
+* Wraps a click handler so a disabled control cancels the click before the native anchor, the router adapter (both
+* skip prevented clicks) or the consumer acts on it.
+* @param disabled - Whether the control is disabled.
+* @param onClick - Consumer click handler.
+* @returns The guarded handler.
+*/
+function guardDisabledClick(disabled, onClick) {
+	return (event) => {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+}
+/**
+* One page, rendered through the provider's `Link` adapter or the `component` passed to it. Disabled, it never
+* navigates, whether clicked or activated with Enter, and `onClick` is not called.
+* @param props - Control state and link props.
+* @returns The page link.
+*/
+function PaginationLink(t0) {
+	const $ = _c(19);
+	let className;
+	let disabled;
+	let isActive;
+	let onClick;
+	let props;
+	let size;
+	if ($[0] !== t0) {
+		({className, isActive, disabled, size, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = disabled;
+		$[3] = isActive;
+		$[4] = onClick;
+		$[5] = props;
+		$[6] = size;
+	} else {
+		className = $[1];
+		disabled = $[2];
+		isActive = $[3];
+		onClick = $[4];
+		props = $[5];
+		size = $[6];
+	}
+	let t1;
+	if ($[7] !== className || $[8] !== disabled || $[9] !== isActive || $[10] !== size) {
+		t1 = controlAttributes({
+			isActive,
+			disabled,
+			size
+		}, className);
+		$[7] = className;
+		$[8] = disabled;
+		$[9] = isActive;
+		$[10] = size;
+		$[11] = t1;
+	} else {
+		t1 = $[11];
+	}
+	let t2;
+	if ($[12] !== disabled || $[13] !== onClick) {
+		t2 = guardDisabledClick(disabled, onClick);
+		$[12] = disabled;
+		$[13] = onClick;
+		$[14] = t2;
+	} else {
+		t2 = $[14];
+	}
+	let t3;
+	if ($[15] !== props || $[16] !== t1 || $[17] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(Link, {
+			...t1,
+			...props,
+			onClick: t2
+		});
+		$[15] = props;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+	} else {
+		t3 = $[18];
+	}
+	return t3;
+}
+/**
+* One page as a button, for pagination kept in state. Disabled, it stays focusable and `onClick` is not called.
+* @param props - Control state and button props.
+* @returns The page button.
+*/
+function PaginationButton(t0) {
+	const $ = _c(21);
+	let className;
+	let disabled;
+	let isActive;
+	let onClick;
+	let props;
+	let size;
+	let t1;
+	if ($[0] !== t0) {
+		({className, isActive, disabled, size, onClick, type: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = disabled;
+		$[3] = isActive;
+		$[4] = onClick;
+		$[5] = props;
+		$[6] = size;
+		$[7] = t1;
+	} else {
+		className = $[1];
+		disabled = $[2];
+		isActive = $[3];
+		onClick = $[4];
+		props = $[5];
+		size = $[6];
+		t1 = $[7];
+	}
+	const type = t1 === undefined ? "button" : t1;
+	let t2;
+	if ($[8] !== className || $[9] !== disabled || $[10] !== isActive || $[11] !== size) {
+		t2 = controlAttributes({
+			isActive,
+			disabled,
+			size
+		}, className);
+		$[8] = className;
+		$[9] = disabled;
+		$[10] = isActive;
+		$[11] = size;
+		$[12] = t2;
+	} else {
+		t2 = $[12];
+	}
+	let t3;
+	if ($[13] !== disabled || $[14] !== onClick) {
+		t3 = guardDisabledClick(disabled, onClick);
+		$[13] = disabled;
+		$[14] = onClick;
+		$[15] = t3;
+	} else {
+		t3 = $[15];
+	}
+	let t4;
+	if ($[16] !== props || $[17] !== t2 || $[18] !== t3 || $[19] !== type) {
+		t4 = /* @__PURE__ */ _jsx("button", {
+			type,
+			...t2,
+			...props,
+			onClick: t3
+		});
+		$[16] = props;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = type;
+		$[20] = t4;
+	} else {
+		t4 = $[20];
+	}
+	return t4;
+}
+/**
+* A previous or next arrow: Arc presses it in, while page numbers stay still and let the mark travel.
+* @param props - Direction, copy, destination and state.
+* @returns The arrow link or button.
+*/
+function PaginationStep(t0) {
+	const $ = _c(11);
+	const { direction, text, label, href, disabled, onClick } = t0;
+	const reduceMotion = usePrefersReducedMotion();
+	const [element, attach] = useAttachedElement(undefined);
+	useArcPress(element, !reduceMotion);
+	let t1;
+	if ($[0] !== direction || $[1] !== text) {
+		t1 = direction === "previous" ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(ChevronLeftIcon, {
+			"data-icon": "inline-start",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ _jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		})] }) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		}), /* @__PURE__ */ _jsx(ChevronRightIcon, {
+			"data-icon": "inline-end",
+			"aria-hidden": "true"
+		})] });
+		$[0] = direction;
+		$[1] = text;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const content = t1;
+	const className = direction === "previous" ? "pl-(--space-2)" : "pr-(--space-2)";
+	let t2;
+	if ($[3] !== attach || $[4] !== className || $[5] !== content || $[6] !== disabled || $[7] !== href || $[8] !== label || $[9] !== onClick) {
+		t2 = href === undefined ? /* @__PURE__ */ _jsx(PaginationButton, {
+			ref: attach,
+			size: "step",
+			"aria-label": label,
+			className,
+			disabled,
+			onClick,
+			children: content
+		}) : /* @__PURE__ */ _jsx(PaginationLink, {
+			ref: attach,
+			size: "step",
+			href,
+			"aria-label": label,
+			className,
+			disabled,
+			onClick,
+			children: content
+		});
+		$[3] = attach;
+		$[4] = className;
+		$[5] = content;
+		$[6] = disabled;
+		$[7] = href;
+		$[8] = label;
+		$[9] = onClick;
+		$[10] = t2;
+	} else {
+		t2 = $[10];
+	}
+	return t2;
+}
+export { PaginationButton, PaginationContent, PaginationItem, PaginationLink, PaginationRoot, PaginationStep };

package/dist/components/primitives/popover.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Internal primitive of 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. Internal: the Radix composition, including `PopoverAnchor`, behind the public `Popover` and
+ * beez-ui's composite components; the package does not export it.
+ */
+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 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, collisionPadding, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/primitives/popover.js

@@ -0,0 +1,213 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Internal primitive of 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. Internal: the Radix composition, including `PopoverAnchor`, behind the public `Popover` and
+* beez-ui's composite components; the package does not export it.
+*/
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+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);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
+	let t1;
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
+		t1 = /* @__PURE__ */ _jsx(PopoverPrimitive.Root, {
+			"data-slot": "popover",
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
+		});
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "popover",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
+}
+function PopoverTrigger(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.Trigger, {
+			"data-slot": "popover-trigger",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	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 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(17);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== 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 ? 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 {
+		t5 = $[7];
+	}
+	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,
+				collisionPadding,
+				className: t5,
+				...props
+			})
+		});
+		$[8] = align;
+		$[9] = collisionPadding;
+		$[10] = props;
+		$[11] = sideOffset;
+		$[12] = t5;
+		$[13] = t6;
+	} else {
+		t6 = $[13];
+	}
+	let t7;
+	if ($[14] !== props.forceMount || $[15] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(PopoverPrimitive.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "popover",
+				forceMount: t4,
+				children: t6
+			})
+		});
+		$[14] = props.forceMount;
+		$[15] = t6;
+		$[16] = t7;
+	} else {
+		t7 = $[16];
+	}
+	return t7;
+}
+function PopoverAnchor(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.Anchor, {
+			"data-slot": "popover-anchor",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/primitives/select.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Internal primitive of Arc's Select (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Arc's trigger, whose
+ * hover, press and open states answer in color only so the anchored list never shifts, and its raised list with
+ * option rows and an end check, on Arc's tokens, with beez-ui's option entrance, check pop and chevron rotation.
+ * Internal: the Radix composition behind the public closed `Select`; the package does not export it.
+ */
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+/**
+ * Renders Arc's selection control: `default` matches the height of `Input` and `Button`, `sm` their small size.
+ * Hover only answers on fine pointers, keyboard focus draws the shared outline, and `aria-invalid` turns the border
+ * to the danger color.
+ * @param props - Primitive properties, the `size` and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+/**
+ * Renders Arc's raised option list, at least twelve rem wide so options stay readable. With `position="popper"` it
+ * grows from the trigger edge, matches the trigger width up to min(24rem, 100vw minus 20px), keeps 12px from the
+ * viewport edges and caps its height at 20rem.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function SelectContent({ className, children, position, align, collisionPadding, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+/**
+ * Renders Arc's option row: 36px tall, a muted fill when highlighted and the check of the chosen option at the end,
+ * while retaining selection and disabled semantics.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };