@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/data-keys-and-values-DNqDDNb0.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './cn-Dxjsbr9n.js';
+import { ExternalLinkIcon, Link2Icon, CheckIcon, CopyIcon } from 'lucide-react';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-D1PLTHDf.js';
+import { useCopyToClipboard } from './hooks/use-copy-to-clipboard.es.js';
+
+function DataKeysAndValuesHeader({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("col-span-full py-3 text-ui-sm tracking-widest text-neutral2 uppercase", className), children });
+}
+
+function DataKeysAndValuesKey({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("shrink-0  py-0.5 text-ui-smd text-neutral2", className), children });
+}
+
+const GRID_TEMPLATES = {
+  1: "auto 1fr",
+  2: "auto auto auto 1fr",
+  3: "auto auto auto auto auto 1fr"
+};
+const DENSITY_GAP_Y = {
+  default: "gap-y-1.5",
+  dense: "gap-y-0"
+};
+function DataKeysAndValuesRoot({
+  className,
+  children,
+  numOfCol = 1,
+  density = "default"
+}) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: cn("grid gap-x-4", DENSITY_GAP_Y[density], className),
+      style: { gridTemplateColumns: GRID_TEMPLATES[numOfCol] },
+      children
+    }
+  );
+}
+
+const dataKeysAndValuesValueStyles = "text-ui-smd text-neutral3 min-w-0 py-0.5 pr-6";
+
+function DataKeysAndValuesValue({ className, children }) {
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, "truncate", className), children });
+}
+
+function isExternalUrl(href) {
+  return /^https?:\/\//.test(href);
+}
+function DataKeysAndValuesValueLink({ className, children, href, as }) {
+  const isExternal = isExternalUrl(href);
+  const Component = as || "a";
+  const navigationProps = as ? { href, to: href } : { href };
+  const linkClassName = cn(
+    "flex items-center gap-2 truncate transition-colors hover:text-neutral4",
+    "[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-70"
+  );
+  if (isExternal) {
+    return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", className: linkClassName, children: [
+      /* @__PURE__ */ jsx("span", { children }),
+      /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Component, { ...navigationProps, className: linkClassName, children: [
+    /* @__PURE__ */ jsx("span", { children }),
+    /* @__PURE__ */ jsx(Link2Icon, {})
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithCopyBtn({
+  className,
+  children,
+  copyValue,
+  copyTooltip = "Copy to clipboard"
+}) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: copyValue,
+    copyMessage: "Copied!"
+  });
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Tooltip, { open: isCopied || void 0, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleCopy,
+        type: "button",
+        className: cn(
+          "flex items-center gap-2 text-left whitespace-nowrap",
+          "[&:hover>svg]:opacity-100 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:opacity-70",
+          { "[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-accent1": isCopied }
+        ),
+        "aria-label": isCopied ? "Copied!" : copyTooltip,
+        children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: isCopied ? "Copied!" : copyTooltip })
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithTooltip({
+  className,
+  children,
+  tooltip
+}) {
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { tabIndex: 0, className: "hover:text-neutral4 inline cursor-help truncate", children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] }) });
+}
+
+const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {
+  Key: DataKeysAndValuesKey,
+  Value: DataKeysAndValuesValue,
+  ValueLink: DataKeysAndValuesValueLink,
+  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,
+  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,
+  Header: DataKeysAndValuesHeader
+});
+
+export { DataKeysAndValues as D };
+//# sourceMappingURL=data-keys-and-values-DNqDDNb0.js.map

