@mastra/playground-ui 33.0.0-alpha.2 → 33.0.0-alpha.4

package/dist/chip-Cx5D5DkA.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const sizeClasses = {
+  small: "text-[10.5px]   pt-[5px] pb-[4px]",
+  default: "text-[11.5px] pt-[5px] pb-[4px] ",
+  large: "text-[12.5px]   pt-[5px] pb-[4px] "
+};
+const bgColorClasses = {
+  gray: {
+    bright: "bg-neutral-500/30",
+    muted: "bg-neutral-500/10"
+  },
+  red: { bright: "bg-red-500/30", muted: "bg-red-500/10" },
+  orange: {
+    bright: "bg-orange-500/30",
+    muted: "bg-orange-500/10"
+  },
+  blue: { bright: "bg-blue-500/30", muted: "bg-blue-500/10" },
+  green: { bright: "bg-green-500/30", muted: "bg-green-500/10" },
+  purple: {
+    bright: "bg-purple-500/30",
+    muted: "bg-purple-500/10"
+  },
+  yellow: {
+    bright: "bg-yellow-500/30",
+    muted: "bg-yellow-500/10"
+  },
+  cyan: { bright: "bg-cyan-500/30", muted: "bg-cyan-500/10" },
+  pink: { bright: "bg-pink-500/30", muted: "bg-pink-500/10" }
+};
+const txtIntensityClasses = {
+  bright: "text-neutral4/90",
+  muted: "text-neutral3/90"
+};
+const Chip = ({
+  color = "gray",
+  size = "default",
+  intensity = "bright",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils.cn(
+        "inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal",
+        // general styles for svg icons within the chip
+        "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]",
+        // if the chip has only one child and it's an svg, make it fully opaque
+        "[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100",
+        sizeClasses[size],
+        bgColorClasses[color][intensity],
+        txtIntensityClasses[intensity],
+        className
+      ),
+      style: { lineHeight: 1 },
+      ...props,
+      children
+    }
+  );
+};
+
+exports.Chip = Chip;
+//# sourceMappingURL=chip-Cx5D5DkA.cjs.map

