@ai-matrx/design-system 0.32.0 → 0.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/data-table/index.cjs +56 -12
  3. package/dist/data-table/index.cjs.map +1 -1
  4. package/dist/data-table/index.js +56 -12
  5. package/dist/data-table/index.js.map +1 -1
  6. package/dist/index.cjs +29 -2
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.js +29 -2
  9. package/dist/index.js.map +1 -1
  10. package/package.json +1 -1
package/dist/data-table/index.js CHANGED
@@ -10015,8 +10015,26 @@ function pixelWidth(width) {
10015
10015
  }
10016
10016
  return void 0;
10017
10017
  }
10018
- var FROZEN_CELL_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-20 sm:bg-inherit";
10019
- var FROZEN_HEADER_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-30";
10018
+ var FROZEN_CELL_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-20 sm:bg-card";
10019
+ var FROZEN_HEADER_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-30 sm:bg-muted";
10020
+ var FROZEN_ROW_TINT_CLASS = {
10021
+ slate: "sm:bg-[color-mix(in_oklab,var(--color-slate-100)_70%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-slate-800)_40%,var(--color-card))]",
10022
+ green: "sm:bg-[color-mix(in_oklab,var(--color-green-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-green-950)_40%,var(--color-card))]",
10023
+ amber: "sm:bg-[color-mix(in_oklab,var(--color-amber-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-amber-950)_40%,var(--color-card))]",
10024
+ red: "sm:bg-[color-mix(in_oklab,var(--color-red-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-red-950)_40%,var(--color-card))]",
10025
+ blue: "sm:bg-[color-mix(in_oklab,var(--color-blue-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-blue-950)_40%,var(--color-card))]",
10026
+ violet: "sm:bg-[color-mix(in_oklab,var(--color-violet-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-violet-950)_40%,var(--color-card))]",
10027
+ teal: "sm:bg-[color-mix(in_oklab,var(--color-teal-50)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-teal-950)_40%,var(--color-card))]"
10028
+ };
10029
+ var FROZEN_CELL_TINT_CLASS = {
10030
+ slate: "sm:bg-[color-mix(in_oklab,var(--color-slate-200)_70%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-slate-700)_50%,var(--color-card))]",
10031
+ green: "sm:bg-[color-mix(in_oklab,var(--color-green-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-green-900)_50%,var(--color-card))]",
10032
+ amber: "sm:bg-[color-mix(in_oklab,var(--color-amber-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-amber-900)_50%,var(--color-card))]",
10033
+ red: "sm:bg-[color-mix(in_oklab,var(--color-red-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-red-900)_50%,var(--color-card))]",
10034
+ blue: "sm:bg-[color-mix(in_oklab,var(--color-blue-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-blue-900)_50%,var(--color-card))]",
10035
+ violet: "sm:bg-[color-mix(in_oklab,var(--color-violet-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-violet-900)_50%,var(--color-card))]",
10036
+ teal: "sm:bg-[color-mix(in_oklab,var(--color-teal-100)_100%,var(--color-card))] dark:sm:bg-[color-mix(in_oklab,var(--color-teal-900)_50%,var(--color-card))]"
10037
+ };
10020
10038
  var FROZEN_EDGE_CLASS = "sm:shadow-[inset_-1px_0_0_var(--border)]";
10021
10039
 
10022
10040
  // src/field-formats/registry.ts
