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

package/dist/metrics-line-chart-D1ZGVepo.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium text-icon6", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-icon2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 inline-block size-2 rounded-full", style: { backgroundColor: entry.color } }),
+      entry.name,
+      ":",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+        entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+const LABEL_COLOR = "#a1a1aa";
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick
+}) {
+  const isClickable = typeof onPointClick === "function";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4 ", children: series.map((s) => {
+      const aggregated = s.aggregate?.(data);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 shrink-0 rounded-full -translate-y-px", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3 truncate max-w-24", children: s.label }),
+        aggregated && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm text-neutral4", children: [
+          aggregated.value,
+          aggregated.suffix && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm text-neutral2", children: [
+            " ",
+            aggregated.suffix
+          ] })
+        ] })
+      ] }, s.dataKey);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: 5
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: 30,
+          domain: yDomain
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChartTooltip, {}) }),
+      series.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Line,
+        {
+          type: "linear",
+          dataKey: s.dataKey,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: false,
+          activeDot: isClickable ? {
+            r: 4,
+            style: { cursor: "pointer" },
+            onClick: (_, payload) => {
+              const datum = payload?.payload;
+              if (datum) onPointClick(datum, s.dataKey);
+            }
+          } : void 0,
+          name: s.label
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+}
+
+exports.MetricsLineChart = MetricsLineChart;
+exports.MetricsLineChartTooltip = MetricsLineChartTooltip;
+//# sourceMappingURL=metrics-line-chart-D1ZGVepo.cjs.map

package/dist/metrics-line-chart-D1ZGVepo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-D1ZGVepo.cjs","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["export function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n}: {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color: string }>;\n  label?: string;\n  suffix?: string;\n}) {\n  if (!active || !payload?.length) return null;\n  return (\n    <div className=\"rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg\">\n      <p className=\"mb-1 font-medium text-icon6\">{label}</p>\n      {payload.map(entry => (\n        <p key={entry.name} className=\"text-icon2\">\n          <span className=\"mr-2 inline-block size-2 rounded-full\" style={{ backgroundColor: entry.color }} />\n          {entry.name}:{' '}\n          <span className=\"font-mono\">\n            {entry.value}\n            {suffix}\n          </span>\n        </p>\n      ))}\n    </div>\n  );\n}\n","import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\n\nconst LABEL_COLOR = '#a1a1aa';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  aggregate?: (data: Record<string, unknown>[]) => { value: string; suffix?: string };\n};\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport function MetricsLineChart({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  height?: number;\n  yDomain?: [number, number];\n  onPointClick?: MetricsLineChartPointClickHandler;\n}) {\n  const isClickable = typeof onPointClick === 'function';\n\n  return (\n    <div>\n      <div className=\"flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4 \">\n        {series.map(s => {\n          const aggregated = s.aggregate?.(data);\n          return (\n            <div key={s.dataKey} className=\"inline-flex items-baseline gap-2\">\n              <div className=\"size-2 shrink-0 rounded-full -translate-y-px\" style={{ backgroundColor: s.color }} />\n              <span className=\"text-ui-sm text-neutral3 truncate max-w-24\">{s.label}</span>\n              {aggregated && (\n                <span className=\"text-ui-sm text-neutral4\">\n                  {aggregated.value}\n                  {aggregated.suffix && <span className=\"text-ui-sm text-neutral2\"> {aggregated.suffix}</span>}\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart data={data}>\n            <CartesianGrid\n              stroke=\"currentColor\"\n              strokeOpacity={0.08}\n              vertical={false}\n              className=\"text-black dark:text-white\"\n            />\n            <XAxis\n              dataKey=\"time\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              interval={5}\n            />\n            <YAxis\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={30}\n              domain={yDomain}\n            />\n            <Tooltip content={<MetricsLineChartTooltip />} />\n            {series.map(s => (\n              <Line\n                key={s.dataKey}\n                type=\"linear\"\n                dataKey={s.dataKey}\n                stroke={s.color}\n                strokeWidth={2}\n                dot={false}\n                activeDot={\n                  isClickable\n                    ? {\n                        r: 4,\n                        style: { cursor: 'pointer' },\n                        onClick: (_: unknown, payload: unknown) => {\n                          const datum = (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n                          if (datum) onPointClick(datum, s.dataKey);\n                        },\n                      }\n                    : undefined\n                }\n                name={s.label}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","ResponsiveContainer","LineChart","CartesianGrid","XAxis","YAxis","Tooltip","Line"],"mappings":"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"}

