@hyddenlabs/hydn-ui 0.3.0-alpha.182 → 0.3.0-alpha.184

package/dist/index.d.cts

@@ -2568,6 +2568,8 @@ type ColumnDef<T> = {
     width?: string;
     /** Text alignment for cells in this column */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating (useful for long strings) */
+    wrapText?: boolean;
     /** Custom render function for cell content (use as escape hatch when config options don't cover your use case) */
     render?: (value: T[keyof T], row: T, index: number) => ReactNode;
     /** Pre-built formatter for common data types */
@@ -2925,6 +2927,8 @@ type TableHeadCellProps = {
     align?: 'left' | 'center' | 'right';
     /** Scope attribute for accessibility (col for column headers, row for row headers) */
     scope?: 'col' | 'row';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 type TableCellProps = {
     /** Content of the cell */
@@ -2933,6 +2937,8 @@ type TableCellProps = {
     className?: string;
     /** Text alignment within the cell */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 /**
  * Table - Semantic HTML table with consistent styling
@@ -2963,11 +2969,11 @@ declare function TableRow({ children, className, selected, ...props }: Readonly<
  * - Includes proper scope attribute for accessibility
  * - Default scope is 'col' for column headers
  */
-declare function TableHeadCell({ children, className, align, scope, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableHeadCell({ children, className, align, scope, wrapText, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
 /**
  * TableCell - Table data cell (td)
  */
-declare function TableCell({ children, className, align, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableCell({ children, className, align, wrapText, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
 
 type AlertProps = {
     /** The content to display inside the alert message */

package/dist/index.d.ts

@@ -2568,6 +2568,8 @@ type ColumnDef<T> = {
     width?: string;
     /** Text alignment for cells in this column */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating (useful for long strings) */
+    wrapText?: boolean;
     /** Custom render function for cell content (use as escape hatch when config options don't cover your use case) */
     render?: (value: T[keyof T], row: T, index: number) => ReactNode;
     /** Pre-built formatter for common data types */
@@ -2925,6 +2927,8 @@ type TableHeadCellProps = {
     align?: 'left' | 'center' | 'right';
     /** Scope attribute for accessibility (col for column headers, row for row headers) */
     scope?: 'col' | 'row';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 type TableCellProps = {
     /** Content of the cell */
@@ -2933,6 +2937,8 @@ type TableCellProps = {
     className?: string;
     /** Text alignment within the cell */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 /**
  * Table - Semantic HTML table with consistent styling
@@ -2963,11 +2969,11 @@ declare function TableRow({ children, className, selected, ...props }: Readonly<
  * - Includes proper scope attribute for accessibility
  * - Default scope is 'col' for column headers
  */
-declare function TableHeadCell({ children, className, align, scope, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableHeadCell({ children, className, align, scope, wrapText, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
 /**
  * TableCell - Table data cell (td)
  */
-declare function TableCell({ children, className, align, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableCell({ children, className, align, wrapText, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
 
 type AlertProps = {
     /** The content to display inside the alert message */

package/dist/index.js

@@ -3898,7 +3898,7 @@ function Table({
         }
         ${hoverable ? `
         table tbody tr:hover {
-          background-color: hsl(var(--muted) / 0.5);
+          background-color: hsl(var(--muted) / 0.6) !important;
         }
         ` : ""}
         .table-compact td,
@@ -3926,6 +3926,7 @@ function TableHeadCell({
   className = "",
   align = "left",
   scope = "col",
+  wrapText = false,
   ...props
 }) {
   const alignClasses4 = {
@@ -3933,15 +3934,23 @@ function TableHeadCell({
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses4[align]} ${className}`, ...props, children });
+  const wrapClasses = wrapText ? "whitespace-normal break-words" : "whitespace-nowrap";
+  return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses4[align]} ${wrapClasses} ${className}`, ...props, children });
 }
-function TableCell({ children, className = "", align = "left", ...props }) {
+function TableCell({
+  children,
+  className = "",
+  align = "left",
+  wrapText = false,
+  ...props
+}) {
   const alignClasses4 = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses4[align]} ${className}`, ...props, children });
+  const wrapClasses = wrapText ? "whitespace-normal break-words" : "whitespace-nowrap";
+  return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 ${wrapClasses} ${alignClasses4[align]} ${className}`, ...props, children });
 }
 var table_default = Table;
 function Checkbox({
@@ -4268,7 +4277,7 @@ function DataTable({
               columns.map((column) => {
                 const value = row[column.key];
                 const content = renderCellContent(value, column, row, actualIndex);
-                return /* @__PURE__ */ jsx(TableCell, { align: column.align, children: content }, String(column.key));
+                return /* @__PURE__ */ jsx(TableCell, { align: column.align, wrapText: column.wrapText, children: content }, String(column.key));
               }),
               actions && /* @__PURE__ */ jsx(TableCell, { align: "center", onClick: (e) => e.stopPropagation(), children: (() => {
                 let rowActions;