@mastra/playground-ui 63.1.0-alpha.5 → 64.0.0-alpha.6

package/dist/Avatar-98bsFrSV.js

@@ -0,0 +1,182 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useState, Children } from 'react';
+import { A as AvatarSizeContext, a as avatarSizeClasses, b as avatarIconClasses, c as avatarTextClasses } from './avatar-size-CNR0U-LW.js';
+import { c as cn } from './cn-CQUhN5Jx.js';
+import { T as Txt } from './Txt-BtIGLRk1.js';
+import { controlStateColorTransition } from './primitives/transitions.es.js';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+
+const toneClasses = {
+  neutral: "bg-fill-inverse text-background",
+  success: "bg-success-indicator text-background",
+  warning: "bg-warning-indicator text-background",
+  destructive: "bg-destructive-indicator text-background",
+  info: "bg-info-indicator text-background"
+};
+const badgeSizeClasses = {
+  xs: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
+  sm: "min-h-2 min-w-2 [&>svg]:hidden",
+  md: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs",
+  lg: "min-h-3 min-w-3 [&>svg]:size-icon-xs",
+  control: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs"
+};
+function AvatarBadge({ tone, className, children, ...props }) {
+  const size = useContext(AvatarSizeContext) ?? "sm";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      "data-slot": "avatar-badge",
+      className: cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 ring-card select-none",
+        "[&>[data-slot=avatar]]:border-0 [&>[data-slot=avatar]]:after:hidden",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-inset",
+        tone ? toneClasses[tone] : "bg-card text-foreground",
+        badgeSizeClasses[size],
+        className
+      ),
+      children: /* @__PURE__ */ jsx(AvatarSizeContext.Provider, { value: "xs", children })
+    }
+  );
+}
+
+function AvatarNamed({ src, name, size, interactive = false, color, textColor }) {
+  const contextSize = useContext(AvatarSizeContext);
+  const [failedSrc, setFailedSrc] = useState();
+  const resolvedSize = size ?? contextSize ?? "sm";
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && failedSrc !== src;
+  const showFallbackTint = !showImage && Boolean(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "avatar",
+      "data-size": resolvedSize,
+      className: cn(
+        avatarSizeClasses[resolvedSize],
+        "flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border",
+        !showFallbackTint && "bg-fill",
+        controlStateColorTransition,
+        interactive && "cursor-pointer hover:border-border-hover"
+      ),
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsx("img", { src, alt: name, className: "size-full object-cover", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx(
+        Txt,
+        {
+          variant: resolvedSize === "xs" ? "meta" : "body",
+          tone: showFallbackTint ? void 0 : "muted",
+          className: "text-center",
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+}
+
+function AvatarRoot({ size, className, ...props }) {
+  const contextSize = useContext(AvatarSizeContext);
+  const resolvedSize = size ?? contextSize ?? "sm";
+  return /* @__PURE__ */ jsx(AvatarSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      ...props,
+      "data-slot": "avatar",
+      "data-size": resolvedSize,
+      className: cn(
+        "relative inline-flex shrink-0 rounded-full select-none",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border",
+        avatarSizeClasses[resolvedSize],
+        className
+      )
+    }
+  ) });
+}
+
+function AvatarElement(props) {
+  if (props.name === void 0) return /* @__PURE__ */ jsx(AvatarRoot, { ...props });
+  return /* @__PURE__ */ jsx(AvatarNamed, { ...props });
+}
+
+function AvatarFallback({ className, ...props }) {
+  const size = useContext(AvatarSizeContext) ?? "sm";
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      ...props,
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground",
+        avatarTextClasses[size],
+        avatarIconClasses[size],
+        className
+      )
+    }
+  );
+}
+
+const groupSizeClasses = {
+  xs: "[--avatar-group-size:var(--spacing-icon-xs)]",
+  sm: "[--avatar-group-size:var(--spacing-avatar-sm)]",
+  md: "[--avatar-group-size:var(--spacing-avatar-md)]",
+  lg: "[--avatar-group-size:var(--spacing-avatar-lg)]",
+  control: "[--avatar-group-size:var(--spacing-control-md)]"
+};
+const overlapClasses = [
+  "*:not-first:ml-[calc(var(--avatar-group-size)/-4)]",
+  "*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+--spacing(0.5)),black_calc(var(--avatar-group-size)/2+--spacing(0.75)))]"
+];
+function AvatarGroup({ size = "sm", className, children, ...props }) {
+  const items = Children.toArray(children);
+  return /* @__PURE__ */ jsx(AvatarSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "avatar-group",
+      className: cn("flex items-center", groupSizeClasses[size], overlapClasses, className),
+      children: items.map((item, index) => /* @__PURE__ */ jsx("div", { "data-slot": "avatar-group-item", className: "flex", style: { zIndex: items.length - index }, children: item }, index))
+    }
+  ) });
+}
+
+function AvatarGroupCount({ className, ...props }) {
+  const size = useContext(AvatarSizeContext) ?? "sm";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "avatar-group-count",
+      "data-size": size,
+      className: cn(
+        "relative flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground tabular-nums",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border",
+        avatarSizeClasses[size],
+        avatarTextClasses[size],
+        avatarIconClasses[size],
+        className
+      )
+    }
+  );
+}
+
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Image,
+    {
+      ...props,
+      "data-slot": "avatar-image",
+      className: cn("size-full rounded-full object-cover", className)
+    }
+  );
+}
+
+const Avatar = Object.assign(AvatarElement, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+  Badge: AvatarBadge,
+  Group: AvatarGroup,
+  GroupCount: AvatarGroupCount
+});
+
+export { Avatar as A };
+//# sourceMappingURL=Avatar-98bsFrSV.js.map

