beez-ui 2.7.1 → 3.0.0

package/dist/components/animated-theme-toggler.js

@@ -6,7 +6,7 @@ import { animate, frame } from "motion/react";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MOTION_EASE } from "../motion/tokens.js";
 import { useTheme } from "next-themes";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
 import { MILLISECONDS_PER_SECOND, REDUCED_MOTION_QUERY } from "../constants/motion.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/components/avatar.d.ts

@@ -1,40 +1,65 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { AvatarGroupSize, AvatarSize, AvatarStatus } from "../constants/avatar.js";
+export type { AvatarGroupSize, AvatarSize, AvatarStatus };
+export type AvatarProps = Omit<ComponentProps<"span">, "children"> & {
+    /** Full name: the accessible name of the avatar and the source of its first two initials. */
+    name: string;
+    /** Photo URL, rendered through the provider's `Image` adapter. Falls back to the initials if it fails to load. */
+    src?: string | null;
+    /** Diameter: 24px (`sm`), 32px (`md`, default), 40px (`lg`) or Arc's 88px profile size (`xl`). */
+    size?: AvatarSize;
+    /** Adds a presence dot and appends the presence to the accessible name. */
+    status?: AvatarStatus;
+    /** Presence text appended to the accessible name; defaults to "En línea" or "Desconectado". */
+    statusLabel?: string;
+    /** Replaces the initials, for example with an icon. */
+    fallback?: ReactNode;
+    /** A custom corner badge; the presence dot moves to the top corner while it is shown. */
+    badge?: ReactNode;
+    /** Accessible text to use instead of `name`, when the photo needs a different description. */
+    alt?: string;
+};
 /**
- * Arc's Avatar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a compact identity marker on Arc's
- * tokens, with a hairline border, a muted fill behind the initials and an optional presence dot that pops in and out.
- * Loading, failure and fallback stay on the Base UI avatar primitive.
+ * A round portrait for one person, with initials as fallback and an optional presence dot.
+ * @param props - Name, photo, size, presence, optional fallback and badge, plus native span attributes for the root.
+ * @returns The avatar, announced as one image.
  */
-import type { ComponentProps } from "react";
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import type { AvatarStatus } from "../constants/avatar.js";
-export type { AvatarStatus };
-/** Avatar diameters: 24px (`sm`), 32px (`default`), 40px (`lg`) and Arc's 88px profile size (`xl`). */
-export type AvatarSize = "default" | "sm" | "lg" | "xl";
-/** Accepts native image props and nullable image sources from application results. */
-export type AvatarImageProps = Omit<ComponentProps<"img">, "src"> & {
+declare function Avatar({ name, src, size, status, statusLabel, fallback, badge, alt, ...props }: AvatarProps): import("react").JSX.Element;
+/** One person of an avatar group. */
+export type AvatarGroupMember = {
+    /** Full name, shown on hover and used as the avatar's accessible name. */
+    name: string;
+    /** Photo URL. */
     src?: string | null;
+    /** Presence dot of the avatar. */
+    status?: AvatarStatus;
+    /** Stable key for members that share a name; defaults to `name`. */
+    key?: string;
 };
-export type AvatarProps = AvatarPrimitive.Root.Props & {
-    size?: AvatarSize;
+export type AvatarGroupProps = Omit<ComponentProps<"div">, "children" | "role" | "aria-label"> & {
     /**
-     * Shows Arc's presence dot in the bottom corner, or the top corner when an `AvatarBadge` holds the bottom one, and
-     * adds the presence to the accessible text.
+     * People in display order. Pass the whole list and let `max` collapse the rest, or a preview of it together with
+     * `total`.
      */
-    status?: AvatarStatus;
-    /** Accessible presence text; defaults to "En línea" or "Desconectado". */
-    statusLabel?: string;
+    members: AvatarGroupMember[];
+    /**
+     * How many people the group has when `members` is only a preview of them. When it is larger than
+     * `members.length`, the +N chip counts the people left out against it. Defaults to `members.length`.
+     */
+    total?: number;
+    /** Avatars shown before the rest collapse into the overflow count. */
+    max?: number;
+    /** Size of each avatar and of the overflow chip. */
+    size?: AvatarGroupSize;
+    /** Accessible name of the group, also used in the overflow label; defaults to "Integrantes". */
+    label?: string;
+    /** Classes for the group. Native attributes such as `aria-hidden`, `style` or `data-*` also go to the root. */
+    className?: string;
 };
 /**
- * A person or account, as a photo with initials as fallback.
- * @param props - Size, optional presence and the Base UI avatar root props.
- * @returns The avatar root.
+ * An overlapping stack of avatars with a +N overflow chip.
+ * @param props - Members, optional total, how many to show, size, accessible label, classes and native root attributes.
+ * @returns The group.
  */
-declare function Avatar({ className, size, status, statusLabel, children, ...props }: AvatarProps): import("react").JSX.Element;
-/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
-declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): import("react").JSX.Element;
-declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): import("react").JSX.Element;
-/** A custom corner badge, drawn with the same ring as Arc's presence dot. Prefer `status` for presence. */
-declare function AvatarBadge({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
-/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
-declare function AvatarGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-declare function AvatarGroupCount({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };
+declare function AvatarGroup({ members, total, max, size, label, className, style, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export { Avatar, AvatarGroup };