laif-ds 0.2.46 → 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

@@ -24,6 +24,7 @@ export 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
@@ -88,15 +89,15 @@ export function SubmitInsideVsOutside() {
 
 ## 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     |
-| `showSubmitButton` | `boolean`               | `false`   | Renders an internal submit button at the end of the form |
+| 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 |
 
 ---
 
@@ -114,30 +115,41 @@ export function SubmitInsideVsOutside() {
 ## 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
 
 ---
@@ -167,6 +179,7 @@ export function BasicForm() {
           label: "Email",
           component: "input",
           name: "email",
+          inputType: "email",
           placeholder: "Enter your email",
         },
         {

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

@@ -1,25 +1,25 @@
 "use client";
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import { cn as o } from "../../lib/utils.js";
 import { Controller as V } from "../../node_modules/react-hook-form/dist/index.esm.js";
-import { AppSelect as m } from "./app-select.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 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 { 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 X = ({
-  items: h,
-  cols: v = "2",
+  items: p,
+  cols: m = "2",
   form: b,
   submitText: g = "Invia",
   onSubmit: x,
-  isSubmitting: p = !1,
+  isSubmitting: h = !1,
   showSubmitButton: C = !1
 }) => {
   const {
@@ -34,18 +34,19 @@ const X = ({
         name: e.name,
         control: N,
         render: ({ field: r }) => {
-          const s = /* @__PURE__ */ n("div", { className: "mb-2 flex items-center justify-between", children: [
+          const s = /* @__PURE__ */ l("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__ */ n("div", { children: [
+              return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
                   I,
                   {
                     ...r,
+                    type: e.inputType,
                     placeholder: e.placeholder,
                     className: o(d && "border-d-destructive"),
                     disabled: e.disabled
@@ -53,10 +54,10 @@ const X = ({
                 )
               ] });
             case "textarea":
-              return /* @__PURE__ */ n("div", { children: [
+              return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  G,
+                  D,
                   {
                     ...r,
                     placeholder: e.placeholder,
@@ -66,18 +67,18 @@ const X = ({
                 )
               ] });
             case "radio":
-              return /* @__PURE__ */ n("div", { children: [
+              return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
                   R,
                   {
                     value: r.value != null ? String(r.value) : "",
-                    onValueChange: (l) => r.onChange(l),
+                    onValueChange: (n) => r.onChange(n),
                     className: "space-y-2",
                     disabled: e.disabled,
-                    children: (e.options ?? []).map((l) => {
-                      const u = `${e.name}-${l.value}`;
-                      return /* @__PURE__ */ n(
+                    children: (e.options ?? []).map((n) => {
+                      const u = `${e.name}-${n.value}`;
+                      return /* @__PURE__ */ l(
                         "div",
                         {
                           className: "flex items-center gap-2",
@@ -86,7 +87,7 @@ const X = ({
                               B,
                               {
                                 id: u,
-                                value: String(l.value),
+                                value: String(n.value),
                                 disabled: e.disabled
                               }
                             ),
@@ -98,25 +99,25 @@ const X = ({
                                   "cursor-pointer",
                                   e.disabled && "cursor-not-allowed opacity-60"
                                 ),
-                                children: l.label
+                                children: n.label
                               }
                             )
                           ]
                         },
-                        l.value
+                        n.value
                       );
                     })
                   }
                 )
               ] });
             case "select":
-              return /* @__PURE__ */ n("div", { children: [
+              return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  m,
+                  v,
                   {
                     ...r,
-                    onValueChange: (l) => r.onChange(l),
+                    onValueChange: (n) => r.onChange(n),
                     options: e.options ?? [],
                     placeholder: e.placeholder,
                     disabled: e.disabled
@@ -124,14 +125,14 @@ const X = ({
                 )
               ] });
             case "multiselect":
-              return /* @__PURE__ */ n("div", { children: [
+              return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  m,
+                  v,
                   {
                     ...r,
                     multiple: !0,
-                    onValueChange: (l) => r.onChange(l),
+                    onValueChange: (n) => r.onChange(n),
                     options: e.options ?? [],
                     placeholder: e.placeholder,
                     disabled: e.disabled
@@ -139,13 +140,13 @@ const X = ({
                 )
               ] });
             case "datepicker":
-              return /* @__PURE__ */ n("div", { className: "relative", children: [
+              return /* @__PURE__ */ l("div", { className: "relative", children: [
                 s,
                 /* @__PURE__ */ a(
                   F,
                   {
                     value: r.value,
-                    onChange: e.disabled || e.calendarRange ? void 0 : (l) => r.onChange(l),
+                    onChange: e.disabled || e.calendarRange ? void 0 : (n) => r.onChange(n),
                     placeholder: e.placeholder,
                     disabled: e.disabled,
                     customCalendarProps: e.disabled ? {
@@ -154,20 +155,20 @@ const X = ({
                     } : e.calendarRange ? {
                       mode: "range",
                       selected: r.value,
-                      onSelect: (l) => r.onChange(l)
+                      onSelect: (n) => r.onChange(n)
                     } : void 0
                   }
                 )
               ] });
             case "checkbox":
-              return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+              return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ a(
                     A,
                     {
                       ...r,
                       id: e.name,
-                      onCheckedChange: (l) => r.onChange(l),
+                      onCheckedChange: (n) => r.onChange(n),
                       defaultChecked: !!e.defaultValue,
                       disabled: e.disabled
                     }
@@ -195,9 +196,9 @@ const X = ({
                 )
               ] });
             case "switch":
-              return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ n("div", { children: [
+              return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ l("div", { children: [
                     /* @__PURE__ */ a(t, { htmlFor: e.name, children: e.label }),
                     e.caption && /* @__PURE__ */ a(
                       i,
@@ -209,11 +210,11 @@ const X = ({
                     )
                   ] }),
                   /* @__PURE__ */ a(
-                    D,
+                    $,
                     {
                       id: e.name,
                       checked: !!r.value,
-                      onCheckedChange: (l) => r.onChange(l),
+                      onCheckedChange: (n) => r.onChange(n),
                       disabled: e.disabled
                     }
                   )
@@ -221,13 +222,13 @@ const X = ({
                 d && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: d })
               ] });
             case "slider":
-              return /* @__PURE__ */ n("div", { children: [
+              return /* @__PURE__ */ l("div", { children: [
                 s,
                 /* @__PURE__ */ a(
-                  $,
+                  T,
                   {
                     value: Array.isArray(r.value) ? r.value : [r.value || e.min || 0],
-                    onValueChange: (l) => r.onChange(l[0]),
+                    onValueChange: (n) => r.onChange(n[0]),
                     min: e.min ?? 0,
                     max: e.max ?? 100,
                     step: e.step ?? 1,
@@ -249,11 +250,11 @@ const X = ({
       }
     ) });
   };
-  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(
+  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"),
+        className: o(c === p.length - 1 && "col-span-full"),
         children: w(e)
       },
       e.name
@@ -262,8 +263,8 @@ const X = ({
       j,
       {
         type: "submit",
-        disabled: !S || !k || p,
-        isLoading: p,
+        disabled: !S || !k || h,
+        isLoading: h,
         children: g
       }
     ) })

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';
@@ -152,6 +153,7 @@ 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;

package/dist/node_modules/eventemitter3/index.js

@@ -1,5 +1,5 @@
 "use client";
-import e from "../../_virtual/index3.js";
+import e from "../../_virtual/index2.js";
 export {
   e as EventEmitter,
   e as default

package/dist/node_modules/eventemitter3/index2.js

@@ -1,5 +1,5 @@
 "use client";
-import { __module as x } from "../../_virtual/index7.js";
+import { __module as x } from "../../_virtual/index6.js";
 var w;
 function O() {
   return w ? x.exports : (w = 1, (function(d) {

package/dist/node_modules/recharts/es6/util/Events.js

@@ -1,5 +1,5 @@
 "use client";
-import e from "../../../../_virtual/index3.js";
+import e from "../../../../_virtual/index2.js";
 var r = new e(), n = "recharts.syncEvent.tooltip";
 export {
   n as TOOLTIP_SYNC_EVENT,

package/dist/node_modules/style-to-object/cjs/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { __exports as r } from "../../../_virtual/index6.js";
+import { __exports as r } from "../../../_virtual/index7.js";
 import { __require as c } from "../../inline-style-parser/index.js";
 var f;
 function j() {

package/dist/node_modules/use-sync-external-store/shim/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { __module as e } from "../../../_virtual/index2.js";
+import { __module as e } from "../../../_virtual/index3.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.development.js";
 var r;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "laif-ds",
   "private": false,
-  "version": "0.2.46",
+  "version": "0.2.47",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",