package/dist/multi-column-BzL86JPK.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+require('./index.css');const jsxRuntime = require('react/jsx-runtime');
+;/* empty css                 */
+require('@base-ui/react/combobox');
+require('./components/DataDetailsPanel.cjs.js');
+const utils = require('./utils-vA5sWo9W.cjs');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Button = require('./Button-DpIX8JMz.cjs');
+
+function ColumnContent({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(`grid overflow-y-auto gap-8 content-start`, className), children });
+}
+
+function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex overflow-y-auto w-full", children: [
+    withLeftSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(`grid gap-8 content-start w-full overflow-y-auto`, className), children }),
+    withRightSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator, {})
+  ] });
+}
+function Separator() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("bg-surface5 w-[3px] shrink-0 mx-[1.5vw]") });
+}
+
+function ColumnToolbar({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className), children });
+}
+
+const Column = Object.assign(ColumnRoot, {
+  Content: ColumnContent,
+  Toolbar: ColumnToolbar
+});
+
+function Columns({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className), children });
+}
+
+function MultiColumn({ children, numOfColumns = 1, minColumnWidth }) {
+  const scrollRef = React.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(false);
+  const updateScrollState = React.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setCanScrollLeft(scrollLeft > 1);
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+  }, []);
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    updateScrollState();
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState]);
+  const prevColumnsRef = React.useRef(numOfColumns);
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (numOfColumns > prevColumnsRef.current) {
+      requestAnimationFrame(() => {
+        el.scrollTo({ left: el.scrollWidth, behavior: "smooth" });
+      });
+    }
+    prevColumnsRef.current = numOfColumns;
+  }, [numOfColumns]);
+  React.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault();
+        scrollToColumn(e.key === "ArrowLeft" ? "left" : "right");
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  const scrollToColumn = (direction) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const columns = Array.from(el.children);
+    const containerLeft = el.scrollLeft;
+    const containerRight = containerLeft + el.clientWidth;
+    if (direction === "right") {
+      const target = columns.find((col) => col.offsetLeft + col.offsetWidth > containerRight + 1);
+      if (target) {
+        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: "smooth" });
+      }
+    } else {
+      const target = [...columns].reverse().find((col) => col.offsetLeft < containerLeft - 1);
+      if (target) {
+        el.scrollTo({ left: target.offsetLeft, behavior: "smooth" });
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("MULTI_COLUMN relative w-full h-full overflow-hidden"), children: [
+    canScrollLeft && /* @__PURE__ */ jsxRuntime.jsx(ScrollArrow, { direction: "left", onClick: () => scrollToColumn("left") }),
+    canScrollRight && /* @__PURE__ */ jsxRuntime.jsx(ScrollArrow, { direction: "right", onClick: () => scrollToColumn("right") }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "grid overflow-x-auto w-full overflow-y-auto h-full",
+        style: {
+          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? "0"}, 1fr))`
+        },
+        children
+      }
+    )
+  ] });
+}
+function ScrollArrow({ direction, onClick }) {
+  const Icon = direction === "left" ? lucideReact.ChevronLeftIcon : lucideReact.ChevronRightIcon;
+  const isLeft = direction === "left";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2",
+        isLeft ? "left-0" : "right-0"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick, className: "w-full h-full px-0", "aria-label": `Scroll ${direction}`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) })
+    }
+  );
+}
+
+exports.Column = Column;
+exports.Columns = Columns;
+exports.MultiColumn = MultiColumn;
+//# sourceMappingURL=multi-column-BzL86JPK.cjs.map

package/dist/multi-column-BzL86JPK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-BzL86JPK.cjs","sources":["../src/ds/components/Columns/column-content.tsx","../src/ds/components/Columns/column-root.tsx","../src/ds/components/Columns/column-toolbar.tsx","../src/ds/components/Columns/column.tsx","../src/ds/components/Columns/columns.tsx","../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid overflow-y-auto gap-8 content-start`, className)}>{children}</div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex overflow-y-auto w-full\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid gap-8 content-start w-full overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('bg-surface5 w-[3px] shrink-0 mx-[1.5vw]')}></div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/index';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative w-full h-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid overflow-x-auto w-full overflow-y-auto h-full\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"w-full h-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":["cn","jsxs","jsx","useRef","useState","useCallback","useEffect","ChevronLeftIcon","ChevronRightIcon","Button"],"mappings":"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"}

