@godxjp/ui 13.17.1 → 13.17.3

package/dist/components/data-display/data-table.d.ts

@@ -25,10 +25,16 @@ interface DataTableProps<T> {
     hoverable?: boolean;
     /** Pin the header to the top while the body scrolls. Default true. */
     stickyHeader?: boolean;
+    /**
+     * Per-row className for state-based row tinting (e.g. flag an invalid or
+     * empty record). Returned classes are appended last, so they win over the
+     * built-in hover/selected fills. Return `undefined` to leave a row unstyled.
+     */
+    rowClassName?: (row: T) => string | undefined;
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, loading, empty, striped, hoverable, stickyHeader, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, loading, empty, striped, hoverable, stickyHeader, rowClassName, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

package/dist/components/data-display/data-table.js

@@ -53,6 +53,7 @@ function DataTable({
   striped = false,
   hoverable = false,
   stickyHeader = true,
+  rowClassName,
   className,
   children
 }) {
@@ -101,7 +102,8 @@ function DataTable({
     emptyColSpan,
     striped,
     hoverable,
-    stickyHeader
+    stickyHeader,
+    rowClassName
   };
   const hasContent = React.Children.toArray(children).some(
     (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Content"
@@ -195,7 +197,8 @@ DataTable.Content = function DataTableContent() {
     emptyColSpan,
     striped,
     hoverable,
-    stickyHeader
+    stickyHeader,
+    rowClassName
   } = useDataTableContext();
   const { t } = useTranslation();
   const rowPadding = tableRowHeightClass;
@@ -329,7 +332,8 @@ DataTable.Content = function DataTableContent() {
                     (onRowClick || hoverable) && "hover:bg-muted/50",
                     // …but the affordance (cursor + focus ring) only when clickable.
                     onRowClick && "focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
-                    isSelected && "bg-muted/30"
+                    isSelected && "bg-muted/30",
+                    rowClassName?.(row)
                   ),
                   children: [
                     selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(

package/dist/styles/form-layout.css

@@ -20,14 +20,30 @@
   .ui-form-field {
     display: grid;
     gap: var(--field-label-gap);
+    /* Fill the container's inline (horizontal) axis in ANY parent — a Form's
+     * flex column (.ui-form), a ResponsiveGrid cell, or a bare flex column /
+     * block — instead of collapsing to the content's max-content width. This
+     * mirrors Ant Design's Form.Item, which sets the item/control to width:100%
+     * in vertical layout rather than relying on the parent to stretch it. Without
+     * this, a flex-column parent maps `align-self:start` onto the inline axis and
+     * the field shrinks to its widest content (a helper-less input collapses to
+     * its default ~20ch). Inline layout opts out below (Ant: compact, content-width). */
+    inline-size: 100%;
     /* Never stretch to a taller grid-row sibling (e.g. a field carrying a
      * helper/error). Stretching would let .ui-form-field-control's
      * align-content:center vertically centre the control, so a field WITHOUT a
      * helper sits lower than one WITH a helper in the same ResponsiveGrid row.
-     * Hugging content keeps every control top-aligned across the row. */
+     * Hugging content keeps every control top-aligned across the row. This is the
+     * BLOCK (vertical) axis only — width is pinned by inline-size:100% above. */
     align-self: start;
   }
 
+  /* Inline layout is intentionally compact (Ant: layout="inline"): the field
+   * hugs its content so a row of inline fields can sit side by side. */
+  .ui-form-field[data-layout="inline"] {
+    inline-size: auto;
+  }
+
   .ui-form-field-label {
     display: flex;
     align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.17.1",
+  "version": "13.17.3",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,