@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/avatar.js

@@ -1,159 +1,169 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import { extendTailwindMerge } from 'tailwind-merge';
+import '@phosphor-icons/react/dist/csr/Plus';
+import 'react-aria-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var avatarSizeClass = {
-  sm: "h-8 w-8 min-h-8 min-w-8",
-  md: "h-10 w-10 min-h-10 min-w-10",
-  lg: "h-12 w-12 min-h-12 min-w-12"
-};
-var avatarFallbackTextClass = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base"
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
 };
-var AvatarSizeContext = React.createContext("md");
-var avatarHideFallbackWhenImage = "[&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:pointer-events-none [&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:opacity-0";
-var Avatar = React.forwardRef(
-  ({ className, size = "md", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(AvatarSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-slot": "avatar",
-        "data-size": size,
-        className: cn(
-          "relative flex shrink-0 overflow-hidden rounded-full",
-          avatarHideFallbackWhenImage,
-          avatarSizeClass[size],
-          className
-        ),
-        ...props,
-        children
-      }
-    ) });
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+      sizes[size],
+      className
+    ),
+    style: {
+      backgroundImage: "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)"
+    },
+    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7.2 2.85", fill: "none", className: "mt-[10%] h-[20%] w-[60%]", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z",
+          fill: "url(#reflection-gradient)",
+          fillOpacity: "0.4"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "reflection-gradient", x1: "3.6", y1: "0", x2: "3.6", y2: "2.4", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx("stop", { stopColor: "white" }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.1" })
+      ] }) })
+    ] })
   }
 );
-Avatar.displayName = "Avatar";
-var AvatarImage = React.forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      onLoad,
-      onError,
-      alt = "",
-      ...imgProps
-    } = props;
-    const [failed, setFailed] = useState(false);
-    const src = imgProps.src;
-    useEffect(() => {
-      setFailed(false);
-    }, [src]);
-    if (!src || failed) {
-      return null;
+var sizes2 = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4",
+  xl: "size-4.5",
+  "2xl": "size-5",
+  "3xl": "size-6",
+  "4xl": "size-8"
+};
+var VerifiedTick = ({ size, className }) => /* @__PURE__ */ jsxs("svg", { className: cx("z-10 text-utility-blue-500", sizes2[size], className), viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z",
+      className: "fill-current"
     }
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        ref,
-        alt,
-        "data-slot": "avatar-image",
-        className: cn(
-          "absolute inset-0 z-10 h-full w-full object-cover",
-          className
-        ),
-        onLoad,
-        onError: (e) => {
-          setFailed(true);
-          onError?.(e);
-        },
-        ...imgProps
-      }
-    );
-  }
-);
-AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React.forwardRef(
-  ({ className, ...props }, ref) => {
-    const size = React.useContext(AvatarSizeContext);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-slot": "avatar-fallback",
-        className: cn(
-          "absolute inset-0 z-0 flex items-center justify-center rounded-full bg-primary/10 font-semibold text-primary select-none",
-          avatarFallbackTextClass[size],
-          className
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z",
+      fill: "white"
+    }
+  )
+] });
+var AvatarCount = ({ count, className }) => /* @__PURE__ */ jsx("div", { className: cx("absolute right-0 bottom-0 p-px", className), children: /* @__PURE__ */ jsx("div", { className: "flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white", children: count }) });
+var styles = {
+  xs: { root: "size-6", rootWithBorder: "p-px", initials: "text-xs font-semibold", icon: "size-4" },
+  sm: { root: "size-8", rootWithBorder: "p-px", initials: "text-sm font-semibold", icon: "size-5" },
+  md: { root: "size-10", rootWithBorder: "p-px", initials: "text-md font-semibold", icon: "size-6" },
+  lg: { root: "size-12", rootWithBorder: "p-[1.5px]", initials: "text-lg font-semibold", icon: "size-7" },
+  xl: { root: "size-14", rootWithBorder: "p-0.5", initials: "text-xl font-semibold", icon: "size-8" },
+  "2xl": { root: "size-16", rootWithBorder: "p-0.5", initials: "text-display-xs font-semibold", icon: "size-8" }
+};
+var Avatar = ({
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  border,
+  badge,
+  status,
+  verified,
+  count,
+  focusable = false,
+  rounded = true,
+  className,
+  contentClassName
+}) => {
+  const [isFailed, setIsFailed] = useState(false);
+  const canShowImage = src && !isFailed;
+  const renderMainContent = () => {
+    if (canShowImage) {
+      return /* @__PURE__ */ jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src, alt, onError: () => setIsFailed(true) });
+    }
+    if (initials) {
+      return /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles[size].initials), children: initials });
+    }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+    }
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
+    }
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
+    }
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
+    }
+    return badge;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-avatar": true,
+      className: cx(
+        "relative inline-flex shrink-0 rounded-[7px]",
+        rounded && "rounded-full",
+        // Focus styles
+        focusable && "outline-none group-focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+        border && "ring-1 ring-secondary_alt",
+        border && styles[size].rootWithBorder,
+        styles[size].root,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:inset-[0.5px]",
+              rounded && "rounded-full",
+              canShowImage && size !== "xs" && "before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+              contentClassName
+            ),
+            children: renderMainContent()
+          }
         ),
