laif-ds 0.2.47 → 0.2.49

package/dist/_virtual/index2.js

@@ -1,8 +1,5 @@
 "use client";
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/eventemitter3/index2.js";
-var r = t();
-const m = /* @__PURE__ */ e(r);
+var e = { exports: {} };
 export {
-  m as default
+  e as __module
 };

package/dist/_virtual/index3.js

@@ -1,5 +1,8 @@
 "use client";
-var e = { exports: {} };
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as t } from "../node_modules/eventemitter3/index2.js";
+var r = t();
+const m = /* @__PURE__ */ e(r);
 export {
-  e as __module
+  m as default
 };

package/dist/agent-docs/components/AppForm.md

@@ -22,7 +22,9 @@ export interface AppFormItem {
     | "datepicker"
     | "radio"
     | "switch"
-    | "slider"; // Field type
+    | "slider"
+    | "async"
+    | "async-multiple"; // Field type
   name: string; // Field name (used for form state and validation)
   inputType?: string; // HTML input type for "input" component (e.g. "text", "email", "password", "number")
   defaultValue?: string | boolean | number | string[] | Date | number[]; // Initial value
@@ -34,6 +36,15 @@ export interface AppFormItem {
   min?: number; // Minimum value for slider
   max?: number; // Maximum value for slider
   step?: number; // Step value for slider
+  fetcher?: (query?: string) => Promise<any[]>; // Async select data loader
+  renderOptionItem?: (option: any) => React.ReactNode; // Customize render of async option
+  resolveOptionValue?: (option: any) => string; // Value extractor for async option
+  renderSelectedValue?: (option: any) => React.ReactNode; // Customize render of selected async option
+  initialOptions?: any[]; // Optional cache for async select hydration
+  notFound?: React.ReactNode;
+  noResultsMessage?: string;
+  debounce?: number;
+  clearable?: boolean;
 }
 ```
 
@@ -116,6 +127,8 @@ export function SubmitInsideVsOutside() {
 
 ### input
 
+Standard text input field
+
 Standard text input field. When `component: "input"`, you can use the `inputType` property to control the underlying HTML input type (e.g. `"text"`, `"email"`, `"password"`, `"number"`, `"url"`).
 
 For a complete showcase of different input types, see the Storybook story `UI/AppForm/DifferentInputTypes`.
@@ -132,6 +145,58 @@ Single selection dropdown using AppSelect
 
 Multiple selection dropdown using AppSelect with `multiple` prop
 
+### async / async-multiple
+
+Use `AsyncSelect` for server-side driven selects. `async` gestisce un valore singolo, `async-multiple` un array di stringhe. Richiede i seguenti prop sull'item:
+
+- `fetcher`: funzione che restituisce `Promise<Option[]>`
+- `renderOptionItem`, `resolveOptionValue`, `renderSelectedValue`: per gestire il rendering e la selezione
+- `initialOptions` (opzionale ma consigliata) per idratare i valori preimpostati
+- `defaultValue` va impostato nei `defaultValues` di React Hook Form
+
+Esempio:
+
+```tsx
+const items: AppFormItem[] = [
+  {
+    component: "async",
+    name: "business",
+    label: "Business (async)",
+    placeholder: "Seleziona un business",
+    fetcher: mockAsyncSelectFetcher,
+    initialOptions: asyncSelectMockUsers,
+    renderOptionItem: (user) => (
+      <div>
+        <strong>{user.name}</strong>
+        <span className="text-muted-foreground text-xs">{user.email}</span>
+      </div>
+    ),
+    resolveOptionValue: (user) => user.id,
+    renderSelectedValue: (user) => user.name,
+  },
+  {
+    component: "async-multiple",
+    name: "team",
+    label: "Team (async)",
+    placeholder: "Seleziona i membri",
+    fetcher: mockAsyncSelectFetcher,
+    initialOptions: asyncSelectMockUsers,
+    renderOptionItem: (user) => user.name,
+    resolveOptionValue: (user) => user.id,
+    renderSelectedValue: (user) => user.name,
+  },
+];
+
+const form = useForm({
+  defaultValues: {
+    business: asyncSelectMockUsers[0]?.id ?? "",
+    team: asyncSelectMockUsers.slice(0, 2).map((u) => u.id),
+  },
+});
+```
+
+Ricorda che il fetch parte solo quando il menu è aperto; eventuali valori iniziali devono essere già presenti in `initialOptions`.
+
 ### datepicker
 
 Date picker component with optional range selection via `calendarRange`

package/dist/agent-docs/components/AsyncSelect.md

@@ -1,102 +1,94 @@
- # AsyncSelect
- 
- ## Overview
- 
- Generic async select with search input, popover list, optional preload and multiple selection. Fully render-prop driven for option content and value extraction.
- 
- ---
- 
- ## Props
- 
- | Prop              | Type                                         | Default     | Description |
- | ----------------- | -------------------------------------------- | ----------- | ----------- |
- | `fetcher`         | `(query?: string) => Promise<T[]>`           | **required**| Async loader for options. Called on open and on search. |
- | `preload`         | `boolean`                                    | `false`     | Preload all data once; then client-filter using `filterFn`. |
- | `filterFn`        | `(option: T, query: string) => boolean`      | `undefined` | Custom client-side filter when `preload=true`. |
- | `renderOption`    | `(option: T) => React.ReactNode`             | **required**| How to render each option row. |
- | `getOptionValue`  | `(option: T) => string`                      | **required**| Extract option id. |
- | `getDisplayValue` | `(option: T) => React.ReactNode`             | **required**| Display value for trigger. |
- | `multiple`        | `boolean`                                    | `false`     | Enable multi-selection. Controls `value` type. |
- | `value`           | `string | string[]`                          | `undefined` | Controlled value. |
- | `onChange`        | `(value: string | string[]) => void`         | `undefined` | Change callback. |
- | `label`           | `string | React.ReactNode`                   | `undefined` | Optional label above. |
- | `labelClassName`  | `string`                                     | `undefined` | Label classes. |
- | `placeholder`     | `string`                                     | `"Select..."` | Placeholder when empty. |
- | `disabled`        | `boolean`                                    | `false`     | Disable trigger and input. |
- | `width`           | `string | number | "auto"`                  | `200px`     | Popover width; `auto` matches trigger width. |
- | `triggerClassName`| `string`                                     | `undefined` | Extra classes for trigger button. |
- | `noResultsMessage`| `string`                                     | `undefined` | Message when list is empty. |
- | `clearable`       | `boolean`                                    | `true`      | Show clear icon when a value is set. |
- | `size`            | `"sm" | "default" | "lg"`                 | `"default"` | Trigger size. |
- | `loadingSkeleton` | `React.ReactNode`                            | `undefined` | Custom loading skeleton list. |
- | `notFound`        | `React.ReactNode`                            | `undefined` | Custom empty content. |
- 
- ---
- 
- ## Behavior
- 
- - **Search**: Debounced input (0ms when `preload=true`, 300ms otherwise).
- - **Caching**: Results cached by query; reused when re-typing.
- - **Multiple**: Renders selected count or first label; supports checkbox UI per item.
- - **Clear**: Built-in clear icon (uses DS `Icon`), respects `clearable`.
- - **A11y**: Trigger focus ring and keyboard navigation via `cmdk`.
- 
- ---
- 
- ## Examples
- 
- ### Preloaded
- 
- ```tsx
- import * as React from "react";
- import { AsyncSelect } from "laif-ds";
- 
- type User = { id: number; name: string; email: string };
- 
- async function fetchUsers(query?: string): Promise<User[]> {
-   const res = await fetch("https://jsonplaceholder.typicode.com/users");
-   const data: User[] = await res.json();
-   if (!query) return data;
-   const q = query.toLowerCase();
-   return data.filter((u) => u.name.toLowerCase().includes(q));
- }
- 
- export function PreloadedUsers() {
-   const [value, setValue] = React.useState("");
-   return (
-     <AsyncSelect<User>
-       preload
-       fetcher={fetchUsers}
-       value={value}
-       onChange={setValue}
-       renderOption={(u) => (
-         <div className="truncate">
-           <div className="font-medium">{u.name}</div>
-           <div className="text-d-muted-foreground text-xs">{u.email}</div>
-         </div>
-       )}
-       getOptionValue={(u) => String(u.id)}
-       getDisplayValue={(u) => u.name}
-       placeholder="Select a user..."
-       width="300px"
-     />
-   );
- }
- ```
- 
- ### Multiple with Steps
- 
- ```tsx
- import * as React from "react";
- import { AsyncSelect } from "laif-ds";
- 
+# AsyncSelect
+
+## Overview
+
+Generic async select with search input, popover list, server-side filtering, and optional multiple selection. Fully render-prop driven for option content and value extraction.
+
+---
+
+## Props
+
+| Prop                  | Type                                  | Default       | Description                                                                         |
+| --------------------- | ------------------------------------- | ------------- | ----------------------------------------------------------------------------------- |
+| `fetcher`             | `(query?: string) => Promise<T[]>`    | **required**  | Async loader for options. Called on open and on search.                             |
+| `renderOptionItem`    | `(option: T) => React.ReactNode`      | **required**  | Custom renderer for each menu row.                                                  |
+| `resolveOptionValue`  | `(option: T) => string`               | **required**  | Returns the unique ID stored in `value`.                                            |
+| `renderSelectedValue` | `(option: T) => React.ReactNode`      | **required**  | Content shown in the trigger when selected.                                         |
+| `multiple`            | `boolean`                             | `false`       | Enables multi-selection and switches `value` to `string[]`.                         |
+| `value`               | `string \| string[] \| undefined`     | `undefined`   | Controlled value.                                                                   |
+| `onChange`            | `(value: string \| string[]) => void` | `undefined`   | Emits the next value when the selection changes.                                    |
+| `label`               | `string \| React.ReactNode`           | `undefined`   | Optional label rendered above the trigger.                                          |
+| `placeholder`         | `string`                              | `"Select..."` | Placeholder when no value is selected.                                              |
+| `disabled`            | `boolean`                             | `false`       | Disables trigger and input interactions.                                            |
+| `className`           | `string`                              | `undefined`   | Extra classes for the trigger button.                                               |
+| `wrpClassName`        | `string`                              | `undefined`   | Classes applied to the outer wrapper (use this to control width, e.g. `w-[200px]`). |
+| `noResultsMessage`    | `string`                              | `undefined`   | Message shown inside the default empty state.                                       |
+| `clearable`           | `boolean`                             | `true`        | Shows the clear icon when a value is present.                                       |
+| `size`                | `"sm" \| "default" \| "lg"`           | `"default"`   | Trigger size variant.                                                               |
+| `notFound`            | `React.ReactNode`                     | `undefined`   | Custom fallback when there are no options.                                          |
+| `initialOptions`      | `T[]`                                 | `undefined`   | Prefills cache/selection with a known options list.                                 |
+| `debounce`            | `number`                              | `300`         | Debounce delay (ms) before calling `fetcher`.                                       |
+
+---
+
+## Behavior
+
+- **Search**: Debounced input (300ms) that always hits the provided `fetcher`.
+- **Caching**: Results cached by query; reused when re-typing.
+- **Multiple**: Renders selected count or first label; supports checkbox UI per item.
+- **Clear**: Built-in clear icon (uses DS `Icon`), respects `clearable`.
+- **A11y**: Trigger focus ring and keyboard navigation via `cmdk`.
+
+---
+
+## Examples
+
+### Multiple with Steps
+
+```tsx
+import * as React from "react";
+import { AsyncSelect } from "laif-ds";
+
+type Tag = { id: string; label: string };
+const tags: Tag[] = [
+  { id: "react", label: "React" },
+  { id: "nextjs", label: "Next.js" },
+  { id: "tailwind", label: "Tailwind" },
+];
+
+export function MultipleTags() {
+  const [value, setValue] = React.useState<string[]>([]);
+  const fetcher = async (q?: string) =>
+    !q ? tags : tags.filter((t) => t.label.toLowerCase().includes(q!.toLowerCase()));
+  return (
+    <AsyncSelect<Tag>
+      multiple
+      fetcher={fetcher}
+      value={value}
+      onChange={setValue}
+      renderOptionItem={(t) => t.label}
+      resolveOptionValue={(t) => t.id}
+      renderSelectedValue={(t) => t.label}
+      placeholder="Select tags..."
+      wrpClassName="w-[280px]"
+    />
+  );
+}
+
+---
+
+## Notes
+
+- **Trigger width**: Use `width="auto"` to match trigger width; or a fixed `number|string`.
+- **Filtering**: Always handled server-side via `fetcher`, with cached responses per query.
+- **Theming**: Uses DS token classes across trigger, list, and states.
  type Tag = { id: string; label: string };
  const tags: Tag[] = [
    { id: "react", label: "React" },
    { id: "nextjs", label: "Next.js" },
    { id: "tailwind", label: "Tailwind" },
  ];
- 
+
  export function MultipleTags() {
    const [value, setValue] = React.useState<string[]>([]);
    const fetcher = async (q?: string) =>
@@ -115,13 +107,12 @@
      />
    );
  }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Trigger width**: Use `width="auto"` to match trigger width; or a fixed `number|string`.
- - **Filtering**: For big datasets prefer server search (no `preload`); for small datasets prefer `preload` + `filterFn`.
- - **Theming**: Uses DS token classes across trigger, list, and states.
- 
+```
+
+---
+
+## Notes
+
+- **Trigger width**: Use `width="auto"` to match trigger width; or a fixed `number|string`.
+- **Filtering**: Always handled server-side via `fetcher`, with cached responses per query.
+- **Theming**: Uses DS token classes across trigger, list, and states.