package/dist/chip-Cx5D5DkA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-Cx5D5DkA.cjs","sources":["../src/ds/components/Chip/chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst sizeClasses = {\n  small: 'text-[10.5px]   pt-[5px] pb-[4px]',\n  default: 'text-[11.5px] pt-[5px] pb-[4px] ',\n  large: 'text-[12.5px]   pt-[5px] pb-[4px] ',\n};\n\nconst bgColorClasses = {\n  gray: {\n    bright: 'bg-neutral-500/30',\n    muted: 'bg-neutral-500/10',\n  },\n  red: { bright: 'bg-red-500/30', muted: 'bg-red-500/10' },\n  orange: {\n    bright: 'bg-orange-500/30',\n    muted: 'bg-orange-500/10',\n  },\n  blue: { bright: 'bg-blue-500/30', muted: 'bg-blue-500/10' },\n  green: { bright: 'bg-green-500/30', muted: 'bg-green-500/10' },\n  purple: {\n    bright: 'bg-purple-500/30',\n    muted: 'bg-purple-500/10',\n  },\n  yellow: {\n    bright: 'bg-yellow-500/30',\n    muted: 'bg-yellow-500/10',\n  },\n  cyan: { bright: 'bg-cyan-500/30', muted: 'bg-cyan-500/10' },\n  pink: { bright: 'bg-pink-500/30', muted: 'bg-pink-500/10' },\n};\n\nconst txtIntensityClasses = {\n  bright: 'text-neutral4/90',\n  muted: 'text-neutral3/90',\n};\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: 'gray' | 'red' | 'orange' | 'blue' | 'green' | 'purple' | 'yellow' | 'cyan' | 'pink';\n  size?: 'small' | 'default' | 'large';\n  intensity?: 'bright' | 'muted';\n  children: React.ReactNode;\n}\n\nexport const Chip = ({\n  color = 'gray',\n  size = 'default',\n  intensity = 'bright',\n  className,\n  children,\n  ...props\n}: ChipProps) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal',\n        // general styles for svg icons within the chip\n        '[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]',\n        // if the chip has only one child and it's an svg, make it fully opaque\n        '[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100',\n        sizeClasses[size],\n        bgColorClasses[color][intensity],\n        txtIntensityClasses[intensity],\n        className,\n      )}\n      style={{ lineHeight: 1 }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["jsx","cn"],"mappings":";;;;;AAIA,MAAM,WAAA,GAAc;AAAA,EAClB,KAAA,EAAO,mCAAA;AAAA,EACP,OAAA,EAAS,kCAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,MAAM,cAAA,GAAiB;AAAA,EACrB,IAAA,EAAM;AAAA,IACJ,MAAA,EAAQ,mBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,GAAA,EAAK,EAAE,MAAA,EAAQ,eAAA,EAAiB,OAAO,eAAA,EAAgB;AAAA,EACvD,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,KAAA,EAAO,EAAE,MAAA,EAAQ,iBAAA,EAAmB,OAAO,iBAAA,EAAkB;AAAA,EAC7D,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA;AAC3C,CAAA;AAEA,MAAM,mBAAA,GAAsB;AAAA,EAC1B,MAAA,EAAQ,kBAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAA;AASO,MAAM,OAAO,CAAC;AAAA,EACnB,KAAA,GAAQ,MAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAiB;AACf,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA;AAAA,QACT,4FAAA;AAAA;AAAA,QAEA,mFAAA;AAAA;AAAA,QAEA,+DAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChB,cAAA,CAAe,KAAK,CAAA,CAAE,SAAS,CAAA;AAAA,QAC/B,oBAAoB,SAAS,CAAA;AAAA,QAC7B;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,UAAA,EAAY,CAAA,EAAE;AAAA,MACtB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/chip-Dgrpa03p.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const sizeClasses = {
+  small: "text-[10.5px]   pt-[5px] pb-[4px]",
+  default: "text-[11.5px] pt-[5px] pb-[4px] ",
+  large: "text-[12.5px]   pt-[5px] pb-[4px] "
+};
+const bgColorClasses = {
+  gray: {
+    bright: "bg-neutral-500/30",
+    muted: "bg-neutral-500/10"
+  },
+  red: { bright: "bg-red-500/30", muted: "bg-red-500/10" },
+  orange: {
+    bright: "bg-orange-500/30",
+    muted: "bg-orange-500/10"
+  },
+  blue: { bright: "bg-blue-500/30", muted: "bg-blue-500/10" },
+  green: { bright: "bg-green-500/30", muted: "bg-green-500/10" },
+  purple: {
+    bright: "bg-purple-500/30",
+    muted: "bg-purple-500/10"
+  },
+  yellow: {
+    bright: "bg-yellow-500/30",
+    muted: "bg-yellow-500/10"
+  },
+  cyan: { bright: "bg-cyan-500/30", muted: "bg-cyan-500/10" },
+  pink: { bright: "bg-pink-500/30", muted: "bg-pink-500/10" }
+};
+const txtIntensityClasses = {
+  bright: "text-neutral4/90",
+  muted: "text-neutral3/90"
+};
+const Chip = ({
+  color = "gray",
+  size = "default",
+  intensity = "bright",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal",
+        // general styles for svg icons within the chip
+        "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]",
+        // if the chip has only one child and it's an svg, make it fully opaque
+        "[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100",
+        sizeClasses[size],
+        bgColorClasses[color][intensity],
+        txtIntensityClasses[intensity],
+        className
+      ),
+      style: { lineHeight: 1 },
+      ...props,
+      children
+    }
+  );
+};
+
+export { Chip as C };
+//# sourceMappingURL=chip-Dgrpa03p.js.map

