kz-design-system 0.2.0 → 0.3.0

package/dist/table.d.mts

@@ -12,6 +12,16 @@ interface TableColumn<TData, TEditValue = string> {
     minWidth?: string;
     maxWidth?: string;
     align?: TableAlign;
+    /** Custom CSS class for this column's header cell (<th>). */
+    headerClassName?: string;
+    /** Custom inline styles for this column's header cell (<th>). */
+    headerStyle?: React.CSSProperties;
+    /** Custom CSS class for this column's body cells (<td>). */
+    cellClassName?: string;
+    /** Custom inline styles for this column's body cells (<td>). */
+    cellStyle?: React.CSSProperties;
+    /** Hide this column from rendering. */
+    hidden?: boolean;
     sortable?: boolean;
     /** Whether this column's cells are editable. Enables the pencil icon on hover. */
     editable?: boolean;
@@ -55,6 +65,10 @@ interface TableProps<TData, TEditValue = string> {
     /** Max height of the scrollable area (CSS value, e.g. "60vh", "400px"). Only applies when stickyHeader is true. Default: none (fills parent). */
     maxHeight?: string;
     getRowSticky?: (row: TData, index: number) => boolean;
+    /** Return a custom CSS class for a row's <tr> element. */
+    getRowClassName?: (row: TData, index: number) => string | undefined;
+    /** Return custom inline styles for a row's <tr> element. */
+    getRowStyle?: (row: TData, index: number) => React.CSSProperties | undefined;
     caption?: string;
     header?: React.ReactNode;
     title?: React.ReactNode;

package/dist/table.d.ts

@@ -12,6 +12,16 @@ interface TableColumn<TData, TEditValue = string> {
     minWidth?: string;
     maxWidth?: string;
     align?: TableAlign;
+    /** Custom CSS class for this column's header cell (<th>). */
+    headerClassName?: string;
+    /** Custom inline styles for this column's header cell (<th>). */
+    headerStyle?: React.CSSProperties;
+    /** Custom CSS class for this column's body cells (<td>). */
+    cellClassName?: string;
+    /** Custom inline styles for this column's body cells (<td>). */
+    cellStyle?: React.CSSProperties;
+    /** Hide this column from rendering. */
+    hidden?: boolean;
     sortable?: boolean;
     /** Whether this column's cells are editable. Enables the pencil icon on hover. */
     editable?: boolean;
@@ -55,6 +65,10 @@ interface TableProps<TData, TEditValue = string> {
     /** Max height of the scrollable area (CSS value, e.g. "60vh", "400px"). Only applies when stickyHeader is true. Default: none (fills parent). */
     maxHeight?: string;
     getRowSticky?: (row: TData, index: number) => boolean;
+    /** Return a custom CSS class for a row's <tr> element. */
+    getRowClassName?: (row: TData, index: number) => string | undefined;
+    /** Return custom inline styles for a row's <tr> element. */
+    getRowStyle?: (row: TData, index: number) => React.CSSProperties | undefined;
     caption?: string;
     header?: React.ReactNode;
     title?: React.ReactNode;

package/dist/table.js

@@ -404,7 +404,11 @@ var iconRegistry = {
   ["pencil" /* Pencil */]: import_lucide_react.Pencil,
   ["trash-2" /* Trash2 */]: import_lucide_react.Trash2,
   ["eye" /* Eye */]: import_lucide_react.Eye,
-  ["eye-off" /* EyeOff */]: import_lucide_react.EyeOff
+  ["eye-off" /* EyeOff */]: import_lucide_react.EyeOff,
+  ["pin" /* Pin */]: import_lucide_react.Pin,
+  ["pin-off" /* PinOff */]: import_lucide_react.PinOff,
+  ["save" /* Save */]: import_lucide_react.Save,
+  ["rotate-ccw" /* RotateCcw */]: import_lucide_react.RotateCcw
 };
 
 // src/icon/icon-sizes.ts
@@ -647,7 +651,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 = (0, import_class_variance_authority2.cva)(base, {
@@ -1406,6 +1410,8 @@ function TableInner({
   stickyHeader = false,
   maxHeight,
   getRowSticky,
+  getRowClassName,
+  getRowStyle,
   caption,
   header: headerProp,
   title,
@@ -1451,6 +1457,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]
@@ -1710,11 +1720,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;
@@ -1728,9 +1740,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__ */ (0, import_jsx_runtime8.jsxs)(
                             "button",
                             {
@@ -1796,7 +1809,7 @@ function TableInner({
                   /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "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
@@ -1806,7 +1819,7 @@ function TableInner({
                   ) }) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "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
@@ -1826,8 +1839,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__ */ (0, import_jsx_runtime8.jsx)(
                             "td",
@@ -1849,11 +1864,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) {
@@ -1874,9 +1891,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__ */ (0, import_jsx_runtime8.jsx)(
                                     TextInput,
                                     {
@@ -1899,9 +1917,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__ */ (0, import_jsx_runtime8.jsx)(
@@ -2010,6 +2029,7 @@ function TableInner({
                   Button,
                   {
                     variant: "primary" /* Primary */,
+                    status: "success" /* Success */,
                     size: "sm" /* Sm */,
                     onClick: handleCellSave,
                     children: "Save"