@karakuri-ui/react 0.2.3 → 0.3.0

package/dist/components/ui/avatar.d.mts

@@ -0,0 +1,223 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { VariantProps } from 'class-variance-authority';
+
+declare const avatarVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const avatarColors: readonly [{
+    readonly vivid: {
+        readonly bg: "bg-[#DC2626]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEE2E2]";
+        readonly text: "text-[#DC2626]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#EA580C]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FFEDD5]";
+        readonly text: "text-[#EA580C]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#D97706]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF3C7]";
+        readonly text: "text-[#B45309]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#CA8A04]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF9C3]";
+        readonly text: "text-[#A16207]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#059669]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#D1FAE5]";
+        readonly text: "text-[#047857]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0D9488]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CCFBF1]";
+        readonly text: "text-[#0F766E]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0891B2]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CFFAFE]";
+        readonly text: "text-[#0E7490]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#2563EB]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#DBEAFE]";
+        readonly text: "text-[#1D4ED8]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#4F46E5]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#E0E7FF]";
+        readonly text: "text-[#4338CA]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#7C3AED]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#EDE9FE]";
+        readonly text: "text-[#6D28D9]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#9333EA]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#F3E8FF]";
+        readonly text: "text-[#7E22CE]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#DB2777]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FCE7F3]";
+        readonly text: "text-[#BE185D]";
+    };
+}];
+type AvatarColorVariant = 'vivid' | 'soft';
+/** Extract initials from a name string (e.g. "John Doe" → "JD", "김민수" → "김민") */
+declare function getAvatarInitials(name: string, maxChars?: number): string;
+/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */
+declare function getAvatarColor(name: string, variant?: AvatarColorVariant): {
+    readonly bg: "bg-[#DC2626]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEE2E2]";
+    readonly text: "text-[#DC2626]";
+} | {
+    readonly bg: "bg-[#EA580C]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FFEDD5]";
+    readonly text: "text-[#EA580C]";
+} | {
+    readonly bg: "bg-[#D97706]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF3C7]";
+    readonly text: "text-[#B45309]";
+} | {
+    readonly bg: "bg-[#CA8A04]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF9C3]";
+    readonly text: "text-[#A16207]";
+} | {
+    readonly bg: "bg-[#059669]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#D1FAE5]";
+    readonly text: "text-[#047857]";
+} | {
+    readonly bg: "bg-[#0D9488]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CCFBF1]";
+    readonly text: "text-[#0F766E]";
+} | {
+    readonly bg: "bg-[#0891B2]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CFFAFE]";
+    readonly text: "text-[#0E7490]";
+} | {
+    readonly bg: "bg-[#2563EB]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#DBEAFE]";
+    readonly text: "text-[#1D4ED8]";
+} | {
+    readonly bg: "bg-[#4F46E5]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#E0E7FF]";
+    readonly text: "text-[#4338CA]";
+} | {
+    readonly bg: "bg-[#7C3AED]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#EDE9FE]";
+    readonly text: "text-[#6D28D9]";
+} | {
+    readonly bg: "bg-[#9333EA]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#F3E8FF]";
+    readonly text: "text-[#7E22CE]";
+} | {
+    readonly bg: "bg-[#DB2777]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FCE7F3]";
+    readonly text: "text-[#BE185D]";
+};
+type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    status?: AvatarStatus;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+    size?: AvatarSize;
+    /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */
+    name?: string;
+    /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */
+    colorized?: string;
+    /** Color style: "vivid" (strong bg + white text) or "soft" (pastel bg + dark text). Default: "vivid" */
+    colorVariant?: AvatarColorVariant;
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    max?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, avatarColors, avatarVariants, getAvatarColor, getAvatarInitials };

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

