@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/Avatar-Dxpc0YUx.cjs

@@ -0,0 +1,151 @@
+const require_avatar_size = require("./avatar-size-9KZBPZC3.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+const require_primitives_transitions = require("./primitives/transitions.cjs.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_avatar = require("@base-ui/react/avatar");
+// src/ds/components/Avatar/avatar-badge.tsx
+var 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"
+};
+var badgeSizeClasses = {
+	xs: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
+	inline: "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 = (0, react.useContext)(require_avatar_size.AvatarSizeContext) ?? "sm";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		"data-slot": "avatar-badge",
+		className: require_utils.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__ */ (0, react_jsx_runtime.jsx)(require_avatar_size.AvatarSizeContext.Provider, {
+			value: "xs",
+			children
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-named.tsx
+function AvatarNamed({ src, name, size, interactive = false, color, textColor }) {
+	const contextSize = (0, react.useContext)(require_avatar_size.AvatarSizeContext);
+	const [failedSrc, setFailedSrc] = (0, 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__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "avatar",
+		"data-size": resolvedSize,
+		className: require_utils.cn(require_avatar_size.avatarSizeClasses[resolvedSize], "flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border", !showFallbackTint && "bg-fill", require_primitives_transitions.controlStateColorTransition, interactive && "cursor-pointer hover:border-border-hover"),
+		style: showFallbackTint ? { backgroundColor: color } : void 0,
+		children: showImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src,
+			alt: name,
+			className: "size-full object-cover",
+			onError: () => setFailedSrc(src)
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+			variant: resolvedSize === "xs" ? "meta" : "body",
+			tone: showFallbackTint ? void 0 : "muted",
+			className: "text-center",
+			style: showFallbackTint && textColor ? { color: textColor } : void 0,
+			children: initial
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-root.tsx
+function AvatarRoot({ size, className, ...props }) {
+	const contextSize = (0, react.useContext)(require_avatar_size.AvatarSizeContext);
+	const resolvedSize = size ?? contextSize ?? "sm";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar_size.AvatarSizeContext.Provider, {
+		value: resolvedSize,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Root, {
+			...props,
+			"data-slot": "avatar",
+			"data-size": resolvedSize,
+			className: require_utils.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", require_avatar_size.avatarSizeClasses[resolvedSize], className)
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-element.tsx
+function AvatarElement(props) {
+	if (props.name === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarRoot, { ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarNamed, { ...props });
+}
+// src/ds/components/Avatar/avatar-fallback.tsx
+function AvatarFallback({ className, ...props }) {
+	const size = (0, react.useContext)(require_avatar_size.AvatarSizeContext) ?? "sm";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Fallback, {
+		...props,
+		"data-slot": "avatar-fallback",
+		className: require_utils.cn("flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground", require_avatar_size.avatarTextClasses[size], require_avatar_size.avatarIconClasses[size], className)
+	});
+}
+// src/ds/components/Avatar/avatar-group.tsx
+var groupSizeClasses = {
+	xs: "[--avatar-group-size:var(--spacing-icon-xs)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+	inline: "[--avatar-group-size:var(--spacing-icon-md)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+	sm: "[--avatar-group-size:var(--spacing-avatar-sm)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+	md: "[--avatar-group-size:var(--spacing-avatar-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+	lg: "[--avatar-group-size:var(--spacing-avatar-lg)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+	control: "[--avatar-group-size:var(--spacing-control-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]"
+};
+var 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+var(--avatar-group-gap)),black_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)+var(--avatar-group-edge)))]"];
+function AvatarGroup({ size = "sm", className, children, ...props }) {
+	const items = react.Children.toArray(children);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar_size.AvatarSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...props,
+			"data-slot": "avatar-group",
+			className: require_utils.cn("flex items-center", groupSizeClasses[size], overlapClasses, className),
+			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "avatar-group-item",
+				className: "flex",
+				style: { zIndex: items.length - index },
+				children: item
+			}, index))
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-group-count.tsx
+function AvatarGroupCount({ className, ...props }) {
+	const size = (0, react.useContext)(require_avatar_size.AvatarSizeContext) ?? "sm";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		"data-slot": "avatar-group-count",
+		"data-size": size,
+		className: require_utils.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", require_avatar_size.avatarSizeClasses[size], require_avatar_size.avatarTextClasses[size], require_avatar_size.avatarIconClasses[size], className)
+	});
+}
+// src/ds/components/Avatar/avatar-image.tsx
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Image, {
+		...props,
+		"data-slot": "avatar-image",
+		className: require_utils.cn("size-full rounded-full object-cover", className)
+	});
+}
+// src/ds/components/Avatar/Avatar.tsx
+var Avatar = Object.assign(AvatarElement, {
+	Image: AvatarImage,
+	Fallback: AvatarFallback,
+	Badge: AvatarBadge,
+	Group: AvatarGroup,
+	GroupCount: AvatarGroupCount
+});
+Object.defineProperty(exports, "Avatar", {
+	enumerable: true,
+	get: function() {
+		return Avatar;
+	}
+});
+
+//# sourceMappingURL=Avatar-Dxpc0YUx.cjs.map

package/dist/Avatar-Dxpc0YUx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-Dxpc0YUx.cjs","names":["useContext","AvatarSizeContext","cn","useContext","AvatarSizeContext","useState","cn","avatarSizeClasses","controlStateColorTransition","Txt","useContext","AvatarSizeContext","BaseAvatar","cn","avatarSizeClasses","useContext","AvatarSizeContext","BaseAvatar","cn","avatarTextClasses","avatarIconClasses","Children","AvatarSizeContext","cn","useContext","AvatarSizeContext","cn","avatarSizeClasses","avatarTextClasses","avatarIconClasses","BaseAvatar","cn"],"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 } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext } from './avatar-size';\nimport 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  inline: '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 } from './avatar-size';\nimport 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 } from './avatar-size';\nimport 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 } from './avatar-named';\nimport type { AvatarProps } from './avatar-named';\nimport { AvatarRoot } from './avatar-root';\nimport 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 } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupProps = ComponentProps<'div'> & {\n  size?: AvatarSize;\n};\n\n// Small avatars get a thinner gap around the avatar on top, so it doesn't\n// swallow the avatar behind.\nconst groupSizeClasses: Record<AvatarSize, string> = {\n  xs: '[--avatar-group-size:var(--spacing-icon-xs)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]',\n  inline: '[--avatar-group-size:var(--spacing-icon-md)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]',\n  sm: '[--avatar-group-size:var(--spacing-avatar-sm)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  md: '[--avatar-group-size:var(--spacing-avatar-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  lg: '[--avatar-group-size:var(--spacing-avatar-lg)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  control:\n    '[--avatar-group-size:var(--spacing-control-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\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+var(--avatar-group-gap)),black_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)+var(--avatar-group-edge)))]',\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 } from 'react';\nimport 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"],"mappings":"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"}