package/dist/chip-Dgrpa03p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-Dgrpa03p.js","sources":["../src/ds/components/Chip/chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst sizeClasses = {\n  small: 'text-[10.5px]   pt-[5px] pb-[4px]',\n  default: 'text-[11.5px] pt-[5px] pb-[4px] ',\n  large: 'text-[12.5px]   pt-[5px] pb-[4px] ',\n};\n\nconst bgColorClasses = {\n  gray: {\n    bright: 'bg-neutral-500/30',\n    muted: 'bg-neutral-500/10',\n  },\n  red: { bright: 'bg-red-500/30', muted: 'bg-red-500/10' },\n  orange: {\n    bright: 'bg-orange-500/30',\n    muted: 'bg-orange-500/10',\n  },\n  blue: { bright: 'bg-blue-500/30', muted: 'bg-blue-500/10' },\n  green: { bright: 'bg-green-500/30', muted: 'bg-green-500/10' },\n  purple: {\n    bright: 'bg-purple-500/30',\n    muted: 'bg-purple-500/10',\n  },\n  yellow: {\n    bright: 'bg-yellow-500/30',\n    muted: 'bg-yellow-500/10',\n  },\n  cyan: { bright: 'bg-cyan-500/30', muted: 'bg-cyan-500/10' },\n  pink: { bright: 'bg-pink-500/30', muted: 'bg-pink-500/10' },\n};\n\nconst txtIntensityClasses = {\n  bright: 'text-neutral4/90',\n  muted: 'text-neutral3/90',\n};\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: 'gray' | 'red' | 'orange' | 'blue' | 'green' | 'purple' | 'yellow' | 'cyan' | 'pink';\n  size?: 'small' | 'default' | 'large';\n  intensity?: 'bright' | 'muted';\n  children: React.ReactNode;\n}\n\nexport const Chip = ({\n  color = 'gray',\n  size = 'default',\n  intensity = 'bright',\n  className,\n  children,\n  ...props\n}: ChipProps) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal',\n        // general styles for svg icons within the chip\n        '[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]',\n        // if the chip has only one child and it's an svg, make it fully opaque\n        '[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100',\n        sizeClasses[size],\n        bgColorClasses[color][intensity],\n        txtIntensityClasses[intensity],\n        className,\n      )}\n      style={{ lineHeight: 1 }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,WAAA,GAAc;AAAA,EAClB,KAAA,EAAO,mCAAA;AAAA,EACP,OAAA,EAAS,kCAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,MAAM,cAAA,GAAiB;AAAA,EACrB,IAAA,EAAM;AAAA,IACJ,MAAA,EAAQ,mBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,GAAA,EAAK,EAAE,MAAA,EAAQ,eAAA,EAAiB,OAAO,eAAA,EAAgB;AAAA,EACvD,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,KAAA,EAAO,EAAE,MAAA,EAAQ,iBAAA,EAAmB,OAAO,iBAAA,EAAkB;AAAA,EAC7D,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA;AAC3C,CAAA;AAEA,MAAM,mBAAA,GAAsB;AAAA,EAC1B,MAAA,EAAQ,kBAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAA;AASO,MAAM,OAAO,CAAC;AAAA,EACnB,KAAA,GAAQ,MAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAiB;AACf,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4FAAA;AAAA;AAAA,QAEA,mFAAA;AAAA;AAAA,QAEA,+DAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChB,cAAA,CAAe,KAAK,CAAA,CAAE,SAAS,CAAA;AAAA,QAC/B,oBAAoB,SAAS,CAAA;AAAA,QAC7B;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,UAAA,EAAY,CAAA,EAAE;AAAA,MACtB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/chips-group-CaxAKuxv.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const ChipsGroup = React.forwardRef(function ChipsGroup2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+exports.ChipsGroup = ChipsGroup;
+//# sourceMappingURL=chips-group-CaxAKuxv.cjs.map

package/dist/chips-group-CaxAKuxv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chips-group-CaxAKuxv.cjs","sources":["../src/ds/components/Chip/chips-group.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ChipsGroupProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ChipsGroup = forwardRef<HTMLDivElement, ChipsGroupProps>(function ChipsGroup(\n  { children, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","ChipsGroup","jsx","cn"],"mappings":";;;;;;AAKO,MAAM,UAAA,GAAaA,gBAAA,CAA4C,SAASC,WAAAA,CAC7E,EAAE,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAChC,GAAA,EACA;AACA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,QAAA;AAAA,QACT,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist/chips-group-DgaAmiHe.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const ChipsGroup = forwardRef(function ChipsGroup2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+export { ChipsGroup as C };
+//# sourceMappingURL=chips-group-DgaAmiHe.js.map

package/dist/chips-group-DgaAmiHe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chips-group-DgaAmiHe.js","sources":["../src/ds/components/Chip/chips-group.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ChipsGroupProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ChipsGroup = forwardRef<HTMLDivElement, ChipsGroupProps>(function ChipsGroup(\n  { children, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["ChipsGroup"],"mappings":";;;;AAKO,MAAM,UAAA,GAAa,UAAA,CAA4C,SAASA,WAAAA,CAC7E,EAAE,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAChC,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist/code-B3WONxnA.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const highlight = require('./highlight-C2uRVhiA.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function tokenStyle(token) {
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    return token.htmlStyle;
+  }
+  return token.color ? { color: token.color } : void 0;
+}
+const Code = React__namespace.memo(function Code2({ code, lang, ...props }) {
+  const [tokens, setTokens] = React__namespace.useState(null);
+  React__namespace.useEffect(() => {
+    setTokens(null);
+    if (!lang) return;
+    let cancelled = false;
+    void highlight.highlight(code, lang).then((result) => {
+      if (!cancelled) setTokens(result);
+    }).catch(() => {
+      if (!cancelled) setTokens(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, lang]);
+  if (!tokens?.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children: code });
+  }
+  let codeOffset = 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: tokens.map((line, lineIndex) => {
+    const lineOffset = codeOffset;
+    let tokenOffset = lineOffset;
+    const tokenSpans = line.map((token) => {
+      const key = tokenOffset;
+      tokenOffset += token.content.length;
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shiki-token", style: tokenStyle(token), children: token.content }, key);
+    });
+    codeOffset = tokenOffset + 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenSpans }),
+      lineIndex !== tokens.length - 1 && "\n"
+    ] }, lineOffset);
+  }) }) });
+});
+
+exports.Code = Code;
+//# sourceMappingURL=code-B3WONxnA.cjs.map