@@ -0,0 +1,223 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { VariantProps } from 'class-variance-authority';
+
+declare const avatarVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const avatarColors: readonly [{
+    readonly vivid: {
+        readonly bg: "bg-[#DC2626]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEE2E2]";
+        readonly text: "text-[#DC2626]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#EA580C]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FFEDD5]";
+        readonly text: "text-[#EA580C]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#D97706]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF3C7]";
+        readonly text: "text-[#B45309]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#CA8A04]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF9C3]";
+        readonly text: "text-[#A16207]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#059669]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#D1FAE5]";
+        readonly text: "text-[#047857]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0D9488]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CCFBF1]";
+        readonly text: "text-[#0F766E]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0891B2]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CFFAFE]";
+        readonly text: "text-[#0E7490]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#2563EB]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#DBEAFE]";
+        readonly text: "text-[#1D4ED8]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#4F46E5]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#E0E7FF]";
+        readonly text: "text-[#4338CA]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#7C3AED]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#EDE9FE]";
+        readonly text: "text-[#6D28D9]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#9333EA]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#F3E8FF]";
+        readonly text: "text-[#7E22CE]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#DB2777]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FCE7F3]";
+        readonly text: "text-[#BE185D]";
+    };
+}];
+type AvatarColorVariant = 'vivid' | 'soft';
+/** Extract initials from a name string (e.g. "John Doe" → "JD", "김민수" → "김민") */
+declare function getAvatarInitials(name: string, maxChars?: number): string;
+/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */
+declare function getAvatarColor(name: string, variant?: AvatarColorVariant): {
+    readonly bg: "bg-[#DC2626]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEE2E2]";
+    readonly text: "text-[#DC2626]";
+} | {
+    readonly bg: "bg-[#EA580C]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FFEDD5]";
+    readonly text: "text-[#EA580C]";
+} | {
+    readonly bg: "bg-[#D97706]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF3C7]";
+    readonly text: "text-[#B45309]";
+} | {
+    readonly bg: "bg-[#CA8A04]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF9C3]";
+    readonly text: "text-[#A16207]";
+} | {
+    readonly bg: "bg-[#059669]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#D1FAE5]";
+    readonly text: "text-[#047857]";
+} | {
+    readonly bg: "bg-[#0D9488]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CCFBF1]";
+    readonly text: "text-[#0F766E]";
+} | {
+    readonly bg: "bg-[#0891B2]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CFFAFE]";
+    readonly text: "text-[#0E7490]";
+} | {
+    readonly bg: "bg-[#2563EB]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#DBEAFE]";
+    readonly text: "text-[#1D4ED8]";
+} | {
+    readonly bg: "bg-[#4F46E5]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#E0E7FF]";
+    readonly text: "text-[#4338CA]";
+} | {
+    readonly bg: "bg-[#7C3AED]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#EDE9FE]";
+    readonly text: "text-[#6D28D9]";
+} | {
+    readonly bg: "bg-[#9333EA]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#F3E8FF]";
+    readonly text: "text-[#7E22CE]";
+} | {
+    readonly bg: "bg-[#DB2777]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FCE7F3]";
+    readonly text: "text-[#BE185D]";
+};
+type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    status?: AvatarStatus;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+    size?: AvatarSize;
+    /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */
+    name?: string;
+    /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */
+    colorized?: string;
+    /** Color style: "vivid" (strong bg + white text) or "soft" (pastel bg + dark text). Default: "vivid" */
+    colorVariant?: AvatarColorVariant;
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    max?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, avatarColors, avatarVariants, getAvatarColor, getAvatarInitials };

package/dist/components/ui/avatar.js