package/dist/Avatar-98bsFrSV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-98bsFrSV.js","sources":["../src/ds/components/Avatar/avatar-badge.tsx","../src/ds/components/Avatar/avatar-named.tsx","../src/ds/components/Avatar/avatar-root.tsx","../src/ds/components/Avatar/avatar-element.tsx","../src/ds/components/Avatar/avatar-fallback.tsx","../src/ds/components/Avatar/avatar-group.tsx","../src/ds/components/Avatar/avatar-group-count.tsx","../src/ds/components/Avatar/avatar-image.tsx","../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useContext, type ComponentProps } from 'react';\n\nimport { AvatarSizeContext, type AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarBadgeTone = 'neutral' | 'success' | 'warning' | 'destructive' | 'info';\n\nexport type AvatarBadgeProps = ComponentProps<'span'> & {\n  tone?: AvatarBadgeTone;\n};\n\nconst toneClasses: Record<AvatarBadgeTone, string> = {\n  neutral: 'bg-fill-inverse text-background',\n  success: 'bg-success-indicator text-background',\n  warning: 'bg-warning-indicator text-background',\n  destructive: 'bg-destructive-indicator text-background',\n  info: 'bg-info-indicator text-background',\n};\n\nconst badgeSizeClasses: Record<AvatarSize, string> = {\n  xs: 'min-h-1.5 min-w-1.5 [&>svg]:hidden',\n  sm: 'min-h-2 min-w-2 [&>svg]:hidden',\n  md: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n  lg: 'min-h-3 min-w-3 [&>svg]:size-icon-xs',\n  control: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n};\n\nexport function AvatarBadge({ tone, className, children, ...props }: AvatarBadgeProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 ring-card select-none',\n        '[&>[data-slot=avatar]]:border-0 [&>[data-slot=avatar]]:after:hidden',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-inset',\n        tone ? toneClasses[tone] : 'bg-card text-foreground',\n        badgeSizeClasses[size],\n        className,\n      )}\n    >\n      <AvatarSizeContext.Provider value=\"xs\">{children}</AvatarSizeContext.Provider>\n    </span>\n  );\n}\n","import { useContext, useState } from 'react';\n\nimport { Txt } from '../Txt/Txt';\nimport { AvatarSizeContext, avatarSizeClasses, type AvatarSize } from './avatar-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nexport function AvatarNamed({ src, name, size, interactive = false, color, textColor }: AvatarProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const [failedSrc, setFailedSrc] = useState<string>();\n  const resolvedSize = size ?? contextSize ?? 'sm';\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && failedSrc !== src;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      data-slot=\"avatar\"\n      data-size={resolvedSize}\n      className={cn(\n        avatarSizeClasses[resolvedSize],\n        'flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border',\n        !showFallbackTint && 'bg-fill',\n        controlStateColorTransition,\n        interactive && 'cursor-pointer hover:border-border-hover',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"size-full object-cover\" onError={() => setFailedSrc(src)} />\n      ) : (\n        <Txt\n          variant={resolvedSize === 'xs' ? 'meta' : 'body'}\n          tone={showFallbackTint ? undefined : 'muted'}\n          className=\"text-center\"\n          style={showFallbackTint && textColor ? { color: textColor } : undefined}\n        >\n          {initial}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarSizeClasses, type AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarRootProps = Omit<BaseAvatar.Root.Props, 'className'> & {\n  size?: AvatarSize;\n  className?: string;\n  name?: never;\n};\n\nexport function AvatarRoot({ size, className, ...props }: AvatarRootProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const resolvedSize = size ?? contextSize ?? 'sm';\n\n  return (\n    <AvatarSizeContext.Provider value={resolvedSize}>\n      <BaseAvatar.Root\n        {...props}\n        data-slot=\"avatar\"\n        data-size={resolvedSize}\n        className={cn(\n          'relative inline-flex shrink-0 rounded-full select-none',\n          'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n          avatarSizeClasses[resolvedSize],\n          className,\n        )}\n      />\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { AvatarNamed, type AvatarProps } from './avatar-named';\nimport { AvatarRoot, type AvatarRootProps } from './avatar-root';\n\nexport function AvatarElement(props: AvatarProps | AvatarRootProps) {\n  if (props.name === undefined) return <AvatarRoot {...props} />;\n  return <AvatarNamed {...props} />;\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarFallbackProps = Omit<BaseAvatar.Fallback.Props, 'className'> & {\n  className?: string;\n};\n\nexport function AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <BaseAvatar.Fallback\n      {...props}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground',\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Children, type ComponentProps } from 'react';\n\nimport { AvatarSizeContext, type AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupProps = ComponentProps<'div'> & {\n  size?: AvatarSize;\n};\n\nconst groupSizeClasses: Record<AvatarSize, string> = {\n  xs: '[--avatar-group-size:var(--spacing-icon-xs)]',\n  sm: '[--avatar-group-size:var(--spacing-avatar-sm)]',\n  md: '[--avatar-group-size:var(--spacing-avatar-md)]',\n  lg: '[--avatar-group-size:var(--spacing-avatar-lg)]',\n  control: '[--avatar-group-size:var(--spacing-control-md)]',\n};\n\nconst overlapClasses = [\n  '*:not-first:ml-[calc(var(--avatar-group-size)/-4)]',\n  '*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+--spacing(0.5)),black_calc(var(--avatar-group-size)/2+--spacing(0.75)))]',\n];\n\nexport function AvatarGroup({ size = 'sm', className, children, ...props }: AvatarGroupProps) {\n  const items = Children.toArray(children);\n\n  return (\n    <AvatarSizeContext.Provider value={size}>\n      <div\n        {...props}\n        data-slot=\"avatar-group\"\n        className={cn('flex items-center', groupSizeClasses[size], overlapClasses, className)}\n      >\n        {items.map((item, index) => (\n          <div key={index} data-slot=\"avatar-group-item\" className=\"flex\" style={{ zIndex: items.length - index }}>\n            {item}\n          </div>\n        ))}\n      </div>\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { useContext, type ComponentProps } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarSizeClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupCountProps = ComponentProps<'div'>;\n\nexport function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"avatar-group-count\"\n      data-size={size}\n      className={cn(\n        'relative flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground tabular-nums',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n        avatarSizeClasses[size],\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\n\nimport { cn } from '@/lib/utils';\n\nexport type AvatarImageProps = Omit<BaseAvatar.Image.Props, 'className' | 'alt'> & {\n  alt: string;\n  className?: string;\n};\n\nexport function AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <BaseAvatar.Image\n      {...props}\n      data-slot=\"avatar-image\"\n      className={cn('size-full rounded-full object-cover', className)}\n    />\n  );\n}\n","import { AvatarBadge } from './avatar-badge';\nimport { AvatarElement } from './avatar-element';\nimport { AvatarFallback } from './avatar-fallback';\nimport { AvatarGroup } from './avatar-group';\nimport { AvatarGroupCount } from './avatar-group-count';\nimport { AvatarImage } from './avatar-image';\n\nexport type { AvatarSize } from './avatar-size';\nexport type { AvatarProps } from './avatar-named';\nexport type { AvatarRootProps } from './avatar-root';\nexport type { AvatarImageProps } from './avatar-image';\nexport type { AvatarFallbackProps } from './avatar-fallback';\nexport type { AvatarBadgeProps, AvatarBadgeTone } from './avatar-badge';\nexport type { AvatarGroupProps } from './avatar-group';\nexport type { AvatarGroupCountProps } from './avatar-group-count';\n\nexport const Avatar = Object.assign(AvatarElement, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n  Badge: AvatarBadge,\n  Group: AvatarGroup,\n  GroupCount: AvatarGroupCount,\n});\n"],"names":["BaseAvatar"],"mappings":"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"}

