@libreapps/ui 5.4.1

package/dist/types/image-def.d.ts

@@ -0,0 +1,27 @@
+import type Dimensions from './dimensions';
+/**
+ * Defines a in image to render.
+ * ImageDef is part of {@link LinkDef}
+ */
+interface ImageDef {
+    /** image url */
+    src: string;
+    /** defaults to short filename */
+    alt?: string;
+    /** See next js docs */
+    sizes?: string;
+    /**
+     * Tailwind class for svg files (usually a text-<color>).
+     * All affect 'fill' props in the svg file
+     * must be set to 'currentColor'.
+     */
+    svgFillClass?: string;
+    /** rendered dim, unless style prop overrides
+     * in which case the file resolution should
+     * be supplied so that both Next and the browser
+     * can determine the aspect ratio
+    */
+    dim: Dimensions;
+    rounded?: string;
+}
+export { type ImageDef as default };

package/dist/types/index.d.ts

@@ -0,0 +1,14 @@
+export type { default as AnimationDef } from './animation-def';
+export type { Breakpoint } from './breakpoints';
+export { Breakpoints } from './breakpoints';
+export type { default as BulletItem } from './bullet-item';
+export type { ButtonDef, SubmitServerAction, ButtonModalProps, ButtonModalDef, } from './button-def';
+export type { default as Dimensions } from './dimensions';
+export type { default as GridDef, GridColumnSpec } from './grid-def';
+export { COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL } from './grid-def';
+export type { default as ImageDef } from './image-def';
+export type { default as LinkDef } from './link-def';
+export type { default as TShirtDimensions } from './tshirt-dimensions';
+export type { default as TShirtSize } from './t-shirt-size';
+export type { default as VideoDef } from './video-def';
+export type { MediaStackDef, MediaTransform } from './media-stack-def';

