beez-ui 2.7.1 → 3.0.1

package/dist/components/badge.d.ts

@@ -1,41 +1,21 @@
 import type { ComponentProps, ReactNode } from "react";
-/** shadcn-compatible visual variants, each drawn with one of Arc's tones. */
-export type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
-/** Arc's semantic tones; a `tone` wins over the tone implied by `variant`. */
+/** Arc's semantic tones. */
 export type BadgeTone = "neutral" | "success" | "info" | "warning" | "danger";
 /** Arc's badge heights: 26px (`md`) and 22px (`sm`). */
 export type BadgeSize = "sm" | "md";
-/** Options of `badgeVariants`, for styling links or other elements as badges. */
-export type BadgeVariantsOptions = {
-    variant?: BadgeVariant | null;
-    tone?: BadgeTone | null;
-    size?: BadgeSize | null;
-    className?: string;
-};
-/**
- * Arc's badge classes for any element. Without a `tone`, the tone implied by `variant` is used, as in `Badge`.
- * @param options - Variant, tone, size and extra classes.
- * @returns The class list.
- */
-declare function badgeVariants({ variant, tone, size, className }?: BadgeVariantsOptions): string;
 export type BadgeProps = ComponentProps<"span"> & {
-    /** shadcn-compatible variant, drawn with an Arc tone: default (info), secondary, outline and ghost (neutral),
-     * destructive (danger) and link (info, underlined on hover). */
-    variant?: BadgeVariant | null;
-    /** Arc's semantic tone; overrides the tone implied by `variant`. */
+    /** Arc's semantic tone: `neutral` (default), `success`, `info`, `warning` or `danger`. */
     tone?: BadgeTone;
     /** Arc's height: `md` (26px, default) or `sm` (22px). */
     size?: BadgeSize;
-    /** A leading icon tinted with the tone, hidden from assistive technology. */
+    /** A leading icon tinted with the tone, hidden from assistive technology. A different icon component crossfades in. */
     icon?: ReactNode;
-    /** Renders the child element instead of a span, merging the badge props into it. Text and icon swaps are off. */
-    asChild?: boolean;
 };
 /**
- * A small label for status, category or metadata. Text children swap in place with Arc's motion and the pill springs
- * to the new width; other children render as they are.
- * @param props - Variant, tone, size, optional icon and native span attributes.
+ * A small label for status, category or metadata. String or number children swap in place with Arc's motion and the
+ * pill springs to the new width; other children render as they are.
+ * @param props - Tone, size, optional icon and native span attributes.
  * @returns The badge.
  */
-declare function Badge({ className, variant, tone, size, icon, asChild, children, ...props }: BadgeProps): import("react").JSX.Element;
-export { Badge, badgeVariants };
+declare function Badge({ className, tone, size, icon, children, ...props }: BadgeProps): import("react").JSX.Element;
+export { Badge };

package/dist/components/badge.js