package/dist/Avatar-BCj8SvOb.cjs

@@ -0,0 +1,184 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const avatarSize = require('./avatar-size-DxStOo5A.cjs');
+const utils_cn = require('./cn-DlOJCxrS.cjs');
+const Txt = require('./Txt-CIS2G5Jx.cjs');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const avatar = require('@base-ui/react/avatar');
+
+const toneClasses = {
+  neutral: "bg-fill-inverse text-background",
+  success: "bg-success-indicator text-background",
+  warning: "bg-warning-indicator text-background",
+  destructive: "bg-destructive-indicator text-background",
+  info: "bg-info-indicator text-background"
+};
+const badgeSizeClasses = {
+  xs: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
+  sm: "min-h-2 min-w-2 [&>svg]:hidden",
+  md: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs",
+  lg: "min-h-3 min-w-3 [&>svg]:size-icon-xs",
+  control: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs"
+};
+function AvatarBadge({ tone, className, children, ...props }) {
+  const size = React.useContext(avatarSize.AvatarSizeContext) ?? "sm";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      "data-slot": "avatar-badge",
+      className: utils_cn.cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 ring-card select-none",
+        "[&>[data-slot=avatar]]:border-0 [&>[data-slot=avatar]]:after:hidden",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-inset",
+        tone ? toneClasses[tone] : "bg-card text-foreground",
+        badgeSizeClasses[size],
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(avatarSize.AvatarSizeContext.Provider, { value: "xs", children })
+    }
+  );
+}
+
+function AvatarNamed({ src, name, size, interactive = false, color, textColor }) {
+  const contextSize = React.useContext(avatarSize.AvatarSizeContext);
+  const [failedSrc, setFailedSrc] = React.useState();
+  const resolvedSize = size ?? contextSize ?? "sm";
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && failedSrc !== src;
+  const showFallbackTint = !showImage && Boolean(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "avatar",
+      "data-size": resolvedSize,
+      className: utils_cn.cn(
+        avatarSize.avatarSizeClasses[resolvedSize],
+        "flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border",
+        !showFallbackTint && "bg-fill",
+        primitives_transitions.controlStateColorTransition,
+        interactive && "cursor-pointer hover:border-border-hover"
+      ),
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "size-full object-cover", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        Txt.Txt,
+        {
+          variant: resolvedSize === "xs" ? "meta" : "body",
+          tone: showFallbackTint ? void 0 : "muted",
+          className: "text-center",
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+}
+
+function AvatarRoot({ size, className, ...props }) {
+  const contextSize = React.useContext(avatarSize.AvatarSizeContext);
+  const resolvedSize = size ?? contextSize ?? "sm";
+  return /* @__PURE__ */ jsxRuntime.jsx(avatarSize.AvatarSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsxRuntime.jsx(
+    avatar.Avatar.Root,
+    {
+      ...props,
+      "data-slot": "avatar",
+      "data-size": resolvedSize,
+      className: utils_cn.cn(
+        "relative inline-flex shrink-0 rounded-full select-none",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border",
+        avatarSize.avatarSizeClasses[resolvedSize],
+        className
+      )
+    }
+  ) });
+}
+
+function AvatarElement(props) {
+  if (props.name === void 0) return /* @__PURE__ */ jsxRuntime.jsx(AvatarRoot, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(AvatarNamed, { ...props });
+}
+
+function AvatarFallback({ className, ...props }) {
+  const size = React.useContext(avatarSize.AvatarSizeContext) ?? "sm";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    avatar.Avatar.Fallback,
+    {
+      ...props,
+      "data-slot": "avatar-fallback",
+      className: utils_cn.cn(
+        "flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground",
+        avatarSize.avatarTextClasses[size],
+        avatarSize.avatarIconClasses[size],
+        className
+      )
+    }
+  );
+}
+
+const groupSizeClasses = {
+  xs: "[--avatar-group-size:var(--spacing-icon-xs)]",
+  sm: "[--avatar-group-size:var(--spacing-avatar-sm)]",
+  md: "[--avatar-group-size:var(--spacing-avatar-md)]",
+  lg: "[--avatar-group-size:var(--spacing-avatar-lg)]",
+  control: "[--avatar-group-size:var(--spacing-control-md)]"
+};
+const overlapClasses = [
+  "*:not-first:ml-[calc(var(--avatar-group-size)/-4)]",
+  "*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+--spacing(0.5)),black_calc(var(--avatar-group-size)/2+--spacing(0.75)))]"
+];
+function AvatarGroup({ size = "sm", className, children, ...props }) {
+  const items = React.Children.toArray(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(avatarSize.AvatarSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "avatar-group",
+      className: utils_cn.cn("flex items-center", groupSizeClasses[size], overlapClasses, className),
+      children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "avatar-group-item", className: "flex", style: { zIndex: items.length - index }, children: item }, index))
+    }
+  ) });
+}
+
+function AvatarGroupCount({ className, ...props }) {
+  const size = React.useContext(avatarSize.AvatarSizeContext) ?? "sm";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "avatar-group-count",
+      "data-size": size,
+      className: utils_cn.cn(
+        "relative flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground tabular-nums",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border",
+        avatarSize.avatarSizeClasses[size],
+        avatarSize.avatarTextClasses[size],
+        avatarSize.avatarIconClasses[size],
+        className
+      )
+    }
+  );
+}
+
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    avatar.Avatar.Image,
+    {
+      ...props,
+      "data-slot": "avatar-image",
+      className: utils_cn.cn("size-full rounded-full object-cover", className)
+    }
+  );
+}
+
+const Avatar = Object.assign(AvatarElement, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+  Badge: AvatarBadge,
+  Group: AvatarGroup,
+  GroupCount: AvatarGroupCount
+});
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar-BCj8SvOb.cjs.map