-        ...props
-      }
-    );
-  }
-);
-AvatarFallback.displayName = "AvatarFallback";
-var avatarGroupOverflowTextClass = {
-  sm: "text-[10px]",
-  md: "text-xs",
-  lg: "text-sm"
+        renderBadgeContent()
+      ]
+    }
+  );
 };
-var AvatarGroup = React.forwardRef(
-  ({ className, children, max, size = "md", ...rest }, ref) => {
-    const items = React.Children.toArray(children).filter(
-      (node) => React.isValidElement(node) && node.type === Avatar
-    );
-    const overflow = max != null && max > 0 && items.length > max ? items.length - max : 0;
-    const shown = max != null && max > 0 ? items.slice(0, max) : items;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        "data-slot": "avatar-group",
-        "data-size": size,
-        className: cn("flex items-center -space-x-2", className),
-        ...rest,
-        children: [
-          shown.map(
-            (child, index) => React.cloneElement(child, {
-              key: child.key ?? `avatar-group-${index}`,
-              className: cn(
-                child.props.className,
-                "ring-background relative z-0 ring-2"
-              ),
-              style: {
-                ...child.props.style ?? {},
-                zIndex: index + 1
-              }
-            })
-          ),
-          overflow > 0 ? /* @__PURE__ */ jsxs(
-            "span",
-            {
-              "aria-label": `${overflow} more`,
-              className: cn(
-                "border-background text-primary bg-primary/15 ring-background relative flex shrink-0 items-center justify-center rounded-full border-2 font-semibold tabular-nums ring-2",
-                avatarSizeClass[size],
-                avatarGroupOverflowTextClass[size]
-              ),
-              style: { zIndex: shown.length + 1 },
-              children: [
-                "+",
-                overflow > 99 ? 99 : overflow
-              ]
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-AvatarGroup.displayName = "AvatarGroup";
 
-export { Avatar, AvatarFallback, AvatarGroup, AvatarImage };
+export { Avatar };
 //# sourceMappingURL=avatar.js.map
 //# sourceMappingURL=avatar.js.map

package/dist/react/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst avatarSizeClass = {\n  sm: \"h-8 w-8 min-h-8 min-w-8\",\n  md: \"h-10 w-10 min-h-10 min-w-10\",\n  lg: \"h-12 w-12 min-h-12 min-w-12\",\n} as const;\n\nconst avatarFallbackTextClass = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport type AvatarSize = keyof typeof avatarSizeClass;\n\nconst AvatarSizeContext = React.createContext<AvatarSize>(\"md\");\n\nconst avatarHideFallbackWhenImage =\n  \"[&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:pointer-events-none [&:has([data-slot=avatar-image])_[data-slot=avatar-fallback]]:opacity-0\";\n\nexport type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** @default md */\n  size?: AvatarSize;\n};\n\nconst Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, size = \"md\", children, ...props }, ref) => {\n    return (\n      <AvatarSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          data-slot=\"avatar\"\n          data-size={size}\n          className={cn(\n            \"relative flex shrink-0 overflow-hidden rounded-full\",\n            avatarHideFallbackWhenImage,\n            avatarSizeClass[size],\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </AvatarSizeContext.Provider>\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\n\nexport type AvatarImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nconst AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n  (props, ref) => {\n    /* eslint-disable react/prop-types -- props typed as AvatarImageProps */\n    const {\n      className,\n      onLoad,\n      onError,\n      alt = \"\",\n      ...imgProps\n    } = props;\n    /* eslint-enable react/prop-types */\n    const [failed, setFailed] = useState(false);\n    const src = imgProps.src;\n\n    useEffect(() => {\n      setFailed(false);\n    }, [src]);\n\n    if (!src || failed) {\n      return null;\n    }\n\n    return (\n      <img\n        ref={ref}\n        alt={alt}\n        data-slot=\"avatar-image\"\n        className={cn(\n          \"absolute inset-0 z-10 h-full w-full object-cover\",\n          className,\n        )}\n        onLoad={onLoad}\n        onError={(e) => {\n          setFailed(true);\n          onError?.(e);\n        }}\n        {...imgProps}\n      />\n    );\n  },\n);\nAvatarImage.displayName = \"AvatarImage\";\n\nexport type AvatarFallbackProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(\n  ({ className, ...props }, ref) => {\n    const size = React.useContext(AvatarSizeContext);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"avatar-fallback\"\n        className={cn(\n          \"absolute inset-0 z-0 flex items-center justify-center rounded-full bg-primary/10 font-semibold text-primary select-none\",\n          avatarFallbackTextClass[size],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nAvatarFallback.displayName = \"AvatarFallback\";\n\nconst avatarGroupOverflowTextClass: Record<AvatarSize, string> = {\n  sm: \"text-[10px]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n};\n\nexport type AvatarGroupProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> & {\n  children: React.ReactNode;\n  /**\n   * show only the first `max` avatars; extra members become a +N chip (direct\n   * `Avatar` children only).\n   */\n  max?: number;\n  /** chip size; use the same `size` on each `Avatar` so the stack lines up */\n  size?: AvatarSize;\n};\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    { className, children, max, size = \"md\", ...rest },\n    ref,\n  ) => {\n    const items = React.Children.toArray(children).filter(\n      (node): node is React.ReactElement =>\n        React.isValidElement(node) && node.type === Avatar,\n    );\n\n    const overflow =\n      max != null && max > 0 && items.length > max ? items.length - max : 0;\n    const shown = max != null && max > 0 ? items.slice(0, max) : items;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"avatar-group\"\n        data-size={size}\n        className={cn(\"flex items-center -space-x-2\", className)}\n        {...rest}\n      >\n        {shown.map((child, index) =>\n          React.cloneElement(child, {\n            key: child.key ?? `avatar-group-${index}`,\n            className: cn(\n              (child.props as { className?: string }).className,\n              \"ring-background relative z-0 ring-2\",\n            ),\n            style: {\n              ...((child.props as { style?: React.CSSProperties }).style ??\n                {}),\n              zIndex: index + 1,\n            },\n          } as Partial<typeof child.props>),\n        )}\n        {overflow > 0 ? (\n          <span\n            aria-label={`${overflow} more`}\n            className={cn(\n              \"border-background text-primary bg-primary/15 ring-background relative flex shrink-0 items-center justify-center rounded-full border-2 font-semibold tabular-nums ring-2\",\n              avatarSizeClass[size],\n              avatarGroupOverflowTextClass[size],\n            )}\n            style={{ zIndex: shown.length + 1 }}\n          >\n            +{overflow > 99 ? 99 : overflow}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup };\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/avatar/base-components/avatar-online-indicator.tsx","../../../../components/base/avatar/base-components/verified-tick.tsx","../../../../components/base/avatar/base-components/avatar-count.tsx","../../../../components/base/avatar/avatar.tsx"],"names":["jsx","jsxs","sizes","User01"],"mappings":"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","file":"avatar.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\nconst sizes = {\n    xs: \"size-1.5\",\n    sm: \"size-2\",\n    md: \"size-2.5\",\n    lg: \"size-3\",\n    xl: \"size-3.5\",\n    \"2xl\": \"size-4\",\n    \"3xl\": \"size-4.5\",\n    \"4xl\": \"size-5\",\n};\n\ninterface AvatarOnlineIndicatorProps {\n    size: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\n    status: \"online\" | \"offline\";\n    className?: string;\n}\n\nexport const AvatarOnlineIndicator = ({ size, status, className }: AvatarOnlineIndicatorProps) => (\n    <span\n        className={cx(\n            \"absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary\",\n            status === \"online\" ? \"bg-fg-success-secondary\" : \"bg-utility-neutral-300\",\n            sizes[size],\n            className,\n        )}\n        style={{\n            backgroundImage:\n                \"radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)\",\n        }}\n    >\n        {/* Reflection */}\n        <svg viewBox=\"0 0 7.2 2.85\" fill=\"none\" className=\"mt-[10%] h-[20%] w-[60%]\">\n            <path\n                d=\"M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z\"\n                fill=\"url(#reflection-gradient)\"\n                fillOpacity=\"0.4\"\n            />\n            <defs>\n                <linearGradient id=\"reflection-gradient\" x1=\"3.6\" y1=\"0\" x2=\"3.6\" y2=\"2.4\" gradientUnits=\"userSpaceOnUse\">\n                    <stop stopColor=\"white\" />\n                    <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0.1\" />\n                </linearGradient>\n            </defs>\n        </svg>\n    </span>\n);\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\nconst sizes = {\n    xs: \"size-2.5\",\n    sm: \"size-3\",\n    md: \"size-3.5\",\n    lg: \"size-4\",\n    xl: \"size-4.5\",\n    \"2xl\": \"size-5\",\n    \"3xl\": \"size-6\",\n    \"4xl\": \"size-8\",\n};\n\ninterface VerifiedTickProps {\n    size: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\n    className?: string;\n}\n\nexport const VerifiedTick = ({ size, className }: VerifiedTickProps) => (\n    <svg className={cx(\"z-10 text-utility-blue-500\", sizes[size], className)} viewBox=\"0 0 10 10\" fill=\"none\">\n        <path\n            d=\"M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z\"\n            className=\"fill-current\"\n        />\n        <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z\"\n            fill=\"white\"\n        />\n    </svg>\n);\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\ninterface AvatarCountProps {\n    count: number;\n    className?: string;\n}\n\nexport const AvatarCount = ({ count, className }: AvatarCountProps) => (\n    <div className={cx(\"absolute right-0 bottom-0 p-px\", className)}>\n        <div className=\"flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white\">\n            {count}\n        </div>\n    </div>\n);\n","\"use client\";\n\n/** Figma: Avatar (18:1350) */\n\nimport { type FC, type ReactNode, useState } from \"react\";\nimport { UserIcon as User01 } from \"@phosphor-icons/react/dist/csr/User\";\nimport { cx } from \"@/utils/cx\";\nimport { AvatarOnlineIndicator, VerifiedTick } from \"./base-components\";\nimport { AvatarCount } from \"./base-components/avatar-count\";\n\nexport interface AvatarProps {\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n    className?: string;\n    /**\n     * The class name for the main child of the avatar.\n     */\n    contentClassName?: string;\n    src?: string | null;\n    alt?: string;\n    /**\n     * Display an inner contrast border around the avatar image.\n     */\n    contrastBorder?: boolean;\n    /**\n     * Whether the avatar should be rounded.\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Display an outer border around the avatar.\n     */\n    border?: boolean;\n    /**\n     * Display a badge (i.e. company logo).\n     */\n    badge?: ReactNode;\n    /**\n     * Display a status indicator.\n     */\n    status?: \"online\" | \"offline\";\n    /**\n     * Display a verified tick icon.\n     *\n     * @default false\n     */\n    verified?: boolean;\n    /**\n     * Display a count badge.\n     */\n    count?: number;\n    /**\n     * The initials of the user to display if no image is available.\n     */\n    initials?: string;\n    /**\n     * An icon to display if no image is available.\n     */\n    placeholderIcon?: FC<{ className?: string }>;\n    /**\n     * A placeholder to display if no image is available.\n     */\n    placeholder?: ReactNode;\n\n    /**\n     * Whether the avatar should show a focus ring when the parent group is in focus.\n     * For example, when the avatar is wrapped inside a link.\n     *\n     * @default false\n     */\n    focusable?: boolean;\n}\n\nconst styles = {\n    xs: { root: \"size-6\", rootWithBorder: \"p-px\", initials: \"text-xs font-semibold\", icon: \"size-4\" },\n    sm: { root: \"size-8\", rootWithBorder: \"p-px\", initials: \"text-sm font-semibold\", icon: \"size-5\" },\n    md: { root: \"size-10\", rootWithBorder: \"p-px\", initials: \"text-md font-semibold\", icon: \"size-6\" },\n    lg: { root: \"size-12\", rootWithBorder: \"p-[1.5px]\", initials: \"text-lg font-semibold\", icon: \"size-7\" },\n    xl: { root: \"size-14\", rootWithBorder: \"p-0.5\", initials: \"text-xl font-semibold\", icon: \"size-8\" },\n    \"2xl\": { root: \"size-16\", rootWithBorder: \"p-0.5\", initials: \"text-display-xs font-semibold\", icon: \"size-8\" },\n};\n\nexport const Avatar = ({\n    size = \"md\",\n    src,\n    alt,\n    initials,\n    placeholder,\n    placeholderIcon: PlaceholderIcon,\n    border,\n    badge,\n    status,\n    verified,\n    count,\n    focusable = false,\n    rounded = true,\n    className,\n    contentClassName,\n}: AvatarProps) => {\n    const [isFailed, setIsFailed] = useState(false);\n\n    const canShowImage = src && !isFailed;\n\n    const renderMainContent = () => {\n        if (canShowImage) {\n            return <img data-avatar-img className=\"size-full object-cover\" src={src} alt={alt} onError={() => setIsFailed(true)} />;\n        }\n\n        if (initials) {\n            return <span className={cx(\"text-quaternary\", styles[size].initials)}>{initials}</span>;\n        }\n\n        if (PlaceholderIcon) {\n            return <PlaceholderIcon className={cx(\"text-fg-quaternary\", styles[size].icon)} />;\n        }\n\n        return placeholder || <User01 className={cx(\"text-fg-quaternary\", styles[size].icon)} />;\n    };\n\n    const renderBadgeContent = () => {\n        if (status) {\n            return <AvatarOnlineIndicator status={status} size={size} />;\n        }\n\n        if (verified) {\n            return <VerifiedTick size={size} className={cx(\"absolute right-0 bottom-0\", size === \"xs\" && \"-right-px -bottom-px\")} />;\n        }\n\n        if (count) {\n            return <AvatarCount count={count} />;\n        }\n\n        return badge;\n    };\n\n    return (\n        <div\n            data-avatar\n            className={cx(\n                \"relative inline-flex shrink-0 rounded-[7px]\",\n                rounded && \"rounded-full\",\n                // Focus styles\n                focusable &&\n                    \"outline-none group-focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\",\n                border && \"ring-1 ring-secondary_alt\",\n                border && styles[size].rootWithBorder,\n                styles[size].root,\n                className,\n            )}\n        >\n            <div\n                className={cx(\n                    \"relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:inset-[0.5px]\",\n                    rounded && \"rounded-full\",\n                    canShowImage &&\n                        size !== \"xs\" &&\n                        \"before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]\",\n                    contentClassName,\n                )}\n            >\n                {renderMainContent()}\n            </div>\n            {renderBadgeContent()}\n        </div>\n    );\n};\n"]}

package/dist/react/badge-groups.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode, FC } from 'react';
+
+type Size = "md" | "lg";
+type Color = "brand" | "warning" | "error" | "gray" | "success";
+type Theme = "light" | "modern";
+type Align = "leading" | "trailing";
+interface BadgeGroupProps {
+    children?: string | ReactNode;
+    addonText: string;
+    size?: Size;
+    color: Color;
+    theme?: Theme;
+    /**
+     * Alignment of the badge addon element.
+     */
+    align?: Align;
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    className?: string;
+}
+declare const BadgeGroup: ({ children, addonText, size, color, theme, align, className, iconTrailing: IconTrailing, }: BadgeGroupProps) => react.JSX.Element;
+
+export { BadgeGroup };

package/dist/react/badge-groups.js

@@ -0,0 +1,162 @@
+import { isValidElement } from 'react';
+import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var baseClasses = {
+  light: {
+    root: "rounded-full ring-1 ring-inset",
+    addon: "rounded-full ring-1 ring-inset"
+  },
+  modern: {
+    root: "rounded-[10px] bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary",
+    addon: "flex items-center rounded-md bg-primary shadow-xs ring-1 ring-inset ring-primary",
+    icon: "text-utility-neutral-500"
+  }
+};
+var getSizeClasses = (theme, text, icon) => ({
+  leading: {
+    md: {
+      root: cx("py-1 pr-2 pl-1 text-xs font-semibold", !text && !icon && "pr-1"),
+      addon: cx("px-2 py-0.5", theme === "modern" && "gap-1 px-1.5", text && "mr-2"),
+      icon: "ml-1 size-4"
+    },
+    lg: {
+      root: cx("py-1 pr-2 pl-1 text-sm font-semibold", !text && !icon && "pr-1"),
+      addon: cx("px-2.5 py-0.5", theme === "modern" && "gap-1.5 px-2", text && "mr-2"),
+      icon: "ml-1 size-4"
+    }
+  },
+  trailing: {
+    md: {
+      root: cx("py-1 pr-1 pl-3 text-xs font-semibold", theme === "modern" && "pl-2.5"),
+      addon: cx("py-0.5 pr-1.5 pl-2", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+      icon: "ml-0.5 size-3",
+      dot: "mr-1.5"
+    },
+    lg: {
+      root: "py-1 pr-1 pl-3 text-sm font-semibold",
+      addon: cx("py-0.5 pr-2 pl-2.5", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+      icon: "ml-1 size-3",
+      dot: "mr-2"
+    }
+  }
+});
+var colorClasses = sortCx({
+  light: {
+    brand: {
+      root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200 hover:bg-utility-brand-100",
+      addon: "bg-primary text-current ring-utility-brand-200",
+      icon: "text-utility-brand-500"
+    },
+    gray: {
+      root: "bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200 hover:bg-utility-neutral-100",
+      addon: "bg-primary text-current ring-utility-neutral-200",
+      icon: "text-utility-neutral-500"
+    },
+    error: {
+      root: "bg-utility-red-50 text-utility-red-700 ring-utility-red-200 hover:bg-utility-red-100",
+      addon: "bg-primary text-current ring-utility-red-200",
+      icon: "text-utility-red-500"
+    },
+    warning: {
+      root: "bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200 hover:bg-utility-yellow-100",
+      addon: "bg-primary text-current ring-utility-yellow-200",
+      icon: "text-utility-yellow-500"
+    },
+    success: {
+      root: "bg-utility-green-50 text-utility-green-700 ring-utility-green-200 hover:bg-utility-green-100",
+      addon: "bg-primary text-current ring-utility-green-200",
+      icon: "text-utility-green-500"
+    }
+  },
+  modern: {
+    brand: {
+      dot: "bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100"
+    },
+    gray: {
+      dot: "bg-utility-neutral-500 outline-3 -outline-offset-1 outline-utility-neutral-100"
+    },
+    error: {
+      dot: "bg-utility-red-500 outline-3 -outline-offset-1 outline-utility-red-100"
+    },
+    warning: {
+      dot: "bg-utility-yellow-500 outline-3 -outline-offset-1 outline-utility-yellow-100"
+    },
+    success: {
+      dot: "bg-utility-green-500 outline-3 -outline-offset-1 outline-utility-green-100"
+    }
+  }
+});
+var BadgeGroup = ({
+  children,
+  addonText,
+  size = "md",
+  color = "brand",
+  theme = "light",
+  align = "leading",
+  className,
+  iconTrailing: IconTrailing = ArrowRightIcon
+}) => {
+  const colors = colorClasses[theme][color];
+  const sizes = getSizeClasses(theme, !!children, !!IconTrailing)[align][size];
+  const rootClasses = cx(
+    "inline-flex w-max cursor-pointer items-center transition duration-100 ease-linear",
+    baseClasses[theme].root,
+    sizes.root,
+    colors.root,
+    className
+  );
+  const addonClasses = cx("inline-flex items-center", baseClasses[theme].addon, sizes.addon, colors.addon);
+  const dotClasses = cx("inline-block size-2 shrink-0 rounded-full", sizes.dot, colors.dot);
+  const iconClasses = cx(baseClasses[theme].icon, sizes.icon, colors.icon);
+  if (align === "trailing") {
+    return /* @__PURE__ */ jsxs("div", { className: rootClasses, children: [
+      theme === "modern" && /* @__PURE__ */ jsx("span", { className: dotClasses }),
+      children,
+      /* @__PURE__ */ jsxs("span", { className: addonClasses, children: [
+        addonText,
+        isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { weight: "bold", className: iconClasses }),
+        isValidElement(IconTrailing) && IconTrailing
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: rootClasses, children: [
+    /* @__PURE__ */ jsxs("span", { className: addonClasses, children: [
+      theme === "modern" && /* @__PURE__ */ jsx("span", { className: dotClasses }),
+      addonText
+    ] }),
+    children,
+    isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { weight: "bold", className: iconClasses }),
+    isValidElement(IconTrailing) && IconTrailing
+  ] });
+};
+
+export { BadgeGroup };
+//# sourceMappingURL=badge-groups.js.map
+//# sourceMappingURL=badge-groups.js.map

package/dist/react/badge-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../utils/is-react-component.ts","../../../../components/base/badges/badge-groups.tsx"],"names":["ArrowRight"],"mappings":"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","file":"badge-groups.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\n/** Figma: Badge groups (1046:3819) */\n\nimport type { FC, ReactNode } from \"react\";\nimport { isValidElement } from \"react\";\nimport { ArrowRightIcon as ArrowRight } from \"@phosphor-icons/react/dist/csr/ArrowRight\";\nimport { cx, sortCx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\ntype Size = \"md\" | \"lg\";\ntype Color = \"brand\" | \"warning\" | \"error\" | \"gray\" | \"success\";\ntype Theme = \"light\" | \"modern\";\ntype Align = \"leading\" | \"trailing\";\n\nconst baseClasses: Record<Theme, { root?: string; addon?: string; icon?: string }> = {\n    light: {\n        root: \"rounded-full ring-1 ring-inset\",\n        addon: \"rounded-full ring-1 ring-inset\",\n    },\n    modern: {\n        root: \"rounded-[10px] bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary\",\n        addon: \"flex items-center rounded-md bg-primary shadow-xs ring-1 ring-inset ring-primary\",\n        icon: \"text-utility-neutral-500\",\n    },\n};\n\nconst getSizeClasses = (\n    theme?: Theme,\n    text?: boolean,\n    icon?: boolean,\n): Record<Align, Record<Size, { root?: string; addon?: string; icon?: string; dot?: string }>> => ({\n    leading: {\n        md: {\n            root: cx(\"py-1 pr-2 pl-1 text-xs font-semibold\", !text && !icon && \"pr-1\"),\n            addon: cx(\"px-2 py-0.5\", theme === \"modern\" && \"gap-1 px-1.5\", text && \"mr-2\"),\n            icon: \"ml-1 size-4\",\n        },\n        lg: {\n            root: cx(\"py-1 pr-2 pl-1 text-sm font-semibold\", !text && !icon && \"pr-1\"),\n            addon: cx(\"px-2.5 py-0.5\", theme === \"modern\" && \"gap-1.5 px-2\", text && \"mr-2\"),\n            icon: \"ml-1 size-4\",\n        },\n    },\n    trailing: {\n        md: {\n            root: cx(\"py-1 pr-1 pl-3 text-xs font-semibold\", theme === \"modern\" && \"pl-2.5\"),\n            addon: cx(\"py-0.5 pr-1.5 pl-2\", theme === \"modern\" && \"pr-1.5 pl-2\", text && \"ml-2\"),\n            icon: \"ml-0.5 size-3\",\n            dot: \"mr-1.5\",\n        },\n        lg: {\n            root: \"py-1 pr-1 pl-3 text-sm font-semibold\",\n            addon: cx(\"py-0.5 pr-2 pl-2.5\", theme === \"modern\" && \"pr-1.5 pl-2\", text && \"ml-2\"),\n            icon: \"ml-1 size-3\",\n            dot: \"mr-2\",\n        },\n    },\n});\n\nconst colorClasses: Record<Theme, Record<Color, { root?: string; addon?: string; icon?: string; dot?: string }>> = sortCx({\n    light: {\n        brand: {\n            root: \"bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200 hover:bg-utility-brand-100\",\n            addon: \"bg-primary text-current ring-utility-brand-200\",\n            icon: \"text-utility-brand-500\",\n        },\n        gray: {\n            root: \"bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200 hover:bg-utility-neutral-100\",\n            addon: \"bg-primary text-current ring-utility-neutral-200\",\n            icon: \"text-utility-neutral-500\",\n        },\n        error: {\n            root: \"bg-utility-red-50 text-utility-red-700 ring-utility-red-200 hover:bg-utility-red-100\",\n            addon: \"bg-primary text-current ring-utility-red-200\",\n            icon: \"text-utility-red-500\",\n        },\n        warning: {\n            root: \"bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200 hover:bg-utility-yellow-100\",\n            addon: \"bg-primary text-current ring-utility-yellow-200\",\n            icon: \"text-utility-yellow-500\",\n        },\n        success: {\n            root: \"bg-utility-green-50 text-utility-green-700 ring-utility-green-200 hover:bg-utility-green-100\",\n            addon: \"bg-primary text-current ring-utility-green-200\",\n            icon: \"text-utility-green-500\",\n        },\n    },\n    modern: {\n        brand: {\n            dot: \"bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100\",\n        },\n        gray: {\n            dot: \"bg-utility-neutral-500 outline-3 -outline-offset-1 outline-utility-neutral-100\",\n        },\n        error: {\n            dot: \"bg-utility-red-500 outline-3 -outline-offset-1 outline-utility-red-100\",\n        },\n        warning: {\n            dot: \"bg-utility-yellow-500 outline-3 -outline-offset-1 outline-utility-yellow-100\",\n        },\n        success: {\n            dot: \"bg-utility-green-500 outline-3 -outline-offset-1 outline-utility-green-100\",\n        },\n    },\n});\n\ninterface BadgeGroupProps {\n    children?: string | ReactNode;\n    addonText: string;\n    size?: Size;\n    color: Color;\n    theme?: Theme;\n    /**\n     * Alignment of the badge addon element.\n     */\n    align?: Align;\n    iconTrailing?: FC<{ className?: string }> | ReactNode;\n    className?: string;\n}\n\nexport const BadgeGroup = ({\n    children,\n    addonText,\n    size = \"md\",\n    color = \"brand\",\n    theme = \"light\",\n    align = \"leading\",\n    className,\n    iconTrailing: IconTrailing = ArrowRight,\n}: BadgeGroupProps) => {\n    const colors = colorClasses[theme][color];\n    const sizes = getSizeClasses(theme, !!children, !!IconTrailing)[align][size];\n\n    const rootClasses = cx(\n        \"inline-flex w-max cursor-pointer items-center transition duration-100 ease-linear\",\n        baseClasses[theme].root,\n        sizes.root,\n        colors.root,\n        className,\n    );\n    const addonClasses = cx(\"inline-flex items-center\", baseClasses[theme].addon, sizes.addon, colors.addon);\n    const dotClasses = cx(\"inline-block size-2 shrink-0 rounded-full\", sizes.dot, colors.dot);\n    const iconClasses = cx(baseClasses[theme].icon, sizes.icon, colors.icon);\n\n    if (align === \"trailing\") {\n        return (\n            <div className={rootClasses}>\n                {theme === \"modern\" && <span className={dotClasses} />}\n\n                {children}\n\n                <span className={addonClasses}>\n                    {addonText}\n\n                    {/* Trailing icon */}\n                    {isReactComponent(IconTrailing) && <IconTrailing weight=\"bold\" className={iconClasses} />}\n                    {isValidElement(IconTrailing) && IconTrailing}\n                </span>\n            </div>\n        );\n    }\n\n    return (\n        <div className={rootClasses}>\n            <span className={addonClasses}>\n                {theme === \"modern\" && <span className={dotClasses} />}\n                {addonText}\n            </span>\n\n            {children}\n\n            {/* Trailing icon */}\n            {isReactComponent(IconTrailing) && <IconTrailing weight=\"bold\" className={iconClasses} />}\n            {isValidElement(IconTrailing) && IconTrailing}\n        </div>\n    );\n};\n"]}