package/dist/data-keys-and-values-DNqDDNb0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-keys-and-values-DNqDDNb0.js","sources":["../src/ds/components/DataKeysAndValues/data-keys-and-values-header.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-key.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-root.tsx","../src/ds/components/DataKeysAndValues/shared.ts","../src/ds/components/DataKeysAndValues/data-keys-and-values-value.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-link.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-with-copy-btn.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-with-tooltip.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesHeader({ className, children }: DataKeysAndValuesHeaderProps) {\n  return (\n    <dt className={cn('col-span-full py-3 text-ui-sm tracking-widest text-neutral2 uppercase', className)}>\n      {children}\n    </dt>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesKeyProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesKey({ className, children }: DataKeysAndValuesKeyProps) {\n  return <dt className={cn('shrink-0  py-0.5 text-ui-smd text-neutral2', className)}>{children}</dt>;\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesProps {\n  className?: string;\n  children: React.ReactNode;\n  numOfCol?: 1 | 2 | 3;\n  density?: 'default' | 'dense';\n}\n\nconst GRID_TEMPLATES: Record<NonNullable<DataKeysAndValuesProps['numOfCol']>, string> = {\n  1: 'auto 1fr',\n  2: 'auto auto auto 1fr',\n  3: 'auto auto auto auto auto 1fr',\n};\n\nconst DENSITY_GAP_Y: Record<NonNullable<DataKeysAndValuesProps['density']>, string> = {\n  default: 'gap-y-1.5',\n  dense: 'gap-y-0',\n};\n\nexport function DataKeysAndValuesRoot({\n  className,\n  children,\n  numOfCol = 1,\n  density = 'default',\n}: DataKeysAndValuesProps) {\n  return (\n    <dl\n      className={cn('grid gap-x-4', DENSITY_GAP_Y[density], className)}\n      style={{ gridTemplateColumns: GRID_TEMPLATES[numOfCol] }}\n    >\n      {children}\n    </dl>\n  );\n}\n","export const dataKeysAndValuesValueStyles = 'text-ui-smd text-neutral3 min-w-0 py-0.5 pr-6';\n","import { dataKeysAndValuesValueStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesValue({ className, children }: DataKeysAndValuesValueProps) {\n  return <dd className={cn(dataKeysAndValuesValueStyles, 'truncate', className)}>{children}</dd>;\n}\n","import { ExternalLinkIcon, Link2Icon } from 'lucide-react';\nimport { dataKeysAndValuesValueStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueLinkProps {\n  className?: string;\n  children: React.ReactNode;\n  href: string;\n  as?: React.ElementType;\n}\n\nfunction isExternalUrl(href: string) {\n  return /^https?:\\/\\//.test(href);\n}\n\nexport function DataKeysAndValuesValueLink({ className, children, href, as }: DataKeysAndValuesValueLinkProps) {\n  const isExternal = isExternalUrl(href);\n  const Component = as || 'a';\n  // Pass `to` only for custom components so React-Router's `Link` (which reads `to`) works\n  // while native anchors don't get an unknown `to` attribute warning.\n  const navigationProps = as ? { href, to: href } : { href };\n\n  const linkClassName = cn(\n    'flex items-center gap-2 truncate transition-colors hover:text-neutral4',\n    '[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-70',\n  );\n\n  if (isExternal) {\n    return (\n      <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" className={linkClassName}>\n          <span>{children}</span>\n          <ExternalLinkIcon />\n        </a>\n      </dd>\n    );\n  }\n\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Component {...navigationProps} className={linkClassName}>\n        <span>{children}</span>\n        <Link2Icon />\n      </Component>\n    </dd>\n  );\n}\n","import { CheckIcon, CopyIcon } from 'lucide-react';\nimport { dataKeysAndValuesValueStyles } from './shared';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueWithCopyBtnProps {\n  className?: string;\n  children: React.ReactNode;\n  copyValue: string;\n  copyTooltip?: string;\n}\n\nexport function DataKeysAndValuesValueWithCopyBtn({\n  className,\n  children,\n  copyValue,\n  copyTooltip = 'Copy to clipboard',\n}: DataKeysAndValuesValueWithCopyBtnProps) {\n  const { isCopied, handleCopy } = useCopyToClipboard({\n    text: copyValue,\n    copyMessage: 'Copied!',\n  });\n\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Tooltip open={isCopied || undefined}>\n        <TooltipTrigger asChild>\n          <button\n            onClick={handleCopy}\n            type=\"button\"\n            className={cn(\n              'flex items-center gap-2 text-left whitespace-nowrap',\n              '[&:hover>svg]:opacity-100 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:opacity-70',\n              { '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-accent1': isCopied },\n            )}\n            aria-label={isCopied ? 'Copied!' : copyTooltip}\n          >\n            <span>{children}</span>\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n          </button>\n        </TooltipTrigger>\n        <TooltipContent>{isCopied ? 'Copied!' : copyTooltip}</TooltipContent>\n      </Tooltip>\n    </dd>\n  );\n}\n","import { dataKeysAndValuesValueStyles } from './shared';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueWithTooltipProps {\n  className?: string;\n  children: React.ReactNode;\n  tooltip: string;\n}\n\nexport function DataKeysAndValuesValueWithTooltip({\n  className,\n  children,\n  tooltip,\n}: DataKeysAndValuesValueWithTooltipProps) {\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <div tabIndex={0} className=\"hover:text-neutral4 inline cursor-help truncate\">\n            {children}\n          </div>\n        </TooltipTrigger>\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    </dd>\n  );\n}\n","import { DataKeysAndValuesHeader } from './data-keys-and-values-header';\nimport { DataKeysAndValuesKey } from './data-keys-and-values-key';\nimport { DataKeysAndValuesRoot } from './data-keys-and-values-root';\nimport { DataKeysAndValuesValue } from './data-keys-and-values-value';\nimport { DataKeysAndValuesValueLink } from './data-keys-and-values-value-link';\nimport { DataKeysAndValuesValueWithCopyBtn } from './data-keys-and-values-value-with-copy-btn';\nimport { DataKeysAndValuesValueWithTooltip } from './data-keys-and-values-value-with-tooltip';\n\nexport const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {\n  Key: DataKeysAndValuesKey,\n  Value: DataKeysAndValuesValue,\n  ValueLink: DataKeysAndValuesValueLink,\n  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,\n  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,\n  Header: DataKeysAndValuesHeader,\n});\n"],"names":[],"mappings":"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"}

package/dist/data-list-CIUOCtR5.js

@@ -0,0 +1,179 @@
+import { u as useDataListRowWrapperContext, r as dataListRowStaticStyles, b as DataListTopCell, D as DataListRoot, f as DataListNextPageLoading, j as DataListSpacer, i as DataListNoMatch, t as DataListTopSelectCell, v as DataListSelectCell, g as DataListTimeCell, h as DataListDateCell, w as DataListNumberCell, x as DataListRowHeaderCell, q as DataListIdCell, y as DataListDescriptionCell, z as DataListNameCell, e as DataListTextCell, A as DataListActionsCell, c as DataListCell, k as DataListRowLink, l as DataListRowButton, m as DataListRowWrapper, n as DataListTopCellSmart, o as DataListTopCellWithTooltip, a as DataListTop } from './data-list-top-BA2UVl0j.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowLeftIcon, ArrowRightIcon, ArrowUpDown, ArrowDown, ArrowUp } from 'lucide-react';
+import { B as Button } from './Button-XSiL3zvL.js';
+import { forwardRef } from 'react';
+import { c as cn } from './cn-Dxjsbr9n.js';
+import { focusRing, transitions } from './primitives/transitions.es.js';
+
+function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
+  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
+  return /* @__PURE__ */ jsxs("div", { className: "text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-4 py-3", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Page ",
+      /* @__PURE__ */ jsx("b", { children: currentPage ? currentPage + 1 : "1" })
+    ] }),
+    showNavigation && /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onPrevPage, icon: /* @__PURE__ */ jsx(ArrowLeftIcon, {}), children: "Previous" }),
+      hasMore && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onNextPage, icon: /* @__PURE__ */ jsx(ArrowRightIcon, {}), children: "Next" })
+    ] })
+  ] });
+}
+
+const DataListRowStatic = forwardRef(
+  ({ children, className, 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__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          isWrapped ? "grid grid-cols-subgrid gap-4 px-3 transition-colors duration-200" : dataListRowStaticStyles,
+          className
+        ),
+        style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowStatic.displayName = "DataListRowStatic";
+
+const sortIcons = {
+  ascending: ArrowUp,
+  descending: ArrowDown,
+  none: ArrowUpDown
+};
+function getNextDirection(sortDirection, defaultSortDirection) {
+  if (!sortDirection) return defaultSortDirection;
+  return sortDirection === "ascending" ? "descending" : "ascending";
+}
+function DataListSortableTopCell({
+  children,
+  sortDirection,
+  defaultSortDirection = "ascending",
+  onSortChange,
+  align = "start",
+  className,
+  ...props
+}) {
+  const nextDirection = getNextDirection(sortDirection, defaultSortDirection);
+  const SortIcon = sortIcons[sortDirection ?? "none"];
+  const currentDirection = sortDirection ? `, sorted ${sortDirection}` : ", not sorted";
+  return /* @__PURE__ */ jsx(
+    DataListTopCell,
+    {
+      as: "div",
+      "data-sort-direction": sortDirection ?? "none",
+      className: cn("overflow-visible py-0", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSortChange(nextDirection),
+          className: cn(
+            "relative flex h-10 w-full touch-manipulation items-center gap-1 overflow-visible rounded-sm outline-none",
+            align === "start" ? "justify-start text-left" : "justify-end text-right",
+            sortDirection ? "text-neutral4" : "text-neutral3",
+            "hover:text-neutral4",
+            transitions.colors,
+            focusRing.visible
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
+            /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              currentDirection,
+              ", sort ",
+              nextDirection
+            ] }),
+            /* @__PURE__ */ jsx(SortIcon, { "aria-hidden": "true", className: "size-3 shrink-0" })
+          ]
+        }
+      )
+    }
+  );
+}
+
+const DataListSubheader = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "data-list-subheader relative isolate col-span-full px-3 py-2 text-ui-md font-medium text-neutral4",
+          "bg-(--data-list-background)",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListSubheader.displayName = "DataListSubheader";
+
+function DataListSubHeading({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ui-sm font-normal text-neutral2", className), children });
+}
+
+const DataListTopCells = forwardRef(
+  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "pointer-events-none grid grid-cols-subgrid gap-4 px-3 [&>*]:pointer-events-auto",
+          !colStart && "col-span-full",
+          flushLeft && "pl-0!",
+          className
+        ),
+        style: colStart ? { ...style, gridColumn: `${colStart} / -1` } : style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListTopCells.displayName = "DataListTopCells";
+
+const DataList = Object.assign(DataListRoot, {
+  Top: DataListTop,
+  TopCells: DataListTopCells,
+  TopCell: DataListTopCell,
+  SortableTopCell: DataListSortableTopCell,
+  TopCellWithTooltip: DataListTopCellWithTooltip,
+  TopCellSmart: DataListTopCellSmart,
+  RowWrapper: DataListRowWrapper,
+  RowButton: DataListRowButton,
+  RowLink: DataListRowLink,
+  RowStatic: DataListRowStatic,
+  Cell: DataListCell,
+  ActionsCell: DataListActionsCell,
+  TextCell: DataListTextCell,
+  NameCell: DataListNameCell,
+  DescriptionCell: DataListDescriptionCell,
+  IdCell: DataListIdCell,
+  RowHeaderCell: DataListRowHeaderCell,
+  NumberCell: DataListNumberCell,
+  DateCell: DataListDateCell,
+  TimeCell: DataListTimeCell,
+  SelectCell: DataListSelectCell,
+  TopSelectCell: DataListTopSelectCell,
+  NoMatch: DataListNoMatch,
+  Subheader: DataListSubheader,
+  SubHeading: DataListSubHeading,
+  Spacer: DataListSpacer,
+  NextPageLoading: DataListNextPageLoading,
+  Pagination: DataListPagination
+});
+
+export { DataList as D, DataListSubHeading as a, DataListSubheader as b };
+//# sourceMappingURL=data-list-CIUOCtR5.js.map

package/dist/data-list-CIUOCtR5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-CIUOCtR5.js","sources":["../src/ds/components/DataList/data-list-pagination.tsx","../src/ds/components/DataList/data-list-row-static.tsx","../src/ds/components/DataList/data-list-sortable-top-cell.tsx","../src/ds/components/DataList/data-list-subheader.tsx","../src/ds/components/DataList/data-list-subheading.tsx","../src/ds/components/DataList/data-list-top-cells.tsx","../src/ds/components/DataList/data-list.tsx"],"sourcesContent":["import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport type DataListPaginationProps = {\n  currentPage?: number;\n  hasMore?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n};\n\nexport function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: DataListPaginationProps) {\n  const showNavigation = (typeof currentPage === 'number' && currentPage > 0) || hasMore;\n\n  return (\n    <div className=\"text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-4 py-3\">\n      <span>\n        Page <b>{currentPage ? currentPage + 1 : '1'}</b>\n      </span>\n      {showNavigation && (\n        <div className=\"flex gap-4\">\n          {typeof currentPage === 'number' && currentPage > 0 && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onPrevPage} icon={<ArrowLeftIcon />}>\n              Previous\n            </Button>\n          )}\n          {hasMore && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onNextPage} icon={<ArrowRightIcon />}>\n              Next\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useDataListRowWrapperContext } from './data-list-row-wrapper-context';\nimport { dataListRowStaticStyles } from './shared';\nimport type { DataListRowSharedProps } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type DataListRowStaticProps = ComponentPropsWithoutRef<'div'> & DataListRowSharedProps;\n\n/**\n * Non-interactive row. Use when a row should *display* like a regular row but\n * has no link target or click handler\n */\nexport const DataListRowStatic = forwardRef<HTMLDivElement, DataListRowStaticProps>(\n  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {\n    const isWrapped = useDataListRowWrapperContext();\n    const hasColumnOverride = colStart !== undefined || colEnd !== undefined;\n    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          isWrapped ? 'grid grid-cols-subgrid gap-4 px-3 transition-colors duration-200' : dataListRowStaticStyles,\n          className,\n        )}\n        style={resolvedStyle}\n        data-featured={featured || undefined}\n        data-variant={variant ?? 'default'}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListRowStatic.displayName = 'DataListRowStatic';\n","import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { DataListTopCell } from './data-list-top-cell';\nimport type { DataListTopCellProps } from './data-list-top-cell';\nimport { focusRing, transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSortDirection = 'ascending' | 'descending';\n\nconst sortIcons = {\n  ascending: ArrowUp,\n  descending: ArrowDown,\n  none: ArrowUpDown,\n};\n\nfunction getNextDirection(\n  sortDirection: DataListSortDirection | undefined,\n  defaultSortDirection: DataListSortDirection,\n) {\n  if (!sortDirection) return defaultSortDirection;\n  return sortDirection === 'ascending' ? 'descending' : 'ascending';\n}\n\nexport type DataListSortableTopCellProps = Omit<\n  DataListTopCellProps,\n  'aria-sort' | 'as' | 'children' | 'onClick' | 'role'\n> & {\n  children: ReactNode;\n  sortDirection?: DataListSortDirection;\n  defaultSortDirection?: DataListSortDirection;\n  onSortChange: (direction: DataListSortDirection) => void;\n  align?: 'start' | 'end';\n};\n\nexport function DataListSortableTopCell({\n  children,\n  sortDirection,\n  defaultSortDirection = 'ascending',\n  onSortChange,\n  align = 'start',\n  className,\n  ...props\n}: DataListSortableTopCellProps) {\n  const nextDirection = getNextDirection(sortDirection, defaultSortDirection);\n  const SortIcon = sortIcons[sortDirection ?? 'none'];\n  const currentDirection = sortDirection ? `, sorted ${sortDirection}` : ', not sorted';\n\n  return (\n    <DataListTopCell\n      as=\"div\"\n      data-sort-direction={sortDirection ?? 'none'}\n      className={cn('overflow-visible py-0', className)}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        onClick={() => onSortChange(nextDirection)}\n        className={cn(\n          'relative flex h-10 w-full touch-manipulation items-center gap-1 overflow-visible rounded-sm outline-none',\n          align === 'start' ? 'justify-start text-left' : 'justify-end text-right',\n          sortDirection ? 'text-neutral4' : 'text-neutral3',\n          'hover:text-neutral4',\n          transitions.colors,\n          focusRing.visible,\n        )}\n      >\n        <span className=\"min-w-0 truncate\">{children}</span>\n        <span className=\"sr-only\">\n          {currentDirection}, sort {nextDirection}\n        </span>\n        <SortIcon aria-hidden=\"true\" className=\"size-3 shrink-0\" />\n      </button>\n    </DataListTopCell>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubheaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const DataListSubheader = forwardRef<HTMLDivElement, DataListSubheaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'data-list-subheader relative isolate col-span-full px-3 py-2 text-ui-md font-medium text-neutral4',\n          'bg-(--data-list-background)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListSubheader.displayName = 'DataListSubheader';\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubHeadingProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function DataListSubHeading({ children, className }: DataListSubHeadingProps) {\n  return <span className={cn('text-ui-sm font-normal text-neutral2', className)}>{children}</span>;\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * Drop the group's default left margin. Use when this sits as the second\n   * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that\n   * owns the leading column.\n   */\n  flushLeft?: boolean;\n  /**\n   * Place the group starting at this column line, spanning through to the\n   * last column. Defaults to the full grid (`col-span-full`). Use when this\n   * sits beside a leading cell that owns column 1.\n   */\n  colStart?: number;\n};\n\n/**\n * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of\n * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as\n * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the\n * columns inside a wrapped `Row`.\n */\nexport const DataListTopCells = forwardRef<HTMLDivElement, DataListTopCellsProps>(\n  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'pointer-events-none grid grid-cols-subgrid gap-4 px-3 [&>*]:pointer-events-auto',\n          !colStart && 'col-span-full',\n          flushLeft && 'pl-0!',\n          className,\n        )}\n        style={colStart ? { ...style, gridColumn: `${colStart} / -1` } : style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListTopCells.displayName = 'DataListTopCells';\n","import {\n  DataListActionsCell,\n  DataListCell,\n  DataListTextCell,\n  DataListNameCell,\n  DataListDescriptionCell,\n  DataListIdCell,\n  DataListRowHeaderCell,\n  DataListNumberCell,\n  DataListSelectCell,\n  DataListDateCell,\n  DataListTimeCell,\n} from './data-list-cells';\nimport { DataListNextPageLoading } from './data-list-next-page-loading';\nimport { DataListNoMatch } from './data-list-no-match';\nimport { DataListPagination } from './data-list-pagination';\nimport { DataListRoot } from './data-list-root';\nimport { DataListRowButton } from './data-list-row-button';\nimport { DataListRowLink } from './data-list-row-link';\nimport { DataListRowStatic } from './data-list-row-static';\nimport { DataListRowWrapper } from './data-list-row-wrapper';\nimport { DataListSortableTopCell } from './data-list-sortable-top-cell';\nimport { DataListSpacer } from './data-list-spacer';\nimport { DataListSubheader } from './data-list-subheader';\nimport { DataListSubHeading } from './data-list-subheading';\nimport { DataListTop } from './data-list-top';\nimport {\n  DataListTopCell,\n  DataListTopCellWithTooltip,\n  DataListTopCellSmart,\n  DataListTopSelectCell,\n} from './data-list-top-cell';\nimport { DataListTopCells } from './data-list-top-cells';\n\nexport type { DataListRootProps, DataListVariant } from './data-list-root';\nexport type { DataListSortableTopCellProps, DataListSortDirection } from './data-list-sortable-top-cell';\n\nexport const DataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCells: DataListTopCells,\n  TopCell: DataListTopCell,\n  SortableTopCell: DataListSortableTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  RowStatic: DataListRowStatic,\n  Cell: DataListCell,\n  ActionsCell: DataListActionsCell,\n  TextCell: DataListTextCell,\n  NameCell: DataListNameCell,\n  DescriptionCell: DataListDescriptionCell,\n  IdCell: DataListIdCell,\n  RowHeaderCell: DataListRowHeaderCell,\n  NumberCell: DataListNumberCell,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  SelectCell: DataListSelectCell,\n  TopSelectCell: DataListTopSelectCell,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  NextPageLoading: DataListNextPageLoading,\n  Pagination: DataListPagination,\n});\n"],"names":[],"mappings":";;;;;;;;AAUO,SAAS,mBAAmB,EAAE,WAAA,EAAa,OAAA,EAAS,UAAA,EAAY,YAAW,EAA4B;AAC5G,EAAA,MAAM,cAAA,GAAkB,OAAO,WAAA,KAAgB,QAAA,IAAY,cAAc,CAAA,IAAM,OAAA;AAE/E,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oFAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBACC,GAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA,WAAA,GAAc,WAAA,GAAc,IAAI,GAAA,EAAI;AAAA,KAAA,EAC/C,CAAA;AAAA,IACC,cAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EACZ,QAAA,EAAA;AAAA,MAAA,OAAO,gBAAgB,QAAA,IAAY,WAAA,GAAc,qBAChD,GAAA,CAAC,MAAA,EAAA,EAAO,MAAK,QAAA,EAAS,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,MAAK,OAAA,EAAS,UAAA,EAAY,sBAAM,GAAA,CAAC,aAAA,EAAA,EAAc,GAAI,QAAA,EAAA,UAAA,EAEhG,CAAA;AAAA,MAED,OAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,UAAS,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,IAAA,EAAK,SAAS,UAAA,EAAY,IAAA,kBAAM,GAAA,CAAC,cAAA,EAAA,EAAe,GAAI,QAAA,EAAA,MAAA,EAEjG;AAAA,KAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;ACrBO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,MAAA,EAAQ,QAAA,EAAU,OAAA,EAAS,KAAA,EAAO,GAAG,IAAA,EAAK,EAAG,GAAA,KAAQ;AACrF,IAAA,MAAM,YAAY,4BAAA,EAA6B;AAC/C,IAAA,MAAM,iBAAA,GAAoB,QAAA,KAAa,MAAA,IAAa,MAAA,KAAW,MAAA;AAC/D,IAAA,MAAM,aAAA,GAAgB,iBAAA,GAAoB,EAAE,GAAG,KAAA,EAAO,UAAA,EAAY,CAAA,EAAG,QAAA,IAAY,CAAC,CAAA,GAAA,EAAM,MAAA,IAAU,EAAE,IAAG,GAAI,KAAA;AAC3G,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,YAAY,kEAAA,GAAqE,uBAAA;AAAA,UACjF;AAAA,SACF;AAAA,QACA,KAAA,EAAO,aAAA;AAAA,QACP,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,gBAAc,OAAA,IAAW,SAAA;AAAA,QACxB,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;AC3BhC,MAAM,SAAA,GAAY;AAAA,EAChB,SAAA,EAAW,OAAA;AAAA,EACX,UAAA,EAAY,SAAA;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAEA,SAAS,gBAAA,CACP,eACA,oBAAA,EACA;AACA,EAAA,IAAI,CAAC,eAAe,OAAO,oBAAA;AAC3B,EAAA,OAAO,aAAA,KAAkB,cAAc,YAAA,GAAe,WAAA;AACxD;AAaO,SAAS,uBAAA,CAAwB;AAAA,EACtC,QAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA,GAAuB,WAAA;AAAA,EACvB,YAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiC;AAC/B,EAAA,MAAM,aAAA,GAAgB,gBAAA,CAAiB,aAAA,EAAe,oBAAoB,CAAA;AAC1E,EAAA,MAAM,QAAA,GAAW,SAAA,CAAU,aAAA,IAAiB,MAAM,CAAA;AAClD,EAAA,MAAM,gBAAA,GAAmB,aAAA,GAAgB,CAAA,SAAA,EAAY,aAAa,CAAA,CAAA,GAAK,cAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,KAAA;AAAA,MACH,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA;AAAA,MAC/C,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAS,MAAM,YAAA,CAAa,aAAa,CAAA;AAAA,UACzC,SAAA,EAAW,EAAA;AAAA,YACT,0GAAA;AAAA,YACA,KAAA,KAAU,UAAU,yBAAA,GAA4B,wBAAA;AAAA,YAChD,gBAAgB,eAAA,GAAkB,eAAA;AAAA,YAClC,qBAAA;AAAA,YACA,WAAA,CAAY,MAAA;AAAA,YACZ,SAAA,CAAU;AAAA,WACZ;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAoB,QAAA,EAAS,CAAA;AAAA,4BAC7C,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EACb,QAAA,EAAA;AAAA,cAAA,gBAAA;AAAA,cAAiB,SAAA;AAAA,cAAQ;AAAA,aAAA,EAC5B,CAAA;AAAA,4BACA,GAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAY,MAAA,EAAO,WAAU,iBAAA,EAAkB;AAAA;AAAA;AAAA;AAC3D;AAAA,GACF;AAEJ;;ACpEO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,KAAQ;AACzC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,mGAAA;AAAA,UACA,6BAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;AChBzB,SAAS,kBAAA,CAAmB,EAAE,QAAA,EAAU,SAAA,EAAU,EAA4B;AACnF,EAAA,2BAAQ,MAAA,EAAA,EAAK,SAAA,EAAW,GAAG,sCAAA,EAAwC,SAAS,GAAI,QAAA,EAAS,CAAA;AAC3F;;ACeO,MAAM,gBAAA,GAAmB,UAAA;AAAA,EAC9B,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,EAAW,UAAU,KAAA,EAAO,GAAG,IAAA,EAAK,EAAG,GAAA,KAAQ;AACrE,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iFAAA;AAAA,UACA,CAAC,QAAA,IAAY,eAAA;AAAA,UACb,SAAA,IAAa,OAAA;AAAA,UACb;AAAA,SACF;AAAA,QACA,KAAA,EAAO,WAAW,EAAE,GAAG,OAAO,UAAA,EAAY,CAAA,EAAG,QAAQ,CAAA,KAAA,CAAA,EAAQ,GAAI,KAAA;AAAA,QAChE,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;ACRxB,MAAM,QAAA,GAAW,MAAA,CAAO,MAAA,CAAO,YAAA,EAAc;AAAA,EAClD,GAAA,EAAK,WAAA;AAAA,EACL,QAAA,EAAU,gBAAA;AAAA,EACV,OAAA,EAAS,eAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,kBAAA,EAAoB,0BAAA;AAAA,EACpB,YAAA,EAAc,oBAAA;AAAA,EACd,UAAA,EAAY,kBAAA;AAAA,EACZ,SAAA,EAAW,iBAAA;AAAA,EACX,OAAA,EAAS,eAAA;AAAA,EACT,SAAA,EAAW,iBAAA;AAAA,EACX,IAAA,EAAM,YAAA;AAAA,EACN,WAAA,EAAa,mBAAA;AAAA,EACb,QAAA,EAAU,gBAAA;AAAA,EACV,QAAA,EAAU,gBAAA;AAAA,EACV,eAAA,EAAiB,uBAAA;AAAA,EACjB,MAAA,EAAQ,cAAA;AAAA,EACR,aAAA,EAAe,qBAAA;AAAA,EACf,UAAA,EAAY,kBAAA;AAAA,EACZ,QAAA,EAAU,gBAAA;AAAA,EACV,QAAA,EAAU,gBAAA;AAAA,EACV,UAAA,EAAY,kBAAA;AAAA,EACZ,aAAA,EAAe,qBAAA;AAAA,EACf,OAAA,EAAS,eAAA;AAAA,EACT,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,MAAA,EAAQ,cAAA;AAAA,EACR,eAAA,EAAiB,uBAAA;AAAA,EACjB,UAAA,EAAY;AACd,CAAC;;;;"}

