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

package/dist/data-list-skeleton-DNIPkS_y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton-DNIPkS_y.js","sources":["../src/ds/icons/AgentIcon.tsx","../src/ds/icons/WorkflowIcon.tsx","../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nexport const AgentIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 8.82265 8.51434\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path\n      d=\"M6.76646 6.16953C6.56909 6.10559 6.40521 5.96585 6.31087 5.78107C6.21653 5.5963 6.19945 5.38161 6.2634 5.18424C6.32735 4.98687 6.46708 4.82299 6.65186 4.72865C6.83663 4.63431 7.05132 4.61723 7.24869 4.68118C7.45933 4.74996 7.6849 4.75913 7.90043 4.70768C8.11596 4.65622 8.31306 4.54615 8.46992 4.38963C8.62678 4.23312 8.73729 4.03626 8.78921 3.82084C8.84114 3.60542 8.83246 3.37984 8.76414 3.16904C8.69582 2.95825 8.57052 2.77046 8.4021 2.62646C8.23368 2.48246 8.02871 2.38785 7.80986 2.35311C7.59101 2.31836 7.36681 2.34484 7.16208 2.4296C6.95734 2.51436 6.78004 2.6541 6.64979 2.83337C6.39274 3.18567 6.05613 3.47228 5.66736 3.66987C5.27858 3.86747 4.84864 3.97046 4.41254 3.97046C3.97643 3.97046 3.54649 3.86747 3.15772 3.66987C2.76895 3.47228 2.43234 3.18567 2.17528 2.83337C2.04528 2.65368 1.86807 2.51346 1.66329 2.42826C1.45852 2.34306 1.23415 2.3162 1.01505 2.35065C0.795944 2.3851 0.590648 2.47951 0.421892 2.62344C0.253137 2.76736 0.127507 2.95519 0.0589124 3.16611C-0.00968171 3.37703 -0.0185632 3.60282 0.0332514 3.81848C0.0850661 4.03414 0.195555 4.23125 0.352484 4.38799C0.509413 4.54472 0.706659 4.65497 0.92238 4.70652C1.1381 4.75808 1.36388 4.74892 1.57472 4.68007C1.77224 4.61634 1.98698 4.63369 2.1717 4.72829C2.35643 4.82289 2.49601 4.987 2.55973 5.18452C2.62346 5.38203 2.60611 5.59677 2.51151 5.7815C2.41691 5.96623 2.2528 6.10581 2.05528 6.16953C1.84456 6.23788 1.65684 6.36317 1.51288 6.53155C1.36893 6.69993 1.27434 6.90485 1.23959 7.12364C1.20483 7.34242 1.23126 7.56656 1.31596 7.77126C1.40065 7.97597 1.5403 8.15326 1.71948 8.28354C1.89865 8.41382 2.11036 8.49201 2.33121 8.50946C2.55205 8.52692 2.77342 8.48296 2.97083 8.38244C3.16825 8.28193 3.33402 8.12877 3.44981 7.93992C3.56561 7.75106 3.62692 7.53386 3.62697 7.31233C3.62697 7.10501 3.70933 6.90619 3.85592 6.7596C4.00251 6.613 4.20134 6.53065 4.40865 6.53065C4.61596 6.53065 4.81479 6.613 4.96138 6.7596C5.10797 6.90619 5.19033 7.10501 5.19033 7.31233C5.19027 7.53399 5.25152 7.75136 5.36731 7.94037C5.4831 8.12939 5.64892 8.2827 5.84642 8.38334C6.04392 8.48399 6.26541 8.52804 6.4864 8.51063C6.70738 8.49322 6.91924 8.41502 7.09854 8.28469C7.27785 8.15436 7.41761 7.97698 7.50237 7.77216C7.58713 7.56734 7.61359 7.34307 7.57882 7.12414C7.54404 6.90522 7.44939 6.70018 7.30534 6.53171C7.16128 6.36323 6.97344 6.23789 6.76257 6.16953H6.76646Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M4.41198 2.40337C5.07565 2.40337 5.61367 1.86536 5.61367 1.20168C5.61367 0.538012 5.07565 0 4.41198 0C3.74831 0 3.2103 0.538012 3.2103 1.20168C3.2103 1.86536 3.74831 2.40337 4.41198 2.40337Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n","import React from 'react';\n\nexport const WorkflowIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 9.08789 8.97168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path\n      d=\"M1.98047 5.00977C2.17347 5.00977 2.33002 5.16639 2.33008 5.35938C2.33008 5.55242 2.17351 5.70898 1.98047 5.70898C1.27292 5.70915 0.699436 6.2827 0.699219 6.99023C0.699219 7.69795 1.27279 8.2723 1.98047 8.27246C2.68829 8.27246 3.2627 7.69805 3.2627 6.99023C3.26291 6.79738 3.4194 6.64063 3.6123 6.64062C3.80503 6.64084 3.9617 6.79751 3.96191 6.99023C3.96191 8.08413 3.07437 8.97168 1.98047 8.97168C0.886706 8.97152 0 8.08403 0 6.99023C0.000217392 5.89662 0.886841 5.00993 1.98047 5.00977ZM7.10742 5.00977C8.20105 5.00992 9.08767 5.89662 9.08789 6.99023C9.08789 8.08404 8.20119 8.97152 7.10742 8.97168C6.01359 8.97159 5.12598 8.08408 5.12598 6.99023C5.1262 6.79757 5.28294 6.64092 5.47559 6.64062C5.66849 6.64063 5.82497 6.79738 5.8252 6.99023C5.8252 7.698 6.39968 8.27238 7.10742 8.27246C7.81511 8.2723 8.38867 7.69796 8.38867 6.99023C8.38845 6.2827 7.81497 5.70914 7.10742 5.70898C6.91445 5.7089 6.75781 5.55236 6.75781 5.35938C6.75788 5.16644 6.91449 5.00985 7.10742 5.00977ZM4.54395 0C5.44471 0 6.17465 0.730134 6.1748 1.63086C6.1748 2.27964 5.79613 2.83941 5.24768 3.102C5.0501 3.1966 4.89355 3.37979 4.89355 3.59885V4.08919C4.89355 4.21279 4.94266 4.33133 5.03006 4.41873L6.80071 6.18938C6.87996 6.26863 6.99535 6.29199 7.10742 6.29199C7.49331 6.29206 7.80642 6.60438 7.80664 6.99023C7.80664 7.37627 7.49344 7.68938 7.10742 7.68945C6.72134 7.68945 6.4082 7.37632 6.4082 6.99023C6.40827 6.87818 6.38483 6.76276 6.3056 6.68353L4.8726 5.25053C4.69056 5.06849 4.39541 5.06853 4.21343 5.25061L2.78139 6.68339C2.70211 6.76271 2.67963 6.87809 2.67969 6.99023C2.67969 7.37632 2.36655 7.68945 1.98047 7.68945C1.59452 7.68929 1.28125 7.37622 1.28125 6.99023C1.28146 6.60443 1.59466 6.29215 1.98047 6.29199C2.09246 6.29199 2.2079 6.26771 2.28711 6.18854L4.05776 4.41874C4.1452 4.33133 4.19434 4.21276 4.19434 4.08912V3.59881C4.19434 3.37977 4.03781 3.19659 3.84026 3.10199C3.29183 2.83937 2.91309 2.2796 2.91309 1.63086C2.91324 0.730162 3.64322 4.61864e-05 4.54395 0Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n","import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'];\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n};\n\nexport function DataListSkeleton({ columns = 'auto 1fr auto auto', numberOfRows = 3 }: DataListSkeletonProps) {\n  const columnParts = columns.trim().split(/\\s+/);\n  const columnCount = columnParts.length;\n  const skeletonColumns = columnParts.map(col => (col === 'auto' ? 'minmax(6rem, auto)' : col)).join(' ');\n\n  const getPseudoRandomWidth = (rowIdx: number, colIdx: number) => {\n    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;\n    return widths[index];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns}>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div\n          key={rowIdx}\n          className=\"data-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full px-5 border-y border-b-border1 border-t-transparent transition-colors duration-200 rounded-lg\"\n        >\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <div\n                className=\"bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none\"\n                style={{ width: getPseudoRandomWidth(rowIdx, colIdx) }}\n              />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["_"],"mappings":";;;AAEO,MAAM,YAAY,CAAC,KAAA,qBACxB,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,uBAAsB,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EAC3G,QAAA,EAAA;AAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,CAAA,EAAE,yxEAAA;AAAA,MACF,IAAA,EAAK;AAAA;AAAA,GACP;AAAA,kBACA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,CAAA,EAAE,gMAAA;AAAA,MACF,IAAA,EAAK;AAAA;AAAA;AACP,CAAA,EACF;;ACVK,MAAM,eAAe,CAAC,KAAA,qBAC3B,GAAA,CAAC,KAAA,EAAA,EAAI,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,uBAAsB,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EAC3G,QAAA,kBAAA,GAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,CAAA,EAAE,06DAAA;AAAA,IACF,IAAA,EAAK;AAAA;AACP,CAAA,EACF;;ACLF,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AAOjD,SAAS,iBAAiB,EAAE,OAAA,GAAU,oBAAA,EAAsB,YAAA,GAAe,GAAE,EAA0B;AAC5G,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA;AAC9C,EAAA,MAAM,cAAc,WAAA,CAAY,MAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,CAAA,GAAA,KAAQ,GAAA,KAAQ,SAAS,oBAAA,GAAuB,GAAI,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEtG,EAAA,MAAM,oBAAA,GAAuB,CAAC,MAAA,EAAgB,MAAA,KAAmB;AAC/D,IAAA,MAAM,KAAA,GAAA,CAAS,MAAA,GAAS,MAAA,GAAS,WAAA,GAAc,gBAAgB,MAAA,CAAO,MAAA;AACtE,IAAA,OAAO,OAAO,KAAK,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EACpB,gBAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,YAAA,EAAc,CAAA,CAAE,GAAA,CAAI,CAAC,GAAG,MAAA,qBAC5C,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,SAAA,EAAU,iMAAA;AAAA,MAET,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAACA,EAAAA,EAAG,MAAA,qBAC3C,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,4EAAA;AAAA,UACV,OAAO,EAAE,KAAA,EAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA;AAAE;AAAA,OACvD,EAAA,EAJiB,MAKnB,CACD;AAAA,KAAA;AAAA,IAVI;AAAA,GAYR,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/data-list-top-cell-GbxlrnjB.cjs

