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

package/dist/metrics-card-CriQ3I_h.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-card-CriQ3I_h.cjs","sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-description.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-loading.tsx","../src/ds/components/MetricsCard/metrics-card-no-data.tsx","../src/ds/components/MetricsCard/metrics-card-root.tsx","../src/ds/components/MetricsCard/metrics-card-summary.tsx","../src/ds/components/MetricsCard/metrics-card-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-and-description.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/** Container for icon buttons / small actions in the top bar of a MetricsCard,\n *  placed alongside `TitleAndDescription` + `Summary`. */\nexport function MetricsCardActions({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex items-center gap-1 shrink-0', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardContent({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('overflow-x-auto ', className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardDescription({ children, className }: { children: string; className?: string }) {\n  return <p className={cn('text-ui-md text-neutral2 leading-tight mt-0.5', className)}>{children}</p>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-col gap-3 items-center justify-center', className)}>\n      <p className=\"text-ui-sm text-accent2\">{message}</p>\n    </div>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardLoading({ className }: { className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-neutral1\" />\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center h-full', className)}>\n      <p className=\"text-neutral1 text-sm\">{message}</p>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard\n      className={cn(\n        'flex-1 grid grid-rows-[4rem_1fr] min-h-72 gap-2 min-w-80 md:min-w-[22rem] lg:min-w-[24rem] xl:min-w-[26rem] 2xl:min-w-[30rem]',\n        className,\n      )}\n    >\n      {children}\n    </DashboardCard>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardSummary({ value, label, className }: { value: string; label?: string; className?: string }) {\n  return (\n    <div className={cn('grid justify-end content-start text-right gap-1', className)}>\n      <span className=\"text-ui-lg font-semibold text-neutral4 leading-none\">{value}</span>\n      {label && <span className=\"text-ui-md text-neutral2\">{label}</span>}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h2',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-ui-md font-normal text-neutral4', className)}>{children}</Tag>;\n}\n","import type { ReactNode } from 'react';\n\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardTitle } from './metrics-card-title';\n\ntype PropsWithTitleDescription = {\n  title: string;\n  description?: string;\n  titleAs?: 'h2' | 'h3' | 'h4';\n  children?: never;\n  className?: string;\n};\n\ntype PropsWithChildren = {\n  title?: never;\n  description?: never;\n  children: ReactNode;\n  className?: string;\n};\n\nexport function MetricsCardTitleAndDescription(props: PropsWithTitleDescription | PropsWithChildren) {\n  if ('children' in props) {\n    return <div className={props.className}>{props.children}</div>;\n  }\n\n  const { title, description, titleAs } = props;\n\n  return (\n    <div className={props.className}>\n      <MetricsCardTitle as={titleAs}>{title}</MetricsCardTitle>\n      {description && <MetricsCardDescription>{description}</MetricsCardDescription>}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardTopBar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-start gap-4 [&>:first-child]:flex-1 [&>:first-child]:min-w-0', className)}>\n      {children}\n    </div>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardSummary } from './metrics-card-summary';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleAndDescription } from './metrics-card-title-and-description';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\n\nexport const MetricsCard = Object.assign(MetricsCardRoot, {\n  Root: MetricsCardRoot,\n  Kpi: MetricsKpiCard,\n  TopBar: MetricsCardTopBar,\n  Actions: MetricsCardActions,\n  TitleAndDescription: MetricsCardTitleAndDescription,\n  Title: MetricsCardTitle,\n  Description: MetricsCardDescription,\n  Summary: MetricsCardSummary,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"names":["cn","jsx","Spinner","DashboardCard","jsxs","MetricsKpiCard"],"mappings":"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"}

