@mastra/playground-ui 60.0.0-alpha.1 → 60.0.0-alpha.10

package/README.md

@@ -50,10 +50,92 @@ Text fields, textareas, input groups, and the default Select, Combobox, and Date
 | `--field-rim`        | none                | Resting outline. Stronger inside white surfaces in light mode                            |
 | `--field-rim-focus`  | none                | Focus outline                                                                            |
 
-A field in an error state sets `--field-rim` and `--field-rim-focus` to `--destructive`, so the red outline shows on every surface and stays red while focused.
+A field in an error state sets `--field-rim` and `--field-rim-focus` to `--destructive-indicator`, so the red outline shows on every surface and stays red while focused.
 
 If your app generates additional semantic utilities, import `@mastra/playground-ui/theme.css` into its Tailwind stylesheet so Tailwind can read the `@theme inline` mappings.
 
+### Brand colors
+
+The fixed Mastra palette is available as `--color-brand-green`, `--color-brand-orange`, `--color-brand-pink`, `--color-brand-purple`, `--color-brand-blue`, `--color-brand-red`, and `--color-brand-yellow`. These values do not change with the theme. Utilities use names such as `bg-brand-green`.
+
+### Chromatic roles
+
+Eight shared ramps (`red`, `orange`, `yellow`, `green`, `cyan`, `blue`, `purple`, and `pink`) run from `50` to `950`. Status roles select steps from those ramps for each theme:
+
+```css
+.status {
+  background: var(--success-subtle);
+  border: 1px solid var(--success-edge);
+  color: var(--success-subtle-foreground);
+}
+
+.status-dot {
+  background: var(--success-indicator);
+}
+```
+
+The same four suffixes apply to `destructive`, `warning`, and `info`. Backgrounds are opaque. Use `-subtle-foreground` only for text on a `-subtle` surface. Standalone status text, invalid-field borders, icons, dots, and bars use `-indicator`. The filled destructive button uses `--fill-destructive` and its hover, active, and disabled steps, with `--fill-destructive-foreground` for its text.
+
+Product roles use `--product-{name}` and `--product-{name}-foreground`. Names are `studio`, `server`, `observability`, `factory`, `workers`, and `persistent-server`. Use `ProductAvatar` for the round icon and `ProductBadge` for the icon with its label. Both take a `product` prop and use the matching semantic colors.
+
+```tsx
+import { ProductAvatar } from '@mastra/playground-ui/components/ProductAvatar';
+import { ProductBadge } from '@mastra/playground-ui/components/ProductBadge';
+
+<ProductAvatar product="studio" />
+<ProductBadge product="persistent-server" />
+```
+
+Charts use hue-named roles for categories (`--chart-blue`, `--chart-blue-deep`, `--chart-yellow`, `--chart-green`, `--chart-purple`, `--chart-orange`, `--chart-pink`, `--chart-red`) and `--chart-sequential-1` through `--chart-sequential-5` for ordered values. Span colors use `--span-agent`, `--span-workflow`, and the other span names. Pastel chart colors are fills, not text colors; keep labels on `--foreground` or `--muted-foreground`.
+
+Numbered `accent*` tokens, `positive1`, `negative1`, `warning1`, `notice-success/destructive/warning/info`, and `--brand-green-*` are removed. Status consumers use the existing `success`, `destructive`, `warning`, or `info` roles. Focus styling uses `border-focus`; categorical charts and span icons use their own roles. CodeMirror uses five local `--syntax-*` properties scoped to `.cm-editor`, not a global palette.
+
+Every badge hue (`green`, `red`, `yellow`, `blue`, `purple`, `orange`, `cyan`, `pink`) is a categorical tone built from the ramps, with `--badge-{hue}-strong`, `-subtle`, `-edge`, `-foreground`, and `-indicator`. `-strong` and `-subtle` are the fills behind `emphasis="strong"` and `emphasis="subtle"`. Badge backgrounds are solid: in dark mode the low-chroma `--{hue}-soft-900` (strong) / `--{hue}-soft-950` (subtle), in light mode `--{hue}-100` / `--{hue}-50`. The soft steps keep the lightness and hue of `900`/`950` at 75% chroma, and are available as utilities such as `bg-green-soft-900`. `--badge-{hue}-indicator` colors dots, icons, and labels for a category: `--{hue}-soft-300` in dark mode and `--{hue}-soft-600` in light mode, which hold every hue at the same 0.1 chroma so no hue shouts. Use the status role with `-subtle`, `-edge`, `-subtle-foreground`, or `-indicator` for its intended job. Notice variants are unchanged. Badge status variants are `success`, `destructive`, `warning`, and `info`, for states. `green`, `red`, `yellow`, and `blue` are categorical tones like `purple` and `orange`, for labels that are not states. `Badge` takes `emphasis="strong"` (the default) or `emphasis="subtle"` (a quieter tinted fill). Use `--green-*` for the shared chromatic ramp.
+
+#### Opacity and literal colors
+
+A resting color never depends on what sits behind it. Surfaces, text, borders, badges, notices, status, product, and chart colors are solid ramp steps in both themes, and span colors are solid values in `data-viz.css` at one lightness per theme, whatever layer they sit on.
+
+Opacity is allowed only through design-system tokens, for layers whose job is to show what is underneath:
+
+- State layers over an existing surface: `fill`, `fill-subtle`, `fill-hover`, `fill-active`, and `fill-strong`.
+- Scrims and overlays: `scrim`.
+- Neutral hairlines: `border`, `border-strong`, `surface-rim`, and `gray-alpha-*`.
+- Effects that fade, glow, or animate inside a design-system component, such as the Composer ring and the sidebar meter bloom.
+
+Product code does not add opacity modifiers (`bg-green-500/20`) or `color-mix()` to chromatic colors, and does not write literal colors (`#hex`, `rgb()`, `oklch()`) outside the theme. Masks, brand marks, and screens that render before the theme loads are the exceptions. `src/color-rules.test.ts` enforces this across playground-ui, Studio, and Factory.
+
+To migrate removed tokens:
+
+| Removed token                                         | Replacement                                       |
+| ----------------------------------------------------- | ------------------------------------------------- |
+| `--chart-soft-N`                                      | `--chart-sequential-N`                            |
+| `--span-type-NAME`                                    | `--span-NAME`                                     |
+| `accent1`, `positive1`                                | `success-*`                                       |
+| `accent2`, `negative1`                                | `destructive-*`                                   |
+| `accent6`, `warning1`                                 | `warning-*`                                       |
+| `accent3`, `accent5`                                  | `info-*`                                          |
+| `error`                                               | `destructive-indicator`                           |
+| `notice-STATUS`                                       | `STATUS-subtle`, `STATUS-subtle-foreground`       |
+| `--brand-green-N`                                     | `--green-N`                                       |
+| `destructive`, `destructive-foreground`               | `fill-destructive`, `fill-destructive-foreground` |
+| `badge-HUE`, `badge-HUE-fg`                           | `badge-HUE-strong`, `badge-HUE-foreground`        |
+| `notice-note`, `notice-note-fg`                       | `muted`, `foreground`                             |
+| `--ring`, `ring-ring`                                 | `--border-focus`, `ring-border-focus`             |
+| `--shadow-focus-ring`, `--focus-halo`                 | none; focus has no halo                           |
+| `--surface-rim-focus`, `--field-rim-focus-on-surface` | `--border-focus`                                  |
+| `focusRing.visible` and siblings                      | `focusRing`, or `focusRingInset` in clipped rows  |
+
+Keyboard focus is a 1px `--border-focus` outline on `:focus-visible`, and the base layer draws it on any focusable element that does not style its own. `focusRing` from `primitives/transitions` applies it explicitly, `focusRingInset` draws it inside a full-bleed row whose edge is clipped, and `focusRingOffset` sets it 2px out on checkboxes, radios, switches, and filled `primary` and `destructive` buttons, where a flush line vanishes into the fill. It is an outline, not a `ring-*`, because a ring rewrites `box-shadow` and would erase a raised surface's rim. Fields, buttons, and clickable cards show focus on that rim instead: `surfaceRimFocus` from `primitives/form-element` repaints it to `--border-focus`, the same colour and weight, and the surface keeps its elevation.
+
+`SankeyChart` accepts `getNodeColor` and `getLinkColor` callbacks returning CSS colors. Explicit link colors keep the default link transparency and hover emphasis:
+
+```tsx
+<SankeyChart getNodeColor={() => 'var(--span-agent)'} getLinkColor={() => 'var(--chart-blue)'} />
+```
+
+Foundations/Color has one story each for monochrome and chromatic ramps, semantic roles, products, charts, span types, and brand colors. Badge and avatar examples live in Elements/Products; the semantic Sankey example lives in Metrics/SankeyChart.
+
 ### Typography
 
 Text uses roles, not sizes. A role such as `body-sm` or `caption` sets size, line height, weight, and tracking together. Render text with `Txt`, or use the matching `text-<role>` utility inside a component's own markup.