@@ -3,12 +3,11 @@ import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Badge (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a small pill for status, category or
 * metadata on Arc's tones and tokens. A new text label rises in while the pill springs to its new width, and a new
-* icon crossfades in place. The shadcn variants are kept and mapped onto Arc's tones.
+* icon crossfades in place. The API is Arc's: `tone`, `size`, `icon` and `children`.
 */
 import { isValidElement, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
-import { Slot } from "radix-ui";
 import { BADGE_LABEL_OFFSET_EM } from "../constants/badge.js";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
@@ -17,58 +16,23 @@ import { ARC_ICON_ENTER, ARC_ICON_EXIT, ARC_ICON_TRANSITION, ARC_REDUCED_EXIT, A
 import { MotionSlot } from "../motion/motion-slot.js";
 import { useMorphWidth } from "../motion/use-morph-width.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/** The Arc tone each shadcn variant is drawn with when no explicit `tone` is passed. */
-const VARIANT_TONE = {
-	default: "info",
-	secondary: "neutral",
-	destructive: "danger",
-	outline: "neutral",
-	ghost: "neutral",
-	link: "info"
-};
 /**
 * Arc's badge recipe. Each tone sets the pill's colour roles as custom properties, so hover can mix the tone into the
-* border and fill; variants only adjust the fill and border afterwards. Hover answers on fine pointers only.
+* border and fill. Hover answers on fine pointers only.
 */
-const badgeRecipe = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-clip rounded-(--radius-pill) border border-(--badge-border) bg-(--badge-background) leading-none font-medium tracking-[-.01em] whitespace-nowrap text-(--badge-foreground) transition-[border-color,background-color,color] duration-(--duration-standard) ease-(--ease-standard) motion-reduce:duration-(--duration-instant) hover-fine:border-[color-mix(in_oklab,var(--badge-color)_32%,var(--border))] hover-fine:bg-[color-mix(in_oklab,var(--badge-color)_10%,var(--surface))] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-danger [&>svg]:pointer-events-none [&>svg]:size-3! [&>svg]:text-(--badge-color)", {
-	variants: {
-		tone: {
-			neutral: "[--badge-background:var(--surface-muted)] [--badge-border:var(--border)] [--badge-color:var(--text-secondary)] [--badge-foreground:var(--text-secondary)]",
-			success: "[--badge-background:color-mix(in_oklab,var(--success)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--success)_25%,var(--border))] [--badge-color:var(--success)] [--badge-foreground:var(--success)]",
-			info: "[--badge-background:var(--accent-subtle)] [--badge-border:color-mix(in_oklab,var(--accent)_24%,var(--border))] [--badge-color:var(--accent)] [--badge-foreground:var(--accent-strong)]",
-			warning: "[--badge-background:color-mix(in_oklab,var(--warning)_11%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--warning)_27%,var(--border))] [--badge-color:var(--warning)] [--badge-foreground:var(--warning)]",
-			danger: "[--badge-background:color-mix(in_oklab,var(--danger)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--danger)_26%,var(--border))] [--badge-color:var(--danger)] [--badge-foreground:var(--danger)]"
-		},
-		variant: {
-			default: "",
-			secondary: "",
-			destructive: "",
-			outline: "[--badge-background:var(--surface)] [--badge-foreground:var(--foreground)]",
-			ghost: "[--badge-background:transparent] [--badge-border:transparent]",
-			link: "[--badge-background:transparent] [--badge-border:transparent] underline-offset-4 hover-fine:border-transparent hover-fine:bg-transparent hover-fine:underline"
-		},
-		size: {
-			sm: "min-h-[22px] gap-1 px-2 text-[11px]",
-			md: "min-h-[26px] gap-[5px] px-2.5 text-xs"
-		}
+const badgeRecipe = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-clip rounded-(--radius-pill) border border-(--badge-border) bg-(--badge-background) leading-none font-medium tracking-[-.01em] whitespace-nowrap text-(--badge-foreground) transition-[border-color,background-color,color] duration-(--duration-standard) ease-(--ease-standard) motion-reduce:duration-(--duration-instant) hover-fine:border-[color-mix(in_oklab,var(--badge-color)_32%,var(--border))] hover-fine:bg-[color-mix(in_oklab,var(--badge-color)_10%,var(--surface))] aria-invalid:border-danger [&>svg]:pointer-events-none [&>svg]:size-3! [&>svg]:text-(--badge-color)", { variants: {
+	tone: {
+		neutral: "[--badge-background:var(--surface-muted)] [--badge-border:var(--border)] [--badge-color:var(--text-secondary)] [--badge-foreground:var(--text-secondary)]",
+		success: "[--badge-background:color-mix(in_oklab,var(--success)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--success)_25%,var(--border))] [--badge-color:var(--success)] [--badge-foreground:var(--success)]",
+		info: "[--badge-background:var(--accent-subtle)] [--badge-border:color-mix(in_oklab,var(--accent)_24%,var(--border))] [--badge-color:var(--accent)] [--badge-foreground:var(--accent-strong)]",
+		warning: "[--badge-background:color-mix(in_oklab,var(--warning)_11%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--warning)_27%,var(--border))] [--badge-color:var(--warning)] [--badge-foreground:var(--warning)]",
+		danger: "[--badge-background:color-mix(in_oklab,var(--danger)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--danger)_26%,var(--border))] [--badge-color:var(--danger)] [--badge-foreground:var(--danger)]"
 	},
-	defaultVariants: {
-		variant: "default",
-		size: "md"
+	size: {
+		sm: "min-h-[22px] gap-1 px-2 text-[11px]",
+		md: "min-h-[26px] gap-[5px] px-2.5 text-xs"
 	}
-});
-/**
-* Arc's badge classes for any element. Without a `tone`, the tone implied by `variant` is used, as in `Badge`.
-* @param options - Variant, tone, size and extra classes.
-* @returns The class list.
-*/
-function badgeVariants({ variant, tone, size, className } = {}) {
-	return cn(badgeRecipe({
-		tone: tone ?? VARIANT_TONE[variant ?? "default"],
-		variant,
-		size
-	}), className);
-}
+} });
 /** A new label rises out of a soft blur; the old one lifts away faster. */
 const labelEnter = {
 	opacity: 0,
@@ -243,23 +207,21 @@ function BadgeIcon(t0) {
 	return t4;
 }
 /**
-* A small label for status, category or metadata. Text children swap in place with Arc's motion and the pill springs
-* to the new width; other children render as they are.
-* @param props - Variant, tone, size, optional icon and native span attributes.
+* A small label for status, category or metadata. String or number children swap in place with Arc's motion and the
+* pill springs to the new width; other children render as they are.
+* @param props - Tone, size, optional icon and native span attributes.
 * @returns The badge.
 */
 function Badge(t0) {
-	const $ = _c(28);
+	const $ = _c(22);
 	let children;
 	let className;
 	let icon;
 	let props;
 	let t1;
 	let t2;
-	let t3;
-	let tone;
 	if ($[0] !== t0) {
-		({className, variant: t1, tone, size: t2, icon, asChild: t3, children, ...props} = t0);
+		({className, tone: t1, size: t2, icon, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -267,8 +229,6 @@ function Badge(t0) {
 		$[4] = props;
 		$[5] = t1;
 		$[6] = t2;
-		$[7] = t3;
-		$[8] = tone;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -276,20 +236,14 @@ function Badge(t0) {
 		props = $[4];
 		t1 = $[5];
 		t2 = $[6];
-		t3 = $[7];
-		tone = $[8];
 	}
-	const variant = t1 === undefined ? "default" : t1;
+	const tone = t1 === undefined ? "neutral" : t1;
 	const size = t2 === undefined ? "md" : t2;
-	const asChild = t3 === undefined ? false : t3;
 	const reduceMotion = usePrefersReducedMotion();
-	const resolvedVariant = variant ?? "default";
-	const resolvedTone = tone ?? VARIANT_TONE[resolvedVariant];
 	const label = typeof children === "string" || typeof children === "number" ? String(children) : null;
-	const Component = asChild ? Slot.Root : "span";
-	let t4;
-	if ($[9] !== asChild || $[10] !== children || $[11] !== icon || $[12] !== label || $[13] !== reduceMotion) {
-		t4 = asChild ? children : label === null ? /* @__PURE__ */ _jsxs(_Fragment, { children: [icon ? /* @__PURE__ */ _jsx(BadgeIcon, {
+	let t3;
+	if ($[7] !== children || $[8] !== icon || $[9] !== label || $[10] !== reduceMotion) {
+		t3 = label === null ? /* @__PURE__ */ _jsxs(_Fragment, { children: [icon ? /* @__PURE__ */ _jsx(BadgeIcon, {
 			icon,
 			iconKey: getIconKey(icon),
 			reduceMotion
@@ -298,57 +252,50 @@ function Badge(t0) {
 			label,
 			reduceMotion
 		});
-		$[9] = asChild;
-		$[10] = children;
-		$[11] = icon;
-		$[12] = label;
-		$[13] = reduceMotion;
-		$[14] = t4;
+		$[7] = children;
+		$[8] = icon;
+		$[9] = label;
+		$[10] = reduceMotion;
+		$[11] = t3;
 	} else {
-		t4 = $[14];
+		t3 = $[11];
 	}
-	const content = t4;
-	let t5;
-	if ($[15] !== className || $[16] !== resolvedTone || $[17] !== resolvedVariant || $[18] !== size) {
-		t5 = badgeVariants({
-			tone: resolvedTone,
-			variant: resolvedVariant,
-			size,
-			className
-		});
-		$[15] = className;
-		$[16] = resolvedTone;
-		$[17] = resolvedVariant;
-		$[18] = size;
-		$[19] = t5;
+	const content = t3;
+	let t4;
+	if ($[12] !== className || $[13] !== size || $[14] !== tone) {
+		t4 = cn(badgeRecipe({
+			tone,
+			size
+		}), className);
+		$[12] = className;
+		$[13] = size;
+		$[14] = tone;
+		$[15] = t4;
 	} else {
-		t5 = $[19];
+		t4 = $[15];
 	}
-	let t6;
-	if ($[20] !== Component || $[21] !== content || $[22] !== props || $[23] !== resolvedTone || $[24] !== resolvedVariant || $[25] !== size || $[26] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
+	let t5;
+	if ($[16] !== content || $[17] !== props || $[18] !== size || $[19] !== t4 || $[20] !== tone) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "fade",
-			children: /* @__PURE__ */ _jsx(Component, {
+			children: /* @__PURE__ */ _jsx("span", {
 				"data-slot": "badge",
-				"data-variant": resolvedVariant,
-				"data-tone": resolvedTone,
+				"data-tone": tone,
 				"data-size": size,
-				className: t5,
+				className: t4,
 				...props,
 				children: content
 			})
 		});
-		$[20] = Component;
-		$[21] = content;
-		$[22] = props;
-		$[23] = resolvedTone;
-		$[24] = resolvedVariant;
-		$[25] = size;
-		$[26] = t5;
-		$[27] = t6;
+		$[16] = content;
+		$[17] = props;
+		$[18] = size;
+		$[19] = t4;
+		$[20] = tone;
+		$[21] = t5;
 	} else {
-		t6 = $[27];
+		t5 = $[21];
 	}
-	return t6;
+	return t5;
 }
-export { Badge, badgeVariants };
+export { Badge };

package/dist/components/calendar.d.ts

@@ -1,37 +1,47 @@
 /**
- * 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.
+ * Arc's Calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as a closed component: one month for
+ * picking one date, with a sliding month change, a gliding selected disc and an optional Today button. It renders on
+ * the internal react-day-picker composition, which keeps keyboard navigation and accessible day labels.
  */
 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"];
+import { useToday } from "../hooks/use-today.js";
+export { useToday };
+/** Returns `true` for a day that cannot be picked, such as a weekend. */
+type CalendarDateMatcher = (date: Date) => boolean;
+/** Props of {@link Calendar}: Arc's calendar API plus the beez-ui extensions marked below. */
+type CalendarProps = {
+    /** Selected date. Controlled only: the calendar shows what it receives. */
+    value?: Date | null;
+    /** Called with the day the viewer picks, including from the Today button. */
+    onChange?: (date: Date) => void;
+    /** Controlled visible month. Without it the calendar opens on the month of `value`, or on today's. */
+    month?: Date;
+    /** Called with the first day of the month the viewer navigates to. */
+    onMonthChange?: (month: Date) => void;
+    /** Earliest selectable day; navigation stops at its month. */
+    minDate?: Date;
+    /** Latest selectable day; navigation stops at its month. */
+    maxDate?: Date;
+    /** Return `true` to block a day, such as weekends. */
+    disabledDates?: CalendarDateMatcher;
     /**
-     * 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.
+     * BCP 47 locale for month, weekday and day names. Defaults to `"es-AR"`, with weeks starting on Monday. Spanish and
+     * English locales are fully translated; any other keeps English accessible labels with `Intl` month and weekday names.
      */
+    locale?: string;
+    /** Class of the calendar root. */
+    className?: string;
+    /** Adds a Today button that returns to the current month and selects today when it is allowed. */
     showToday?: boolean;
-    /** Copy of the Today button. Defaults to "Hoy". */
+    /** beez-ui: 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`.
+ * A month grid for picking one date. Days before `minDate`, after `maxDate` or matched by `disabledDates` are blocked,
+ * and navigation stops at the months of `minDate` and `maxDate`.
+ * @param props - Arc's calendar props plus `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 };
+declare function Calendar({ value, onChange, month, onMonthChange, minDate, maxDate, disabledDates, locale, className, showToday, todayLabel, }: CalendarProps): React.JSX.Element;
+export { Calendar };
+export type { CalendarDateMatcher, CalendarProps };