laif-ds 0.2.45 → 0.2.47

package/dist/_virtual/index2.js

@@ -1,5 +1,8 @@
 "use client";
-var e = { exports: {} };
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as t } from "../node_modules/eventemitter3/index2.js";
+var r = t();
+const m = /* @__PURE__ */ e(r);
 export {
-  e as __module
+  m as default
 };

package/dist/_virtual/index3.js

@@ -1,8 +1,5 @@
 "use client";
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/eventemitter3/index2.js";
-var r = t();
-const m = /* @__PURE__ */ e(r);
+var e = { exports: {} };
 export {
-  m as default
+  e as __module
 };

package/dist/_virtual/index6.js

@@ -1,5 +1,5 @@
 "use client";
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };

package/dist/_virtual/index7.js

@@ -1,5 +1,5 @@
 "use client";
-var e = { exports: {} };
+var e = {};
 export {
-  e as __module
+  e as __exports
 };

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"
@@ -24,6 +24,7 @@ interface AppFormItem {
     | "switch"
     | "slider"; // Field type
   name: string; // Field name (used for form state and validation)
+  inputType?: string; // HTML input type for "input" component (e.g. "text", "email", "password", "number")
   defaultValue?: string | boolean | number | string[] | Date | number[]; // Initial value
   options?: AppSelectOption[]; // Options for select/multiselect/radio
   disabled?: boolean; // Disables the field
@@ -36,18 +37,67 @@ 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
 
-| Prop            | Type                       | Default   | Description                              |
-| --------------- | -------------------------- | --------- | ---------------------------------------- |
-| `items`         | `AppFormItem[]`            | **required** | Array of form field configurations    |
-| `form`          | `UseFormReturn<any>`       | **required** | React Hook Form instance              |
-| `cols`          | `"1" \| "2" \| "3"`        | `"2"`     | Number of grid columns                   |
-| `submitText`    | `string`                   | `"Invia"` | Text for submit button                   |
-| `onSubmit`      | `(data: any) => void`      | `undefined` | Form submission callback               |
-| `isSubmitting`  | `boolean`                  | `false`   | Shows loading state on submit button     |
+| Prop               | Type                  | Default      | Description                                              |
+| ------------------ | --------------------- | ------------ | -------------------------------------------------------- |
+| `items`            | `AppFormItem[]`       | **required** | Array of form field configurations                       |
+| `form`             | `UseFormReturn<any>`  | **required** | React Hook Form instance                                 |
+| `cols`             | `"1" \| "2" \| "3"`   | `"2"`        | Number of grid columns                                   |
+| `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 +106,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
 
@@ -65,30 +115,41 @@ interface AppFormItem {
 ## Field Types
 
 ### input
-Standard text input field
+
+Standard text input field. When `component: "input"`, you can use the `inputType` property to control the underlying HTML input type (e.g. `"text"`, `"email"`, `"password"`, `"number"`, `"url"`).
+
+For a complete showcase of different input types, see the Storybook story `UI/AppForm/DifferentInputTypes`.
 
 ### textarea
+
 Multi-line text area
 
 ### select
+
 Single selection dropdown using AppSelect
 
 ### multiselect
+
 Multiple selection dropdown using AppSelect with `multiple` prop
 
 ### datepicker
+
 Date picker component with optional range selection via `calendarRange`
 
 ### radio
+
 Radio button group with options
 
 ### checkbox
+
 Single checkbox with label
 
 ### switch
+
 Toggle switch with label and optional caption
 
 ### slider
+
 Range slider with min/max/step configuration
 
 ---
@@ -118,6 +179,7 @@ export function BasicForm() {
           label: "Email",
           component: "input",
           name: "email",
+          inputType: "email",
           placeholder: "Enter your email",
         },
         {
@@ -238,5 +300,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,37 +1,38 @@
 "use client";
 import { jsxs as l, 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 { 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 { Controller as V } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { AppSelect as v } from "./app-select.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 { RadioGroup as R, RadioGroupItem as B } from "./radio-group.js";
+import { Slider as T } from "./slider.js";
 import { Switch as $ } from "./switch.js";
 import { Textarea as D } from "./textarea.js";
 import { Typo as i } from "./typo.js";
-const U = ({
-  items: h,
-  cols: v = "2",
+const X = ({
+  items: p,
+  cols: m = "2",
   form: b,
   submitText: g = "Invia",
   onSubmit: x,
-  isSubmitting: p = !1
+  isSubmitting: h = !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: [
             /* @__PURE__ */ a(t, { children: e.label }),
@@ -42,9 +43,10 @@ const U = ({
               return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  F,
+                  I,
                   {
                     ...r,
+                    type: e.inputType,
                     placeholder: e.placeholder,
                     className: o(d && "border-d-destructive"),
                     disabled: e.disabled
@@ -68,7 +70,7 @@ const U = ({
               return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  I,
+                  R,
                   {
                     value: r.value != null ? String(r.value) : "",
                     onValueChange: (n) => r.onChange(n),
@@ -82,7 +84,7 @@ const U = ({
                           className: "flex items-center gap-2",
                           children: [
                             /* @__PURE__ */ a(
-                              R,
+                              B,
                               {
                                 id: u,
                                 value: String(n.value),
@@ -112,7 +114,7 @@ const U = ({
               return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  m,
+                  v,
                   {
                     ...r,
                     onValueChange: (n) => r.onChange(n),
@@ -126,7 +128,7 @@ const U = ({
               return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  m,
+                  v,
                   {
                     ...r,
                     multiple: !0,
@@ -141,7 +143,7 @@ const U = ({
               return /* @__PURE__ */ l("div", { className: "relative", children: [
                 s,
                 /* @__PURE__ */ a(
-                  A,
+                  F,
                   {
                     value: r.value,
                     onChange: e.disabled || e.calendarRange ? void 0 : (n) => r.onChange(n),
@@ -162,7 +164,7 @@ const U = ({
               return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
                 /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ a(
-                    j,
+                    A,
                     {
                       ...r,
                       id: e.name,
@@ -223,7 +225,7 @@ const U = ({
               return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  B,
+                  T,
                   {
                     value: Array.isArray(r.value) ? r.value : [r.value || e.min || 0],
                     onValueChange: (n) => r.onChange(n[0]),
@@ -248,26 +250,26 @@ const U = ({
       }
     ) });
   };
-  return /* @__PURE__ */ l("form", { onSubmit: N((e) => x?.(e)), children: [
-    /* @__PURE__ */ a("div", { className: o("grid gap-4", `grid-cols-${v}`), children: h.map((e, c) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ l("form", { onSubmit: y((e) => x?.(e)), children: [
+    /* @__PURE__ */ a("div", { className: o("grid gap-4", `grid-cols-${m}`), children: p.map((e, c) => /* @__PURE__ */ a(
       "div",
       {
-        className: o(c === h.length - 1 && "col-span-full"),
-        children: k(e)
+        className: o(c === p.length - 1 && "col-span-full"),
+        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,
-        isLoading: p,
+        disabled: !S || !k || h,
+        isLoading: h,
         children: g
       }
     ) })
   ] });
 };
 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

@@ -8,6 +8,7 @@ import { ClassValue } from 'clsx';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { ColumnDef } from '@tanstack/react-table';
 import { Command as Command_2 } from 'cmdk';
+import { ComponentProps } from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { ControllerProps } from 'react-hook-form';
 import { DayPicker } from 'react-day-picker';
@@ -146,12 +147,13 @@ 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;
+    inputType?: ComponentProps<"input">["type"];
     defaultValue?: string | boolean | number | string[] | Date | number[];
     options?: AppSelectOption[];
     disabled?: boolean;
@@ -164,12 +166,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
+};