laif-ds 0.2.66 → 0.2.68

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

@@ -26,13 +26,13 @@ export interface AppFormItem {
     | "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")
+  inputType?: ComponentProps<"input">["type"]; // HTML input type for "input" component (e.g. "text", "email", "password", "number", "url", "search", "tel")
   defaultValue?: string | boolean | number | string[] | Date | number[]; // Initial value
   options?: AppSelectOption[]; // Options for select/multiselect/radio
   disabled?: boolean; // Disables the field
   placeholder?: string; // Placeholder text
   caption?: string; // Helper text below the field
-  calendarRange?: [Date, Date]; // Date range for datepicker
+  calendarRange?: [Date, Date]; // Date range for datepicker (enables range mode)
   min?: number; // Minimum value for slider
   max?: number; // Maximum value for slider
   step?: number; // Step value for slider
@@ -41,10 +41,11 @@ export interface AppFormItem {
   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;
+  notFound?: React.ReactNode; // Custom not found message for async select
+  noResultsMessage?: string; // No results message for async select
+  debounce?: number; // Debounce time for async select search
+  clearable?: boolean; // Allow clearing async select value
+  datePickerProps?: Partial<ComponentProps<typeof DatePicker>>; // Additional DatePicker props (locale, dateFormat, numberOfMonths, minDate, maxDate, etc.)
 }
 ```
 
@@ -199,7 +200,50 @@ Ricorda che il fetch parte solo quando il menu è aperto; eventuali valori inizi
 
 ### datepicker
 
-Date picker component with optional range selection via `calendarRange`
+Date picker component with optional range selection via `calendarRange`. Use `datePickerProps` to customize the DatePicker behavior such as locale, date format, number of months displayed, min/max dates, etc.
+
+**Available datePickerProps options:**
+
+- `locale`: Locale object from `date-fns/locale` (e.g., `enUS`, `it`, `fr`)
+- `dateFormat`: Date format string (e.g., `"MM/dd/yyyy"`, `"dd/MM/yyyy"`)
+- `numberOfMonths`: Number of months to display in the calendar
+- `minDate`: Minimum selectable date
+- `maxDate`: Maximum selectable date
+- `firstDate`: First available date (disables dates before)
+- `lastDate`: Last available date (disables dates after)
+- `availableDates`: Array of specific dates that are selectable
+- And other DatePicker props
+
+**Example with English locale:**
+
+```tsx
+import { enUS } from "date-fns/locale";
+
+const items: AppFormItem[] = [
+  {
+    label: "Appointment Date",
+    component: "datepicker",
+    name: "appointmentDate",
+    placeholder: "Pick a date",
+    datePickerProps: {
+      locale: enUS,
+      dateFormat: "MM/dd/yyyy",
+    },
+  },
+  {
+    label: "Event Date Range",
+    component: "datepicker",
+    name: "eventRange",
+    placeholder: "Select date range",
+    calendarRange: [new Date(), new Date()],
+    datePickerProps: {
+      locale: enUS,
+      dateFormat: "MM/dd/yyyy",
+      numberOfMonths: 2,
+    },
+  },
+];
+```
 
 ### radio
 
@@ -358,6 +402,84 @@ export function DateRangeForm() {
 }
 ```
 
+### External Form Control
+
+You can access the form instance to programmatically control values, watch changes, and reset the form:
+
+```tsx
+import { AppForm, Button } from "laif-ds";
+import { useForm } from "react-hook-form";
+import { useState, useEffect } from "react";
+
+export function ExternalControlForm() {
+  const [formValues, setFormValues] = useState({});
+  const [watchedValues, setWatchedValues] = useState({});
+
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      email: "",
+    },
+  });
+
+  const { watch, setValue, reset } = form;
+
+  // Watch specific fields
+  const nameValue = watch("name");
+  const emailValue = watch("email");
+
+  // Auto-fill handler
+  const handleAutoFill = () => {
+    setValue("name", "Mario Rossi");
+    setValue("email", "mario@example.com");
+  };
+
+  // Reset handler
+  const handleReset = () => {
+    reset();
+    setFormValues({});
+    setWatchedValues({});
+  };
+
+  // Watch all form values
+  useEffect(() => {
+    const subscription = watch((values) => {
+      setWatchedValues(values);
+    });
+    return () => subscription.unsubscribe();
+  }, [watch]);
+
+  return (
+    <div>
+      <div className="mb-4 flex gap-2">
+        <Button type="button" variant="outline" onClick={handleAutoFill}>
+          Auto-fill
+        </Button>
+        <Button type="button" variant="outline" onClick={handleReset}>
+          Reset
+        </Button>
+      </div>
+
+      <AppForm
+        form={form}
+        items={[
+          { label: "Name", component: "input", name: "name" },
+          { label: "Email", component: "input", name: "email" },
+        ]}
+        onSubmit={(data) => setFormValues(data)}
+        showSubmitButton
+      />
+
+      <div className="mt-4">
+        <p>Name: {nameValue || "(empty)"}</p>
+        <p>Email: {emailValue || "(empty)"}</p>
+        <pre>{JSON.stringify(watchedValues, null, 2)}</pre>
+      </div>
+    </div>
+  );
+}
+```
+
 ---
 
 ## Notes

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