@@ -12684,23 +12702,29 @@ function MatrxDataTableCore({
12684
12702
  const styleFieldOf = tableStyle?.fieldOf ?? ((id) => id);
12685
12703
  const styleDocumentOf = tableStyle?.documentOf ?? ((row) => row);
12686
12704
  const noChoiceColor = () => void 0;
12687
- const rowTintClass = (row, id) => {
12688
- if (!tableStyle) return void 0;
12689
- const color = resolveRowColor(
12705
+ const rowTintColor = (row, id) => {
12706
+ if (!tableStyle) return null;
12707
+ return resolveRowColor(
12690
12708
  tableStyle.style,
12691
12709
  { id, data: styleDocumentOf(row) },
12692
12710
  tableStyle.choiceColorFor ?? noChoiceColor
12693
12711
  );
12712
+ };
12713
+ const rowTintClass = (row, id) => {
12714
+ const color = rowTintColor(row, id);
12694
12715
  return color ? ROW_TINT_CLASS[color] : void 0;
12695
12716
  };
12696
- const cellTintClass = (row, id, colId) => {
12697
- if (!tableStyle) return void 0;
12698
- const color = resolveCellColor(
12717
+ const cellTintColor = (row, id, colId) => {
12718
+ if (!tableStyle) return null;
12719
+ return resolveCellColor(
12699
12720
  tableStyle.style,
12700
12721
  { id, data: styleDocumentOf(row) },
12701
12722
  styleFieldOf(colId),
12702
12723
  tableStyle.choiceColorFor ?? noChoiceColor
12703
12724
  );
12725
+ };
12726
+ const cellTintClass = (row, id, colId) => {
12727
+ const color = cellTintColor(row, id, colId);
12704
12728
  return color ? CELL_TINT_CLASS[color] : void 0;
12705
12729
  };
12706
12730
  const declaredVisibleCopyColumns = useMemo8(
@@ -14546,7 +14570,10 @@ function MatrxDataTableCore({
14546
14570
  "th",
14547
14571
  {
14548
14572
  "data-matrx-table-selection-column": true,
14549
- className: "h-9 w-9 px-2 text-left align-middle",
14573
+ className: cn(
14574
+ "h-9 w-9 px-2 text-left align-middle",
14575
+ frozenColumns.selectionOffset !== null && "sm:sticky sm:left-0 sm:z-30 sm:bg-muted"
14576
+ ),
14550
14577
  style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
14551
14578
  children: /* @__PURE__ */ jsx42(
14552
14579
  "div",
@@ -14808,6 +14835,9 @@ function MatrxDataTableCore({
14808
14835
  const displayRow = applyRowEdits(row, rowEdits);
14809
14836
  const controls = buildRecordControls(displayRow);
14810
14837
  const isChecked = selectedIdSet.has(id);
14838
+ const rowTint = rowTintColor(row, id);
14839
+ const canHoverFrozenCell = !rowTint && (detailEnabled || Boolean(onRowOpen) || canExpandRow(row));
14840
+ const frozenRowBackgroundClass = rowTint ? FROZEN_ROW_TINT_CLASS[rowTint] : highlightedIndex === index || isSelected ? "sm:bg-muted" : isChecked ? "sm:bg-[color-mix(in_oklab,var(--color-primary)_5%,var(--color-card))]" : zebra && index % 2 === 1 ? "sm:bg-[color-mix(in_oklab,var(--color-muted)_20%,var(--color-card))]" : "sm:bg-card";
14811
14841
  const rowNode = /* @__PURE__ */ jsxs32(
14812
14842
  "tr",
14813
14843
  {
@@ -14835,7 +14865,7 @@ function MatrxDataTableCore({
14835
14865
  // Keep the mobile row opaque while the complete row scrolls
14836
14866
  // horizontally. The translucent zebra/hover tints remain
14837
14867
  // desktop-only so densely layered mobile content stays crisp.
14838
- "border-b border-border/60 bg-card transition-colors",
14868
+ "group/matrx-row border-b border-border/60 bg-card transition-colors",
14839
14869
  (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer sm:hover:bg-muted/50",
14840
14870
  isSelected && "bg-muted",
14841
14871
  isChecked && "bg-primary/5",
@@ -14859,7 +14889,11 @@ function MatrxDataTableCore({
14859
14889
  // When a data column is frozen the checkbox
14860
14890
  // column has to freeze with it, or the first
14861
14891
  // frozen column slides over the checkboxes.
14862
- frozenColumns.selectionOffset !== null && "sm:sticky sm:left-0 sm:z-20 sm:bg-inherit"
14892
+ frozenColumns.selectionOffset !== null && cn(
14893
+ "sm:sticky sm:left-0 sm:z-20",
14894
+ frozenRowBackgroundClass,
14895
+ canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]"
14896
+ )
14863
14897
  ),
14864
14898
  style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
14865
14899
  onClick: (e) => e.stopPropagation(),
@@ -14899,6 +14933,12 @@ function MatrxDataTableCore({
14899
14933
  const isColumnDragShadow = columnDragPreview?.draggedId === columnId(col) && columnDragPreview.targetId !== null;
14900
14934
  const sheetCell = spreadsheetEnabled ? sheet.cellProps(id, columnId(col)) : null;
14901
14935
  const carriesFillHandle = sheetCell !== null && sheet.isFillHandleCell(id, columnId(col));
14936
+ const frozen = frozenColumns.offsets[columnId(col)] !== void 0;
14937
+ const frozenCellTint = cellTintColor(
14938
+ row,
14939
+ id,
14940
+ columnId(col)
14941
+ );
14902
14942
  return /* @__PURE__ */ jsxs32(
14903
14943
  "td",
14904
14944
  {
@@ -14929,12 +14969,16 @@ function MatrxDataTableCore({
14929
14969
  isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
14930
14970
  alignForFormat(col) === "center" && "text-center",
14931
14971
  alignForFormat(col) === "right" && "text-right",
14932
- frozenColumns.offsets[columnId(col)] !== void 0 && FROZEN_CELL_CLASS,
14972
+ frozen && FROZEN_CELL_CLASS,
14973
+ frozen && frozenRowBackgroundClass,
14974
+ frozen && sheetCell?.["data-matrx-cell-selected"] && "sm:bg-[color-mix(in_oklab,var(--color-primary)_10%,var(--color-card))]",
14975
+ frozen && canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]",
14933
14976
  frozenEdgeId === columnId(col) && FROZEN_EDGE_CLASS,
14934
14977
  // A cell tint paints OVER the row tint beneath
14935
14978
  // it, and the consumer's own hook comes last so
14936
14979
  // it can always win.
14937
14980
  cellTintClass(row, id, columnId(col)),
14981
+ frozen && frozenCellTint && FROZEN_CELL_TINT_CLASS[frozenCellTint],
14938
14982
  cellClassName?.(row, columnId(col), index)
14939
14983
  ),
14940
14984
  style: {