laif-ds 0.2.45 → 0.2.46

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

@@ -11,7 +11,7 @@ Dynamic form component that integrates with React Hook Form to provide a configu
 ### AppFormItem
 
 ```ts
-interface AppFormItem {
+export interface AppFormItem {
   label: string; // Field label
   component:
     | "input"
@@ -36,6 +36,54 @@ interface AppFormItem {
 }
 ```
 
+### Submit Button Inside vs Outside
+
+```tsx
+import { AppForm, Button } from "laif-ds";
+import { useForm } from "react-hook-form";
+
+export function SubmitInsideVsOutside() {
+  const formInside = useForm({ mode: "onChange" });
+  const formOutside = useForm({ mode: "onChange" });
+
+  const onSubmitInside = (data: any) => console.log("inside", data);
+  const onSubmitOutside = (data: any) => console.log("outside", data);
+
+  return (
+    <div className="grid grid-cols-2 gap-6">
+      <div>
+        {/* Internal submit button rendered by AppForm */}
+        <AppForm
+          form={formInside}
+          items={[{ label: "Name", component: "input", name: "name" }]}
+          onSubmit={onSubmitInside}
+          showSubmitButton
+        />
+      </div>
+      <div>
+        {/* External submit button managed outside */}
+        <AppForm
+          form={formOutside}
+          items={[{ label: "Name", component: "input", name: "name" }]}
+          onSubmit={onSubmitOutside}
+        />
+        <div className="mt-4 flex justify-end">
+          <Button
+            type="button"
+            disabled={
+              !formOutside.formState.isValid || !formOutside.formState.isDirty
+            }
+            onClick={formOutside.handleSubmit(onSubmitOutside)}
+          >
+            Submit (external)
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
 ---
 
 ## Props
@@ -48,6 +96,7 @@ interface AppFormItem {
 | `submitText`    | `string`                   | `"Invia"` | Text for submit button                   |
 | `onSubmit`      | `(data: any) => void`      | `undefined` | Form submission callback               |
 | `isSubmitting`  | `boolean`                  | `false`   | Shows loading state on submit button     |
+| `showSubmitButton` | `boolean`               | `false`   | Renders an internal submit button at the end of the form |
 
 ---
 
@@ -56,7 +105,7 @@ interface AppFormItem {
 - **React Hook Form Integration**: Uses `Controller` from React Hook Form for each field
 - **Validation Display**: Shows validation errors inline with each field
 - **Grid Layout**: Automatically arranges fields in a responsive grid based on `cols` prop
-- **Submit Button**: Automatically disabled when form is invalid or pristine
+- **Submit Button**: Rendered only when `showSubmitButton` is `true`. When shown, it is disabled when the form is invalid or pristine. Otherwise, manage submit externally with `form.handleSubmit(...)`.
 - **Last Field Spanning**: The last field automatically spans full width
 - **Error Highlighting**: Fields with errors get red border styling
 
@@ -238,5 +287,5 @@ export function DateRangeForm() {
 - **React Hook Form Required**: This component requires React Hook Form to be installed and configured
 - **Validation**: Use React Hook Form's resolver (e.g., Zod, Yup) for validation
 - **Grid Layout**: The grid uses Tailwind's grid system with `grid-cols-{n}` classes
-- **Submit Button**: Always appears at the end of the form on the right
+- **Submit Button**: Use `showSubmitButton` to render the internal submit button at the end of the form, or provide your own external submit control.
 - **Error Display**: Errors appear inline above each field and as border highlighting

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
+};

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

@@ -0,0 +1,50 @@
+"use client";
+import { isSameWeek as l } from "../../../isSameWeek.js";
+const a = [
+  "domenica",
+  "lunedì",
+  "martedì",
+  "mercoledì",
+  "giovedì",
+  "venerdì",
+  "sabato"
+];
+function i(e) {
+  switch (e) {
+    case 0:
+      return "'domenica scorsa alle' p";
+    default:
+      return "'" + a[e] + " scorso alle' p";
+  }
+}
+function s(e) {
+  return "'" + a[e] + " alle' p";
+}
+function c(e) {
+  switch (e) {
+    case 0:
+      return "'domenica prossima alle' p";
+    default:
+      return "'" + a[e] + " prossimo alle' p";
+  }
+}
+const u = {
+  lastWeek: (e, r, o) => {
+    const t = e.getDay();
+    return l(e, r, o) ? s(t) : i(t);
+  },
+  yesterday: "'ieri alle' p",
+  today: "'oggi alle' p",
+  tomorrow: "'domani alle' p",
+  nextWeek: (e, r, o) => {
+    const t = e.getDay();
+    return l(e, r, o) ? s(t) : c(t);
+  },
+  other: "P"
+}, f = (e, r, o, t) => {
+  const n = u[e];
+  return typeof n == "function" ? n(r, o, t) : n;
+};
+export {
+  f as formatRelative
+};