package/dist/Avatar-B3PwGdWv.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Txt = require('./Txt-DPmEpNbp.cjs');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+const sizeClasses = {
+  sm: "h-avatar-sm w-avatar-sm",
+  md: "h-avatar-md w-avatar-md",
+  lg: "h-avatar-lg w-avatar-lg"
+};
+const Avatar = ({ src, name, size = "sm", interactive = false, color, textColor }) => {
+  const [didError, setDidError] = React.useState(false);
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && !didError;
+  const showFallbackTint = !showImage && Boolean(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        sizeClasses[size],
+        "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: () => setDidError(true) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        Txt.Txt,
+        {
+          variant: "body",
+          tone: showFallbackTint ? void 0 : "muted",
+          className: "text-center",
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+};
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar-B3PwGdWv.cjs.map

package/dist/Avatar-B3PwGdWv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-B3PwGdWv.cjs","sources":["../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Txt } from '../Txt';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'h-avatar-sm w-avatar-sm',\n  md: 'h-avatar-md w-avatar-md',\n  lg: 'h-avatar-lg w-avatar-lg',\n};\n\nexport const Avatar = ({ src, name, size = 'sm', interactive = false, color, textColor }: AvatarProps) => {\n  const [didError, setDidError] = useState(false);\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && !didError;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      className={cn(\n        sizeClasses[size],\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={() => setDidError(true)} />\n      ) : (\n        <Txt\n          variant=\"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"],"names":["useState","jsx","cn","controlStateColorTransition","Txt"],"mappings":";;;;;;;;AAiBA,MAAM,WAAA,GAA0C;AAAA,EAC9C,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,MAAA,GAAS,CAAC,EAAE,GAAA,EAAK,IAAA,EAAM,IAAA,GAAO,IAAA,EAAM,WAAA,GAAc,KAAA,EAAO,KAAA,EAAO,SAAA,EAAU,KAAmB;AACxG,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,UAAU,IAAA,CAAK,IAAA,GAAO,CAAC,CAAA,EAAG,aAAY,IAAK,GAAA;AACjD,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,GAAG,CAAA,IAAK,CAAC,QAAA;AACnC,EAAA,MAAM,gBAAA,GAAmB,CAAC,SAAA,IAAa,OAAA,CAAQ,KAAK,CAAA;AAEpD,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,YAAY,IAAI,CAAA;AAAA,QAChB,6FAAA;AAAA,QACA,CAAC,gBAAA,IAAoB,SAAA;AAAA,QACrBC,kDAAA;AAAA,QACA,WAAA,IAAe;AAAA,OACjB;AAAA,MACA,KAAA,EAAO,gBAAA,GAAmB,EAAE,eAAA,EAAiB,OAAM,GAAI,MAAA;AAAA,MAEtD,QAAA,EAAA,SAAA,mBACCF,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,GAAA,EAAK,IAAA,EAAM,SAAA,EAAU,wBAAA,EAAyB,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,GAAG,CAAA,mBAE/FA,cAAA;AAAA,QAACG,OAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,MAAA;AAAA,UACR,IAAA,EAAM,mBAAmB,MAAA,GAAY,OAAA;AAAA,UACrC,SAAA,EAAU,aAAA;AAAA,UACV,OAAO,gBAAA,IAAoB,SAAA,GAAY,EAAE,KAAA,EAAO,WAAU,GAAI,MAAA;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ;;;;"}

package/dist/Avatar-bHcyExU7.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+import { controlStateColorTransition } from './primitives/transitions.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+const sizeClasses = {
+  sm: "h-avatar-sm w-avatar-sm",
+  md: "h-avatar-md w-avatar-md",
+  lg: "h-avatar-lg w-avatar-lg"
+};
+const Avatar = ({ src, name, size = "sm", interactive = false, color, textColor }) => {
+  const [didError, setDidError] = useState(false);
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && !didError;
+  const showFallbackTint = !showImage && Boolean(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        sizeClasses[size],
+        "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: () => setDidError(true) }) : /* @__PURE__ */ jsx(
+        Txt,
+        {
+          variant: "body",
+          tone: showFallbackTint ? void 0 : "muted",
+          className: "text-center",
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+};
+
+export { Avatar as A };
+//# sourceMappingURL=Avatar-bHcyExU7.js.map

package/dist/Avatar-bHcyExU7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-bHcyExU7.js","sources":["../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Txt } from '../Txt';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'h-avatar-sm w-avatar-sm',\n  md: 'h-avatar-md w-avatar-md',\n  lg: 'h-avatar-lg w-avatar-lg',\n};\n\nexport const Avatar = ({ src, name, size = 'sm', interactive = false, color, textColor }: AvatarProps) => {\n  const [didError, setDidError] = useState(false);\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && !didError;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      className={cn(\n        sizeClasses[size],\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={() => setDidError(true)} />\n      ) : (\n        <Txt\n          variant=\"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"],"names":[],"mappings":";;;;;;AAiBA,MAAM,WAAA,GAA0C;AAAA,EAC9C,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,MAAA,GAAS,CAAC,EAAE,GAAA,EAAK,IAAA,EAAM,IAAA,GAAO,IAAA,EAAM,WAAA,GAAc,KAAA,EAAO,KAAA,EAAO,SAAA,EAAU,KAAmB;AACxG,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,UAAU,IAAA,CAAK,IAAA,GAAO,CAAC,CAAA,EAAG,aAAY,IAAK,GAAA;AACjD,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,GAAG,CAAA,IAAK,CAAC,QAAA;AACnC,EAAA,MAAM,gBAAA,GAAmB,CAAC,SAAA,IAAa,OAAA,CAAQ,KAAK,CAAA;AAEpD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,YAAY,IAAI,CAAA;AAAA,QAChB,6FAAA;AAAA,QACA,CAAC,gBAAA,IAAoB,SAAA;AAAA,QACrB,2BAAA;AAAA,QACA,WAAA,IAAe;AAAA,OACjB;AAAA,MACA,KAAA,EAAO,gBAAA,GAAmB,EAAE,eAAA,EAAiB,OAAM,GAAI,MAAA;AAAA,MAEtD,QAAA,EAAA,SAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,GAAA,EAAK,IAAA,EAAM,SAAA,EAAU,wBAAA,EAAyB,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,GAAG,CAAA,mBAE/F,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,MAAA;AAAA,UACR,IAAA,EAAM,mBAAmB,MAAA,GAAY,OAAA;AAAA,UACrC,SAAA,EAAU,aAAA;AAAA,UACV,OAAO,gBAAA,IAAoB,SAAA,GAAY,EAAE,KAAA,EAAO,WAAU,GAAI,MAAA;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ;;;;"}

package/dist/Badge-H8K5WrXg.cjs

@@ -0,0 +1,162 @@
+'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-DG0X1KEP.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 yellow = {
+  strong: "bg-badge-yellow-strong text-badge-yellow-foreground",
+  subtle: "bg-badge-yellow-subtle text-badge-yellow-foreground",
+  indicator: "bg-badge-yellow-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: { ...red, indicator: "bg-destructive-indicator" },
+  info: { ...blue, indicator: "bg-info-indicator" },
+  warning: { ...yellow, indicator: "bg-warning-indicator" },
+  green,
+  red,
+  yellow,
+  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-H8K5WrXg.cjs.map

package/dist/Badge-H8K5WrXg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-H8K5WrXg.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 yellow = {\n  strong: 'bg-badge-yellow-strong text-badge-yellow-foreground',\n  subtle: 'bg-badge-yellow-subtle text-badge-yellow-foreground',\n  indicator: 'bg-badge-yellow-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: { ...red, indicator: 'bg-destructive-indicator' },\n  info: { ...blue, indicator: 'bg-info-indicator' },\n  warning: { ...yellow, indicator: 'bg-warning-indicator' },\n  green,\n  red,\n  yellow,\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":";;;;;;;;AAYA,MAAM,KAAA,GAAQ;AAAA,EACZ,MAAA,EAAQ,mDAAA;AAAA,EACR,MAAA,EAAQ,mDAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AACA,MAAM,GAAA,GAAM;AAAA,EACV,MAAA,EAAQ,+CAAA;AAAA,EACR,MAAA,EAAQ,+CAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AACA,MAAM,MAAA,GAAS;AAAA,EACb,MAAA,EAAQ,qDAAA;AAAA,EACR,MAAA,EAAQ,qDAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AACA,MAAM,IAAA,GAAO;AAAA,EACX,MAAA,EAAQ,iDAAA;AAAA,EACR,MAAA,EAAQ,iDAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AAEA,MAAM,eAAA,GAAkB;AAAA,EACtB,MAAA,EAAQ;AAAA,IACN,QAAQA,6BAAA,CAAc,MAAA;AAAA,IACtB,QAAQC,mCAAA,CAAoB,MAAA;AAAA,IAC5B,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,QAAQD,6BAAA,CAAc,MAAA;AAAA,IACtB,QAAQC,mCAAA,CAAoB,MAAA;AAAA,IAC5B,SAAA,EAAW;AAAA,GACb;AAAA,EACA,aAAA,EAAe;AAAA,IACb,QAAQD,6BAAA,CAAc,aAAA;AAAA,IACtB,QAAQC,mCAAA,CAAoB,aAAA;AAAA,IAC5B,SAAA,EAAW;AAAA,GACb;AAAA,EACA,OAAA,EAAS;AAAA,IACP,QAAQD,6BAAA,CAAc,OAAA;AAAA,IACtB,QAAQC,mCAAA,CAAoB,OAAA;AAAA,IAC5B,SAAA,EAAW;AAAA,GACb;AAAA,EACA,OAAA,EAAS;AAAA,IACP,QAAQD,6BAAA,CAAc,OAAA;AAAA,IACtB,QAAQC,mCAAA,CAAoB,OAAA;AAAA,IAC5B,SAAA,EAAW;AAAA,GACb;AAAA,EACA,mBAAA,EAAqB;AAAA,IACnB,MAAA,EAAQD,8BAAc,mBAAmB,CAAA;AAAA,IACzC,MAAA,EAAQC,oCAAoB,mBAAmB,CAAA;AAAA,IAC/C,SAAA,EAAW;AAAA,GACb;AAAA,EACA,OAAA,EAAS;AAAA,IACP,MAAA,EAAQ,uCAAA;AAAA,IACR,MAAA,EAAQ,8CAAA;AAAA,IACR,SAAA,EAAW;AAAA,GACb;AAAA,EACA,OAAA,EAAS,EAAE,GAAG,KAAA,EAAO,WAAW,sBAAA,EAAuB;AAAA,EACvD,WAAA,EAAa,EAAE,GAAG,GAAA,EAAK,WAAW,0BAAA,EAA2B;AAAA,EAC7D,IAAA,EAAM,EAAE,GAAG,IAAA,EAAM,WAAW,mBAAA,EAAoB;AAAA,EAChD,OAAA,EAAS,EAAE,GAAG,MAAA,EAAQ,WAAW,sBAAA,EAAuB;AAAA,EACxD,KAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,qDAAA;AAAA,IACR,MAAA,EAAQ,qDAAA;AAAA,IACR,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,qDAAA;AAAA,IACR,MAAA,EAAQ,qDAAA;AAAA,IACR,SAAA,EAAW;AAAA,GACb;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,MAAA,EAAQ,iDAAA;AAAA,IACR,MAAA,EAAQ,iDAAA;AAAA,IACR,SAAA,EAAW;AAAA,GACb;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,MAAA,EAAQ,iDAAA;AAAA,IACR,MAAA,EAAQ,iDAAA;AAAA,IACR,SAAA,EAAW;AAAA;AAEf,CAAA;AAIA,MAAM,eAAA,GAAkB;AAAA,EACtB,EAAA,EAAI;AAAA,IACF,KAAA,EAAO,4BAAA;AAAA,IACP,oBAAA,EAAsB,QAAA;AAAA,IACtB,iBAAA,EAAmB,aAAA;AAAA,IACnB,SAAA,EAAW;AAAA,GACb;AAAA,EACA,EAAA,EAAI;AAAA,IACF,KAAA,EAAO,qBAAA;AAAA,IACP,oBAAA,EAAsB,QAAA;AAAA,IACtB,iBAAA,EAAmB,QAAA;AAAA,IACnB,SAAA,EAAW;AAAA,GACb;AAAA,EACA,EAAA,EAAI;AAAA,IACF,KAAA,EAAO,uCAAA;AAAA,IACP,oBAAA,EAAsB,MAAA;AAAA,IACtB,iBAAA,EAAmB,aAAA;AAAA,IACnB,SAAA,EAAW;AAAA;AAEf,CAAA;AAcO,MAAM,QAAQ,CAAC;AAAA,EACpB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,QAAA,GAAW,QAAA;AAAA,EACX,IAAA,GAAO,IAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAkB;AAChB,EAAA,MAAM,OAAA,GAAU,QAAQ,IAAI,CAAA;AAC5B,EAAA,MAAM,iBAAA,GAAoB,WAAW,SAAA,KAAc,MAAA;AACnD,EAAA,MAAM,UAAA,GAAa,gBAAgB,IAAI,CAAA;AACvC,EAAA,MAAM,YAAA,GAAe,iBAAA,GAAoB,UAAA,CAAW,iBAAA,GAAoB,UAAA,CAAW,oBAAA;AAEnF,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,kEAAA;AAAA,QACA,cAAA;AAAA,QACA,eAAA,CAAgB,OAAO,CAAA,CAAE,QAAQ,CAAA;AAAA,QACjC,UAAA,CAAW,KAAA;AAAA,QACX,YAAA;AAAA,QACAC,kCAAA,CAAY,MAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,KAAc,MAAA,mBACbC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAWF,WAAA;AAAA,cACT,uBAAA;AAAA,cACA,eAAA,CAAgB,OAAO,CAAA,CAAE,SAAA;AAAA,cACzB,UAAA,CAAW,SAAA;AAAA,cACX,cAAc,OAAA,IAAW;AAAA;AAC3B;AAAA,SACF,GACE,IAAA;AAAA,QACH,0BAAUE,cAAA,CAACC,eAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,gBAAK,CAAA,GAAU,IAAA;AAAA,QAC1C;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/Badge-Q_pCeeGW.js

@@ -0,0 +1,160 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from './icons/Icon.es.js';
+import { p as productSubtleColors, a as productColors } from './product-identity-DwNTealD.js';
+import { transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+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 yellow = {
+  strong: "bg-badge-yellow-strong text-badge-yellow-foreground",
+  subtle: "bg-badge-yellow-subtle text-badge-yellow-foreground",
+  indicator: "bg-badge-yellow-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: 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: { ...red, indicator: "bg-destructive-indicator" },
+  info: { ...blue, indicator: "bg-info-indicator" },
+  warning: { ...yellow, indicator: "bg-warning-indicator" },
+  green,
+  red,
+  yellow,
+  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__ */ 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 B };
+//# sourceMappingURL=Badge-Q_pCeeGW.js.map

package/dist/Badge-Q_pCeeGW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-Q_pCeeGW.js","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 yellow = {\n  strong: 'bg-badge-yellow-strong text-badge-yellow-foreground',\n  subtle: 'bg-badge-yellow-subtle text-badge-yellow-foreground',\n  indicator: 'bg-badge-yellow-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: { ...red, indicator: 'bg-destructive-indicator' },\n  info: { ...blue, indicator: 'bg-info-indicator' },\n  warning: { ...yellow, indicator: 'bg-warning-indicator' },\n  green,\n  red,\n  yellow,\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":[],"mappings":"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"}