laif-ds 0.2.39 → 0.2.41

package/dist/components/ui/input.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs as u, jsx as i } from "react/jsx-runtime";
 import { Label as ee } from "./label.js";
-import { cn as n } from "../../lib/utils.js";
-import { cva as R } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn as l } from "../../lib/utils.js";
+import { cva as A } from "../../node_modules/class-variance-authority/dist/index.js";
 import * as r from "react";
-import { Icon as N } from "./icon.js";
-import { Typo as se } from "./typo.js";
-const te = R(
-  n(
+import { Icon as k } from "./icon.js";
+import { Typo as te } from "./typo.js";
+const se = A(
+  l(
     "flex w-full items-center gap-2 rounded-md bg-d-input border border-d-border/50 px-3 transition-all duration-200",
     "focus-within:border-d-ring focus-within:border-1",
     "aria-[invalid=true]:ring-d-destructive/20 aria-[invalid=true]:border-d-destructive"
@@ -24,13 +24,14 @@ const te = R(
       size: "default"
     }
   }
-), re = R(
-  n(
+), re = A(
+  l(
     "shadow-none flex-1 min-w-0 bg-transparent outline-none border-0 p-0 overflow-hidden text-ellipsis whitespace-nowrap",
     "file:text-d-foreground file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium",
     "placeholder:text-d-muted-foreground",
     "selection:bg-d-primary selection:text-d-primary-foreground",
-    "disabled:cursor-not-allowed disabled:opacity-50"
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "[-webkit-autofill]:shadow-[0_0_0_1000px_transparent_inset] [-webkit-autofill]:[-webkit-text-fill-color:inherit]"
   ),
   {
     variants: {
@@ -49,11 +50,11 @@ const te = R(
   hide: "Nascondi password"
 }, ce = r.forwardRef(
   ({
-    className: W,
+    className: R,
     type: m,
-    label: k,
-    labelClassName: D,
-    id: G,
+    label: N,
+    labelClassName: W,
+    id: D,
     iconLeft: b,
     iconRight: v,
     startContent: S,
@@ -63,123 +64,123 @@ const te = R(
     required: E,
     onBlur: C,
     onChange: O,
-    onInvalid: P,
-    "aria-invalid": _,
+    onInvalid: _,
+    "aria-invalid": G,
     "aria-describedby": F,
-    showValidMessage: B = !1,
-    showValidityMessage: L = !1,
+    showValidMessage: P = !1,
+    showValidityMessage: B = !1,
     validityI18n: e,
     ...H
   }, $) => {
-    const [c, J] = r.useState(!1), [g, M] = r.useState(!0), [K, U] = r.useState(!1), [j, V] = r.useState(""), Q = r.useId(), x = G ?? Q, z = `${x}-validity`, h = r.useRef(null), w = m === "password", X = w ? c ? "text" : "password" : m, A = _ ?? (!g && K ? !0 : void 0), Y = [F, L && z].filter(Boolean).join(" ").trim() || void 0;
-    r.useImperativeHandle($, () => h.current);
+    const [c, J] = r.useState(!1), [h, M] = r.useState(!0), [K, L] = r.useState(!1), [U, V] = r.useState(""), Q = r.useId(), w = D ?? Q, j = `${w}-validity`, g = r.useRef(null), x = m === "password", X = x ? c ? "text" : "password" : m, z = G ?? (!h && K ? !0 : void 0), Y = [F, B && j].filter(Boolean).join(" ").trim() || void 0;
+    r.useImperativeHandle($, () => g.current);
     const Z = r.useCallback(
-      (t) => {
+      (s) => {
         if (d) return;
-        const s = t.target;
-        if (s.tagName === "INPUT" || s.tagName === "BUTTON") return;
-        const a = h.current;
-        a && (a.focus(), !w && m !== "file" && a.select());
+        const t = s.target;
+        if (t.tagName === "INPUT" || t.tagName === "BUTTON") return;
+        const a = g.current;
+        a && (a.focus(), !x && m !== "file" && a.select());
       },
-      [d, w, m]
-    ), l = r.useCallback(
-      (t) => {
-        const s = t.validity, a = t.validationMessage !== "" ? t.validationMessage : "✓";
-        if (s.valid)
+      [d, x, m]
+    ), n = r.useCallback(
+      (s) => {
+        const t = s.validity, a = s.validationMessage !== "" ? s.validationMessage : "✓";
+        if (t.valid)
           return {
             isValid: !0,
-            message: B ? e?.valid ?? a : ""
+            message: P ? e?.valid ?? a : ""
           };
         if (!e)
           return { isValid: !1, message: a };
         let o = a;
-        return s.valueMissing && e.valueMissing ? o = e.valueMissing : s.typeMismatch && e.typeMismatch ? o = e.typeMismatch : s.patternMismatch && e.patternMismatch ? o = e.patternMismatch : s.tooLong && e.tooLong ? o = e.tooLong : s.tooShort && e.tooShort ? o = e.tooShort : s.rangeUnderflow && e.rangeUnderflow ? o = e.rangeUnderflow : s.rangeOverflow && e.rangeOverflow ? o = e.rangeOverflow : s.badInput && e.badInput ? o = e.badInput : s.stepMismatch && e.stepMismatch ? o = e.stepMismatch : s.customError && e.customError && (o = e.customError), { isValid: !1, message: o };
+        return t.valueMissing && e.valueMissing ? o = e.valueMissing : t.typeMismatch && e.typeMismatch ? o = e.typeMismatch : t.patternMismatch && e.patternMismatch ? o = e.patternMismatch : t.tooLong && e.tooLong ? o = e.tooLong : t.tooShort && e.tooShort ? o = e.tooShort : t.rangeUnderflow && e.rangeUnderflow ? o = e.rangeUnderflow : t.rangeOverflow && e.rangeOverflow ? o = e.rangeOverflow : t.badInput && e.badInput ? o = e.badInput : t.stepMismatch && e.stepMismatch ? o = e.stepMismatch : t.customError && e.customError && (o = e.customError), { isValid: !1, message: o };
       },
-      [B, e]
+      [P, e]
     );
     r.useEffect(() => {
-      if (h.current) {
-        const { isValid: t, message: s } = l(h.current);
-        M(t), V(s);
+      if (g.current) {
+        const { isValid: s, message: t } = n(g.current);
+        M(s), V(t);
       }
-    }, [l]);
+    }, [n]);
     const q = r.useCallback(
-      (t) => {
-        U(!0);
-        const { isValid: s, message: a } = l(t.currentTarget);
-        M(s), V(a), O?.(t);
+      (s) => {
+        L(!0);
+        const { isValid: t, message: a } = n(s.currentTarget);
+        M(t), V(a), O?.(s);
       },
-      [O, l]
+      [O, n]
     ), y = r.useCallback(
-      (t) => {
-        U(!0), C?.(t);
+      (s) => {
+        L(!0), C?.(s);
       },
-      [C, l]
+      [C, n]
     ), I = r.useCallback(
-      (t) => {
-        const { isValid: s, message: a } = l(t.currentTarget);
-        M(s), V(a), P?.(t);
+      (s) => {
+        const { isValid: t, message: a } = n(s.currentTarget);
+        M(t), V(a), _?.(s);
       },
-      [P, l]
+      [_, n]
     );
-    return /* @__PURE__ */ u("div", { className: n("flex flex-col gap-1.5", W), children: [
-      k && /* @__PURE__ */ u(ee, { htmlFor: x, className: n("gap-0.5", D), children: [
-        k,
-        E && g && /* @__PURE__ */ i("div", { children: "*" }),
-        !g && /* @__PURE__ */ i("div", { className: "text-d-destructive", children: "*" })
+    return /* @__PURE__ */ u("div", { className: l("flex flex-col gap-1.5", R), children: [
+      N && /* @__PURE__ */ u(ee, { htmlFor: w, className: l("gap-0.5", W), children: [
+        N,
+        E && h && /* @__PURE__ */ i("div", { children: "*" }),
+        !h && /* @__PURE__ */ i("div", { className: "text-d-destructive", children: "*" })
       ] }),
       /* @__PURE__ */ u(
         "div",
         {
-          className: n(
-            te({ size: p }),
+          className: l(
+            se({ size: p }),
             d ? "cursor-not-allowed opacity-50" : "cursor-text"
           ),
-          "aria-invalid": A,
+          "aria-invalid": z,
           onClick: Z,
           children: [
             (b || S) && /* @__PURE__ */ u("div", { className: "text-d-muted-foreground flex shrink-0 items-center gap-2", children: [
-              b && /* @__PURE__ */ i(N, { name: b, size: p === "lg" ? "sm" : "xs" }),
+              b && /* @__PURE__ */ i(k, { name: b, size: p === "lg" ? "sm" : "xs" }),
               S
             ] }),
             /* @__PURE__ */ i(
               "input",
               {
-                id: x,
+                id: w,
                 type: X,
                 "data-slot": "input",
-                className: n(re({ size: p })),
-                ref: h,
+                className: l(re({ size: p })),
+                ref: g,
                 disabled: d,
                 onChange: q,
                 onBlur: y,
                 onInvalid: I,
-                "aria-invalid": A,
+                "aria-invalid": z,
                 "aria-describedby": Y,
                 required: E,
                 step: m === "number" ? "any" : void 0,
                 ...H
               }
             ),
-            w ? /* @__PURE__ */ u(
+            x ? /* @__PURE__ */ u(
               "button",
               {
                 type: "button",
-                onClick: (t) => {
-                  t.stopPropagation(), t.preventDefault(), J((s) => !s);
+                onClick: (s) => {
+                  s.stopPropagation(), s.preventDefault(), J((t) => !t);
                 },
-                className: n(
+                className: l(
                   "text-d-muted-foreground flex shrink-0 cursor-pointer items-center",
                   d && "cursor-not-allowed"
                 ),
                 "aria-label": c ? f.hide : f.show,
                 "aria-pressed": c,
-                "aria-controls": x,
+                "aria-controls": w,
                 title: c ? f.hide : f.show,
                 disabled: d,
                 children: [
                   /* @__PURE__ */ i(
-                    N,
+                    k,
                     {
                       name: c ? "EyeOff" : "Eye",
                       size: p === "lg" ? "sm" : "xs"
@@ -190,23 +191,23 @@ const te = R(
               }
             ) : (v || T) && /* @__PURE__ */ u("div", { className: "text-d-muted-foreground flex shrink-0 items-center gap-2", children: [
               T,
-              v && /* @__PURE__ */ i(N, { name: v, size: p === "lg" ? "sm" : "xs" })
+              v && /* @__PURE__ */ i(k, { name: v, size: p === "lg" ? "sm" : "xs" })
             ] })
           ]
         }
       ),
-      L && j.length > 0 && /* @__PURE__ */ i(
-        se,
+      B && U.length > 0 && /* @__PURE__ */ i(
+        te,
         {
           variant: "caption",
-          id: z,
-          role: g ? "status" : "alert",
+          id: j,
+          role: h ? "status" : "alert",
           "aria-live": "polite",
-          className: n(
+          className: l(
             "max-w-full min-w-0 text-wrap",
-            g ? "text-d-success" : "text-d-destructive"
+            h ? "text-d-success" : "text-d-destructive"
           ),
-          children: j
+          children: U
         }
       )
     ] });

package/dist/components/ui/textarea.js

@@ -1,28 +1,28 @@
 "use client";
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import { Label as c } from "./label.js";
-import { cn as i } from "../../lib/utils.js";
+import { cn as d } from "../../lib/utils.js";
 function b({
-  wrpClassName: d,
+  wrpClassName: i,
   className: o,
   label: e,
   labelClassName: a,
-  id: n,
-  ...s
+  id: s,
+  ...n
 }) {
-  const r = n || (e ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
-  return /* @__PURE__ */ l("div", { className: i("space-y-1.5", d), children: [
+  const r = s || (e ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
+  return /* @__PURE__ */ l("div", { className: d("space-y-1.5", i), children: [
     e && /* @__PURE__ */ t(c, { htmlFor: r, className: a, children: e }),
     /* @__PURE__ */ t(
       "textarea",
       {
         id: r,
         "data-slot": "textarea",
-        className: i(
-          "border-d-input placeholder:text-d-muted-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive !bg-d-input flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className: d(
+          "border-d-border/50 placeholder:text-d-muted-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive bg-d-input flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           o
         ),
-        ...s
+        ...n
       }
     )
   ] });

package/dist/index.d.ts

@@ -56,6 +56,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { UseAskResult } from 'use-ask';
 import { UseEmblaCarouselType } from 'embla-carousel-react';
+import { UseFormReturn } from 'react-hook-form';
 import { VariantProps } from 'class-variance-authority';
 
 declare type AcceptItem = "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "txt" | "csv" | "jpg" | "jpeg" | "png" | "gif" | "image" | "video" | "audio";
@@ -144,6 +145,32 @@ declare interface AppEditorProps {
 
 declare type AppEditorToolbar = "block-format" | "font-format" | "history";
 
+export declare const AppForm: ({ items, cols, form, submitText, onSubmit, isSubmitting, }: AppFormProps) => JSX.Element;
+
+declare interface AppFormItem {
+    label: string;
+    component: "input" | "select" | "textarea" | "checkbox" | "multiselect" | "datepicker" | "radio" | "switch" | "slider";
+    name: string;
+    defaultValue?: string | boolean | number | string[] | Date | number[];
+    options?: AppSelectOption[];
+    disabled?: boolean;
+    placeholder?: string;
+    caption?: string;
+    calendarRange?: [Date, Date];
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+declare interface AppFormProps {
+    cols?: "2" | "1" | "3";
+    items: AppFormItem[];
+    form: UseFormReturn<any>;
+    submitText?: string;
+    onSubmit?: (data: any) => void;
+    isSubmitting?: boolean;
+}
+
 /**
  * @deprecated This component is deprecated. Please use AppSelect component instead.
  */
@@ -1076,8 +1103,9 @@ export declare interface DatePickerProps {
 
 export declare function Dialog({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Root>): JSX.Element;
 
-export declare function DialogContent({ className, children, size, ...props }: React_2.ComponentProps<typeof DialogPrimitive.Content> & {
+export declare function DialogContent({ className, children, size, closeOnOverlay, ...props }: React_2.ComponentProps<typeof DialogPrimitive.Content> & {
     size?: "sm" | "default" | "lg" | "xl";
+    closeOnOverlay?: boolean;
 }): JSX.Element;
 
 export declare function DialogDescription({ className, ...props }: React_2.ComponentProps<typeof DialogPrimitive.Description>): JSX.Element;