@llmnative/react 1.11.1 → 1.13.0

package/dist/types/src/Theme.d.ts

@@ -147,6 +147,20 @@ export interface GalleryTheme {
     gap?: 0 | 1 | 2 | 3 | 4 | 5;
     rowCols?: 1 | 2 | 3 | 4 | 6;
 }
+export interface RepeatTheme {
+    /** Extra classes merged (via twMerge — later wins on conflicting utilities) onto the
+     * per-item shell of every `Repeat`, on top of its hardcoded default (rounded card + border).
+     * Applies app-wide to every `Repeat`, regardless of `layout`. */
+    itemClassName?: string;
+    /** Same as `itemClassName`, but only for `layout="inline"` — merged AFTER `itemClassName`, so
+     * it wins on any conflicting utility. Lets a consumer keep the bordered/carded look for
+     * `horizontal`/`vertical` repeats (e.g. content list fields) while flattening only the compact
+     * inline ones (e.g. inline chip-like rows nested inside an already-bordered popover/card). */
+    inlineItemClassName?: string;
+    /** Extra classes merged onto the "Add" button rendered when `label` + `labelPosition="bottom"`
+     * are set. */
+    addButtonClassName?: string;
+}
 export interface ModalTheme {
     size?: "sm" | "md" | "lg" | "xl" | "fullscreen";
     position?: "center" | "top" | "left" | "right" | "bottom";
@@ -348,6 +362,7 @@ export interface ThemeConfig {
         wrapperClassName?: string;
         className?: string;
     };
+    Repeat?: RepeatTheme;
 }
 type DeepRequired<T> = {
     [K in keyof T]-?: NonNullable<T[K]> extends (...args: unknown[]) => unknown ? NonNullable<T[K]> : NonNullable<T[K]> extends object ? DeepRequired<NonNullable<T[K]>> : NonNullable<T[K]>;

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.1",
+  "version": "1.13.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",

package/themes/cyber.ts

@@ -468,6 +468,11 @@ export const components: Theme = {
         wrapperClassName: '',
         className: '',
     },
+    Repeat: {
+        itemClassName: '',
+        inlineItemClassName: '',
+        addButtonClassName: '',
+    },
 };
 
 const definition: ThemeDefinition = { preset, motion, components };

package/themes/default.ts

@@ -482,6 +482,11 @@ export const components: Theme = {
         wrapperClassName: '',
         className: '',
     },
+    Repeat: {
+        itemClassName: '',
+        inlineItemClassName: '',
+        addButtonClassName: '',
+    },
 };
 
 const definition: ThemeDefinition = { preset, motion, components };

package/themes/flat.ts

@@ -468,6 +468,11 @@ export const components: Theme = {
         wrapperClassName: '',
         className: '',
     },
+    Repeat: {
+        itemClassName: '',
+        inlineItemClassName: '',
+        addButtonClassName: '',
+    },
 };
 
 const definition: ThemeDefinition = { preset, motion, components };