@@ -2,45 +2,72 @@
 
 ## Overview
 
-Single-date picker composed of a trigger with calendar icon and a `Calendar` component in a popover. Supports min/max date constraints, allowed dates, custom display format, sizes, localization, and initial calendar month.
+Date picker component that supports both **single date** and **date range** selection. Composed of a trigger with calendar icon and a `Calendar` component in a popover. Supports min/max date constraints, allowed dates, custom display format, sizes, localization, and initial calendar month.
 
 ---
 
 ## Props
 
-| Prop                   | Type                                                                          | Default            | Description                                                  |
-| ---------------------- | ----------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------ |
-| `value`                | `Date`                                                                        | `undefined`        | Controlled selected date.                                    |
-| `onChange`             | `(date: Date \| undefined) => void`                                           | `undefined`        | Called when the date changes.                                |
-| `placeholder`          | `string`                                                                      | `"Seleziona data"` | Text when no date is selected.                               |
-| `dateFormat`           | `string`                                                                      | `"dd/MM/yyyy"`     | `date-fns` format string for the trigger text.               |
-| `className`            | `string`                                                                      | `""`               | Additional classes for the trigger.                          |
-| `wrpClassName`         | `string`                                                                      | `""`               | Additional classes for the wrapper container.                |
-| `label`                | `string \| React.ReactNode`                                                   | `undefined`        | Label displayed above the date picker.                       |
-| `buttonVariant`        | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"default"`        | Variant of the trigger button (deprecated, not used).        |
-| `disabled`             | `boolean`                                                                     | `false`            | Disables interactions and the popover.                       |
-| `size`                 | `"sm" \| "default" \| "lg"`                                                   | `"default"`        | Trigger size affecting height and icon size.                 |
-| `firstDate`            | `Date`                                                                        | `undefined`        | Minimum selectable date (legacy prop, use `minDate`).        |
-| `lastDate`             | `Date`                                                                        | `undefined`        | Maximum selectable date (legacy prop, use `maxDate`).        |
-| `minDate`              | `Date`                                                                        | `undefined`        | Minimum selectable date.                                     |
-| `maxDate`              | `Date`                                                                        | `undefined`        | Maximum selectable date.                                     |
-| `availableDates`       | `Date[]`                                                                      | `undefined`        | Only these dates are selectable.                             |
-| `locale`               | `Partial<Locale>`                                                             | `it` (Italian)     | Locale for date formatting (from date-fns).                  |
-| `initialCalendarMonth` | `Date`                                                                        | `undefined`        | Initial month to display in calendar (overridden by value).  |
-| `customCalendarProps`  | `React.ComponentProps<typeof Calendar>`                                       | `undefined`        | Custom props to pass to the Calendar component.              |
-| `id`                   | `string`                                                                      | `undefined`        | HTML id attribute for the trigger (useful for testing).      |
-| `data-testid`          | `string`                                                                      | `undefined`        | Test identifier attribute for E2E testing (e.g. Playwright). |
+### Common Props
+
+| Prop                   | Type                                    | Default            | Description                                                  |
+| ---------------------- | --------------------------------------- | ------------------ | ------------------------------------------------------------ |
+| `mode`                 | `"single" \| "range"`                   | `"single"`         | Selection mode: single date or date range.                   |
+| `placeholder`          | `string`                                | `"Seleziona data"` | Text when no date is selected.                               |
+| `dateFormat`           | `string`                                | `"dd/MM/yyyy"`     | `date-fns` format string for the trigger text.               |
+| `className`            | `string`                                | `""`               | Additional classes for the trigger.                          |
+| `wrpClassName`         | `string`                                | `""`               | Additional classes for the wrapper container.                |
+| `label`                | `string \| React.ReactNode`             | `undefined`        | Label displayed above the date picker.                       |
+| `disabled`             | `boolean`                               | `false`            | Disables interactions and the popover.                       |
+| `size`                 | `"sm" \| "default" \| "lg"`             | `"default"`        | Trigger size affecting height and icon size.                 |
+| `firstDate`            | `Date`                                  | `undefined`        | Minimum selectable date (legacy prop, use `minDate`).        |
+| `lastDate`             | `Date`                                  | `undefined`        | Maximum selectable date (legacy prop, use `maxDate`).        |
+| `minDate`              | `Date`                                  | `undefined`        | Minimum selectable date.                                     |
+| `maxDate`              | `Date`                                  | `undefined`        | Maximum selectable date.                                     |
+| `availableDates`       | `Date[]`                                | `undefined`        | Only these dates are selectable.                             |
+| `locale`               | `Partial<Locale>`                       | `it` (Italian)     | Locale for date formatting (from date-fns).                  |
+| `initialCalendarMonth` | `Date`                                  | `undefined`        | Initial month to display in calendar (overridden by value).  |
+| `numberOfMonths`       | `number`                                | `1`                | Number of months to display (useful for range mode).         |
+| `customCalendarProps`  | `React.ComponentProps<typeof Calendar>` | `undefined`        | Custom props to pass to the Calendar component.              |
+| `id`                   | `string`                                | `undefined`        | HTML id attribute for the trigger (useful for testing).      |
+| `data-testid`          | `string`                                | `undefined`        | Test identifier attribute for E2E testing (e.g. Playwright). |
+
+### Single Mode Props (mode="single" or undefined)
+
+| Prop       | Type                                | Default     | Description                   |
+| ---------- | ----------------------------------- | ----------- | ----------------------------- |
+| `value`    | `Date`                              | `undefined` | Controlled selected date.     |
+| `onChange` | `(date: Date \| undefined) => void` | `undefined` | Called when the date changes. |
+
+### Range Mode Props (mode="range")
+
+| Prop       | Type                                       | Default     | Description                         |
+| ---------- | ------------------------------------------ | ----------- | ----------------------------------- |
+| `value`    | `DateRange` (`{ from?: Date, to?: Date }`) | `undefined` | Controlled selected date range.     |
+| `onChange` | `(range: DateRange \| undefined) => void`  | `undefined` | Called when the date range changes. |
 
 ---
 
 ## Behavior
 
+### Single Mode
+
+- **Selection**: Click a date to select it. The selected date is highlighted.
+- **Display**: Shows the formatted date in the trigger (e.g., "13/01/2025").
+
+### Range Mode
+
+- **Selection**: Click to set the start date, click again to set the end date. The range is highlighted.
+- **Display**: Shows "from - to" format in the trigger (e.g., "13/01/2025 - 20/01/2025").
+- **Multiple months**: Use `numberOfMonths={2}` to show two months side by side for easier range selection.
+
+### Common Behavior
+
 - **Disabled dates**: `firstDate`, `lastDate`, `minDate`, `maxDate`, and `availableDates` are combined into the `Calendar`'s `disabled` matcher array.
 - **Disabled state**: When `disabled` is true, the popover will not open and the trigger is non-interactive with reduced opacity.
-- **Formatting**: `dateFormat` is applied via `date-fns/format` to the selected date in the trigger.
-- **Calendar month**: The calendar displays the month of the selected date, or `initialCalendarMonth` if no date is selected.
+- **Formatting**: `dateFormat` is applied via `date-fns/format` to the selected date(s) in the trigger.
+- **Calendar month**: The calendar displays the month of the selected date (or `from` date in range mode), or `initialCalendarMonth` if no date is selected.
 - **State synchronization**: The component syncs internal state with the `value` prop via useEffect.
-- **Custom calendar**: Use `customCalendarProps` to override default Calendar props (mode, selected, onSelect).
 - **Localization**: The `locale` prop affects both the calendar display and the formatted date in the trigger.
 
 ---
@@ -79,6 +106,80 @@ export function ControlledDatePicker() {
 }
 ```
 