@@ -0,0 +1,245 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar,
+  AvatarFallback: () => AvatarFallback,
+  AvatarGroup: () => AvatarGroup,
+  AvatarImage: () => AvatarImage,
+  avatarColors: () => avatarColors,
+  avatarVariants: () => avatarVariants,
+  getAvatarColor: () => getAvatarColor,
+  getAvatarInitials: () => getAvatarInitials
+});
+module.exports = __toCommonJS(avatar_exports);
+var React = __toESM(require("react"));
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const avatarVariants = (0, import_class_variance_authority.cva)(
+  "relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none",
+  {
+    variants: {
+      size: {
+        xs: "w-6 h-6",
+        // 24px
+        sm: "w-8 h-8",
+        // 32px
+        default: "w-10 h-10",
+        // 40px
+        lg: "w-12 h-12",
+        // 48px
+        xl: "w-16 h-16",
+        // 64px
+        "2xl": "w-20 h-20"
+        // 80px
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-xl"
+      }
+    },
+    defaultVariants: { size: "default", shape: "circle" }
+  }
+);
+const statusDotSizes = {
+  xs: "w-1.5 h-1.5",
+  sm: "w-2 h-2",
+  default: "w-2.5 h-2.5",
+  lg: "w-3 h-3",
+  xl: "w-3.5 h-3.5",
+  "2xl": "w-4 h-4"
+};
+const statusColors = {
+  online: "bg-success",
+  offline: "bg-text-muted",
+  busy: "bg-error",
+  away: "bg-warning"
+};
+const fallbackFontSizes = {
+  xs: "text-2xs",
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-base",
+  xl: "text-xl",
+  "2xl": "text-2xl"
+};
+const groupNegativeMargins = {
+  xs: "-space-x-1.5",
+  sm: "-space-x-2",
+  default: "-space-x-2.5",
+  lg: "-space-x-3",
+  xl: "-space-x-4",
+  "2xl": "-space-x-5"
+};
+const avatarColors = [
+  { vivid: { bg: "bg-[#DC2626]", text: "text-white" }, soft: { bg: "bg-[#FEE2E2]", text: "text-[#DC2626]" } },
+  // red
+  { vivid: { bg: "bg-[#EA580C]", text: "text-white" }, soft: { bg: "bg-[#FFEDD5]", text: "text-[#EA580C]" } },
+  // orange
+  { vivid: { bg: "bg-[#D97706]", text: "text-white" }, soft: { bg: "bg-[#FEF3C7]", text: "text-[#B45309]" } },
+  // amber
+  { vivid: { bg: "bg-[#CA8A04]", text: "text-white" }, soft: { bg: "bg-[#FEF9C3]", text: "text-[#A16207]" } },
+  // yellow
+  { vivid: { bg: "bg-[#059669]", text: "text-white" }, soft: { bg: "bg-[#D1FAE5]", text: "text-[#047857]" } },
+  // emerald
+  { vivid: { bg: "bg-[#0D9488]", text: "text-white" }, soft: { bg: "bg-[#CCFBF1]", text: "text-[#0F766E]" } },
+  // teal
+  { vivid: { bg: "bg-[#0891B2]", text: "text-white" }, soft: { bg: "bg-[#CFFAFE]", text: "text-[#0E7490]" } },
+  // cyan
+  { vivid: { bg: "bg-[#2563EB]", text: "text-white" }, soft: { bg: "bg-[#DBEAFE]", text: "text-[#1D4ED8]" } },
+  // blue
+  { vivid: { bg: "bg-[#4F46E5]", text: "text-white" }, soft: { bg: "bg-[#E0E7FF]", text: "text-[#4338CA]" } },
+  // indigo
+  { vivid: { bg: "bg-[#7C3AED]", text: "text-white" }, soft: { bg: "bg-[#EDE9FE]", text: "text-[#6D28D9]" } },
+  // violet
+  { vivid: { bg: "bg-[#9333EA]", text: "text-white" }, soft: { bg: "bg-[#F3E8FF]", text: "text-[#7E22CE]" } },
+  // purple
+  { vivid: { bg: "bg-[#DB2777]", text: "text-white" }, soft: { bg: "bg-[#FCE7F3]", text: "text-[#BE185D]" } }
+  // pink
+];
+function getAvatarInitials(name, maxChars = 2) {
+  const trimmed = name.trim();
+  if (!trimmed) return "";
+  const cjkRegex = /[\u3000-\u9fff\uac00-\ud7af\uff00-\uffef]/;
+  if (cjkRegex.test(trimmed.charAt(0))) {
+    return trimmed.slice(0, maxChars);
+  }
+  const parts = trimmed.split(/[\s\-_.]+/).filter(Boolean);
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase();
+  }
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase().slice(0, maxChars);
+}
+function getAvatarColor(name, variant = "vivid") {
+  let hash = 5381;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash << 5) + hash ^ name.charCodeAt(i);
+  }
+  return avatarColors[(hash >>> 0) % avatarColors.length][variant];
+}
+const Avatar = React.forwardRef(({ className, size, shape, status, children, ...props }, ref) => {
+  const resolvedSize = size || "default";
+  if (!status) {
+    return /* @__PURE__ */ React.createElement(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: (0, import_utils.cn)(avatarVariants({ size, shape }), className),
+        ...props
+      },
+      children
+    );
+  }
+  return /* @__PURE__ */ React.createElement("span", { className: "relative inline-flex" }, /* @__PURE__ */ React.createElement(
+    AvatarPrimitive.Root,
+    {
+      ref,
+      className: (0, import_utils.cn)(avatarVariants({ size, shape }), className),
+      ...props
+    },
+    children
+  ), /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: (0, import_utils.cn)(
+        "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+        statusDotSizes[resolvedSize],
+        statusColors[status]
+      )
+    }
+  ));
+});
+Avatar.displayName = "Avatar";
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: (0, import_utils.cn)("object-cover w-full h-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef(({ className, size, name, colorized, colorVariant = "vivid", children, ...props }, ref) => {
+  const resolvedSize = size || "default";
+  const colorKey = name || colorized;
+  const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null;
+  const resolvedChildren = children ?? (name ? getAvatarInitials(name) : void 0);
+  return /* @__PURE__ */ React.createElement(
+    AvatarPrimitive.Fallback,
+    {
+      ref,
+      className: (0, import_utils.cn)(
+        "flex items-center justify-center w-full h-full font-semibold",
+        color ? [color.bg, color.text] : "bg-background-muted text-text-muted",
+        fallbackFontSizes[resolvedSize],
+        className
+      ),
+      ...props
+    },
+    resolvedChildren
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+const AvatarGroup = React.forwardRef(
+  ({ className, max, size = "default", shape = "circle", children, ...props }, ref) => {
+    const childArray = React.Children.toArray(children);
+    const visibleChildren = max ? childArray.slice(0, max) : childArray;
+    const overflowCount = max ? childArray.length - max : 0;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "flex items-center",
+          groupNegativeMargins[size],
+          "[&>*]:ring-2 [&>*]:ring-background",
+          className
+        ),
+        ...props
+      },
+      visibleChildren,
+      overflowCount > 0 && /* @__PURE__ */ React.createElement(Avatar, { size, shape }, /* @__PURE__ */ React.createElement(AvatarFallback, { size }, "+", overflowCount))
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+  avatarColors,
+  avatarVariants,
+  getAvatarColor,
+  getAvatarInitials
+});
+//# sourceMappingURL=avatar.js.map