laif-ds 0.2.69 → 0.2.71

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

@@ -212,6 +212,8 @@ Date picker component with optional range selection via `calendarRange`. Use `da
 - `firstDate`: First available date (disables dates before)
 - `lastDate`: Last available date (disables dates after)
 - `availableDates`: Array of specific dates that are selectable
+- `showTime`: Show time picker columns (HH, MM)
+- `withSeconds`: Show seconds column in the time picker (requires `showTime`)
 - And other DatePicker props
 
 **Example with English locale:**
@@ -227,7 +229,8 @@ const items: AppFormItem[] = [
     placeholder: "Pick a date",
     datePickerProps: {
       locale: enUS,
-      dateFormat: "MM/dd/yyyy",
+      dateFormat: "MM/dd/yyyy HH:mm",
+      showTime: true,
     },
   },
   {

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

@@ -0,0 +1,304 @@
+# AppTimePicker
+
+## Overview
+
+Standalone time picker component for selecting hours, minutes, and optionally seconds. Displays a trigger with a clock icon and opens a popover with scrollable columns for each time unit. Supports controlled/uncontrolled usage, UTC mode, clearable selection, min/max time constraints, multiple sizes, and visual variants.
+
+---
+
+## Props
+
+| Prop             | Type                                                                          | Default              | Description                                                              |
+| ---------------- | ----------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------ |
+| `value`          | `Date`                                                                        | `undefined`          | Controlled selected time as a Date object.                               |
+| `onChange`       | `(date: Date \| undefined) => void`                                           | `undefined`          | Callback fired when the selected time changes.                           |
+| `onClear`        | `() => void`                                                                  | `undefined`          | Callback fired when the value is cleared.                                |
+| `label`          | `string \| React.ReactNode`                                                   | `undefined`          | Label displayed above the trigger.                                       |
+| `placeholder`    | `string`                                                                      | `"Seleziona orario"` | Placeholder text shown when no time is selected.                         |
+| `disabled`       | `boolean`                                                                     | `false`              | Disables the time picker.                                                |
+| `clearable`      | `boolean`                                                                     | `false`              | Show a clear (X) button in the trigger to reset the selection.           |
+| `className`      | `string`                                                                      | `""`                 | Additional CSS classes applied to the trigger element.                   |
+| `labelClassName` | `string`                                                                      | `""`                 | CSS classes for the label element.                                       |
+| `wrpClassName`   | `string`                                                                      | `""`                 | CSS classes for the outer wrapper `<div>`.                               |
+| `size`           | `"sm" \| "default" \| "lg"`                                                   | `"default"`          | Size variant of the trigger.                                             |
+| `variant`        | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"default"`          | Visual variant of the trigger.                                           |
+| `useUtc`         | `boolean`                                                                     | `false`              | Use UTC time instead of local time. Shows a "UTC" badge.                 |
+| `withSeconds`    | `boolean`                                                                     | `false`              | Show a seconds column in the time picker.                                |
+| `minTime`        | `Date`                                                                        | `undefined`          | Minimum selectable time. Hours/minutes/seconds before this are disabled. |
+| `maxTime`        | `Date`                                                                        | `undefined`          | Maximum selectable time. Hours/minutes/seconds after this are disabled.  |
+| `id`             | `string`                                                                      | `undefined`          | HTML `id` for the trigger element.                                       |
+| `data-testid`    | `string`                                                                      | `undefined`          | `data-testid` attribute for E2E testing (e.g. Playwright).               |
+
+---
+
+## Behavior
+
+### Time Selection
+
+- **Columns**: The popover displays scrollable columns for hours (00–23) and minutes (00–59). An optional seconds column (00–59) is shown when `withSeconds` is `true`.
+- **Scroll-to-selected**: When the popover opens, the selected value is automatically scrolled into view.
+- **Display format**: The trigger shows time in `HH:MM` format (or `HH:MM:SS` with `withSeconds`).
+
+### Controlled vs Uncontrolled
+
+- **Controlled**: Pass `value` and `onChange` to manage state externally. The component detects controlled mode by checking if the `value` prop is provided (even if `undefined`).
+- **Uncontrolled**: Omit the `value` prop entirely. The component manages its own internal state.
+
+### Clearable
+
+- **Trigger clear button**: When `clearable` is `true` and a value is selected, an X button appears in the trigger.
+- **Popover clear button**: A "Clear" button always appears at the bottom of the popover when a value is selected.
+- **Callbacks**: Both `onChange(undefined)` and `onClear()` are called when clearing.
+
+### Min/Max Time Constraints
+
+- **Disabled options**: When `minTime` or `maxTime` is set, out-of-range hours are visually disabled and not selectable.
+- **Cascading constraints**: Minutes are constrained only when the selected hour matches the boundary hour. Seconds are constrained only when both hour and minute match.
+- **UTC-aware**: Constraints respect the `useUtc` setting.
+
+### UTC Mode
+
+- When `useUtc` is `true`, all time reading/writing uses UTC methods (`getUTCHours`, `setUTCHours`, etc.).
+- A small "UTC" badge is displayed in the trigger.
+
+---
+
+## Exported Types
+
+```ts
+type AppTimePickerSize = "sm" | "default" | "lg";
+
+type AppTimePickerVariant =
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "link";
+
+interface AppTimePickerProps {
+  /* see Props table above */
+}
+```
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+import { useState } from "react";
+
+export function BasicTimePicker() {
+  const [time, setTime] = useState<Date | undefined>();
+
+  return (
+    <AppTimePicker
+      value={time}
+      onChange={setTime}
+      label="Select Time"
+      placeholder="Pick a time"
+    />
+  );
+}
+```
+
+### With Seconds
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+import { useState } from "react";
+
+export function TimePickerWithSeconds() {
+  const [time, setTime] = useState<Date | undefined>();
+
+  return (
+    <AppTimePicker
+      value={time}
+      onChange={setTime}
+      withSeconds
+      label="Time with Seconds"
+    />
+  );
+}
+```
+
+### Clearable
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+import { useState } from "react";
+
+export function ClearableTimePicker() {
+  const [time, setTime] = useState<Date | undefined>(new Date());
+
+  return (
+    <AppTimePicker
+      value={time}
+      onChange={setTime}
+      clearable
+      label="Clearable Picker"
+    />
+  );
+}
+```
+
+### UTC Mode
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+import { useState } from "react";
+
+export function UtcTimePicker() {
+  const [time, setTime] = useState<Date | undefined>(new Date());
+
+  return (
+    <AppTimePicker
+      value={time}
+      onChange={setTime}
+      useUtc
+      label="UTC Time Picker"
+    />
+  );
+}
+```
+
+### Min/Max Time Constraints
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+import { useState } from "react";
+
+export function BusinessHoursTimePicker() {
+  const [time, setTime] = useState<Date | undefined>();
+
+  const minTime = new Date();
+  minTime.setHours(9, 0, 0, 0);
+
+  const maxTime = new Date();
+  maxTime.setHours(17, 30, 0, 0);
+
+  return (
+    <AppTimePicker
+      value={time}
+      onChange={setTime}
+      minTime={minTime}
+      maxTime={maxTime}
+      label="Business Hours Only"
+    />
+  );
+}
+```
+
+### Sizes and Variants
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+
+export function TimePickerVariants() {
+  return (
+    <div className="flex flex-col gap-4">
+      <AppTimePicker size="sm" label="Small" />
+      <AppTimePicker size="default" label="Default" />
+      <AppTimePicker size="lg" label="Large" />
+      <AppTimePicker variant="outline" label="Outline Variant" />
+      <AppTimePicker variant="ghost" label="Ghost Variant" />
+    </div>
+  );
+}
+```
+
+### Disabled
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+
+export function DisabledTimePicker() {
+  return <AppTimePicker value={new Date()} disabled label="Disabled Picker" />;
+}
+```
+
+### In Dialog
+
+```tsx
+import { AppTimePicker } from "laif-ds";
+import { AppDialog } from "laif-ds";
+import { Button } from "laif-ds";
+import { useState } from "react";
+
+export function TimePickerInDialog() {
+  const [time, setTime] = useState<Date | undefined>();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AppDialog
+      open={open}
+      onOpenChange={setOpen}
+      title="Seleziona Orario"
+      description="Scegli l'orario per la tua prenotazione."
+      trigger={<Button>Apri Time Picker Dialog</Button>}
+      footer={
+        <>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Annulla
+          </Button>
+          <Button onClick={() => setOpen(false)}>Conferma</Button>
+        </>
+      }
+      asChild
+    >
+      <div className="space-y-4">
+        <AppTimePicker
+          value={time}
+          onChange={setTime}
+          label="Orario di inizio"
+          placeholder="Seleziona un'orario"
+          clearable
+        />
+        {time && (
+          <div className="bg-d-muted/50 flex items-center gap-2 rounded border p-3 text-sm">
+            <span className="text-d-muted-foreground">Orario selezionato:</span>
+            <span className="font-medium tabular-nums">
+              {time.toLocaleTimeString("it-IT", {
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+            </span>
+          </div>
+        )}
+      </div>
+    </AppDialog>
+  );
+}
+```
+
+---
+
+## Helper Component: TimePickerColumn
+
+The `TimePickerColumn` component is exported and can be used independently (e.g., inside the `DatePicker` component for datetime selection).
+
+### TimePickerColumn Props
+
+| Prop             | Type                             | Default     | Description                                             |
+| ---------------- | -------------------------------- | ----------- | ------------------------------------------------------- |
+| `options`        | `number[]`                       | —           | Array of numeric options to display.                    |
+| `value`          | `number \| undefined`            | `undefined` | Currently selected value.                               |
+| `onChange`       | `(value: number) => void`        | —           | Callback fired when an option is selected.              |
+| `type`           | `"hour" \| "minute" \| "second"` | —           | Column type — determines the header label (HH, MM, SS). |
+| `className`      | `string`                         | `""`        | Additional CSS classes for the column wrapper.          |
+| `disabledValues` | `Set<number>`                    | `undefined` | Set of values that should be disabled (not selectable). |
+
+---
+
+## Notes
+
+- **Sizing**: Use `size` to control the trigger height (sm: h-8, default: h-9, lg: h-10).
+- **Variants**: Use `variant` to change the trigger's visual style (background, border, text color).
+- **UTC badge**: When `useUtc` is `true`, a small "UTC" label appears in the trigger for clarity.
+- **Controlled detection**: The component uses `props.hasOwnProperty("value")` to detect controlled mode, so passing `value={undefined}` keeps it controlled.
+- **Performance**: Option arrays (0–23 for hours, 0–59 for minutes/seconds) are memoized to avoid re-creation on every render.
+- **Accessibility**: The trigger has proper ARIA attributes. Disabled options in the columns are not focusable.
+- **Integration with DatePicker**: The `TimePickerColumn` sub-component is reused by `DatePicker` when `showTime` is enabled.

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

@@ -2,7 +2,7 @@
 
 ## Overview
 
-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.
+Date picker component that supports both **single date** and **date range** selection, with optional **time picker** columns. 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, clearable selection, and initial calendar month.
 
 ---
 
@@ -10,34 +10,45 @@ Date picker component that supports both **single date** and **date range** sele
 
 ### 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). |
+| 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. Auto-adjusts with `showTime`. |
+| `className`            | `string`                                | `""`               | Additional classes for the trigger element.                                  |
+| `wrpClassName`         | `string`                                | `""`               | Additional classes for the outer wrapper `<div>`.                            |
+| `labelClassName`       | `string`                                | `""`               | Additional classes for the label element.                                    |
+| `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.                                 |
+| `clearable`            | `boolean`                               | `false`            | Show a clear (X) button to reset the selection.                              |
+| `onClear`              | `() => void`                            | `undefined`        | Callback fired when the value is cleared via the clear button.               |
+| `minDate`              | `Date`                                  | `undefined`        | Minimum selectable date. Dates before this are disabled.                     |
+| `maxDate`              | `Date`                                  | `undefined`        | Maximum selectable date. Dates after this are disabled.                      |
+| `availableDates`       | `Date[]`                                | `undefined`        | Only these dates are selectable; all others are disabled.                    |
+| `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 side-by-side (useful for range mode).            |
+| `customCalendarProps`  | `React.ComponentProps<typeof Calendar>` | `undefined`        | Custom props forwarded to the underlying Calendar component.                 |
+| `id`                   | `string`                                | auto-generated     | HTML id attribute for the trigger element.                                   |
+| `data-testid`          | `string`                                | `undefined`        | Test identifier attribute for E2E testing (e.g. Playwright).                 |
+
+#### Deprecated Common Props
+
+| Prop            | Type     | Replacement | Description                                                |
+| --------------- | -------- | ----------- | ---------------------------------------------------------- |
+| `firstDate`     | `Date`   | `minDate`   | ⚠️ Deprecated. Use `minDate` instead.                      |
+| `lastDate`      | `Date`   | `maxDate`   | ⚠️ Deprecated. Use `maxDate` instead.                      |
+| `buttonVariant` | `string` | `className` | ⚠️ Deprecated. This prop is unused. Style via `className`. |
 
 ### 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. |
+| Prop          | Type                                | Default     | Description                                                   |
+| ------------- | ----------------------------------- | ----------- | ------------------------------------------------------------- |
+| `value`       | `Date`                              | `undefined` | Controlled selected date.                                     |
+| `onChange`    | `(date: Date \| undefined) => void` | `undefined` | Called when the date changes.                                 |
+| `showTime`    | `boolean`                           | `false`     | Show time picker columns (HH, MM) alongside the calendar.     |
+| `withSeconds` | `boolean`                           | `false`     | Show seconds column in the time picker (requires `showTime`). |
 
 ### Range Mode Props (mode="range")
 
@@ -61,9 +72,23 @@ Date picker component that supports both **single date** and **date range** sele
 - **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.
 
+### Time Picker (Single Mode Only)
+
+- **Activation**: Set `showTime` to display hour and minute columns next to the calendar.
+- **Seconds**: Set `withSeconds` alongside `showTime` to add a seconds column.
+- **Auto-close**: When `showTime` is enabled, the popover stays open after selecting a date so the user can adjust the time. Without `showTime`, the popover closes on date selection.
+- **Format auto-detection**: If no `dateFormat` is provided, the component automatically uses `"dd/MM/yyyy HH:mm"` (or `"dd/MM/yyyy HH:mm:ss"` with `withSeconds`).
+- **Time preservation**: When changing the date, the previously selected time is preserved.
+
+### Clearable
+
+- **Clear button**: When `clearable` is `true` and a value is selected, an X button appears in the trigger.
+- **Callback**: The `onClear` callback fires when the clear button is clicked.
+- **Works in both modes**: Clearing resets the value to `undefined` in both single and range modes.
+
 ### Common Behavior
 
-- **Disabled dates**: `firstDate`, `lastDate`, `minDate`, `maxDate`, and `availableDates` are combined into the `Calendar`'s `disabled` matcher array.
+- **Disabled dates**: `minDate`, `maxDate`, and `availableDates` are combined into the `Calendar`'s `disabled` matcher array. Legacy `firstDate`/`lastDate` are also supported.
 - **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(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.
@@ -180,19 +205,65 @@ export function RangeWithConstraints() {
 }
 ```
 
-### Configurable
+### Clearable
 
 ```tsx
 import { DatePicker } from "laif-ds";
+import { useState } from "react";
+
+export function ClearableDatePicker() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
 
-export function ConfigurableDatePicker() {
   return (
     <DatePicker
-      value={new Date()}
-      placeholder="Seleziona una data"
-      dateFormat="PPP"
-      className="w-[300px]"
-      buttonVariant="outline"
+      value={date}
+      onChange={setDate}
+      placeholder="Seleziona data"
+      clearable
+      onClear={() => console.log("cleared!")}
+      label="Data cancellabile"
+    />
+  );
+}
+```
+
+### With Time Picker
+
+```tsx
+import { DatePicker } from "laif-ds";
+import { useState } from "react";
+
+export function DateTimePicker() {
+  const [date, setDate] = useState<Date | undefined>();
+
+  return (
+    <DatePicker
+      value={date}
+      onChange={setDate}
+      showTime
+      label="Data e ora"
+      placeholder="Seleziona data e ora"
+    />
+  );
+}
+```
+
+### With Time Picker and Seconds
+
+```tsx
+import { DatePicker } from "laif-ds";
+import { useState } from "react";
+
+export function DateTimeWithSeconds() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  return (
+    <DatePicker
+      value={date}
+      onChange={setDate}
+      showTime
+      withSeconds
+      label="Data e ora con secondi"
     />
   );
 }
@@ -202,14 +273,18 @@ export function ConfigurableDatePicker() {
 
 ```tsx
 import { DatePicker } from "laif-ds";
+import { useState } from "react";
 
 export function WithMinMaxDates() {
+  const [date, setDate] = useState<Date | undefined>();
+
   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"
+      value={date}
+      onChange={setDate}
+      placeholder="Seleziona una data nel range"
+      minDate={new Date("2025-09-20")}
+      maxDate={new Date("2025-09-28")}
     />
   );
 }
@@ -219,17 +294,21 @@ export function WithMinMaxDates() {
 
 ```tsx
 import { DatePicker } from "laif-ds";
+import { useState } from "react";
 
 export function WithAvailableDates() {
+  const [date, setDate] = useState<Date | undefined>();
+
   return (
     <DatePicker
+      value={date}
+      onChange={setDate}
       placeholder="Scegli una delle date disponibili"
       availableDates={[
         new Date("2025-09-22"),
         new Date("2025-09-25"),
         new Date("2025-09-27"),
       ]}
-      buttonVariant="outline"
     />
   );
 }
@@ -335,17 +414,73 @@ export function DatePickerInDialog() {
 }
 ```
 
+### In Drawer
+
+```tsx
+import { DatePicker } from "laif-ds";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "laif-ds";
+import { Button } from "laif-ds";
+import { useState } from "react";
+
+export function DatePickerInDrawer() {
+  const [date, setDate] = useState<Date | undefined>(new Date("2023-08-12"));
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Apri Drawer con DatePicker</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Seleziona una data</DrawerTitle>
+          <DrawerDescription>
+            Scegli una data dal calendario qui sotto.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="px-4 py-4">
+          <DatePicker
+            placeholder="Seleziona una data"
+            value={date}
+            onChange={setDate}
+          />
+        </div>
+        {date && (
+          <div className="text-d-secondary-foreground px-4 text-sm">
+            Data selezionata: {date.toLocaleDateString("it-IT")}
+          </div>
+        )}
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Chiudi</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+```
+
 ---
 
 ## Notes
 
 - **Sizing**: Use `size` to control the trigger height and icon size (sm: h-8, default: h-9, lg: h-10).
-- **Popover width**: The popover content automatically sizes to fit the Calendar component.
+- **Popover width**: The popover content automatically sizes to fit the Calendar (and time columns when `showTime` is enabled).
 - **Internationalization**: Use `locale` prop for calendar localization and `dateFormat` for display formatting.
-- **Legacy props**: `firstDate` and `lastDate` are legacy props; prefer `minDate` and `maxDate`.
-- **Button variant**: The `buttonVariant` prop is deprecated and not used in the current implementation.
+- **Deprecated props**: `firstDate`/`lastDate` → use `minDate`/`maxDate`. `buttonVariant` → use `className`.
 - **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.
+- **Range mode**: Use `mode="range"` for date range selection. The `value` and `onChange` types change accordingly. `showTime` is not available in range mode.
 - **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 }`.
+- **Clearable**: Use `clearable` to allow users to reset the selection. Works in both single and range modes.
+- **Label styling**: Use `labelClassName` to apply custom styles to the label element.

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

@@ -30,7 +30,8 @@ This document provides a complete mapping of all components available in the lai
 - **AsyncSelect** - Select component with asynchronous data loading capabilities
 - **AppSelect** - Enhanced select dropdown with search and multi-select capabilities
 - **Checkbox** - Binary selection input for forms
-- **DatePicker** - Calendar-based date selection input
+- **AppTimePicker** - Standalone time picker with hours, minutes, seconds columns, min/max constraints, UTC mode, and clearable selection
+- **DatePicker** - Calendar-based date and datetime selection input with single/range modes, time picker, and clearable support
 - **Form** - Form wrapper component with validation support
 - **Input** - Text input field with multiple variants and features
 - **InputOtp** - One-time password input component