package/dist/Badge-C7NnqmMx.js

@@ -0,0 +1,149 @@
+import { Icon } from "./icons/Icon.es.js";
+import { r as productSubtleColors, t as productColors } from "./product-identity-WWRu27Ga.js";
+import { transitions } from "./primitives/transitions.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/ds/components/Badge/Badge.tsx
+var green = {
+	strong: "bg-badge-green-strong text-badge-green-foreground",
+	subtle: "bg-badge-green-subtle text-badge-green-foreground",
+	indicator: "bg-badge-green-indicator"
+};
+var red = {
+	strong: "bg-badge-red-strong text-badge-red-foreground",
+	subtle: "bg-badge-red-subtle text-badge-red-foreground",
+	indicator: "bg-badge-red-indicator"
+};
+var amber = {
+	strong: "bg-badge-amber-strong text-badge-amber-foreground",
+	subtle: "bg-badge-amber-subtle text-badge-amber-foreground",
+	indicator: "bg-badge-amber-indicator"
+};
+var blue = {
+	strong: "bg-badge-blue-strong text-badge-blue-foreground",
+	subtle: "bg-badge-blue-subtle text-badge-blue-foreground",
+	indicator: "bg-badge-blue-indicator"
+};
+var badgeToneStyles = {
+	studio: {
+		strong: productColors.studio,
+		subtle: productSubtleColors.studio,
+		indicator: "bg-product-studio-foreground"
+	},
+	server: {
+		strong: productColors.server,
+		subtle: productSubtleColors.server,
+		indicator: "bg-product-server-foreground"
+	},
+	observability: {
+		strong: productColors.observability,
+		subtle: productSubtleColors.observability,
+		indicator: "bg-product-observability-foreground"
+	},
+	factory: {
+		strong: productColors.factory,
+		subtle: productSubtleColors.factory,
+		indicator: "bg-product-factory-foreground"
+	},
+	workers: {
+		strong: productColors.workers,
+		subtle: productSubtleColors.workers,
+		indicator: "bg-product-workers-foreground"
+	},
+	"persistent-server": {
+		strong: productColors["persistent-server"],
+		subtle: 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"
+	}
+};
+var 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"
+	}
+};
+var 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__ */ jsxs("span", {
+		className: cn("inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px]", "shadow-inset", badgeToneStyles[variant][emphasis], sizeStyles.badge, paddingClass, transitions.colors, className),
+		...props,
+		children: [
+			indicator !== void 0 ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("shrink-0 rounded-full", badgeToneStyles[variant].indicator, sizeStyles.indicator, indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none")
+			}) : null,
+			hasIcon ? /* @__PURE__ */ jsx(Icon, {
+				size: "xs",
+				children: icon
+			}) : null,
+			children
+		]
+	});
+};
+export { Badge as t };
+
+//# sourceMappingURL=Badge-C7NnqmMx.js.map