@@ -0,0 +1,540 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dateFns = require('date-fns');
+const React = require('react');
+const checkbox = require('./checkbox-D1vhO7CT.cjs');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+const index = require('./index-C-Lt4Bx_.cjs');
+const scrollArea = require('./scroll-area-0KvrrVBh.cjs');
+const tooltip = require('./tooltip-fTKN3FCp.cjs');
+
+const dataListRowOuterStyles = [
+  "data-list-row col-span-full relative mt-[3px] mb-1",
+  'after:absolute after:inset-x-[-0.25rem] after:bottom-[-0.25rem] after:h-px after:bg-border1 after:content-[""] after:pointer-events-none',
+  "[&:has(+.data-list-subheader)]:after:hidden [&:not(:has(~.data-list-row))]:after:hidden",
+  "transition-colors duration-200 rounded-lg"
+];
+const dataListRowInteractiveStyles = [
+  "grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer",
+  "hover:bg-surface4 focus-visible:bg-surface4 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1",
+  "transition-colors duration-200 rounded-lg"
+];
+const dataListRowStyles = ["mx-1", ...dataListRowInteractiveStyles, ...dataListRowOuterStyles];
+const dataListRowStaticStyles = ["mx-1 grid grid-cols-subgrid gap-8 px-5", ...dataListRowOuterStyles];
+const dataListStickyStartStyles = [
+  "data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible",
+  'after:absolute after:-right-4 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-border2 after:content-[""] after:pointer-events-none'
+];
+const dataListRowVariants = index.cva("", {
+  variants: {
+    variant: {
+      default: "",
+      error: "bg-notice-destructive/10! hover:bg-notice-destructive/15!"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+function DataListCell({ children, className, height = "default", as, sticky, ...rest }) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: utils_cn.cn(
+        'relative grid min-w-0 max-w-full items-center overflow-hidden text-ui-md whitespace-nowrap text-neutral3 empty:before:content-["—"] empty:before:text-neutral2',
+        height === "compact" ? "py-1.5" : "py-2.5",
+        sticky === "start" && dataListStickyStartStyles,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+const dataListTruncateContentStyles = 'block min-w-0 max-w-full truncate empty:before:content-["—"] empty:before:text-neutral2 [&>*]:min-w-0 [&>*]:max-w-full [&>*]:overflow-hidden [&>*]:text-ellipsis [&>*]:whitespace-nowrap';
+const dataListInlineTextTruncateStyles = "min-w-0 flex-1 truncate";
+function DataListInlineText({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: dataListInlineTextTruncateStyles, children });
+}
+function DataListTruncatedTextNodes({ children }) {
+  return React.Children.map(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return /* @__PURE__ */ jsxRuntime.jsx(DataListInlineText, { children: child });
+    }
+    return child;
+  });
+}
+function DataListTruncatedCellContent({ children }) {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child) || typeof child.type !== "string") {
+      return child;
+    }
+    return React.cloneElement(child, {
+      className: utils_cn.cn("min-w-0 max-w-full overflow-hidden", child.props.className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(DataListTruncatedTextNodes, { children: child.props.children })
+    });
+  });
+}
+function DataListTextCell({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: dataListTruncateContentStyles, children: /* @__PURE__ */ jsxRuntime.jsx(DataListTruncatedCellContent, { children }) }) });
+}
+function DataListNameCell({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { className: utils_cn.cn("text-left text-neutral4", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: dataListTruncateContentStyles, children: /* @__PURE__ */ jsxRuntime.jsx(DataListTruncatedCellContent, { children }) }) });
+}
+function DataListDescriptionCell({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { className: utils_cn.cn("text-neutral2", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: dataListTruncateContentStyles, children: /* @__PURE__ */ jsxRuntime.jsx(DataListTruncatedCellContent, { children }) }) });
+}
+function DataListRowHeaderCell({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataListCell,
+    {
+      sticky: "start",
+      className: utils_cn.cn(
+        "data-list-row-header -ml-5 -mr-4 w-auto max-w-none rounded-l-md pl-5 pr-4 text-left text-ui-sm font-semibold tracking-tight text-neutral2",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(dataListTruncateContentStyles, "relative z-10 w-full"), children: /* @__PURE__ */ jsxRuntime.jsx(DataListTruncatedCellContent, { children }) })
+    }
+  );
+}
+function DataListNumberCell({
+  children,
+  className,
+  highlight,
+  height = "compact",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataListCell,
+    {
+      height,
+      className: utils_cn.cn(
+        "justify-items-end text-right text-ui-sm tabular-nums",
+        highlight ? "text-neutral4 font-semibold" : "text-neutral3",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function getShortId(id) {
+  if (!id) return "";
+  return id.length > 8 ? id.slice(0, 8) : id;
+}
+function DataListIdCell({ id }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: getShortId(id) });
+}
+function DataListSelectCell({ checked, onToggle, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataListCell,
+    {
+      as: "label",
+      height: "compact",
+      className: "h-8 w-8 self-center cursor-pointer justify-items-center overflow-visible px-0 py-0!",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        checkbox.Checkbox,
+        {
+          checked,
+          onCheckedChange: () => {
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            onToggle(e.shiftKey);
+          },
+          "aria-label": rest["aria-label"]
+        }
+      )
+    }
+  );
+}
+function DataListMonoCell({ children, className, height = "compact" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils_cn.cn(
+        'block min-w-0 max-w-full text-ui-smd font-mono text-neutral3 truncate empty:before:content-["—"]',
+        className
+      ),
+      children
+    }
+  ) });
+}
+function toDate(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return isNaN(date.getTime()) ? null : date;
+}
+function DataListDateCell({ timestamp }) {
+  const date = toDate(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : null });
+}
+function DataListTimeCell({ timestamp }) {
+  const date = toDate(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    dateFns.format(date, "HH:mm:ss"),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
+      ".",
+      String(date.getMilliseconds()).padStart(3, "0")
+    ] })
+  ] }) : null });
+}
+
+function DataListNextPageLoading({
+  isLoading,
+  setEndOfListElement,
+  hasMore,
+  loadingText = "Loading more data..."
+}) {
+  if (!setEndOfListElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setEndOfListElement,
+      className: utils_cn.cn("col-span-full text-ui-md text-neutral3 opacity-50 flex justify-center min-h-1", {
+        "py-4": isLoading,
+        "py-0": !hasMore
+      }),
+      children: isLoading && loadingText
+    }
+  );
+}
+
+function DataListNoMatch({
+  message = "Nothing matches your search",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md", children: message })
+    }
+  );
+}
+
+const stickyHeaderBackgroundValues = {
+  tinted: {
+    background: "color-mix(in oklch, var(--surface1), var(--neutral6) 10%)",
+    hoverBackground: "color-mix(in oklch, var(--surface1), var(--neutral6) 14%)"
+  },
+  surface: {
+    background: "var(--surface2)",
+    hoverBackground: "color-mix(in oklch, var(--surface2), var(--neutral6) 10%)"
+  },
+  transparent: {
+    background: "transparent",
+    hoverBackground: "transparent"
+  }
+};
+function getDataListMask(mask) {
+  if (mask === void 0) return { top: false };
+  if (typeof mask === "object") return { top: false, ...mask };
+  return mask;
+}
+const borderlessTableStyles = [
+  "gap-y-px",
+  // A shared opaque tint gives both column headers and sticky row headers the
+  // same treatment without revealing scrolled content beneath sticky surfaces.
+  "[&_.data-list-top]:mx-0 [&_.data-list-top]:bg-[var(--data-list-sticky-header-background)] [&_.data-list-top]:after:hidden",
+  "[&_.data-list-top]:rounded-t-xl [&_.data-list-top]:rounded-b-md",
+  // header column separators: a short, faint vertical line centered in the gap
+  // to the left of every header cell but the first. A `before` pseudo (not a
+  // `border-l` + padding) keeps header text aligned with the row cells below.
+  // The cell's default `overflow-hidden` would clip a gap-positioned pseudo, so
+  // these cells switch to `overflow-visible`; the title text still truncates via
+  // its inner `truncate` span, so nothing else spills.
+  "[&_.data-list-top>*:not(:first-child)]:relative [&_.data-list-top>*:not(:first-child)]:overflow-visible",
+  '[&_.data-list-top>*:not(:first-child)]:before:absolute [&_.data-list-top>*:not(:first-child)]:before:-left-4 [&_.data-list-top>*:not(:first-child)]:before:top-1/2 [&_.data-list-top>*:not(:first-child)]:before:-translate-y-1/2 [&_.data-list-top>*:not(:first-child)]:before:h-4 [&_.data-list-top>*:not(:first-child)]:before:w-px [&_.data-list-top>*:not(:first-child)]:before:bg-border2 [&_.data-list-top>*:not(:first-child)]:before:content-[""]',
+  "[&_.data-list-row]:mx-0 [&_.data-list-row]:my-0 [&_.data-list-row]:rounded-md",
+  "[&_.data-list-row]:hover:bg-surface-overlay-strong!",
+  "[&_.data-list-row]:focus-visible:bg-surface-overlay-strong!",
+  "[&_.data-list-row>.data-list-sticky-start]:bg-[var(--data-list-sticky-header-background)]",
+  "[&_.data-list-row>.data-list-sticky-start]:after:right-0",
+  "[&_.data-list-row:hover>.data-list-sticky-start]:bg-[var(--data-list-sticky-header-hover-background)]",
+  "[&_.data-list-row:focus-visible>.data-list-sticky-start]:bg-[var(--data-list-sticky-header-hover-background)]",
+  "[&_.data-list-row:focus-within>.data-list-sticky-start]:bg-[var(--data-list-sticky-header-hover-background)]",
+  "[&_.data-list-top>.data-list-sticky-start]:after:right-0",
+  "[&_.data-list-top>.data-list-sticky-start+*]:before:hidden"
+];
+const dataListRootVariants = index.cva(utils_cn.cn("grid w-max min-w-full max-w-none content-start"), {
+  variants: {
+    variant: {
+      striped: utils_cn.cn(
+        ...borderlessTableStyles,
+        "[&_.data-list-row]:after:hidden",
+        "[&_.data-list-row]:even:bg-surface-overlay-soft"
+      ),
+      lined: utils_cn.cn(
+        ...borderlessTableStyles,
+        '[&_.data-list-row]:after:absolute [&_.data-list-row]:after:h-px [&_.data-list-row]:after:content-[""] [&_.data-list-row]:after:pointer-events-none',
+        "[&_.data-list-row]:after:inset-x-2 [&_.data-list-row]:after:-bottom-px [&_.data-list-row]:after:bg-neutral6/10"
+      )
+    }
+  },
+  defaultVariants: {
+    variant: "lined"
+  }
+});
+function DataListRoot({
+  children,
+  columns,
+  className,
+  variant = "lined",
+  stickyHeaderBackground = "tinted",
+  mask,
+  scrollRef,
+  ...props
+}) {
+  const stickyHeaderColors = stickyHeaderBackgroundValues[stickyHeaderBackground];
+  const gridStyle = {
+    "--data-list-sticky-header-background": stickyHeaderColors.background,
+    "--data-list-sticky-header-hover-background": stickyHeaderColors.hoverBackground,
+    gridTemplateColumns: columns
+  };
+  const grid = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: dataListRootVariants({ variant }),
+      style: gridStyle,
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    scrollArea.ScrollArea,
+    {
+      ...props,
+      orientation: "both",
+      mask: getDataListMask(mask),
+      viewportRef: scrollRef,
+      viewPortClassName: "max-h-[inherit]",
+      className: utils_cn.cn("h-full w-full rounded-t-xl", className),
+      children: grid
+    }
+  );
+}
+
+const DataListRowWrapperContext = React.createContext(false);
+function useDataListRowWrapperContext() {
+  return React.useContext(DataListRowWrapperContext);
+}
+
+const DataListRowButton = React.forwardRef(
+  ({
+    children,
+    className,
+    type = "button",
+    flushLeft,
+    flushRight,
+    colStart,
+    colEnd,
+    featured,
+    variant,
+    style,
+    ...rest
+  }, ref) => {
+    const isWrapped = useDataListRowWrapperContext();
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: utils_cn.cn(
+          ...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles,
+          "text-left",
+          !isWrapped && flushLeft && "ml-0!",
+          !isWrapped && flushRight && "mr-0!",
+          // `!` so the selection fill wins over borderless table root styling
+          // (higher-specificity descendant rules); same color in `default`.
+          featured && "bg-surface4!",
+          dataListRowVariants({ variant }),
+          className
+        ),
+        style: resolvedStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowButton.displayName = "DataListRowButton";
+
+function DataListRowLink({
+  children,
+  to,
+  className,
+  style,
+  LinkComponent: Link = "a",
+  flushLeft,
+  flushRight,
+  colStart,
+  colEnd,
+  featured,
+  variant
+}) {
+  const isWrapped = useDataListRowWrapperContext();
+  const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+  const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Link,
+    {
+      href: to,
+      className: utils_cn.cn(
+        ...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles,
+        !isWrapped && flushLeft && "ml-0!",
+        !isWrapped && flushRight && "mr-0!",
+        // `!` so the selection fill wins over borderless table root styling
+        // (higher-specificity descendant rules); same color in `default`.
+        featured && "bg-surface4!",
+        dataListRowVariants({ variant }),
+        className
+      ),
+      style: resolvedStyle,
+      children
+    }
+  );
+}
+
+const DataListRowWrapper = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(DataListRowWrapperContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+DataListRowWrapper.displayName = "DataListRowWrapper";
+
+function DataListSpacer({ height }) {
+  if (height <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
+}
+
+function DataListTop({ children, className, hasLeadingCell, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        'data-list-top mx-1 grid grid-cols-subgrid gap-8 col-span-full relative px-5 bg-surface2 sticky top-0 z-20 after:absolute after:inset-x-[-0.25rem] after:bottom-0 after:h-px after:bg-border1 after:content-[""] after:pointer-events-none',
+        hasLeadingCell && "gap-0 pl-0!",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+const DataListTopCell = React.forwardRef(
+  ({ children, className, as, sticky, ...rest }, ref) => {
+    const Component = as || "span";
+    const isText = typeof children === "string" || typeof children === "number";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: utils_cn.cn(
+          "h-8 min-w-0 max-w-full overflow-hidden py-1 flex items-center whitespace-nowrap text-neutral2 font-semibold tracking-tight text-ui-sm",
+          sticky === "start" && dataListStickyStartStyles,
+          sticky === "start" && "-ml-5 -mr-4 w-auto max-w-none rounded-tl-xl rounded-bl-md pl-5 pr-4",
+          sticky === "start" && "z-20 bg-[var(--data-list-sticky-header-background)]",
+          className
+        ),
+        ...rest,
+        children: isText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }) : children
+      }
+    );
+  }
+);
+function DataListTopCellWithTooltip({ children, tooltip: tooltip$1, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(DataListTopCell, { className, children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })
+  ] });
+}
+const breakpointClasses = {
+  sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
+  md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
+  lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
+  xl: { show: "hidden xl:inline-flex", hide: "inline-flex xl:hidden" },
+  "2xl": { show: "hidden 2xl:inline-flex", hide: "inline-flex 2xl:hidden" }
+};
+function DataListTopCellSmart({
+  long,
+  short,
+  tooltip,
+  breakpoint = "2xl",
+  className
+}) {
+  const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
+  const bp = breakpointClasses[breakpoint];
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("items-center gap-1", bp.show), children: long }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("items-center gap-1", bp.hide), children: short })
+  ] });
+  if (tooltipText) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataListTopCellWithTooltip,
+      {
+        tooltip: tooltipText,
+        className: utils_cn.cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListTopCell, { className: utils_cn.cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className), children: content });
+}
+function DataListTopSelectCell({ checked, onToggle, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataListTopCell,
+    {
+      as: "label",
+      className: "w-8 cursor-pointer justify-center overflow-visible px-0 py-0!",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox, { checked, onCheckedChange: () => onToggle(), "aria-label": rest["aria-label"] })
+    }
+  );
+}
+
+exports.DataListCell = DataListCell;
+exports.DataListDateCell = DataListDateCell;
+exports.DataListDescriptionCell = DataListDescriptionCell;
+exports.DataListIdCell = DataListIdCell;
+exports.DataListMonoCell = DataListMonoCell;
+exports.DataListNameCell = DataListNameCell;
+exports.DataListNextPageLoading = DataListNextPageLoading;
+exports.DataListNoMatch = DataListNoMatch;
+exports.DataListNumberCell = DataListNumberCell;
+exports.DataListRoot = DataListRoot;
+exports.DataListRowButton = DataListRowButton;
+exports.DataListRowHeaderCell = DataListRowHeaderCell;
+exports.DataListRowLink = DataListRowLink;
+exports.DataListRowWrapper = DataListRowWrapper;
+exports.DataListSelectCell = DataListSelectCell;
+exports.DataListSpacer = DataListSpacer;
+exports.DataListTextCell = DataListTextCell;
+exports.DataListTimeCell = DataListTimeCell;
+exports.DataListTop = DataListTop;
+exports.DataListTopCell = DataListTopCell;
+exports.DataListTopCellSmart = DataListTopCellSmart;
+exports.DataListTopCellWithTooltip = DataListTopCellWithTooltip;
+exports.DataListTopSelectCell = DataListTopSelectCell;
+exports.dataListRowStaticStyles = dataListRowStaticStyles;
+exports.dataListRowVariants = dataListRowVariants;
+exports.useDataListRowWrapperContext = useDataListRowWrapperContext;
+//# sourceMappingURL=data-list-top-cell-GbxlrnjB.cjs.map