package/dist/data-list-DjSl3F2g.cjs

@@ -0,0 +1,183 @@
+'use strict';
+
+const dataListTop = require('./data-list-top-B_RRVRf5.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-B1TWWXCy.cjs');
+const React = require('react');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+
+function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
+  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "Page ",
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
+    ] }),
+    showNavigation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+      typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "outline", size: "sm", onClick: onPrevPage, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}), children: "Previous" }),
+      hasMore && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "outline", size: "sm", onClick: onNextPage, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}), children: "Next" })
+    ] })
+  ] });
+}
+
+const DataListRowStatic = React.forwardRef(
+  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
+    const isWrapped = dataListTop.useDataListRowWrapperContext();
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(
+          isWrapped ? "grid grid-cols-subgrid gap-4 px-3 transition-colors duration-200" : dataListTop.dataListRowStaticStyles,
+          className
+        ),
+        style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowStatic.displayName = "DataListRowStatic";
+
+const sortIcons = {
+  ascending: lucideReact.ArrowUp,
+  descending: lucideReact.ArrowDown,
+  none: lucideReact.ArrowUpDown
+};
+function getNextDirection(sortDirection, defaultSortDirection) {
+  if (!sortDirection) return defaultSortDirection;
+  return sortDirection === "ascending" ? "descending" : "ascending";
+}
+function DataListSortableTopCell({
+  children,
+  sortDirection,
+  defaultSortDirection = "ascending",
+  onSortChange,
+  align = "start",
+  className,
+  ...props
+}) {
+  const nextDirection = getNextDirection(sortDirection, defaultSortDirection);
+  const SortIcon = sortIcons[sortDirection ?? "none"];
+  const currentDirection = sortDirection ? `, sorted ${sortDirection}` : ", not sorted";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dataListTop.DataListTopCell,
+    {
+      as: "div",
+      "data-sort-direction": sortDirection ?? "none",
+      className: utils_cn.cn("overflow-visible py-0", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSortChange(nextDirection),
+          className: utils_cn.cn(
+            "relative flex h-10 w-full touch-manipulation items-center gap-1 overflow-visible rounded-sm outline-none",
+            align === "start" ? "justify-start text-left" : "justify-end text-right",
+            sortDirection ? "text-neutral4" : "text-neutral3",
+            "hover:text-neutral4",
+            primitives_transitions.transitions.colors,
+            primitives_transitions.focusRing.visible
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+              currentDirection,
+              ", sort ",
+              nextDirection
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { "aria-hidden": "true", className: "size-3 shrink-0" })
+          ]
+        }
+      )
+    }
+  );
+}
+
+const DataListSubheader = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(
+          "data-list-subheader relative isolate col-span-full px-3 py-2 text-ui-md font-medium text-neutral4",
+          "bg-(--data-list-background)",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListSubheader.displayName = "DataListSubheader";
+
+function DataListSubHeading({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("text-ui-sm font-normal text-neutral2", className), children });
+}
+
+const DataListTopCells = React.forwardRef(
+  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(
+          "pointer-events-none grid grid-cols-subgrid gap-4 px-3 [&>*]:pointer-events-auto",
+          !colStart && "col-span-full",
+          flushLeft && "pl-0!",
+          className
+        ),
+        style: colStart ? { ...style, gridColumn: `${colStart} / -1` } : style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListTopCells.displayName = "DataListTopCells";
+
+const DataList = Object.assign(dataListTop.DataListRoot, {
+  Top: dataListTop.DataListTop,
+  TopCells: DataListTopCells,
+  TopCell: dataListTop.DataListTopCell,
+  SortableTopCell: DataListSortableTopCell,
+  TopCellWithTooltip: dataListTop.DataListTopCellWithTooltip,
+  TopCellSmart: dataListTop.DataListTopCellSmart,
+  RowWrapper: dataListTop.DataListRowWrapper,
+  RowButton: dataListTop.DataListRowButton,
+  RowLink: dataListTop.DataListRowLink,
+  RowStatic: DataListRowStatic,
+  Cell: dataListTop.DataListCell,
+  ActionsCell: dataListTop.DataListActionsCell,
+  TextCell: dataListTop.DataListTextCell,
+  NameCell: dataListTop.DataListNameCell,
+  DescriptionCell: dataListTop.DataListDescriptionCell,
+  IdCell: dataListTop.DataListIdCell,
+  RowHeaderCell: dataListTop.DataListRowHeaderCell,
+  NumberCell: dataListTop.DataListNumberCell,
+  DateCell: dataListTop.DataListDateCell,
+  TimeCell: dataListTop.DataListTimeCell,
+  SelectCell: dataListTop.DataListSelectCell,
+  TopSelectCell: dataListTop.DataListTopSelectCell,
+  NoMatch: dataListTop.DataListNoMatch,
+  Subheader: DataListSubheader,
+  SubHeading: DataListSubHeading,
+  Spacer: dataListTop.DataListSpacer,
+  NextPageLoading: dataListTop.DataListNextPageLoading,
+  Pagination: DataListPagination
+});
+
+exports.DataList = DataList;
+exports.DataListSubHeading = DataListSubHeading;
+exports.DataListSubheader = DataListSubheader;
+//# sourceMappingURL=data-list-DjSl3F2g.cjs.map

package/dist/data-list-DjSl3F2g.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-DjSl3F2g.cjs","sources":["../src/ds/components/DataList/data-list-pagination.tsx","../src/ds/components/DataList/data-list-row-static.tsx","../src/ds/components/DataList/data-list-sortable-top-cell.tsx","../src/ds/components/DataList/data-list-subheader.tsx","../src/ds/components/DataList/data-list-subheading.tsx","../src/ds/components/DataList/data-list-top-cells.tsx","../src/ds/components/DataList/data-list.tsx"],"sourcesContent":["import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport type DataListPaginationProps = {\n  currentPage?: number;\n  hasMore?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n};\n\nexport function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: DataListPaginationProps) {\n  const showNavigation = (typeof currentPage === 'number' && currentPage > 0) || hasMore;\n\n  return (\n    <div className=\"text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-4 py-3\">\n      <span>\n        Page <b>{currentPage ? currentPage + 1 : '1'}</b>\n      </span>\n      {showNavigation && (\n        <div className=\"flex gap-4\">\n          {typeof currentPage === 'number' && currentPage > 0 && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onPrevPage} icon={<ArrowLeftIcon />}>\n              Previous\n            </Button>\n          )}\n          {hasMore && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onNextPage} icon={<ArrowRightIcon />}>\n              Next\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useDataListRowWrapperContext } from './data-list-row-wrapper-context';\nimport { dataListRowStaticStyles } from './shared';\nimport type { DataListRowSharedProps } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type DataListRowStaticProps = ComponentPropsWithoutRef<'div'> & DataListRowSharedProps;\n\n/**\n * Non-interactive row. Use when a row should *display* like a regular row but\n * has no link target or click handler\n */\nexport const DataListRowStatic = forwardRef<HTMLDivElement, DataListRowStaticProps>(\n  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {\n    const isWrapped = useDataListRowWrapperContext();\n    const hasColumnOverride = colStart !== undefined || colEnd !== undefined;\n    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          isWrapped ? 'grid grid-cols-subgrid gap-4 px-3 transition-colors duration-200' : dataListRowStaticStyles,\n          className,\n        )}\n        style={resolvedStyle}\n        data-featured={featured || undefined}\n        data-variant={variant ?? 'default'}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListRowStatic.displayName = 'DataListRowStatic';\n","import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { DataListTopCell } from './data-list-top-cell';\nimport type { DataListTopCellProps } from './data-list-top-cell';\nimport { focusRing, transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSortDirection = 'ascending' | 'descending';\n\nconst sortIcons = {\n  ascending: ArrowUp,\n  descending: ArrowDown,\n  none: ArrowUpDown,\n};\n\nfunction getNextDirection(\n  sortDirection: DataListSortDirection | undefined,\n  defaultSortDirection: DataListSortDirection,\n) {\n  if (!sortDirection) return defaultSortDirection;\n  return sortDirection === 'ascending' ? 'descending' : 'ascending';\n}\n\nexport type DataListSortableTopCellProps = Omit<\n  DataListTopCellProps,\n  'aria-sort' | 'as' | 'children' | 'onClick' | 'role'\n> & {\n  children: ReactNode;\n  sortDirection?: DataListSortDirection;\n  defaultSortDirection?: DataListSortDirection;\n  onSortChange: (direction: DataListSortDirection) => void;\n  align?: 'start' | 'end';\n};\n\nexport function DataListSortableTopCell({\n  children,\n  sortDirection,\n  defaultSortDirection = 'ascending',\n  onSortChange,\n  align = 'start',\n  className,\n  ...props\n}: DataListSortableTopCellProps) {\n  const nextDirection = getNextDirection(sortDirection, defaultSortDirection);\n  const SortIcon = sortIcons[sortDirection ?? 'none'];\n  const currentDirection = sortDirection ? `, sorted ${sortDirection}` : ', not sorted';\n\n  return (\n    <DataListTopCell\n      as=\"div\"\n      data-sort-direction={sortDirection ?? 'none'}\n      className={cn('overflow-visible py-0', className)}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        onClick={() => onSortChange(nextDirection)}\n        className={cn(\n          'relative flex h-10 w-full touch-manipulation items-center gap-1 overflow-visible rounded-sm outline-none',\n          align === 'start' ? 'justify-start text-left' : 'justify-end text-right',\n          sortDirection ? 'text-neutral4' : 'text-neutral3',\n          'hover:text-neutral4',\n          transitions.colors,\n          focusRing.visible,\n        )}\n      >\n        <span className=\"min-w-0 truncate\">{children}</span>\n        <span className=\"sr-only\">\n          {currentDirection}, sort {nextDirection}\n        </span>\n        <SortIcon aria-hidden=\"true\" className=\"size-3 shrink-0\" />\n      </button>\n    </DataListTopCell>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubheaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const DataListSubheader = forwardRef<HTMLDivElement, DataListSubheaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'data-list-subheader relative isolate col-span-full px-3 py-2 text-ui-md font-medium text-neutral4',\n          'bg-(--data-list-background)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListSubheader.displayName = 'DataListSubheader';\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubHeadingProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function DataListSubHeading({ children, className }: DataListSubHeadingProps) {\n  return <span className={cn('text-ui-sm font-normal text-neutral2', className)}>{children}</span>;\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * Drop the group's default left margin. Use when this sits as the second\n   * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that\n   * owns the leading column.\n   */\n  flushLeft?: boolean;\n  /**\n   * Place the group starting at this column line, spanning through to the\n   * last column. Defaults to the full grid (`col-span-full`). Use when this\n   * sits beside a leading cell that owns column 1.\n   */\n  colStart?: number;\n};\n\n/**\n * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of\n * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as\n * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the\n * columns inside a wrapped `Row`.\n */\nexport const DataListTopCells = forwardRef<HTMLDivElement, DataListTopCellsProps>(\n  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'pointer-events-none grid grid-cols-subgrid gap-4 px-3 [&>*]:pointer-events-auto',\n          !colStart && 'col-span-full',\n          flushLeft && 'pl-0!',\n          className,\n        )}\n        style={colStart ? { ...style, gridColumn: `${colStart} / -1` } : style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListTopCells.displayName = 'DataListTopCells';\n","import {\n  DataListActionsCell,\n  DataListCell,\n  DataListTextCell,\n  DataListNameCell,\n  DataListDescriptionCell,\n  DataListIdCell,\n  DataListRowHeaderCell,\n  DataListNumberCell,\n  DataListSelectCell,\n  DataListDateCell,\n  DataListTimeCell,\n} from './data-list-cells';\nimport { DataListNextPageLoading } from './data-list-next-page-loading';\nimport { DataListNoMatch } from './data-list-no-match';\nimport { DataListPagination } from './data-list-pagination';\nimport { DataListRoot } from './data-list-root';\nimport { DataListRowButton } from './data-list-row-button';\nimport { DataListRowLink } from './data-list-row-link';\nimport { DataListRowStatic } from './data-list-row-static';\nimport { DataListRowWrapper } from './data-list-row-wrapper';\nimport { DataListSortableTopCell } from './data-list-sortable-top-cell';\nimport { DataListSpacer } from './data-list-spacer';\nimport { DataListSubheader } from './data-list-subheader';\nimport { DataListSubHeading } from './data-list-subheading';\nimport { DataListTop } from './data-list-top';\nimport {\n  DataListTopCell,\n  DataListTopCellWithTooltip,\n  DataListTopCellSmart,\n  DataListTopSelectCell,\n} from './data-list-top-cell';\nimport { DataListTopCells } from './data-list-top-cells';\n\nexport type { DataListRootProps, DataListVariant } from './data-list-root';\nexport type { DataListSortableTopCellProps, DataListSortDirection } from './data-list-sortable-top-cell';\n\nexport const DataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCells: DataListTopCells,\n  TopCell: DataListTopCell,\n  SortableTopCell: DataListSortableTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  RowStatic: DataListRowStatic,\n  Cell: DataListCell,\n  ActionsCell: DataListActionsCell,\n  TextCell: DataListTextCell,\n  NameCell: DataListNameCell,\n  DescriptionCell: DataListDescriptionCell,\n  IdCell: DataListIdCell,\n  RowHeaderCell: DataListRowHeaderCell,\n  NumberCell: DataListNumberCell,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  SelectCell: DataListSelectCell,\n  TopSelectCell: DataListTopSelectCell,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  NextPageLoading: DataListNextPageLoading,\n  Pagination: DataListPagination,\n});\n"],"names":["jsxs","jsx","Button","ArrowLeftIcon","ArrowRightIcon","forwardRef","useDataListRowWrapperContext","cn","dataListRowStaticStyles","ArrowUp","ArrowDown","ArrowUpDown","DataListTopCell","transitions","focusRing","DataListRoot","DataListTop","DataListTopCellWithTooltip","DataListTopCellSmart","DataListRowWrapper","DataListRowButton","DataListRowLink","DataListCell","DataListActionsCell","DataListTextCell","DataListNameCell","DataListDescriptionCell","DataListIdCell","DataListRowHeaderCell","DataListNumberCell","DataListDateCell","DataListTimeCell","DataListSelectCell","DataListTopSelectCell","DataListNoMatch","DataListSpacer","DataListNextPageLoading"],"mappings":";;;;;;;;;;AAUO,SAAS,mBAAmB,EAAE,WAAA,EAAa,OAAA,EAAS,UAAA,EAAY,YAAW,EAA4B;AAC5G,EAAA,MAAM,cAAA,GAAkB,OAAO,WAAA,KAAgB,QAAA,IAAY,cAAc,CAAA,IAAM,OAAA;AAE/E,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oFAAA,EACb,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBACCC,cAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA,WAAA,GAAc,WAAA,GAAc,IAAI,GAAA,EAAI;AAAA,KAAA,EAC/C,CAAA;AAAA,IACC,cAAA,oBACCD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EACZ,QAAA,EAAA;AAAA,MAAA,OAAO,gBAAgB,QAAA,IAAY,WAAA,GAAc,qBAChDC,cAAA,CAACC,aAAA,EAAA,EAAO,MAAK,QAAA,EAAS,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,MAAK,OAAA,EAAS,UAAA,EAAY,sBAAMD,cAAA,CAACE,yBAAA,EAAA,EAAc,GAAI,QAAA,EAAA,UAAA,EAEhG,CAAA;AAAA,MAED,OAAA,oBACCF,cAAA,CAACC,aAAA,EAAA,EAAO,IAAA,EAAK,UAAS,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,IAAA,EAAK,SAAS,UAAA,EAAY,IAAA,kBAAMD,cAAA,CAACG,0BAAA,EAAA,EAAe,GAAI,QAAA,EAAA,MAAA,EAEjG;AAAA,KAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;ACrBO,MAAM,iBAAA,GAAoBC,gBAAA;AAAA,EAC/B,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,MAAA,EAAQ,QAAA,EAAU,OAAA,EAAS,KAAA,EAAO,GAAG,IAAA,EAAK,EAAG,GAAA,KAAQ;AACrF,IAAA,MAAM,YAAYC,wCAAA,EAA6B;AAC/C,IAAA,MAAM,iBAAA,GAAoB,QAAA,KAAa,MAAA,IAAa,MAAA,KAAW,MAAA;AAC/D,IAAA,MAAM,aAAA,GAAgB,iBAAA,GAAoB,EAAE,GAAG,KAAA,EAAO,UAAA,EAAY,CAAA,EAAG,QAAA,IAAY,CAAC,CAAA,GAAA,EAAM,MAAA,IAAU,EAAE,IAAG,GAAI,KAAA;AAC3G,IAAA,uBACEL,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWM,WAAA;AAAA,UACT,YAAY,kEAAA,GAAqEC,mCAAA;AAAA,UACjF;AAAA,SACF;AAAA,QACA,KAAA,EAAO,aAAA;AAAA,QACP,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,gBAAc,OAAA,IAAW,SAAA;AAAA,QACxB,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;AC3BhC,MAAM,SAAA,GAAY;AAAA,EAChB,SAAA,EAAWC,mBAAA;AAAA,EACX,UAAA,EAAYC,qBAAA;AAAA,EACZ,IAAA,EAAMC;AACR,CAAA;AAEA,SAAS,gBAAA,CACP,eACA,oBAAA,EACA;AACA,EAAA,IAAI,CAAC,eAAe,OAAO,oBAAA;AAC3B,EAAA,OAAO,aAAA,KAAkB,cAAc,YAAA,GAAe,WAAA;AACxD;AAaO,SAAS,uBAAA,CAAwB;AAAA,EACtC,QAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA,GAAuB,WAAA;AAAA,EACvB,YAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiC;AAC/B,EAAA,MAAM,aAAA,GAAgB,gBAAA,CAAiB,aAAA,EAAe,oBAAoB,CAAA;AAC1E,EAAA,MAAM,QAAA,GAAW,SAAA,CAAU,aAAA,IAAiB,MAAM,CAAA;AAClD,EAAA,MAAM,gBAAA,GAAmB,aAAA,GAAgB,CAAA,SAAA,EAAY,aAAa,CAAA,CAAA,GAAK,cAAA;AAEvE,EAAA,uBACEV,cAAA;AAAA,IAACW,2BAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,KAAA;AAAA,MACH,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,SAAA,EAAWL,WAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA;AAAA,MAC/C,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAP,eAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAS,MAAM,YAAA,CAAa,aAAa,CAAA;AAAA,UACzC,SAAA,EAAWO,WAAA;AAAA,YACT,0GAAA;AAAA,YACA,KAAA,KAAU,UAAU,yBAAA,GAA4B,wBAAA;AAAA,YAChD,gBAAgB,eAAA,GAAkB,eAAA;AAAA,YAClC,qBAAA;AAAA,YACAM,kCAAA,CAAY,MAAA;AAAA,YACZC,gCAAA,CAAU;AAAA,WACZ;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAAb,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAoB,QAAA,EAAS,CAAA;AAAA,4BAC7CD,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EACb,QAAA,EAAA;AAAA,cAAA,gBAAA;AAAA,cAAiB,SAAA;AAAA,cAAQ;AAAA,aAAA,EAC5B,CAAA;AAAA,4BACAC,cAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAY,MAAA,EAAO,WAAU,iBAAA,EAAkB;AAAA;AAAA;AAAA;AAC3D;AAAA,GACF;AAEJ;;ACpEO,MAAM,iBAAA,GAAoBI,gBAAA;AAAA,EAC/B,CAAC,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,KAAQ;AACzC,IAAA,uBACEJ,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWM,WAAA;AAAA,UACT,mGAAA;AAAA,UACA,6BAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;AChBzB,SAAS,kBAAA,CAAmB,EAAE,QAAA,EAAU,SAAA,EAAU,EAA4B;AACnF,EAAA,sCAAQ,MAAA,EAAA,EAAK,SAAA,EAAWA,YAAG,sCAAA,EAAwC,SAAS,GAAI,QAAA,EAAS,CAAA;AAC3F;;ACeO,MAAM,gBAAA,GAAmBF,gBAAA;AAAA,EAC9B,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,EAAW,UAAU,KAAA,EAAO,GAAG,IAAA,EAAK,EAAG,GAAA,KAAQ;AACrE,IAAA,uBACEJ,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWM,WAAA;AAAA,UACT,iFAAA;AAAA,UACA,CAAC,QAAA,IAAY,eAAA;AAAA,UACb,SAAA,IAAa,OAAA;AAAA,UACb;AAAA,SACF;AAAA,QACA,KAAA,EAAO,WAAW,EAAE,GAAG,OAAO,UAAA,EAAY,CAAA,EAAG,QAAQ,CAAA,KAAA,CAAA,EAAQ,GAAI,KAAA;AAAA,QAChE,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;ACRxB,MAAM,QAAA,GAAW,MAAA,CAAO,MAAA,CAAOQ,wBAAA,EAAc;AAAA,EAClD,GAAA,EAAKC,uBAAA;AAAA,EACL,QAAA,EAAU,gBAAA;AAAA,EACV,OAAA,EAASJ,2BAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,kBAAA,EAAoBK,sCAAA;AAAA,EACpB,YAAA,EAAcC,gCAAA;AAAA,EACd,UAAA,EAAYC,8BAAA;AAAA,EACZ,SAAA,EAAWC,6BAAA;AAAA,EACX,OAAA,EAASC,2BAAA;AAAA,EACT,SAAA,EAAW,iBAAA;AAAA,EACX,IAAA,EAAMC,wBAAA;AAAA,EACN,WAAA,EAAaC,+BAAA;AAAA,EACb,QAAA,EAAUC,4BAAA;AAAA,EACV,QAAA,EAAUC,4BAAA;AAAA,EACV,eAAA,EAAiBC,mCAAA;AAAA,EACjB,MAAA,EAAQC,0BAAA;AAAA,EACR,aAAA,EAAeC,iCAAA;AAAA,EACf,UAAA,EAAYC,8BAAA;AAAA,EACZ,QAAA,EAAUC,4BAAA;AAAA,EACV,QAAA,EAAUC,4BAAA;AAAA,EACV,UAAA,EAAYC,8BAAA;AAAA,EACZ,aAAA,EAAeC,iCAAA;AAAA,EACf,OAAA,EAASC,2BAAA;AAAA,EACT,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,MAAA,EAAQC,0BAAA;AAAA,EACR,eAAA,EAAiBC,mCAAA;AAAA,EACjB,UAAA,EAAY;AACd,CAAC;;;;;;"}