package/dist/Badge-C7NnqmMx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-C7NnqmMx.js","names":[],"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"],"mappings":";;;;;;AAYA,IAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AACA,IAAM,MAAM;CACV,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AACA,IAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AACA,IAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AAEA,IAAM,kBAAkB;CACtB,QAAQ;EACN,QAAQ,cAAc;EACtB,QAAQ,oBAAoB;EAC5B,WAAW;CACb;CACA,QAAQ;EACN,QAAQ,cAAc;EACtB,QAAQ,oBAAoB;EAC5B,WAAW;CACb;CACA,eAAe;EACb,QAAQ,cAAc;EACtB,QAAQ,oBAAoB;EAC5B,WAAW;CACb;CACA,SAAS;EACP,QAAQ,cAAc;EACtB,QAAQ,oBAAoB;EAC5B,WAAW;CACb;CACA,SAAS;EACP,QAAQ,cAAc;EACtB,QAAQ,oBAAoB;EAC5B,WAAW;CACb;CACA,qBAAqB;EACnB,QAAQ,cAAc;EACtB,QAAQ,oBAAoB;EAC5B,WAAW;CACb;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,SAAS;EAAE,GAAG;EAAO,WAAW;CAAuB;CACvD,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,MAAM;EAAE,GAAG;EAAM,WAAW;CAAoB;CAChD,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA;CACA;CACA;CACA;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;AACF;AAIA,IAAM,kBAAkB;CACtB,IAAI;EACF,OAAO;EACP,sBAAsB;EACtB,mBAAmB;EACnB,WAAW;CACb;CACA,IAAI;EACF,OAAO;EACP,sBAAsB;EACtB,mBAAmB;EACnB,WAAW;CACb;CACA,IAAI;EACF,OAAO;EACP,sBAAsB;EACtB,mBAAmB;EACnB,WAAW;CACb;AACF;AAcA,IAAa,SAAS,EACpB,MACA,WACA,UAAU,WACV,WAAW,UACX,OAAO,MACP,WACA,UACA,GAAG,YACa;CAChB,MAAM,UAAU,QAAQ,IAAI;CAC5B,MAAM,oBAAoB,WAAW,cAAc,KAAA;CACnD,MAAM,aAAa,gBAAgB;CACnC,MAAM,eAAe,oBAAoB,WAAW,oBAAoB,WAAW;CAEnF,OACE,qBAAC,QAAD;EACE,WAAW,GACT,oEACA,gBACA,gBAAgB,QAAQ,CAAC,WACzB,WAAW,OACX,cACA,YAAY,QACZ,SACF;EACA,GAAI;EAVN,UAAA;GAYG,cAAc,KAAA,IACb,oBAAC,QAAD;IACE,eAAY;IACZ,WAAW,GACT,yBACA,gBAAgB,QAAQ,CAAC,WACzB,WAAW,WACX,cAAc,WAAW,sDAC3B;GACD,CAAA,IACC;GACH,UAAU,oBAAC,MAAD;IAAM,MAAK;IAAM,UAAA;GAAW,CAAA,IAAI;GAC1C;EACG;;AAEV"}