package/dist/multi-column-C1sXoVG3.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import './index.css';/* empty css               */
+import '@base-ui/react/combobox';
+import './components/DataDetailsPanel.es.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { B as Button } from './Button-DoOEJwa_.js';
+
+function ColumnContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(`grid overflow-y-auto gap-8 content-start`, className), children });
+}
+
+function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex overflow-y-auto w-full", children: [
+    withLeftSeparator && /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx("div", { className: cn(`grid gap-8 content-start w-full overflow-y-auto`, className), children }),
+    withRightSeparator && /* @__PURE__ */ jsx(Separator, {})
+  ] });
+}
+function Separator() {
+  return /* @__PURE__ */ jsx("div", { className: cn("bg-surface5 w-[3px] shrink-0 mx-[1.5vw]") });
+}
+
+function ColumnToolbar({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className), children });
+}
+
+const Column = Object.assign(ColumnRoot, {
+  Content: ColumnContent,
+  Toolbar: ColumnToolbar
+});
+
+function Columns({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className), children });
+}
+
+function MultiColumn({ children, numOfColumns = 1, minColumnWidth }) {
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateScrollState = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setCanScrollLeft(scrollLeft > 1);
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+  }, []);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    updateScrollState();
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState]);
+  const prevColumnsRef = useRef(numOfColumns);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (numOfColumns > prevColumnsRef.current) {
+      requestAnimationFrame(() => {
+        el.scrollTo({ left: el.scrollWidth, behavior: "smooth" });
+      });
+    }
+    prevColumnsRef.current = numOfColumns;
+  }, [numOfColumns]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault();
+        scrollToColumn(e.key === "ArrowLeft" ? "left" : "right");
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  const scrollToColumn = (direction) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const columns = Array.from(el.children);
+    const containerLeft = el.scrollLeft;
+    const containerRight = containerLeft + el.clientWidth;
+    if (direction === "right") {
+      const target = columns.find((col) => col.offsetLeft + col.offsetWidth > containerRight + 1);
+      if (target) {
+        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: "smooth" });
+      }
+    } else {
+      const target = [...columns].reverse().find((col) => col.offsetLeft < containerLeft - 1);
+      if (target) {
+        el.scrollTo({ left: target.offsetLeft, behavior: "smooth" });
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("MULTI_COLUMN relative w-full h-full overflow-hidden"), children: [
+    canScrollLeft && /* @__PURE__ */ jsx(ScrollArrow, { direction: "left", onClick: () => scrollToColumn("left") }),
+    canScrollRight && /* @__PURE__ */ jsx(ScrollArrow, { direction: "right", onClick: () => scrollToColumn("right") }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "grid overflow-x-auto w-full overflow-y-auto h-full",
+        style: {
+          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? "0"}, 1fr))`
+        },
+        children
+      }
+    )
+  ] });
+}
+function ScrollArrow({ direction, onClick }) {
+  const Icon = direction === "left" ? ChevronLeftIcon : ChevronRightIcon;
+  const isLeft = direction === "left";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2",
+        isLeft ? "left-0" : "right-0"
+      ),
+      children: /* @__PURE__ */ jsx(Button, { onClick, className: "w-full h-full px-0", "aria-label": `Scroll ${direction}`, children: /* @__PURE__ */ jsx(Icon, {}) })
+    }
+  );
+}
+
+export { Column as C, MultiColumn as M, Columns as a };
+//# sourceMappingURL=multi-column-C1sXoVG3.js.map

package/dist/multi-column-C1sXoVG3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-C1sXoVG3.js","sources":["../src/ds/components/Columns/column-content.tsx","../src/ds/components/Columns/column-root.tsx","../src/ds/components/Columns/column-toolbar.tsx","../src/ds/components/Columns/column.tsx","../src/ds/components/Columns/columns.tsx","../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid overflow-y-auto gap-8 content-start`, className)}>{children}</div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex overflow-y-auto w-full\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid gap-8 content-start w-full overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('bg-surface5 w-[3px] shrink-0 mx-[1.5vw]')}></div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/index';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative w-full h-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid overflow-x-auto w-full overflow-y-auto h-full\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"w-full h-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/multi-combobox-DkFLK64B.cjs

