laif-ds/dist/agent-docs/components/DatePicker.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # DatePicker
 
 ## Overview
 
 Single-date picker composed of a `Button`-like trigger and a `Calendar` in a popover. Supports min/max date constraints, allowed dates, custom display format, sizes, and button variants.
 
 ---
 
 ## 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`                                                              | `"PPP"`      | `date-fns` format string for the trigger text.     |
 | `className`     | `string`                                                              | `""`         | Additional classes for the trigger.                 |
 | `buttonVariant` | `"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"` | `"default"` | Variant of the trigger button.             |
 | `disabled`      | `boolean`                                                             | `false`       | Disables interactions and the popover.             |
 | `size`          | `"sm" | "default" | "lg"`                                            | `"default"` | Trigger size.                                      |
 | `firstDate`     | `Date`                                                                | `undefined`   | Minimum selectable date.                           |
 | `lastDate`      | `Date`                                                                | `undefined`   | Maximum selectable date.                           |
 | `availableDates`| `Date[]`                                                              | `undefined`   | Only these dates are selectable.                   |
 
 ---
 
 ## Behavior
 
 - **Disabled dates**: `firstDate`, `lastDate`, and `availableDates` are combined into the `Calendar`’s `disabled` matcher array.
 - **Disabled**: When `disabled` is true, the popover will not open and the trigger is non-interactive.
 - **Formatting**: `dateFormat` is applied via `date-fns/format` to the selected date.
 
 ---
 
 ## Examples
 
 ### Basic
 
 ```tsx
 import { DatePicker } from "laif-ds";
 
 export function BasicDatePicker() {
   return <DatePicker />;
 }
 ```
 
 ### Configurable
 
 ```tsx
 import { DatePicker } from "laif-ds";
 
 export function ConfigurableDatePicker() {
   return (
     <DatePicker
       value={new Date()}
       placeholder="Seleziona una data"
       dateFormat="PPP"
       className="w-[300px]"
       buttonVariant="outline"
     />
   );
 }
 ```
 
 ### With Min/Max Dates
 
 ```tsx
 import { DatePicker } from "laif-ds";
 
 export function WithMinMaxDates() {
   return (
     <DatePicker
       placeholder="Seleziona una data tra le date minima e massima"
       firstDate={new Date("2025-09-20")}
       lastDate={new Date("2025-09-28")}
       buttonVariant="outline"
     />
   );
 }
 ```
 
 ### With Available Dates
 
 ```tsx
 import { DatePicker } from "laif-ds";
 
 export function WithAvailableDates() {
   return (
     <DatePicker
       placeholder="Scegli una delle date disponibili"
       availableDates={[
         new Date("2025-09-22"),
         new Date("2025-09-25"),
         new Date("2025-09-27"),
       ]}
       buttonVariant="outline"
     />
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Sizing**: Use `size` to control the trigger typography and height.
 - **Popover width**: The popover content uses the `Calendar` with no extra padding by default.
 - **Internationalization**: The displayed date depends on the `dateFormat` string.