package/dist/Badge-DqaMg7Gy.cjs

@@ -0,0 +1,154 @@
+const require_icons_Icon = require("./icons/Icon.cjs.js");
+const require_product_identity = require("./product-identity-pkZxgdMC.cjs");
+const require_primitives_transitions = require("./primitives/transitions.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ds/components/Badge/Badge.tsx
+var green = {
+	strong: "bg-badge-green-strong text-badge-green-foreground",
+	subtle: "bg-badge-green-subtle text-badge-green-foreground",
+	indicator: "bg-badge-green-indicator"
+};
+var red = {
+	strong: "bg-badge-red-strong text-badge-red-foreground",
+	subtle: "bg-badge-red-subtle text-badge-red-foreground",
+	indicator: "bg-badge-red-indicator"
+};
+var amber = {
+	strong: "bg-badge-amber-strong text-badge-amber-foreground",
+	subtle: "bg-badge-amber-subtle text-badge-amber-foreground",
+	indicator: "bg-badge-amber-indicator"
+};
+var blue = {
+	strong: "bg-badge-blue-strong text-badge-blue-foreground",
+	subtle: "bg-badge-blue-subtle text-badge-blue-foreground",
+	indicator: "bg-badge-blue-indicator"
+};
+var badgeToneStyles = {
+	studio: {
+		strong: require_product_identity.productColors.studio,
+		subtle: require_product_identity.productSubtleColors.studio,
+		indicator: "bg-product-studio-foreground"
+	},
+	server: {
+		strong: require_product_identity.productColors.server,
+		subtle: require_product_identity.productSubtleColors.server,
+		indicator: "bg-product-server-foreground"
+	},
+	observability: {
+		strong: require_product_identity.productColors.observability,
+		subtle: require_product_identity.productSubtleColors.observability,
+		indicator: "bg-product-observability-foreground"
+	},
+	factory: {
+		strong: require_product_identity.productColors.factory,
+		subtle: require_product_identity.productSubtleColors.factory,
+		indicator: "bg-product-factory-foreground"
+	},
+	workers: {
+		strong: require_product_identity.productColors.workers,
+		subtle: require_product_identity.productSubtleColors.workers,
+		indicator: "bg-product-workers-foreground"
+	},
+	"persistent-server": {
+		strong: require_product_identity.productColors["persistent-server"],
+		subtle: require_product_identity.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"
+	}
+};
+var 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"
+	}
+};
+var 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__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_utils.cn("inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px]", "shadow-inset", badgeToneStyles[variant][emphasis], sizeStyles.badge, paddingClass, require_primitives_transitions.transitions.colors, className),
+		...props,
+		children: [
+			indicator !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				className: require_utils.cn("shrink-0 rounded-full", badgeToneStyles[variant].indicator, sizeStyles.indicator, indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none")
+			}) : null,
+			hasIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_Icon.Icon, {
+				size: "xs",
+				children: icon
+			}) : null,
+			children
+		]
+	});
+};
+Object.defineProperty(exports, "Badge", {
+	enumerable: true,
+	get: function() {
+		return Badge;
+	}
+});
+
+//# sourceMappingURL=Badge-DqaMg7Gy.cjs.map