package/dist/code-B3WONxnA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-B3WONxnA.cjs","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n  code: string;\n  lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n  if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n    return token.htmlStyle as React.CSSProperties;\n  }\n\n  return token.color ? { color: token.color } : undefined;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n  const [tokens, setTokens] = React.useState<ThemedToken[][] | null>(null);\n\n  React.useEffect(() => {\n    setTokens(null);\n    if (!lang) return;\n\n    let cancelled = false;\n\n    void highlight(code, lang)\n      .then(result => {\n        if (!cancelled) setTokens(result);\n      })\n      .catch(() => {\n        if (!cancelled) setTokens(null);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, lang]);\n\n  if (!tokens?.length) {\n    return <pre {...props}>{code}</pre>;\n  }\n\n  let codeOffset = 0;\n\n  return (\n    <pre {...props}>\n      <code>\n        {tokens.map((line, lineIndex) => {\n          const lineOffset = codeOffset;\n          let tokenOffset = lineOffset;\n          const tokenSpans = line.map(token => {\n            const key = tokenOffset;\n            tokenOffset += token.content.length;\n\n            return (\n              <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n                {token.content}\n              </span>\n            );\n          });\n\n          codeOffset = tokenOffset + 1;\n\n          return (\n            <React.Fragment key={lineOffset}>\n              <span>{tokenSpans}</span>\n              {lineIndex !== tokens.length - 1 && '\\n'}\n            </React.Fragment>\n          );\n        })}\n      </code>\n    </pre>\n  );\n});\n"],"names":["React","Code","highlight","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AAUO,MAAM,IAAA,GAAOA,gBAAA,CAAM,IAAA,CAAK,SAASC,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAID,gBAAA,CAAM,SAAiC,IAAI,CAAA;AAEvE,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAKE,mBAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,MAAM,CAAA;AAAA,IAClC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,IAAI,CAAA;AAAA,IAChC,CAAC,CAAA;AAEH,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,IAAI,CAAC,QAAQ,MAAA,EAAQ;AACnB,IAAA,uBAAOC,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,QAAA,kBAAAA,cAAA,CAAC,UACE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AAC/B,IAAA,MAAM,UAAA,GAAa,UAAA;AACnB,IAAA,IAAI,WAAA,GAAc,UAAA;AAClB,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,MAAA,MAAM,GAAA,GAAM,WAAA;AACZ,MAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,MAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,IAEJ,CAAC,CAAA;AAED,IAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,IAAA,uBACEC,eAAA,CAACJ,gBAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,sBAAAG,cAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,MACjB,SAAA,KAAc,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFjB,UAGrB,CAAA;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/code-C5KVVzOZ.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { h as highlight } from './highlight-Dis62bkj.js';
+
+function tokenStyle(token) {
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    return token.htmlStyle;
+  }
+  return token.color ? { color: token.color } : void 0;
+}
+const Code = React.memo(function Code2({ code, lang, ...props }) {
+  const [tokens, setTokens] = React.useState(null);
+  React.useEffect(() => {
+    setTokens(null);
+    if (!lang) return;
+    let cancelled = false;
+    void highlight(code, lang).then((result) => {
+      if (!cancelled) setTokens(result);
+    }).catch(() => {
+      if (!cancelled) setTokens(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, lang]);
+  if (!tokens?.length) {
+    return /* @__PURE__ */ jsx("pre", { ...props, children: code });
+  }
+  let codeOffset = 0;
+  return /* @__PURE__ */ jsx("pre", { ...props, children: /* @__PURE__ */ jsx("code", { children: tokens.map((line, lineIndex) => {
+    const lineOffset = codeOffset;
+    let tokenOffset = lineOffset;
+    const tokenSpans = line.map((token) => {
+      const key = tokenOffset;
+      tokenOffset += token.content.length;
+      return /* @__PURE__ */ jsx("span", { className: "shiki-token", style: tokenStyle(token), children: token.content }, key);
+    });
+    codeOffset = tokenOffset + 1;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: tokenSpans }),
+      lineIndex !== tokens.length - 1 && "\n"
+    ] }, lineOffset);
+  }) }) });
+});
+
+export { Code as C };
+//# sourceMappingURL=code-C5KVVzOZ.js.map

