laif-ds 0.2.72 → 0.2.73

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

@@ -214,6 +214,8 @@ Date picker component with optional range selection via `calendarRange`. Use `da
 - `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`)
+- `minuteStep`: Minute step interval for the time picker
+- `secondStep`: Second step interval for the time picker
 - And other DatePicker props
 
 **Example with English locale:**

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

@@ -24,6 +24,8 @@ Standalone time picker component for selecting hours, minutes, and optionally se
 | `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.                                |
+| `minuteStep`     | `number`                                                                      | `1`                  | Step interval for minute options (`1`-`59`).                             |
+| `secondStep`     | `number`                                                                      | `1`                  | Step interval for second options (`1`-`59`).                             |
 | `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.                                       |
@@ -35,7 +37,7 @@ Standalone time picker component for selecting hours, minutes, and optionally se
 
 ### 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`.
+- **Columns**: The popover displays scrollable columns for hours (00–23) and minutes. Minute values follow `minuteStep` and an optional seconds column follows `secondStep` 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`).
 

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

@@ -49,6 +49,8 @@ Date picker component that supports both **single date** and **date range** sele
 | `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`). |
+| `minuteStep`  | `number`                            | `1`         | Step interval for minute options (`1`-`59`, requires `showTime`). |
+| `secondStep`  | `number`                            | `1`         | Step interval for second options (`1`-`59`, useful with `withSeconds`). |
 
 ### Range Mode Props (mode="range")
 
@@ -76,6 +78,7 @@ Date picker component that supports both **single date** and **date range** sele
 
 - **Activation**: Set `showTime` to display hour and minute columns next to the calendar.
 - **Seconds**: Set `withSeconds` alongside `showTime` to add a seconds column.
+- **Steps**: Use `minuteStep` and `secondStep` to control minute/second increments in their respective columns.
 - **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.
@@ -241,6 +244,7 @@ export function DateTimePicker() {
       value={date}
       onChange={setDate}
       showTime
+      minuteStep={5}
       label="Data e ora"
       placeholder="Seleziona data e ora"
     />
@@ -263,6 +267,8 @@ export function DateTimeWithSeconds() {
       onChange={setDate}
       showTime
       withSeconds
+      minuteStep={5}
+      secondStep={10}
       label="Data e ora con secondi"
     />
   );

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

@@ -1,99 +1,142 @@
- # FilePreview
- 
- ## Overview
- 
- Compact file chip with name, format/size info, optional remove button, and optional action menu (preview/download/remove). Automatically adapts its preview based on file type (image, text, generic).
- 
- ---
- 
- ## Props
- 
- | Prop             | Type                                                                 | Default       | Description                                                |
- | ---------------- | -------------------------------------------------------------------- | ------------- | ---------------------------------------------------------- |
- | `file`           | `File \| { name: string; url: string; type?: string }`               | **required**  | File object or remote descriptor with `url`.               |
- | `onRemove`       | `(url: string) => void`                                              | `undefined`   | Called when user removes the file.                         |
- | `onPreview`      | `(url: string) => void`                                              | `undefined`   | Called when user clicks Preview from the action menu.      |
- | `onDownload`     | `(url: string) => void`                                              | `undefined`   | Called when user clicks Download from the action menu.     |
- | `showActionMenu` | `boolean`                                                            | `false`       | Show overflow menu (Preview/Download/Delete if provided).  |
- | `className`      | `string`                                                             | `""`         | Additional classes for the wrapper.                         |
- 
- ---
- 
- ## Behavior
- 
- - **Automatic preview**: 
-   - Images: thumbnail preview.
-   - Text: small snippet (first 100 chars).
-   - Generic: file-type icon and labels.
- - **Format & size**: Displays file size (if available) and format label (e.g., PDF, JPG).
- - **Actions**: 
-   - Inline remove button if `onRemove` is provided and `showActionMenu` is false.
-   - Popover action menu when `showActionMenu` is true, using `onPreview`, `onDownload`, `onRemove`.
- 
- ---
- 
- ## Examples
- 
- ### Image
- 
- ```tsx
- import { FilePreview } from "laif-ds";
- 
- export function ImagePreview() {
-   return (
-     <FilePreview
-       file={{ name: "photo.jpg", url: "https://picsum.photos/id/237/200/200", type: "image/jpeg" }}
-       onPreview={(url) => console.log("preview", url)}
-       onDownload={(url) => console.log("download", url)}
-     />
-   );
- }
- ```
- 
- ### With Remove Button
- 
- ```tsx
- import { FilePreview } from "laif-ds";
- 
- export function RemovablePreview() {
-   return (
-     <FilePreview
-       file={{
-         name: "document.docx",
-         url: "https://example.com/document.docx",
-         type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-       }}
-       onRemove={(url) => console.log("remove", url)}
-       onPreview={(url) => console.log("preview", url)}
-       onDownload={(url) => console.log("download", url)}
-     />
-   );
- }
- ```
- 
- ### With Action Menu
- 
- ```tsx
- import { FilePreview } from "laif-ds";
- 
- export function WithMenu() {
-   return (
-     <FilePreview
-       file={{ name: "presentation.ppt", url: "https://example.com/presentation.ppt", type: "application/vnd.ms-powerpoint" }}
-       showActionMenu
-       onPreview={(url) => console.log("preview", url)}
-       onDownload={(url) => console.log("download", url)}
-       onRemove={(url) => console.log("remove", url)}
-     />
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Thumbnails**: Image previews use object-fit to contain within the chip.
- - **Security**: For local `File` previews, temporary object URLs are created; cleanup is handled by the browser GC.
- - **Internationalization**: Text labels in the action menu can be adjusted at call sites when needed.
- 
+# FilePreview
+
+## Overview
+
+Compact file chip with name, format/size info, optional remove button, and optional action menu (preview/download/remove). Automatically adapts its preview based on file type (image, text, generic).
+
+---
+
+## Props
+
+| Prop             | Type                                                                                 | Default      | Description                                                                                                     |
+| ---------------- | ------------------------------------------------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------- |
+| `file`           | `File \| { name: string; url: string; type?: string }`                               | **required** | File object or remote descriptor with `url`.                                                                    |
+| `clickable`      | `boolean`                                                                            | `true`       | Whether the chip container is interactive (click/keyboard).                                                     |
+| `onClick`        | `(event: React.MouseEvent \| React.KeyboardEvent) => void \| Promise<void> \| false` | `undefined`  | Optional container click handler. Takes precedence over `onPreview`. Not allowed when `showActionMenu` is true. |
+| `onRemove`       | `(url: string) => void \| Promise<void>`                                             | `undefined`  | Called when user removes the file.                                                                              |
+| `onPreview`      | `(url: string) => void \| Promise<void>`                                             | `undefined`  | Called when user clicks Preview from the action menu.                                                           |
+| `onDownload`     | `(url: string) => void \| Promise<void>`                                             | `undefined`  | Called when user clicks Download from the action menu.                                                          |
+| `showActionMenu` | `boolean`                                                                            | `false`      | Show overflow menu (Preview/Download/Delete if provided).                                                       |
+| `showThumbnail`  | `boolean`                                                                            | `true`       | Controls whether a thumbnail/text preview is rendered when available.                                           |
+| `variant`        | `"default" \| "outline" \| "ghost"`                                                  | `"default"`  | Visual style of the chip container.                                                                             |
+| `size`           | `"default" \| "sm"`                                                                  | `"default"`  | Visual size of the chip container and its internal elements.                                                    |
+| `className`      | `string`                                                                             | `""`         | Additional classes for the wrapper.                                                                             |
+
+---
+
+## Behavior
+
+- **Automatic preview**:
+  - Images: thumbnail preview (falls back to an icon if the image cannot be loaded).
+  - Text: small snippet (first 100 chars) only when `file` is a native `File`.
+  - Generic: file-type icon and labels.
+- **Format & size**: Displays file size (if available) and format label (e.g., PDF, JPG).
+- **Actions**:
+  - Inline remove button if `onRemove` is provided and `showActionMenu` is false.
+  - Popover action menu when `showActionMenu` is true, using `onPreview`, `onDownload`, `onRemove`.
+- **Container click**:
+  - If `clickable` is `false`, the container is not interactive.
+  - If `onClick` is provided, it takes precedence over `onPreview` when the container is activated.
+  - Otherwise, if `onPreview` is provided, it is used when the container is activated.
+  - When `showActionMenu` is `true`, `clickable` and `onClick` props are not allowed.
+- **Thumbnails**:
+  - Images: if `showThumbnail` is `false`, an icon is shown instead of the image.
+  - Text: if `showThumbnail` is `false` (or a preview can't be extracted), an icon is shown instead of the text snippet.
+
+---
+
+## Examples
+
+### Image
+
+```tsx
+import { FilePreview } from "laif-ds";
+
+export function ImagePreview() {
+  return (
+    <FilePreview
+      file={{
+        name: "photo.jpg",
+        url: "https://picsum.photos/id/237/200/200",
+        type: "image/jpeg",
+      }}
+      onPreview={(url) => console.log("preview", url)}
+      onDownload={(url) => console.log("download", url)}
+    />
+  );
+}
+```
+
+### With Remove Button
+
+```tsx
+import { FilePreview } from "laif-ds";
+
+export function RemovablePreview() {
+  return (
+    <FilePreview
+      file={{
+        name: "document.docx",
+        url: "https://example.com/document.docx",
+        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      }}
+      onRemove={(url) => console.log("remove", url)}
+      onPreview={(url) => console.log("preview", url)}
+      onDownload={(url) => console.log("download", url)}
+    />
+  );
+}
+```
+
+### With Action Menu
+
+```tsx
+import { FilePreview } from "laif-ds";
+
+export function WithMenu() {
+  return (
+    <FilePreview
+      file={{
+        name: "presentation.ppt",
+        url: "https://example.com/presentation.ppt",
+        type: "application/vnd.ms-powerpoint",
+      }}
+      showActionMenu
+      onPreview={(url) => console.log("preview", url)}
+      onDownload={(url) => console.log("download", url)}
+      onRemove={(url) => console.log("remove", url)}
+    />
+  );
+}
+```
+
+### With Custom Click Handler
+
+```tsx
+import { FilePreview } from "laif-ds";
+
+export function CustomClick() {
+  return (
+    <FilePreview
+      file={{
+        name: "document.pdf",
+        url: "https://example.com/document.pdf",
+        type: "application/pdf",
+      }}
+      variant="outline"
+      size="sm"
+      onClick={(event) => console.log("custom click handler", event)}
+      onRemove={(url) => console.log("remove", url)}
+    />
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Thumbnails**: Image previews use object-fit to contain within the chip.
+- **Security**: For local `File` previews, temporary object URLs are created and revoked on unmount/change.
+- **Internationalization**: Text labels in the action menu can be adjusted at call sites when needed.
+- **Async support**: All callback functions (`onClick`, `onRemove`, `onPreview`, `onDownload`) support async operations and can return Promise<void>.