laif-ds 0.2.52 → 0.2.53

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

@@ -1,98 +1,108 @@
 "use client";
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { Calendar as N } from "./calendar.js";
-import { Icon as k } from "./icon.js";
-import { Popover as I, PopoverTrigger as T, PopoverContent as v } from "./popover.js";
-import { designTokens as t } from "../../lib/design-tokens.js";
-import { cn as z } from "../../lib/utils.js";
-import * as b from "react";
-import { useEffect as E } from "react";
-import { it as R } from "../../node_modules/date-fns/locale/it.js";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { Calendar as w } from "./calendar.js";
+import { Icon as E } from "./icon.js";
+import { Label as L } from "./label.js";
+import { Popover as q, PopoverTrigger as A, PopoverContent as B } from "./popover.js";
+import { designTokens as o } from "../../lib/design-tokens.js";
+import { cn as P } from "../../lib/utils.js";
+import * as c from "react";
+import { useEffect as F } from "react";
+import { it as G } from "../../node_modules/date-fns/locale/it.js";
 import { formatDate as d } from "../../node_modules/date-fns/format.js";
-import { isSameDay as q } from "../../node_modules/date-fns/isSameDay.js";
-function V({
+import { isSameDay as H } from "../../node_modules/date-fns/isSameDay.js";
+function v({
   value: e,
   onChange: p,
-  placeholder: y = "Seleziona data",
-  dateFormat: m = "dd/MM/yyyy",
-  className: j,
-  disabled: i = !1,
-  size: n = "default",
-  firstDate: a,
-  lastDate: l,
-  availableDates: u,
-  locale: C = R,
-  initialCalendarMonth: h,
-  customCalendarProps: P
+  placeholder: I = "Seleziona data",
+  dateFormat: a = "dd/MM/yyyy",
+  className: M,
+  disabled: n = !1,
+  size: m = "default",
+  firstDate: l,
+  lastDate: u,
+  availableDates: h,
+  locale: N = G,
+  initialCalendarMonth: g,
+  customCalendarProps: j,
+  label: x,
+  wrpClassName: k
 }) {
-  const [o, g] = b.useState(e), [S, x] = b.useState(
-    h
-  ), w = (s) => {
-    g(s), s && x(s), p && p(s);
+  const [r, y] = c.useState(e), [O, C] = c.useState(
+    g
+  ), [S, R] = c.useState(!1), z = (s) => {
+    y(s), s && C(s), p && p(s);
   };
-  let f = [];
-  return a && f.push({ before: a }), l && f.push({ after: l }), u?.length && f.push(
-    (s) => !u.some(
-      (M) => q(M, s)
+  let i = [];
+  l && i.push({ before: l }), u && i.push({ after: u }), h?.length && i.push(
+    (s) => !h.some(
+      (T) => H(T, s)
     )
-  ), i && (f = [!0]), E(() => {
-    g(o), x(o || h);
-  }, [o]), /* @__PURE__ */ c(I, { open: i ? !1 : void 0, children: [
-    /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
-      "div",
-      {
-        className: z(
-          t.input.base,
-          t.radius.default,
-          t.text.base,
-          t.interaction.disabled,
-          "flex items-center justify-between px-3 py-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
-          "focus-visible:ring-d-ring/50 focus-visible:border-d-ring outline-none focus-visible:ring-[3px]",
-          "hover:border-d-ring cursor-pointer transition-colors",
-          !o && "text-d-muted-foreground",
-          i && "cursor-not-allowed opacity-50",
-          n === "default" && t.sizes.default,
-          n === "sm" && t.sizes.sm,
-          n === "lg" && t.sizes.lg,
-          j
-        ),
-        "aria-disabled": i,
-        role: "button",
-        tabIndex: i ? -1 : 0,
-        onClick: i ? void 0 : () => {
-        },
-        children: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-between gap-2", children: [
-          /* @__PURE__ */ r(
-            k,
-            {
-              name: "Calendar",
-              size: n === "default" ? "md" : n === "sm" ? "xs" : "sm"
-            }
+  ), n && (i = [!0]), F(() => {
+    y(r), C(r || g);
+  }, [r]);
+  const b = c.useId();
+  return /* @__PURE__ */ f("div", { className: P("flex flex-col gap-1.5", k), children: [
+    x && /* @__PURE__ */ t(L, { htmlFor: b, children: x }),
+    /* @__PURE__ */ f(q, { open: n ? !1 : S, onOpenChange: R, children: [
+      /* @__PURE__ */ t(A, { asChild: !0, children: /* @__PURE__ */ f(
+        "div",
+        {
+          id: b,
+          className: P(
+            o.input.base,
+            o.radius.default,
+            o.text.base,
+            o.interaction.disabled,
+            "flex items-center gap-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
+            o.focusRing,
+            S && o.activeRing,
+            "hover:border-d-ring cursor-pointer transition-colors",
+            !r && "text-d-muted-foreground",
+            n && "cursor-not-allowed opacity-50",
+            m === "default" && o.sizes.default,
+            m === "sm" && o.sizes.sm,
+            m === "lg" && o.sizes.lg,
+            M
           ),
-          e && typeof e == "object" && "from" in e ? /* @__PURE__ */ c("span", { children: [
-            e.from && d(e.from, m),
-            e.from && e.to && " - ",
-            e.to && d(e.to, m)
-          ] }) : o ? /* @__PURE__ */ r("span", { children: d(o, m) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: y })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ r(v, { className: "w-auto p-0", children: /* @__PURE__ */ r(
-      N,
-      {
-        ...P || {
-          mode: "single",
-          selected: o,
-          onSelect: w
-        },
-        autoFocus: !0,
-        disabled: f,
-        locale: C,
-        defaultMonth: S
-      }
-    ) })
+          "aria-disabled": n,
+          role: "button",
+          tabIndex: n ? -1 : 0,
+          onClick: n ? void 0 : () => {
+          },
+          children: [
+            /* @__PURE__ */ t(
+              E,
+              {
+                name: "Calendar",
+                size: m === "lg" ? "sm" : "xs"
+              }
+            ),
+            /* @__PURE__ */ t("div", { children: e && typeof e == "object" && "from" in e ? /* @__PURE__ */ f("span", { children: [
+              e.from && d(e.from, a),
+              e.from && e.to && " - ",
+              e.to && d(e.to, a)
+            ] }) : r ? /* @__PURE__ */ t("span", { children: d(r, a) }) : /* @__PURE__ */ t("span", { className: "text-d-muted-foreground", children: I }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(B, { className: "w-auto p-0", children: /* @__PURE__ */ t(
+        w,
+        {
+          ...j || {
+            mode: "single",
+            selected: r,
+            onSelect: z
+          },
+          autoFocus: !0,
+          disabled: i,
+          locale: N,
+          defaultMonth: O
+        }
+      ) })
+    ] })
   ] });
 }
 export {
-  V as DatePicker
+  v as DatePicker
 };

package/dist/components/ui/input.js

@@ -1,19 +1,18 @@
 "use client";
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
 import { Label as se } from "./label.js";
 import { designTokens as o } from "../../lib/design-tokens.js";
-import { cn as l } from "../../lib/utils.js";
-import { cva as R } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn as n } from "../../lib/utils.js";
+import { cva as j } from "../../node_modules/class-variance-authority/dist/index.js";
 import * as a from "react";
 import { Icon as N } from "./icon.js";
 import { Typo as te } from "./typo.js";
-const ae = R(
-  l(
+const ae = j(
+  n(
     o.input.base,
     o.radius.default,
     "items-center gap-2 px-3",
-    // Focus states using the standard ring token but adapted for focus-within
-    "focus-within:ring-d-ring/50 focus-within:ring-[3px] focus-within:border-d-ring outline-none",
+    o.focusRingWithin,
     o.input.invalid
   ),
   {
@@ -28,8 +27,8 @@ const ae = R(
       size: "default"
     }
   }
-), re = R(
-  l(
+), re = j(
+  n(
     o.text.base,
     "shadow-none flex-1 min-w-0 bg-transparent outline-none border-0 p-0 overflow-hidden text-ellipsis",
     "file:text-d-foreground file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium",
@@ -43,7 +42,7 @@ const ae = R(
       size: {
         default: "file:h-7",
         sm: "text-xs file:h-6",
-        lg: "text-lg file:h-8"
+        lg: "text-base file:h-8"
       }
     },
     defaultVariants: {
@@ -55,7 +54,7 @@ const ae = R(
   hide: "Nascondi password"
 }, fe = a.forwardRef(
   ({
-    className: W,
+    className: A,
     type: p,
     label: T,
     labelClassName: D,
@@ -77,7 +76,7 @@ const ae = R(
     validityI18n: e,
     ...$
   }, J) => {
-    const [u, K] = a.useState(!1), [h, k] = a.useState(!0), [Q, L] = a.useState(!1), [U, V] = a.useState(""), X = a.useId(), w = G ?? X, j = `${w}-validity`, x = a.useRef(null), b = p === "password", Y = b ? u ? "text" : "password" : p, A = F ?? (!h && Q ? !0 : void 0), Z = [H, B && j].filter(Boolean).join(" ").trim() || void 0;
+    const [u, K] = a.useState(!1), [h, k] = a.useState(!0), [Q, L] = a.useState(!1), [U, V] = a.useState(""), X = a.useId(), w = G ?? X, R = `${w}-validity`, x = a.useRef(null), b = p === "password", Y = b ? u ? "text" : "password" : p, W = F ?? (!h && Q ? !0 : void 0), Z = [H, B && R].filter(Boolean).join(" ").trim() || void 0;
     a.useImperativeHandle(J, () => x.current);
     const q = a.useCallback(
       (t) => {
@@ -128,39 +127,39 @@ const ae = R(
       },
       [z, c]
     );
-    return /* @__PURE__ */ f("div", { className: l("flex flex-col gap-1.5", W), children: [
-      T && /* @__PURE__ */ f(se, { htmlFor: w, className: l("gap-0.5", D), children: [
+    return /* @__PURE__ */ f("div", { className: n("flex flex-col gap-1.5", A), children: [
+      T && /* @__PURE__ */ f(se, { htmlFor: w, className: n("gap-0.5", D), children: [
         T,
-        C && h && /* @__PURE__ */ n("div", { children: "*" }),
-        !h && /* @__PURE__ */ n("div", { className: "text-d-destructive", children: "*" })
+        C && h && /* @__PURE__ */ l("div", { children: "*" }),
+        !h && /* @__PURE__ */ l("div", { className: "text-d-destructive", children: "*" })
       ] }),
       /* @__PURE__ */ f(
         "div",
         {
-          className: l(
+          className: n(
             ae({ size: g }),
             d ? "cursor-not-allowed opacity-50" : "cursor-text"
           ),
-          "aria-invalid": A,
+          "aria-invalid": W,
           onClick: q,
           children: [
             (v || S) && /* @__PURE__ */ f("div", { className: "text-d-muted-foreground flex shrink-0 items-center gap-2", children: [
-              v && /* @__PURE__ */ n(N, { name: v, size: g === "lg" ? "sm" : "xs" }),
+              v && /* @__PURE__ */ l(N, { name: v, size: g === "lg" ? "sm" : "xs" }),
               S
             ] }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ l(
               "input",
               {
                 id: w,
                 type: Y,
                 "data-slot": "input",
-                className: l(re({ size: g })),
+                className: n(re({ size: g })),
                 ref: x,
                 disabled: d,
                 onChange: y,
                 onBlur: I,
                 onInvalid: ee,
-                "aria-invalid": A,
+                "aria-invalid": W,
                 "aria-describedby": Z,
                 required: C,
                 step: p === "number" ? "any" : void 0,
@@ -174,7 +173,7 @@ const ae = R(
                 onClick: (t) => {
                   t.stopPropagation(), t.preventDefault(), K((s) => !s);
                 },
-                className: l(
+                className: n(
                   "text-d-muted-foreground flex shrink-0 cursor-pointer items-center",
                   d && "cursor-not-allowed"
                 ),
@@ -184,31 +183,31 @@ const ae = R(
                 title: u ? m.hide : m.show,
                 disabled: d,
                 children: [
-                  /* @__PURE__ */ n(
+                  /* @__PURE__ */ l(
                     N,
                     {
                       name: u ? "EyeOff" : "Eye",
                       size: g === "lg" ? "sm" : "xs"
                     }
                   ),
-                  /* @__PURE__ */ n("span", { className: "sr-only", children: u ? m.hide : m.show })
+                  /* @__PURE__ */ l("span", { className: "sr-only", children: u ? m.hide : m.show })
                 ]
               }
             ) : (M || E) && /* @__PURE__ */ f("div", { className: "text-d-muted-foreground flex shrink-0 items-center gap-2", children: [
               E,
-              M && /* @__PURE__ */ n(N, { name: M, size: g === "lg" ? "sm" : "xs" })
+              M && /* @__PURE__ */ l(N, { name: M, size: g === "lg" ? "sm" : "xs" })
             ] })
           ]
         }
       ),
-      B && U.length > 0 && /* @__PURE__ */ n(
+      B && U.length > 0 && /* @__PURE__ */ l(
         te,
         {
           variant: "caption",
-          id: j,
+          id: R,
           role: h ? "status" : "alert",
           "aria-live": "polite",
-          className: l(
+          className: n(
             "max-w-full min-w-0 text-wrap",
             h ? "text-d-success" : "text-d-destructive"
           ),

package/dist/index.d.ts

@@ -1421,7 +1421,7 @@ export declare interface DataTableState {
     computedSorting?: DataTableSorting;
 }
 
-export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, label, wrpClassName, }: DatePickerProps): JSX.Element;
 
 export declare interface DatePickerProps {
     value?: Date;
@@ -1438,6 +1438,8 @@ export declare interface DatePickerProps {
     locale?: Partial<Locale>;
     initialCalendarMonth?: Date;
     customCalendarProps?: React_2.ComponentProps<typeof Calendar>;
+    label?: string | React_2.ReactNode;
+    wrpClassName?: string;
 }
 
 /**

package/dist/lib/design-tokens.js

@@ -2,6 +2,8 @@
 const e = {
   // Interaction states
   focusRing: "focus-visible:ring-d-ring/50 focus-visible:ring-[3px] focus-visible:border-d-ring outline-none transition-all duration-200",
+  focusRingWithin: "focus-within:ring-d-ring/50 focus-within:ring-[3px] focus-within:border-d-ring outline-none transition-all duration-200",
+  activeRing: "ring-d-ring/50 ring-[3px] border-d-ring",
   // Base shapes
   radius: {
     default: "rounded-md",
@@ -11,7 +13,7 @@ const e = {
   },
   // Input & Button heights/paddings
   sizes: {
-    default: "h-9 px-3 py-2",
+    default: "h-9 px-3 py-2 text-sm",
     sm: "h-8 px-2.5 py-1.5 text-xs",
     lg: "h-10 px-4 py-2 text-base",
     icon: {