@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-YP2ATSXP.js

@@ -0,0 +1,452 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React3 from 'react';
+import { Plus, Building2, CheckCircle2 } from 'lucide-react';
+
+var avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden",
+  {
+    variants: {
+      size: {
+        xs: "size-[var(--avatar-size-xs)] text-[length:var(--avatar-text-xs)]",
+        sm: "size-[var(--avatar-size-sm)] text-[length:var(--avatar-text-sm)]",
+        default: "size-[var(--avatar-size-default)] text-[length:var(--avatar-text-default)]",
+        lg: "size-[var(--avatar-size-lg)] text-[length:var(--avatar-text-lg)]",
+        xl: "size-[var(--avatar-size-xl)] text-[length:var(--avatar-text-xl)]"
+      },
+      shape: {
+        circle: "rounded-[var(--avatar-radius-circle)]"
+      },
+      bordered: {
+        true: "ring-2 ring-background",
+        false: ""
+      },
+      interactive: {
+        true: "cursor-pointer transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-[length:var(--avatar-focus-ring-width)] focus-visible:ring-offset-[length:var(--avatar-focus-ring-offset)] focus-visible:ring-[color:var(--avatar-focus-ring-color)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      shape: "circle",
+      bordered: false,
+      interactive: false
+    }
+  }
+);
+var contrastBorderClasses = {
+  "xs-circle": "after:absolute after:inset-0 after:rounded-full after:border-[0.5px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none",
+  "sm-circle": "after:absolute after:inset-0 after:rounded-full after:border-[0.5px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none",
+  "default-circle": "after:absolute after:inset-0 after:rounded-full after:border-[0.75px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none",
+  "lg-circle": "after:absolute after:inset-0 after:rounded-full after:border-[0.75px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none",
+  "xl-circle": "after:absolute after:inset-0 after:rounded-full after:border-[0.75px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none"
+};
+function getContrastBorderClass(size, shape) {
+  const key = `${size}-${shape}`;
+  return key in contrastBorderClasses ? contrastBorderClasses[key] : contrastBorderClasses["default-circle"];
+}
+function Avatar({
+  className,
+  size = "default",
+  shape = "circle",
+  bordered,
+  interactive,
+  contrastBorder = true,
+  tooltip,
+  children,
+  ...props
+}) {
+  const avatarElement = /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      className: cn(
+        avatarVariants({ size, shape, bordered, interactive }),
+        contrastBorder && size && shape && getContrastBorderClass(size, shape),
+        className
+      ),
+      "data-slot": "avatar",
+      tabIndex: tooltip ? 0 : void 0,
+      ...props,
+      children
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: avatarElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+    ] });
+  }
+  return avatarElement;
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      className: cn("aspect-square size-full object-cover", className),
+      "data-slot": "avatar-image",
+      ...props
+    }
+  );
+}
+var avatarFallbackVariants = cva(
+  "flex size-full items-center justify-center font-medium",
+  {
+    variants: {
+      colorScheme: {
+        default: "bg-[color:var(--avatar-fallback-bg-default)] text-[color:var(--avatar-fallback-text-default)]",
+        primary: "bg-[color:var(--avatar-fallback-bg-primary)] text-[color:var(--avatar-fallback-text-primary)]",
+        secondary: "bg-[color:var(--avatar-fallback-bg-secondary)] text-[color:var(--avatar-fallback-text-secondary)]",
+        success: "bg-[color:var(--avatar-fallback-bg-success)] text-[color:var(--avatar-fallback-text-success)]",
+        warning: "bg-[color:var(--avatar-fallback-bg-warning)] text-[color:var(--avatar-fallback-text-warning)]",
+        destructive: "bg-[color:var(--avatar-fallback-bg-destructive)] text-[color:var(--avatar-fallback-text-destructive)]"
+      }
+    },
+    defaultVariants: {
+      colorScheme: "default"
+    }
+  }
+);
+function AvatarFallback({
+  className,
+  colorScheme = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      className: cn(avatarFallbackVariants({ colorScheme }), className),
+      "data-slot": "avatar-fallback",
+      ...props
+    }
+  );
+}
+var avatarStatusVariants = cva(
+  "absolute bottom-0 right-0 rounded-full ring-[1.5px] ring-background",
+  {
+    variants: {
+      status: {
+        online: "bg-success",
+        offline: "bg-muted-foreground",
+        busy: "bg-destructive",
+        away: "bg-warning"
+      },
+      size: {
+        xs: "size-1.5",
+        // 6px
+        sm: "size-2",
+        // 8px
+        default: "size-2.5",
+        // 10px
+        lg: "size-3",
+        // 12px
+        xl: "size-3.5"
+        // 14px
+      }
+    },
+    defaultVariants: {
+      status: "offline",
+      size: "default"
+    }
+  }
+);
+var statusLabels = {
+  online: "Online",
+  offline: "Offline",
+  busy: "Busy",
+  away: "Away"
+};
+function AvatarStatus({
+  className,
+  status = "offline",
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": statusLabels[status],
+      className: cn(avatarStatusVariants({ status, size, className })),
+      "data-slot": "avatar-status",
+      role: "status",
+      ...props
+    }
+  );
+}
+var avatarBadgeVariants = cva(
+  "absolute -bottom-0.5 -right-0.5 flex items-center justify-center rounded-full ring-[1.5px] ring-background",
+  {
+    variants: {
+      variant: {
+        company: "bg-brius-500 text-base-white",
+        verified: "bg-sevends-blue-600 text-base-white"
+      },
+      size: {
+        xs: "size-2.5",
+        // 10px
+        sm: "size-3",
+        // 12px
+        default: "size-3.5",
+        // 14px
+        lg: "size-4",
+        // 16px
+        xl: "size-5"
+        // 18px
+      }
+    },
+    defaultVariants: {
+      variant: "verified",
+      size: "default"
+    }
+  }
+);
+var iconSizes = {
+  xs: "size-2",
+  sm: "size-2.5",
+  default: "size-3",
+  lg: "size-3.5",
+  xl: "size-4"
+};
+var badgeLabels = {
+  company: "Company account",
+  verified: "Verified account"
+};
+function AvatarBadge({
+  className,
+  variant = "verified",
+  size = "default",
+  children,
+  ...props
+}) {
+  const defaultIcon = variant === "company" ? /* @__PURE__ */ jsx(Building2, { className: iconSizes[size] }) : /* @__PURE__ */ jsx(CheckCircle2, { className: iconSizes[size] });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": badgeLabels[variant],
+      className: cn(avatarBadgeVariants({ variant, size, className })),
+      "data-slot": "avatar-badge",
+      role: "img",
+      ...props,
+      children: children ?? defaultIcon
+    }
+  );
+}
+var avatarGroupVariants = cva("flex", {
+  variants: {
+    size: {
+      xs: "-space-x-1",
+      sm: "-space-x-2",
+      default: "-space-x-3",
+      lg: "-space-x-3",
+      xl: "-space-x-4"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function AvatarGroup({
+  className,
+  max,
+  size = "default",
+  bordered = true,
+  children,
+  ...props
+}) {
+  const childArray = React3.Children.toArray(children);
+  const hasMax = max !== void 0;
+  const visibleChildren = hasMax ? childArray.slice(0, max) : childArray;
+  const remainingCount = hasMax ? Math.max(0, childArray.length - max) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `Avatar group${hasMax && remainingCount > 0 ? `, showing ${String(visibleChildren.length)} of ${String(childArray.length)}` : ""}`,
+      className: cn(avatarGroupVariants({ size, className })),
+      "data-slot": "avatar-group",
+      role: "group",
+      ...props,
+      children: [
+        visibleChildren.map((child) => {
+          if (React3.isValidElement(child) && child.type === Avatar) {
+            return React3.cloneElement(child, {
+              size: child.props.size ?? size,
+              bordered: child.props.bordered ?? bordered,
+              className: cn(
+                bordered && "ring-2 ring-background",
+                child.props.className
+              )
+            });
+          }
+          return child;
+        }),
+        remainingCount > 0 && /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            bordered,
+            className: cn(bordered && "ring-2 ring-background"),
+            size,
+            children: /* @__PURE__ */ jsxs(AvatarFallback, { className: "bg-muted text-muted-foreground text-xs font-medium", children: [
+              "+",
+              remainingCount
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+var avatarLabelGroupVariants = cva(
+  "flex items-center gap-3",
+  {
+    variants: {
+      interactive: {
+        true: "cursor-pointer rounded-lg transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 -m-2 p-2",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      interactive: false
+    }
+  }
+);
+function getInitials(name) {
+  return name.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+}
+function AvatarLabelGroup({
+  className,
+  src,
+  alt,
+  name,
+  description,
+  size = "default",
+  status,
+  badge,
+  interactive = false,
+  onClick,
+  tooltip,
+  ...props
+}) {
+  const tooltipText = tooltip === true ? description ? `${name} - ${description}` : name : typeof tooltip === "string" ? tooltip : void 0;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(avatarLabelGroupVariants({ interactive }), className),
+      "data-slot": "avatar-label-group",
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive || tooltipText ? 0 : void 0,
+      onClick: interactive ? onClick : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs(Avatar, { interactive, size, children: [
+            src && /* @__PURE__ */ jsx(AvatarImage, { alt: alt ?? name, src }),
+            /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(name) })
+          ] }),
+          status && /* @__PURE__ */ jsx(AvatarStatus, { size, status }),
+          badge && !status && /* @__PURE__ */ jsx(AvatarBadge, { size, variant: badge })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: name }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: description })
+        ] })
+      ]
+    }
+  );
+  if (tooltipText) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: content }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltipText })
+    ] });
+  }
+  return content;
+}
+var avatarAddButtonVariants = cva(
+  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-muted-foreground/50 bg-muted text-muted-foreground transition-colors hover:border-primary hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer",
+  {
+    variants: {
+      size: {
+        xs: "size-[var(--avatar-size-xs)]",
+        sm: "size-[var(--avatar-size-sm)]",
+        default: "size-[var(--avatar-size-default)]",
+        lg: "size-[var(--avatar-size-lg)]",
+        xl: "size-[var(--avatar-size-xl)]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function AvatarAddButton({
+  className,
+  size = "default",
+  ...props
+}) {
+  const iconSizes2 = {
+    xs: "size-3",
+    sm: "size-3.5",
+    default: "size-4",
+    lg: "size-5",
+    xl: "size-6"
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Add user",
+      className: cn(avatarAddButtonVariants({ size, className })),
+      "data-slot": "avatar-add-button",
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(Plus, { className: iconSizes2[size] })
+    }
+  );
+}
+function AvatarSkeleton({
+  size = "default",
+  shape = "circle",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        avatarVariants({ size, shape }),
+        "bg-muted animate-pulse",
+        className
+      ),
+      "data-slot": "avatar-skeleton",
+      ...props
+    }
+  );
+}
+function AvatarLabelGroupSkeleton({
+  size = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-3", className),
+      "data-slot": "avatar-label-group-skeleton",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(AvatarSkeleton, { size }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-muted animate-pulse" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-32 rounded bg-muted animate-pulse" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { Avatar, AvatarAddButton, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, AvatarLabelGroup, AvatarLabelGroupSkeleton, AvatarSkeleton, AvatarStatus, avatarAddButtonVariants, avatarBadgeVariants, avatarFallbackVariants, avatarGroupVariants, avatarLabelGroupVariants, avatarStatusVariants, avatarVariants, getInitials };
+//# sourceMappingURL=chunk-YP2ATSXP.js.map
+//# sourceMappingURL=chunk-YP2ATSXP.js.map

package/dist/chunk-YP2ATSXP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Avatar/Avatar.tsx","../src/components/primitives/Avatar/AvatarStatus.tsx","../src/components/primitives/Avatar/AvatarBadge.tsx","../src/components/primitives/Avatar/AvatarGroup.tsx","../src/components/primitives/Avatar/AvatarLabelGroup.tsx","../src/components/primitives/Avatar/AvatarAddButton.tsx","../src/components/primitives/Avatar/AvatarSkeleton.tsx"],"names":["cva","jsx","jsxs","iconSizes"],"mappings":"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","file":"chunk-YP2ATSXP.js","sourcesContent":["\"use client\"\n\nimport type { AvatarFallbackProps, AvatarImageProps, AvatarProps } from \"./Avatar.types\"\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"../../feedback/Tooltip\"\n\nconst avatarVariants = cva(\n  \"relative flex shrink-0 overflow-hidden\",\n  {\n    variants: {\n      size: {\n        xs: \"size-[var(--avatar-size-xs)] text-[length:var(--avatar-text-xs)]\",\n        sm: \"size-[var(--avatar-size-sm)] text-[length:var(--avatar-text-sm)]\",\n        default: \"size-[var(--avatar-size-default)] text-[length:var(--avatar-text-default)]\",\n        lg: \"size-[var(--avatar-size-lg)] text-[length:var(--avatar-text-lg)]\",\n        xl: \"size-[var(--avatar-size-xl)] text-[length:var(--avatar-text-xl)]\",\n      },\n      shape: {\n        circle: \"rounded-[var(--avatar-radius-circle)]\",\n      },\n      bordered: {\n        true: \"ring-2 ring-background\",\n        false: \"\",\n      },\n      interactive: {\n        true: \"cursor-pointer transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-[length:var(--avatar-focus-ring-width)] focus-visible:ring-offset-[length:var(--avatar-focus-ring-offset)] focus-visible:ring-[color:var(--avatar-focus-ring-color)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"circle\",\n      bordered: false,\n      interactive: false,\n    },\n  }\n)\n\n// Static contrast border classes for Tailwind JIT compatibility\n// Uses base-black/8 token instead of hardcoded rgba values\nconst contrastBorderClasses = {\n  \"xs-circle\": \"after:absolute after:inset-0 after:rounded-full after:border-[0.5px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none\",\n  \"sm-circle\": \"after:absolute after:inset-0 after:rounded-full after:border-[0.5px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none\",\n  \"default-circle\": \"after:absolute after:inset-0 after:rounded-full after:border-[0.75px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none\",\n  \"lg-circle\": \"after:absolute after:inset-0 after:rounded-full after:border-[0.75px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none\",\n  \"xl-circle\": \"after:absolute after:inset-0 after:rounded-full after:border-[0.75px] after:border-[color:var(--avatar-border-contrast)] after:pointer-events-none\",\n} as const\n\nfunction getContrastBorderClass(size: string, shape: string): string {\n  const key = `${size}-${shape}` as keyof typeof contrastBorderClasses\n  return key in contrastBorderClasses ? contrastBorderClasses[key] : contrastBorderClasses[\"default-circle\"]\n}\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  shape = \"circle\",\n  bordered,\n  interactive,\n  contrastBorder = true,\n  tooltip,\n  children,\n  ...props\n}: AvatarProps) {\n  const avatarElement = (\n    <AvatarPrimitive.Root\n      className={cn(\n        avatarVariants({ size, shape, bordered, interactive }),\n        contrastBorder && size && shape && getContrastBorderClass(size, shape),\n        className\n      )}\n      data-slot=\"avatar\"\n      tabIndex={tooltip ? 0 : undefined}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Root>\n  )\n\n  if (tooltip) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {avatarElement}\n        </TooltipTrigger>\n        <TooltipContent>\n          {tooltip}\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return avatarElement\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: AvatarImageProps) {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\"aspect-square size-full object-cover\", className)}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  )\n}\n\nconst avatarFallbackVariants = cva(\n  \"flex size-full items-center justify-center font-medium\",\n  {\n    variants: {\n      colorScheme: {\n        default: \"bg-[color:var(--avatar-fallback-bg-default)] text-[color:var(--avatar-fallback-text-default)]\",\n        primary: \"bg-[color:var(--avatar-fallback-bg-primary)] text-[color:var(--avatar-fallback-text-primary)]\",\n        secondary: \"bg-[color:var(--avatar-fallback-bg-secondary)] text-[color:var(--avatar-fallback-text-secondary)]\",\n        success: \"bg-[color:var(--avatar-fallback-bg-success)] text-[color:var(--avatar-fallback-text-success)]\",\n        warning: \"bg-[color:var(--avatar-fallback-bg-warning)] text-[color:var(--avatar-fallback-text-warning)]\",\n        destructive: \"bg-[color:var(--avatar-fallback-bg-destructive)] text-[color:var(--avatar-fallback-text-destructive)]\",\n      },\n    },\n    defaultVariants: {\n      colorScheme: \"default\",\n    },\n  }\n)\n\nfunction AvatarFallback({\n  className,\n  colorScheme = \"default\",\n  ...props\n}: AvatarFallbackProps) {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(avatarFallbackVariants({ colorScheme }), className)}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  )\n}\n\nexport { Avatar, AvatarFallback, avatarFallbackVariants, AvatarImage, avatarVariants }\n","\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst avatarStatusVariants = cva(\n  \"absolute bottom-0 right-0 rounded-full ring-[1.5px] ring-background\",\n  {\n    variants: {\n      status: {\n        online: \"bg-success\",\n        offline: \"bg-muted-foreground\",\n        busy: \"bg-destructive\",\n        away: \"bg-warning\",\n      },\n      size: {\n        xs: \"size-1.5\",      // 6px\n        sm: \"size-2\",        // 8px\n        default: \"size-2.5\", // 10px\n        lg: \"size-3\",        // 12px\n        xl: \"size-3.5\",      // 14px\n      },\n    },\n    defaultVariants: {\n      status: \"offline\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface AvatarStatusProps extends React.ComponentProps<\"span\"> {\n  /**\n   * The size of the status indicator (should match parent Avatar size)\n   * @default \"default\"\n   */\n  size?: \"default\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"\n  /**\n   * The status to display\n   * @default \"offline\"\n   */\n  status?: \"away\" | \"busy\" | \"offline\" | \"online\"\n}\n\nconst statusLabels = {\n  online: \"Online\",\n  offline: \"Offline\",\n  busy: \"Busy\",\n  away: \"Away\",\n} as const\n\nfunction AvatarStatus({\n  className,\n  status = \"offline\",\n  size,\n  ...props\n}: AvatarStatusProps) {\n  return (\n    <span\n      aria-label={statusLabels[status]}\n      className={cn(avatarStatusVariants({ status, size, className }))}\n      data-slot=\"avatar-status\"\n      role=\"status\"\n      {...props}\n    />\n  )\n}\n\nexport { AvatarStatus, avatarStatusVariants }\n","\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport { Building2, CheckCircle2 } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst avatarBadgeVariants = cva(\n  \"absolute -bottom-0.5 -right-0.5 flex items-center justify-center rounded-full ring-[1.5px] ring-background\",\n  {\n    variants: {\n      variant: {\n        company: \"bg-brius-500 text-base-white\",\n        verified: \"bg-sevends-blue-600 text-base-white\",\n      },\n      size: {\n        xs: \"size-2.5\",      // 10px\n        sm: \"size-3\",        // 12px\n        default: \"size-3.5\", // 14px\n        lg: \"size-4\",        // 16px\n        xl: \"size-5\",   // 18px\n      },\n    },\n    defaultVariants: {\n      variant: \"verified\",\n      size: \"default\",\n    },\n  }\n)\n\nconst iconSizes = {\n  xs: \"size-2\",\n  sm: \"size-2.5\",\n  default: \"size-3\",\n  lg: \"size-3.5\",\n  xl: \"size-4\",\n} as const\n\nexport interface AvatarBadgeProps extends React.ComponentProps<\"span\"> {\n  /**\n   * The size of the badge (should match parent Avatar size)\n   * @default \"default\"\n   */\n  size?: \"default\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"\n  /**\n   * The badge variant to display\n   * @default \"verified\"\n   */\n  variant?: \"company\" | \"verified\"\n}\n\nconst badgeLabels = {\n  company: \"Company account\",\n  verified: \"Verified account\",\n} as const\n\nfunction AvatarBadge({\n  className,\n  variant = \"verified\",\n  size = \"default\",\n  children,\n  ...props\n}: AvatarBadgeProps) {\n  const defaultIcon = variant === \"company\"\n    ? <Building2 className={iconSizes[size]} />\n    : <CheckCircle2 className={iconSizes[size]} />\n\n  return (\n    <span\n      aria-label={badgeLabels[variant]}\n      className={cn(avatarBadgeVariants({ variant, size, className }))}\n      data-slot=\"avatar-badge\"\n      role=\"img\"\n      {...props}\n    >\n      {children ?? defaultIcon}\n    </span>\n  )\n}\n\nexport { AvatarBadge, avatarBadgeVariants }\n","\"use client\"\n\nimport type { AvatarProps, AvatarSize } from \"./Avatar.types\"\n\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Avatar, AvatarFallback } from \"./Avatar\"\n\nconst avatarGroupVariants = cva(\"flex\", {\n  variants: {\n    size: {\n      xs: \"-space-x-1\",\n      sm: \"-space-x-2\",\n      default: \"-space-x-3\",\n      lg: \"-space-x-3\",\n      xl: \"-space-x-4\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nexport interface AvatarGroupProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Whether to apply ring-2 ring-background to all avatars for visual separation\n   * @default true\n   */\n  bordered?: boolean\n  /**\n   * Child Avatar components\n   */\n  children: React.ReactNode\n  /**\n   * Maximum number of avatars to display before showing \"+N\" indicator\n   */\n  max?: number\n  /**\n   * Size to apply to all child avatars\n   * @default \"default\"\n   */\n  size?: AvatarSize\n}\n\nfunction AvatarGroup({\n  className,\n  max,\n  size = \"default\",\n  bordered = true,\n  children,\n  ...props\n}: AvatarGroupProps) {\n  // eslint-disable-next-line @eslint-react/no-children-to-array -- Required to count and slice children for max limit\n  const childArray = React.Children.toArray(children)\n  const hasMax = max !== undefined\n  const visibleChildren = hasMax ? childArray.slice(0, max) : childArray\n  const remainingCount = hasMax ? Math.max(0, childArray.length - max) : 0\n\n  return (\n    <div\n      aria-label={`Avatar group${hasMax && remainingCount > 0 ? `, showing ${String(visibleChildren.length)} of ${String(childArray.length)}` : \"\"}`}\n      className={cn(avatarGroupVariants({ size, className }))}\n      data-slot=\"avatar-group\"\n      role=\"group\"\n      {...props}\n    >\n      {/* eslint-disable @eslint-react/no-clone-element -- Required to inject size/bordered props to Avatar children */}\n      {visibleChildren.map((child) => {\n        if (React.isValidElement<AvatarProps>(child) && child.type === Avatar) {\n          // Children.toArray assigns stable keys to all children\n          return React.cloneElement(child, {\n            size: child.props.size ?? size,\n            bordered: child.props.bordered ?? bordered,\n            className: cn(\n              bordered && \"ring-2 ring-background\",\n              child.props.className\n            ),\n          })\n        }\n        return child\n      })}\n      {/* eslint-enable @eslint-react/no-clone-element */}\n      {remainingCount > 0 && (\n        <Avatar\n          bordered={bordered}\n          className={cn(bordered && \"ring-2 ring-background\")}\n          size={size}\n        >\n          <AvatarFallback className=\"bg-muted text-muted-foreground text-xs font-medium\">\n            +{remainingCount}\n          </AvatarFallback>\n        </Avatar>\n      )}\n    </div>\n  )\n}\n\nexport { AvatarGroup, avatarGroupVariants }\n","\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"../../feedback/Tooltip\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"./Avatar\"\nimport { AvatarBadge, type AvatarBadgeProps } from \"./AvatarBadge\"\nimport { AvatarStatus, type AvatarStatusProps } from \"./AvatarStatus\"\n\nconst avatarLabelGroupVariants = cva(\n  \"flex items-center gap-3\",\n  {\n    variants: {\n      interactive: {\n        true: \"cursor-pointer rounded-lg transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 -m-2 p-2\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      interactive: false,\n    },\n  }\n)\n\nexport interface AvatarLabelGroupProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string\n  /**\n   * Optional badge variant (company or verified)\n   * Cannot be used together with status\n   */\n  badge?: AvatarBadgeProps[\"variant\"]\n  /**\n   * Optional description text below the name\n   */\n  description?: string\n  /**\n   * Whether the component is interactive (shows hover/focus states)\n   * @default false\n   */\n  interactive?: boolean\n  /**\n   * The name to display (required, also used for initials fallback)\n   */\n  name: string\n  /**\n   * Click handler for interactive mode\n   */\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n  /**\n   * Size variant for the avatar and status/badge indicator\n   * @default \"default\"\n   */\n  size?: AvatarStatusProps[\"size\"]\n  /**\n   * The image source for the avatar\n   */\n  src?: string\n  /**\n   * Optional status indicator (online, offline, busy, away)\n   * Cannot be used together with badge\n   */\n  status?: AvatarStatusProps[\"status\"]\n  /**\n   * Tooltip text to display on hover\n   * If true, uses name + description\n   * @default undefined\n   */\n  tooltip?: boolean | string\n}\n\n/**\n * Generates initials from a name string\n * Takes first letter of first two words, uppercased\n */\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((word) => word[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2)\n}\n\nfunction AvatarLabelGroup({\n  className,\n  src,\n  alt,\n  name,\n  description,\n  size = \"default\",\n  status,\n  badge,\n  interactive = false,\n  onClick,\n  tooltip,\n  ...props\n}: AvatarLabelGroupProps) {\n  // Generate tooltip text\n  const tooltipText = tooltip === true\n    ? description ? `${name} - ${description}` : name\n    : typeof tooltip === \"string\" ? tooltip : undefined\n\n  const content = (\n    <div\n      className={cn(avatarLabelGroupVariants({ interactive }), className)}\n      data-slot=\"avatar-label-group\"\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive || tooltipText ? 0 : undefined}\n      onClick={interactive ? onClick : undefined}\n      {...props}\n    >\n      <div className=\"relative\">\n        <Avatar interactive={interactive} size={size}>\n          {src && <AvatarImage alt={alt ?? name} src={src} />}\n          <AvatarFallback>{getInitials(name)}</AvatarFallback>\n        </Avatar>\n        {status && <AvatarStatus size={size} status={status} />}\n        {badge && !status && <AvatarBadge size={size} variant={badge} />}\n      </div>\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-medium text-foreground\">{name}</span>\n        {description && (\n          <span className=\"text-sm text-muted-foreground\">{description}</span>\n        )}\n      </div>\n    </div>\n  )\n\n  if (tooltipText) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {content}\n        </TooltipTrigger>\n        <TooltipContent>\n          {tooltipText}\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return content\n}\n\nexport { AvatarLabelGroup, avatarLabelGroupVariants, getInitials }\n","\"use client\"\n\nimport { cva } from \"class-variance-authority\"\nimport { Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst avatarAddButtonVariants = cva(\n  \"relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-muted-foreground/50 bg-muted text-muted-foreground transition-colors hover:border-primary hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer\",\n  {\n    variants: {\n      size: {\n        xs: \"size-[var(--avatar-size-xs)]\",\n        sm: \"size-[var(--avatar-size-sm)]\",\n        default: \"size-[var(--avatar-size-default)]\",\n        lg: \"size-[var(--avatar-size-lg)]\",\n        xl: \"size-[var(--avatar-size-xl)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nexport interface AvatarAddButtonProps extends React.ComponentProps<\"button\"> {\n  size?: \"default\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"\n}\n\nfunction AvatarAddButton({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarAddButtonProps) {\n  const iconSizes = {\n    xs: \"size-3\",\n    sm: \"size-3.5\",\n    default: \"size-4\",\n    lg: \"size-5\",\n    xl: \"size-6\",\n  }\n\n  return (\n    <button\n      aria-label=\"Add user\"\n      className={cn(avatarAddButtonVariants({ size, className }))}\n      data-slot=\"avatar-add-button\"\n      type=\"button\"\n      {...props}\n    >\n      <Plus className={iconSizes[size]} />\n    </button>\n  )\n}\n\nexport { AvatarAddButton, avatarAddButtonVariants }\n","\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { avatarVariants } from \"./Avatar\"\n\nexport interface AvatarSkeletonProps extends React.ComponentProps<\"div\"> {\n  /**\n   * The shape of the skeleton\n   * @default \"circle\"\n   */\n  shape?: \"circle\"\n  /**\n   * The size of the skeleton\n   * @default \"default\"\n   */\n  size?: \"default\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"\n}\n\nexport interface AvatarLabelGroupSkeletonProps extends React.ComponentProps<\"div\"> {\n  /**\n   * The size of the avatar skeleton\n   * @default \"default\"\n   */\n  size?: \"default\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"\n}\n\n/**\n * Skeleton placeholder for Avatar component\n * Use while loading user data\n */\nfunction AvatarSkeleton({\n  size = \"default\",\n  shape = \"circle\",\n  className,\n  ...props\n}: AvatarSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        avatarVariants({ size, shape }),\n        \"bg-muted animate-pulse\",\n        className\n      )}\n      data-slot=\"avatar-skeleton\"\n      {...props}\n    />\n  )\n}\n\n/**\n * Skeleton placeholder for AvatarLabelGroup component\n * Use while loading user data with name and description\n */\nfunction AvatarLabelGroupSkeleton({\n  size = \"default\",\n  className,\n  ...props\n}: AvatarLabelGroupSkeletonProps) {\n  return (\n    <div\n      className={cn(\"flex items-center gap-3\", className)}\n      data-slot=\"avatar-label-group-skeleton\"\n      {...props}\n    >\n      <AvatarSkeleton size={size} />\n      <div className=\"flex flex-col gap-1.5\">\n        <div className=\"h-4 w-24 rounded bg-muted animate-pulse\" />\n        <div className=\"h-3 w-32 rounded bg-muted animate-pulse\" />\n      </div>\n    </div>\n  )\n}\n\nexport { AvatarLabelGroupSkeleton, AvatarSkeleton }\n"]}