design-zystem 1.0.450 → 1.0.452

package/dist/ui/index.d.mts

@@ -23,6 +23,7 @@ declare const layoutVariants: (props?: ({
     wrap?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
     fullHeight?: boolean | null | undefined;
+    grow?: boolean | null | undefined;
     padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
     paddingX?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
     paddingY?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
@@ -903,6 +904,7 @@ interface TableCellProps {
     borderLeft?: boolean;
     /** Curseur sur toute la cellule — quand un enfant de la cellule porte sa propre action de clic. */
     cursor?: keyof typeof CURSOR_CLASS;
+    onClick?: () => void;
     className?: string;
     /** Fusionne la cellule sur ce nombre de colonnes — ignore `width` pour laisser le navigateur répartir l'espace fusionné. */
     colSpan?: number;
@@ -911,7 +913,7 @@ interface TableCellProps {
     tooltip?: ReactNode;
     theme?: TableCellTheme;
 }
-declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
+declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, onClick, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
 
 interface TableFooterProps {
     children?: ReactNode;

package/dist/ui/index.d.ts

@@ -23,6 +23,7 @@ declare const layoutVariants: (props?: ({
     wrap?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
     fullHeight?: boolean | null | undefined;
+    grow?: boolean | null | undefined;
     padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
     paddingX?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
     paddingY?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
@@ -903,6 +904,7 @@ interface TableCellProps {
     borderLeft?: boolean;
     /** Curseur sur toute la cellule — quand un enfant de la cellule porte sa propre action de clic. */
     cursor?: keyof typeof CURSOR_CLASS;
+    onClick?: () => void;
     className?: string;
     /** Fusionne la cellule sur ce nombre de colonnes — ignore `width` pour laisser le navigateur répartir l'espace fusionné. */
     colSpan?: number;
@@ -911,7 +913,7 @@ interface TableCellProps {
     tooltip?: ReactNode;
     theme?: TableCellTheme;
 }
-declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
+declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, onClick, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
 
 interface TableFooterProps {
     children?: ReactNode;

package/dist/ui/index.js

@@ -319,6 +319,10 @@ var layoutVariants = (0, import_class_variance_authority.cva)("flex box-border",
       true: "h-full",
       false: ""
     },
+    grow: {
+      true: "flex-1 min-h-0 min-w-0",
+      false: ""
+    },
     padding: {
       0: "p-0",
       0.5: "p-0.5",
@@ -446,6 +450,7 @@ var Layout = (0, import_react.forwardRef)(
       wrap,
       fullWidth,
       fullHeight,
+      grow,
       padding,
       paddingX,
       paddingY,
@@ -468,6 +473,7 @@ var Layout = (0, import_react.forwardRef)(
       "wrap",
       "fullWidth",
       "fullHeight",
+      "grow",
       "padding",
       "paddingX",
       "paddingY",
@@ -496,6 +502,7 @@ var Layout = (0, import_react.forwardRef)(
             // Pleine largeur par défaut ; une `width` explicite reprend la main.
             fullWidth: fullWidth != null ? fullWidth : width === void 0,
             fullHeight,
+            grow,
             padding,
             paddingX,
             paddingY,
@@ -4259,6 +4266,15 @@ var TableExpandChevron = ({ isExpanded }) => /* @__PURE__ */ (0, import_jsx_runt
   }
 );
 
+// src/ui/components/ui/table/activateFromKeyboard.ts
+var ACTIVATION_KEYS = ["Enter", " "];
+var activateFromKeyboard = (activate) => (event) => {
+  if (event.target !== event.currentTarget) return;
+  if (!ACTIVATION_KEYS.includes(event.key)) return;
+  event.preventDefault();
+  activate();
+};
+
 // src/ui/components/ui/table/tableCellThemeClass.ts
 var TABLE_CELL_THEME_CLASS = {
   "blue-700": "text-blue-700",
@@ -4302,6 +4318,7 @@ var TableCell = ({
   borderLeft = false,
   colSpan,
   cursor,
+  onClick,
   className,
   wrap = false,
   maxLines,
@@ -4339,12 +4356,19 @@ var TableCell = ({
       children: content
     }
   ) : content;
+  const handleClick = onClick ? (event) => {
+    event.stopPropagation();
+    onClick();
+  } : void 0;
   const hoverableText = tooltip ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Tooltip, { content: tooltip, children: text }) : text;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "td",
     {
       colSpan,
       "data-sticky": sticky,
+      onClick: handleClick,
+      onKeyDown: onClick && activateFromKeyboard(onClick),
+      tabIndex: onClick ? 0 : void 0,
       className: cn(
         "h-10 px-2 py-2 text-center text-xs font-semibold",
         isWrapping ? "whitespace-normal break-words" : "text-ellipsis whitespace-nowrap",
@@ -4357,6 +4381,7 @@ var TableCell = ({
         sticky && backgroundColor && "z-[2]",
         accentColor && "border-l-4",
         cursor && CURSOR_CLASS[cursor],
+        onClick && "cursor-pointer",
         theme && TABLE_CELL_THEME_CLASS[theme],
         className
       ),
@@ -4414,15 +4439,6 @@ var TableFooterCell = ({
   }
 );
 
-// src/ui/components/ui/table/activateFromKeyboard.ts
-var ACTIVATION_KEYS = ["Enter", " "];
-var activateFromKeyboard = (activate) => (event) => {
-  if (event.target !== event.currentTarget) return;
-  if (!ACTIVATION_KEYS.includes(event.key)) return;
-  event.preventDefault();
-  activate();
-};
-
 // src/ui/components/ui/table/TableGroupLabel.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var TableGroupLabel = ({

package/dist/ui/index.mjs

@@ -89,6 +89,10 @@ var layoutVariants = cva("flex box-border", {
       true: "h-full",
       false: ""
     },
+    grow: {
+      true: "flex-1 min-h-0 min-w-0",
+      false: ""
+    },
     padding: {
       0: "p-0",
       0.5: "p-0.5",
@@ -216,6 +220,7 @@ var Layout = forwardRef(
       wrap,
       fullWidth,
       fullHeight,
+      grow,
       padding,
       paddingX,
       paddingY,
@@ -238,6 +243,7 @@ var Layout = forwardRef(
       "wrap",
       "fullWidth",
       "fullHeight",
+      "grow",
       "padding",
       "paddingX",
       "paddingY",
@@ -266,6 +272,7 @@ var Layout = forwardRef(
             // Pleine largeur par défaut ; une `width` explicite reprend la main.
             fullWidth: fullWidth != null ? fullWidth : width === void 0,
             fullHeight,
+            grow,
             padding,
             paddingX,
             paddingY,
@@ -4045,6 +4052,15 @@ var TableExpandChevron = ({ isExpanded }) => /* @__PURE__ */ jsx48(
   }
 );
 
+// src/ui/components/ui/table/activateFromKeyboard.ts
+var ACTIVATION_KEYS = ["Enter", " "];
+var activateFromKeyboard = (activate) => (event) => {
+  if (event.target !== event.currentTarget) return;
+  if (!ACTIVATION_KEYS.includes(event.key)) return;
+  event.preventDefault();
+  activate();
+};
+
 // src/ui/components/ui/table/tableCellThemeClass.ts
 var TABLE_CELL_THEME_CLASS = {
   "blue-700": "text-blue-700",
@@ -4088,6 +4104,7 @@ var TableCell = ({
   borderLeft = false,
   colSpan,
   cursor,
+  onClick,
   className,
   wrap = false,
   maxLines,
@@ -4125,12 +4142,19 @@ var TableCell = ({
       children: content
     }
   ) : content;
+  const handleClick = onClick ? (event) => {
+    event.stopPropagation();
+    onClick();
+  } : void 0;
   const hoverableText = tooltip ? /* @__PURE__ */ jsx49(Tooltip, { content: tooltip, children: text }) : text;
   return /* @__PURE__ */ jsx49(
     "td",
     {
       colSpan,
       "data-sticky": sticky,
+      onClick: handleClick,
+      onKeyDown: onClick && activateFromKeyboard(onClick),
+      tabIndex: onClick ? 0 : void 0,
       className: cn(
         "h-10 px-2 py-2 text-center text-xs font-semibold",
         isWrapping ? "whitespace-normal break-words" : "text-ellipsis whitespace-nowrap",
@@ -4143,6 +4167,7 @@ var TableCell = ({
         sticky && backgroundColor && "z-[2]",
         accentColor && "border-l-4",
         cursor && CURSOR_CLASS[cursor],
+        onClick && "cursor-pointer",
         theme && TABLE_CELL_THEME_CLASS[theme],
         className
       ),
@@ -4200,15 +4225,6 @@ var TableFooterCell = ({
   }
 );
 
-// src/ui/components/ui/table/activateFromKeyboard.ts
-var ACTIVATION_KEYS = ["Enter", " "];
-var activateFromKeyboard = (activate) => (event) => {
-  if (event.target !== event.currentTarget) return;
-  if (!ACTIVATION_KEYS.includes(event.key)) return;
-  event.preventDefault();
-  activate();
-};
-
 // src/ui/components/ui/table/TableGroupLabel.tsx
 import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var TableGroupLabel = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.450",
+  "version": "1.0.452",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",