@llmnative/react 1.23.0 → 1.25.0

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

@@ -340,6 +340,12 @@ export interface ThemeConfig {
         wrapperClassName?: string;
         className?: string;
     };
+    Tree?: {
+        wrapperClassName?: string;
+        className?: string;
+        itemClassName?: string;
+        selectedClassName?: string;
+    };
     DescriptionList?: {
         wrapperClassName?: string;
         className?: string;

package/dist/types/src/components/index.d.ts

@@ -16,6 +16,8 @@ export { default as Alert } from './ui/Alert';
 export type { AlertProps } from './ui/Alert';
 export { default as Badge } from './ui/Badge';
 export { default as DescriptionList } from './ui/DescriptionList';
+export { default as Tree, treeFromPaths } from './ui/Tree';
+export type { TreeNode, TreeProps } from './ui/Tree';
 export type { DescriptionListItem, DescriptionListLayout, DescriptionListColumns, DescriptionListProps } from './ui/DescriptionList';
 export * from './ui/Badge';
 export * from './ui/Buttons';

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

@@ -52,10 +52,11 @@ export interface ModalProps extends MotionUIProps {
      */
     rightInset?: number;
     /**
-     * When `true` this modal is visually "behind" another modal stacked on top.
-     * The panel becomes 10% wider (so its edge peeks out from behind the upper modal),
-     * gains a semi-transparent dimming overlay, its backdrop is suppressed (the upper
-     * modal's backdrop handles interaction blocking), and its cover becomes non-interactive.
+     * When `true` this modal is visually "behind" another modal stacked on top, as in
+     * Google Tag Manager: it keeps its size and height, a side panel (`left`/`right`) slides
+     * inwards so a strip of it peeks out from behind the upper one, a veil dims it, its
+     * backdrop fades out (the upper modal's backdrop takes over) and it stops reacting to the
+     * pointer. Every change runs with the slide transition of the modal, both ways.
      */
     stackedBehind?: boolean;
     /**

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

@@ -0,0 +1,47 @@
+import React from "react";
+/** One node of a `<Tree>`: a leaf, or a branch with `children`. */
+export interface TreeNode {
+    /** Unique in the tree: it is what `selectedId`, `expanded` and `onSelect` speak of. */
+    id: string;
+    label: React.ReactNode;
+    /** Icon name; branches default to a folder, leaves to a file. */
+    icon?: string;
+    /** Shown after the label, e.g. a count or a status. */
+    badge?: React.ReactNode;
+    /** Muted text after the label, e.g. what a file is for. */
+    description?: React.ReactNode;
+    children?: TreeNode[];
+    disabled?: boolean;
+}
+export interface TreeProps {
+    nodes: readonly TreeNode[];
+    /** Selected node (controlled). */
+    selectedId?: string | null;
+    /** Selected node at start (uncontrolled). */
+    defaultSelectedId?: string | null;
+    onSelect?: (node: TreeNode) => void;
+    /** Open branches (controlled). */
+    expanded?: readonly string[];
+    /** Open branches at start (uncontrolled); `true` opens them all. */
+    defaultExpanded?: readonly string[] | true;
+    onExpandedChange?: (expanded: string[]) => void;
+    /** Branches can be selected too, not only opened. Default `false`. */
+    selectableBranches?: boolean;
+    /** Accessible name of the tree. */
+    ariaLabel?: string;
+    wrapperClassName?: string;
+    className?: string;
+    itemClassName?: string;
+    selectedClassName?: string;
+}
+/**
+ * A tree of nodes (folders and files, a hierarchy), WAI-ARIA tree pattern: one tab stop, arrows to
+ * move, → / ← to open and close, Enter or Space to select. Branches open on click; leaves are
+ * selected. Expansion and selection work controlled or uncontrolled.
+ */
+export default function Tree({ nodes, selectedId, defaultSelectedId, onSelect, expanded, defaultExpanded, onExpandedChange, selectableBranches, ariaLabel, wrapperClassName, className, itemClassName, selectedClassName, }: TreeProps): React.JSX.Element;
+/**
+ * A tree from `a/b/c` paths: one branch per folder, one leaf per path (its id is the full path,
+ * folders get `path/`). Folders come before files, each sorted by name. `leaf` decorates a leaf.
+ */
+export declare function treeFromPaths(paths: readonly string[], leaf?: (path: string) => Partial<TreeNode>): TreeNode[];

package/llms-full.txt

@@ -578,7 +578,7 @@ Accessibilità: il dialog ha `role="dialog"`, `aria-modal="true"` (non con `stac
 | `onSave` / `onDelete` | `(e) => Promise<boolean>` | |
 | `allowFullscreen` | `boolean` | Toggle fullscreen |
 | `showCancel` | `boolean` | Default `true` |
-| `stackedBehind` | `boolean` | Modal seconda in pila |
+| `stackedBehind` | `boolean` | Modale sotto un'altra (stile Google Tag Manager): resta a tutta altezza; se laterale scorre verso l'interno di 3rem, così ne sporge una striscia; un velo la scurisce, il suo backdrop sfuma e non riceve il puntatore. Senza scale né filter, con la stessa transizione dello slide, in entrata e in uscita |
 | `closeOnBackdrop` | `boolean` | Default `true` |
 | `closeOnEscape` | `boolean` | Default `true` — solo il modal in cima reagisce |
 | `zIndex` | `number` | |
@@ -713,6 +713,23 @@ Coppie etichetta → valore in sola lettura (profilo, dati di un record, riepilo
 | `truncate` | `boolean` | `false`; un valore testuale diventa il suo `title` |
 | Classi | `wrapperClassName`, `className`, `itemClassName`, `labelClassName`, `valueClassName` | tema `DescriptionList` |
 
+### Tree
+Albero accessibile di nodi (cartelle e file, gerarchie): pattern WAI-ARIA tree, un solo tab stop, frecce per muoversi, → / ← per aprire e chiudere, Invio o Spazio per selezionare. Le cartelle si aprono al click, le foglie si selezionano.
+```tsx
+<Tree nodes={treeFromPaths(paths)} defaultExpanded selectedId={path} onSelect={(node) => setPath(node.id)} ariaLabel="File" />
+<Tree nodes={[{ id: 'a', label: 'Docs', children: [{ id: 'a/1', label: 'README.md', badge: <Badge>new</Badge> }] }]} />
+```
+| Prop | Tipo | Note |
+|---|---|---|
+| `nodes` | `TreeNode[]` — `{ id, label, icon?, badge?, description?, children?, disabled? }` | `id` unico; con `children` è una cartella |
+| `selectedId` + `onSelect` / `defaultSelectedId` | `string \| null` | selezione controllata o no |
+| `expanded` + `onExpandedChange` / `defaultExpanded` | `string[]`; `defaultExpanded` anche `true` (tutto aperto) | apertura controllata o no |
+| `selectableBranches` | `boolean` (default `false`) | anche le cartelle si selezionano |
+| `ariaLabel` | `string` | nome accessibile |
+| Classi | `wrapperClassName`, `className`, `itemClassName`, `selectedClassName` | tema `Tree` |
+
+`treeFromPaths(paths, leaf?)` costruisce l'albero da percorsi `a/b/c`: cartelle prima dei file, ordinati; l'id di un file è il percorso, quello di una cartella `percorso/`; `leaf(path)` decora le foglie (label, icona, descrizione…).
+
 ### Dropdown
 ```tsx
 <Dropdown trigger={<Icon name="menu" />} position="end">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.23.0",
+  "version": "1.25.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

@@ -446,6 +446,12 @@ export const components: Theme = {
         wrapperClassName: '',
         className: '',
     },
+    Tree: {
+        wrapperClassName: '',
+        className: '',
+        itemClassName: '',
+        selectedClassName: '',
+    },
     DescriptionList: {
         wrapperClassName: '',
         className: '',

package/themes/default.ts

@@ -460,6 +460,12 @@ export const components: Theme = {
         wrapperClassName: '',
         className: '',
     },
+    Tree: {
+        wrapperClassName: '',
+        className: '',
+        itemClassName: '',
+        selectedClassName: '',
+    },
     DescriptionList: {
         wrapperClassName: '',
         className: '',

package/themes/flat.ts

@@ -446,6 +446,12 @@ export const components: Theme = {
         wrapperClassName: '',
         className: '',
     },
+    Tree: {
+        wrapperClassName: '',
+        className: '',
+        itemClassName: '',
+        selectedClassName: '',
+    },
     DescriptionList: {
         wrapperClassName: '',
         className: '',