@lostgradient/cinder 0.4.1 → 0.5.0

package/dist/server/index.server-sqnbagf9.js

@@ -0,0 +1,457 @@
+import {
+  getFixedVirtualWindow,
+  parsePixelLength,
+  resolveVirtualItemHeight,
+  resolveVirtualOverscan
+} from "./index.server-5bxfjsbc.js";
+import {
+  Table
+} from "./index.server-mzj20rfz.js";
+import {
+  Table_row
+} from "./index.server-mz7sqkya.js";
+import {
+  Table_body
+} from "./index.server-d4e6afc0.js";
+import {
+  Table_cell
+} from "./index.server-4kxpbg4p.js";
+import {
+  Table_header
+} from "./index.server-v90d8593.js";
+import {
+  Table_header_cell
+} from "./index.server-8gv0tm3r.js";
+import {
+  Checkbox
+} from "./index.server-9jqd7bxw.js";
+import {
+  useResizeObserver
+} from "./index.server-9w7qdn8h.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/data-table/data-table.svelte
+import * as $ from "svelte/internal/server";
+import { tick, untrack } from "svelte";
+function Data_table($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      columns,
+      rows,
+      caption,
+      sort = undefined,
+      selectable = "none",
+      selectedRowIds = [],
+      getRowId,
+      isRowSelectionDisabled,
+      selectAllLabel = "Select all rows",
+      rowSelectionLabel,
+      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;
+    let resetSyncTimeout;
+    const initialSelectedRowIds = untrack(() => new Set(selectedRowIds));
+    const rowHeaderKey = $.derived(() => (columns.find((column) => column.rowHeader === true) ?? columns[0])?.key);
+    const selectionEnabled = $.derived(() => selectable !== "none");
+    const selectedRowIdSet = $.derived(() => new Set(selectedRowIds));
+    const selectableRowIds = $.derived(() => rows.map((row, index) => ({
+      id: resolveRowId(row, index),
+      disabled: isRowSelectionDisabled?.(row, index) ?? false
+    })).filter((row) => !row.disabled).map((row) => row.id));
+    const allRowsSelected = $.derived(() => selectable === "multiple" && selectableRowIds().length > 0 && selectableRowIds().every((id) => selectedRowIdSet().has(id)));
+    const someRowsSelected = $.derived(() => selectable === "multiple" && selectableRowIds().some((id) => selectedRowIdSet().has(id)));
+    const shouldVirtualizeRows = $.derived(() => virtualized);
+    const resolvedRowHeight = $.derived(() => resolveVirtualItemHeight(rowHeight, 44));
+    const resolvedOverscan = $.derived(() => resolveVirtualOverscan(overscan));
+    const viewportHeight = $.derived(() => measuredViewportHeight || estimateViewportHeight(height, resolvedRowHeight()));
+    const virtualWindow = $.derived(() => getFixedVirtualWindow({
+      itemCount: rows.length,
+      itemHeight: resolvedRowHeight(),
+      scrollOffset,
+      viewportHeight: viewportHeight(),
+      overscan: resolvedOverscan()
+    }));
+    const virtualRows = $.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 = $.derived(getTabbableRowIndex);
+    function mapAlign(align) {
+      if (align === "start")
+        return "left";
+      if (align === "end")
+        return "right";
+      if (align === "center")
+        return "center";
+      return;
+    }
+    function resolveRowId(row, index) {
+      if (getRowId)
+        return getRowId(row, index);
+      const candidate = row["id"];
+      if (typeof candidate === "string" || typeof candidate === "number")
+        return String(candidate);
+      return String(index);
+    }
+    function readableRowLabel(row, index) {
+      const customLabel = rowSelectionLabel?.(row, index)?.trim();
+      if (customLabel)
+        return customLabel;
+      const rowHeaderValue = rowHeaderKey() ? row[rowHeaderKey()] : undefined;
+      if (typeof rowHeaderValue === "string" || typeof rowHeaderValue === "number") {
+        return `Select ${rowHeaderValue}`;
+      }
+      return `Select row ${index + 1}`;
+    }
+    function commitSelectedRowIds(nextSelectedRowIds) {
+      selectedRowIds = selectedRowIds instanceof Set ? new Set(nextSelectedRowIds) : Array.from(nextSelectedRowIds);
+    }
+    function setRowSelected(row, index, nextSelected) {
+      if (!selectionEnabled() || isRowSelectionDisabled?.(row, index))
+        return;
+      const rowId = resolveRowId(row, index);
+      const nextSelectedRowIds = new Set(selectedRowIdSet());
+      if (selectable === "single") {
+        commitSelectedRowIds(nextSelected ? new Set([rowId]) : new Set);
+        return;
+      }
+      if (nextSelected)
+        nextSelectedRowIds.add(rowId);
+      else
+        nextSelectedRowIds.delete(rowId);
+      commitSelectedRowIds(nextSelectedRowIds);
+    }
+    function setAllRowsSelected(nextSelected) {
+      if (selectable !== "multiple")
+        return;
+      const nextSelectedRowIds = new Set(selectedRowIdSet());
+      for (const rowId of selectableRowIds()) {
+        if (nextSelected)
+          nextSelectedRowIds.add(rowId);
+        else
+          nextSelectedRowIds.delete(rowId);
+      }
+      commitSelectedRowIds(nextSelectedRowIds);
+    }
+    function syncSelectionAfterFormReset(event) {
+      if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
+      resetSyncTimeout = setTimeout(() => {
+        resetSyncTimeout = undefined;
+        if (event.defaultPrevented)
+          return;
+        commitSelectedRowIds(initialSelectedRowIds);
+      }, 0);
+    }
+    const observeWrapperResize = useResizeObserver(() => {
+      if (wrapperElement && shouldVirtualizeRows())
+        syncScrollMetrics(wrapperElement);
+    });
+    function estimateViewportHeight(value, fallbackRowHeight) {
+      return parsePixelLength(value) ?? fallbackRowHeight * 10;
+    }
+    function getCaptionHeight(element) {
+      const captionElement = element.querySelector("caption");
+      if (!captionElement)
+        return 0;
+      const rect = captionElement.getBoundingClientRect();
+      return rect.height || captionElement.offsetHeight || 0;
+    }
+    function getHeaderHeight(element) {
+      const header = element.querySelector("thead");
+      if (!header)
+        return 0;
+      const rect = header.getBoundingClientRect();
+      return rect.height || header.offsetHeight || 0;
+    }
+    function syncScrollMetrics(element) {
+      const rect = element.getBoundingClientRect();
+      const nextCaptionHeight = getCaptionHeight(element);
+      const nextHeaderHeight = getHeaderHeight(element);
+      measuredViewportHeight = rect.height || element.clientHeight || parsePixelLength(height) || resolvedRowHeight() * 10;
+      captionHeight = nextCaptionHeight;
+      headerHeight = nextHeaderHeight;
+      scrollOffset = Math.max(0, element.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(element, totalBodyHeight, visibleHeight, chromeBlockSize) {
+      return element.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 element = wrapperElement;
+      if (!element)
+        return;
+      const rowScrollTop = index === 0 ? 0 : getBodyScrollOrigin(captionHeight, headerHeight) + index * resolvedRowHeight();
+      element.scrollTop = Math.min(maxScrollTop(rows.length * resolvedRowHeight(), viewportHeight(), getTableChromeHeight(captionHeight, headerHeight)), rowScrollTop);
+      syncScrollMetrics(element);
+    }
+    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 === " " && selectionEnabled()) {
+        const row = rows[index];
+        if (!row || isRowSelectionDisabled?.(row, index))
+          return;
+        event.preventDefault();
+        setRowSelected(row, index, !selectedRowIdSet().has(resolveRowId(row, index)));
+        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, $.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) => {
+                    if (selectionEnabled()) {
+                      $$renderer6.push("<!--[0-->");
+                      $$renderer6.push(`<th scope="col" class="cinder-table__header-cell cinder-table__header-cell--selection"${$.attr("aria-label", selectable === "single" ? "Row selection" : undefined)}>`);
+                      if (selectable === "multiple") {
+                        $$renderer6.push("<!--[0-->");
+                        Checkbox($$renderer6, {
+                          checked: allRowsSelected(),
+                          indeterminate: someRowsSelected() && !allRowsSelected(),
+                          "aria-label": selectAllLabel,
+                          class: "cinder-table__selection-checkbox",
+                          onchange: (event) => {
+                            const input = event.currentTarget;
+                            setAllRowsSelected(input.checked);
+                          }
+                        });
+                      } else {
+                        $$renderer6.push("<!--[-1-->");
+                      }
+                      $$renderer6.push(`<!--]--></th>`);
+                    } else {
+                      $$renderer6.push("<!--[-1-->");
+                    }
+                    $$renderer6.push(`<!--]--> <!--[-->`);
+                    const each_array = $.ensure_array_like(columns);
+                    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+                      let column = each_array[$$index];
+                      Table_header_cell($$renderer6, $.spread_props([
+                        column.sortable ? { column: column.key } : {},
+                        {
+                          sortable: column.sortable ?? false,
+                          align: mapAlign(column.align) ?? "left",
+                          children: ($$renderer7) => {
+                            $$renderer7.push(`<!---->${$.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"${$.attr("colspan", columns.length + (selectionEnabled() ? 1 : 0))}${$.attr_style("", { height: `${virtualWindow().leadingSize}px` })}></td></tr>`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]--> <!--[-->`);
+                const each_array_1 = $.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, $.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) => {
+                        if (selectionEnabled()) {
+                          $$renderer6.push("<!--[0-->");
+                          const rowSelectionDisabled = isRowSelectionDisabled?.(virtualRow.row, virtualRow.index) ?? false;
+                          const rowId = resolveRowId(virtualRow.row, virtualRow.index);
+                          $$renderer6.push(`<td class="cinder-table__cell cinder-table__cell--selection"${$.attr("data-cinder-selection-disabled", rowSelectionDisabled || undefined)}>`);
+                          Checkbox($$renderer6, {
+                            checked: selectedRowIdSet().has(rowId),
+                            disabled: rowSelectionDisabled,
+                            "aria-label": readableRowLabel(virtualRow.row, virtualRow.index),
+                            class: "cinder-table__selection-checkbox",
+                            onchange: (event) => {
+                              const input = event.currentTarget;
+                              setRowSelected(virtualRow.row, virtualRow.index, input.checked);
+                            }
+                          });
+                          $$renderer6.push(`<!----></td>`);
+                        } else {
+                          $$renderer6.push("<!--[-1-->");
+                        }
+                        $$renderer6.push(`<!--]--> <!--[-->`);
+                        const each_array_2 = $.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(`<!---->${$.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"${$.attr("colspan", columns.length + (selectionEnabled() ? 1 : 0))}${$.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${$.attributes({
+        ...rest,
+        class: $.clsx(classNames("cinder-data-table", scrollable || shouldVirtualizeRows() ? "cinder-table-scroll" : undefined, className)),
+        "data-cinder-virtualized": shouldVirtualizeRows() ? "true" : undefined,
+        "data-cinder-selectable": selectionEnabled() || 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);
+    $.bind_props($$props, { sort, selectedRowIds });
+  }, Data_table);
+}
+
+// src/components/data-table/index.ts
+var data_table_default = Data_table;
+export { Data_table, data_table_default };
+
+//# debugId=F4E3958F60AB4EF864756E2164756E21

package/dist/server/index.server-srawp0s9.js

@@ -0,0 +1,81 @@
+import {
+  Spinner
+} from "./index.server-d2nn25sg.js";
+import {
+  X
+} from "./index.server-vzc1j5mq.js";
+import {
+  _visually_hidden_live_region
+} from "./index.server-44vrcbhz.js";
+import {
+  Check
+} from "./index.server-wwk0f944.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/inline-loading/inline-loading.svelte
+import * as $ from "svelte/internal/server";
+import { untrack } from "svelte";
+function Inline_loading($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const fallbackStatusLabel = { active: "Loading", finished: "Success", error: "Error" };
+    let {
+      status = "inactive",
+      description,
+      iconDescription,
+      successDelay = 1500,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let visualStatus = status;
+    let successTimer = null;
+    const normalizedDescription = $.derived(() => description?.trim() ? description.trim() : undefined);
+    const normalizedIconDescription = $.derived(() => iconDescription?.trim() ? iconDescription.trim() : undefined);
+    const fallbackText = $.derived(() => visualStatus === "inactive" ? "" : fallbackStatusLabel[visualStatus]);
+    const visibleDescription = $.derived(() => visualStatus === "inactive" ? "" : normalizedDescription() ?? fallbackText());
+    const spokenDescription = $.derived(() => visualStatus === "inactive" ? "" : normalizedDescription() ?? normalizedIconDescription() ?? fallbackText());
+    const announcementMessage = $.derived(() => visualStatus === "inactive" ? "" : spokenDescription() === fallbackText() ? spokenDescription() : `${fallbackText()}. ${spokenDescription()}`);
+    function clearSuccessTimer() {
+      if (successTimer !== null) {
+        clearTimeout(successTimer);
+        successTimer = null;
+      }
+    }
+    $$renderer2.push(`<span${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-inline-loading", className)),
+      "data-cinder-status": visualStatus,
+      "aria-hidden": visualStatus === "inactive" ? "true" : undefined
+    })}>`);
+    if (visualStatus !== "inactive") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-inline-loading__indicator" aria-hidden="true">`);
+      if (visualStatus === "active") {
+        $$renderer2.push("<!--[0-->");
+        Spinner($$renderer2, { size: "sm", label: spokenDescription() });
+      } else if (visualStatus === "finished") {
+        $$renderer2.push("<!--[1-->");
+        Check($$renderer2, { size: 14, strokeWidth: 2.25 });
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        X($$renderer2, { size: 14, strokeWidth: 2.25 });
+      }
+      $$renderer2.push(`<!--]--></span> <span class="cinder-inline-loading__label">${$.escape(visibleDescription())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></span> `);
+    _visually_hidden_live_region($$renderer2, { message: announcementMessage() });
+    $$renderer2.push(`<!---->`);
+    $.bind_props($$props, { status });
+  }, Inline_loading);
+}
+
+// src/components/inline-loading/index.ts
+var inline_loading_default = Inline_loading;
+export { Inline_loading, inline_loading_default };
+
+//# debugId=386F184EC6BB99D164756E2164756E21