beez-ui 2.7.0 → 3.0.0

package/dist/components/field.d.ts

@@ -38,6 +38,8 @@ export declare function useFieldAria({ id, description, error, ...aria }: FieldA
 export declare function usesFieldCopy(props: FieldCopyProps): boolean;
 type FieldProps = Omit<FieldCopyProps, "label"> & {
     label?: string;
+    /** Keeps the label for assistive technology only, for layouts that already show their own label. */
+    hideLabel?: boolean;
     aria: FieldAria;
     className?: string;
     children: ReactNode;
@@ -47,5 +49,5 @@ type FieldProps = Omit<FieldCopyProps, "label"> & {
  * a negative margin at zero and a closed row would still pay it; each row carries its own space instead. The wrapper
  * keeps the bare control's full-width contract, so a field fills a flex row like the control alone does.
  */
-export declare function Field({ label, description, error, aria, className, children }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, hideLabel, description, error, aria, className, children }: FieldProps): import("react").JSX.Element;
 export {};

package/dist/components/field.js

@@ -31,6 +31,14 @@ const digitVariants = {
 };
 const instantTransition = { duration: 0 };
 /**
+* Arc `spring.snappy` without its bounce: a rolled digit must land on its line, since even the small overshoot of the
+* bouncy preset pushes it past rest toward the side it came from.
+*/
+const digitRollSpring = {
+	...ARC_SPRING_SNAPPY,
+	bounce: 0
+};
+/**
 * Reads one component of a count as a number, in English or Spanish formatting: grouping separators are dropped and
 * a decimal comma becomes a point.
 * @param component - A count, or one side of a time or ratio.
@@ -109,7 +117,7 @@ function RollingNumber(t0) {
 		let t4;
 		if ($[8] !== reduceMotion) {
 			t4 = reduceMotion ? instantTransition : {
-				y: ARC_SPRING_SNAPPY,
+				y: digitRollSpring,
 				width: ARC_SPRING_MORPH,
 				opacity: { duration: ARC_DURATION.fast },
 				filter: { duration: ARC_DURATION.fast }
@@ -624,77 +632,79 @@ export function usesFieldCopy(props) {
 * keeps the bare control's full-width contract, so a field fills a flex row like the control alone does.
 */
 export function Field(t0) {
-	const $ = _c(17);
-	const { label, description, error, aria, className, children } = t0;
-	let t1;
+	const $ = _c(18);
+	const { label, hideLabel: t1, description, error, aria, className, children } = t0;
+	const hideLabel = t1 === undefined ? false : t1;
+	let t2;
 	if ($[0] !== className) {
-		t1 = cn("grid w-full min-w-0", className);
+		t2 = cn("grid w-full min-w-0", className);
 		$[0] = className;
-		$[1] = t1;
+		$[1] = t2;
 	} else {
-		t1 = $[1];
+		t2 = $[1];
 	}
-	let t2;
-	if ($[2] !== aria.controlId || $[3] !== label) {
-		t2 = label ? /* @__PURE__ */ _jsx("label", {
+	let t3;
+	if ($[2] !== aria.controlId || $[3] !== hideLabel || $[4] !== label) {
+		t3 = label ? /* @__PURE__ */ _jsx("label", {
 			"data-slot": "field-label",
 			htmlFor: aria.controlId,
-			className: "mb-(--space-2) text-sm leading-(--leading-body) font-medium text-foreground",
+			className: hideLabel ? "sr-only" : "mb-(--space-2) text-sm leading-(--leading-body) font-medium text-foreground",
 			children: label
 		}) : null;
 		$[2] = aria.controlId;
-		$[3] = label;
-		$[4] = t2;
+		$[3] = hideLabel;
+		$[4] = label;
+		$[5] = t3;
 	} else {
-		t2 = $[4];
+		t3 = $[5];
 	}
-	let t3;
-	if ($[5] !== aria.descriptionId || $[6] !== description) {
-		t3 = /* @__PURE__ */ _jsx(FieldMessage, {
+	let t4;
+	if ($[6] !== aria.descriptionId || $[7] !== description) {
+		t4 = /* @__PURE__ */ _jsx(FieldMessage, {
 			id: aria.descriptionId,
 			text: description,
 			className: "text-text-muted"
 		});
-		$[5] = aria.descriptionId;
-		$[6] = description;
-		$[7] = t3;
+		$[6] = aria.descriptionId;
+		$[7] = description;
+		$[8] = t4;
 	} else {
-		t3 = $[7];
+		t4 = $[8];
 	}
-	let t4;
-	if ($[8] !== aria.errorId || $[9] !== error) {
-		t4 = /* @__PURE__ */ _jsx(FieldMessage, {
+	let t5;
+	if ($[9] !== aria.errorId || $[10] !== error) {
+		t5 = /* @__PURE__ */ _jsx(FieldMessage, {
 			id: aria.errorId,
 			text: error,
 			className: "text-danger",
 			alert: true
 		});
-		$[8] = aria.errorId;
-		$[9] = error;
-		$[10] = t4;
+		$[9] = aria.errorId;
+		$[10] = error;
+		$[11] = t5;
 	} else {
-		t4 = $[10];
+		t5 = $[11];
 	}
-	let t5;
-	if ($[11] !== children || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
-		t5 = /* @__PURE__ */ _jsxs("div", {
+	let t6;
+	if ($[12] !== children || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs("div", {
 			"data-slot": "field",
-			className: t1,
+			className: t2,
 			children: [
-				t2,
-				children,
 				t3,
-				t4
+				children,
+				t4,
+				t5
 			]
 		});
-		$[11] = children;
-		$[12] = t1;
+		$[12] = children;
 		$[13] = t2;
 		$[14] = t3;
 		$[15] = t4;
 		$[16] = t5;
+		$[17] = t6;
 	} else {
-		t5 = $[16];
+		t6 = $[17];
 	}
-	return t5;
+	return t6;
 }

package/dist/components/filter-presets-bar.js

@@ -11,8 +11,8 @@ import { ControlButton } from "./control-button.js";
 import { FilterQueryBar } from "./filter-query-bar.js";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./primitives/tooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ENTER_KEY = "Enter";
 /** Suggestions of the query editor render in their own popover, outside the edit popover. */

package/dist/components/filter-query-bar.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Calendar, Check, CircleDot, CircleMinus, CircleSlash, Folder, Hash, List, Type, User, X } from "lucide-react";
 import { ControlButton } from "./control-button.js";
 import { Input } from "./input.js";
-import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
+import { Popover, PopoverAnchor, PopoverContent } from "./primitives/popover.js";
 import { GlideSlot } from "../motion/glide-slot.js";
 import { cn } from "../lib/utils.js";
 import { getActiveFilterToken, getValueHighlightRanges, normalizeFilterSlug, parseFilterQuery, PRESENCE_HAS_META_KEY, PRESENCE_NO_META_KEY, UNASSIGNED_FOLDER_FILTER_VALUE } from "./filter-query-grammar.js";

package/dist/components/hover-card.d.ts

@@ -2,48 +2,49 @@
  * Arc's Hover Card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a read-only preview of a person or
  * link that opens after half a second of hover or on keyboard focus, grows from the trigger edge on a smooth spring
  * and closes fast on leave. While a card is open, and briefly after it closes, moving to another trigger opens its
- * card almost at once and only fades. It keeps the Radix composition and adds Arc's `HoverCardProfile` preset.
+ * card almost at once and only fades. It follows Arc's closed API, `<HoverCard content={...}>` around its trigger,
+ * with Arc's `HoverCardProfile` preset and open state and placement extensions.
  */
-import * as React from "react";
-import { HoverCard as HoverCardPrimitive } from "radix-ui";
-/**
- * Owns the open state and timing of one hover card.
- * @param props - Radix root properties. `openDelay` defaults to Arc's 500ms and `closeDelay` to 140ms; within the
- *   skip window the card waits at most 80ms.
- * @returns The hover card root.
- */
-declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
-declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
-/**
- * Renders Arc's card: raised surface, hairline border, panel radius and floating shadow, 18.5rem wide at most.
- * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 8px and `collisionPadding`
- *   to 12px.
- * @returns The portaled card.
- */
-declare function HoverCardContent({ className, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
-/** One number of `HoverCardProfile`, such as followers or projects. */
-export interface HoverCardStat {
-    label: string;
-    value: string | number;
-}
-/** A person preview for `HoverCardContent`. */
-export interface HoverCardProfileProps {
-    name: string;
-    /** Role and team, such as "Diseñadora de producto, Pagos". */
-    role?: string;
-    /** A portrait URL, or your own image element such as an `Image` adapter. Initials show when it is missing. */
-    avatar?: string | React.ReactNode;
-    bio?: string;
-    stats?: HoverCardStat[];
-    /** A footer line, such as a location and local time. */
-    meta?: React.ReactNode;
+import type { ReactElement, ReactNode } from "react";
+import { HoverCardProfile, type HoverCardProfileProps, type HoverCardStat } from "./primitives/hover-card.js";
+/** Side of the trigger a hover card prefers. */
+export type HoverCardSide = "top" | "bottom" | "left" | "right";
+/** Alignment of the card against its trigger. */
+export type HoverCardAlign = "start" | "center" | "end";
+export type HoverCardProps = {
+    /** The trigger, such as a mention button or link. Rendered with `asChild`, so it must accept a ref and be focusable. */
+    children: ReactElement;
+    /** The preview. `HoverCardProfile` covers people. Keep it read only: focus never moves into the card. */
+    content: ReactNode;
+    /** Preferred side of the trigger. Defaults to `bottom`. */
+    side?: HoverCardSide;
+    /** Alignment against the trigger. Defaults to `start`. */
+    align?: HoverCardAlign;
+    /** Milliseconds of hover before the first card opens. Defaults to 500. */
+    openDelay?: number;
+    /** Grace, in milliseconds, after the pointer leaves. Defaults to 140. */
+    closeDelay?: number;
+    /** Class on the card surface. */
     className?: string;
-}
+    /** Class on the card surface, merged after `className`. */
+    contentClassName?: string;
+    /** Gap, in px, between the card and its trigger. Defaults to 8. */
+    sideOffset?: number;
+    /** Distance, in px, the card keeps from the viewport edges. Defaults to 12. */
+    collisionPadding?: number;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the card opens or closes, for example to load its data on open. */
+    onOpenChange?: (open: boolean) => void;
+};
 /**
- * Arc's person preview: portrait, name, role, a short bio, a couple of numbers and a quiet footer line. Its rows
- * settle in with a tiny stagger, and stay still when the user prefers reduced motion.
- * @param props - The person's details.
- * @returns The profile, meant as the child of `HoverCardContent`.
+ * A read-only preview that opens after a short hover or keyboard focus and stays open while the pointer travels into
+ * it.
+ * @param props - The trigger, the preview and optional timing, placement and open state.
+ * @returns The trigger with its hover card.
  */
-declare function HoverCardProfile({ name, role, avatar, bio, stats, meta, className }: HoverCardProfileProps): React.JSX.Element;
-export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardProfile };
+declare function HoverCard({ children, content, side, align, openDelay, closeDelay, className, contentClassName, sideOffset, collisionPadding, open, defaultOpen, onOpenChange, }: HoverCardProps): import("react").JSX.Element;
+export { HoverCard, HoverCardProfile };
+export type { HoverCardProfileProps, HoverCardStat };