@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/components/ui/announcement.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from './button.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The surface and the five tones, and nothing else.
+ *
+ * **Every tone states its own fill AND its own ink, which is the Stated Ink Rule
+ * and not a style preference.** An announcement is a bar of body text sitting on
+ * a coloured surface, and a bar is a surface, so an ink left to be inherited is
+ * not the page's foreground by accident: it is whatever happened to be behind the
+ * viewport, and the failure `Cta01` measured was 1.01:1 on a filled `bg-primary`
+ * band. That number is the whole argument. A tone that set only a fill would be
+ * the same bar in a different colour, and no gate in this repository could see
+ * it, because the token gate measures token pairs rather than what a Component
+ * leaves out.
+ *
+ * The five are the five the semantic contract publishes, and each is a fill with a
+ * matched ink rather than a colour chosen to look right: `neutral` is the muted
+ * surface, `info` is the pack's own primary, and `success`, `warning` and
+ * `destructive` are the three status roles. `info` using the pack's brand hue is
+ * the decision worth naming, because a reader has been trained to read a saturated
+ * brand bar as a brand, and an informational notice is the one message in this
+ * package that is not about the brand. It is a notification rather than a
+ * decoration, the pack hue is the strongest ink the contract offers on a coloured
+ * surface, and the alternative, a blue that exists in no token, is a colour this
+ * package would have to hold rather than inherit.
+ */
+const announcementVariants = cva('relative flex w-full items-center gap-3 rounded-lg border px-4 py-2.5 text-sm', {
+    variants: {
+        variant: {
+            neutral: 'border-border bg-muted text-foreground',
+            info: 'border-transparent bg-primary text-primary-foreground',
+            success: 'border-transparent bg-success text-success-foreground',
+            warning: 'border-transparent bg-warning text-warning-foreground',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        },
+    },
+    defaultVariants: { variant: 'neutral' },
+});
+/**
+ * A page-level message bar, with an optional action and an optional dismiss.
+ *
+ * **The order is message, then action, then dismiss, and the order is a decision
+ * about where the eye goes rather than about the markup.** The message comes
+ * first because it is the reason the bar exists: a reader who reads nothing else
+ * has still got the thing they needed to know. The action comes second because it
+ * is what to do about the message, and a reader who wants to act should not have
+ * to find the control. The dismiss comes last because it is the one control in
+ * the bar that is about the bar rather than about the message, and a reader who
+ * reaches for it has already read the message. Reversing the last two is the
+ * mistake a flex row makes by accident, and it costs a reader who wanted to act:
+ * they reach for what they read as the close control and dismiss the thing they
+ * came to read. The cost of the order is that on a narrow screen the three parts
+ * compete for one line, which is why the action is a slot the caller can keep to
+ * one word.
+ *
+ * **Every tone states its own fill and its own ink, and the reason is a measured
+ * failure rather than a preference.** This is a coloured surface with body text
+ * on it, so an inherited ink is not the page's foreground by accident: it is
+ * whatever was behind the viewport, and `Cta01` measured 1.01:1 on exactly that
+ * arrangement. The variant table above sets both halves of every tone, and the
+ * cost of that is a longer string per tone than a fill alone would need, which is
+ * a fair trade for a bar that cannot become unreadable by being moved.
+ *
+ * **The region is a `status` and not an `alert`, and the difference is whether the
+ * reader is interrupted.** An announcement is in the document rather than arriving
+ * into it: it is there on first paint, a reader can find it by browsing, and it
+ * is not a consequence of the thing they were doing a moment ago. `role="alert"`
+ * is an assertive live region, which cuts across whatever the reader was reading
+ * and reads it out immediately, and that is right for a failure the reader caused
+ * and has to fix, which is an `Alert` beside the control or a `Dialog` when it
+ * blocks. An announcement is a notice, and a notice that interrupts is a notice
+ * the reader stops reading. The cost is real: a reader who arrives mid-page and
+ * never looks up misses the bar entirely, and the fix for that is the caller's
+ * placement, not a louder role.
+ *
+ * **A dismissed bar hides itself, and Prism does not persist that.** The state is
+ * local to the mounted bar, so a reload brings the message back, which is the
+ * honest behaviour for a notice about something that is still true. A stored
+ * dismissal is a different thing and a deliberate act: it is a record in a
+ * consumer's storage that says this reader has already been told, and that record
+ * outlives the message. When it expires, when it is scoped to a message id rather
+ * than a page, whether a notice about an incident is dismissible at all, and
+ * whether a reader who changes a setting should be told again, are four decisions
+ * about the consumer's product and its data, and Prism will not make any of them
+ * from inside a bar. So `onDismiss` is the seam: the bar hides itself so the
+ * reader is not looking at a thing they dismissed, and the caller is told so the
+ * half that outlives the page is theirs. The cost is that a caller who wants a
+ * dismissible-once notice writes the storage themselves, and a caller who writes
+ * nothing gets a notice that comes back, which is the safe default.
+ *
+ * It is a client Component, and the state is the whole reason. Hiding the bar on
+ * dismiss is one piece of state; there is no clock, no effect and no timer, so
+ * the client cost is the bar and not a running loop.
+ */
+function Announcement({ message, action, dismissLabel, dismissible = false, onDismiss, tone, className, ...props }) {
+    const [open, setOpen] = useState(true);
+    if (!open)
+        return null;
+    return (_jsxs("div", { "data-slot": "announcement", role: "status", className: cn(announcementVariants({ variant: tone }), className), ...props, children: [_jsx("div", { "data-slot": "announcement-message", className: "min-w-0 flex-1 text-pretty", children: message }), action === undefined ? null : (_jsx("div", { "data-slot": "announcement-action", className: "flex shrink-0 items-center", children: action })), dismissible ? (_jsx(Button, { type: "button", "data-slot": "announcement-dismiss", variant: "ghost", size: "icon", "aria-label": dismissLabel, onClick: () => {
+                    setOpen(false);
+                    onDismiss?.();
+                }, 
+                /*
+                 * The ghost variant's two hover declarations are replaced rather than
+                 * kept, and this is the Stated Ink Rule applied one level in. A ghost
+                 * button inherits its ink, so on this bar it inherits the tone's ink,
+                 * and `hover:bg-accent` with `hover:text-accent-foreground` would put
+                 * that ink on the accent surface instead of the tone's. So the hover
+                 * changes the opacity and nothing else: the fill and the ink that were
+                 * measured together stay exactly as they were, and the reader still gets
+                 * the press feedback. `text-inherit` is how that is spelled, and it
+                 * resolves to the bar's own tone ink rather than to a second one.
+                 * `size-7` is below the 9 the icon variant draws, and the coarse-pointer
+                 * size above it is left alone, so a finger still gets 44px.
+                 */
+                className: "hover:bg-transparent hover:text-inherit opacity-70 transition-opacity duration-fast ease-out hover:opacity-100 size-7 shrink-0", children: _jsx(XIcon, { "aria-hidden": "true", className: "size-4" }) })) : null] }));
+}
+export { Announcement };

