@plumile/ui 0.1.56 → 0.1.57

package/lib/esm/components/data-table/DataTable.js

@@ -1,141 +1,74 @@
-import { jsx as i, Fragment as S, jsxs as j } from "react/jsx-runtime";
-import { emptyCell as D, emptyRow as F, row as H, rowEven as I, rowOdd as O, cell as U, primaryCell as V, headerCell as _, primaryHeaderCell as B, headerRow as K, header as M, body as q, container as z, hideBelowRecipe as G } from "./DataTable.css.js";
-import { cx as t } from "../../theme/tools.js";
-import { useUiTranslation as J } from "../../i18n/useUiTranslation.js";
-const Q = "minmax(0, 1fr)", v = (n) => n == null ? null : G({ minVisibleAt: n }), W = (n, a) => typeof a == "string" && a !== "" ? { gridTemplateColumns: a } : {
-  gridTemplateColumns: `repeat(${n}, ${Q})`
-}, ee = ({
-  columns: n,
-  rows: a,
-  getRowId: C,
-  emptyState: b,
-  className: N,
-  headerClassName: E,
-  bodyClassName: k,
-  rowClassName: y,
-  gridTemplateClassName: c,
-  gridTemplateColumns: R,
-  kind: g,
-  classes: e
-}) => {
-  const { t: L } = J(), o = g ?? "default", T = /* @__PURE__ */ i("div", { className: t(D, e?.emptyCell), children: L("common.table.empty") }), x = b ?? T, A = a.length === 0;
-  let m;
-  c == null && (m = W(
-    n.length,
-    R
-  ));
-  const f = [];
-  c != null && f.push(c);
-  let u;
-  return A ? u = /* @__PURE__ */ i("div", { className: t(F, e?.emptyRow), role: "row", children: /* @__PURE__ */ i("div", { role: "cell", children: x }) }) : u = /* @__PURE__ */ i(S, { children: a.map((l, s) => {
-    const h = C(l, s), d = [H({ kind: o }), e?.row];
-    s % 2 === 0 ? d.push(
-      I({ kind: o }),
-      e?.rowEven
-    ) : d.push(
-      O({ kind: o }),
-      e?.rowOdd
-    );
-    for (const r of f)
-      d.push(r);
-    if (y != null) {
-      const r = y(l, s);
-      r != null && d.push(r);
-    }
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        role: "row",
-        className: t(...d),
-        style: m,
-        children: n.map((r) => {
-          const p = [
-            U({ kind: o }),
-            e?.cell
-          ], w = v(r.minVisibleAt);
-          w != null && p.push(w), r.className != null && p.push(r.className), r.isPrimary && p.push(V, e?.primaryCell);
-          const P = r.cell(l);
-          return /* @__PURE__ */ i(
-            "div",
-            {
-              role: "cell",
-              className: t(...p),
-              children: P
-            },
-            r.id
-          );
-        })
-      },
-      h
-    );
-  }) }), /* @__PURE__ */ j(
-    "div",
-    {
-      className: t(
-        z({ kind: o }),
-        e?.container,
-        N
-      ),
-      role: "table",
-      children: [
-        /* @__PURE__ */ i(
-          "div",
-          {
-            className: t(
-              M({ kind: o }),
-              e?.header,
-              E
-            ),
-            role: "rowgroup",
-            children: /* @__PURE__ */ i(
-              "div",
-              {
-                className: t(
-                  K,
-                  e?.headerRow,
-                  ...f
-                ),
-                role: "row",
-                style: m,
-                children: n.map((l) => {
-                  const s = [
-                    _({ kind: o }),
-                    e?.headerCell
-                  ], h = v(l.minVisibleAt);
-                  return h != null && s.push(h), l.className != null && s.push(l.className), l.isPrimary && s.push(
-                    B,
-                    e?.primaryHeaderCell
-                  ), /* @__PURE__ */ i(
-                    "div",
-                    {
-                      role: "columnheader",
-                      className: t(...s),
-                      children: l.header
-                    },
-                    l.id
-                  );
-                })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ i(
-          "div",
-          {
-            className: t(
-              q({ kind: o }),
-              e?.body,
-              k
-            ),
-            role: "rowgroup",
-            children: u
-          }
-        )
-      ]
-    }
-  );
+import { cx as e } from "../../theme/tools.js";
+import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
+import { body as n, cell as r, container as i, emptyCell as a, emptyRow as o, header as s, headerCell as c, headerRow as l, hideBelowRecipe as u, primaryCell as d, primaryHeaderCell as f, row as p, rowEven as m, rowOdd as h } from "./DataTable.css.js";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/data-table/DataTable.tsx
+var y = "minmax(0, 1fr)", b = (e) => e == null ? null : u({ minVisibleAt: e }), x = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${y})` }, S = ({ columns: u, rows: y, getRowId: S, emptyState: C, className: w, headerClassName: T, bodyClassName: E, rowClassName: D, gridTemplateClassName: O, gridTemplateColumns: k, kind: A, classes: j }) => {
+	let { t: M } = t(), N = A ?? "default", P = /* @__PURE__ */ _("div", {
+		className: e(a, j?.emptyCell),
+		children: M("common.table.empty")
+	}), F = C ?? P, I = y.length === 0, L;
+	O ?? (L = x(u.length, k));
+	let R = [];
+	O != null && R.push(O);
+	let z;
+	return z = I ? /* @__PURE__ */ _("div", {
+		className: e(o, j?.emptyRow),
+		role: "row",
+		children: /* @__PURE__ */ _("div", {
+			role: "cell",
+			children: F
+		})
+	}) : /* @__PURE__ */ _(g, { children: y.map((t, n) => {
+		let i = S(t, n), a = [p({ kind: N }), j?.row];
+		n % 2 == 0 ? a.push(m({ kind: N }), j?.rowEven) : a.push(h({ kind: N }), j?.rowOdd);
+		for (let e of R) a.push(e);
+		if (D != null) {
+			let e = D(t, n);
+			e != null && a.push(e);
+		}
+		return /* @__PURE__ */ _("div", {
+			role: "row",
+			className: e(...a),
+			style: L,
+			children: u.map((n) => {
+				let i = [r({ kind: N }), j?.cell], a = b(n.minVisibleAt);
+				a != null && i.push(a), n.className != null && i.push(n.className), n.isPrimary && i.push(d, j?.primaryCell);
+				let o = n.cell(t);
+				return /* @__PURE__ */ _("div", {
+					role: "cell",
+					className: e(...i),
+					children: o
+				}, n.id);
+			})
+		}, i);
+	}) }), /* @__PURE__ */ v("div", {
+		className: e(i({ kind: N }), j?.container, w),
+		role: "table",
+		children: [/* @__PURE__ */ _("div", {
+			className: e(s({ kind: N }), j?.header, T),
+			role: "rowgroup",
+			children: /* @__PURE__ */ _("div", {
+				className: e(l, j?.headerRow, ...R),
+				role: "row",
+				style: L,
+				children: u.map((t) => {
+					let n = [c({ kind: N }), j?.headerCell], r = b(t.minVisibleAt);
+					return r != null && n.push(r), t.className != null && n.push(t.className), t.isPrimary && n.push(f, j?.primaryHeaderCell), /* @__PURE__ */ _("div", {
+						role: "columnheader",
+						className: e(...n),
+						children: t.header
+					}, t.id);
+				})
+			})
+		}), /* @__PURE__ */ _("div", {
+			className: e(n({ kind: N }), j?.body, E),
+			role: "rowgroup",
+			children: z
+		})]
+	});
 };
-export {
-  ee as DataTable
-};
-//# sourceMappingURL=DataTable.js.map
+//#endregion
+export { S as DataTable };
+
+//# sourceMappingURL=DataTable.js.map

package/lib/esm/components/data-table/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { type CSSProperties, type JSX } from 'react';\n\nimport * as styles from './DataTable.css.js';\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\n\nexport type DataTableColumn<Row> = {\n  id: string;\n  header: JSX.Element | string;\n  cell: (row: Row) => JSX.Element | string | null;\n  minVisibleAt?: DataTableBreakpoint;\n  className?: string;\n  isPrimary?: boolean;\n};\n\nexport type GetRowId<Row> = (row: Row, index: number) => string;\n\nexport type DataTableKind = NonNullable<\n  Parameters<typeof styles.container>[0]\n>['kind'];\n\ntype DataTableSlot =\n  | 'container'\n  | 'header'\n  | 'headerRow'\n  | 'headerCell'\n  | 'primaryHeaderCell'\n  | 'body'\n  | 'row'\n  | 'rowEven'\n  | 'rowOdd'\n  | 'cell'\n  | 'primaryCell'\n  | 'emptyRow'\n  | 'emptyCell';\n\nexport type DataTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  rowClassName?: (row: Row, index: number) => string | null | undefined;\n  gridTemplateClassName?: string;\n  gridTemplateColumns?: string;\n  kind?: DataTableKind;\n  classes?: SlotClasses<DataTableSlot>;\n};\n\nconst DEFAULT_TEMPLATE_CELL = 'minmax(0, 1fr)';\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n\n  return styles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst buildInlineTemplate = (\n  columnCount: number,\n  gridTemplateColumns?: string,\n): CSSProperties => {\n  if (typeof gridTemplateColumns === 'string' && gridTemplateColumns !== '') {\n    return { gridTemplateColumns };\n  }\n  return {\n    gridTemplateColumns: `repeat(${columnCount}, ${DEFAULT_TEMPLATE_CELL})`,\n  };\n};\n\n/**\n * Generic responsive data table component.\n */\nexport const DataTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  headerClassName,\n  bodyClassName,\n  rowClassName,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  kind,\n  classes,\n}: DataTableProps<Row>): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedKind: DataTableKind = kind ?? 'default';\n  const defaultEmptyState = (\n    <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n      {t('common.table.empty')}\n    </div>\n  ) as JSX.Element;\n  const resolvedEmptyState = emptyState ?? defaultEmptyState;\n  const showEmpty = rows.length === 0;\n\n  let inlineTemplateStyle: CSSProperties | undefined;\n  if (gridTemplateClassName == null) {\n    inlineTemplateStyle = buildInlineTemplate(\n      columns.length,\n      gridTemplateColumns,\n    );\n  }\n\n  const sharedRowClasses: string[] = [];\n  if (gridTemplateClassName != null) {\n    sharedRowClasses.push(gridTemplateClassName);\n  }\n\n  let rowsContent: JSX.Element;\n  if (showEmpty) {\n    rowsContent = (\n      <div className={cx(styles.emptyRow, classes?.emptyRow)} role=\"row\">\n        <div role=\"cell\">{resolvedEmptyState}</div>\n      </div>\n    );\n  } else {\n    rowsContent = (\n      <>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\n          const rowClasses = [styles.row({ kind: resolvedKind }), classes?.row];\n          if (index % 2 === 0) {\n            rowClasses.push(\n              styles.rowEven({ kind: resolvedKind }),\n              classes?.rowEven,\n            );\n          } else {\n            rowClasses.push(\n              styles.rowOdd({ kind: resolvedKind }),\n              classes?.rowOdd,\n            );\n          }\n          for (const sharedClass of sharedRowClasses) {\n            rowClasses.push(sharedClass);\n          }\n\n          if (rowClassName != null) {\n            const customClass = rowClassName(row, index);\n            if (customClass != null) {\n              rowClasses.push(customClass);\n            }\n          }\n\n          return (\n            <div\n              key={rowId}\n              role=\"row\"\n              className={cx(...rowClasses)}\n              style={inlineTemplateStyle}\n            >\n              {columns.map((column) => {\n                const cellClasses = [\n                  styles.cell({ kind: resolvedKind }),\n                  classes?.cell,\n                ];\n                const visibilityClass = getVisibilityClass(column.minVisibleAt);\n\n                if (visibilityClass != null) {\n                  cellClasses.push(visibilityClass);\n                }\n\n                if (column.className != null) {\n                  cellClasses.push(column.className);\n                }\n                if (column.isPrimary) {\n                  cellClasses.push(styles.primaryCell, classes?.primaryCell);\n                }\n\n                const content = column.cell(row);\n\n                return (\n                  <div\n                    key={column.id}\n                    role=\"cell\"\n                    className={cx(...cellClasses)}\n                  >\n                    {content}\n                  </div>\n                );\n              })}\n            </div>\n          );\n        })}\n      </>\n    );\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.container({ kind: resolvedKind }),\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n    >\n      <div\n        className={cx(\n          styles.header({ kind: resolvedKind }),\n          classes?.header,\n          headerClassName,\n        )}\n        role=\"rowgroup\"\n      >\n        <div\n          className={cx(\n            styles.headerRow,\n            classes?.headerRow,\n            ...sharedRowClasses,\n          )}\n          role=\"row\"\n          style={inlineTemplateStyle}\n        >\n          {columns.map((column) => {\n            const headerClasses = [\n              styles.headerCell({ kind: resolvedKind }),\n              classes?.headerCell,\n            ];\n            const visibilityClass = getVisibilityClass(column.minVisibleAt);\n            if (visibilityClass != null) {\n              headerClasses.push(visibilityClass);\n            }\n\n            if (column.className != null) {\n              headerClasses.push(column.className);\n            }\n            if (column.isPrimary) {\n              headerClasses.push(\n                styles.primaryHeaderCell,\n                classes?.primaryHeaderCell,\n              );\n            }\n\n            return (\n              <div\n                key={column.id}\n                role=\"columnheader\"\n                className={cx(...headerClasses)}\n              >\n                {column.header}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      <div\n        className={cx(\n          styles.body({ kind: resolvedKind }),\n          classes?.body,\n          bodyClassName,\n        )}\n        role=\"rowgroup\"\n      >\n        {rowsContent}\n      </div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_TEMPLATE_CELL","getVisibilityClass","minVisibleAt","styles.hideBelowRecipe","buildInlineTemplate","columnCount","gridTemplateColumns","DataTable","columns","rows","getRowId","emptyState","className","headerClassName","bodyClassName","rowClassName","gridTemplateClassName","kind","classes","t","useUiTranslation","resolvedKind","defaultEmptyState","jsx","cx","styles.emptyCell","resolvedEmptyState","showEmpty","inlineTemplateStyle","sharedRowClasses","rowsContent","styles.emptyRow","Fragment","row","index","rowId","rowClasses","styles.row","styles.rowEven","styles.rowOdd","sharedClass","customClass","column","cellClasses","styles.cell","visibilityClass","styles.primaryCell","content","jsxs","styles.container","styles.header","styles.headerRow","headerClasses","styles.headerCell","styles.primaryHeaderCell","styles.body"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { type CSSProperties, type JSX } from 'react';\n\nimport * as styles from './DataTable.css.js';\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\n\nexport type DataTableColumn<Row> = {\n  id: string;\n  header: JSX.Element | string;\n  cell: (row: Row) => JSX.Element | string | null;\n  minVisibleAt?: DataTableBreakpoint;\n  className?: string;\n  isPrimary?: boolean;\n};\n\nexport type GetRowId<Row> = (row: Row, index: number) => string;\n\nexport type DataTableKind = NonNullable<\n  Parameters<typeof styles.container>[0]\n>['kind'];\n\ntype DataTableSlot =\n  | 'container'\n  | 'header'\n  | 'headerRow'\n  | 'headerCell'\n  | 'primaryHeaderCell'\n  | 'body'\n  | 'row'\n  | 'rowEven'\n  | 'rowOdd'\n  | 'cell'\n  | 'primaryCell'\n  | 'emptyRow'\n  | 'emptyCell';\n\nexport type DataTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  rowClassName?: (row: Row, index: number) => string | null | undefined;\n  gridTemplateClassName?: string;\n  gridTemplateColumns?: string;\n  kind?: DataTableKind;\n  classes?: SlotClasses<DataTableSlot>;\n};\n\nconst DEFAULT_TEMPLATE_CELL = 'minmax(0, 1fr)';\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n\n  return styles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst buildInlineTemplate = (\n  columnCount: number,\n  gridTemplateColumns?: string,\n): CSSProperties => {\n  if (typeof gridTemplateColumns === 'string' && gridTemplateColumns !== '') {\n    return { gridTemplateColumns };\n  }\n  return {\n    gridTemplateColumns: `repeat(${columnCount}, ${DEFAULT_TEMPLATE_CELL})`,\n  };\n};\n\n/**\n * Generic responsive data table component.\n */\nexport const DataTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  headerClassName,\n  bodyClassName,\n  rowClassName,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  kind,\n  classes,\n}: DataTableProps<Row>): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedKind: DataTableKind = kind ?? 'default';\n  const defaultEmptyState = (\n    <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n      {t('common.table.empty')}\n    </div>\n  ) as JSX.Element;\n  const resolvedEmptyState = emptyState ?? defaultEmptyState;\n  const showEmpty = rows.length === 0;\n\n  let inlineTemplateStyle: CSSProperties | undefined;\n  if (gridTemplateClassName == null) {\n    inlineTemplateStyle = buildInlineTemplate(\n      columns.length,\n      gridTemplateColumns,\n    );\n  }\n\n  const sharedRowClasses: string[] = [];\n  if (gridTemplateClassName != null) {\n    sharedRowClasses.push(gridTemplateClassName);\n  }\n\n  let rowsContent: JSX.Element;\n  if (showEmpty) {\n    rowsContent = (\n      <div className={cx(styles.emptyRow, classes?.emptyRow)} role=\"row\">\n        <div role=\"cell\">{resolvedEmptyState}</div>\n      </div>\n    );\n  } else {\n    rowsContent = (\n      <>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\n          const rowClasses = [styles.row({ kind: resolvedKind }), classes?.row];\n          if (index % 2 === 0) {\n            rowClasses.push(\n              styles.rowEven({ kind: resolvedKind }),\n              classes?.rowEven,\n            );\n          } else {\n            rowClasses.push(\n              styles.rowOdd({ kind: resolvedKind }),\n              classes?.rowOdd,\n            );\n          }\n          for (const sharedClass of sharedRowClasses) {\n            rowClasses.push(sharedClass);\n          }\n\n          if (rowClassName != null) {\n            const customClass = rowClassName(row, index);\n            if (customClass != null) {\n              rowClasses.push(customClass);\n            }\n          }\n\n          return (\n            <div\n              key={rowId}\n              role=\"row\"\n              className={cx(...rowClasses)}\n              style={inlineTemplateStyle}\n            >\n              {columns.map((column) => {\n                const cellClasses = [\n                  styles.cell({ kind: resolvedKind }),\n                  classes?.cell,\n                ];\n                const visibilityClass = getVisibilityClass(column.minVisibleAt);\n\n                if (visibilityClass != null) {\n                  cellClasses.push(visibilityClass);\n                }\n\n                if (column.className != null) {\n                  cellClasses.push(column.className);\n                }\n                if (column.isPrimary) {\n                  cellClasses.push(styles.primaryCell, classes?.primaryCell);\n                }\n\n                const content = column.cell(row);\n\n                return (\n                  <div\n                    key={column.id}\n                    role=\"cell\"\n                    className={cx(...cellClasses)}\n                  >\n                    {content}\n                  </div>\n                );\n              })}\n            </div>\n          );\n        })}\n      </>\n    );\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.container({ kind: resolvedKind }),\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n    >\n      <div\n        className={cx(\n          styles.header({ kind: resolvedKind }),\n          classes?.header,\n          headerClassName,\n        )}\n        role=\"rowgroup\"\n      >\n        <div\n          className={cx(\n            styles.headerRow,\n            classes?.headerRow,\n            ...sharedRowClasses,\n          )}\n          role=\"row\"\n          style={inlineTemplateStyle}\n        >\n          {columns.map((column) => {\n            const headerClasses = [\n              styles.headerCell({ kind: resolvedKind }),\n              classes?.headerCell,\n            ];\n            const visibilityClass = getVisibilityClass(column.minVisibleAt);\n            if (visibilityClass != null) {\n              headerClasses.push(visibilityClass);\n            }\n\n            if (column.className != null) {\n              headerClasses.push(column.className);\n            }\n            if (column.isPrimary) {\n              headerClasses.push(\n                styles.primaryHeaderCell,\n                classes?.primaryHeaderCell,\n              );\n            }\n\n            return (\n              <div\n                key={column.id}\n                role=\"columnheader\"\n                className={cx(...headerClasses)}\n              >\n                {column.header}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      <div\n        className={cx(\n          styles.body({ kind: resolvedKind }),\n          classes?.body,\n          bodyClassName,\n        )}\n        role=\"rowgroup\"\n      >\n        {rowsContent}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/components/data-table/TableCell.css.js

@@ -1,15 +1,18 @@
-/* empty css                                       */
-/* empty css                             */
-import { createRuntimeFn as t } from "@vanilla-extract/recipes/createRuntimeFn";
-var v = "x6ceqz0 txvbqbu6f txvbqb9io txvbqbco txvbqbao6 txvbqbv8p", x = t({ defaultClassName: "x6ceqz1", variantClassNames: { align: { start: "x6ceqz2", center: "x6ceqz3", end: "x6ceqz4" } }, defaultVariants: { align: "start" }, compoundVariants: [] }), q = "x6ceqz5 txvbqbv8p", r = "x6ceqz6 txvbqbv8p txvbqbuw6", c = "x6ceqz7 txvbqbv8p txvbqbuw6", i = "x6ceqz8 txvbqbv8r txvbqb8o", s = "x6ceqz9 txvbqbl6f txvbqbt6f txvbqbuw6", m = "x6ceqza txvbqbuwx";
-export {
-  x as alignRecipe,
-  v as base,
-  c as date,
-  s as ellipsis,
-  i as muted,
-  r as number,
-  m as summary,
-  q as text
-};
-//# sourceMappingURL=TableCell.css.js.map
+/* empty css                                   */
+/* empty css                         */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/data-table/TableCell.css.ts
+var t = "x6ceqz0 txvbqbu6f txvbqb9io txvbqbco txvbqbao6 txvbqbv8p", n = e({
+	defaultClassName: "x6ceqz1",
+	variantClassNames: { align: {
+		start: "x6ceqz2",
+		center: "x6ceqz3",
+		end: "x6ceqz4"
+	} },
+	defaultVariants: { align: "start" },
+	compoundVariants: []
+}), r = "x6ceqz5 txvbqbv8p", i = "x6ceqz6 txvbqbv8p txvbqbuw6", a = "x6ceqz7 txvbqbv8p txvbqbuw6", o = "x6ceqz8 txvbqbv8r txvbqb8o", s = "x6ceqz9 txvbqbl6f txvbqbt6f txvbqbuw6", c = "x6ceqza txvbqbuwx";
+//#endregion
+export { n as alignRecipe, t as base, a as date, s as ellipsis, o as muted, i as number, c as summary, r as text };
+
+//# sourceMappingURL=TableCell.css.js.map

package/lib/esm/components/data-table/TableCell.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"TableCell.css.js","names":[],"sources":["../../../../src/components/data-table/TableCell.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const base = sprinkles({\n  width: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  color: 'text',\n});\n\nexport const alignRecipe = recipe({\n  variants: {\n    align: {\n      start: { justifyContent: 'flex-start', textAlign: 'left' },\n      center: { justifyContent: 'center', textAlign: 'center' },\n      end: { justifyContent: 'flex-end', textAlign: 'right' },\n    },\n  },\n  defaultVariants: {\n    align: 'start',\n  },\n});\n\nexport type AlignRecipeVariants = RecipeVariants<typeof alignRecipe>;\n\nexport const text = sprinkles({\n  color: 'text',\n});\n\nexport const number = sprinkles({\n  color: 'text',\n  whiteSpace: 'nowrap',\n});\n\nexport const date = sprinkles({\n  color: 'text',\n  whiteSpace: 'nowrap',\n});\n\nexport const muted = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const ellipsis = sprinkles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const summary = sprinkles({\n  whiteSpace: 'pre-wrap',\n});\n"],"mappings":""}

package/lib/esm/components/data-table/TableCell.js

@@ -1,74 +1,75 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as d } from "react";
-import { Badge as a } from "../../atomic/atoms/badge/Badge.js";
-import { FormattedDate as f } from "../../atomic/atoms/formatted-date/FormattedDate.js";
-import { muted as N, date as g, number as h, text as p } from "./TableCell.css.js";
-import { TableCellBase as o } from "./TableCellBase.js";
-import { cx as C } from "../../theme/tools.js";
-const c = "—", u = c, D = {
-  maximumFractionDigits: 2
-}, F = {
-  dateStyle: "medium",
-  timeStyle: "short"
-}, b = ({
-  value: t,
-  fallback: e = u,
-  children: n,
-  ellipsis: s = !1,
-  className: i
-}) => {
-  let m = n ?? t;
-  if (m == null)
-    m = e;
-  else if (typeof m == "string") {
-    const l = m.trim();
-    l.length === 0 ? m = e : m = l;
-  }
-  return /* @__PURE__ */ r(o, { ellipsis: s, className: C(p, i), children: m });
-}, B = ({
-  value: t,
-  fallback: e = u,
-  locale: n,
-  formatOptions: s = D
-}) => {
-  const i = d(() => {
-    if (t == null || Number.isNaN(Number(t)))
-      return e;
-    try {
-      return new Intl.NumberFormat(n, s).format(t);
-    } catch {
-      return String(t);
-    }
-  }, [t, e, n, s]);
-  return /* @__PURE__ */ r(o, { align: "end", className: h, children: i });
-}, x = ({
-  label: t,
-  tone: e,
-  isLoading: n = !1
-}) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(a, { tone: e, loading: n, children: t }) }), A = ({
-  value: t,
-  fallback: e = c,
-  locale: n,
-  options: s = F
-}) => /* @__PURE__ */ r(o, { className: g, children: /* @__PURE__ */ r(
-  f,
-  {
-    value: t,
-    fallback: e,
-    locale: n,
-    options: s
-  }
-) }), E = ({ label: t, tone: e }) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(a, { tone: e, children: t }) }), T = ({ children: t, className: e }) => /* @__PURE__ */ r(o, { align: "end", className: e, children: t }), L = ({ children: t }) => /* @__PURE__ */ r("span", { className: N, children: t }), w = {
-  Base: o,
-  Text: b,
-  Number: B,
-  Status: x,
-  Date: A,
-  Badge: E,
-  Actions: T,
-  Muted: L
+import { cx as e } from "../../theme/tools.js";
+import { Badge as t } from "../../atomic/atoms/badge/Badge.js";
+import { FormattedDate as n } from "../../atomic/atoms/formatted-date/FormattedDate.js";
+import { date as r, muted as i, number as a, text as o } from "./TableCell.css.js";
+import { TableCellBase as s } from "./TableCellBase.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as l } from "react";
+//#region src/components/data-table/TableCell.tsx
+var u = "—", d = u, f = { maximumFractionDigits: 2 }, p = {
+	dateStyle: "medium",
+	timeStyle: "short"
+}, m = {
+	Base: s,
+	Text: ({ value: t, fallback: n = d, children: r, ellipsis: i = !1, className: a }) => {
+		let l = r ?? t;
+		if (l == null) l = n;
+		else if (typeof l == "string") {
+			let e = l.trim();
+			l = e.length === 0 ? n : e;
+		}
+		return /* @__PURE__ */ c(s, {
+			ellipsis: i,
+			className: e(o, a),
+			children: l
+		});
+	},
+	Number: ({ value: e, fallback: t = d, locale: n, formatOptions: r = f }) => /* @__PURE__ */ c(s, {
+		align: "end",
+		className: a,
+		children: l(() => {
+			if (e == null || Number.isNaN(Number(e))) return t;
+			try {
+				return new Intl.NumberFormat(n, r).format(e);
+			} catch {
+				return String(e);
+			}
+		}, [
+			e,
+			t,
+			n,
+			r
+		])
+	}),
+	Status: ({ label: e, tone: n, isLoading: r = !1 }) => /* @__PURE__ */ c(s, { children: /* @__PURE__ */ c(t, {
+		tone: n,
+		loading: r,
+		children: e
+	}) }),
+	Date: ({ value: e, fallback: t = u, locale: i, options: a = p }) => /* @__PURE__ */ c(s, {
+		className: r,
+		children: /* @__PURE__ */ c(n, {
+			value: e,
+			fallback: t,
+			locale: i,
+			options: a
+		})
+	}),
+	Badge: ({ label: e, tone: n }) => /* @__PURE__ */ c(s, { children: /* @__PURE__ */ c(t, {
+		tone: n,
+		children: e
+	}) }),
+	Actions: ({ children: e, className: t }) => /* @__PURE__ */ c(s, {
+		align: "end",
+		className: t,
+		children: e
+	}),
+	Muted: ({ children: e }) => /* @__PURE__ */ c("span", {
+		className: i,
+		children: e
+	})
 };
-export {
-  w as TableCell
-};
-//# sourceMappingURL=TableCell.js.map
+//#endregion
+export { m as TableCell };
+
+//# sourceMappingURL=TableCell.js.map

package/lib/esm/components/data-table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../src/components/data-table/TableCell.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useMemo } from 'react';\n\nimport { Badge } from '../../atomic/atoms/badge/Badge.js';\nimport { FormattedDate } from '../../atomic/atoms/formatted-date/FormattedDate.js';\n\nimport * as styles from './TableCell.css.js';\nimport { TableCellBase, type TableCellBaseProps } from './TableCellBase.js';\nimport { cx } from '../../theme/tools.js';\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\ntype TextCellProps = {\n  value?: string | null | undefined;\n  fallback?: string;\n  children?: ReactNode;\n  ellipsis?: boolean;\n  className?: string;\n};\n\ntype NumberCellProps = {\n  value: number | null | undefined;\n  fallback?: string;\n  locale?: string;\n  formatOptions?: Intl.NumberFormatOptions;\n};\n\ntype StatusCellProps = {\n  label: string;\n  tone: BadgeTone;\n  isLoading?: boolean;\n};\n\ntype DateCellProps = {\n  value: string | null | undefined;\n  fallback?: string;\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n};\n\ntype BadgeCellProps = {\n  label: string;\n  tone: BadgeTone;\n};\n\ntype ActionsCellProps = TableCellBaseProps;\n\nconst FALLBACK_REFERENCE = '—';\nconst DEFAULT_TEXT_FALLBACK = FALLBACK_REFERENCE;\n\nconst DefaultNumberFormat: Intl.NumberFormatOptions = {\n  maximumFractionDigits: 2,\n};\n\nconst DefaultDateOptions: Intl.DateTimeFormatOptions = {\n  dateStyle: 'medium',\n  timeStyle: 'short',\n};\n\nconst Text = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  children,\n  ellipsis = false,\n  className,\n}: TextCellProps): JSX.Element => {\n  let content: ReactNode = children ?? value;\n\n  if (content == null) {\n    content = fallback;\n  } else if (typeof content === 'string') {\n    const trimmed = content.trim();\n    if (trimmed.length === 0) {\n      content = fallback;\n    } else {\n      content = trimmed;\n    }\n  }\n\n  return (\n    <TableCellBase ellipsis={ellipsis} className={cx(styles.text, className)}>\n      {content}\n    </TableCellBase>\n  );\n};\n\nconst NumberCell = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  locale,\n  formatOptions = DefaultNumberFormat,\n}: NumberCellProps): JSX.Element => {\n  const formatted = useMemo(() => {\n    if (value == null || Number.isNaN(Number(value))) {\n      return fallback;\n    }\n\n    try {\n      return new Intl.NumberFormat(locale, formatOptions).format(value);\n    } catch {\n      return String(value);\n    }\n  }, [value, fallback, locale, formatOptions]);\n\n  return (\n    <TableCellBase align=\"end\" className={styles.number}>\n      {formatted}\n    </TableCellBase>\n  );\n};\n\nconst Status = ({\n  label,\n  tone,\n  isLoading = false,\n}: StatusCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone} loading={isLoading}>\n        {label}\n      </Badge>\n    </TableCellBase>\n  );\n};\n\nconst DateCell = ({\n  value,\n  fallback = FALLBACK_REFERENCE,\n  locale,\n  options = DefaultDateOptions,\n}: DateCellProps): JSX.Element => {\n  return (\n    <TableCellBase className={styles.date}>\n      <FormattedDate\n        value={value}\n        fallback={fallback}\n        locale={locale}\n        options={options}\n      />\n    </TableCellBase>\n  );\n};\n\nconst BadgeCell = ({ label, tone }: BadgeCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone}>{label}</Badge>\n    </TableCellBase>\n  );\n};\n\nconst Actions = ({ children, className }: ActionsCellProps): JSX.Element => {\n  return (\n    <TableCellBase align=\"end\" className={className}>\n      {children}\n    </TableCellBase>\n  );\n};\n\nconst Muted = ({ children }: { children: ReactNode }): JSX.Element => {\n  return <span className={styles.muted}>{children}</span>;\n};\n\nexport const TableCell = {\n  Base: TableCellBase,\n  Text,\n  Number: NumberCell,\n  Status,\n  Date: DateCell,\n  Badge: BadgeCell,\n  Actions,\n  Muted,\n};\n\nexport type { TextCellProps, NumberCellProps, StatusCellProps, DateCellProps };\n"],"names":["FALLBACK_REFERENCE","DEFAULT_TEXT_FALLBACK","DefaultNumberFormat","DefaultDateOptions","Text","value","fallback","children","ellipsis","className","content","trimmed","jsx","TableCellBase","cx","styles.text","NumberCell","locale","formatOptions","formatted","useMemo","styles.number","Status","label","tone","isLoading","Badge","DateCell","options","styles.date","FormattedDate","BadgeCell","Actions","Muted","styles.muted","TableCell"],"mappings":";;;;;;;AAoDA,MAAMA,IAAqB,KACrBC,IAAwBD,GAExBE,IAAgD;AAAA,EACpD,uBAAuB;AACzB,GAEMC,IAAiD;AAAA,EACrD,WAAW;AAAA,EACX,WAAW;AACb,GAEMC,IAAO,CAAC;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC,IAAWL;AAAA,EACX,UAAAM;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AACF,MAAkC;AAChC,MAAIC,IAAqBH,KAAYF;AAErC,MAAIK,KAAW;AACb,IAAAA,IAAUJ;AAAA,WACD,OAAOI,KAAY,UAAU;AACtC,UAAMC,IAAUD,EAAQ,KAAA;AACxB,IAAIC,EAAQ,WAAW,IACrBD,IAAUJ,IAEVI,IAAUC;AAAA,EAEd;AAEA,SACE,gBAAAC,EAACC,KAAc,UAAAL,GAAoB,WAAWM,EAAGC,GAAaN,CAAS,GACpE,UAAAC,EAAA,CACH;AAEJ,GAEMM,IAAa,CAAC;AAAA,EAClB,OAAAX;AAAA,EACA,UAAAC,IAAWL;AAAA,EACX,QAAAgB;AAAA,EACA,eAAAC,IAAgBhB;AAClB,MAAoC;AAClC,QAAMiB,IAAYC,EAAQ,MAAM;AAC9B,QAAIf,KAAS,QAAQ,OAAO,MAAM,OAAOA,CAAK,CAAC;AAC7C,aAAOC;AAGT,QAAI;AACF,aAAO,IAAI,KAAK,aAAaW,GAAQC,CAAa,EAAE,OAAOb,CAAK;AAAA,IAClE,QAAQ;AACN,aAAO,OAAOA,CAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAACA,GAAOC,GAAUW,GAAQC,CAAa,CAAC;AAE3C,2BACGL,GAAA,EAAc,OAAM,OAAM,WAAWQ,GACnC,UAAAF,GACH;AAEJ,GAEMG,IAAS,CAAC;AAAA,EACd,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAEI,gBAAAb,EAACC,KACC,UAAA,gBAAAD,EAACc,GAAA,EAAM,MAAAF,GAAY,SAASC,GACzB,aACH,EAAA,CACF,GAIEE,IAAW,CAAC;AAAA,EAChB,OAAAtB;AAAA,EACA,UAAAC,IAAWN;AAAA,EACX,QAAAiB;AAAA,EACA,SAAAW,IAAUzB;AACZ,MAEI,gBAAAS,EAACC,GAAA,EAAc,WAAWgB,GACxB,UAAA,gBAAAjB;AAAA,EAACkB;AAAA,EAAA;AAAA,IACC,OAAAzB;AAAA,IACA,UAAAC;AAAA,IACA,QAAAW;AAAA,IACA,SAAAW;AAAA,EAAA;AAAA,GAEJ,GAIEG,IAAY,CAAC,EAAE,OAAAR,GAAO,MAAAC,0BAEvBX,GAAA,EACC,UAAA,gBAAAD,EAACc,GAAA,EAAM,MAAAF,GAAa,aAAM,EAAA,CAC5B,GAIEQ,IAAU,CAAC,EAAE,UAAAzB,GAAU,WAAAE,QAEzB,gBAAAG,EAACC,GAAA,EAAc,OAAM,OAAM,WAAAJ,GACxB,UAAAF,GACH,GAIE0B,IAAQ,CAAC,EAAE,UAAA1B,QACR,gBAAAK,EAAC,QAAA,EAAK,WAAWsB,GAAe,UAAA3B,EAAA,CAAS,GAGrC4B,IAAY;AAAA,EACvB,MAAMtB;AAAA,EACN,MAAAT;AAAA,EACA,QAAQY;AAAA,EACR,QAAAM;AAAA,EACA,MAAMK;AAAA,EACN,OAAOI;AAAA,EACP,SAAAC;AAAA,EACA,OAAAC;AACF;"}
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../../src/components/data-table/TableCell.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useMemo } from 'react';\n\nimport { Badge } from '../../atomic/atoms/badge/Badge.js';\nimport { FormattedDate } from '../../atomic/atoms/formatted-date/FormattedDate.js';\n\nimport * as styles from './TableCell.css.js';\nimport { TableCellBase, type TableCellBaseProps } from './TableCellBase.js';\nimport { cx } from '../../theme/tools.js';\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\ntype TextCellProps = {\n  value?: string | null | undefined;\n  fallback?: string;\n  children?: ReactNode;\n  ellipsis?: boolean;\n  className?: string;\n};\n\ntype NumberCellProps = {\n  value: number | null | undefined;\n  fallback?: string;\n  locale?: string;\n  formatOptions?: Intl.NumberFormatOptions;\n};\n\ntype StatusCellProps = {\n  label: string;\n  tone: BadgeTone;\n  isLoading?: boolean;\n};\n\ntype DateCellProps = {\n  value: string | null | undefined;\n  fallback?: string;\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n};\n\ntype BadgeCellProps = {\n  label: string;\n  tone: BadgeTone;\n};\n\ntype ActionsCellProps = TableCellBaseProps;\n\nconst FALLBACK_REFERENCE = '—';\nconst DEFAULT_TEXT_FALLBACK = FALLBACK_REFERENCE;\n\nconst DefaultNumberFormat: Intl.NumberFormatOptions = {\n  maximumFractionDigits: 2,\n};\n\nconst DefaultDateOptions: Intl.DateTimeFormatOptions = {\n  dateStyle: 'medium',\n  timeStyle: 'short',\n};\n\nconst Text = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  children,\n  ellipsis = false,\n  className,\n}: TextCellProps): JSX.Element => {\n  let content: ReactNode = children ?? value;\n\n  if (content == null) {\n    content = fallback;\n  } else if (typeof content === 'string') {\n    const trimmed = content.trim();\n    if (trimmed.length === 0) {\n      content = fallback;\n    } else {\n      content = trimmed;\n    }\n  }\n\n  return (\n    <TableCellBase ellipsis={ellipsis} className={cx(styles.text, className)}>\n      {content}\n    </TableCellBase>\n  );\n};\n\nconst NumberCell = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  locale,\n  formatOptions = DefaultNumberFormat,\n}: NumberCellProps): JSX.Element => {\n  const formatted = useMemo(() => {\n    if (value == null || Number.isNaN(Number(value))) {\n      return fallback;\n    }\n\n    try {\n      return new Intl.NumberFormat(locale, formatOptions).format(value);\n    } catch {\n      return String(value);\n    }\n  }, [value, fallback, locale, formatOptions]);\n\n  return (\n    <TableCellBase align=\"end\" className={styles.number}>\n      {formatted}\n    </TableCellBase>\n  );\n};\n\nconst Status = ({\n  label,\n  tone,\n  isLoading = false,\n}: StatusCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone} loading={isLoading}>\n        {label}\n      </Badge>\n    </TableCellBase>\n  );\n};\n\nconst DateCell = ({\n  value,\n  fallback = FALLBACK_REFERENCE,\n  locale,\n  options = DefaultDateOptions,\n}: DateCellProps): JSX.Element => {\n  return (\n    <TableCellBase className={styles.date}>\n      <FormattedDate\n        value={value}\n        fallback={fallback}\n        locale={locale}\n        options={options}\n      />\n    </TableCellBase>\n  );\n};\n\nconst BadgeCell = ({ label, tone }: BadgeCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone}>{label}</Badge>\n    </TableCellBase>\n  );\n};\n\nconst Actions = ({ children, className }: ActionsCellProps): JSX.Element => {\n  return (\n    <TableCellBase align=\"end\" className={className}>\n      {children}\n    </TableCellBase>\n  );\n};\n\nconst Muted = ({ children }: { children: ReactNode }): JSX.Element => {\n  return <span className={styles.muted}>{children}</span>;\n};\n\nexport const TableCell = {\n  Base: TableCellBase,\n  Text,\n  Number: NumberCell,\n  Status,\n  Date: DateCell,\n  Badge: BadgeCell,\n  Actions,\n  Muted,\n};\n\nexport type { TextCellProps, NumberCellProps, StatusCellProps, DateCellProps };\n"],"mappings":";;;;;;;;AAoDA,IAAM,IAAqB,KACrB,IAAwB,GAExB,IAAgD,EACpD,uBAAuB,GACxB,EAEK,IAAiD;CACrD,WAAW;CACX,WAAW;CACZ,EA0GY,IAAY;CACvB,MAAM;CACN,OA1GY,EACZ,UACA,cAAW,GACX,aACA,cAAW,IACX,mBACgC;EAChC,IAAI,IAAqB,KAAY;AAErC,MAAI,KAAW,KACb,KAAU;WACD,OAAO,KAAY,UAAU;GACtC,IAAM,IAAU,EAAQ,MAAM;AAC9B,GAGE,IAHE,EAAQ,WAAW,IACX,IAEA;;AAId,SACE,kBAAC,GAAD;GAAyB;GAAU,WAAW,EAAG,GAAa,EAAU;aACrE;GACa,CAAA;;CAoFlB,SAhFkB,EAClB,UACA,cAAW,GACX,WACA,mBAAgB,QAed,kBAAC,GAAD;EAAe,OAAM;EAAM,WAAW;YAbtB,QAAc;AAC9B,OAAI,KAAS,QAAQ,OAAO,MAAM,OAAO,EAAM,CAAC,CAC9C,QAAO;AAGT,OAAI;AACF,WAAO,IAAI,KAAK,aAAa,GAAQ,EAAc,CAAC,OAAO,EAAM;WAC3D;AACN,WAAO,OAAO,EAAM;;KAErB;GAAC;GAAO;GAAU;GAAQ;GAAc,CAAC;EAK1B,CAAA;CA4DlB,SAxDc,EACd,UACA,SACA,eAAY,SAGV,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAa;EAAM,SAAS;YACzB;EACK,CAAA,EACM,CAAA;CA+ClB,OA3CgB,EAChB,UACA,cAAW,GACX,WACA,aAAU,QAGR,kBAAC,GAAD;EAAe,WAAW;YACxB,kBAAC,GAAD;GACS;GACG;GACF;GACC;GACT,CAAA;EACY,CAAA;CA8BlB,QA1BiB,EAAE,UAAO,cAExB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAa;YAAO;EAAc,CAAA,EACpB,CAAA;CAuBlB,UAnBe,EAAE,aAAU,mBAEzB,kBAAC,GAAD;EAAe,OAAM;EAAiB;EACnC;EACa,CAAA;CAgBlB,QAZa,EAAE,kBACR,kBAAC,QAAD;EAAM,WAAW;EAAe;EAAgB,CAAA;CAYxD"}

package/lib/esm/components/data-table/TableCellBase.js

@@ -1,16 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { base as o, alignRecipe as t, ellipsis as m } from "./TableCell.css.js";
-import { cx as p } from "../../theme/tools.js";
-const x = ({
-  children: e,
-  className: i,
-  align: l = "start",
-  ellipsis: a = !1
-}) => {
-  const s = [o, t({ align: l }), i];
-  return a && s.push(m), /* @__PURE__ */ r("div", { className: p(...s), children: e });
+import { cx as e } from "../../theme/tools.js";
+import { alignRecipe as t, base as n, ellipsis as r } from "./TableCell.css.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/data-table/TableCellBase.tsx
+var a = ({ children: a, className: o, align: s = "start", ellipsis: c = !1 }) => {
+	let l = [
+		n,
+		t({ align: s }),
+		o
+	];
+	return c && l.push(r), /* @__PURE__ */ i("div", {
+		className: e(...l),
+		children: a
+	});
 };
-export {
-  x as TableCellBase
-};
-//# sourceMappingURL=TableCellBase.js.map
+//#endregion
+export { a as TableCellBase };
+
+//# sourceMappingURL=TableCellBase.js.map

package/lib/esm/components/data-table/TableCellBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellBase.js","sources":["../../../../src/components/data-table/TableCellBase.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './TableCell.css.js';\nimport { cx } from '../../theme/tools.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\ntype Alignment = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.alignRecipe>>['align']\n>;\n\nexport type TableCellBaseProps = {\n  children: ReactNode;\n  className?: string;\n  align?: Alignment;\n  ellipsis?: boolean;\n};\n\nexport const TableCellBase = ({\n  children,\n  className,\n  align = 'start',\n  ellipsis = false,\n}: TableCellBaseProps): JSX.Element => {\n  const classNames = [styles.base, styles.alignRecipe({ align }), className];\n\n  if (ellipsis) {\n    classNames.push(styles.ellipsis);\n  }\n\n  return <div className={cx(...classNames)}>{children}</div>;\n};\n"],"names":["TableCellBase","children","className","align","ellipsis","classNames","styles.base","styles.alignRecipe","styles.ellipsis","cx"],"mappings":";;;AAiBO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EAAA,UACRC,IAAW;AACb,MAAuC;AACrC,QAAMC,IAAa,CAACC,GAAaC,EAAmB,EAAE,OAAAJ,EAAA,CAAO,GAAGD,CAAS;AAEzE,SAAIE,KACFC,EAAW,KAAKG,CAAe,qBAGzB,OAAA,EAAI,WAAWC,EAAG,GAAGJ,CAAU,GAAI,UAAAJ,GAAS;AACtD;"}
+{"version":3,"file":"TableCellBase.js","names":[],"sources":["../../../../src/components/data-table/TableCellBase.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './TableCell.css.js';\nimport { cx } from '../../theme/tools.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\ntype Alignment = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.alignRecipe>>['align']\n>;\n\nexport type TableCellBaseProps = {\n  children: ReactNode;\n  className?: string;\n  align?: Alignment;\n  ellipsis?: boolean;\n};\n\nexport const TableCellBase = ({\n  children,\n  className,\n  align = 'start',\n  ellipsis = false,\n}: TableCellBaseProps): JSX.Element => {\n  const classNames = [styles.base, styles.alignRecipe({ align }), className];\n\n  if (ellipsis) {\n    classNames.push(styles.ellipsis);\n  }\n\n  return <div className={cx(...classNames)}>{children}</div>;\n};\n"],"mappings":";;;;AAiBA,IAAa,KAAiB,EAC5B,aACA,cACA,WAAQ,SACR,UAAA,IAAW,SAC0B;CACrC,IAAM,IAAa;EAAC;EAAa,EAAmB,EAAE,UAAO,CAAC;EAAE;EAAU;AAM1E,QAJI,KACF,EAAW,KAAK,EAAgB,EAG3B,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAG,EAAW;EAAG;EAAe,CAAA"}

package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js

@@ -1,10 +1,8 @@
-/* empty css                                       */
-/* empty css                                              */
-var e = "_1ifyzte0 txvbqbuw6 txvbqbl6f txvbqbt6f txvbqbk4x", v = "_1ifyzte1 txvbqbpsf", x = "_1ifyzte2 txvbqbu6f", i = "_1ifyzte3 txvbqbu6f txvbqbc4x";
-export {
-  v as bodyViewport,
-  i as sentinel,
-  e as singleLineCell,
-  x as spacer
-};
-//# sourceMappingURL=VirtualizedConnectionTable.css.js.map
+/* empty css                                   */
+/* empty css                                          */
+//#region src/components/data-table/VirtualizedConnectionTable.css.ts
+var e = "_1ifyzte0 txvbqbuw6 txvbqbl6f txvbqbt6f txvbqbk4x", t = "_1ifyzte1 txvbqbpsf", n = "_1ifyzte2 txvbqbu6f", r = "_1ifyzte3 txvbqbu6f txvbqbc4x";
+//#endregion
+export { t as bodyViewport, r as sentinel, e as singleLineCell, n as spacer };
+
+//# sourceMappingURL=VirtualizedConnectionTable.css.js.map

package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedConnectionTable.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"VirtualizedConnectionTable.css.js","names":[],"sources":["../../../../src/components/data-table/VirtualizedConnectionTable.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const singleLineCell = sprinkles({\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: 0,\n});\n\nexport const bodyViewport = sprinkles({\n  position: 'relative',\n});\n\nexport const spacer = sprinkles({\n  width: 'full',\n});\n\nexport const sentinel = sprinkles({\n  width: 'full',\n  height: 1,\n});\n"],"mappings":""}