package/dist/data-list-skeleton--fY5L1tO.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dataListTop = require('./data-list-top-B_RRVRf5.cjs');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const headerWidths = ["3rem", "5rem", "4rem", "3.5rem", "4.5rem", "3rem"];
+function SkeletonBar({ width, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn("h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none", className),
+      style: { width }
+    }
+  );
+}
+function DataListSkeleton({
+  columns = "auto 1fr auto auto",
+  numberOfRows = 3,
+  fit,
+  variant
+}) {
+  const columnParts = dataListTop.splitColumns(columns);
+  const columnCount = columnParts.length;
+  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
+    return widths[index] ?? widths[0];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataListTop.DataListRoot, { columns: skeletonColumns, fit, variant, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListTop, { children: Array.from({ length: columnCount }).map((_, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListTopCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { width: headerWidths[colIdx % headerWidths.length] ?? headerWidths[0], className: "h-3" }) }, colIdx)) }),
+    Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid grid-cols-subgrid gap-4 px-3", ...dataListTop.dataListRowOuterStyles), children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { width: getPseudoRandomWidth(rowIdx, colIdx) }) }, colIdx)) }, rowIdx))
+  ] });
+}
+
+exports.DataListSkeleton = DataListSkeleton;
+//# sourceMappingURL=data-list-skeleton--fY5L1tO.cjs.map