package/dist/Badge-DqaMg7Gy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-DqaMg7Gy.cjs","names":["productColors","productSubtleColors","cn","transitions","Icon"],"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"],"mappings":";;;;;;AAYA,IAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AACA,IAAM,MAAM;CACV,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AACA,IAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AACA,IAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,WAAW;AACb;AAEA,IAAM,kBAAkB;CACtB,QAAQ;EACN,QAAQA,yBAAAA,cAAc;EACtB,QAAQC,yBAAAA,oBAAoB;EAC5B,WAAW;CACb;CACA,QAAQ;EACN,QAAQD,yBAAAA,cAAc;EACtB,QAAQC,yBAAAA,oBAAoB;EAC5B,WAAW;CACb;CACA,eAAe;EACb,QAAQD,yBAAAA,cAAc;EACtB,QAAQC,yBAAAA,oBAAoB;EAC5B,WAAW;CACb;CACA,SAAS;EACP,QAAQD,yBAAAA,cAAc;EACtB,QAAQC,yBAAAA,oBAAoB;EAC5B,WAAW;CACb;CACA,SAAS;EACP,QAAQD,yBAAAA,cAAc;EACtB,QAAQC,yBAAAA,oBAAoB;EAC5B,WAAW;CACb;CACA,qBAAqB;EACnB,QAAQD,yBAAAA,cAAc;EACtB,QAAQC,yBAAAA,oBAAoB;EAC5B,WAAW;CACb;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,SAAS;EAAE,GAAG;EAAO,WAAW;CAAuB;CACvD,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,MAAM;EAAE,GAAG;EAAM,WAAW;CAAoB;CAChD,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA;CACA;CACA;CACA;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,WAAW;CACb;AACF;AAIA,IAAM,kBAAkB;CACtB,IAAI;EACF,OAAO;EACP,sBAAsB;EACtB,mBAAmB;EACnB,WAAW;CACb;CACA,IAAI;EACF,OAAO;EACP,sBAAsB;EACtB,mBAAmB;EACnB,WAAW;CACb;CACA,IAAI;EACF,OAAO;EACP,sBAAsB;EACtB,mBAAmB;EACnB,WAAW;CACb;AACF;AAcA,IAAa,SAAS,EACpB,MACA,WACA,UAAU,WACV,WAAW,UACX,OAAO,MACP,WACA,UACA,GAAG,YACa;CAChB,MAAM,UAAU,QAAQ,IAAI;CAC5B,MAAM,oBAAoB,WAAW,cAAc,KAAA;CACnD,MAAM,aAAa,gBAAgB;CACnC,MAAM,eAAe,oBAAoB,WAAW,oBAAoB,WAAW;CAEnF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,WAAWC,cAAAA,GACT,oEACA,gBACA,gBAAgB,QAAQ,CAAC,WACzB,WAAW,OACX,cACAC,+BAAAA,YAAY,QACZ,SACF;EACA,GAAI;EAVN,UAAA;GAYG,cAAc,KAAA,IACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,eAAY;IACZ,WAAWD,cAAAA,GACT,yBACA,gBAAgB,QAAQ,CAAC,WACzB,WAAW,WACX,cAAc,WAAW,sDAC3B;GACD,CAAA,IACC;GACH,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACE,mBAAAA,MAAD;IAAM,MAAK;IAAM,UAAA;GAAW,CAAA,IAAI;GAC1C;EACG;;AAEV"}