@llmnative/react 1.22.1 → 1.24.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';
@@ -59,7 +61,7 @@ export type { ListCardProps } from './blocks/ListCard';
 export { default as SideNav } from './blocks/SideNav';
 export type { SideNavProps, SideNavItemDef } from './blocks/SideNav';
 export { default as Form, useFormContext } from './widgets/Form';
-export type { FormProps, FormDeleteArgs, FormDeleteHandler, FormFinallyArgs, FormFinallyHandler, FormSaveArgs, FormSaveHandler, ChangeHandler, FieldOnChange } from './widgets/Form';
+export type { FieldLabel, FormFieldProps, FormProps, FormDeleteArgs, FormDeleteHandler, FormFinallyArgs, FormFinallyHandler, FormSaveArgs, FormSaveHandler, ChangeHandler, FieldOnChange } from './widgets/Form';
 export { FormControllerContext, useFormActions, useFormController } from './widgets/form-controller';
 export type { FormActionEvent, FormController, FormControllerActions, FormControllerState, FormDraftStatus } from './widgets/form-controller';
 export { default as Grid } from './widgets/Grid';

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/dist/types/src/components/ui/fields/CodeEditor.d.ts

@@ -36,7 +36,7 @@ export interface CodeEditorProps extends FormFieldProps {
      * for `'fill'` to have any effect. */
     minHeight?: EditorHeight;
     maxHeight?: number;
-    label?: string;
+    label?: FormFieldProps['label'];
     required?: boolean;
     disabled?: boolean;
     feedback?: string;

package/dist/types/src/components/ui/fields/ImageField.d.ts

@@ -21,7 +21,7 @@ export interface ImageFieldProps extends FormFieldProps {
      * Example: "/content/posts/images"
      */
     uploadPath?: string;
-    label?: string;
+    label?: FormFieldProps['label'];
     required?: boolean;
     disabled?: boolean;
     feedback?: string;

package/dist/types/src/components/ui/fields/Input.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UIProps } from '../../..';
-import { FormFieldProps, InputType } from '../../widgets/Form';
+import { FieldLabel, FormFieldProps, InputType } from '../../widgets/Form';
 import type { FieldValue } from '../../../providers/data/DataProvider';
 interface BaseInputProps extends FormFieldProps {
     placeholder?: string;
@@ -19,7 +19,8 @@ interface BaseInputProps extends FormFieldProps {
     afterInset?: React.ReactNode;
 }
 interface LabelProps {
-    label: string;
+    /** A text or a React node, drawn inside the `<label>` before the required mark. */
+    label: FieldLabel;
     required?: boolean;
     htmlFor?: string;
     className?: string;

package/dist/types/src/components/ui/fields/UploadCSV.d.ts

@@ -17,7 +17,8 @@ interface UploadCSVProps extends UIProps {
     onDataLoaded: UploadCSVDataLoadedHandler;
     onClear?: () => void;
     onParseField?: UploadCSVParseFieldHandler;
-    label?: string;
+    /** A text or a React node, as the label of the other fields. */
+    label?: React.ReactNode;
     icon?: string;
     delimiter?: string;
     normalizeKeys?: boolean;

package/dist/types/src/components/widgets/Form.d.ts

@@ -41,9 +41,12 @@ interface FormContextResult {
     formWrapClass?: string;
     record: RecordProps;
 }
+/** Label of a field: a text, or a React node (e.g. the text with an info button next to it). */
+export type FieldLabel = React.ReactNode;
 export interface FormFieldProps extends UIProps {
     name: string;
-    label?: string;
+    /** A text or a React node; where a text is needed (messages, `aria-label`) its text is used. */
+    label?: FieldLabel;
     labelMode?: LabelMode;
     value?: FieldValue;
     required?: boolean;
@@ -59,7 +62,7 @@ interface SetFormFieldsNameProps {
 }
 interface FieldValidationConstraints {
     required?: boolean;
-    label?: string;
+    label?: FieldLabel;
     validator?: (value: FieldValue) => string | undefined | Promise<string | undefined>;
 }
 interface FormValidationContextValue {

package/dist/types/src/components/widgets/Prompt.d.ts

@@ -50,7 +50,7 @@ type RenderAIUnavailable = (props: {
 }) => React.ReactNode;
 interface PromptFieldBase {
     name: string;
-    label?: string;
+    label?: FormFieldProps["label"];
     required?: boolean;
     onChange?: FormFieldProps["onChange"];
     before?: React.ReactNode;

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

@@ -8,5 +8,6 @@ export * from './csv';
 export * from './utils';
 export * from './order';
 export { cn } from './cn';
+export { labelText } from './labelText';
 export { useImage } from './imageBuilder';
 export type { UseImageResult, ImageBuilderConfig, SrcsetConfig, SrcsetDensityConfig, SrcsetWidthConfig, ImageParams, ImgFit } from './imageBuilder';

package/dist/types/src/libs/labelText.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * The plain text of a label that may be a React node (`FieldLabel`): the strings and numbers it
+ * contains, in order, with whitespace collapsed. Used where a label must be text, such as the
+ * "required" message of a form or an `aria-label`.
+ *
+ * ```ts
+ * labelText(<>Skill <InfoButton /></>) // "Skill"
+ * ```
+ */
+export declare function labelText(node: React.ReactNode): string;

package/llms-full.txt

@@ -326,6 +326,11 @@ Azioni: `save()`, `delete()`, `reset()`, `restoreDraft()`, `discardDraft()`.
 
 **NOTA**: il tipo HTML si passa con `type`. `inputType` e i sotto-componenti `Input.Number`/`Input.Email`/`Input.Date` non esistono.
 
+**Label come nodo**: `label` di tutti i campi di inserimento (`Input`, `TextArea`, `Checkbox`, `Select`, `Autocomplete`, `Checklist`, `Upload*`, `ImageField`, `CodeEditor`, `RichText`, `AddressAutocomplete`, `UploadCSV`, `Prompt`) accetta una stringa o un nodo React (tipo `FieldLabel`), disegnato dentro la `<label>` prima dell'asterisco di obbligatorio. Dove serve un testo (messaggio "obbligatorio", `aria-label`) si usa il testo del nodo, ricavabile anche con `labelText(node)`.
+```tsx
+<Select name="skill" required options={skills} label={<>Skill <ActionButton icon="info" ariaLabel="Apri la skill" variant="link" onClick={openSkill} /></>} />
+```
+
 ### Select / Autocomplete / Checklist
 ```tsx
 <Select name="role" options={[{ label: 'Admin', value: 'admin' }]} />
@@ -708,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.22.1",
+  "version": "1.24.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: '',