package/dist/Avatar-BCj8SvOb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-BCj8SvOb.cjs","sources":["../src/ds/components/Avatar/avatar-badge.tsx","../src/ds/components/Avatar/avatar-named.tsx","../src/ds/components/Avatar/avatar-root.tsx","../src/ds/components/Avatar/avatar-element.tsx","../src/ds/components/Avatar/avatar-fallback.tsx","../src/ds/components/Avatar/avatar-group.tsx","../src/ds/components/Avatar/avatar-group-count.tsx","../src/ds/components/Avatar/avatar-image.tsx","../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useContext, type ComponentProps } from 'react';\n\nimport { AvatarSizeContext, type AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarBadgeTone = 'neutral' | 'success' | 'warning' | 'destructive' | 'info';\n\nexport type AvatarBadgeProps = ComponentProps<'span'> & {\n  tone?: AvatarBadgeTone;\n};\n\nconst toneClasses: Record<AvatarBadgeTone, string> = {\n  neutral: 'bg-fill-inverse text-background',\n  success: 'bg-success-indicator text-background',\n  warning: 'bg-warning-indicator text-background',\n  destructive: 'bg-destructive-indicator text-background',\n  info: 'bg-info-indicator text-background',\n};\n\nconst badgeSizeClasses: Record<AvatarSize, string> = {\n  xs: 'min-h-1.5 min-w-1.5 [&>svg]:hidden',\n  sm: 'min-h-2 min-w-2 [&>svg]:hidden',\n  md: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n  lg: 'min-h-3 min-w-3 [&>svg]:size-icon-xs',\n  control: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n};\n\nexport function AvatarBadge({ tone, className, children, ...props }: AvatarBadgeProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 ring-card select-none',\n        '[&>[data-slot=avatar]]:border-0 [&>[data-slot=avatar]]:after:hidden',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-inset',\n        tone ? toneClasses[tone] : 'bg-card text-foreground',\n        badgeSizeClasses[size],\n        className,\n      )}\n    >\n      <AvatarSizeContext.Provider value=\"xs\">{children}</AvatarSizeContext.Provider>\n    </span>\n  );\n}\n","import { useContext, useState } from 'react';\n\nimport { Txt } from '../Txt/Txt';\nimport { AvatarSizeContext, avatarSizeClasses, type AvatarSize } from './avatar-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nexport function AvatarNamed({ src, name, size, interactive = false, color, textColor }: AvatarProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const [failedSrc, setFailedSrc] = useState<string>();\n  const resolvedSize = size ?? contextSize ?? 'sm';\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && failedSrc !== src;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      data-slot=\"avatar\"\n      data-size={resolvedSize}\n      className={cn(\n        avatarSizeClasses[resolvedSize],\n        'flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border',\n        !showFallbackTint && 'bg-fill',\n        controlStateColorTransition,\n        interactive && 'cursor-pointer hover:border-border-hover',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"size-full object-cover\" onError={() => setFailedSrc(src)} />\n      ) : (\n        <Txt\n          variant={resolvedSize === 'xs' ? 'meta' : 'body'}\n          tone={showFallbackTint ? undefined : 'muted'}\n          className=\"text-center\"\n          style={showFallbackTint && textColor ? { color: textColor } : undefined}\n        >\n          {initial}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarSizeClasses, type AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarRootProps = Omit<BaseAvatar.Root.Props, 'className'> & {\n  size?: AvatarSize;\n  className?: string;\n  name?: never;\n};\n\nexport function AvatarRoot({ size, className, ...props }: AvatarRootProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const resolvedSize = size ?? contextSize ?? 'sm';\n\n  return (\n    <AvatarSizeContext.Provider value={resolvedSize}>\n      <BaseAvatar.Root\n        {...props}\n        data-slot=\"avatar\"\n        data-size={resolvedSize}\n        className={cn(\n          'relative inline-flex shrink-0 rounded-full select-none',\n          'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n          avatarSizeClasses[resolvedSize],\n          className,\n        )}\n      />\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { AvatarNamed, type AvatarProps } from './avatar-named';\nimport { AvatarRoot, type AvatarRootProps } from './avatar-root';\n\nexport function AvatarElement(props: AvatarProps | AvatarRootProps) {\n  if (props.name === undefined) return <AvatarRoot {...props} />;\n  return <AvatarNamed {...props} />;\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarFallbackProps = Omit<BaseAvatar.Fallback.Props, 'className'> & {\n  className?: string;\n};\n\nexport function AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <BaseAvatar.Fallback\n      {...props}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground',\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Children, type ComponentProps } from 'react';\n\nimport { AvatarSizeContext, type AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupProps = ComponentProps<'div'> & {\n  size?: AvatarSize;\n};\n\nconst groupSizeClasses: Record<AvatarSize, string> = {\n  xs: '[--avatar-group-size:var(--spacing-icon-xs)]',\n  sm: '[--avatar-group-size:var(--spacing-avatar-sm)]',\n  md: '[--avatar-group-size:var(--spacing-avatar-md)]',\n  lg: '[--avatar-group-size:var(--spacing-avatar-lg)]',\n  control: '[--avatar-group-size:var(--spacing-control-md)]',\n};\n\nconst overlapClasses = [\n  '*:not-first:ml-[calc(var(--avatar-group-size)/-4)]',\n  '*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+--spacing(0.5)),black_calc(var(--avatar-group-size)/2+--spacing(0.75)))]',\n];\n\nexport function AvatarGroup({ size = 'sm', className, children, ...props }: AvatarGroupProps) {\n  const items = Children.toArray(children);\n\n  return (\n    <AvatarSizeContext.Provider value={size}>\n      <div\n        {...props}\n        data-slot=\"avatar-group\"\n        className={cn('flex items-center', groupSizeClasses[size], overlapClasses, className)}\n      >\n        {items.map((item, index) => (\n          <div key={index} data-slot=\"avatar-group-item\" className=\"flex\" style={{ zIndex: items.length - index }}>\n            {item}\n          </div>\n        ))}\n      </div>\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { useContext, type ComponentProps } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarSizeClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupCountProps = ComponentProps<'div'>;\n\nexport function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"avatar-group-count\"\n      data-size={size}\n      className={cn(\n        'relative flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground tabular-nums',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n        avatarSizeClasses[size],\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\n\nimport { cn } from '@/lib/utils';\n\nexport type AvatarImageProps = Omit<BaseAvatar.Image.Props, 'className' | 'alt'> & {\n  alt: string;\n  className?: string;\n};\n\nexport function AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <BaseAvatar.Image\n      {...props}\n      data-slot=\"avatar-image\"\n      className={cn('size-full rounded-full object-cover', className)}\n    />\n  );\n}\n","import { AvatarBadge } from './avatar-badge';\nimport { AvatarElement } from './avatar-element';\nimport { AvatarFallback } from './avatar-fallback';\nimport { AvatarGroup } from './avatar-group';\nimport { AvatarGroupCount } from './avatar-group-count';\nimport { AvatarImage } from './avatar-image';\n\nexport type { AvatarSize } from './avatar-size';\nexport type { AvatarProps } from './avatar-named';\nexport type { AvatarRootProps } from './avatar-root';\nexport type { AvatarImageProps } from './avatar-image';\nexport type { AvatarFallbackProps } from './avatar-fallback';\nexport type { AvatarBadgeProps, AvatarBadgeTone } from './avatar-badge';\nexport type { AvatarGroupProps } from './avatar-group';\nexport type { AvatarGroupCountProps } from './avatar-group-count';\n\nexport const Avatar = Object.assign(AvatarElement, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n  Badge: AvatarBadge,\n  Group: AvatarGroup,\n  GroupCount: AvatarGroupCount,\n});\n"],"names":["useContext","AvatarSizeContext","jsx","cn","useState","avatarSizeClasses","controlStateColorTransition","Txt","BaseAvatar","avatarTextClasses","avatarIconClasses","Children"],"mappings":"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"}

