@mastra/playground-ui 60.0.0-alpha.7 → 60.0.0-alpha.9

package/README.md

@@ -50,10 +50,86 @@ 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`                             |
+
+`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 separate stories for ramps, semantic colors, product colors, 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/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":"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"}

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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"}

package/dist/Button-CHTvSq4d.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { c as cva } from './index-Dubp6Qv4.js';
+import React__default from 'react';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DsQPiynb.js';
+import { Icon } from './icons/Icon.es.js';
+import { iconSizeClasses } from './icons/icon-size-classes.es.js';
+import { controlHeight, controlSizeClasses } from './primitives/control-size.es.js';
+import { raisedControlSurfaceStyle, controlFocusBorderVisible, sharedFormElementDisabledStyle } from './primitives/form-element.es.js';
+import { controlStateColorTransition } from './primitives/transitions.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+const TEXT_MODE_ADORNMENTS = cn(
+  "gap-[.75em] rounded-full",
+  "[&>[data-slot=button-icon]]:-ml-[.3em]",
+  "[&>svg]:mx-[-.3em]"
+);
+const NEUTRAL_ICON_STATE = cn(
+  "[&_svg]:text-muted-foreground not-disabled:hover:[&_svg]:text-foreground aria-disabled:[&_svg]:text-muted-foreground"
+);
+const buttonVariants = cva(
+  cn(
+    "inline-flex cursor-pointer items-center justify-center",
+    controlStateColorTransition,
+    sharedFormElementDisabledStyle,
+    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground",
+    controlFocusBorderVisible
+  ),
+  {
+    variants: {
+      variant: {
+        // The raised card material, the same one a field wears: a neutral filled control is
+        // one material system-wide. No border of its own — the material's rim is its edge,
+        // and focus repaints that rim. Inside a ButtonsGroup the group flattens the rim and
+        // hands every segment the same 1px border instead (see `buttons-group.css`).
+        default: cn(
+          "border-0",
+          raisedControlSurfaceStyle,
+          NEUTRAL_ICON_STATE,
+          "disabled:bg-fill-subtle aria-disabled:bg-fill-subtle"
+        ),
+        // Filled variants take the opaque ladder: their rest fill is a colour, not a rung
+        // layered on the surface, so a state that thinned it would let whatever the button
+        // covers read through the hover it is meant to answer.
+        primary: cn(
+          "border border-transparent bg-fill-inverse text-background not-disabled:hover:bg-fill-inverse-hover not-disabled:active:bg-fill-inverse-active",
+          "disabled:bg-fill-inverse-disabled disabled:text-background/75 aria-disabled:bg-fill-inverse-disabled aria-disabled:text-background/75"
+        ),
+        destructive: cn(
+          "border border-transparent bg-fill-destructive text-fill-destructive-foreground not-disabled:hover:bg-fill-destructive-hover not-disabled:active:bg-fill-destructive-active",
+          "disabled:bg-fill-destructive-disabled disabled:text-fill-destructive-foreground aria-disabled:bg-fill-destructive-disabled aria-disabled:text-fill-destructive-foreground"
+        ),
+        "destructive-ghost": cn(
+          "border border-transparent bg-transparent text-destructive-indicator not-disabled:hover:bg-destructive-subtle not-disabled:hover:text-destructive-indicator not-disabled:active:bg-destructive-subtle-active",
+          "disabled:bg-transparent disabled:text-placeholder aria-disabled:bg-transparent aria-disabled:text-placeholder"
+        ),
+        ghost: cn(
+          "border border-transparent bg-transparent text-muted-foreground not-disabled:hover:bg-fill-subtle not-disabled:hover:text-foreground not-disabled:active:bg-fill",
+          "disabled:bg-transparent aria-disabled:bg-transparent"
+        )
+      },
+      size: {
+        sm: cn(controlSizeClasses.sm, iconSizeClasses.sm, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        md: cn(controlSizeClasses.md, iconSizeClasses.md, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        lg: cn(controlSizeClasses.lg, iconSizeClasses.lg, "px-[1em]", TEXT_MODE_ADORNMENTS),
+        // Icon sizes: square dimensions, fully rounded → circle. Active state inherits from variant
+        // so icon-mode and text-mode use the same press feedback. The glyph is sized by the `Icon`
+        // wrapper the component puts around an icon-mode child, keyed off the same scale.
+        "icon-sm": cn(controlHeight.sm, "w-control-sm rounded-full"),
+        "icon-md": cn(controlHeight.md, "w-control-md rounded-full"),
+        "icon-lg": cn(controlHeight.lg, "w-control-lg rounded-full")
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function isLinkElement(element) {
+  if (element.type === "a") return true;
+  const { href, to } = element.props;
+  return href !== void 0 || to !== void 0;
+}
+function preventLinkActivation(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+const iconSizeMap = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  "icon-sm": "sm",
+  "icon-md": "md",
+  "icon-lg": "lg"
+};
+function flattenChildren(children) {
+  const result = [];
+  React__default.Children.forEach(children, (child) => {
+    if (React__default.isValidElement(child) && child.type === React__default.Fragment) {
+      result.push(...flattenChildren(child.props.children));
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
+function isIconOnly(children) {
+  const flat = flattenChildren(children);
+  return flat.length > 0 && flat.every((child) => React__default.isValidElement(child));
+}
+function isIconButtonSize(size) {
+  return size?.startsWith("icon-") ?? false;
+}
+const Button = React__default.forwardRef(
+  ({
+    className,
+    render,
+    as: asProp,
+    href,
+    to,
+    target,
+    prefetch,
+    size,
+    variant = "default",
+    disabled,
+    children,
+    icon,
+    tooltip,
+    "aria-label": ariaLabelProp,
+    type,
+    ...props
+  }, ref) => {
+    const iconMode = isIconButtonSize(size);
+    const resolvedSize = size ?? "md";
+    const isLabelless = !iconMode && isIconOnly(children);
+    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip === "string" ? tooltip : void 0);
+    const content = iconMode ? /* @__PURE__ */ jsx(Icon, { size: iconSizeMap[resolvedSize], children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon ? /* @__PURE__ */ jsx(Icon, { "data-slot": "button-icon", size: iconSizeMap[resolvedSize], children: icon }) : null,
+      children
+    ] });
+    const sharedProps = {
+      disabled,
+      // Base UI renders `type="button"` when the prop is absent, which would quietly stop
+      // a form button that relied on the native `submit` default from submitting. Passing
+      // it through, `undefined` included, keeps native semantics: absent stays absent.
+      type,
+      "aria-label": ariaLabel,
+      // Expose the variant so a parent ButtonsGroup can detect FILLED segments in CSS
+      // (filled buttons have an opaque background that hides a border seam, so the group
+      // paints their divider as an inset box-shadow instead — see buttons-group.css).
+      "data-variant": variant,
+      // Icon-mode is a square: a group that overrides the rung has to move the width with
+      // the height or the circle turns into a pill (see buttons-group.css).
+      "data-shape": iconMode ? "icon" : void 0,
+      className: cn(buttonVariants({ variant, size: resolvedSize }), className),
+      ...props
+    };
+    const LegacyComponent = render ? void 0 : asProp;
+    const legacyLinkProps = {
+      ...href === void 0 ? null : { href },
+      ...to === void 0 ? null : { to },
+      ...target === void 0 ? null : { target },
+      ...prefetch === void 0 ? null : { prefetch }
+    };
+    const renderedLink = React__default.isValidElement(render) && isLinkElement(render) ? render : void 0;
+    const renderedLinkProps = renderedLink?.props;
+    const disabledHref = renderedLink?.type !== "a" && renderedLinkProps?.href !== void 0 ? "" : void 0;
+    const disabledTo = renderedLinkProps?.to !== void 0 ? "" : void 0;
+    const disabledLinkProps = disabled ? {
+      href: disabledHref,
+      to: disabledTo,
+      "aria-disabled": true,
+      onClick: preventLinkActivation,
+      onAuxClick: preventLinkActivation,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") preventLinkActivation(event);
+      }
+    } : void 0;
+    const button = LegacyComponent ? /* @__PURE__ */ jsx(LegacyComponent, { ref, ...legacyLinkProps, ...sharedProps, children: content }) : renderedLink ? React__default.cloneElement(renderedLink, {
+      ref,
+      ...sharedProps,
+      disabled: void 0,
+      ...disabledLinkProps,
+      className: cn(sharedProps.className, renderedLink.props.className),
+      children: content
+    }) : /* @__PURE__ */ jsx(Button$1, { ref, render, ...sharedProps, children: content });
+    if (tooltip) {
+      return /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+      ] });
+    }
+    return button;
+  }
+);
+Button.displayName = "Button";
+
+export { Button as B, buttonVariants as b, isIconButtonSize as i };
+//# sourceMappingURL=Button-CHTvSq4d.js.map