laif-ds 0.2.44 → 0.2.46

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

@@ -0,0 +1,144 @@
+# Persona
+
+Act as a senior software engineer specializing in React, Next.js, and TypeScript. You have deep knowledge of the laif-dscomponent library. Your goal is to assist developers in using the AppSelect component correctly by providing clear, type-safe code examples and explanations that follow modern React best practices.
+
+# Context
+
+Each of these components is a key part of the laif-ds library for building accessible and customizable dropdown menus in React applications. Developers will ask for guidance on configuration, props, state management, and event handling. Your answers must be based exclusively on the official documentation provided inside the files.
+Whenever you are asked to provide a component example, you must provide a complete, type-safe example that can be used as a starting point for the developer.
+Whenever you see a deprecated component being used you should suggest to use the new component instead.
+
+# Fundamental Rules
+
+- TypeScript First: All code examples must use TypeScript and be type-safe.
+- Controlled Components: Always manage state using the value and onValueChange props together. This is the standard pattern in React.
+- Absolute Precision: Provide prop names, types, and default values exactly as defined. Do not invent props.
+- Complete Code Examples: Present code in a complete, working format within a React component.
+- Explain Your Choices: Justify why you are using certain props. For example: "I'm using wrpClassName="w-full" to make the component's wrapper take up the full width of its container."
+
+# laif-ds Component Reference
+
+This document provides a complete mapping of all components available in the laif-ds library. Each component links to its detailed documentation file located in `/frontend/node_modules/laif-ds/dist/agent-docs/components/{ComponentName}.md`.
+
+## UI Components
+
+### Form & Input Components
+- **AppForm** - Dynamic form component with multiple field types support
+- **AppRadioGroup** - Enhanced radio group with card and icon support
+- **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
+- **Form** - Form wrapper component with validation support
+- **Input** - Text input field with multiple variants and features
+- **InputOtp** - One-time password input component
+- **InputSelector** - Combined input with selection capabilities
+- **Label** - Form label component with accessibility features
+- **RadioGroup** - Group of mutually exclusive radio button options
+- **Select** - Standard dropdown selection component
+- **Slider** - Range input slider for numeric values
+- **Switch** - Toggle switch for binary options
+- **TextArea** - Multi-line text input field
+
+### Layout & Structure Components
+- **Accordion** - Collapsible content panels for organizing information hierarchically
+- **AppSidebar** - Application sidebar navigation component
+- **AppStepper** - Step-by-step progress indicator for multi-step processes
+- **AspectRatio** - Container that maintains a specific aspect ratio for responsive layouts
+- **Breadcrumb** - Breadcrumb navigation component for hierarchical navigation
+- **Card** - Container component for grouping related content
+- **Collapsible** - Content that can be expanded or collapsed
+- **Resizable** - Resizable panels component for flexible layouts
+- **ScrollArea** - Custom scrollbar component with styling
+- **Separator** - Visual divider between content sections
+- **Sidebar** - Generic sidebar container component
+- **Stepper** - Primitive stepper components for building multi-step flows
+- **Tabs** - Tabbed interface for organizing content
+
+### Overlay & Dialog Components
+- **Alert** - Display important messages and notifications to users
+- **AlertDialog** - Modal dialog for critical confirmations and warnings
+- **Command** - Command palette for keyboard-driven navigation
+- **Confirmer** - Confirmation dialog for destructive actions
+- **ContextMenu** - Right-click context menu component
+- **Dialog** - Modal dialog window for focused interactions
+- **Drawer** - Slide-out panel for secondary content
+- **DropdownMenu** - Dropdown menu component with keyboard navigation
+- **HoverCard** - Popover card displayed on hover
+- **Menubar** - Application menu bar component
+- **Popover** - Floating content container triggered by user interaction
+- **Sheet** - Side sheet component for secondary content
+- **Tooltip** - Contextual information displayed on hover
+
+### Data Display Components
+- **Avatar** - User profile image display with fallback initials
+- **Badge** - Small status indicator or label for highlighting information
+- **DataCrossTable** - Cross-tabulation data display component
+- **DataTable** - Advanced table component with sorting, filtering, and pagination
+- **Pagination** - Page navigation component for paginated content
+- **Table** - Basic table component with styling
+- **TableSkeleton** - Loading skeleton for table components
+- **Typo** - Typography component for consistent text styling
+
+### Content & Media Components
+- **AppEditor** - Rich text editor component for content creation
+- **AudioVisualizer** - Audio waveform visualization component
+- **Calendar** - Date selection and display component
+- **Carousel** - Slideshow component for cycling through content
+- **CodeHighlighter** - Code syntax highlighting component
+- **CopyButton** - Button for copying content to clipboard
+- **FilePreview** - Component for previewing file contents
+- **FilePreviewer** - Enhanced file preview with multiple format support
+- **FileUploader** - Drag-and-drop file upload component
+- **Icon** - Icon component using Feather Icons library
+- **MarkdownRenderer** - Markdown content renderer with syntax highlighting
+- **SecurePdfViewer** - Secure PDF viewer component with protection
+- **ShikiHighlighter** - Code syntax highlighter using Shiki
+
+### Messaging & Communication
+- **Chat** - Complete chat interface component
+- **ChatMessage** - Individual message display within chat interfaces
+- **MessageInput** - Text input specifically designed for messaging
+- **MessageList** - Scrollable list of messages
+- **PromptSuggestions** - Suggestion chips for prompt input
+
+### Navigation Components
+- **Button** - Primary interactive element for user actions
+- **NavigationMenu** - Navigation menu with dropdown support
+- **ThemeSwitcher** - Component for switching between light/dark themes
+- **WeeklyCalendar** - Week-view calendar component
+
+### Utility & Feedback Components
+- **Skeleton** - Loading placeholder component with animation
+- **Sonner** - Toast notification system
+- **Spinner** - Loading spinner indicator
+- **Toaster** - Toast notification container
+- **Toggle** - Toggle button component
+- **ToggleGroup** - Group of toggle buttons with single/multiple selection
+- **TypingIndicator** - Animated typing indicator for chat interfaces
+
+## Progress Components
+
+- **CircularProgress** - Circular loading indicator
+- **Progress** - Linear loading indicator (progress bar)
+
+## Chart Components
+
+- **Chart** - Base chart component using Recharts library
+- **GanttChart** - Timeline-based project planning chart
+
+## Form Components
+
+- **FormComposer** - Dynamic form builder and renderer
+
+## Deprecated Components
+
+The following components are marked as deprecated and should not be used in new development:
+
+- **MultipleSelector** - ~~Use `AppSelect` instead~~
+- **AppMultipleSelectDropdown** - ~~Use `AppSelect` instead~~
+- **ResizePrompt** - ~~Use alternative resize handling methods~~
+
+---
+
+**Note for AI Models**: This list represents the complete component library available in laif-ds. When users reference these components, refer to the corresponding documentation file at `/frontend/node_modules/laif-ds/dist/agent-docs/components/{ComponentName}.md` for detailed implementation guidelines, props, and usage examples.

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

