laif-ds 0.2.48 → 0.2.50

package/dist/components/ui/button.js

@@ -1,16 +1,25 @@
 "use client";
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { Root as f } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as m } from "../../node_modules/class-variance-authority/dist/index.js";
-import { cn as l } from "../../lib/utils.js";
-import { Icon as c } from "./icon.js";
-const v = m(
-  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:ring-d-ring/50 focus-visible:ring-[3px] aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive transition-all duration-200 ease-out transform-gpu active:scale-[0.98] active:shadow-sm overflow-x-clip overflow-y-visible relative group  disabled:cursor-not-allowed disabled:opacity-50  [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-d-ring",
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { Root as m } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as h } from "../../node_modules/class-variance-authority/dist/index.js";
+import { designTokens as r } from "../../lib/design-tokens.js";
+import { cn as s } from "../../lib/utils.js";
+import { Icon as l } from "./icon.js";
+const v = h(
+  s(
+    r.text.base,
+    r.radius.default,
+    r.focusRing,
+    r.interaction.active,
+    r.interaction.disabled,
+    "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap overflow-hidden relative group",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0"
+  ),
   {
     variants: {
       variant: {
-        default: "bg-d-primary text-d-primary-foreground shadow-xs hover:bg-d-primary/90 hover:shadow-d-primary/25 [clip-path:inset(0_round_0.375rem)] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
-        destructive: "bg-d-destructive text-d-destructive-foreground shadow-xs hover:bg-d-destructive/90 hover:shadow-d-destructive/25 focus-visible:ring-d-destructive/20 [clip-path:inset(0_round_0.375rem)] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
+        default: "bg-d-primary text-d-primary-foreground shadow-xs hover:bg-d-primary/90 hover:shadow-d-primary/25 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
+        destructive: "bg-d-destructive text-d-destructive-foreground shadow-xs hover:bg-d-destructive/90 hover:shadow-d-destructive/25 focus-visible:ring-d-destructive/20 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
         outline: "border border-d-foreground shadow-xs disabled:border-d-foreground/30 hover:bg-d-accent hover:text-d-accent-foreground hover:border-d-foreground/80",
         "outline-primary": "border border-d-primary shadow-xs text-d-primary/80 hover:text-d-primary hover:bg-d-primary/10 hover:border-d-primary/80",
         "outline-destructive": "border border-d-destructive shadow-xs text-d-destructive/80 hover:text-d-destructive hover:bg-d-destructive/10 hover:border-d-destructive/80",
@@ -21,10 +30,10 @@ const v = m(
         link: "text-d-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
+        default: r.sizes.default + " has-[>svg]:px-3",
+        sm: r.sizes.sm + " has-[>svg]:px-2.5",
+        lg: r.sizes.lg + " has-[>svg]:px-4",
+        icon: r.sizes.icon.default
       }
     },
     defaultVariants: {
@@ -33,30 +42,30 @@ const v = m(
     }
   }
 );
-function w({
-  className: o,
-  variant: a,
+function N({
+  className: a,
+  variant: d,
   size: e,
-  asChild: d = !1,
-  iconLeft: s,
-  iconRight: n,
+  asChild: n = !1,
+  iconLeft: i,
+  iconRight: c,
   isLoading: b = !1,
-  ...t
+  ...o
 }) {
-  const i = d ? f : "button";
-  return d ? /* @__PURE__ */ r(
-    i,
+  const f = n ? m : "button";
+  return n ? /* @__PURE__ */ t(
+    f,
     {
       "data-slot": "button",
-      className: l(v({ variant: a, size: e, className: o })),
-      ...t
+      className: s(v({ variant: d, size: e, className: a })),
+      ...o
     }
-  ) : /* @__PURE__ */ u(
-    i,
+  ) : /* @__PURE__ */ t("div", { className: "realtive overflow-hidden", children: /* @__PURE__ */ u(
+    f,
     {
       "data-slot": "button",
-      className: l(v({ variant: a, size: e, className: o }), "relative"),
-      ...t,
+      className: s(v({ variant: d, size: e, className: a }), "relative"),
+      ...o,
       children: [
         b ? /* @__PURE__ */ u(
           "svg",
@@ -68,7 +77,7 @@ function w({
             width: e === "sm" ? 14 : e === "lg" ? 20 : 16,
             height: e === "sm" ? 14 : e === "lg" ? 20 : 16,
             children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ t(
                 "circle",
                 {
                   className: "opacity-25",
@@ -79,7 +88,7 @@ function w({
                   strokeWidth: "4"
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ t(
                 "path",
                 {
                   className: "opacity-75",
@@ -89,26 +98,26 @@ function w({
               )
             ]
           }
-        ) : s && /* @__PURE__ */ r(
-          c,
+        ) : i && /* @__PURE__ */ t(
+          l,
           {
-            name: s,
+            name: i,
             size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
           }
         ),
-        t.children,
-        n && /* @__PURE__ */ r(
-          c,
+        o.children,
+        c && /* @__PURE__ */ t(
+          l,
           {
-            name: n,
+            name: c,
             size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
           }
         )
       ]
     }
-  );
+  ) });
 }
 export {
-  w as Button,
+  N as Button,
   v as buttonVariants
 };

package/dist/components/ui/card.js

@@ -1,7 +1,8 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import * as n from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { designTokens as c } from "../../lib/design-tokens.js";
 import { cn as o } from "../../lib/utils.js";
+import * as n from "react";
 const s = n.createContext({
   size: "default"
 }), d = {
@@ -26,35 +27,42 @@ const s = n.createContext({
     gap: ""
   }
 };
-function l({ className: r, size: t = "default", ...a }) {
-  return /* @__PURE__ */ e(s.Provider, { value: { size: t }, children: /* @__PURE__ */ e(
+function x({ className: r, size: t = "default", ...e }) {
+  return /* @__PURE__ */ a(s.Provider, { value: { size: t }, children: /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "card",
       className: o(
-        `bg-d-card text-d-card-foreground border-d-border flex flex-col rounded-xl border shadow-sm ${d[t].py} ${d[t].gap}`,
+        `bg-d-card text-d-card-foreground border-d-border flex flex-col border shadow-sm ${d[t].py} ${d[t].gap}`,
+        c.radius.lg.replace("rounded-", "rounded-xl"),
+        // Card uses XL radius by default in shadcn usually, but here it was XL. Let's keep it XL or standard? The original was rounded-xl. designTokens.radius.lg is rounded-lg.
+        // Let's stick to original visual intent but maybe update designTokens to include XL if needed?
+        // For now, I will leave it as rounded-xl to not break the design, or use designTokens.radius.lg if we want to standardize.
+        // User asked to "standardize". Usually Cards have slightly larger radius than inputs.
+        // Let's use rounded-xl hardcoded for now as it is a "Container" not an input.
+        "rounded-xl",
         r
       ),
-      ...a
+      ...e
     }
   ) });
 }
-function u({ className: r, ...t }) {
-  const { size: a } = n.useContext(s);
-  return /* @__PURE__ */ e(
+function f({ className: r, ...t }) {
+  const { size: e } = n.useContext(s);
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "card-header",
       className: o(
-        `@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 ${d[a].px} has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 border-d-border`,
+        `@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 ${d[e].px} has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 border-d-border`,
         r
       ),
       ...t
     }
   );
 }
-function x({ className: r, ...t }) {
-  return /* @__PURE__ */ e(
+function m({ className: r, ...t }) {
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "card-title",
@@ -63,8 +71,8 @@ function x({ className: r, ...t }) {
     }
   );
 }
-function f({ className: r, ...t }) {
-  return /* @__PURE__ */ e(
+function g({ className: r, ...t }) {
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "card-description",
@@ -73,25 +81,25 @@ function f({ className: r, ...t }) {
     }
   );
 }
-function m({ className: r, ...t }) {
-  const { size: a } = n.useContext(s);
-  return /* @__PURE__ */ e(
+function b({ className: r, ...t }) {
+  const { size: e } = n.useContext(s);
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "card-content",
-      className: o(d[a].px, r),
+      className: o(d[e].px, r),
       ...t
     }
   );
 }
-function g({ className: r, ...t }) {
-  const { size: a } = n.useContext(s);
-  return /* @__PURE__ */ e(
+function C({ className: r, ...t }) {
+  const { size: e } = n.useContext(s);
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "card-footer",
       className: o(
-        `flex items-center ${d[a].px} [.border-t]:pt-6`,
+        `flex items-center ${d[e].px} [.border-t]:pt-6`,
         r
       ),
       ...t
@@ -99,10 +107,10 @@ function g({ className: r, ...t }) {
   );
 }
 export {
-  l as Card,
-  m as CardContent,
-  f as CardDescription,
-  g as CardFooter,
-  u as CardHeader,
-  x as CardTitle
+  x as Card,
+  b as CardContent,
+  g as CardDescription,
+  C as CardFooter,
+  f as CardHeader,
+  m as CardTitle
 };

package/dist/components/ui/checkbox.js

@@ -1,42 +1,45 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { Checkbox as t, CheckboxIndicator as a } from "../../node_modules/@radix-ui/react-checkbox/dist/index.js";
-import { cn as n } from "../../lib/utils.js";
-import s from "../../node_modules/lucide-react/dist/esm/icons/minus.js";
-import c from "../../node_modules/lucide-react/dist/esm/icons/check.js";
-function p({
-  className: o,
-  checked: d,
-  ...i
+import { Checkbox as a, CheckboxIndicator as n } from "../../node_modules/@radix-ui/react-checkbox/dist/index.js";
+import { designTokens as o } from "../../lib/design-tokens.js";
+import { cn as s } from "../../lib/utils.js";
+import c from "../../node_modules/lucide-react/dist/esm/icons/minus.js";
+import m from "../../node_modules/lucide-react/dist/esm/icons/check.js";
+function x({
+  className: i,
+  checked: t,
+  ...d
 }) {
-  const r = d === "indeterminate";
+  const r = t === "indeterminate";
   return /* @__PURE__ */ e(
-    t,
+    a,
     {
       "data-slot": "checkbox",
-      className: n(
-        "peer bg-d-input border-d-foreground size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs transition-shadow outline-none",
+      className: s(
+        "peer bg-d-input border-d-foreground size-4 shrink-0 cursor-pointer border shadow-xs transition-shadow outline-none",
+        o.radius.sm,
+        // Checkboxes usually have smaller radius
+        o.focusRing,
         "aria-invalid:border-d-destructive aria-invalid:ring-d-destructive/20",
-        "focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:ring-[3px]",
         "data-[state=checked]:bg-d-primary data-[state=checked]:border-d-primary data-[state=checked]:text-d-primary-foreground",
-        "disabled:data-[state=unchecked]:border-d-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        o.interaction.disabled,
         r && "bg-d-primary border-d-primary text-d-primary-foreground disabled:border-d-muted-foreground",
-        o
+        i
       ),
-      checked: r ? !1 : d,
-      ...i,
+      checked: r ? !1 : t,
+      ...d,
       children: /* @__PURE__ */ e(
-        a,
+        n,
         {
           "data-slot": "checkbox-indicator",
           className: "text-d-primary-foreground flex items-center justify-center transition-none",
           forceMount: r || void 0,
-          children: r ? /* @__PURE__ */ e(s, { className: "text-d-primary-foreground size-3.5" }) : /* @__PURE__ */ e(c, { className: "text-d-primary-foreground size-3.5" })
+          children: r ? /* @__PURE__ */ e(c, { className: "text-d-primary-foreground size-3.5" }) : /* @__PURE__ */ e(m, { className: "text-d-primary-foreground size-3.5" })
         }
       )
     }
   );
 }
 export {
-  p as Checkbox
+  x as Checkbox
 };

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

@@ -1,87 +1,92 @@
 "use client";
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { buttonVariants as N } from "./button.js";
-import { Calendar as k } from "./calendar.js";
-import { Icon as v } from "./icon.js";
-import { Popover as I, PopoverTrigger as E, PopoverContent as R } from "./popover.js";
-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 A } from "../../node_modules/date-fns/isSameDay.js";
-function X({
+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 { formatDate as d } from "../../node_modules/date-fns/format.js";
+import { isSameDay as q } from "../../node_modules/date-fns/isSameDay.js";
+function V({
   value: e,
-  onChange: c,
-  placeholder: b = "Seleziona data",
-  dateFormat: f = "dd/MM/yyyy",
-  className: y,
-  buttonVariant: j = "default",
-  disabled: t = !1,
-  size: i = "default",
+  onChange: p,
+  placeholder: y = "Seleziona data",
+  dateFormat: m = "dd/MM/yyyy",
+  className: j,
+  disabled: i = !1,
+  size: n = "default",
   firstDate: a,
-  lastDate: p,
-  availableDates: l,
-  locale: C = q,
-  initialCalendarMonth: u,
+  lastDate: l,
+  availableDates: u,
+  locale: C = R,
+  initialCalendarMonth: h,
   customCalendarProps: P
 }) {
-  const [r, h] = x.useState(e), [S, g] = x.useState(
-    u
-  ), w = (n) => {
-    h(n), n && g(n), c && c(n);
+  const [o, g] = b.useState(e), [S, x] = b.useState(
+    h
+  ), w = (s) => {
+    g(s), s && x(s), p && p(s);
   };
-  let s = [];
-  return a && s.push({ before: a }), p && s.push({ after: p }), l?.length && s.push(
-    (n) => !l.some(
-      (M) => A(M, n)
+  let f = [];
+  return a && f.push({ before: a }), l && f.push({ after: l }), u?.length && f.push(
+    (s) => !u.some(
+      (M) => q(M, s)
     )
-  ), t && (s = [!0]), V(() => {
-    h(r), g(r || u);
-  }, [r]), /* @__PURE__ */ d(I, { open: t ? !1 : void 0, children: [
-    /* @__PURE__ */ o(E, { asChild: !0, children: /* @__PURE__ */ o(
+  ), 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: T(
-          N({ variant: j, size: i }),
-          "border-d-border/50 text-d-foreground hover:border-d-ring focus-visible:border-d-ring focus-visible:ring-d-ring/50 ring-offset-background data-[placeholder]:text-d-muted-foreground flex items-center justify-between border !bg-transparent px-3 py-2 font-normal whitespace-nowrap focus-visible:outline-none [&>span]:line-clamp-1",
-          !r && "text-d-muted-foreground",
-          t && "cursor-not-allowed opacity-50",
-          y,
-          i === "sm" && "text-xs",
-          i === "lg" && "text-lg"
+        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": t,
+        "aria-disabled": i,
         role: "button",
-        tabIndex: t ? -1 : 0,
-        onClick: t ? void 0 : () => {
+        tabIndex: i ? -1 : 0,
+        onClick: i ? void 0 : () => {
         },
-        children: /* @__PURE__ */ d("div", { className: "flex w-full items-center justify-between gap-2", children: [
-          /* @__PURE__ */ o(
-            v,
+        children: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-between gap-2", children: [
+          /* @__PURE__ */ r(
+            k,
             {
               name: "Calendar",
-              size: i === "default" ? "md" : i === "sm" ? "xs" : "sm"
+              size: n === "default" ? "md" : n === "sm" ? "xs" : "sm"
             }
           ),
-          e && typeof e == "object" && "from" in e ? /* @__PURE__ */ d("span", { children: [
-            e.from && m(e.from, f),
+          e && typeof e == "object" && "from" in e ? /* @__PURE__ */ c("span", { children: [
+            e.from && d(e.from, m),
             e.from && e.to && " - ",
-            e.to && m(e.to, f)
-          ] }) : r ? /* @__PURE__ */ o("span", { children: m(r, f) }) : /* @__PURE__ */ o("span", { className: "text-d-muted-foreground", children: b })
+            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__ */ o(R, { className: "w-auto p-0", children: /* @__PURE__ */ o(
-      k,
+    /* @__PURE__ */ r(v, { className: "w-auto p-0", children: /* @__PURE__ */ r(
+      N,
       {
         ...P || {
           mode: "single",
-          selected: r,
+          selected: o,
           onSelect: w
         },
         autoFocus: !0,
-        disabled: s,
+        disabled: f,
         locale: C,
         defaultMonth: S
       }
@@ -89,5 +94,5 @@ function X({
   ] });
 }
 export {
-  X as DatePicker
+  V as DatePicker
 };