kz-design-system 0.2.0 → 0.3.0

package/dist/table.mjs

@@ -367,7 +367,11 @@ import {
   Pencil,
   Trash2,
   Eye,
-  EyeOff
+  EyeOff,
+  Pin,
+  PinOff,
+  Save,
+  RotateCcw
 } from "lucide-react";
 var iconRegistry = {
   ["search" /* Search */]: Search,
@@ -472,7 +476,11 @@ var iconRegistry = {
   ["pencil" /* Pencil */]: Pencil,
   ["trash-2" /* Trash2 */]: Trash2,
   ["eye" /* Eye */]: Eye,
-  ["eye-off" /* EyeOff */]: EyeOff
+  ["eye-off" /* EyeOff */]: EyeOff,
+  ["pin" /* Pin */]: Pin,
+  ["pin-off" /* PinOff */]: PinOff,
+  ["save" /* Save */]: Save,
+  ["rotate-ccw" /* RotateCcw */]: RotateCcw
 };
 
 // src/icon/icon-sizes.ts
@@ -715,7 +723,7 @@ var base = [
   "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium",
   "transition-all duration-150 ease-out",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--kz-color-border-focus)]",
-  "disabled:pointer-events-none disabled:opacity-[var(--kz-component-button-disabled-opacity,0.5)]",
+  "disabled:cursor-not-allowed disabled:opacity-[var(--kz-component-button-disabled-opacity,0.5)]",
   "[&_svg]:pointer-events-none [&_svg]:shrink-0"
 ].join(" ");
 var buttonVariants = cva2(base, {
@@ -1474,6 +1482,8 @@ function TableInner({
   stickyHeader = false,
   maxHeight,
   getRowSticky,
+  getRowClassName,
+  getRowStyle,
   caption,
   header: headerProp,
   title,
@@ -1519,6 +1529,10 @@ function TableInner({
     () => data.map((row, i) => getRowId(row, i)),
     [data, getRowId]
   );
+  const visibleColumns = React8.useMemo(
+    () => columns.filter((col) => !col.hidden),
+    [columns]
+  );
   const selectedCount = React8.useMemo(
     () => Object.keys(selectedRowIds).filter((id) => selectedRowIds[id]).length,
     [selectedRowIds]
@@ -1778,11 +1792,13 @@ function TableInner({
                         )
                       }
                     ),
-                    columns.map((col) => {
-                      const style = {};
-                      if (col.width) style.width = col.width;
-                      if (col.minWidth) style.minWidth = col.minWidth;
-                      if (col.maxWidth) style.maxWidth = col.maxWidth;
+                    visibleColumns.map((col) => {
+                      const thStyle = {
+                        ...col.headerStyle
+                      };
+                      if (col.width) thStyle.width = col.width;
+                      if (col.minWidth) thStyle.minWidth = col.minWidth;
+                      if (col.maxWidth) thStyle.maxWidth = col.maxWidth;
                       const align = col.align ?? "left";
                       const isSortable = col.sortable && onSortChange != null;
                       const isActive = sort?.key === col.key;
@@ -1796,9 +1812,10 @@ function TableInner({
                             "kz-table-th border-b border-[var(--kz-component-table-row-border)] bg-[var(--kz-component-table-header-bg)]",
                             sizeClass,
                             alignClasses[align],
-                            stickyHeader && "sticky top-0 z-10 bg-[var(--kz-component-table-header-bg)]"
+                            stickyHeader && "sticky top-0 z-10 bg-[var(--kz-component-table-header-bg)]",
+                            col.headerClassName
                           ),
-                          style,
+                          style: thStyle,
                           children: isSortable ? /* @__PURE__ */ jsxs7(
                             "button",
                             {
@@ -1864,7 +1881,7 @@ function TableInner({
                   /* @__PURE__ */ jsx8("tbody", { children: loading ? /* @__PURE__ */ jsx8("tr", { children: /* @__PURE__ */ jsx8(
                     "td",
                     {
-                      colSpan: columns.length + (selectableRows ? 1 : 0) + (actions ? 1 : 0),
+                      colSpan: visibleColumns.length + (selectableRows ? 1 : 0) + (actions ? 1 : 0),
                       className: cn(
                         "kz-table-td text-center text-[var(--kz-color-text-muted)]",
                         sizeClass
@@ -1874,7 +1891,7 @@ function TableInner({
                   ) }) : data.length === 0 ? /* @__PURE__ */ jsx8("tr", { children: /* @__PURE__ */ jsx8(
                     "td",
                     {
-                      colSpan: columns.length + (selectableRows ? 1 : 0) + (actions ? 1 : 0),
+                      colSpan: visibleColumns.length + (selectableRows ? 1 : 0) + (actions ? 1 : 0),
                       className: cn(
                         "kz-table-td text-center text-[var(--kz-color-text-muted)]",
                         sizeClass
@@ -1894,8 +1911,10 @@ function TableInner({
                         className: cn(
                           "kz-table-tr border-b border-[var(--kz-component-table-row-border)] last:border-b-0 hover:bg-[var(--kz-component-table-row-hover-bg)] transition-colors duration-[var(--kz-motion-duration-normal)]",
                           isSticky && "kz-table-tr--sticky",
-                          hasEditingCell && "kz-table-tr--editing"
+                          hasEditingCell && "kz-table-tr--editing",
+                          getRowClassName?.(row, index)
                         ),
+                        style: getRowStyle?.(row, index),
                         children: [
                           selectableRows && /* @__PURE__ */ jsx8(
                             "td",
@@ -1917,11 +1936,13 @@ function TableInner({
                               )
                             }
                           ),
-                          columns.map((col) => {
-                            const style = {};
-                            if (col.width) style.width = col.width;
-                            if (col.minWidth) style.minWidth = col.minWidth;
-                            if (col.maxWidth) style.maxWidth = col.maxWidth;
+                          visibleColumns.map((col) => {
+                            const tdStyle = {
+                              ...col.cellStyle
+                            };
+                            if (col.width) tdStyle.width = col.width;
+                            if (col.minWidth) tdStyle.minWidth = col.minWidth;
+                            if (col.maxWidth) tdStyle.maxWidth = col.maxWidth;
                             const align = col.align ?? "left";
                             const isCellEditing = isMultiCellMode ? !!editingCells[rowId]?.[col.key] : editingCell != null && editingCell.rowId === rowId && editingCell.columnKey === col.key;
                             if (isCellEditing) {
@@ -1942,9 +1963,10 @@ function TableInner({
                                   className: cn(
                                     "kz-table-td text-[var(--kz-color-text-primary)]",
                                     sizeClass,
-                                    alignClasses[align]
+                                    alignClasses[align],
+                                    col.cellClassName
                                   ),
-                                  style,
+                                  style: tdStyle,
                                   children: col.editCell ? col.editCell(row, cellDraft, onChange) : /* @__PURE__ */ jsx8(
                                     TextInput,
                                     {
@@ -1967,9 +1989,10 @@ function TableInner({
                                   "kz-table-td text-[var(--kz-color-text-primary)]",
                                   sizeClass,
                                   alignClasses[align],
-                                  col.editable && "kz-table-td--editable"
+                                  col.editable && "kz-table-td--editable",
+                                  col.cellClassName
                                 ),
-                                style,
+                                style: tdStyle,
                                 children: [
                                   getCellContent(row, col),
                                   col.editable && /* @__PURE__ */ jsx8(
@@ -2078,6 +2101,7 @@ function TableInner({
                   Button,
                   {
                     variant: "primary" /* Primary */,
+                    status: "success" /* Success */,
                     size: "sm" /* Sm */,
                     onClick: handleCellSave,
                     children: "Save"