@llmnative/react 1.11.0 → 1.12.0

package/dist/types/src/components/ui/Gallery.d.ts

@@ -33,6 +33,17 @@ export type GalleryOverlay = {
      */
     style?: React.CSSProperties;
 };
+export interface GalleryItemRenderContext {
+    isSelected: boolean;
+    toggleSelection: () => void;
+}
+/** Full replacement for an item's default content (`<img>` + `overlays`) — for a card with no
+ * image at all (icon/text/badges). The selection checkbox, click-handling (bubbling from
+ * whatever's clicked inside up to `onRowClick`, same bail-out on interactive descendants as the
+ * default image) and the grid item's own sizing stay owned by `Gallery`; only what goes INSIDE
+ * that box is up to the caller. Purely additive: omitting it leaves every existing
+ * `img`/`thumbnail`/`overlays` consumer unaffected. */
+export type GalleryItemRender = (item: GalleryRecord, index: number, ctx: GalleryItemRenderContext) => React.ReactNode;
 export type GallerySelectionState = RecordSelectionState<GalleryRecord>;
 export type GallerySelectionChangeHandler = (selection: GallerySelectionState) => void;
 export interface GalleryProps extends UIProps {
@@ -41,6 +52,9 @@ export interface GalleryProps extends UIProps {
     footer?: string | React.ReactNode;
     /** Overlay badges rendered on each gallery item. */
     overlays?: GalleryOverlay[];
+    /** Replaces an item's entire default content (image + overlays) with custom markup — see
+     * `GalleryItemRender`. Omit for the existing image-based card. */
+    renderItem?: GalleryItemRender;
     onRowClick?: (record: GalleryRecord) => void;
     onSelectionChange?: GallerySelectionChangeHandler;
     /** Enable sorting, optionally with a default sort config. */
@@ -57,5 +71,5 @@ export interface GalleryProps extends UIProps {
     footerClassName?: string;
     selectedClassName?: string;
 }
-declare const Gallery: ({ records, header, footer, overlays, onRowClick, onSelectionChange, sortable, pagination, gap, columns, groupBy, selectedKeys, before, after, wrapperClassName, className, headerClassName, scrollClassName, bodyClassName, footerClassName, selectedClassName }: GalleryProps) => React.JSX.Element;
+declare const Gallery: ({ records, header, footer, overlays, renderItem, onRowClick, onSelectionChange, sortable, pagination, gap, columns, groupBy, selectedKeys, before, after, wrapperClassName, className, headerClassName, scrollClassName, bodyClassName, footerClassName, selectedClassName }: GalleryProps) => React.JSX.Element;
 export default Gallery;

package/dist/types/src/components/widgets/grid-core/GridGalleryView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { type RecordProps } from "../../../providers/data/DataProvider";
 import { type GridGalleryViewProps } from "./types";
-declare function GridGalleryView<TRecord extends RecordProps>({ records, recordId, sortable, pagination, selection, selectedKeys, onSelectionChange, onRowClick, groupBy, wrapperClassName, before, after, columns, overlays, }: GridGalleryViewProps<TRecord>): React.JSX.Element;
+declare function GridGalleryView<TRecord extends RecordProps>({ records, recordId, sortable, pagination, selection, selectedKeys, onSelectionChange, onRowClick, groupBy, wrapperClassName, before, after, columns, overlays, renderItem, }: GridGalleryViewProps<TRecord>): React.JSX.Element;
 export default GridGalleryView;

package/dist/types/src/components/widgets/grid-core/types.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type OrderConfig } from "../../../libs/order";
 import { type PaginationParams } from "../../ui/Pagination";
-import { type GalleryOverlay } from "../../ui/Gallery";
+import { type GalleryItemRenderContext, type GalleryOverlay } from "../../ui/Gallery";
 import { type DatabaseOptions, type RecordProps } from "../../../providers/data/DataProvider";
 export type GridLayout = "table" | "gallery";
 export type GridSticky = "top" | "bottom";
@@ -71,6 +71,14 @@ export type GridGalleryViewConfig<TRecord> = {
      * simply stack, with the custom overlay rendered first.
      */
     overlays?: GalleryOverlay[];
+    /**
+     * Full replacement for a card's default content (image + `fields`/`overlays`) — for a card
+     * with no image at all (icon/text/badges), forwarded to `<Gallery renderItem>`. Mutually
+     * exclusive in effect with `fields`/`overlays`: when set, `Gallery` renders ONLY this for
+     * every item (see `GalleryItemRender`'s doc comment in `ui/Gallery.tsx`) — `fields`/`overlays`
+     * are ignored, not merged, since there is no default image left to overlay them onto.
+     */
+    renderItem?: (record: TRecord, index: number, ctx: GalleryItemRenderContext) => React.ReactNode;
 };
 /**
  * Groups every Table/Gallery-view-switching concern under one input, instead of a flat
@@ -475,5 +483,7 @@ export type GridGalleryViewProps<TRecord extends RecordProps> = {
     columns?: 1 | 2 | 3 | 4 | 6;
     /** Overlay badges/render-props for each card — forwarded to `<Gallery overlays>`. */
     overlays?: GalleryOverlay[];
+    /** Full replacement for a card's default content — forwarded to `<Gallery renderItem>`. */
+    renderItem?: (record: TRecord, index: number, ctx: GalleryItemRenderContext) => React.ReactNode;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",