@@ -0,0 +1,193 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const combobox = require('@base-ui/react/combobox');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-DpIX8JMz.cjs');
+const controlSize = require('./control-size-D67C0kPZ.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function normalizeComboboxVariant(variant) {
+  return variant === "link" ? "ghost" : variant;
+}
+function comboboxTriggerClass({
+  variant,
+  size,
+  error,
+  className
+}) {
+  const visualVariant = normalizeComboboxVariant(variant);
+  return utils.cn(
+    Button.buttonVariants({ variant: visualVariant, size }),
+    // Fill the field and push the value left / chevron right (Button's base
+    // centers its content with `justify-center`).
+    "w-full min-w-32 justify-between",
+    // Read as "active" while the popup is open, per variant (see map above).
+    controlSize.controlTriggerOpenState[visualVariant],
+    "data-[placeholder]:text-neutral3",
+    error && "border-error hover:border-error focus-visible:border-error",
+    className
+  );
+}
+const comboboxStyles = {
+  /** Root wrapper */
+  root: "flex flex-col gap-1.5",
+  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */
+  chevron: "ml-2 h-4 w-4 shrink-0 opacity-60",
+  /** Placeholder text color */
+  placeholder: "text-neutral3",
+  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */
+  popup: utils.cn(
+    "min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4",
+    "shadow-dialog",
+    "origin-(--transform-origin)",
+    "transition-[transform,scale,opacity] duration-150 ease-out",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0"
+  ),
+  /** Positioner */
+  positioner: "z-50 pointer-events-auto",
+  /** Search input container — borderless top section, hairline divider below. */
+  searchContainer: utils.cn("flex items-center border-b border-border1 px-2.5 py-1.5", transitions.transitions.colors),
+  /** Search icon */
+  searchIcon: utils.cn("mr-2 h-3.5 w-3.5 shrink-0 text-neutral3", transitions.transitions.colors),
+  /** Search input */
+  searchInput: utils.cn(
+    "flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6",
+    "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.transitions.colors
+  ),
+  /** Empty state */
+  empty: "not-empty:block hidden py-4 text-center text-ui-smd text-neutral3",
+  /** Options list */
+  list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
+  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */
+  item: utils.cn(
+    "group/item relative flex cursor-pointer select-none items-center gap-2 rounded-md",
+    "pl-2.5 pr-2 py-1.5 min-h-8",
+    "text-ui-smd leading-ui-sm text-neutral4",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.transitions.colors,
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
+  ),
+  /** Multi-select item — keeps the left checkbox slot, no right indicator. */
+  itemMulti: utils.cn(
+    "relative flex cursor-pointer select-none items-center gap-2.5 rounded-md",
+    "pl-2 pr-2.5 py-1.5 min-h-8",
+    "text-ui-smd leading-ui-sm text-neutral4",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.transitions.colors,
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
+  ),
+  /** Right-aligned slot grouping end content + selection check. */
+  itemRightSlot: "ml-auto flex items-center gap-2 shrink-0",
+  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */
+  checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-accent1",
+  /** Check icon (single select) */
+  checkIcon: "h-3.5 w-3.5",
+  /** Checkbox container (multi select) */
+  checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border",
+  /** Checkbox selected state */
+  checkboxSelected: "bg-accent1 border-accent1",
+  /** Checkbox unselected state */
+  checkboxUnselected: "border-border2",
+  /** Check icon for checkbox (multi select) */
+  checkboxIcon: "h-3 w-3 text-surface1",
+  /** Option content wrapper */
+  optionContent: "flex items-center gap-2 w-full min-w-0",
+  /** Option label/description wrapper */
+  optionText: "flex flex-col gap-0.5 min-w-0",
+  /** Option label */
+  optionLabel: "truncate",
+  /** Option description */
+  optionDescription: "text-ui-sm text-neutral3 truncate",
+  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
+  optionEnd: "ml-auto flex items-center shrink-0",
+  /** Error message */
+  error: "text-ui-sm text-accent2"
+};
+
+function MultiCombobox({
+  options,
+  value = [],
+  onValueChange,
+  placeholder = "Select options...",
+  searchPlaceholder = "Search...",
+  emptyText = "No option found.",
+  className,
+  disabled = false,
+  variant = "default",
+  size = "md",
+  open,
+  onOpenChange,
+  container,
+  error
+}) {
+  const selectedOptions = options.filter((option) => value.includes(option.value));
+  const handleSelect = (items) => {
+    if (items) {
+      onValueChange?.(items.map((item) => item.value));
+    }
+  };
+  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      combobox.Combobox.Root,
+      {
+        multiple: true,
+        items: options,
+        value: selectedOptions,
+        onValueChange: handleSelect,
+        disabled,
+        open,
+        onOpenChange,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Trigger, { className: comboboxTriggerClass({ variant, size, error: Boolean(error), className }), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("truncate", selectedOptions.length === 0 && comboboxStyles.placeholder), children: triggerText }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: comboboxStyles.chevron }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Popup, { className: comboboxStyles.popup, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.searchContainer, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: comboboxStyles.searchIcon }),
+              /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Empty, { className: comboboxStyles.empty, children: emptyText }),
+            /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.List, { className: comboboxStyles.list, children: (option) => {
+              const isSelected = value.includes(option.value);
+              return /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, className: comboboxStyles.itemMulti, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: utils.cn(
+                      comboboxStyles.checkbox,
+                      isSelected ? comboboxStyles.checkboxSelected : comboboxStyles.checkboxUnselected
+                    ),
+                    children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: comboboxStyles.checkboxIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.optionContent, children: [
+                  option.start,
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.optionText, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
+                    option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
+                  ] }),
+                  option.end ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null
+                ] })
+              ] }, option.value);
+            } })
+          ] }) }) })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.error, children: error })
+  ] });
+}
+
+exports.MultiCombobox = MultiCombobox;
+exports.comboboxStyles = comboboxStyles;
+exports.comboboxTriggerClass = comboboxTriggerClass;
+//# sourceMappingURL=multi-combobox-DkFLK64B.cjs.map