@lostgradient/cinder 0.1.1 → 0.3.0

package/dist/server/components/data-table/index.js

@@ -0,0 +1,716 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/data-table/data-table.svelte
+import * as $8 from "svelte/internal/server";
+import { tick } from "svelte";
+
+// src/components/table-body/table-body.svelte
+import * as $ from "svelte/internal/server";
+
+// src/components/table/table.context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/components/table/table.context.ts
+var [getTableContextStrict, setTableContext] = createContext();
+var getTableContext = getTableContextStrict;
+var tryGetTableContext = optionalContext(getTableContextStrict);
+var [getTableSectionContextStrict, setTableSectionContext] = createContext();
+var tryGetTableSectionContext = optionalContext(getTableSectionContextStrict);
+var [getTableHeaderSelectionContextStrict, setTableHeaderSelectionContext] = createContext();
+var tryGetTableHeaderSelectionContext = optionalContext(getTableHeaderSelectionContextStrict);
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/table-body/table-body.svelte
+function Table_body($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { class: className, children } = $$props;
+    setTableSectionContext("body");
+    $$renderer2.push(`<tbody${$.attr_class($.clsx(classNames("cinder-table__body", className)))}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></tbody>`);
+  });
+}
+
+// src/components/table-cell/table-cell.svelte
+import * as $2 from "svelte/internal/server";
+function Table_cell($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      align = "left",
+      as = "td",
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    $2.element($$renderer2, as, () => {
+      $$renderer2.push(`${$2.attributes({
+        ...rest,
+        scope: as === "th" ? "row" : undefined,
+        class: $2.clsx(classNames("cinder-table__cell", className)),
+        "data-cinder-align": align
+      })}`);
+    }, () => {
+      children?.($$renderer2);
+      $$renderer2.push(`<!---->`);
+    });
+  });
+}
+
+// src/components/table-header-cell/table-header-cell.svelte
+import * as $3 from "svelte/internal/server";
+function Table_header_cell($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      column,
+      sortable = false,
+      scope = "col",
+      align = "left",
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const table = getTableContext();
+    const isSortable = $3.derived(() => sortable && !!column);
+    const ariaSort = $3.derived(() => isSortable() && table.sort?.column === column ? table.sort?.direction : isSortable() ? "none" : undefined);
+    function handleClick() {
+      if (!sortable || !column)
+        return;
+      table.onSortChange(column);
+    }
+    $$renderer2.push(`<th${$3.attributes({
+      ...rest,
+      scope,
+      class: $3.clsx(classNames("cinder-table__header-cell", className)),
+      "data-cinder-align": align,
+      "data-cinder-sortable": isSortable() || undefined,
+      "aria-sort": ariaSort()
+    })}>`);
+    if (isSortable()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-table__sort-button">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----> <span class="cinder-table__sort-indicator" aria-hidden="true"${$3.attr("data-cinder-direction", ariaSort())}><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      children($$renderer2);
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></th>`);
+  });
+}
+
+// src/components/table-header/table-header.svelte
+import * as $4 from "svelte/internal/server";
+import { untrack } from "svelte";
+function Table_header($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      class: className,
+      children,
+      allSelected,
+      someSelected,
+      onSelectAll,
+      selectAllLabel = "Select all rows"
+    } = $$props;
+    const table = tryGetTableContext();
+    const selectionEnabled = table?.selectionEnabled ?? false;
+    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onSelectAll)) {
+      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+    }
+    let hasSelectionHeaderCell = false;
+    function claimSelectionHeaderCell() {
+      if (hasSelectionHeaderCell) {
+        throw new Error("[Cinder] TableHeader: Table.selectable supports exactly one TableRow inside TableHeader.");
+      }
+      hasSelectionHeaderCell = true;
+    }
+    setTableSectionContext("header");
+    setTableHeaderSelectionContext({
+      get allSelected() {
+        return allSelected ?? false;
+      },
+      get someSelected() {
+        return someSelected ?? false;
+      },
+      get onSelectAll() {
+        return onSelectAll ?? (() => {});
+      },
+      get selectAllLabel() {
+        return selectAllLabel;
+      },
+      claimSelectionHeaderCell
+    });
+    $$renderer2.push(`<thead${$4.attr_class($4.clsx(classNames("cinder-table__header", className)))}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></thead>`);
+  });
+}
+
+// src/components/table-row/table-row.svelte
+import * as $5 from "svelte/internal/server";
+import { untrack as untrack2 } from "svelte";
+
+// ../../node_modules/esm-env/false.js
+var false_default = false;
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/table-row/table-row.svelte
+function Table_row($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      class: className,
+      children,
+      selected,
+      onSelectedChange,
+      selectionLabel,
+      selectionDisabled,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const table = tryGetTableContext();
+    const selectionEnabled = table?.selectionEnabled ?? false;
+    const section = tryGetTableSectionContext();
+    const headerSelection = tryGetTableHeaderSelectionContext();
+    if (selectionEnabled && section === "body") {
+      untrack2(() => {
+        const hasDisabled = selectionDisabled === true;
+        if (!hasDisabled) {
+          const hasSelected = selected !== undefined;
+          const hasOnChange = onSelectedChange !== undefined;
+          const hasLabel = selectionLabel !== undefined;
+          if (!hasSelected || !hasOnChange || !hasLabel) {
+            throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onSelectedChange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
+              !hasSelected && "selected",
+              !hasOnChange && "onSelectedChange",
+              !hasLabel && "selectionLabel"
+            ].filter(Boolean).join(", ")}.`);
+          }
+        }
+      });
+    }
+    if (selectionEnabled && section === undefined) {
+      devWarn("[Cinder] TableRow: rendered outside TableHeader or TableBody while Table.selectable is true. " + "The leading selection cell will not be rendered.");
+    }
+    function handleSelectAllChange(event) {
+      const input = event.currentTarget;
+      headerSelection?.onSelectAll(input.checked);
+    }
+    function handleRowChange(event) {
+      const input = event.currentTarget;
+      onSelectedChange?.(input.checked);
+    }
+    const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
+    if (shouldRenderHeaderSelectionCell) {
+      headerSelection?.claimSelectionHeaderCell();
+    }
+    $$renderer2.push(`<tr${$5.attributes({
+      ...rest,
+      class: $5.clsx(classNames("cinder-table__row", className))
+    })}>`);
+    if (shouldRenderHeaderSelectionCell && headerSelection) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<th scope="col" class="cinder-table__header-cell cinder-table__header-cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"${$5.attr("checked", headerSelection.allSelected, true)}${$5.attr("aria-label", headerSelection.selectAllLabel)}/></th>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    if (selectionEnabled && section === "body") {
+      $$renderer2.push("<!--[0-->");
+      if (selectionDisabled) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<td class="cinder-table__cell cinder-table__cell--selection cinder-table__cell--selection-disabled"><input type="checkbox" class="cinder-table__selection-checkbox" disabled=""${$5.attr("aria-label", selectionLabel ?? "Selection not allowed for this row")}/></td>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<td class="cinder-table__cell cinder-table__cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"${$5.attr("checked", selected, true)}${$5.attr("aria-label", selectionLabel)}/></td>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></tr>`);
+  });
+}
+
+// src/components/table/table.svelte
+import * as $7 from "svelte/internal/server";
+
+// src/utilities/use-resize-observer.svelte.ts
+import * as $6 from "svelte/internal/server";
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
+// src/components/table/table.svelte
+function Table($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      sort = undefined,
+      caption,
+      stickyHeader = false,
+      density = "comfortable",
+      selectable = false,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let captionHeight = 0;
+    const measureCaption = useResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry)
+        return;
+      captionHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+    }, { box: "border-box", enabled: () => stickyHeader });
+    function onSortChange(column) {
+      if (!sort || sort.column !== column) {
+        sort = { column, direction: "ascending" };
+        return;
+      }
+      sort = {
+        column,
+        direction: sort.direction === "ascending" ? "descending" : "ascending"
+      };
+    }
+    setTableContext({
+      get sort() {
+        return sort;
+      },
+      get selectionEnabled() {
+        return selectable;
+      },
+      onSortChange
+    });
+    $$renderer2.push(`<table${$7.attributes({
+      ...rest,
+      class: $7.clsx(classNames("cinder-table", className)),
+      "data-cinder-sticky-header": stickyHeader || undefined,
+      "data-cinder-density": density,
+      "data-cinder-selectable": selectable || undefined
+    }, undefined, undefined, {
+      "--cinder-table-caption-height": caption ? `${captionHeight}px` : undefined
+    })}>`);
+    if (caption) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<caption class="cinder-table__caption">${$7.escape(caption)}</caption>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></table>`);
+    $7.bind_props($$props, { sort });
+  });
+}
+
+// src/utilities/fixed-virtual-window.ts
+function resolveVirtualItemHeight(itemHeight, fallback = 1) {
+  if (Number.isFinite(itemHeight) && itemHeight > 0)
+    return itemHeight;
+  return fallback;
+}
+function resolveVirtualOverscan(overscan) {
+  if (!Number.isFinite(overscan) || overscan === undefined)
+    return 0;
+  return Math.max(0, Math.floor(overscan));
+}
+function parsePixelLength(value) {
+  if (value === undefined)
+    return;
+  const match = /^([0-9]+(?:\.[0-9]+)?)px$/.exec(value.trim());
+  if (!match)
+    return;
+  return Number(match[1]);
+}
+function getFixedVirtualWindow({
+  itemCount,
+  itemHeight,
+  scrollOffset,
+  viewportHeight,
+  overscan,
+  getKey
+}) {
+  const count = Math.max(0, Math.floor(itemCount));
+  const size = resolveVirtualItemHeight(itemHeight);
+  const totalSize = count * size;
+  if (count === 0) {
+    return {
+      items: [],
+      totalSize,
+      leadingSize: 0,
+      trailingSize: 0,
+      startIndex: 0,
+      endIndex: 0
+    };
+  }
+  const resolvedViewportHeight = Number.isFinite(viewportHeight) && viewportHeight > 0 ? viewportHeight : size * 10;
+  const resolvedOverscan = resolveVirtualOverscan(overscan);
+  const maxScrollOffset = Math.max(0, totalSize - resolvedViewportHeight);
+  const offset = Math.min(Math.max(0, scrollOffset), maxScrollOffset);
+  const visibleStartIndex = Math.min(count - 1, Math.floor(offset / size));
+  const visibleCount = Math.max(1, Math.ceil(resolvedViewportHeight / size));
+  const startIndex = Math.max(0, visibleStartIndex - resolvedOverscan);
+  const endIndex = Math.min(count, startIndex + visibleCount + resolvedOverscan * 2);
+  const items = Array.from({ length: endIndex - startIndex }, (_, indexOffset) => {
+    const index = startIndex + indexOffset;
+    return {
+      index,
+      key: getKey?.(index) ?? index,
+      start: index * size,
+      size
+    };
+  });
+  const firstItem = items[0];
+  const lastItem = items.at(-1);
+  const leadingSize = firstItem?.start ?? 0;
+  const trailingSize = lastItem ? Math.max(0, totalSize - (lastItem.start + lastItem.size)) : 0;
+  return {
+    items,
+    totalSize,
+    leadingSize,
+    trailingSize,
+    startIndex,
+    endIndex
+  };
+}
+
+// src/components/data-table/data-table.svelte
+function Data_table($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      columns,
+      rows,
+      caption,
+      sort = undefined,
+      stickyHeader = false,
+      density = "comfortable",
+      scrollable = false,
+      virtualized = false,
+      rowHeight = 44,
+      overscan = 5,
+      height = "24rem",
+      stickToBottom = false,
+      onscroll: onScroll,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let wrapperElement = undefined;
+    let scrollOffset = 0;
+    let measuredViewportHeight = 0;
+    let captionHeight = 0;
+    let headerHeight = 0;
+    let activeRowIndex = 0;
+    let previousRowCount = 0;
+    let hasObservedRowCount = false;
+    let shouldStickAfterAppend = false;
+    const rowHeaderKey = $8.derived(() => (columns.find((column) => column.rowHeader === true) ?? columns[0])?.key);
+    const shouldVirtualizeRows = $8.derived(() => virtualized);
+    const resolvedRowHeight = $8.derived(() => resolveVirtualItemHeight(rowHeight, 44));
+    const resolvedOverscan = $8.derived(() => resolveVirtualOverscan(overscan));
+    const viewportHeight = $8.derived(() => measuredViewportHeight || estimateViewportHeight(height, resolvedRowHeight()));
+    const virtualWindow = $8.derived(() => getFixedVirtualWindow({
+      itemCount: rows.length,
+      itemHeight: resolvedRowHeight(),
+      scrollOffset,
+      viewportHeight: viewportHeight(),
+      overscan: resolvedOverscan()
+    }));
+    const virtualRows = $8.derived(() => shouldVirtualizeRows() ? virtualWindow().items.flatMap((virtualItem) => {
+      const row = rows[virtualItem.index];
+      return row === undefined ? [] : [{ ...virtualItem, row }];
+    }) : rows.map((row, index) => ({
+      row,
+      index,
+      key: index,
+      start: index * resolvedRowHeight(),
+      size: resolvedRowHeight()
+    })));
+    const tabbableRowIndex = $8.derived(getTabbableRowIndex);
+    function mapAlign(align) {
+      if (align === "start")
+        return "left";
+      if (align === "end")
+        return "right";
+      if (align === "center")
+        return "center";
+      return;
+    }
+    function estimateViewportHeight(value, fallbackRowHeight) {
+      return parsePixelLength(value) ?? fallbackRowHeight * 10;
+    }
+    function getCaptionHeight(element2) {
+      const captionElement = element2.querySelector("caption");
+      if (!captionElement)
+        return 0;
+      const rect = captionElement.getBoundingClientRect();
+      return rect.height || captionElement.offsetHeight || 0;
+    }
+    function getHeaderHeight(element2) {
+      const header = element2.querySelector("thead");
+      if (!header)
+        return 0;
+      const rect = header.getBoundingClientRect();
+      return rect.height || header.offsetHeight || 0;
+    }
+    function syncScrollMetrics(element2) {
+      const rect = element2.getBoundingClientRect();
+      const nextCaptionHeight = getCaptionHeight(element2);
+      const nextHeaderHeight = getHeaderHeight(element2);
+      measuredViewportHeight = rect.height || element2.clientHeight || parsePixelLength(height) || resolvedRowHeight() * 10;
+      captionHeight = nextCaptionHeight;
+      headerHeight = nextHeaderHeight;
+      scrollOffset = Math.max(0, element2.scrollTop - getBodyScrollOrigin(nextCaptionHeight, nextHeaderHeight));
+    }
+    function handleWrapperScroll(event) {
+      if (typeof onScroll === "function")
+        onScroll(event);
+      if (!shouldVirtualizeRows())
+        return;
+      syncScrollMetrics(event.currentTarget);
+    }
+    function maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) {
+      return Math.max(0, chromeBlockSize + totalBodyHeight - visibleHeight);
+    }
+    function getTableChromeHeight(captionBlockSize, headerBlockSize) {
+      return captionBlockSize + headerBlockSize;
+    }
+    function getBodyScrollOrigin(captionBlockSize, headerBlockSize) {
+      return stickyHeader ? captionBlockSize : getTableChromeHeight(captionBlockSize, headerBlockSize);
+    }
+    function getTabbableRowIndex() {
+      if (!shouldVirtualizeRows())
+        return activeRowIndex;
+      if (virtualRows().some((virtualRow) => virtualRow.index === activeRowIndex)) {
+        return activeRowIndex;
+      }
+      return virtualRows()[0]?.index ?? activeRowIndex;
+    }
+    function isAtBottom(element2, totalBodyHeight, visibleHeight, chromeBlockSize) {
+      return element2.scrollTop >= maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) - 1;
+    }
+    function clampRowIndex(index) {
+      return Math.min(Math.max(0, index), Math.max(0, rows.length - 1));
+    }
+    function scrollToRow(index) {
+      const element2 = wrapperElement;
+      if (!element2)
+        return;
+      const rowScrollTop = index === 0 ? 0 : getBodyScrollOrigin(captionHeight, headerHeight) + index * resolvedRowHeight();
+      element2.scrollTop = Math.min(maxScrollTop(rows.length * resolvedRowHeight(), viewportHeight(), getTableChromeHeight(captionHeight, headerHeight)), rowScrollTop);
+      syncScrollMetrics(element2);
+    }
+    function focusRow(index) {
+      const nextIndex = clampRowIndex(index);
+      activeRowIndex = nextIndex;
+      scrollToRow(nextIndex);
+      tick().then(() => {
+        const row = wrapperElement?.querySelector(`[data-cinder-data-table-row-index="${nextIndex}"]`);
+        row?.focus({ preventScroll: true });
+      });
+    }
+    function handleRowFocus(index) {
+      activeRowIndex = clampRowIndex(index);
+    }
+    function handleRowKeydown(event, index) {
+      if (!shouldVirtualizeRows())
+        return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        focusRow(index + 1);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        focusRow(index - 1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusRow(0);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusRow(rows.length - 1);
+      }
+    }
+    function table($$renderer3) {
+      Table($$renderer3, $8.spread_props([
+        caption !== undefined ? { caption } : {},
+        shouldVirtualizeRows() ? { "aria-rowcount": rows.length + 1 } : {},
+        {
+          stickyHeader,
+          density,
+          get sort() {
+            return sort;
+          },
+          set sort($$value) {
+            sort = $$value;
+            $$settled = false;
+          },
+          children: ($$renderer4) => {
+            Table_header($$renderer4, {
+              children: ($$renderer5) => {
+                Table_row($$renderer5, {
+                  children: ($$renderer6) => {
+                    $$renderer6.push(`<!--[-->`);
+                    const each_array = $8.ensure_array_like(columns);
+                    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+                      let column = each_array[$$index];
+                      Table_header_cell($$renderer6, $8.spread_props([
+                        column.sortable ? { column: column.key } : {},
+                        {
+                          sortable: column.sortable ?? false,
+                          align: mapAlign(column.align) ?? "left",
+                          children: ($$renderer7) => {
+                            $$renderer7.push(`<!---->${$8.escape(column.label)}`);
+                          },
+                          $$slots: { default: true }
+                        }
+                      ]));
+                    }
+                    $$renderer6.push(`<!--]-->`);
+                  },
+                  $$slots: { default: true }
+                });
+              },
+              $$slots: { default: true }
+            });
+            $$renderer4.push(`<!----> `);
+            Table_body($$renderer4, {
+              children: ($$renderer5) => {
+                if (shouldVirtualizeRows() && virtualWindow().leadingSize > 0) {
+                  $$renderer5.push("<!--[0-->");
+                  $$renderer5.push(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"${$8.attr("colspan", columns.length)}${$8.attr_style("", { height: `${virtualWindow().leadingSize}px` })}></td></tr>`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]--> <!--[-->`);
+                const each_array_1 = $8.ensure_array_like(virtualRows());
+                for (let $$index_2 = 0, $$length = each_array_1.length;$$index_2 < $$length; $$index_2++) {
+                  let virtualRow = each_array_1[$$index_2];
+                  Table_row($$renderer5, $8.spread_props([
+                    shouldVirtualizeRows() ? {
+                      "aria-rowindex": virtualRow.index + 2,
+                      tabindex: tabbableRowIndex() === virtualRow.index ? 0 : -1,
+                      "data-cinder-virtual-row": "true",
+                      "data-cinder-data-table-row-index": virtualRow.index,
+                      onfocus: () => handleRowFocus(virtualRow.index),
+                      onkeydown: (event) => handleRowKeydown(event, virtualRow.index)
+                    } : {},
+                    {
+                      children: ($$renderer6) => {
+                        $$renderer6.push(`<!--[-->`);
+                        const each_array_2 = $8.ensure_array_like(columns);
+                        for (let $$index_1 = 0, $$length2 = each_array_2.length;$$index_1 < $$length2; $$index_1++) {
+                          let column = each_array_2[$$index_1];
+                          Table_cell($$renderer6, {
+                            as: column.key === rowHeaderKey() ? "th" : "td",
+                            align: mapAlign(column.align) ?? "left",
+                            children: ($$renderer7) => {
+                              $$renderer7.push(`<!---->${$8.escape(virtualRow.row[column.key])}`);
+                            },
+                            $$slots: { default: true }
+                          });
+                        }
+                        $$renderer6.push(`<!--]-->`);
+                      },
+                      $$slots: { default: true }
+                    }
+                  ]));
+                }
+                $$renderer5.push(`<!--]--> `);
+                if (shouldVirtualizeRows() && virtualWindow().trailingSize > 0) {
+                  $$renderer5.push("<!--[0-->");
+                  $$renderer5.push(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"${$8.attr("colspan", columns.length)}${$8.attr_style("", { height: `${virtualWindow().trailingSize}px` })}></td></tr>`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]-->`);
+              },
+              $$slots: { default: true }
+            });
+            $$renderer4.push(`<!---->`);
+          },
+          $$slots: { default: true }
+        }
+      ]));
+    }
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div${$8.attributes({
+        ...rest,
+        class: $8.clsx(classNames("cinder-data-table", scrollable || shouldVirtualizeRows() ? "cinder-table-scroll" : undefined, className)),
+        "data-cinder-virtualized": shouldVirtualizeRows() ? "true" : undefined
+      }, undefined, undefined, {
+        "--cinder-data-table-height": shouldVirtualizeRows() ? height : undefined,
+        "--_cinder-data-table-row-height": shouldVirtualizeRows() ? `${resolvedRowHeight()}px` : undefined
+      })}>`);
+      table($$renderer3);
+      $$renderer3.push(`<!----></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    $8.bind_props($$props, { sort });
+  });
+}
+
+// src/components/data-table/index.ts
+var data_table_default = Data_table;
+export {
+  data_table_default as default,
+  Data_table as DataTable
+};
+
+//# debugId=74EE5DCC206C592D64756E2164756E21