package/dist/code-C5KVVzOZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-C5KVVzOZ.js","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n  code: string;\n  lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n  if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n    return token.htmlStyle as React.CSSProperties;\n  }\n\n  return token.color ? { color: token.color } : undefined;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n  const [tokens, setTokens] = React.useState<ThemedToken[][] | null>(null);\n\n  React.useEffect(() => {\n    setTokens(null);\n    if (!lang) return;\n\n    let cancelled = false;\n\n    void highlight(code, lang)\n      .then(result => {\n        if (!cancelled) setTokens(result);\n      })\n      .catch(() => {\n        if (!cancelled) setTokens(null);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, lang]);\n\n  if (!tokens?.length) {\n    return <pre {...props}>{code}</pre>;\n  }\n\n  let codeOffset = 0;\n\n  return (\n    <pre {...props}>\n      <code>\n        {tokens.map((line, lineIndex) => {\n          const lineOffset = codeOffset;\n          let tokenOffset = lineOffset;\n          const tokenSpans = line.map(token => {\n            const key = tokenOffset;\n            tokenOffset += token.content.length;\n\n            return (\n              <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n                {token.content}\n              </span>\n            );\n          });\n\n          codeOffset = tokenOffset + 1;\n\n          return (\n            <React.Fragment key={lineOffset}>\n              <span>{tokenSpans}</span>\n              {lineIndex !== tokens.length - 1 && '\\n'}\n            </React.Fragment>\n          );\n        })}\n      </code>\n    </pre>\n  );\n});\n"],"names":["Code"],"mappings":";;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AAUO,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,SAASA,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,KAAA,CAAM,SAAiC,IAAI,CAAA;AAEvE,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAK,SAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,MAAM,CAAA;AAAA,IAClC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,IAAI,CAAA;AAAA,IAChC,CAAC,CAAA;AAEH,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,IAAI,CAAC,QAAQ,MAAA,EAAQ;AACnB,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,QAAA,kBAAA,GAAA,CAAC,UACE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AAC/B,IAAA,MAAM,UAAA,GAAa,UAAA;AACnB,IAAA,IAAI,WAAA,GAAc,UAAA;AAClB,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,MAAA,MAAM,GAAA,GAAM,WAAA;AACZ,MAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,MAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,IAEJ,CAAC,CAAA;AAED,IAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,IAAA,uBACE,IAAA,CAAC,KAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,MACjB,SAAA,KAAc,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFjB,UAGrB,CAAA;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/code-block-53x4kvYO.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { C as Code } from './code-C5KVVzOZ.js';
+import { C as CopyButton } from './copy-button-DDKn1NUS.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-D2w0zRz4.js';
+import { b as Tabs, a as TabList, T as Tab } from './tabs-tab-Cjv_3xGC.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function CodeBlock({
+  code,
+  options,
+  value,
+  onValueChange,
+  selector = "select",
+  fileName,
+  lang,
+  overflow = "wrap",
+  copyMessage,
+  copyTooltip,
+  className
+}) {
+  const hasOptions = options && options.length > 0;
+  const useTabs = hasOptions && selector === "tabs";
+  const useSelect = hasOptions && selector === "select";
+  const activeValue = value ?? options?.[0]?.value;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(
+        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2",
+        className
+      ),
+      children: [
+        useTabs && options && /* @__PURE__ */ jsx(Tabs, { defaultTab: options[0].value, value: activeValue, onValueChange: onValueChange ?? (() => {
+        }), children: /* @__PURE__ */ jsx(TabList, { children: options.map((opt) => /* @__PURE__ */ jsx(Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
+        useSelect && options && /* @__PURE__ */ jsx("div", { className: "flex items-center border-b border-border2/40 px-2 py-1.5", children: /* @__PURE__ */ jsxs(Select, { value: activeValue, onValueChange, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+        ] }) }),
+        !hasOptions && fileName && /* @__PURE__ */ jsx("div", { className: "flex items-center border-b border-border2/40 px-4 py-2", children: /* @__PURE__ */ jsx("figcaption", { className: "font-mono text-ui-sm text-neutral4", children: fileName }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Code,
+            {
+              code,
+              lang,
+              className: cn(
+                "px-4 py-3 font-mono text-ui-sm text-neutral5",
+                overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "whitespace-pre-wrap break-all"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              content: code,
+              copyMessage,
+              tooltip: copyTooltip,
+              size: "sm",
+              className: cn(
+                "absolute top-2 right-2 opacity-100 pointer-fine:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
+                transitions.opacity
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { CodeBlock as C };
+//# sourceMappingURL=code-block-53x4kvYO.js.map

package/dist/code-block-53x4kvYO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-53x4kvYO.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import { Code } from '../Code';\nimport { CopyButton } from '../CopyButton';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select';\nimport { Tab, TabList, Tabs } from '../Tabs';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const activeValue = value ?? options?.[0]?.value;\n\n  return (\n    <figure\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n        className,\n      )}\n    >\n      {useTabs && options && (\n        <Tabs defaultTab={options[0].value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <TabList>\n            {options.map(opt => (\n              <Tab key={opt.value} value={opt.value}>\n                {opt.label}\n              </Tab>\n            ))}\n          </TabList>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"flex items-center border-b border-border2/40 px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"flex items-center border-b border-border2/40 px-4 py-2\">\n          <figcaption className=\"font-mono text-ui-sm text-neutral4\">{fileName}</figcaption>\n        </div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'whitespace-pre-wrap break-all',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 pointer-fine:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/code-block-UyWLLMZ0.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const code = require('./code-B3WONxnA.cjs');
+const copyButton = require('./copy-button-lrxHKwwi.cjs');
+const select = require('./select-DDgw1wG-.cjs');
+const tabsTab = require('./tabs-tab-Dl9FqQhm.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function CodeBlock({
+  code: code$1,
+  options,
+  value,
+  onValueChange,
+  selector = "select",
+  fileName,
+  lang,
+  overflow = "wrap",
+  copyMessage,
+  copyTooltip,
+  className
+}) {
+  const hasOptions = options && options.length > 0;
+  const useTabs = hasOptions && selector === "tabs";
+  const useSelect = hasOptions && selector === "select";
+  const activeValue = value ?? options?.[0]?.value;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "figure",
+    {
+      className: utils.cn(
+        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2",
+        className
+      ),
+      children: [
+        useTabs && options && /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tabs, { defaultTab: options[0].value, value: activeValue, onValueChange: onValueChange ?? (() => {
+        }), children: /* @__PURE__ */ jsxRuntime.jsx(tabsTab.TabList, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
+        useSelect && options && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b border-border2/40 px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: activeValue, onValueChange, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+        ] }) }),
+        !hasOptions && fileName && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b border-border2/40 px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "font-mono text-ui-sm text-neutral4", children: fileName }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            code.Code,
+            {
+              code: code$1,
+              lang,
+              className: utils.cn(
+                "px-4 py-3 font-mono text-ui-sm text-neutral5",
+                overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "whitespace-pre-wrap break-all"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            copyButton.CopyButton,
+            {
+              content: code$1,
+              copyMessage,
+              tooltip: copyTooltip,
+              size: "sm",
+              className: utils.cn(
+                "absolute top-2 right-2 opacity-100 pointer-fine:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
+                transitions.transitions.opacity
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.CodeBlock = CodeBlock;
+//# sourceMappingURL=code-block-UyWLLMZ0.cjs.map

package/dist/code-block-UyWLLMZ0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-UyWLLMZ0.cjs","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import { Code } from '../Code';\nimport { CopyButton } from '../CopyButton';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select';\nimport { Tab, TabList, Tabs } from '../Tabs';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const activeValue = value ?? options?.[0]?.value;\n\n  return (\n    <figure\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n        className,\n      )}\n    >\n      {useTabs && options && (\n        <Tabs defaultTab={options[0].value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <TabList>\n            {options.map(opt => (\n              <Tab key={opt.value} value={opt.value}>\n                {opt.label}\n              </Tab>\n            ))}\n          </TabList>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"flex items-center border-b border-border2/40 px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"flex items-center border-b border-border2/40 px-4 py-2\">\n          <figcaption className=\"font-mono text-ui-sm text-neutral4\">{fileName}</figcaption>\n        </div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'whitespace-pre-wrap break-all',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 pointer-fine:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}