package/dist/data-list-skeleton--fY5L1tO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton--fY5L1tO.cjs","sources":["../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\nimport type { DataListFit, DataListVariant } from './data-list-root';\nimport { DataListTop } from './data-list-top';\nimport { DataListTopCell } from './data-list-top-cell';\nimport { dataListRowOuterStyles, splitColumns } from './shared';\nimport { cn } from '@/lib/utils';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'] as const;\nconst headerWidths = ['3rem', '5rem', '4rem', '3.5rem', '4.5rem', '3rem'] as const;\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n  fit?: DataListFit;\n  variant?: DataListVariant;\n};\n\nfunction SkeletonBar({ width, className }: { width: string; className?: string }) {\n  return (\n    <div\n      className={cn('h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none', className)}\n      style={{ width }}\n    />\n  );\n}\n\n/**\n * Loading placeholder mirroring the real list: same root, a sticky header\n * band with one placeholder label per column, then rows of placeholder cells.\n */\nexport function DataListSkeleton({\n  columns = 'auto 1fr auto auto',\n  numberOfRows = 3,\n  fit,\n  variant,\n}: DataListSkeletonProps) {\n  const columnParts = splitColumns(columns);\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] ?? widths[0];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns} fit={fit} variant={variant}>\n      <DataListTop>\n        {Array.from({ length: columnCount }).map((_, colIdx) => (\n          <DataListTopCell key={colIdx}>\n            <SkeletonBar width={headerWidths[colIdx % headerWidths.length] ?? headerWidths[0]} className=\"h-3\" />\n          </DataListTopCell>\n        ))}\n      </DataListTop>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div key={rowIdx} className={cn('grid grid-cols-subgrid gap-4 px-3', ...dataListRowOuterStyles)}>\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <SkeletonBar width={getPseudoRandomWidth(rowIdx, colIdx)} />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["jsx","cn","splitColumns","jsxs","DataListRoot","DataListTop","DataListTopCell","dataListRowOuterStyles","_","DataListCell"],"mappings":";;;;;;AAQA,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AACxD,MAAM,eAAe,CAAC,MAAA,EAAQ,QAAQ,MAAA,EAAQ,QAAA,EAAU,UAAU,MAAM,CAAA;AASxE,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,SAAA,EAAU,EAA0C;AAChF,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA,CAAG,uFAAA,EAAyF,SAAS,CAAA;AAAA,MAChH,KAAA,EAAO,EAAE,KAAA;AAAM;AAAA,GACjB;AAEJ;AAMO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA,GAAU,oBAAA;AAAA,EACV,YAAA,GAAe,CAAA;AAAA,EACf,GAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAcC,yBAAa,OAAO,CAAA;AACxC,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,MAAA,CAAO,KAAK,CAAA,IAAK,MAAA,CAAO,CAAC,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,uBACEC,eAAA,CAACC,wBAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EAAiB,KAAU,OAAA,EAChD,QAAA,EAAA;AAAA,oBAAAJ,cAAA,CAACK,uBAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,MAAA,oCAC1CC,2BAAA,EAAA,EACC,QAAA,kBAAAN,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,YAAA,CAAa,MAAA,GAAS,YAAA,CAAa,MAAM,CAAA,IAAK,YAAA,CAAa,CAAC,CAAA,EAAG,SAAA,EAAU,KAAA,EAAM,CAAA,EAAA,EAD/E,MAEtB,CACD,CAAA,EACH,CAAA;AAAA,IACC,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,cAAc,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,2BAC5CA,cAAA,CAAC,KAAA,EAAA,EAAiB,WAAWC,WAAA,CAAG,mCAAA,EAAqC,GAAGM,kCAAsB,CAAA,EAC3F,gBAAM,IAAA,CAAK,EAAE,QAAQ,WAAA,EAAa,EAAE,GAAA,CAAI,CAACC,IAAG,MAAA,qBAC3CR,cAAA,CAACS,4BACC,QAAA,kBAAAT,cAAA,CAAC,WAAA,EAAA,EAAY,OAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA,EAAG,CAAA,EAAA,EADzC,MAEnB,CACD,CAAA,EAAA,EALO,MAMV,CACD;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}