package/dist/Badge-63UxysBA.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const icons_Icon = require('./icons/Icon.cjs.js');
+const productIdentity = require('./product-identity-CAQoXS5p.cjs');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-DlOJCxrS.cjs');
+
+const green = {
+  strong: "bg-badge-green-strong text-badge-green-foreground",
+  subtle: "bg-badge-green-subtle text-badge-green-foreground",
+  indicator: "bg-badge-green-indicator"
+};
+const red = {
+  strong: "bg-badge-red-strong text-badge-red-foreground",
+  subtle: "bg-badge-red-subtle text-badge-red-foreground",
+  indicator: "bg-badge-red-indicator"
+};
+const amber = {
+  strong: "bg-badge-amber-strong text-badge-amber-foreground",
+  subtle: "bg-badge-amber-subtle text-badge-amber-foreground",
+  indicator: "bg-badge-amber-indicator"
+};
+const blue = {
+  strong: "bg-badge-blue-strong text-badge-blue-foreground",
+  subtle: "bg-badge-blue-subtle text-badge-blue-foreground",
+  indicator: "bg-badge-blue-indicator"
+};
+const badgeToneStyles = {
+  studio: {
+    strong: productIdentity.productColors.studio,
+    subtle: productIdentity.productSubtleColors.studio,
+    indicator: "bg-product-studio-foreground"
+  },
+  server: {
+    strong: productIdentity.productColors.server,
+    subtle: productIdentity.productSubtleColors.server,
+    indicator: "bg-product-server-foreground"
+  },
+  observability: {
+    strong: productIdentity.productColors.observability,
+    subtle: productIdentity.productSubtleColors.observability,
+    indicator: "bg-product-observability-foreground"
+  },
+  factory: {
+    strong: productIdentity.productColors.factory,
+    subtle: productIdentity.productSubtleColors.factory,
+    indicator: "bg-product-factory-foreground"
+  },
+  workers: {
+    strong: productIdentity.productColors.workers,
+    subtle: productIdentity.productSubtleColors.workers,
+    indicator: "bg-product-workers-foreground"
+  },
+  "persistent-server": {
+    strong: productIdentity.productColors["persistent-server"],
+    subtle: productIdentity.productSubtleColors["persistent-server"],
+    indicator: "bg-product-persistent-server-foreground"
+  },
+  neutral: {
+    strong: "bg-fill text-badge-neutral-foreground",
+    subtle: "bg-fill-subtle text-badge-neutral-foreground",
+    indicator: "bg-muted-foreground"
+  },
+  success: { ...green, indicator: "bg-success-indicator" },
+  destructive: {
+    strong: "bg-badge-red-strong text-badge-red-foreground",
+    subtle: "bg-badge-red-subtle text-badge-red-foreground",
+    indicator: "bg-destructive-indicator"
+  },
+  info: { ...blue, indicator: "bg-info-indicator" },
+  warning: {
+    strong: "bg-badge-amber-strong text-warning-foreground",
+    subtle: "bg-badge-amber-subtle text-warning-foreground",
+    indicator: "bg-warning-indicator"
+  },
+  green,
+  red,
+  amber,
+  blue,
+  purple: {
+    strong: "bg-badge-purple-strong text-badge-purple-foreground",
+    subtle: "bg-badge-purple-subtle text-badge-purple-foreground",
+    indicator: "bg-badge-purple-indicator"
+  },
+  orange: {
+    strong: "bg-badge-orange-strong text-badge-orange-foreground",
+    subtle: "bg-badge-orange-subtle text-badge-orange-foreground",
+    indicator: "bg-badge-orange-indicator"
+  },
+  cyan: {
+    strong: "bg-badge-cyan-strong text-badge-cyan-foreground",
+    subtle: "bg-badge-cyan-subtle text-badge-cyan-foreground",
+    indicator: "bg-badge-cyan-indicator"
+  },
+  pink: {
+    strong: "bg-badge-pink-strong text-badge-pink-foreground",
+    subtle: "bg-badge-pink-subtle text-badge-pink-foreground",
+    indicator: "bg-badge-pink-indicator"
+  }
+};
+const badgeSizeStyles = {
+  xs: {
+    badge: "h-[18px] gap-0.5 text-meta",
+    withoutLeadingVisual: "px-1.5",
+    withLeadingVisual: "pl-1 pr-1.5",
+    indicator: "size-1"
+  },
+  sm: {
+    badge: "h-5 gap-1 text-meta",
+    withoutLeadingVisual: "px-1.5",
+    withLeadingVisual: "px-1.5",
+    indicator: "size-1"
+  },
+  md: {
+    badge: "h-5 gap-1 text-column tracking-normal",
+    withoutLeadingVisual: "px-2",
+    withLeadingVisual: "pl-1.5 pr-2",
+    indicator: "size-1.5"
+  }
+};
+const Badge = ({
+  icon,
+  indicator,
+  variant = "neutral",
+  emphasis = "strong",
+  size = "md",
+  className,
+  children,
+  ...props
+}) => {
+  const hasIcon = Boolean(icon);
+  const withLeadingVisual = hasIcon || indicator !== void 0;
+  const sizeStyles = badgeSizeStyles[size];
+  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils_cn.cn(
+        "inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px]",
+        "shadow-inset",
+        badgeToneStyles[variant][emphasis],
+        sizeStyles.badge,
+        paddingClass,
+        primitives_transitions.transitions.colors,
+        className
+      ),
+      ...props,
+      children: [
+        indicator !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: utils_cn.cn(
+              "shrink-0 rounded-full",
+              badgeToneStyles[variant].indicator,
+              sizeStyles.indicator,
+              indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none"
+            )
+          }
+        ) : null,
+        hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: icon }) : null,
+        children
+      ]
+    }
+  );
+};
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge-63UxysBA.cjs.map

