beez-ui 2.7.0 → 3.0.0

package/dist/components/primitives/avatar.js

@@ -0,0 +1,267 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { AnimatePresence, motion } from "motion/react";
+import { AVATAR_STATUS_HIDDEN_SCALE } from "../../constants/avatar.js";
+import { usePrefersReducedMotion } from "../../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../../lib/utils.js";
+import { ARC_DURATION, ARC_SPRING_SNAPPY } from "../../motion/arc-tokens.js";
+import { MotionSlot } from "../../motion/motion-slot.js";
+import { useBeezUIComponents } from "../../providers/beez-ui-provider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The presence ring: a surface-coloured gap plus a faint hairline, so the dot reads on photos and fills alike. */
+const presenceRingClassName = "shadow-[0_0_0_2px_var(--surface),0_0_0_3px_color-mix(in_oklab,var(--border)_70%,transparent)]";
+/**
+* The avatar circle with its optional presence dot.
+* @param props - Size, optional presence and the Base UI avatar root props.
+* @returns The avatar root.
+*/
+function AvatarRoot(t0) {
+	const $ = _c(19);
+	let children;
+	let className;
+	let props;
+	let status;
+	let t1;
+	if ($[0] !== t0) {
+		({className, size: t1, status, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = status;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		status = $[4];
+		t1 = $[5];
+	}
+	const size = t1 === undefined ? "md" : t1;
+	const reduceMotion = usePrefersReducedMotion();
+	let t2;
+	if ($[6] !== className) {
+		t2 = cn("group/avatar relative inline-grid size-8 shrink-0 place-items-center rounded-(--radius-pill) border border-border bg-surface-muted text-xs font-medium text-foreground select-none data-[size=lg]:size-10 data-[size=lg]:text-sm data-[size=sm]:size-6 data-[size=sm]:text-[10px] data-[size=xl]:size-22 data-[size=xl]:text-xl", className);
+		$[6] = className;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	let t3;
+	if ($[8] !== reduceMotion || $[9] !== status) {
+		t3 = status ? /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "avatar-status",
+			"data-status": status,
+			"aria-hidden": "true",
+			className: cn("absolute right-0 bottom-0 z-10 size-2.5 rounded-(--radius-pill) data-[status=offline]:bg-text-muted data-[status=online]:bg-success group-data-[size=lg]/avatar:size-3 group-data-[size=sm]/avatar:size-2 group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1 group-data-[size=xl]/avatar:size-3.5 group-has-data-[slot=avatar-badge]/avatar:top-0 group-has-data-[slot=avatar-badge]/avatar:bottom-auto group-data-[size=xl]/avatar:group-has-data-[slot=avatar-badge]/avatar:top-1", presenceRingClassName),
+			initial: {
+				opacity: 0,
+				scale: AVATAR_STATUS_HIDDEN_SCALE
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: AVATAR_STATUS_HIDDEN_SCALE,
+				transition: { duration: reduceMotion ? 0 : ARC_DURATION.fast }
+			},
+			transition: reduceMotion ? { duration: 0 } : ARC_SPRING_SNAPPY
+		}, status) : null;
+		$[8] = reduceMotion;
+		$[9] = status;
+		$[10] = t3;
+	} else {
+		t3 = $[10];
+	}
+	let t4;
+	if ($[11] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t3
+		});
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t4 = $[12];
+	}
+	let t5;
+	if ($[13] !== children || $[14] !== props || $[15] !== size || $[16] !== t2 || $[17] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "fade",
+			children: /* @__PURE__ */ _jsxs(AvatarPrimitive.Root, {
+				"data-slot": "avatar",
+				"data-size": size,
+				className: t2,
+				...props,
+				children: [children, t4]
+			})
+		});
+		$[13] = children;
+		$[14] = props;
+		$[15] = size;
+		$[16] = t2;
+		$[17] = t4;
+		$[18] = t5;
+	} else {
+		t5 = $[18];
+	}
+	return t5;
+}
+/**
+* The photo. Delegates loading, failure and fallback synchronization to the avatar primitive and renders through the
+* provider's `Image` adapter; loaded images develop in place.
+* @param props - Native image props with a nullable source.
+* @returns The image, mounted while it loads so the fallback can stay until it is ready.
+*/
+function AvatarImage(t0) {
+	const $ = _c(15);
+	let className;
+	let props;
+	let src;
+	let t1;
+	if ($[0] !== t0) {
+		({alt: t1, className, src, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = src;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		src = $[3];
+		t1 = $[4];
+	}
+	const alt = t1 === undefined ? "" : t1;
+	const { Image: t2 } = useBeezUIComponents();
+	const ImageComponent = t2 === undefined ? "img" : t2;
+	let t3;
+	if ($[5] !== ImageComponent) {
+		t3 = /* @__PURE__ */ _jsx(ImageComponent, {});
+		$[5] = ImageComponent;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	let t4;
+	if ($[7] !== className) {
+		t4 = cn("pointer-events-none absolute inset-0 aspect-square size-full rounded-full object-cover data-[loading]:opacity-0 data-[error]:hidden", className);
+		$[7] = className;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	const t5 = src ?? undefined;
+	let t6;
+	if ($[9] !== alt || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "reveal",
+			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
+				render: t3,
+				keepMounted: true,
+				alt,
+				"data-slot": "avatar-image",
+				className: t4,
+				src: t5,
+				loading: "lazy",
+				decoding: "async",
+				...props
+			})
+		});
+		$[9] = alt;
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t6 = $[14];
+	}
+	return t6;
+}
+/**
+* Initials or another stand-in, shown until the photo loads or when it fails.
+* @param props - Base UI fallback props.
+* @returns The fallback.
+*/
+function AvatarFallback(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 size-full items-center justify-center rounded-full bg-surface-muted text-[length:inherit] font-medium text-foreground", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AvatarPrimitive.Fallback, {
+			"data-slot": "avatar-fallback",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* A custom corner badge, drawn with the same ring as Arc's presence dot.
+* @param props - Native span props.
+* @returns The badge.
+*/
+function AvatarBadge(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("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color select-none", presenceRingClassName, "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", "group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1 group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "avatar-badge",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+export { AvatarRoot, AvatarImage, AvatarFallback, AvatarBadge };

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

@@ -0,0 +1,37 @@
+/**
+ * Arc's Calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on react-day-picker: round day cells
+ * on a 4px grid, the month title on the left with quiet pill controls on the right, today marked by a dot under its
+ * number, a selected disc that glides between days and an optional Today button. react-day-picker keeps selection
+ * modes, ranges, dropdowns, locales and keyboard navigation; only the design and the motion come from Arc.
+ */
+import * as React from "react";
+import { DayPicker, type DayButton, type Locale } from "react-day-picker";
+import { ControlButton } from "../control-button.js";
+type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    /** Variant of the month navigation buttons, kept for compatibility; Arc's look is the default `ghost`. */
+    buttonVariant?: React.ComponentProps<typeof ControlButton>["variant"];
+    /**
+     * Adds Arc's Today button before the month controls: it goes back to the month holding today and, in single
+     * selection mode, selects today when it is available. It rests dimmed while there is nothing left to do.
+     */
+    showToday?: boolean;
+    /** Copy of the Today button. Defaults to "Hoy". */
+    todayLabel?: string;
+};
+/**
+ * A month grid for picking a day, several days or a range, controlled or uncontrolled like react-day-picker.
+ * @param props - Every react-day-picker prop plus the Arc additions `showToday` and `todayLabel`.
+ * @returns The calendar, in Spanish by default.
+ */
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, showToday, todayLabel, ...props }: CalendarProps): React.JSX.Element;
+/**
+ * One day of the grid: a round cell whose fill answers hover on fine pointers, presses in slightly and marks today
+ * with a dot under its number that takes the number's colour.
+ * @param props - react-day-picker day button properties plus the locale used for `data-day`.
+ * @returns The day button.
+ */
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
+    locale?: Partial<Locale>;
+}): React.JSX.Element;
+export { Calendar, CalendarDayButton };
+export type { CalendarProps };