package/dist/types/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+// tailwind/screens.tailwind.js
+var screens_tailwind_default = {
+  xs: "0px",
+  // <-- phone
+  sm: "480px",
+  // phone --><-- sm tablets / narrow
+  md: "768px",
+  // sm tablets / narrow -->
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1500px"
+};
+
+// types/breakpoints.ts
+var Breakpoints = Object.keys(screens_tailwind_default);
+
+// types/grid-def.ts
+var COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_2_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 2, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_3_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 3, gap: 3 },
+    lg: { columns: 3, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_4_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 4, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+
+exports.Breakpoints = Breakpoints;
+exports.COMMON_GRID_1_COL = COMMON_GRID_1_COL;
+exports.COMMON_GRID_2_COL = COMMON_GRID_2_COL;
+exports.COMMON_GRID_3_COL = COMMON_GRID_3_COL;
+exports.COMMON_GRID_4_COL = COMMON_GRID_4_COL;

package/dist/types/index.mjs

@@ -0,0 +1,51 @@
+// tailwind/screens.tailwind.js
+var screens_tailwind_default = {
+  xs: "0px",
+  // <-- phone
+  sm: "480px",
+  // phone --><-- sm tablets / narrow
+  md: "768px",
+  // sm tablets / narrow -->
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1500px"
+};
+
+// types/breakpoints.ts
+var Breakpoints = Object.keys(screens_tailwind_default);
+
+// types/grid-def.ts
+var COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_2_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 2, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_3_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 3, gap: 3 },
+    lg: { columns: 3, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_4_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 4, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+
+export { Breakpoints, COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL };

package/dist/types/link-def.d.ts

@@ -0,0 +1,44 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { buttonVariants } from '../primitives/button';
+/**
+ * A Conf object for the LinkElement primitive.
+ */
+interface LinkDef extends VariantProps<typeof buttonVariants> {
+    /**
+     * If the LinkElement is rendered directly and has children,
+     * the title, icon, iconAfter fields in the supplied LinkDef
+     * will be ignored.
+     */
+    title?: string;
+    /**
+     * If the LinkElement is rendered directly and has children,
+     * the title, icon, iconAfter fields in the supplied LinkDef
+     * will be ignored.
+     */
+    icon?: React.ReactNode;
+    /**
+     * If the LinkElement is rendered directly and has children,
+     * the title, icon, iconAfter fields in the supplied LinkDef
+     * will be ignored.
+     */
+    iconAfter?: boolean;
+    href: string;
+    /**
+     * External links will open in a new tab (via target='_blank') by default,
+     * while internal ones will open in the same tab.
+     * @field newTab overrides these defaults in both cases.
+     * ('external' means the url starts with 'http')
+     */
+    newTab?: boolean;
+    /**
+     * rendered as a disabled link, shows default cursor, and eats pointer events.
+     */
+    disabled?: boolean;
+    /**
+     *contents for description link.
+     */
+    contents?: string;
+    childMenu?: LinkDef[];
+    groupName?: string;
+}
+export { type LinkDef as default };

package/dist/types/media-stack-def.d.ts

@@ -0,0 +1,25 @@
+import type AnimationDef from './animation-def';
+import type ImageDef from './image-def';
+import type VideoDef from './video-def';
+/**
+ * This will be implemented via css transforms,
+ * so will be a subset of those capabilities.
+ * Individual transforms will be added as they
+ * are needed.
+ */
+interface MediaTransform {
+    /** (X and Y) or [X, Y] */
+    scale?: number | number[];
+}
+interface MediaStackDef {
+    img?: ImageDef;
+    video?: VideoDef;
+    animation?: AnimationDef;
+    mediaTransform?: MediaTransform;
+    /** prefered order of precedence.
+     * If an type is missing, it will not be used.
+     * default (inMediaStack component): ['a', 'v', 'i']
+     * */
+    order?: ('a' | 'v' | 'i')[];
+}
+export type { MediaStackDef, MediaTransform };

package/dist/types/t-shirt-size.d.ts

@@ -0,0 +1,2 @@
+type TShirtSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export { type TShirtSize as default };

package/dist/types/tshirt-dimensions.d.ts

@@ -0,0 +1,12 @@
+type ConcreteDimensions = {
+    w: number;
+    h: number;
+};
+type TShirtDimensions = {
+    xs?: ConcreteDimensions;
+    sm?: ConcreteDimensions;
+    md: ConcreteDimensions;
+    lg?: ConcreteDimensions;
+    xl?: ConcreteDimensions;
+};
+export { type TShirtDimensions as default };

package/dist/types/video-def.d.ts

@@ -0,0 +1,9 @@
+import type TShirtDimensions from './tshirt-dimensions';
+interface VideoDef {
+    videoProps?: any;
+    poster?: string;
+    sources?: string[];
+    dim: TShirtDimensions;
+    sizing?: any;
+}
+export { type VideoDef as default };

package/dist/ui/announcement.js

@@ -0,0 +1,134 @@
+"use client";
+'use strict';
+
+var React2 = require('react');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var buttonVariants = classVarianceAuthority.cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Keep the additional LibreApps variants for backward compatibility
+        primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        linkFG: "text-primary underline-offset-4 hover:underline",
+        linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2__namespace.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
+            }
+          ) : null,
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Announcement = React2__namespace.forwardRef(
+  ({ className, children, dismissible = true, onDismiss, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React2__namespace.useState(true);
+    const handleDismiss = /* @__PURE__ */ __name(() => {
+      setIsVisible(false);
+      onDismiss?.();
+    }, "handleDismiss");
+    if (!isVisible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center gap-4 rounded-lg border bg-background px-4 py-3 text-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children }),
+          dismissible && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6",
+              onClick: handleDismiss,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Dismiss" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Announcement.displayName = "Announcement";
+
+exports.Announcement = Announcement;

package/dist/ui/announcement.mjs

@@ -0,0 +1,112 @@
+"use client";
+import * as React2 from 'react';
+import { Loader2, X } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Keep the additional LibreApps variants for backward compatibility
+        primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        linkFG: "text-primary underline-offset-4 hover:underline",
+        linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
+            }
+          ) : null,
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Announcement = React2.forwardRef(
+  ({ className, children, dismissible = true, onDismiss, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React2.useState(true);
+    const handleDismiss = /* @__PURE__ */ __name(() => {
+      setIsVisible(false);
+      onDismiss?.();
+    }, "handleDismiss");
+    if (!isVisible) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center gap-4 rounded-lg border bg-background px-4 py-3 text-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+          dismissible && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6",
+              onClick: handleDismiss,
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Announcement.displayName = "Announcement";
+
+export { Announcement };

package/dist/ui/avatar-group.js

@@ -0,0 +1,88 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var AvatarPrimitive = require('@radix-ui/react-avatar');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Root,
+  {
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ref,
+    ...props
+  }
+), "Avatar");
+Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
+var AvatarImage = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Image,
+  {
+    className: cn("aspect-square h-full w-full", className),
+    ref,
+    ...props
+  }
+), "AvatarImage");
+AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
+var AvatarFallback = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Fallback,
+  {
+    className: cn(
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
+      className
+    ),
+    ref,
+    ...props
+  }
+), "AvatarFallback");
+AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
+var AvatarGroup = React__namespace.forwardRef(
+  ({ className, items, max = 5, ...props }, ref) => {
+    const displayItems = items.slice(0, max);
+    const remaining = items.length - max;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex -space-x-4", className), ...props, children: [
+      displayItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "border-2 border-background", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: item.src, alt: item.alt }),
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: item.fallback })
+      ] }, index)),
+      remaining > 0 && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "border-2 border-background", children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarFallback, { children: [
+        "+",
+        remaining
+      ] }) })
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+exports.AvatarGroup = AvatarGroup;

package/dist/ui/avatar-group.mjs

@@ -0,0 +1,65 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ref,
+    ...props
+  }
+), "Avatar");
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    className: cn("aspect-square h-full w-full", className),
+    ref,
+    ...props
+  }
+), "AvatarImage");
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    className: cn(
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
+      className
+    ),
+    ref,
+    ...props
+  }
+), "AvatarFallback");
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var AvatarGroup = React.forwardRef(
+  ({ className, items, max = 5, ...props }, ref) => {
+    const displayItems = items.slice(0, max);
+    const remaining = items.length - max;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex -space-x-4", className), ...props, children: [
+      displayItems.map((item, index) => /* @__PURE__ */ jsxs(Avatar, { className: "border-2 border-background", children: [
+        /* @__PURE__ */ jsx(AvatarImage, { src: item.src, alt: item.alt }),
+        /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
+      ] }, index)),
+      remaining > 0 && /* @__PURE__ */ jsx(Avatar, { className: "border-2 border-background", children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
+        "+",
+        remaining
+      ] }) })
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+export { AvatarGroup };