package/dist/Badge-63UxysBA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-63UxysBA.cjs","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { productColors, productSubtleColors } from '../ProductAvatar/product-identity';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type BadgeEmphasis = 'strong' | 'subtle';\nexport type BadgeIndicator = 'dot' | 'pulse';\n\ntype BadgeToneStyles = Record<BadgeEmphasis, string> & { indicator: string };\n\nconst green = {\n  strong: 'bg-badge-green-strong text-badge-green-foreground',\n  subtle: 'bg-badge-green-subtle text-badge-green-foreground',\n  indicator: 'bg-badge-green-indicator',\n};\nconst red = {\n  strong: 'bg-badge-red-strong text-badge-red-foreground',\n  subtle: 'bg-badge-red-subtle text-badge-red-foreground',\n  indicator: 'bg-badge-red-indicator',\n};\nconst amber = {\n  strong: 'bg-badge-amber-strong text-badge-amber-foreground',\n  subtle: 'bg-badge-amber-subtle text-badge-amber-foreground',\n  indicator: 'bg-badge-amber-indicator',\n};\nconst blue = {\n  strong: 'bg-badge-blue-strong text-badge-blue-foreground',\n  subtle: 'bg-badge-blue-subtle text-badge-blue-foreground',\n  indicator: 'bg-badge-blue-indicator',\n};\n\nconst badgeToneStyles = {\n  studio: {\n    strong: productColors.studio,\n    subtle: productSubtleColors.studio,\n    indicator: 'bg-product-studio-foreground',\n  },\n  server: {\n    strong: productColors.server,\n    subtle: productSubtleColors.server,\n    indicator: 'bg-product-server-foreground',\n  },\n  observability: {\n    strong: productColors.observability,\n    subtle: productSubtleColors.observability,\n    indicator: 'bg-product-observability-foreground',\n  },\n  factory: {\n    strong: productColors.factory,\n    subtle: productSubtleColors.factory,\n    indicator: 'bg-product-factory-foreground',\n  },\n  workers: {\n    strong: productColors.workers,\n    subtle: productSubtleColors.workers,\n    indicator: 'bg-product-workers-foreground',\n  },\n  'persistent-server': {\n    strong: productColors['persistent-server'],\n    subtle: productSubtleColors['persistent-server'],\n    indicator: 'bg-product-persistent-server-foreground',\n  },\n  neutral: {\n    strong: 'bg-fill text-badge-neutral-foreground',\n    subtle: 'bg-fill-subtle text-badge-neutral-foreground',\n    indicator: 'bg-muted-foreground',\n  },\n  success: { ...green, indicator: 'bg-success-indicator' },\n  destructive: {\n    strong: 'bg-badge-red-strong text-badge-red-foreground',\n    subtle: 'bg-badge-red-subtle text-badge-red-foreground',\n    indicator: 'bg-destructive-indicator',\n  },\n  info: { ...blue, indicator: 'bg-info-indicator' },\n  warning: {\n    strong: 'bg-badge-amber-strong text-warning-foreground',\n    subtle: 'bg-badge-amber-subtle text-warning-foreground',\n    indicator: 'bg-warning-indicator',\n  },\n  green,\n  red,\n  amber,\n  blue,\n  purple: {\n    strong: 'bg-badge-purple-strong text-badge-purple-foreground',\n    subtle: 'bg-badge-purple-subtle text-badge-purple-foreground',\n    indicator: 'bg-badge-purple-indicator',\n  },\n  orange: {\n    strong: 'bg-badge-orange-strong text-badge-orange-foreground',\n    subtle: 'bg-badge-orange-subtle text-badge-orange-foreground',\n    indicator: 'bg-badge-orange-indicator',\n  },\n  cyan: {\n    strong: 'bg-badge-cyan-strong text-badge-cyan-foreground',\n    subtle: 'bg-badge-cyan-subtle text-badge-cyan-foreground',\n    indicator: 'bg-badge-cyan-indicator',\n  },\n  pink: {\n    strong: 'bg-badge-pink-strong text-badge-pink-foreground',\n    subtle: 'bg-badge-pink-subtle text-badge-pink-foreground',\n    indicator: 'bg-badge-pink-indicator',\n  },\n} satisfies Record<string, BadgeToneStyles>;\n\nexport type BadgeVariant = keyof typeof badgeToneStyles;\n\nconst badgeSizeStyles = {\n  xs: {\n    badge: 'h-[18px] gap-0.5 text-meta',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'pl-1 pr-1.5',\n    indicator: 'size-1',\n  },\n  sm: {\n    badge: 'h-5 gap-1 text-meta',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'px-1.5',\n    indicator: 'size-1',\n  },\n  md: {\n    badge: 'h-5 gap-1 text-column tracking-normal',\n    withoutLeadingVisual: 'px-2',\n    withLeadingVisual: 'pl-1.5 pr-2',\n    indicator: 'size-1.5',\n  },\n};\n\nexport type BadgeSize = keyof typeof badgeSizeStyles;\n\ntype BadgeLeadingVisual = { icon?: ReactNode; indicator?: never } | { icon?: never; indicator?: BadgeIndicator };\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  BadgeLeadingVisual & {\n    variant?: BadgeVariant;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n  };\n\nexport const Badge = ({\n  icon,\n  indicator,\n  variant = 'neutral',\n  emphasis = 'strong',\n  size = 'md',\n  className,\n  children,\n  ...props\n}: BadgeProps) => {\n  const hasIcon = Boolean(icon);\n  const withLeadingVisual = hasIcon || indicator !== undefined;\n  const sizeStyles = badgeSizeStyles[size];\n  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px]',\n        'shadow-inset',\n        badgeToneStyles[variant][emphasis],\n        sizeStyles.badge,\n        paddingClass,\n        transitions.colors,\n        className,\n      )}\n      {...props}\n    >\n      {indicator !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'shrink-0 rounded-full',\n            badgeToneStyles[variant].indicator,\n            sizeStyles.indicator,\n            indicator === 'pulse' && 'motion-safe:animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      ) : null}\n      {hasIcon ? <Icon size=\"xs\">{icon}</Icon> : null}\n      {children}\n    </span>\n  );\n};\n"],"names":["productColors","productSubtleColors","jsxs","cn","transitions","jsx","Icon"],"mappings":"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"}