@mastra/playground-ui 36.1.0-alpha.1 → 37.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # @mastra/playground-ui
 
+## 37.0.0-alpha.3
+
+### Patch Changes
+
+- Added a direct utility import for the class name helper so applications can avoid the root Playground UI barrel. ([#18458](https://github.com/mastra-ai/mastra/pull/18458))
+
+  ```ts
+  import { cn } from '@mastra/playground-ui/utils/cn';
+  ```
+
+- Updated dependencies [[`bf3fe49`](https://github.com/mastra-ai/mastra/commit/bf3fe49f9467dbbdb8f9eaf74e0f7971ffb19559), [`24ceaea`](https://github.com/mastra-ai/mastra/commit/24ceaea0bdd8609cabbab764380608ca6621a194), [`9e45902`](https://github.com/mastra-ai/mastra/commit/9e4590208e745055cecca202e2db0e5c65e17d3c), [`6ccf67b`](https://github.com/mastra-ai/mastra/commit/6ccf67bf075753754927a57bc2e1734ba2c820c5), [`825d8de`](https://github.com/mastra-ai/mastra/commit/825d8def9fa64c2bcc3d8dd6b49e09342c3ac5c7), [`ffa09e7`](https://github.com/mastra-ai/mastra/commit/ffa09e772a5c92270eabe2090fc42d45bd8ec4b7), [`461a7c5`](https://github.com/mastra-ai/mastra/commit/461a7c501449295287f4f0ee4b0b42344f39fcf8), [`4211472`](https://github.com/mastra-ai/mastra/commit/4211472a5a2bd319c60cd2e42d9109c3eef7ac1c), [`9e45902`](https://github.com/mastra-ai/mastra/commit/9e4590208e745055cecca202e2db0e5c65e17d3c), [`5c0df77`](https://github.com/mastra-ai/mastra/commit/5c0df776c40efa420f8c07a2f3ee66010296618e)]:
+  - @mastra/core@1.47.0-alpha.3
+  - @mastra/client-js@1.28.0-alpha.3
+  - @mastra/react@1.1.2-alpha.3
+
+## 36.1.0-alpha.2
+
+### Minor Changes
+
+- Added a reusable environment variables editor with .env import, bulk paste support, and custom-row hook support. ([#18371](https://github.com/mastra-ai/mastra/pull/18371))
+
+  ```tsx
+  import { EnvironmentVariablesEditor, useEnvironmentVariablesEditor } from '@mastra/playground-ui';
+
+  function SettingsEnvVars() {
+    const editor = useEnvironmentVariablesEditor({
+      initialRows: [{ key: 'PUBLIC_BASE_URL', value: 'https://example.com' }],
+    });
+
+    return (
+      <EnvironmentVariablesEditor
+        editor={editor}
+        actions={
+          <button type="button" onClick={() => editor.getEnvironmentVariablesForSubmit()}>
+            Save
+          </button>
+        }
+      />
+    );
+  }
+  ```
+
+- Added sticky row headers to DataList. ([#18222](https://github.com/mastra-ai/mastra/pull/18222))
+
+  Use `sticky="start"` on the leading `DataList.TopCell` and render matching row cells with `DataList.RowHeaderCell`:
+
+  ```tsx
+  <DataList columns="auto auto auto" variant="lined">
+    <DataList.Top>
+      <DataList.TopCell sticky="start">Model</DataList.TopCell>
+      <DataList.TopCell>Input</DataList.TopCell>
+      <DataList.TopCell>Output</DataList.TopCell>
+    </DataList.Top>
+    <DataList.RowStatic>
+      <DataList.RowHeaderCell>Model A</DataList.RowHeaderCell>
+      <DataList.Cell>1,200</DataList.Cell>
+      <DataList.Cell>800</DataList.Cell>
+    </DataList.RowStatic>
+  </DataList>
+  ```
+
+  Metrics tables now render directly through DataList so sticky row headers share the same header colors and hover treatment as the rest of the list system. Metrics tables also follow the default DataList variant, and sticky row headers use the same neutral header treatment as column headers.
+
+  DataList now exposes `stickyHeaderBackground` to keep the top header and sticky row-header fill in sync, and forwards `mask` to the underlying ScrollArea so sticky-start tables can disable the left edge fade.
+
+  Added `DataList.NumberCell` for right-aligned numeric columns. It bakes in the tabular-figure, compact metric-table styling, with a `highlight` prop for the emphasized value:
+
+  ```tsx
+  <DataList.NumberCell>1,200</DataList.NumberCell>
+  <DataList.NumberCell highlight>$0.42</DataList.NumberCell>
+  ```
+
+  The metrics-specific `MetricsDataTable` wrapper was removed. Use DataList for DS-owned metrics table layouts.
+
+### Patch Changes
+
+- Fixed overlay content components to support Base UI positioning options. ([#18431](https://github.com/mastra-ai/mastra/pull/18431))
+
+- Move the Memory Studio (timeline, flamegraph, and observational-memory detail) into the agent chat view as an opt-in panel. ([#18272](https://github.com/mastra-ai/mastra/pull/18272))
+  - The standalone Memory nav entry, `/memory` routes, and the separate thread/chat list are removed; the studio is now opened from the chat view and shown inside the Memory sidepanel, with the agent layout's left resizable panel expanding when the detail opens. Clicking the flamegraph timeline drives a replay cursor that highlights the matching observational-memory record. Marker types are imported from `@mastra/memory` instead of being redeclared in the UI so the studio stays in sync with the stream format.
+  - `MemoryStudioPanel` gains an optional `contextWindow` prop so callers can supply authoritative message/observation token counts and thresholds; when provided these take precedence over values re-derived from message markers, keeping the panel's MESSAGES/OBSERVATIONS readout in sync with the observational-memory sidebar (marker-derived values remain the fallback for standalone usage).
+  - `MemoryStudioPanel` now shows both Messages and Observations progress bars, matching the collapsed memory sidebar. The FlameGraph zoom range is lifted into the panel and filters the observation list: collapsing the range hides out-of-range observations and "Reset zoom" restores the full list. `FlameGraph` gains optional controlled `zoomRange`/`onZoomRangeChange` props (uncontrolled usage is unchanged).
+
+- Updated dependencies [[`86623c1`](https://github.com/mastra-ai/mastra/commit/86623c1adf7d22de32cc916dda17f4155184db36), [`7c9dd77`](https://github.com/mastra-ai/mastra/commit/7c9dd77bd18cb8dc72797e25f1a0fbdc71a11347), [`9990965`](https://github.com/mastra-ai/mastra/commit/999096571635a83b42ef40841fd7028cfa630779), [`c0ffa3c`](https://github.com/mastra-ai/mastra/commit/c0ffa3c897ccd326de880df734740a7f0681a18f), [`0504bf5`](https://github.com/mastra-ai/mastra/commit/0504bf5e8cffc571a4b343326178de371e6f859b), [`5afe423`](https://github.com/mastra-ai/mastra/commit/5afe423e4badf040f1b0d4525183a856fcb8146e), [`86623c1`](https://github.com/mastra-ai/mastra/commit/86623c1adf7d22de32cc916dda17f4155184db36), [`8c9f1c0`](https://github.com/mastra-ai/mastra/commit/8c9f1c0361d89066f9bcd14a2f69e761b01766c8)]:
+  - @mastra/core@1.47.0-alpha.2
+  - @mastra/client-js@1.27.1-alpha.2
+  - @mastra/react@1.1.2-alpha.2
+
 ## 36.1.0-alpha.1
 
 ### Minor Changes

package/dist/Avatar-DWt9SxCq.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Txt = require('./Txt-BT8_EkuZ.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils_cn = require('./cn-vA5sWo9W.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],
+        "border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        !showFallbackTint && "bg-surface3",
+        transitions.transitions.all,
+        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
+      ),
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover", onError: () => setDidError(true) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        Txt.Txt,
+        {
+          variant: "ui-md",
+          className: utils_cn.cn("text-center", !showFallbackTint && "text-neutral4"),
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+};
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar-DWt9SxCq.cjs.map

package/dist/Avatar-DWt9SxCq.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-DWt9SxCq.cjs","sources":["../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Txt } from '../Txt';\nimport { transitions } 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        'border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center',\n        !showFallbackTint && 'bg-surface3',\n        transitions.all,\n        interactive && 'cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"h-full w-full object-cover\" onError={() => setDidError(true)} />\n      ) : (\n        <Txt\n          variant=\"ui-md\"\n          className={cn('text-center', !showFallbackTint && 'text-neutral4')}\n          style={showFallbackTint && textColor ? { color: textColor } : undefined}\n        >\n          {initial}\n        </Txt>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","jsx","cn","transitions","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,8FAAA;AAAA,QACA,CAAC,gBAAA,IAAoB,aAAA;AAAA,QACrBC,uBAAA,CAAY,GAAA;AAAA,QACZ,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,4BAAA,EAA6B,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,GAAG,CAAA,mBAEnGA,cAAA;AAAA,QAACG,OAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,SAAA,EAAWF,WAAA,CAAG,aAAA,EAAe,CAAC,oBAAoB,eAAe,CAAA;AAAA,UACjE,OAAO,gBAAA,IAAoB,SAAA,GAAY,EAAE,KAAA,EAAO,WAAU,GAAI,MAAA;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ;;;;"}

package/dist/Avatar-t2EzDraN.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { T as Txt } from './Txt-p33XTnu8.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './cn-BakJzhuv.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],
+        "border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        !showFallbackTint && "bg-surface3",
+        transitions.all,
+        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
+      ),
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsx("img", { src, alt: name, className: "h-full w-full object-cover", onError: () => setDidError(true) }) : /* @__PURE__ */ jsx(
+        Txt,
+        {
+          variant: "ui-md",
+          className: cn("text-center", !showFallbackTint && "text-neutral4"),
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+};
+
+export { Avatar as A };
+//# sourceMappingURL=Avatar-t2EzDraN.js.map

package/dist/Avatar-t2EzDraN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-t2EzDraN.js","sources":["../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Txt } from '../Txt';\nimport { transitions } 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        'border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center',\n        !showFallbackTint && 'bg-surface3',\n        transitions.all,\n        interactive && 'cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"h-full w-full object-cover\" onError={() => setDidError(true)} />\n      ) : (\n        <Txt\n          variant=\"ui-md\"\n          className={cn('text-center', !showFallbackTint && 'text-neutral4')}\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,8FAAA;AAAA,QACA,CAAC,gBAAA,IAAoB,aAAA;AAAA,QACrB,WAAA,CAAY,GAAA;AAAA,QACZ,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,4BAAA,EAA6B,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,GAAG,CAAA,mBAEnG,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,CAAC,oBAAoB,eAAe,CAAA;AAAA,UACjE,OAAO,gBAAA,IAAoB,SAAA,GAAY,EAAE,KAAA,EAAO,WAAU,GAAI,MAAA;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ;;;;"}

package/dist/Badge-COWZ8pf7.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const index = require('./index-C-Lt4Bx_.cjs');
+const Icon = require('./Icon-xYD5TR12.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+const badgeVariants = index.cva("font-mono inline-flex w-fit max-w-full items-center rounded-full border shrink-0", {
+  variants: {
+    variant: {
+      default: "text-neutral5 bg-surface4 border-border1",
+      success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
+      error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
+      info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
+      warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
+    },
+    size: {
+      md: "h-badge-default text-ui-sm gap-1",
+      sm: "h-form-xs text-ui-xs gap-1",
+      xs: "h-5 text-ui-xs gap-0.5"
+    },
+    withIcon: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { size: "md", withIcon: false, className: "px-2.5" },
+    { size: "md", withIcon: true, className: "pl-2 pr-2.5" },
+    { size: "sm", withIcon: false, className: "px-2" },
+    { size: "sm", withIcon: true, className: "pl-1.5 pr-2" },
+    { size: "xs", withIcon: false, className: "px-1.5" },
+    { size: "xs", withIcon: true, className: "pl-1 pr-1.5" }
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    withIcon: false
+  }
+});
+const Badge = ({ icon, variant, size, className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(badgeVariants({ variant, size, withIcon: Boolean(icon) }), transitions.transitions.colors, className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "sm", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge-COWZ8pf7.cjs.map

package/dist/Badge-COWZ8pf7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-COWZ8pf7.cjs","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva('font-mono inline-flex w-fit max-w-full items-center rounded-full border shrink-0', {\n  variants: {\n    variant: {\n      default: 'text-neutral5 bg-surface4 border-border1',\n      success: 'text-notice-success-fg bg-notice-success/20 border-notice-success/20',\n      error: 'text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20',\n      info: 'text-notice-info-fg bg-notice-info/20 border-notice-info/20',\n      warning: 'text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20',\n    },\n    size: {\n      md: 'h-badge-default text-ui-sm gap-1',\n      sm: 'h-form-xs text-ui-xs gap-1',\n      xs: 'h-5 text-ui-xs gap-0.5',\n    },\n    withIcon: {\n      true: '',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    { size: 'md', withIcon: false, className: 'px-2.5' },\n    { size: 'md', withIcon: true, className: 'pl-2 pr-2.5' },\n    { size: 'sm', withIcon: false, className: 'px-2' },\n    { size: 'sm', withIcon: true, className: 'pl-1.5 pr-2' },\n    { size: 'xs', withIcon: false, className: 'px-1.5' },\n    { size: 'xs', withIcon: true, className: 'pl-1 pr-1.5' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    withIcon: false,\n  },\n});\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof badgeVariants>, 'withIcon'> {\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nexport const Badge = ({ icon, variant, size, className, children, ...props }: BadgeProps) => {\n  return (\n    <div\n      className={cn(badgeVariants({ variant, size, withIcon: Boolean(icon) }), transitions.colors, className)}\n      {...props}\n    >\n      {icon && <Icon size=\"sm\">{icon}</Icon>}\n      {children}\n    </div>\n  );\n};\n"],"names":["cva","jsxs","cn","transitions","jsx","Icon"],"mappings":";;;;;;;;AAQA,MAAM,aAAA,GAAgBA,UAAI,kFAAA,EAAoF;AAAA,EAC5G,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,0CAAA;AAAA,MACT,OAAA,EAAS,sEAAA;AAAA,MACT,KAAA,EAAO,kFAAA;AAAA,MACP,IAAA,EAAM,6DAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,kCAAA;AAAA,MACJ,EAAA,EAAI,4BAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,WAAW,QAAA,EAAS;AAAA,IACnD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,WAAW,aAAA,EAAc;AAAA,IACvD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,WAAW,MAAA,EAAO;AAAA,IACjD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,WAAW,aAAA,EAAc;AAAA,IACvD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,WAAW,QAAA,EAAS;AAAA,IACnD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,WAAW,aAAA;AAAc,GACzD;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,IAAA,EAAM,IAAA;AAAA,IACN,QAAA,EAAU;AAAA;AAEd,CAAC,CAAA;AAQM,MAAM,KAAA,GAAQ,CAAC,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,KAAkB;AAC3F,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA,CAAG,aAAA,CAAc,EAAE,SAAS,IAAA,EAAM,QAAA,EAAU,OAAA,CAAQ,IAAI,CAAA,EAAG,CAAA,EAAGC,uBAAA,CAAY,QAAQ,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQC,cAAA,CAACC,SAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/Badge-uc10IvHk.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as cva } from './index-CSm06eOE.js';
+import { I as Icon } from './Icon-BAgNsQRj.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const badgeVariants = cva("font-mono inline-flex w-fit max-w-full items-center rounded-full border shrink-0", {
+  variants: {
+    variant: {
+      default: "text-neutral5 bg-surface4 border-border1",
+      success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
+      error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
+      info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
+      warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
+    },
+    size: {
+      md: "h-badge-default text-ui-sm gap-1",
+      sm: "h-form-xs text-ui-xs gap-1",
+      xs: "h-5 text-ui-xs gap-0.5"
+    },
+    withIcon: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { size: "md", withIcon: false, className: "px-2.5" },
+    { size: "md", withIcon: true, className: "pl-2 pr-2.5" },
+    { size: "sm", withIcon: false, className: "px-2" },
+    { size: "sm", withIcon: true, className: "pl-1.5 pr-2" },
+    { size: "xs", withIcon: false, className: "px-1.5" },
+    { size: "xs", withIcon: true, className: "pl-1 pr-1.5" }
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    withIcon: false
+  }
+});
+const Badge = ({ icon, variant, size, className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(badgeVariants({ variant, size, withIcon: Boolean(icon) }), transitions.colors, className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+export { Badge as B };
+//# sourceMappingURL=Badge-uc10IvHk.js.map

package/dist/Badge-uc10IvHk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-uc10IvHk.js","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva('font-mono inline-flex w-fit max-w-full items-center rounded-full border shrink-0', {\n  variants: {\n    variant: {\n      default: 'text-neutral5 bg-surface4 border-border1',\n      success: 'text-notice-success-fg bg-notice-success/20 border-notice-success/20',\n      error: 'text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20',\n      info: 'text-notice-info-fg bg-notice-info/20 border-notice-info/20',\n      warning: 'text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20',\n    },\n    size: {\n      md: 'h-badge-default text-ui-sm gap-1',\n      sm: 'h-form-xs text-ui-xs gap-1',\n      xs: 'h-5 text-ui-xs gap-0.5',\n    },\n    withIcon: {\n      true: '',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    { size: 'md', withIcon: false, className: 'px-2.5' },\n    { size: 'md', withIcon: true, className: 'pl-2 pr-2.5' },\n    { size: 'sm', withIcon: false, className: 'px-2' },\n    { size: 'sm', withIcon: true, className: 'pl-1.5 pr-2' },\n    { size: 'xs', withIcon: false, className: 'px-1.5' },\n    { size: 'xs', withIcon: true, className: 'pl-1 pr-1.5' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    withIcon: false,\n  },\n});\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof badgeVariants>, 'withIcon'> {\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nexport const Badge = ({ icon, variant, size, className, children, ...props }: BadgeProps) => {\n  return (\n    <div\n      className={cn(badgeVariants({ variant, size, withIcon: Boolean(icon) }), transitions.colors, className)}\n      {...props}\n    >\n      {icon && <Icon size=\"sm\">{icon}</Icon>}\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,aAAA,GAAgB,IAAI,kFAAA,EAAoF;AAAA,EAC5G,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,0CAAA;AAAA,MACT,OAAA,EAAS,sEAAA;AAAA,MACT,KAAA,EAAO,kFAAA;AAAA,MACP,IAAA,EAAM,6DAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,kCAAA;AAAA,MACJ,EAAA,EAAI,4BAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,WAAW,QAAA,EAAS;AAAA,IACnD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,WAAW,aAAA,EAAc;AAAA,IACvD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,WAAW,MAAA,EAAO;AAAA,IACjD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,WAAW,aAAA,EAAc;AAAA,IACvD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,WAAW,QAAA,EAAS;AAAA,IACnD,EAAE,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,WAAW,aAAA;AAAc,GACzD;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,IAAA,EAAM,IAAA;AAAA,IACN,QAAA,EAAU;AAAA;AAEd,CAAC,CAAA;AAQM,MAAM,KAAA,GAAQ,CAAC,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,KAAkB;AAC3F,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,aAAA,CAAc,EAAE,SAAS,IAAA,EAAM,QAAA,EAAU,OAAA,CAAQ,IAAI,CAAA,EAAG,CAAA,EAAG,WAAA,CAAY,QAAQ,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/Breadcrumb--hRsY96j.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { I as Icon } from './Icon-BAgNsQRj.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const SlashIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label, className, listClassName }) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className, children: /* @__PURE__ */ jsx("ol", { className: cn("gap-0.5 flex items-center", listClassName), children }) });
+};
+const Crumb = ({ className, as, isCurrent, action, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("li", { className: cn("flex h-full min-w-0 items-center gap-1", isCurrent ? "shrink" : "shrink-0"), children: [
+      /* @__PURE__ */ jsx(
+        Root,
+        {
+          "aria-current": isCurrent ? "page" : void 0,
+          className: cn(
+            "text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate",
+            transitions.colors,
+            isCurrent ? "text-neutral6 font-medium" : "text-neutral3 hover:text-neutral5",
+            className
+          ),
+          ...props
+        }
+      ),
+      action
+    ] }),
+    !isCurrent && /* @__PURE__ */ jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+export { Breadcrumb as B, Crumb as C, SlashIcon as S };
+//# sourceMappingURL=Breadcrumb--hRsY96j.js.map

package/dist/Breadcrumb--hRsY96j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb--hRsY96j.js","sources":["../src/ds/icons/SlashIcon.tsx","../src/ds/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SlashIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path d=\"M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z\" fill=\"currentColor\" />\n  </svg>\n);\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('gap-0.5 flex items-center', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children: React.ReactNode;\n  action?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const Crumb = ({ className, as, isCurrent, action, ...props }: CrumbProps) => {\n  const Root = as || 'span';\n\n  return (\n    <>\n      <li className={cn('flex h-full min-w-0 items-center gap-1', isCurrent ? 'shrink' : 'shrink-0')}>\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            'text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate',\n            transitions.colors,\n            isCurrent ? 'text-neutral6 font-medium' : 'text-neutral3 hover:text-neutral5',\n            className,\n          )}\n          {...props}\n        />\n        {action}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className={cn('text-neutral2', transitions.colors)}>\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAEO,MAAM,SAAA,GAAY,CAAC,KAAA,qBACxB,GAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EACjG,QAAA,kBAAA,GAAA,CAAC,UAAK,CAAA,EAAE,kEAAA,EAAmE,IAAA,EAAK,cAAA,EAAe,CAAA,EACjG;;ACSK,MAAM,aAAa,CAAC,EAAE,UAAU,KAAA,EAAO,SAAA,EAAW,eAAc,KAAuB;AAC5F,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAY,KAAA,EAAO,SAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,aAAa,CAAA,EAAI,UAAS,CAAA,EAC3E,CAAA;AAEJ;AAaO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,IAAI,SAAA,EAAW,MAAA,EAAQ,GAAG,KAAA,EAAM,KAAkB;AACnF,EAAA,MAAM,OAAO,EAAA,IAAM,MAAA;AAEnB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAG,SAAA,EAAW,EAAA,CAAG,0CAA0C,SAAA,GAAY,QAAA,GAAW,UAAU,CAAA,EAC3F,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,cAAA,EAAc,YAAY,MAAA,GAAS,MAAA;AAAA,UACnC,SAAA,EAAW,EAAA;AAAA,YACT,mEAAA;AAAA,YACA,WAAA,CAAY,MAAA;AAAA,YACZ,YAAY,2BAAA,GAA8B,mCAAA;AAAA,YAC1C;AAAA,WACF;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,IACC,CAAC,SAAA,oBACA,GAAA,CAAC,QAAG,IAAA,EAAK,WAAA,EAAY,WAAU,0BAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,QAAK,SAAA,EAAW,EAAA,CAAG,iBAAiB,WAAA,CAAY,MAAM,GACrD,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,GACb,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/Breadcrumb-D7lcwKK6.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Icon = require('./Icon-xYD5TR12.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+const SlashIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label, className, listClassName }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: utils_cn.cn("gap-0.5 flex items-center", listClassName), children }) });
+};
+const Crumb = ({ className, as, isCurrent, action, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("li", { className: utils_cn.cn("flex h-full min-w-0 items-center gap-1", isCurrent ? "shrink" : "shrink-0"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Root,
+        {
+          "aria-current": isCurrent ? "page" : void 0,
+          className: utils_cn.cn(
+            "text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate",
+            transitions.transitions.colors,
+            isCurrent ? "text-neutral6 font-medium" : "text-neutral3 hover:text-neutral5",
+            className
+          ),
+          ...props
+        }
+      ),
+      action
+    ] }),
+    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: utils_cn.cn("text-neutral2", transitions.transitions.colors), children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+exports.Breadcrumb = Breadcrumb;
+exports.Crumb = Crumb;
+exports.SlashIcon = SlashIcon;
+//# sourceMappingURL=Breadcrumb-D7lcwKK6.cjs.map

package/dist/Breadcrumb-D7lcwKK6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb-D7lcwKK6.cjs","sources":["../src/ds/icons/SlashIcon.tsx","../src/ds/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SlashIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path d=\"M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z\" fill=\"currentColor\" />\n  </svg>\n);\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('gap-0.5 flex items-center', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children: React.ReactNode;\n  action?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const Crumb = ({ className, as, isCurrent, action, ...props }: CrumbProps) => {\n  const Root = as || 'span';\n\n  return (\n    <>\n      <li className={cn('flex h-full min-w-0 items-center gap-1', isCurrent ? 'shrink' : 'shrink-0')}>\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            'text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate',\n            transitions.colors,\n            isCurrent ? 'text-neutral6 font-medium' : 'text-neutral3 hover:text-neutral5',\n            className,\n          )}\n          {...props}\n        />\n        {action}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className={cn('text-neutral2', transitions.colors)}>\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n"],"names":["jsx","cn","jsxs","Fragment","transitions","Icon"],"mappings":";;;;;;;AAEO,MAAM,SAAA,GAAY,CAAC,KAAA,qBACxBA,cAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EACjG,QAAA,kBAAAA,cAAA,CAAC,UAAK,CAAA,EAAE,kEAAA,EAAmE,IAAA,EAAK,cAAA,EAAe,CAAA,EACjG;;ACSK,MAAM,aAAa,CAAC,EAAE,UAAU,KAAA,EAAO,SAAA,EAAW,eAAc,KAAuB;AAC5F,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAY,KAAA,EAAO,SAAA,EACtB,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAWC,WAAA,CAAG,2BAAA,EAA6B,aAAa,CAAA,EAAI,UAAS,CAAA,EAC3E,CAAA;AAEJ;AAaO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,IAAI,SAAA,EAAW,MAAA,EAAQ,GAAG,KAAA,EAAM,KAAkB;AACnF,EAAA,MAAM,OAAO,EAAA,IAAM,MAAA;AAEnB,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,QAAG,SAAA,EAAWD,WAAA,CAAG,0CAA0C,SAAA,GAAY,QAAA,GAAW,UAAU,CAAA,EAC3F,QAAA,EAAA;AAAA,sBAAAD,cAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,cAAA,EAAc,YAAY,MAAA,GAAS,MAAA;AAAA,UACnC,SAAA,EAAWC,WAAA;AAAA,YACT,mEAAA;AAAA,YACAG,uBAAA,CAAY,MAAA;AAAA,YACZ,YAAY,2BAAA,GAA8B,mCAAA;AAAA,YAC1C;AAAA,WACF;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,IACC,CAAC,SAAA,oBACAJ,cAAA,CAAC,QAAG,IAAA,EAAK,WAAA,EAAY,WAAU,0BAAA,EAC7B,QAAA,kBAAAA,cAAA,CAACK,aAAK,SAAA,EAAWJ,WAAA,CAAG,iBAAiBG,uBAAA,CAAY,MAAM,GACrD,QAAA,kBAAAJ,cAAA,CAAC,SAAA,EAAA,EAAU,GACb,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;;;"}

package/dist/Button-BVNuv0IS.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const index = require('./index-C-Lt4Bx_.cjs');
+const React = require('react');
+const tooltip = require('./tooltip-fTKN3FCp.cjs');
+const Icon = require('./Icon-xYD5TR12.cjs');
+const controlSize = require('./control-size-D67C0kPZ.cjs');
+const formElement = require('./form-element-Cy7aV1Ds.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+const TEXT_MODE_ADORNMENTS = utils_cn.cn(
+  "gap-[.75em] rounded-full",
+  "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mx-[-.3em]",
+  "[&>svg]:opacity-50 [&:hover>svg]:opacity-100"
+);
+const buttonVariants = index.cva(
+  utils_cn.cn(
+    "inline-flex items-center justify-center leading-0 cursor-pointer",
+    "transition-all duration-normal ease-out-custom",
+    formElement.sharedFormElementDisabledStyle,
+    formElement.controlFocusBorderVisible
+  ),
+  {
+    variants: {
+      variant: {
+        default: "bg-surface3 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
+        primary: "bg-neutral6 border border-transparent hover:bg-neutral6/90 active:bg-neutral6/80 text-surface1 font-medium",
+        ghost: "bg-transparent border border-transparent hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10 text-neutral4",
+        outline: "bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5"
+      },
+      size: {
+        xs: utils_cn.cn(controlSize.controlSizeClasses.xs, "px-[.8em]", TEXT_MODE_ADORNMENTS),
+        sm: utils_cn.cn(controlSize.controlSizeClasses.sm, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        md: utils_cn.cn(controlSize.controlSizeClasses.md, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        lg: utils_cn.cn(controlSize.controlSizeClasses.default, "px-[1em]", TEXT_MODE_ADORNMENTS),
+        // Icon sizes: square dimensions, fully rounded → circle. Active state inherits from variant
+        // (e.g. `active:bg-surface5`) — same press feedback as text-mode for consistency.
+        "icon-xs": utils_cn.cn(controlSize.controlHeight.xs, "w-form-xs rounded-full"),
+        "icon-sm": utils_cn.cn(controlSize.controlHeight.sm, "w-form-sm rounded-full"),
+        "icon-md": utils_cn.cn(controlSize.controlHeight.md, "w-form-md rounded-full"),
+        "icon-lg": utils_cn.cn(controlSize.controlHeight.lg, "w-form-lg rounded-full")
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const iconChildSizeMap = {
+  "icon-xs": "sm",
+  "icon-sm": "sm",
+  "icon-md": "default",
+  "icon-lg": "lg"
+};
+function flattenChildren(children) {
+  const result = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === React.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.isValidElement(child));
+}
+function isIconButtonSize(size) {
+  return typeof size === "string" && size.startsWith("icon-");
+}
+const Button = React.forwardRef(
+  ({ className, as, size, variant = "default", disabled, children, tooltip: tooltip$1, "aria-label": ariaLabelProp, ...props }, ref) => {
+    const Component = as || "button";
+    const iconMode = isIconButtonSize(size);
+    const resolvedSize = size ?? "md";
+    const isLabelless = !iconMode && isIconOnly(children);
+    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip$1 === "string" ? tooltip$1 : void 0);
+    const content = iconMode ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconChildSizeMap[size], children }) : children;
+    const button = /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        disabled,
+        "aria-label": ariaLabel,
+        "data-variant": variant,
+        className: utils_cn.cn(buttonVariants({ variant, size: resolvedSize }), isLabelless && "[&>svg]:opacity-75", className),
+        ...props,
+        children: content
+      }
+    );
+    if (tooltip$1) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })
+      ] });
+    }
+    return button;
+  }
+);
+Button.displayName = "Button";
+
+exports.Button = Button;
+exports.buttonVariants = buttonVariants;
+//# sourceMappingURL=Button-BVNuv0IS.cjs.map

package/dist/Button-BVNuv0IS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-BVNuv0IS.cjs","sources":["../src/ds/components/Button/Button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlHeight, controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlFocusBorderVisible, sharedFormElementDisabledStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\n// Adornments for text-mode buttons: gap between icon+label, larger radius, and SVG sizing for\n// inline `<svg>` children. Excluded from icon-mode because icon-mode wraps children in `<Icon>`\n// (so `[&>svg]` selectors don't match) and uses its own `rounded-full` (circle).\nconst TEXT_MODE_ADORNMENTS = cn(\n  'gap-[.75em] rounded-full',\n  '[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mx-[-.3em]',\n  '[&>svg]:opacity-50 [&:hover>svg]:opacity-100',\n);\n\nexport const buttonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center leading-0 cursor-pointer',\n    'transition-all duration-normal ease-out-custom',\n    sharedFormElementDisabledStyle,\n    controlFocusBorderVisible,\n  ),\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-surface3 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6',\n        primary:\n          'bg-neutral6 border border-transparent hover:bg-neutral6/90 active:bg-neutral6/80 text-surface1 font-medium',\n        ghost:\n          'bg-transparent border border-transparent hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10 text-neutral4',\n        outline:\n          'bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5',\n      },\n      size: {\n        xs: cn(controlSizeClasses.xs, 'px-[.8em]', TEXT_MODE_ADORNMENTS),\n        sm: cn(controlSizeClasses.sm, 'px-[.9em]', TEXT_MODE_ADORNMENTS),\n        md: cn(controlSizeClasses.md, 'px-[.9em]', TEXT_MODE_ADORNMENTS),\n        lg: cn(controlSizeClasses.default, 'px-[1em]', TEXT_MODE_ADORNMENTS),\n        // Icon sizes: square dimensions, fully rounded → circle. Active state inherits from variant\n        // (e.g. `active:bg-surface5`) — same press feedback as text-mode for consistency.\n        'icon-xs': cn(controlHeight.xs, 'w-form-xs rounded-full'),\n        'icon-sm': cn(controlHeight.sm, 'w-form-sm rounded-full'),\n        'icon-md': cn(controlHeight.md, 'w-form-md rounded-full'),\n        'icon-lg': cn(controlHeight.lg, 'w-form-lg rounded-full'),\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n);\n\n// Public types derived from cva — single source of truth. Adding a variant or size to\n// `buttonVariants` automatically updates these unions.\ntype ButtonVariantsProps = VariantProps<typeof buttonVariants>;\nexport type ButtonVariant = NonNullable<ButtonVariantsProps['variant']>;\nexport type ButtonSize = NonNullable<ButtonVariantsProps['size']>;\nexport type IconButtonSize = Extract<ButtonSize, `icon-${string}`>;\nexport type TextButtonSize = Exclude<ButtonSize, IconButtonSize>;\n\nexport interface ButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, ButtonVariantsProps {\n  as?: React.ElementType;\n  className?: string;\n  href?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children: React.ReactNode;\n  tooltip?: React.ReactNode;\n  target?: string;\n  type?: 'button' | 'submit' | 'reset';\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n// Button's icon-* sizes don't match `<Icon>`'s own size scale (`sm | default | lg`).\nconst iconChildSizeMap: Record<IconButtonSize, 'sm' | 'default' | 'lg'> = {\n  'icon-xs': 'sm',\n  'icon-sm': 'sm',\n  'icon-md': 'default',\n  'icon-lg': 'lg',\n};\n\n// Walks React children, expanding `<></>` fragments so `isIconOnly` can inspect the real\n// elements inside. `<Button><><Icon/></></Button>` should still count as icon-only.\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const result: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment) {\n      result.push(...flattenChildren(child.props.children));\n    } else {\n      result.push(child);\n    }\n  });\n  return result;\n}\n\n// True when every child is a React element (no text/label). Used in text-mode to brighten the\n// SVG of label-less buttons so the glyph reads stronger.\nfunction isIconOnly(children: React.ReactNode): boolean {\n  const flat = flattenChildren(children);\n  return flat.length > 0 && flat.every(child => React.isValidElement(child));\n}\n\n// Type guard: narrows `ButtonSize` to `IconButtonSize` so consumers (e.g. `iconChildSizeMap`)\n// can index into icon-only structures without a cast.\nfunction isIconButtonSize(size: ButtonSize | null | undefined): size is IconButtonSize {\n  return typeof size === 'string' && size.startsWith('icon-');\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { className, as, size, variant = 'default', disabled, children, tooltip, 'aria-label': ariaLabelProp, ...props },\n    ref,\n  ) => {\n    const Component = as || 'button';\n    const iconMode = isIconButtonSize(size);\n    const resolvedSize: ButtonSize = size ?? 'md';\n    const isLabelless = !iconMode && isIconOnly(children);\n\n    // Icon-only buttons need an a11y label. If a string tooltip is provided, reuse it.\n    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip === 'string' ? tooltip : undefined);\n\n    const content = iconMode ? <Icon size={iconChildSizeMap[size as IconButtonSize]}>{children}</Icon> : children;\n\n    const button = (\n      <Component\n        ref={ref}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        // Expose the variant so a parent ButtonsGroup can detect FILLED segments in CSS\n        // (filled buttons have an opaque background that hides a border seam, so the group\n        // paints their divider as an inset box-shadow instead — see buttons-group.tsx).\n        data-variant={variant}\n        className={cn(buttonVariants({ variant, size: resolvedSize }), isLabelless && '[&>svg]:opacity-75', className)}\n        {...props}\n      >\n        {content}\n      </Component>\n    );\n\n    if (tooltip) {\n      return (\n        <Tooltip>\n          <TooltipTrigger asChild>{button}</TooltipTrigger>\n          <TooltipContent>{tooltip}</TooltipContent>\n        </Tooltip>\n      );\n    }\n\n    return button;\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["cn","cva","sharedFormElementDisabledStyle","controlFocusBorderVisible","controlSizeClasses","controlHeight","tooltip","jsx","Icon","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}