@axzydev/axzy_ui_system 1.3.1 → 1.3.2

package/src/types/table.types.ts

@@ -13,3 +13,51 @@ export const sizeStyles: Record<TableSize, string> = {
   md: "text-sm",
   lg: "text-lg",
 };
+
+/**
+ * Cell padding / row-height preset for tables. Independent of `TableSize`
+ * (which only controls font-size, and shifts the row height via the line box).
+ */
+export type TableDensity = "compact" | "normal" | "comfortable";
+
+/**
+ * Padding classes and target row height per density. `normal` MUST stay
+ * byte-identical to the historical hard-coded `px-4 py-4` / `px-4 py-3`.
+ *
+ * The `rowHeight` values are the `size="md"` baseline:
+ * rowHeight = cell vertical padding + text-sm line box (20px) + 1px divide-y border.
+ * compact: py-1.5 (12) + 20 + 1 = 33 · normal: py-3 (24) + 20 + 1 = 45 · comfortable: py-4 (32) + 20 + 1 = 53
+ *
+ * `size` shifts that baseline via the font-size line box; use
+ * `getRowHeight(size, density)` for the real rendered row height.
+ */
+export const densityStyles: Record<
+  TableDensity,
+  { header: string; cell: string; rowHeight: number }
+> = {
+  compact: { header: "px-3 py-2", cell: "px-3 py-1.5", rowHeight: 33 },
+  normal: { header: "px-4 py-4", cell: "px-4 py-3", rowHeight: 45 },
+  comfortable: { header: "px-4 py-5", cell: "px-4 py-4", rowHeight: 53 },
+};
+
+/** Line box (px) contributed by the `size` prop's font-size class (`text-xs|sm|lg`). */
+export const sizeLineHeights: Record<TableSize, number> = { sm: 16, md: 20, lg: 28 };
+
+/**
+ * Row height (px) for a given `size` + `density`, matching the real rendered
+ * row: cell vertical padding + the size line box + 1px divide-y border.
+ * `densityStyles[density].rowHeight` is the `md` baseline.
+ */
+export function getRowHeight(size: TableSize, density: TableDensity): number {
+  return densityStyles[density].rowHeight - sizeLineHeights.md + sizeLineHeights[size];
+}
+
+/**
+ * Static horizontal alignment classes for columns. Kept as full literal
+ * strings so Tailwind's scanner can see them (never build them dynamically).
+ */
+export const tableAlignClasses: Record<"left" | "center" | "right", string> = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+};

package/src/utils/styles.ts

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import type { CSSProperties } from "react";
 import { inputSizeTokens } from "@/theme/theme";
+import { densityStyles, type TableDensity } from "@/types/table.types";
 
 /** Theme shape expected from `theme.input` (used by input-like components). */
 export type InputThemeLike = {
@@ -76,8 +77,8 @@ export const tableContainer = "rounded-xl shadow-sm border border-secondary-200
 
 export const tableHeaderRow = "bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500";
 
-export function tableHeaderCell(className?: string) {
-  return clsx("px-4 py-4 align-top", className);
+export function tableHeaderCell(className?: string, density: TableDensity = "normal") {
+  return clsx(densityStyles[density].header, "align-top", className);
 }
 
 export const tableSortButtonActive = "bg-secondary-200 text-secondary-900";
@@ -87,8 +88,12 @@ export const tableBody = "divide-y divide-secondary-100";
 
 export const tableRow = "hover:bg-secondary-50/50 transition-colors duration-150 group";
 
-export function tableCell(className?: string) {
-  return clsx("px-4 py-3 align-middle", className);
+export const tableRowClickable = "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset";
+
+export const tableCardClickable = "cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+
+export function tableCell(className?: string, density: TableDensity = "normal") {
+  return clsx(densityStyles[density].cell, "align-middle", className);
 }
 
 export const tableActionsCell = "flex items-center justify-center gap-2";

package/src/utils/table.utils.ts

@@ -8,3 +8,34 @@ export const formatCurrencyMX = (value: number) => {
 export const getNestedValue = (obj: any, path: string) => {
     return path.split('.').reduce((acc, part) => acc && acc[part], obj);
 };
+
+/**
+ * CSS selector matching any element that should swallow a row/card click
+ * instead of letting it bubble up to the row activation handler. Covers native
+ * interactive elements plus anything explicitly opted out with
+ * `data-row-click-ignore`.
+ */
+export const ROW_CLICK_IGNORE_SELECTOR =
+  'button, a, input, select, textarea, [role="button"], [role="link"], [data-row-click-ignore]';
+
+/**
+ * Returns `true` when the event target (or one of its ancestors) is an
+ * interactive element that must not trigger the row/card `onRowClick` handler.
+ *
+ * @param target - The event target to inspect (usually `event.target`).
+ * @param boundary - Optional activation container (usually `event.currentTarget`).
+ *   When the matched interactive element is the boundary itself it is ignored,
+ *   because the cards-view wrapper carries `role="button"` for accessibility and
+ *   would otherwise swallow its own activation. Only interactive descendants
+ *   block the handler.
+ */
+export function isInteractiveTarget(
+  target: EventTarget | null,
+  boundary: EventTarget | null = null
+): boolean {
+  if (!(target instanceof Element)) return false;
+  const interactive = target.closest(ROW_CLICK_IGNORE_SELECTOR);
+  if (!interactive) return false;
+  if (boundary instanceof Node && interactive === boundary) return false;
+  return true;
+}