+### Range Mode - Basic
+
+```tsx
+import { DatePicker } from "laif-ds";
+import { useState } from "react";
+import { DateRange } from "react-day-picker";
+
+export function RangeDatePicker() {
+  const [range, setRange] = useState<DateRange | undefined>();
+
+  return (
+    <DatePicker
+      mode="range"
+      value={range}
+      onChange={setRange}
+      placeholder="Seleziona intervallo"
+    />
+  );
+}
+```
+
+### Range Mode - With Two Months
+
+```tsx
+import { DatePicker } from "laif-ds";
+import { addDays } from "date-fns";
+import { useState } from "react";
+import { DateRange } from "react-day-picker";
+
+export function RangeWithTwoMonths() {
+  const [range, setRange] = useState<DateRange | undefined>({
+    from: new Date(),
+    to: addDays(new Date(), 7),
+  });
+
+  return (
+    <DatePicker
+      mode="range"
+      value={range}
+      onChange={setRange}
+      placeholder="Seleziona intervallo"
+      numberOfMonths={2}
+      label="Periodo di prenotazione"
+    />
+  );
+}
+```
+
+### Range Mode - With Constraints
+
+```tsx
+import { DatePicker } from "laif-ds";
+import { addDays } from "date-fns";
+import { useState } from "react";
+import { DateRange } from "react-day-picker";
+
+export function RangeWithConstraints() {
+  const today = new Date();
+  const [range, setRange] = useState<DateRange | undefined>();
+
+  return (
+    <DatePicker
+      mode="range"
+      value={range}
+      onChange={setRange}
+      placeholder="Seleziona (prossimi 30 giorni)"
+      firstDate={today}
+      lastDate={addDays(today, 30)}
+      numberOfMonths={2}
+    />
+  );
+}
+```
+
 ### Configurable
 
 ```tsx
@@ -245,3 +346,6 @@ export function DatePickerInDialog() {
 - **Button variant**: The `buttonVariant` prop is deprecated and not used in the current implementation.
 - **Accessibility**: The trigger has proper ARIA attributes and keyboard navigation support.
 - **State management**: Component maintains internal state but syncs with external `value` prop.
+- **Range mode**: Use `mode="range"` for date range selection. The `value` and `onChange` types change accordingly.
+- **Multiple months**: In range mode, use `numberOfMonths={2}` to display two months side by side for better UX.
+- **DateRange type**: Import `DateRange` from `react-day-picker` when using range mode: `{ from?: Date, to?: Date }`.

package/dist/components/ui/app-form.js

@@ -1,55 +1,55 @@
 "use client";
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { cn as s } from "../../lib/utils.js";
-import { Controller as w } from "../../node_modules/react-hook-form/dist/index.esm.js";
-import { AppSelect as v } from "./app-select.js";
-import { AsyncSelect as O } from "./async-select.js";
-import { Button as I } from "./button.js";
-import { Checkbox as A } from "./checkbox.js";
-import { DatePicker as F } from "./date-picker.js";
-import { Input as R } from "./input.js";
+import { cn as d } from "../../lib/utils.js";
+import { Controller as I } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { AppSelect as b } from "./app-select.js";
+import { AsyncSelect as A } from "./async-select.js";
+import { Button as F } from "./button.js";
+import { Checkbox as R } from "./checkbox.js";
+import { DatePicker as j } from "./date-picker.js";
+import { Input as M } from "./input.js";
 import { Label as t } from "./label.js";
-import { RadioGroup as j, RadioGroupItem as M } from "./radio-group.js";
-import { Slider as B } from "./slider.js";
-import { Switch as T } from "./switch.js";
-import { Textarea as $ } from "./textarea.js";
+import { RadioGroup as B, RadioGroupItem as D } from "./radio-group.js";
+import { Slider as T } from "./slider.js";
+import { Switch as $ } from "./switch.js";
+import { Textarea as G } from "./textarea.js";
 import { Typo as i } from "./typo.js";
-const Z = ({
-  items: u,
-  cols: b = "2",
-  form: m,
-  submitText: g = "Invia",
-  onSubmit: x,
-  isSubmitting: p = !1,
-  showSubmitButton: C = !1
+const ne = ({
+  items: h,
+  cols: m = "2",
+  form: g,
+  submitText: x = "Invia",
+  onSubmit: C,
+  isSubmitting: v = !1,
+  showSubmitButton: N = !1
 }) => {
   const {
-    control: N,
-    handleSubmit: y,
-    formState: { errors: f, isValid: S, isDirty: V }
-  } = m, k = (e) => {
-    const c = f[e.name]?.message, d = c ? String(c) : void 0;
+    control: y,
+    handleSubmit: f,
+    formState: { errors: S, isValid: V, isDirty: k }
+  } = g, w = (e) => {
+    const c = S[e.name]?.message, s = c ? String(c) : void 0;
     return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-      w,
+      I,
       {
         name: e.name,
-        control: N,
+        control: y,
         render: ({ field: r }) => {
           const o = /* @__PURE__ */ l("div", { className: "mb-2 flex items-center justify-between", children: [
             /* @__PURE__ */ a(t, { children: e.label }),
-            d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
+            s && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: s })
           ] });
           switch (e.component) {
             case "input":
               return /* @__PURE__ */ l("div", { children: [
                 o,
                 /* @__PURE__ */ a(
-                  R,
+                  M,
                   {
                     ...r,
                     type: e.inputType,
                     placeholder: e.placeholder,
-                    className: s(d && "border-d-destructive"),
+                    className: d(s && "border-d-destructive"),
                     disabled: e.disabled
                   }
                 )
@@ -65,7 +65,7 @@ const Z = ({
               return /* @__PURE__ */ l("div", { children: [
                 o,
                 /* @__PURE__ */ a(
-                  O,
+                  A,
                   {
                     multiple: n,
                     fetcher: e.fetcher,
@@ -89,11 +89,11 @@ const Z = ({
               return /* @__PURE__ */ l("div", { children: [
                 o,
                 /* @__PURE__ */ a(
-                  $,
+                  G,
                   {
                     ...r,
                     placeholder: e.placeholder,
-                    className: s(d && "border-d-destructive"),
+                    className: d(s && "border-d-destructive"),
                     disabled: e.disabled
                   }
                 )
@@ -102,23 +102,23 @@ const Z = ({
               return /* @__PURE__ */ l("div", { children: [
                 o,
                 /* @__PURE__ */ a(
-                  j,
+                  B,
                   {
                     value: r.value != null ? String(r.value) : "",
                     onValueChange: (n) => r.onChange(n),
                     className: "space-y-2",
                     disabled: e.disabled,
                     children: (e.options ?? []).map((n) => {
-                      const h = `${e.name}-${n.value}`;
+                      const p = `${e.name}-${n.value}`;
                       return /* @__PURE__ */ l(
                         "div",
                         {
                           className: "flex items-center gap-2",
                           children: [
                             /* @__PURE__ */ a(
-                              M,
+                              D,
                               {
-                                id: h,
+                                id: p,
                                 value: String(n.value),
                                 disabled: e.disabled
                               }
@@ -126,8 +126,8 @@ const Z = ({
                             /* @__PURE__ */ a(
                               t,
                               {
-                                htmlFor: h,
-                                className: s(
+                                htmlFor: p,
+                                className: d(
                                   "cursor-pointer",
                                   e.disabled && "cursor-not-allowed opacity-60"
                                 ),
@@ -146,7 +146,7 @@ const Z = ({
               return /* @__PURE__ */ l("div", { children: [
                 o,
                 /* @__PURE__ */ a(
-                  v,
+                  b,
                   {
                     ...r,
                     onValueChange: (n) => r.onChange(n),
@@ -160,7 +160,7 @@ const Z = ({
               return /* @__PURE__ */ l("div", { children: [
                 o,
                 /* @__PURE__ */ a(
-                  v,
+                  b,
                   {
                     ...r,
                     multiple: !0,
@@ -171,32 +171,38 @@ const Z = ({
                   }
                 )
               ] });
-            case "datepicker":
+            case "datepicker": {
+              const {
+                mode: n,
+                value: p,
+                onChange: L,
+                customCalendarProps: E,
+                ...O
+              } = e.datePickerProps || {}, P = {
+                value: r.value,
+                onChange: e.disabled || e.calendarRange ? void 0 : (u) => r.onChange(u),
+                placeholder: e.placeholder,
+                disabled: e.disabled,
+                customCalendarProps: e.disabled ? {
+                  disabled: !0,
+                  mode: "single"
+                } : e.calendarRange ? {
+                  mode: "range",
+                  selected: r.value,
+                  onSelect: (u) => r.onChange(u)
+                } : void 0,
+                ...O
+              };
               return /* @__PURE__ */ l("div", { className: "relative", children: [
                 o,
-                /* @__PURE__ */ a(
-                  F,
-                  {
-                    value: r.value,
-                    onChange: e.disabled || e.calendarRange ? void 0 : (n) => r.onChange(n),
-                    placeholder: e.placeholder,
-                    disabled: e.disabled,
-                    customCalendarProps: e.disabled ? {
-                      disabled: !0,
-                      mode: "single"
-                    } : e.calendarRange ? {
-                      mode: "range",
-                      selected: r.value,
-                      onSelect: (n) => r.onChange(n)
-                    } : void 0
-                  }
-                )
+                /* @__PURE__ */ a(j, { ...P })
               ] });
+            }
             case "checkbox":
               return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
                 /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ a(
-                    A,
+                    R,
                     {
                       ...r,
                       id: e.name,
@@ -209,14 +215,14 @@ const Z = ({
                     t,
                     {
                       htmlFor: e.name,
-                      className: s(
+                      className: d(
                         "cursor-pointer",
                         e.disabled && "cursor-not-allowed opacity-60"
                       ),
                       children: e.label
                     }
                   ),
-                  d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
+                  s && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: s })
                 ] }),
                 e.caption && /* @__PURE__ */ a(
                   i,
@@ -242,7 +248,7 @@ const Z = ({
                     )
                   ] }),
                   /* @__PURE__ */ a(
-                    T,
+                    $,
                     {
                       id: e.name,
                       checked: !!r.value,
@@ -251,13 +257,13 @@ const Z = ({
                     }
                   )
                 ] }),
-                d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
+                s && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: s })
               ] });
             case "slider":
               return /* @__PURE__ */ l("div", { children: [
                 o,
                 /* @__PURE__ */ a(
-                  B,
+                  T,
                   {
                     value: Array.isArray(r.value) ? r.value : [r.value || e.min || 0],
                     onValueChange: (n) => r.onChange(n[0]),
@@ -282,26 +288,26 @@ const Z = ({
       }
     ) });
   };
-  return /* @__PURE__ */ l("form", { onSubmit: y((e) => x?.(e)), children: [
-    /* @__PURE__ */ a("div", { className: s("grid gap-4", `grid-cols-${b}`), children: u.map((e, c) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ l("form", { onSubmit: f((e) => C?.(e)), children: [
+    /* @__PURE__ */ a("div", { className: d("grid gap-4", `grid-cols-${m}`), children: h.map((e, c) => /* @__PURE__ */ a(
       "div",
       {
-        className: s(c === u.length - 1 && "col-span-full"),
-        children: k(e)
+        className: d(c === h.length - 1 && "col-span-full"),
+        children: w(e)
       },
       e.name
     )) }),
-    C && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
-      I,
+    N && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
+      F,
       {
         type: "submit",
-        disabled: !S || !V || p,
-        isLoading: p,
-        children: g
+        disabled: !V || !k || v,
+        isLoading: v,
+        children: x
       }
     ) })
   ] });
 };
 export {
-  Z as AppForm
+  ne as AppForm
 };

package/dist/components/ui/date-picker.js

@@ -1,109 +1,135 @@
 "use client";
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { designTokens as o } from "../design-tokens.js";
-import { Calendar as B } from "./calendar.js";
-import { Icon as F } from "./icon.js";
-import { Label as G } from "./label.js";
-import { Popover as H, PopoverTrigger as J, PopoverContent as K } from "./popover.js";
-import { cn as C } from "../../lib/utils.js";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { designTokens as r } from "../design-tokens.js";
+import { Calendar as O } from "./calendar.js";
+import { Icon as J } from "./icon.js";
+import { Label as K } from "./label.js";
+import { Popover as Q, PopoverTrigger as U, PopoverContent as W } from "./popover.js";
+import { cn as k } from "../../lib/utils.js";
 import * as d from "react";
-import { useEffect as Q } from "react";
-import { it as U } from "../../node_modules/date-fns/locale/it.js";
-import { formatDate as a } from "../../node_modules/date-fns/format.js";
-import { isSameDay as V } from "../../node_modules/date-fns/isSameDay.js";
-function re({
-  value: e,
-  onChange: l,
-  placeholder: P = "Seleziona data",
-  dateFormat: f = "dd/MM/yyyy",
-  className: k,
-  disabled: r = !1,
-  size: i = "default",
-  firstDate: u,
-  lastDate: h,
-  availableDates: g,
-  locale: N = U,
-  initialCalendarMonth: p,
-  customCalendarProps: j,
-  label: x,
-  wrpClassName: M,
-  id: O,
-  "data-testid": R,
-  minDate: w,
-  maxDate: z
-}) {
-  const [c, y] = d.useState(e), [T, I] = d.useState(
-    p
-  ), [S, q] = d.useState(!1), E = (s) => {
-    y(s), s && I(s), l && l(s);
+import { useEffect as X } from "react";
+import { it as Y } from "../../node_modules/date-fns/locale/it.js";
+import { formatDate as v } from "../../node_modules/date-fns/format.js";
+import { isSameDay as Z } from "../../node_modules/date-fns/isSameDay.js";
+function de(e) {
+  const {
+    placeholder: F = "Seleziona data",
+    dateFormat: g = "dd/MM/yyyy",
+    className: R,
+    disabled: s = !1,
+    size: m = "default",
+    firstDate: p,
+    lastDate: b,
+    availableDates: C,
+    locale: l = Y,
+    initialCalendarMonth: c,
+    customCalendarProps: x,
+    label: D,
+    wrpClassName: T,
+    id: j,
+    "data-testid": V,
+    minDate: M,
+    maxDate: S,
+    numberOfMonths: q
+  } = e, a = e.mode === "range", [f, y] = d.useState(
+    a ? void 0 : e.value
+  ), [o, I] = d.useState(
+    a ? e.value : void 0
+  ), [z, u] = d.useState(
+    c
+  ), [N, E] = d.useState(!1), L = (t) => {
+    y(t), t && u(t), !a && e.onChange && e.onChange(t);
+  }, w = (t) => {
+    I(t), t?.from && u(t.from), a && e.onChange && e.onChange(t);
   };
-  let n = [];
-  u && n.push({ before: u }), h && n.push({ after: h }), g?.length && n.push(
-    (s) => !g.some(
-      (A) => V(A, s)
+  let i = [];
+  p && i.push({ before: p }), b && i.push({ after: b }), C?.length && i.push(
+    (t) => !C.some(
+      (H) => Z(H, t)
     )
-  ), r && (n = [!0]), Q(() => {
-    y(e), I(e ?? p);
-  }, [e, p]);
-  const L = d.useId(), b = O ?? L;
-  return /* @__PURE__ */ m("div", { className: C("flex flex-col gap-1.5", M), children: [
-    x && /* @__PURE__ */ t(G, { htmlFor: b, children: x }),
-    /* @__PURE__ */ m(H, { open: r ? !1 : S, onOpenChange: q, children: [
-      /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ m(
+  ), s && (i = [!0]), X(() => {
+    if (a) {
+      I(e.value);
+      const t = e.value?.from;
+      u(t ?? c);
+    } else
+      y(e.value), u(
+        e.value ?? c
+      );
+  }, [e.value, a, c]);
+  const A = d.useId(), P = j ?? A, B = a ? !!o?.from : !!f, G = () => a && o ? /* @__PURE__ */ h("span", { children: [
+    o.from && v(o.from, g, { locale: l }),
+    o.from && o.to && " - ",
+    o.to && v(o.to, g, { locale: l })
+  ] }) : !a && f ? /* @__PURE__ */ n("span", { children: v(f, g, { locale: l }) }) : /* @__PURE__ */ n("span", { className: "text-d-muted-foreground", children: F });
+  return /* @__PURE__ */ h("div", { className: k("flex flex-col gap-1.5", T), children: [
+    D && /* @__PURE__ */ n(K, { htmlFor: P, children: D }),
+    /* @__PURE__ */ h(Q, { open: s ? !1 : N, onOpenChange: E, children: [
+      /* @__PURE__ */ n(U, { asChild: !0, children: /* @__PURE__ */ h(
         "div",
         {
-          id: b,
-          "data-testid": R,
-          className: C(
-            o.input.base,
-            o.radius.default,
-            o.text.base,
-            o.interaction.disabled,
+          id: P,
+          "data-testid": V,
+          className: k(
+            r.input.base,
+            r.radius.default,
+            r.text.base,
+            r.interaction.disabled,
             "flex items-center gap-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
-            o.focusRing,
-            S && o.activeRing,
+            r.focusRing,
+            N && r.activeRing,
             "hover:border-d-ring cursor-pointer transition-colors",
-            !c && "text-d-muted-foreground",
-            r && "cursor-not-allowed opacity-50",
-            i === "default" && o.sizes.default,
-            i === "sm" && o.sizes.sm,
-            i === "lg" && o.sizes.lg,
-            k
+            !B && "text-d-muted-foreground",
+            s && "cursor-not-allowed opacity-50",
+            m === "default" && r.sizes.default,
+            m === "sm" && r.sizes.sm,
+            m === "lg" && r.sizes.lg,
+            R
           ),
-          "aria-disabled": r,
+          "aria-disabled": s,
           role: "button",
-          tabIndex: r ? -1 : 0,
-          onClick: r ? void 0 : () => {
+          tabIndex: s ? -1 : 0,
+          onClick: s ? void 0 : () => {
           },
           children: [
-            /* @__PURE__ */ t(F, { name: "Calendar", size: i === "lg" ? "sm" : "xs" }),
-            /* @__PURE__ */ t("div", { children: e && typeof e == "object" && "from" in e ? /* @__PURE__ */ m("span", { children: [
-              e.from && a(e.from, f),
-              e.from && e.to && " - ",
-              e.to && a(e.to, f)
-            ] }) : c ? /* @__PURE__ */ t("span", { children: a(c, f) }) : /* @__PURE__ */ t("span", { className: "text-d-muted-foreground", children: P }) })
+            /* @__PURE__ */ n(J, { name: "Calendar", size: m === "lg" ? "sm" : "xs" }),
+            /* @__PURE__ */ n("div", { children: G() })
           ]
         }
       ) }),
-      /* @__PURE__ */ t(K, { className: "w-auto p-0 shadow", children: /* @__PURE__ */ t(
-        B,
+      /* @__PURE__ */ n(W, { className: "w-auto p-0 shadow", children: a ? /* @__PURE__ */ n(
+        O,
         {
-          ...j || {
-            mode: "single",
-            selected: c,
-            onSelect: E
-          },
+          ...x || {},
+          mode: "range",
+          selected: o,
+          onSelect: w,
+          autoFocus: !0,
+          disabled: i,
+          locale: l,
+          defaultMonth: z,
+          numberOfMonths: q ?? 1,
+          minDate: M,
+          maxDate: S
+        }
+      ) : /* @__PURE__ */ n(
+        O,
+        {
+          ...x || {},
+          mode: "single",
+          selected: f,
+          onSelect: L,
           autoFocus: !0,
-          disabled: n,
-          locale: N,
-          defaultMonth: T,
-          minDate: w,
-          maxDate: z
+          disabled: i,
+          locale: l,
+          defaultMonth: z,
+          minDate: M,
+          maxDate: S
         }
       ) })
     ] })
   ] });
 }
 export {
-  re as DatePicker
+  de as DatePicker
 };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { Command as Command_2 } from 'cmdk';
 import { ComponentProps } from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { ControllerProps } from 'react-hook-form';
+import { DateRange } from 'react-day-picker';
 import { DayPicker } from 'react-day-picker';
 import { default as default_2 } from 'react';
 import { default as default_3 } from 'embla-carousel-react';
@@ -244,6 +245,7 @@ export declare interface AppFormItem {
     noResultsMessage?: string;
     debounce?: number;
     clearable?: boolean;
+    datePickerProps?: Partial<ComponentProps<typeof DatePicker>>;
 }
 
 declare interface AppFormProps {
@@ -1548,11 +1550,9 @@ export declare interface DataTableState<TData = Record<string, unknown>> {
     columnVisibility?: Partial<Record<keyof TData, boolean>>;
 }
 
-export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, label, wrpClassName, id, "data-testid": dataTestId, minDate, maxDate, }: DatePickerProps): JSX.Element;
+export declare function DatePicker(props: DatePickerProps): JSX.Element;
 
-export declare interface DatePickerProps {
-    value?: Date;
-    onChange?: (date: Date | undefined) => void;
+declare interface DatePickerBaseProps {
     placeholder?: string;
     dateFormat?: string;
     className?: string;
@@ -1571,6 +1571,21 @@ export declare interface DatePickerProps {
     "data-testid"?: string;
     minDate?: Date;
     maxDate?: Date;
+    numberOfMonths?: number;
+}
+
+export declare type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+
+declare interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: "range";
+    value?: DateRange;
+    onChange?: (range: DateRange | undefined) => void;
+}
+
+declare interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode?: "single";
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
 }
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "laif-ds",
   "private": false,
-  "version": "0.2.66",
+  "version": "0.2.68",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",