package/dist/metrics-flex-grid-C6sgsQo1.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function MetricsFlexGrid({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap gap-8", className), children });
+}
+
+exports.MetricsFlexGrid = MetricsFlexGrid;
+//# sourceMappingURL=metrics-flex-grid-C6sgsQo1.cjs.map

package/dist/metrics-flex-grid-C6sgsQo1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-flex-grid-C6sgsQo1.cjs","sources":["../src/ds/components/MetricsFlexGrid/metrics-flex-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsFlexGrid({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap gap-8', className)}>{children}</div>;\n}\n"],"names":["cn"],"mappings":";;;;;AAGO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AACpG,EAAA,sCAAQ,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,sBAAA,EAAwB,SAAS,GAAI,QAAA,EAAS,CAAA;AAC1E;;;;"}

package/dist/metrics-flex-grid-DFFLFYqq.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-BakJzhuv.js';
+
+function MetricsFlexGrid({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-8", className), children });
+}
+
+export { MetricsFlexGrid as M };
+//# sourceMappingURL=metrics-flex-grid-DFFLFYqq.js.map

package/dist/metrics-flex-grid-DFFLFYqq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-flex-grid-DFFLFYqq.js","sources":["../src/ds/components/MetricsFlexGrid/metrics-flex-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsFlexGrid({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap gap-8', className)}>{children}</div>;\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AACpG,EAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,sBAAA,EAAwB,SAAS,GAAI,QAAA,EAAS,CAAA;AAC1E;;;;"}

package/dist/metrics-kpi-card-1lwPKo4-.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';
+import { c as cn } from './cn-BakJzhuv.js';
+import { S as Spinner } from './spinner-CzdgR9lk.js';
+import { D as DashboardCard } from './dashboard-card-DoOrPHcL.js';
+
+function MetricsKpiCardChange({
+  changePct,
+  prevValue,
+  lowerIsBetter,
+  className
+}) {
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-sm text-neutral1 flex-wrap", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("[&>svg]:w-4 [&>svg]:h-4", isGood ? "text-green-600" : "text-red-600"), children: changePct >= 0 ? /* @__PURE__ */ jsx(TrendingUpIcon, {}) : /* @__PURE__ */ jsx(TrendingDownIcon, {}) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(isGood ? "text-green-600" : "text-red-600"),
+          children: `${changePct >= 0 ? "+" : "-"}${Math.abs(changePct).toFixed(1)}%`
+        }
+      )
+    ] }),
+    prevValue && /* @__PURE__ */ jsxs("div", { children: [
+      "vs previous ",
+      /* @__PURE__ */ jsx("b", { className: "text-neutral2 font-semibold", children: prevValue })
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ui-sm text-accent2", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ui-md text-neutral3 leading-relaxed", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm", className), children: /* @__PURE__ */ jsx(Spinner, { size: "md", variant: "pulse", className: "text-neutral1" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsx(DashboardCard, { className: cn("flex-1 min-w-72", className), children: /* @__PURE__ */ jsx("div", { className: "grid gap-1", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsx("strong", { className: cn("text-header-lg text-neutral4 font-semibold", className), children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Label: MetricsKpiCardLabel,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading
+});
+
+export { MetricsKpiCard as M };
+//# sourceMappingURL=metrics-kpi-card-1lwPKo4-.js.map

package/dist/metrics-kpi-card-1lwPKo4-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-1lwPKo4-.js","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardChange({\n  changePct,\n  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n\n  return (\n    <div className={cn('flex items-center gap-1 text-sm text-neutral1 flex-wrap', className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className={cn('[&>svg]:w-4 [&>svg]:h-4', isGood ? 'text-green-600' : 'text-red-600')}>\n          {changePct >= 0 ? <TrendingUpIcon /> : <TrendingDownIcon />}\n        </span>\n        <span\n          className={cn(isGood ? 'text-green-600' : 'text-red-600')}\n        >{`${changePct >= 0 ? '+' : '-'}${Math.abs(changePct).toFixed(1)}%`}</span>\n      </div>\n      {prevValue && (\n        <div>\n          vs previous <b className=\"text-neutral2 font-semibold\">{prevValue}</b>\n        </div>\n      )}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-ui-sm text-accent2', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral3 leading-relaxed', className)}>{children}</span>;\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <span className={cn('text-sm', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-neutral1\" />\n    </span>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard className={cn('flex-1 min-w-72', className)}>\n      <div className=\"grid gap-1\">{children}</div>\n    </DashboardCard>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: string; className?: string }) {\n  return <strong className={cn('text-header-lg text-neutral4 font-semibold', className)}>{children}</strong>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Label: MetricsKpiCardLabel,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":[],"mappings":"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"}

package/dist/metrics-kpi-card-C4rSquAu.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+const spinner = require('./spinner-CbKwvEp3.cjs');
+const dashboardCard = require('./dashboard-card-C5Jr9KgG.cjs');
+
+function MetricsKpiCardChange({
+  changePct,
+  prevValue,
+  lowerIsBetter,
+  className
+}) {
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-1 text-sm text-neutral1 flex-wrap", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("[&>svg]:w-4 [&>svg]:h-4", isGood ? "text-green-600" : "text-red-600"), children: changePct >= 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDownIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: utils_cn.cn(isGood ? "text-green-600" : "text-red-600"),
+          children: `${changePct >= 0 ? "+" : "-"}${Math.abs(changePct).toFixed(1)}%`
+        }
+      )
+    ] }),
+    prevValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "vs previous ",
+      /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-neutral2 font-semibold", children: prevValue })
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("text-ui-sm text-accent2", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("text-ui-md text-neutral3 leading-relaxed", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "md", variant: "pulse", className: "text-neutral1" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dashboardCard.DashboardCard, { className: utils_cn.cn("flex-1 min-w-72", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { className: utils_cn.cn("text-header-lg text-neutral4 font-semibold", className), children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Label: MetricsKpiCardLabel,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading
+});
+
+exports.MetricsKpiCard = MetricsKpiCard;
+//# sourceMappingURL=metrics-kpi-card-C4rSquAu.cjs.map

package/dist/metrics-kpi-card-C4rSquAu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-C4rSquAu.cjs","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardChange({\n  changePct,\n  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n\n  return (\n    <div className={cn('flex items-center gap-1 text-sm text-neutral1 flex-wrap', className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className={cn('[&>svg]:w-4 [&>svg]:h-4', isGood ? 'text-green-600' : 'text-red-600')}>\n          {changePct >= 0 ? <TrendingUpIcon /> : <TrendingDownIcon />}\n        </span>\n        <span\n          className={cn(isGood ? 'text-green-600' : 'text-red-600')}\n        >{`${changePct >= 0 ? '+' : '-'}${Math.abs(changePct).toFixed(1)}%`}</span>\n      </div>\n      {prevValue && (\n        <div>\n          vs previous <b className=\"text-neutral2 font-semibold\">{prevValue}</b>\n        </div>\n      )}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-ui-sm text-accent2', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral3 leading-relaxed', className)}>{children}</span>;\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <span className={cn('text-sm', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-neutral1\" />\n    </span>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard className={cn('flex-1 min-w-72', className)}>\n      <div className=\"grid gap-1\">{children}</div>\n    </DashboardCard>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: string; className?: string }) {\n  return <strong className={cn('text-header-lg text-neutral4 font-semibold', className)}>{children}</strong>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Label: MetricsKpiCardLabel,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":["cn","jsxs","jsx","TrendingUpIcon","TrendingDownIcon","Spinner","DashboardCard"],"mappings":"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"}

package/dist/multi-column-B-Gd6DJJ.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import './index.css';/* empty css               */
+import '@base-ui/react/combobox';
+import './components/DataDetailsPanel.es.js';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import './use-copy-to-clipboard-CiSfp8oO.js';
+import { c as cn } from './cn-BakJzhuv.js';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { B as Button } from './Button-lkWOSV62.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-B-Gd6DJJ.js.map

package/dist/multi-column-B-Gd6DJJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-B-Gd6DJJ.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-column-yjFC88Z6.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+require('./index.css');const jsxRuntime = require('react/jsx-runtime');
+;/* empty css                 */
+require('@base-ui/react/combobox');
+require('./components/DataDetailsPanel.cjs.js');
+const React = require('react');
+require('./use-copy-to-clipboard-y495_Ckw.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-BVNuv0IS.cjs');
+
+function ColumnContent({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.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.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.cn("bg-surface5 w-[3px] shrink-0 mx-[1.5vw]") });
+}
+
+function ColumnToolbar({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.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.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.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.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-yjFC88Z6.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-yjFC88Z6.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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"}