laif-ds 0.2.19 → 0.2.21

package/dist/components/ui/file-uploader.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsxs as I, jsx as r, Fragment as L } from "react/jsx-runtime";
+import { jsxs as v, jsx as r, Fragment as L } from "react/jsx-runtime";
 import c from "react";
-import { FilePreview as C } from "./file-preview.js";
-import { Card as A, CardHeader as S, CardTitle as B, CardContent as P } from "./card.js";
-import { Icon as _ } from "./icon.js";
-import { Input as W } from "./input.js";
-const H = {
+import { Button as A } from "./button.js";
+import { Card as B, CardHeader as S, CardTitle as P, CardContent as _ } from "./card.js";
+import { FilePreview as M } from "./file-preview.js";
+import { Icon as W } from "./icon.js";
+import { Input as H } from "./input.js";
+const K = {
   pdf: "application/pdf",
   doc: ".doc",
   docx: ".docx",
@@ -22,141 +23,153 @@ const H = {
   image: "image/*",
   video: "video/*",
   audio: "audio/*"
-}, $ = (p) => Math.ceil(p / (1024 * 1024)), Q = ({
-  accept: p,
-  extensions: y = ["pdf", "image", "video", "audio"],
-  multiple: d = !1,
-  onUpload: v,
-  description: b = "Trascina un file o clicca per selezionare",
-  formatDescription: N = "Formato accettato: PDF, Immagini, Video, Audio",
-  selectedLabel: m = "File selezionati",
-  maxTotalSize: n,
-  maxFiles: g
+}, $ = (g) => Math.ceil(g / (1024 * 1024)), X = ({
+  extensions: g = ["pdf", "image", "video", "audio"],
+  multiple: f = !1,
+  onUpload: b,
+  description: y = "Trascina un file o clicca per selezionare",
+  formatDescription: w = "Formato accettato: PDF, Immagini, Video, Audio",
+  selectedLabel: N = "File selezionati",
+  maxTotalSize: l,
+  removeAllLabel: a = "rimuovi tutto",
+  maxFiles: x
 }) => {
-  const f = p ?? y.map((e) => H[e]).join(","), [o, x] = c.useState([]), [w, D] = c.useState(""), a = (e) => {
-    const i = Array.from(e).filter(
-      (s) => f.split(",").some((t) => (t = t.trim(), s.type.startsWith(t.replace("/*", "")) || s.name.toLowerCase().endsWith(t.replace("*", ""))))
+  const u = g.map((e) => K[e]).join(","), [n, p] = c.useState([]), [D, I] = c.useState(""), i = (e) => {
+    const s = Array.from(e).filter(
+      (o) => u.split(",").some((t) => (t = t.trim(), o.type.startsWith(t.replace("/*", "")) || o.name.toLowerCase().endsWith(t.replace("*", ""))))
     );
-    let l = [];
-    const u = [];
-    if (d) {
-      let s = i;
-      if (typeof g == "number") {
-        const t = Math.max(g - o.length, 0);
-        t < i.length && (s = i.slice(0, t), u.push(`Max ${g} file`));
+    let d = [];
+    const m = [];
+    if (f) {
+      let o = s;
+      if (typeof x == "number") {
+        const t = Math.max(x - n.length, 0);
+        t < s.length && (o = s.slice(0, t), m.push(`Max ${x} file`));
       }
-      if (typeof n == "number") {
-        const t = n;
-        let M = o.reduce((h, E) => h + (E.size || 0), 0);
-        const j = [];
-        let z = !1;
-        for (const h of s)
-          M + (h.size || 0) <= t ? (j.push(h), M += h.size || 0) : z || (u.push(`Max ${$(t)} MB`), z = !0);
-        s = j;
+      if (typeof l == "number") {
+        const t = l;
+        let z = n.reduce((h, E) => h + (E.size || 0), 0);
+        const C = [];
+        let F = !1;
+        for (const h of o)
+          z + (h.size || 0) <= t ? (C.push(h), z += h.size || 0) : F || (m.push(`Max ${$(t)} MB`), F = !0);
+        o = C;
       }
-      l = [...o, ...s];
+      d = [...n, ...o];
     } else {
-      const s = i[0] ? [i[0]] : [];
-      if (typeof n == "number" && s[0]) {
-        const t = n;
-        (s[0].size || 0) > t ? (u.push(`Max ${$(t)} MB`), l = o) : l = s;
+      const o = s[0] ? [s[0]] : [];
+      if (typeof l == "number" && o[0]) {
+        const t = l;
+        (o[0].size || 0) > t ? (m.push(`Max ${$(t)} MB`), d = n) : d = o;
       } else
-        l = s;
+        d = o;
     }
-    x(l), D(u.join(" • ")), v?.(l);
-  }, R = (e) => {
-    e.target.files && a(e.target.files), e.target.value = "";
+    p(d), I(m.join(" • ")), b?.(d);
   }, k = (e) => {
-    e.preventDefault(), a(e.dataTransfer.files);
-  }, F = (e) => {
-    const i = o.filter((l, u) => u !== e);
-    x(i), D(""), v?.(i);
+    e.target.files && i(e.target.files), e.target.value = "";
+  }, R = (e) => {
+    e.preventDefault(), i(e.dataTransfer.files);
+  }, j = (e) => {
+    const s = n.filter((d, m) => m !== e);
+    p(s), I(""), b?.(s);
   };
-  return /* @__PURE__ */ I("div", { className: "mx-auto w-full space-y-4", children: [
-    (d || o.length === 0) && /* @__PURE__ */ r(
-      K,
+  return /* @__PURE__ */ v("div", { className: "mx-auto w-full space-y-4", children: [
+    (f || n.length === 0) && /* @__PURE__ */ r(
+      O,
       {
-        accept: f,
-        multiple: d,
-        onDrop: k,
-        onChange: R,
-        description: b,
-        formatDescription: N,
-        errorCaption: w
+        accept: u,
+        multiple: f,
+        onDrop: R,
+        onChange: k,
+        description: y,
+        formatDescription: w,
+        errorCaption: D
       }
     ),
-    o.length > 0 && /* @__PURE__ */ r(L, { children: /* @__PURE__ */ I(A, { size: "sm", className: "shadow-none", children: [
-      /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(B, { children: m }) }),
-      /* @__PURE__ */ r(P, { children: d ? /* @__PURE__ */ r("div", { className: "flex flex-nowrap gap-2 overflow-x-auto py-2", children: o.map((e, i) => /* @__PURE__ */ r(
-        C,
+    n.length > 0 && /* @__PURE__ */ r(L, { children: /* @__PURE__ */ v(B, { size: "sm", className: "shadow-none", children: [
+      /* @__PURE__ */ v(S, { className: "flex justify-between", children: [
+        /* @__PURE__ */ r(P, { children: N }),
+        /* @__PURE__ */ r(
+          A,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: "text-xs",
+            onClick: () => p([]),
+            children: a
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(_, { children: f ? /* @__PURE__ */ r("div", { className: "flex flex-nowrap gap-2 overflow-x-auto py-2", children: n.map((e, s) => /* @__PURE__ */ r(
+        M,
         {
           file: e,
-          onRemove: () => F(i)
+          onRemove: () => j(s)
         },
-        e.name + i
-      )) }) : /* @__PURE__ */ r(C, { file: o[0], onRemove: () => F(0) }) })
+        e.name + s
+      )) }) : /* @__PURE__ */ r(M, { file: n[0], onRemove: () => j(0) }) })
     ] }) })
   ] });
-}, K = ({
-  accept: p,
-  multiple: y,
-  onDrop: d,
-  onChange: v,
-  description: b,
+}, O = ({
+  accept: g,
+  multiple: f,
+  onDrop: b,
+  onChange: y,
+  description: w,
   formatDescription: N,
-  errorCaption: m
+  errorCaption: l
 }) => {
-  const n = c.useRef(null), [g, f] = c.useState(!1), o = c.useId(), x = c.useId(), w = c.useId(), D = c.useId();
-  return /* @__PURE__ */ I(
+  const a = c.useRef(null), [x, u] = c.useState(!1), n = c.useId(), p = c.useId(), D = c.useId(), I = c.useId();
+  return /* @__PURE__ */ v(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      "aria-label": b || "Seleziona file",
-      "aria-describedby": `${o} ${x}${m ? ` ${w}` : ""}`,
-      onKeyDown: (a) => {
-        (a.key === "Enter" || a.key === " ") && (a.preventDefault(), n.current && (n.current.value = "", n.current.click()));
+      "aria-label": w || "Seleziona file",
+      "aria-describedby": `${n} ${p}${l ? ` ${D}` : ""}`,
+      onKeyDown: (i) => {
+        (i.key === "Enter" || i.key === " ") && (i.preventDefault(), a.current && (a.current.value = "", a.current.click()));
       },
       onClick: () => {
-        n.current && (n.current.value = "", n.current.click());
+        a.current && (a.current.value = "", a.current.click());
       },
-      onDragEnter: () => f(!0),
-      onDragOver: (a) => a.preventDefault(),
-      onDragLeave: () => f(!1),
-      onDrop: (a) => {
-        f(!1), d(a);
+      onDragEnter: () => u(!0),
+      onDragOver: (i) => i.preventDefault(),
+      onDragLeave: () => u(!1),
+      onDrop: (i) => {
+        u(!1), b(i);
       },
-      className: `border-d-border flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed px-4 py-8 ${g ? "bg-muted/40" : ""}`,
+      className: `border-d-border flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed px-4 py-8 ${x ? "bg-muted/40" : ""}`,
       children: [
         /* @__PURE__ */ r(
-          _,
+          W,
           {
             name: "ArrowUpFromLine",
             className: "text-d-muted-foreground h-10 w-10"
           }
         ),
-        /* @__PURE__ */ I("div", { className: "max-w-xs text-center", children: [
-          /* @__PURE__ */ r("p", { id: o, className: "text-d-muted-foreground text-sm font-medium", children: b }),
+        /* @__PURE__ */ v("div", { className: "max-w-xs text-center", children: [
+          /* @__PURE__ */ r("p", { id: n, className: "text-d-muted-foreground text-sm font-medium", children: w }),
           /* @__PURE__ */ r(
             "p",
             {
-              id: x,
+              id: p,
               className: "text-d-muted-foreground text-muted-foreground mt-1 text-xs",
               children: N
             }
           ),
-          m ? /* @__PURE__ */ r("p", { id: w, className: "mt-2 text-xs font-medium text-red-600", children: m }) : null
+          l ? /* @__PURE__ */ r("p", { id: D, className: "mt-2 text-xs font-medium text-red-600", children: l }) : null
         ] }),
         /* @__PURE__ */ r(
-          W,
+          H,
           {
-            ref: n,
-            id: D,
+            ref: a,
+            id: I,
             type: "file",
             className: "hidden",
-            accept: p,
-            multiple: y,
-            onChange: v
+            accept: g,
+            multiple: f,
+            onChange: y
           }
         )
       ]
@@ -164,5 +177,5 @@ const H = {
   );
 };
 export {
-  Q as FileUploader
+  X as FileUploader
 };

package/dist/components/ui/stepper.js

@@ -0,0 +1,387 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { cn as d } from "../../lib/utils.js";
+import { cva as g } from "../../node_modules/class-variance-authority/dist/index.js";
+import * as p from "react";
+import { createContext as T, useContext as P } from "react";
+const E = T(
+  void 0
+), L = T(
+  void 0
+), R = g("w-full max-w-6xl", {
+  variants: {
+    orientation: {
+      horizontal: "flex flex-row items-center",
+      vertical: "flex flex-col items-start"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), O = g("group/step relative", {
+  variants: {
+    orientation: {
+      horizontal: "flex flex-row items-center justify-center not-last:flex-1",
+      vertical: "flex flex-col items-start justify-start"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), F = g(
+  "focus-visible:ring-ring/50 focus-visible:border-d-ring inline-flex cursor-pointer items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-60",
+  {
+    variants: {
+      size: {
+        sm: "gap-2",
+        default: "gap-3",
+        lg: "gap-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), K = g(
+  "border-secondary bg-secondary text-bodyPrimary data-[state=active]:bg-d-primary data-[state=completed]:bg-d-primary data-[state=active]:text-bodyPrimary data-[state=completed]:text-onAccent relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "size-5 text-xs",
+        default: "size-6 text-xs",
+        lg: "size-8 text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), $ = g("bg-secondary m-0.5 rounded-full", {
+  variants: {
+    orientation: {
+      horizontal: "h-0.5 flex-1",
+      vertical: "h-12 w-0.5"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), H = g("text-sm leading-none font-medium", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), U = g("inline-flex", {
+  variants: {
+    orientation: {
+      horizontal: "w-full flex-row",
+      vertical: "flex-col"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+function x() {
+  const t = P(E);
+  if (!t) throw new Error("useStepper must be used within a Stepper");
+  return t;
+}
+function I() {
+  const t = P(L);
+  if (!t) throw new Error("useStepItem must be used within a StepperItem");
+  return t;
+}
+function M({
+  defaultValue: t = 1,
+  value: a,
+  onValueChange: n,
+  orientation: e = "horizontal",
+  className: i,
+  children: r,
+  indicators: S = {},
+  ...y
+}) {
+  const [f, b] = p.useState(t), [o, h] = p.useState(
+    []
+  ), z = p.useCallback(
+    (s) => {
+      h((l) => s && !l.includes(s) ? [...l, s] : !s && l.includes(s) ? l.filter((w) => w !== s) : l);
+    },
+    []
+  ), N = p.useCallback(
+    (s) => {
+      a === void 0 && b(s), n?.(s);
+    },
+    [a, n]
+  ), V = a ?? f, m = (s) => {
+    o[s] && o[s].focus();
+  }, A = (s) => m((s + 1) % o.length), v = (s) => m((s - 1 + o.length) % o.length), C = () => m(0), k = () => m(o.length - 1), D = p.useMemo(
+    () => ({
+      activeStep: V,
+      setActiveStep: N,
+      stepsCount: p.Children.toArray(r).filter(
+        (s) => p.isValidElement(s) && s.type.displayName === "StepperItem"
+      ).length,
+      orientation: e,
+      registerTrigger: z,
+      focusNext: A,
+      focusPrev: v,
+      focusFirst: C,
+      focusLast: k,
+      triggerNodes: o,
+      indicators: S
+    }),
+    [
+      V,
+      N,
+      r,
+      e,
+      z,
+      o
+    ]
+  );
+  return /* @__PURE__ */ c(E.Provider, { value: D, children: /* @__PURE__ */ c(
+    "div",
+    {
+      role: "tablist",
+      "aria-orientation": e,
+      "data-slot": "stepper",
+      className: d(R({ orientation: e }), i),
+      "data-orientation": e,
+      ...y,
+      children: r
+    }
+  ) });
+}
+function Q({
+  step: t,
+  completed: a = !1,
+  disabled: n = !1,
+  loading: e = !1,
+  orientation: i,
+  className: r,
+  children: S,
+  ...y
+}) {
+  const { activeStep: f, orientation: b } = x(), o = a || t < f ? "completed" : f === t ? "active" : "inactive", h = e && t === f;
+  return /* @__PURE__ */ c(
+    L.Provider,
+    {
+      value: { step: t, state: o, isDisabled: n, isLoading: h },
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          "data-slot": "stepper-item",
+          className: d(
+            O({
+              orientation: i || b
+            }),
+            r
+          ),
+          "data-state": o,
+          ...h ? { "data-loading": !0 } : {},
+          ...y,
+          children: S
+        }
+      )
+    }
+  );
+}
+function W({
+  asChild: t = !1,
+  size: a,
+  className: n,
+  children: e,
+  tabIndex: i,
+  ...r
+}) {
+  const { state: S, isLoading: y } = I(), f = x(), {
+    setActiveStep: b,
+    activeStep: o,
+    registerTrigger: h,
+    triggerNodes: z,
+    focusNext: N,
+    focusPrev: V,
+    focusFirst: m,
+    focusLast: A
+  } = f, { step: v, isDisabled: C } = I(), k = o === v, D = `stepper-tab-${v}`, s = `stepper-panel-${v}`, l = p.useRef(null);
+  p.useEffect(() => {
+    l.current && h(l.current);
+  }, [l.current]);
+  const w = p.useMemo(
+    () => z.findIndex((u) => u === l.current),
+    [z, l.current]
+  ), j = (u) => {
+    switch (u.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        u.preventDefault(), w !== -1 && N && N(w);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        u.preventDefault(), w !== -1 && V && V(w);
+        break;
+      case "Home":
+        u.preventDefault(), m && m();
+        break;
+      case "End":
+        u.preventDefault(), A && A();
+        break;
+      case "Enter":
+      case " ":
+        u.preventDefault(), b(v);
+        break;
+    }
+  };
+  return t ? /* @__PURE__ */ c(
+    "span",
+    {
+      "data-slot": "stepper-trigger",
+      "data-state": S,
+      className: n,
+      children: e
+    }
+  ) : /* @__PURE__ */ c(
+    "button",
+    {
+      ref: l,
+      role: "tab",
+      id: D,
+      "aria-selected": k,
+      "aria-controls": s,
+      tabIndex: typeof i == "number" ? i : k ? 0 : -1,
+      "data-slot": "stepper-trigger",
+      "data-state": S,
+      "data-loading": y,
+      className: d(F({ size: a }), n),
+      onClick: () => b(v),
+      onKeyDown: j,
+      disabled: C,
+      ...r,
+      children: e
+    }
+  );
+}
+function X({
+  children: t,
+  size: a,
+  className: n
+}) {
+  const { state: e, isLoading: i } = I(), { indicators: r } = x();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-indicator",
+      "data-state": e,
+      className: d(K({ size: a }), n),
+      children: /* @__PURE__ */ c("div", { className: "absolute", children: r && (i && r.loading || e === "completed" && r.completed || e === "active" && r.active || e === "inactive" && r.inactive) ? i && r.loading || e === "completed" && r.completed || e === "active" && r.active || e === "inactive" && r.inactive : t })
+    }
+  );
+}
+function Y({
+  orientation: t,
+  className: a
+}) {
+  const { state: n } = I(), { orientation: e } = x();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-separator",
+      "data-state": n,
+      className: d(
+        $({
+          orientation: t || e
+        }),
+        a
+      )
+    }
+  );
+}
+function Z({
+  children: t,
+  size: a,
+  className: n
+}) {
+  const { state: e } = I();
+  return /* @__PURE__ */ c(
+    "h3",
+    {
+      "data-slot": "stepper-title",
+      "data-state": e,
+      className: d(H({ size: a }), n),
+      children: t
+    }
+  );
+}
+function _({
+  children: t,
+  orientation: a,
+  className: n
+}) {
+  const { activeStep: e, orientation: i } = x();
+  return /* @__PURE__ */ c(
+    "nav",
+    {
+      "data-slot": "stepper-nav",
+      "data-state": e,
+      "data-orientation": a || i,
+      className: d(
+        U({
+          orientation: a || i
+        }),
+        n
+      ),
+      children: t
+    }
+  );
+}
+function tt({ children: t, className: a }) {
+  const { activeStep: n } = x();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-panel",
+      "data-state": n,
+      className: d("w-full", a),
+      children: t
+    }
+  );
+}
+function et({
+  value: t,
+  forceMount: a,
+  children: n,
+  className: e
+}) {
+  const { activeStep: i } = x(), r = t === i;
+  return !a && !r ? null : /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-content",
+      "data-state": i,
+      className: d("w-full", e, !r && a && "hidden"),
+      hidden: !r && a,
+      children: n
+    }
+  );
+}
+export {
+  M as Stepper,
+  et as StepperContent,
+  X as StepperIndicator,
+  Q as StepperItem,
+  _ as StepperNav,
+  tt as StepperPanel,
+  Y as StepperSeparator,
+  Z as StepperTitle,
+  W as StepperTrigger,
+  I as useStepItem,
+  x as useStepper
+};