@@ -1,48 +1,49 @@
 "use client";
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import { cn as o } from "../../lib/utils.js";
-import { Controller as w } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { Controller as V } from "../../node_modules/react-hook-form/dist/index.esm.js";
 import { AppSelect as m } from "./app-select.js";
-import { Button as V } from "./button.js";
-import { Checkbox as j } from "./checkbox.js";
-import { DatePicker as A } from "./date-picker.js";
-import { Input as F } from "./input.js";
+import { Button as j } from "./button.js";
+import { Checkbox as A } from "./checkbox.js";
+import { DatePicker as F } from "./date-picker.js";
+import { Input as I } from "./input.js";
 import { Label as t } from "./label.js";
-import { RadioGroup as I, RadioGroupItem as R } from "./radio-group.js";
-import { Slider as B } from "./slider.js";
-import { Switch as $ } from "./switch.js";
-import { Textarea as D } from "./textarea.js";
+import { RadioGroup as R, RadioGroupItem as B } from "./radio-group.js";
+import { Slider as $ } from "./slider.js";
+import { Switch as D } from "./switch.js";
+import { Textarea as G } from "./textarea.js";
 import { Typo as i } from "./typo.js";
-const U = ({
+const X = ({
   items: h,
   cols: v = "2",
   form: b,
   submitText: g = "Invia",
   onSubmit: x,
-  isSubmitting: p = !1
+  isSubmitting: p = !1,
+  showSubmitButton: C = !1
 }) => {
   const {
-    control: C,
-    handleSubmit: N,
-    formState: { errors: y, isValid: f, isDirty: S }
-  } = b, k = (e) => {
-    const c = y[e.name]?.message, d = c ? String(c) : void 0;
+    control: N,
+    handleSubmit: y,
+    formState: { errors: f, isValid: S, isDirty: k }
+  } = b, w = (e) => {
+    const c = f[e.name]?.message, d = c ? String(c) : void 0;
     return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-      w,
+      V,
       {
         name: e.name,
-        control: C,
+        control: N,
         render: ({ field: r }) => {
-          const s = /* @__PURE__ */ l("div", { className: "mb-2 flex items-center justify-between", children: [
+          const s = /* @__PURE__ */ n("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 })
           ] });
           switch (e.component) {
             case "input":
-              return /* @__PURE__ */ l("div", { children: [
+              return /* @__PURE__ */ n("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  F,
+                  I,
                   {
                     ...r,
                     placeholder: e.placeholder,
@@ -52,10 +53,10 @@ const U = ({
                 )
               ] });
             case "textarea":
-              return /* @__PURE__ */ l("div", { children: [
+              return /* @__PURE__ */ n("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  D,
+                  G,
                   {
                     ...r,
                     placeholder: e.placeholder,
@@ -65,27 +66,27 @@ const U = ({
                 )
               ] });
             case "radio":
-              return /* @__PURE__ */ l("div", { children: [
+              return /* @__PURE__ */ n("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  I,
+                  R,
                   {
                     value: r.value != null ? String(r.value) : "",
-                    onValueChange: (n) => r.onChange(n),
+                    onValueChange: (l) => r.onChange(l),
                     className: "space-y-2",
                     disabled: e.disabled,
-                    children: (e.options ?? []).map((n) => {
-                      const u = `${e.name}-${n.value}`;
-                      return /* @__PURE__ */ l(
+                    children: (e.options ?? []).map((l) => {
+                      const u = `${e.name}-${l.value}`;
+                      return /* @__PURE__ */ n(
                         "div",
                         {
                           className: "flex items-center gap-2",
                           children: [
                             /* @__PURE__ */ a(
-                              R,
+                              B,
                               {
                                 id: u,
-                                value: String(n.value),
+                                value: String(l.value),
                                 disabled: e.disabled
                               }
                             ),
@@ -97,25 +98,25 @@ const U = ({
                                   "cursor-pointer",
                                   e.disabled && "cursor-not-allowed opacity-60"
                                 ),
-                                children: n.label
+                                children: l.label
                               }
                             )
                           ]
                         },
-                        n.value
+                        l.value
                       );
                     })
                   }
                 )
               ] });
             case "select":
-              return /* @__PURE__ */ l("div", { children: [
+              return /* @__PURE__ */ n("div", { children: [
                 s,
                 /* @__PURE__ */ a(
                   m,
                   {
                     ...r,
-                    onValueChange: (n) => r.onChange(n),
+                    onValueChange: (l) => r.onChange(l),
                     options: e.options ?? [],
                     placeholder: e.placeholder,
                     disabled: e.disabled
@@ -123,14 +124,14 @@ const U = ({
                 )
               ] });
             case "multiselect":
-              return /* @__PURE__ */ l("div", { children: [
+              return /* @__PURE__ */ n("div", { children: [
                 s,
                 /* @__PURE__ */ a(
                   m,
                   {
                     ...r,
                     multiple: !0,
-                    onValueChange: (n) => r.onChange(n),
+                    onValueChange: (l) => r.onChange(l),
                     options: e.options ?? [],
                     placeholder: e.placeholder,
                     disabled: e.disabled
@@ -138,13 +139,13 @@ const U = ({
                 )
               ] });
             case "datepicker":
-              return /* @__PURE__ */ l("div", { className: "relative", children: [
+              return /* @__PURE__ */ n("div", { className: "relative", children: [
                 s,
                 /* @__PURE__ */ a(
-                  A,
+                  F,
                   {
                     value: r.value,
-                    onChange: e.disabled || e.calendarRange ? void 0 : (n) => r.onChange(n),
+                    onChange: e.disabled || e.calendarRange ? void 0 : (l) => r.onChange(l),
                     placeholder: e.placeholder,
                     disabled: e.disabled,
                     customCalendarProps: e.disabled ? {
@@ -153,20 +154,20 @@ const U = ({
                     } : e.calendarRange ? {
                       mode: "range",
                       selected: r.value,
-                      onSelect: (n) => r.onChange(n)
+                      onSelect: (l) => r.onChange(l)
                     } : void 0
                   }
                 )
               ] });
             case "checkbox":
-              return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+              return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ a(
-                    j,
+                    A,
                     {
                       ...r,
                       id: e.name,
-                      onCheckedChange: (n) => r.onChange(n),
+                      onCheckedChange: (l) => r.onChange(l),
                       defaultChecked: !!e.defaultValue,
                       disabled: e.disabled
                     }
@@ -194,9 +195,9 @@ const U = ({
                 )
               ] });
             case "switch":
-              return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ l("div", { children: [
+              return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ n("div", { children: [
                     /* @__PURE__ */ a(t, { htmlFor: e.name, children: e.label }),
                     e.caption && /* @__PURE__ */ a(
                       i,
@@ -208,11 +209,11 @@ const U = ({
                     )
                   ] }),
                   /* @__PURE__ */ a(
-                    $,
+                    D,
                     {
                       id: e.name,
                       checked: !!r.value,
-                      onCheckedChange: (n) => r.onChange(n),
+                      onCheckedChange: (l) => r.onChange(l),
                       disabled: e.disabled
                     }
                   )
@@ -220,13 +221,13 @@ const U = ({
                 d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
               ] });
             case "slider":
-              return /* @__PURE__ */ l("div", { children: [
+              return /* @__PURE__ */ n("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  B,
+                  $,
                   {
                     value: Array.isArray(r.value) ? r.value : [r.value || e.min || 0],
-                    onValueChange: (n) => r.onChange(n[0]),
+                    onValueChange: (l) => r.onChange(l[0]),
                     min: e.min ?? 0,
                     max: e.max ?? 100,
                     step: e.step ?? 1,
@@ -248,20 +249,20 @@ const U = ({
       }
     ) });
   };
-  return /* @__PURE__ */ l("form", { onSubmit: N((e) => x?.(e)), children: [
+  return /* @__PURE__ */ n("form", { onSubmit: y((e) => x?.(e)), children: [
     /* @__PURE__ */ a("div", { className: o("grid gap-4", `grid-cols-${v}`), children: h.map((e, c) => /* @__PURE__ */ a(
       "div",
       {
         className: o(c === h.length - 1 && "col-span-full"),
-        children: k(e)
+        children: w(e)
       },
       e.name
     )) }),
-    /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
-      V,
+    C && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
+      j,
       {
         type: "submit",
-        disabled: !f || !S || p,
+        disabled: !S || !k || p,
         isLoading: p,
         children: g
       }
@@ -269,5 +270,5 @@ const U = ({
   ] });
 };
 export {
-  U as AppForm
+  X as AppForm
 };

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

@@ -7,9 +7,10 @@ import { Popover as I, PopoverTrigger as E, PopoverContent as R } from "./popove
 import { cn as T } from "../../lib/utils.js";
 import * as x from "react";
 import { useEffect as V } from "react";
+import { it as q } from "../../node_modules/date-fns/locale/it.js";
 import { formatDate as m } from "../../node_modules/date-fns/format.js";
-import { isSameDay as q } from "../../node_modules/date-fns/isSameDay.js";
-function U({
+import { isSameDay as A } from "../../node_modules/date-fns/isSameDay.js";
+function X({
   value: e,
   onChange: c,
   placeholder: b = "Seleziona data",
@@ -21,7 +22,7 @@ function U({
   firstDate: a,
   lastDate: p,
   availableDates: l,
-  locale: C,
+  locale: C = q,
   initialCalendarMonth: u,
   customCalendarProps: P
 }) {
@@ -33,7 +34,7 @@ function U({
   let s = [];
   return a && s.push({ before: a }), p && s.push({ after: p }), l?.length && s.push(
     (n) => !l.some(
-      (M) => q(M, n)
+      (M) => A(M, n)
     )
   ), t && (s = [!0]), V(() => {
     h(r), g(r || u);
@@ -88,5 +89,5 @@ function U({
   ] });
 }
 export {
-  U as DatePicker
+  X as DatePicker
 };

package/dist/index.d.ts

@@ -146,9 +146,9 @@ declare interface AppEditorProps {
 
 declare type AppEditorToolbar = "block-format" | "font-format" | "history";
 
-export declare const AppForm: ({ items, cols, form, submitText, onSubmit, isSubmitting, }: AppFormProps) => JSX.Element;
+export declare const AppForm: ({ items, cols, form, submitText, onSubmit, isSubmitting, showSubmitButton, }: AppFormProps) => JSX.Element;
 
-declare interface AppFormItem {
+export declare interface AppFormItem {
     label: string;
     component: "input" | "select" | "textarea" | "checkbox" | "multiselect" | "datepicker" | "radio" | "switch" | "slider";
     name: string;
@@ -164,12 +164,13 @@ declare interface AppFormItem {
 }
 
 declare interface AppFormProps {
-    cols?: "2" | "1" | "3";
+    cols?: "1" | "2" | "3";
     items: AppFormItem[];
     form: UseFormReturn<any>;
     submitText?: string;
     onSubmit?: (data: any) => void;
     isSubmitting?: boolean;
+    showSubmitButton?: boolean;
 }
 
 /**

package/dist/node_modules/date-fns/_lib/normalizeDates.js

@@ -1,12 +1,12 @@
 "use client";
 import { constructFrom as e } from "../constructFrom.js";
-function i(r, ...n) {
-  const o = e.bind(
+function c(o, ...n) {
+  const t = e.bind(
     null,
-    n.find((t) => typeof t == "object")
+    o || n.find((r) => typeof r == "object")
   );
-  return n.map(o);
+  return n.map(t);
 }
 export {
-  i as normalizeDates
+  c as normalizeDates
 };

package/dist/node_modules/date-fns/isSameWeek.js

@@ -0,0 +1,15 @@
+"use client";
+import { normalizeDates as f } from "./_lib/normalizeDates.js";
+import { startOfWeek as r } from "./startOfWeek.js";
+function o(t, a, e) {
+  const [i, m] = f(
+    e?.in,
+    t,
+    a
+  );
+  return +r(i, e) == +r(m, e);
+}
+export {
+  o as default,
+  o as isSameWeek
+};

package/dist/node_modules/date-fns/locale/it/_lib/formatDistance.js

@@ -0,0 +1,71 @@
+"use client";
+const i = {
+  lessThanXSeconds: {
+    one: "meno di un secondo",
+    other: "meno di {{count}} secondi"
+  },
+  xSeconds: {
+    one: "un secondo",
+    other: "{{count}} secondi"
+  },
+  halfAMinute: "alcuni secondi",
+  lessThanXMinutes: {
+    one: "meno di un minuto",
+    other: "meno di {{count}} minuti"
+  },
+  xMinutes: {
+    one: "un minuto",
+    other: "{{count}} minuti"
+  },
+  aboutXHours: {
+    one: "circa un'ora",
+    other: "circa {{count}} ore"
+  },
+  xHours: {
+    one: "un'ora",
+    other: "{{count}} ore"
+  },
+  xDays: {
+    one: "un giorno",
+    other: "{{count}} giorni"
+  },
+  aboutXWeeks: {
+    one: "circa una settimana",
+    other: "circa {{count}} settimane"
+  },
+  xWeeks: {
+    one: "una settimana",
+    other: "{{count}} settimane"
+  },
+  aboutXMonths: {
+    one: "circa un mese",
+    other: "circa {{count}} mesi"
+  },
+  xMonths: {
+    one: "un mese",
+    other: "{{count}} mesi"
+  },
+  aboutXYears: {
+    one: "circa un anno",
+    other: "circa {{count}} anni"
+  },
+  xYears: {
+    one: "un anno",
+    other: "{{count}} anni"
+  },
+  overXYears: {
+    one: "più di un anno",
+    other: "più di {{count}} anni"
+  },
+  almostXYears: {
+    one: "quasi un anno",
+    other: "quasi {{count}} anni"
+  }
+}, r = (a, t, o) => {
+  let n;
+  const e = i[a];
+  return typeof e == "string" ? n = e : t === 1 ? n = e.one : n = e.other.replace("{{count}}", t.toString()), o?.addSuffix ? o.comparison && o.comparison > 0 ? "tra " + n : n + " fa" : n;
+};
+export {
+  r as formatDistance
+};

package/dist/node_modules/date-fns/locale/it/_lib/formatLong.js

@@ -0,0 +1,34 @@
+"use client";
+import { buildFormatLongFn as t } from "../../_lib/buildFormatLongFn.js";
+const m = {
+  full: "EEEE d MMMM y",
+  long: "d MMMM y",
+  medium: "d MMM y",
+  short: "dd/MM/y"
+}, e = {
+  full: "HH:mm:ss zzzz",
+  long: "HH:mm:ss z",
+  medium: "HH:mm:ss",
+  short: "HH:mm"
+}, d = {
+  full: "{{date}} {{time}}",
+  long: "{{date}} {{time}}",
+  medium: "{{date}} {{time}}",
+  short: "{{date}} {{time}}"
+}, l = {
+  date: t({
+    formats: m,
+    defaultWidth: "full"
+  }),
+  time: t({
+    formats: e,
+    defaultWidth: "full"
+  }),
+  dateTime: t({
+    formats: d,
+    defaultWidth: "full"
+  })
+};
+export {
+  l as formatLong
+};