package/dist/components/ui/avatar-group.d.ts

@@ -0,0 +1,176 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * The three sizes a group is drawn at, as the authored `size-*` and `text-*`
+ * values rather than as one number.
+ *
+ * A group is read as one thing, so the whole group takes one size, and a caller
+ * who sized each disc through `className` would be able to draw a group of five
+ * different heights, which is not a group. The pair is authored together for the
+ * same reason `ProductMark` keeps its mark and its name in one table: the
+ * initials have to stay legible inside the disc, and a size that is right for the
+ * disc is wrong for the letters.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly root: "size-6";
+        readonly ink: "text-mono";
+    };
+    readonly md: {
+        readonly root: "size-8";
+        readonly ink: "text-xs";
+    };
+    readonly lg: {
+        readonly root: "size-10";
+        readonly ink: "text-sm";
+    };
+};
+/** The props an `AvatarGroup` takes. */
+export type AvatarGroupProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /**
+     * The people, in the order the caller wants them shown.
+     *
+     * A name per person and an optional image. The name is required because it is
+     * what the initials are derived from, what the image's alternative text says,
+     * and what a caller who has no photograph still has: a disc with no name behind
+     * it is a shape, and a shape is not a person.
+     */
+    avatars: readonly {
+        /** The person's image. Omit it, or pass a URL that fails, for the initials. */
+        src?: string;
+        /** The person's name, which is also the initials' source. */
+        name: string;
+    }[];
+    /**
+     * The trailing slot, for a control that belongs to the whole group rather than
+     * to one person: an invite, a count of the rest, a manage link.
+     *
+     * After the count rather than inside it, because a control inside the count is
+     * a control whose size is the count's size, and a group whose count is the
+     * thing a reader presses is a control pretending to be a summary.
+     */
+    children?: ReactNode;
+    /**
+     * The drawn size of every disc in the group, so a set shows one size rather
+     * than a mix.
+     *
+     * @defaultValue 'md'
+     */
+    size?: keyof typeof SIZES;
+    /**
+     * The number of discs shown before the rest become a count.
+     *
+     * @defaultValue 4
+     */
+    max?: number;
+    /**
+     * The sentence the count is read as, given the number of people it stands for.
+     *
+     * Required whenever `max` is set, and not defaulted, for a reason that is about
+     * the number and not about the language: a count is a numeral, and a screen
+     * reader reading a bare "3" out of a row of faces has been told a quantity and
+     * nothing about what it is a quantity of. "3 more" is a different piece of
+     * information, and it is also a sentence whose wording is the consumer's, in the
+     * consumer's language, with the consumer's plural rules. Prism will not ship
+     * that sentence, so the prop is a function of the count and there is no default
+     * to fall back on. When truncation happens with no `overflowLabel`, the badge is
+     * the bare number, which is a state the caller chose by not passing one.
+     */
+    overflowLabel?: (count: number) => string;
+    /**
+     * Which end of the row the topmost disc sits at.
+     *
+     * Off by default, so the first person in `avatars` is the one whose whole disc
+     * is visible and whose face is not cut in half by its neighbour. Turn it on when
+     * the array is sorted so that the most recent or the most senior is last, which
+     * is the common shape of a members list, and the reader expects to be able to
+     * see the person who matters most rather than the one who happens to be first.
+     */
+    reverse?: boolean;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+} & ({
+    /**
+     * How many discs to show, with the sentence the count is read as.
+     *
+     * A union rather than two independent optionals, because the sentence is
+     * required in exactly the shape where truncation is possible and meaningless
+     * in the shape where it is not, and one optional prop set cannot say that.
+     */
+    max: number;
+    overflowLabel: (count: number) => string;
+} | {
+    /**
+     * No explicit cap, so no count can appear and no sentence is owed.
+     *
+     * Every disc is drawn, which is right for a short set and wrong for a long
+     * one. A caller who knows the set is long passes `max` and pays for the
+     * sentence.
+     */
+    max?: never;
+    overflowLabel?: (count: number) => string;
+});
+/**
+ * A row of overlapping discs with a count for the rest, built on `Avatar`.
+ *
+ * **The discs are `Avatar`, `AvatarImage` and `AvatarFallback`, and the fallback
+ * is the caller's initials rather than a silhouette.** That is the whole reason
+ * this is a Component rather than a row of `div`s: the loading state, the missing
+ * image, the failed image and the ring that separates two overlapping discs are
+ * four things `Avatar` already holds to one standard, and a hand-written stack
+ * gets one of them wrong in a way no test on the stack would notice. A group's
+ * fallback is the one place a silhouette is tempting, because most of the group
+ * may have no photograph, and it is refused here for the reason it is refused on a
+ * single avatar: a picture of nobody is not a person, and a reader who has been
+ * shown a row of identical silhouettes has learned nothing about anybody in it.
+ *
+ * **The order is the caller's, because a group of five people has no natural
+ * order and which of them is visible is a decision rather than a fact.** A set of
+ * members has no first member; it has an owner, or a most recent signer, or the
+ * alphabetical result of a directory query, and each of those is a claim about
+ * importance that only the consumer can make. So `avatars` is rendered in the
+ * order it arrives and the first `max` are the ones shown, and Prism does not
+ * sort, does not rotate, and does not pick a "representative" to lead. The cost
+ * is stated rather than hidden: a caller who passes an unordered array gets an
+ * arbitrary subset, and a caller who wants the most important person shown has to
+ * put them first, which is one line of `sort` in their own code and a decision
+ * they are better placed to make than this Component is.
+ *
+ * **The separator between two discs is a ring in the page ground, and that is a
+ * decision with a cost.** Overlapping discs need something between them, and the
+ * two candidates are a gap and a ring. A gap cannot work here, because the whole
+ * point of a group is that the discs touch, so the separator is drawn: a ring in
+ * `background`, which is the surface a group is nearly always on. The cost is
+ * that a group placed on a card or on the muted surface reads its separators
+ * against the page ground rather than against the surface it is sitting on, and
+ * the separator is then very slightly the wrong colour. The alternative, taking
+ * the surface as a prop, would put a theming axis on a Component that currently
+ * has none and would be a second thing for a consumer to keep in step with the
+ * pack; a group whose separators matter more than its width should not be
+ * overlapping.
+ *
+ * **The count is a badge, not a truncation of the array.** The people past `max`
+ * are not drawn at all, and the badge says how many. A group that faded its last
+ * discs out would show a reader a row that looks complete and is not, and a
+ * reader who counted the faces would be wrong. The badge is a `div` with no role
+ * and no name of its own: the number is spoken by the sentence the caller passed
+ * to `overflowLabel`, and the badge is the place that sentence appears. When no
+ * `overflowLabel` is given, the badge holds the bare number, and the JSDoc on the
+ * prop says what that costs.
+ *
+ * **An empty set renders nothing, and the trailing slot goes with it.** The same
+ * reason `ProductSwitcher` and `FactList` render nothing rather than an empty
+ * frame: a row of zero discs is an outline around a gap. The cost is that a
+ * caller whose "Manage" control should survive an empty set has to render it
+ * outside the group rather than in its slot, and that is a real case in a members
+ * panel where the last person left yesterday.
+ *
+ * It is a server Component. It holds no state, reads no context and attaches no
+ * handler, and `Avatar` is a client Component whose only client work is measuring
+ * whether an image has loaded, so a group of forty costs no JavaScript from this
+ * module. A group the reader can act on belongs in the caller's own row: the
+ * trailing slot is where a link or a button goes, and the discs themselves are not
+ * controls.
+ */
+declare function AvatarGroup({ avatars, children, size, max, overflowLabel, reverse, className, ...props }: AvatarGroupProps): import("react").JSX.Element | null;
+export { AvatarGroup };
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/ui/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAID,CAAA;AAmCV,wCAAwC;AACxC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE;;;;;;;OAOG;IACH,OAAO,EAAE,SAAS;QAChB,+EAA+E;QAC/E,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,6DAA6D;QAC7D,IAAI,EAAE,MAAM,CAAA;KACb,EAAE,CAAA;IACH;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACzC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,CACA;IACE;;;;;;OAMG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACzC,GACD;IACE;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAC1C,CACJ,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,IAAW,EACX,GAAiB,EACjB,aAAa,EACb,OAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,sCA+DlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/avatar-group.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The three sizes a group is drawn at, as the authored `size-*` and `text-*`
+ * values rather than as one number.
+ *
+ * A group is read as one thing, so the whole group takes one size, and a caller
+ * who sized each disc through `className` would be able to draw a group of five
+ * different heights, which is not a group. The pair is authored together for the
+ * same reason `ProductMark` keeps its mark and its name in one table: the
+ * initials have to stay legible inside the disc, and a size that is right for the
+ * disc is wrong for the letters.
+ */
+const SIZES = {
+    sm: { root: 'size-6', ink: 'text-mono' },
+    md: { root: 'size-8', ink: 'text-xs' },
+    lg: { root: 'size-10', ink: 'text-sm' },
+};
+/**
+ * How many discs a group shows before the rest become a count.
+ *
+ * Four, and the number is a reading decision rather than a fitting one. A group
+ * of four discs is narrow enough to sit beside a name, a column, or a button
+ * without pushing it, and a fifth disc is where a row of faces stops being a
+ * summary and starts being a list the reader has to look at. A caller who wants
+ * a different number passes `max`, and pays for it in width.
+ */
+const DEFAULT_MAX = 4;
+/**
+ * The initials a name produces, and the rule that produces them.
+ *
+ * Two letters from the first and last words, and the first two characters of a
+ * single word. This is Prism deriving a value from the caller's data, not Prism
+ * choosing a face: the fallback is the person's own initials, so a reader who
+ * cannot see the photograph still recognises the name beside it. The alternative,
+ * a silhouette, is a picture of nobody and tells a reader nothing about who they
+ * are looking at, and the cost of the derivation is stated rather than hidden: a
+ * name of one letter, a name in a script with no case and no word boundaries, and
+ * a name whose initials collide with another person's are all cases the rule does
+ * not cover, and a caller who cares about any of them passes their own node
+ * through the `avatars` slot instead.
+ */
+function initialsOf(name) {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const first = words[0];
+    if (first === undefined)
+        return '';
+    if (words.length === 1)
+        return first.slice(0, 2).toUpperCase();
+    return `${first.charAt(0)}${words[words.length - 1].charAt(0)}`.toUpperCase();
+}
+/**
+ * A row of overlapping discs with a count for the rest, built on `Avatar`.
+ *
+ * **The discs are `Avatar`, `AvatarImage` and `AvatarFallback`, and the fallback
+ * is the caller's initials rather than a silhouette.** That is the whole reason
+ * this is a Component rather than a row of `div`s: the loading state, the missing
+ * image, the failed image and the ring that separates two overlapping discs are
+ * four things `Avatar` already holds to one standard, and a hand-written stack
+ * gets one of them wrong in a way no test on the stack would notice. A group's
+ * fallback is the one place a silhouette is tempting, because most of the group
+ * may have no photograph, and it is refused here for the reason it is refused on a
+ * single avatar: a picture of nobody is not a person, and a reader who has been
+ * shown a row of identical silhouettes has learned nothing about anybody in it.
+ *
+ * **The order is the caller's, because a group of five people has no natural
+ * order and which of them is visible is a decision rather than a fact.** A set of
+ * members has no first member; it has an owner, or a most recent signer, or the
+ * alphabetical result of a directory query, and each of those is a claim about
+ * importance that only the consumer can make. So `avatars` is rendered in the
+ * order it arrives and the first `max` are the ones shown, and Prism does not
+ * sort, does not rotate, and does not pick a "representative" to lead. The cost
+ * is stated rather than hidden: a caller who passes an unordered array gets an
+ * arbitrary subset, and a caller who wants the most important person shown has to
+ * put them first, which is one line of `sort` in their own code and a decision
+ * they are better placed to make than this Component is.
+ *
+ * **The separator between two discs is a ring in the page ground, and that is a
+ * decision with a cost.** Overlapping discs need something between them, and the
+ * two candidates are a gap and a ring. A gap cannot work here, because the whole
+ * point of a group is that the discs touch, so the separator is drawn: a ring in
+ * `background`, which is the surface a group is nearly always on. The cost is
+ * that a group placed on a card or on the muted surface reads its separators
+ * against the page ground rather than against the surface it is sitting on, and
+ * the separator is then very slightly the wrong colour. The alternative, taking
+ * the surface as a prop, would put a theming axis on a Component that currently
+ * has none and would be a second thing for a consumer to keep in step with the
+ * pack; a group whose separators matter more than its width should not be
+ * overlapping.
+ *
+ * **The count is a badge, not a truncation of the array.** The people past `max`
+ * are not drawn at all, and the badge says how many. A group that faded its last
+ * discs out would show a reader a row that looks complete and is not, and a
+ * reader who counted the faces would be wrong. The badge is a `div` with no role
+ * and no name of its own: the number is spoken by the sentence the caller passed
+ * to `overflowLabel`, and the badge is the place that sentence appears. When no
+ * `overflowLabel` is given, the badge holds the bare number, and the JSDoc on the
+ * prop says what that costs.
+ *
+ * **An empty set renders nothing, and the trailing slot goes with it.** The same
+ * reason `ProductSwitcher` and `FactList` render nothing rather than an empty
+ * frame: a row of zero discs is an outline around a gap. The cost is that a
+ * caller whose "Manage" control should survive an empty set has to render it
+ * outside the group rather than in its slot, and that is a real case in a members
+ * panel where the last person left yesterday.
+ *
+ * It is a server Component. It holds no state, reads no context and attaches no
+ * handler, and `Avatar` is a client Component whose only client work is measuring
+ * whether an image has loaded, so a group of forty costs no JavaScript from this
+ * module. A group the reader can act on belongs in the caller's own row: the
+ * trailing slot is where a link or a button goes, and the discs themselves are not
+ * controls.
+ */
+function AvatarGroup({ avatars, children, size = 'md', max = DEFAULT_MAX, overflowLabel, reverse = false, className, ...props }) {
+    const drawn = SIZES[size];
+    const shown = avatars.slice(0, max);
+    const overflow = avatars.length - shown.length;
+    // Which disc sits on top of its neighbour. The stacking is the z-order, not the
+    // order on screen, so the row still reads left to right in the array's order
+    // while one end of it is the disc nothing overlaps.
+    const raised = reverse ? shown.length - 1 : 0;
+    /*
+     * An empty set renders nothing, for the reason `ProductSwitcher` and `FactList`
+     * both render nothing: an empty row of zero-width discs is a frame with a gap
+     * in it, and a caller with nothing to show is better served by the absence of
+     * the group than by its outline. The trailing slot goes with it, and that is
+     * stated rather than assumed: a caller whose "Manage" control should survive an
+     * empty set renders it outside the group rather than in its slot.
+     */
+    if (avatars.length === 0)
+        return null;
+    return (_jsxs("div", { "data-slot": "avatar-group", className: cn('flex items-center [&>*+*]:-ms-2', className), ...props, children: [shown.map((person, index) => (_jsx("span", { "data-slot": "avatar-group-item", "data-raised": index === raised ? 'true' : undefined, className: cn('relative', index === raised ? 'z-10' : ''), children: _jsxs(Avatar, { className: cn('ring-background ring-2', drawn.root), children: [person.src === undefined ? null : (_jsx(AvatarImage, { src: person.src, alt: person.name })), _jsx(AvatarFallback, { className: drawn.ink, children: initialsOf(person.name) })] }) }, `${person.name}-${index}`))), overflow > 0 ? (_jsx("span", { "data-slot": "avatar-group-overflow", className: cn('bg-muted text-muted-foreground ring-background relative flex shrink-0 items-center justify-center rounded-full font-medium ring-2', drawn.root, drawn.ink), children: overflowLabel === undefined ? overflow : overflowLabel(overflow) })) : null, children] }));
+}
+export { AvatarGroup };