@yuno-payments/dashboard-design-system 0.0.164 → 0.0.166

package/dist/components/atoms/alert/alert.d.ts

@@ -1,6 +1,6 @@
 import { Alert as ShadcnAlert } from '../../../vendor/shadcn/alert';
 import { ComponentProps } from 'react';
-import { IconName } from '../icon';
+import { Icon, IconName } from '../icon';
 /**
  * Props for the Alert component
  */
@@ -17,6 +17,10 @@ interface AlertProps extends Omit<ComponentProps<typeof ShadcnAlert>, "children"
      * Alert description/body text
      */
     description?: string;
+    /**
+     * Props for the icon component
+     */
+    iconProps?: ComponentProps<typeof Icon>;
 }
 /**
  * Alert component for displaying informational, success, warning, or error messages.

package/dist/components/atoms/alert/alert.js

@@ -1,15 +1,16 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { Alert as l, AlertTitle as i, AlertDescription as a } from "../../../vendor/shadcn/alert.js";
+import { Alert as a, AlertTitle as i, AlertDescription as f } from "../../../vendor/shadcn/alert.js";
 import { forwardRef as n } from "react";
 import { Icon as p } from "../icon/icon.js";
-const x = n(
-  ({ icon: e, title: s, description: t, ...m }, o) => /* @__PURE__ */ r.jsxs(l, { ref: o, ...m, children: [
-    e && /* @__PURE__ */ r.jsx(p, { name: e, className: "size-4" }),
-    s && /* @__PURE__ */ r.jsx(i, { children: s }),
-    t && /* @__PURE__ */ r.jsx(a, { children: t })
+import { cn as x } from "../../../lib/utils.js";
+const c = n(
+  ({ icon: e, title: m, description: s, iconProps: t, ...l }, o) => /* @__PURE__ */ r.jsxs(a, { ref: o, ...l, children: [
+    e && /* @__PURE__ */ r.jsx(p, { name: e, className: x("size-4", t?.className), ...t }),
+    m && /* @__PURE__ */ r.jsx(i, { children: m }),
+    s && /* @__PURE__ */ r.jsx(f, { children: s })
   ] })
 );
-x.displayName = "Alert";
+c.displayName = "Alert";
 export {
-  x as Alert
+  c as Alert
 };

package/dist/components/atoms/multi-values-field/multi-values-field.js

@@ -1,134 +1,158 @@
-import { j as n } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as q, useId as z, useState as g } from "react";
-import { cn as b } from "../../../lib/utils.js";
-import { Field as G, FieldLabel as H, FieldDescription as J, FieldError as O } from "../../../vendor/shadcn/field.js";
-import { Badge as Q } from "../badge/badge.js";
-import { Icon as U } from "../icon/icon.js";
-const W = q(
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as O, useId as Q, useState as b } from "react";
+import { cn as y } from "../../../lib/utils.js";
+import { Field as U, FieldLabel as W, FieldDescription as Y, FieldError as Z } from "../../../vendor/shadcn/field.js";
+import { Badge as E } from "../badge/badge.js";
+import { Icon as _ } from "../icon/icon.js";
+const A = O(
   ({
     value: t = [],
-    onChange: c,
-    label: y,
-    description: u,
-    error: w,
-    placeholder: F = "Type and press Enter...",
-    disabled: p = !1,
-    id: D,
+    onChange: p,
+    label: w,
+    description: f,
+    error: k,
+    placeholder: v = "Type and press Enter...",
+    disabled: l = !1,
+    id: C,
     name: V,
-    triggerKeys: s = ["Enter", "Tab", "Comma", "Space"],
+    triggerKeys: c = ["Enter", "Tab", "Comma", "Space"],
     addOnBlur: B = !0,
-    allowDuplicates: v = !1,
-    maxItems: f,
-    validate: k,
-    badgeVariant: I = "outline",
-    orientation: N = "vertical",
-    className: $
-  }, C) => {
-    const T = z(), o = D || T, m = !!w, [x, j] = g(""), [R, E] = g(!1), [h, l] = g(""), i = (e) => {
-      const r = e.trim();
-      if (r !== "") {
-        if (f && t.length >= f) {
-          l(`Maximum ${f} items allowed`);
+    allowDuplicates: I = !1,
+    maxItems: m,
+    validate: j,
+    badgeVariant: N = "outline",
+    orientation: $ = "vertical",
+    className: T,
+    deleteAll: a
+  }, R) => {
+    const M = Q(), o = C || M, h = !!k, [x, D] = b(""), [S, F] = b(!1), [g, i] = b(""), s = (e) => {
+      const n = e.trim();
+      if (n !== "") {
+        if (m && t.length >= m) {
+          i(`Maximum ${m} items allowed`);
           return;
         }
-        if (!v && t.includes(r)) {
-          l("Duplicate values are not allowed");
+        if (!I && t.includes(n)) {
+          i("Duplicate values are not allowed");
           return;
         }
-        if (k) {
-          const a = k(r);
-          if (a !== !0) {
-            l(
-              typeof a == "string" ? a : "Invalid value"
+        if (j) {
+          const d = j(n);
+          if (d !== !0) {
+            i(
+              typeof d == "string" ? d : "Invalid value"
             );
             return;
           }
         }
-        l(""), c([...t, r]), j("");
+        i(""), p([...t, n]), D("");
       }
-    }, M = (e) => {
-      c(t.filter((r) => r !== e)), l("");
-    }, S = (e) => {
-      const r = e.currentTarget.value;
-      e.key === "Enter" && s.includes("Enter") ? (e.preventDefault(), i(r)) : e.key === "Tab" && s.includes("Tab") ? r.trim() !== "" && (e.preventDefault(), i(r)) : (e.key === "," || e.key === ",") && s.includes("Comma") || e.key === " " && s.includes("Space") ? (e.preventDefault(), i(r)) : e.key === "Backspace" && r === "" && t.length > 0 && c(t.slice(0, -1));
-    }, A = (e) => {
-      j(e.target.value), l("");
-    }, L = () => {
-      E(!0);
-    }, P = () => {
-      E(!1), B && x.trim() !== "" && i(x);
-    }, X = (e, r) => {
-      e.preventDefault(), e.stopPropagation(), M(r);
-    }, d = w || h;
-    return /* @__PURE__ */ n.jsxs(
-      G,
+    }, P = (e) => {
+      p(t.filter((n) => n !== e)), i("");
+    }, L = (e) => {
+      const n = e.currentTarget.value;
+      e.key === "Enter" && c.includes("Enter") ? (e.preventDefault(), s(n)) : e.key === "Tab" && c.includes("Tab") ? n.trim() !== "" && (e.preventDefault(), s(n)) : (e.key === "," || e.key === ",") && c.includes("Comma") || e.key === " " && c.includes("Space") ? (e.preventDefault(), s(n)) : e.key === "Backspace" && n === "" && t.length > 0 && p(t.slice(0, -1));
+    }, X = (e) => {
+      D(e.target.value), i("");
+    }, q = () => {
+      F(!0);
+    }, z = () => {
+      F(!1), B && x.trim() !== "" && s(x);
+    }, G = (e, n) => {
+      e.preventDefault(), e.stopPropagation(), P(n);
+    }, H = () => {
+      l || !a?.onClick || a.onClick();
+    }, u = k || g;
+    return /* @__PURE__ */ r.jsxs(
+      U,
       {
-        orientation: N,
-        "data-invalid": m,
-        className: b("w-full", $),
+        orientation: $,
+        "data-invalid": h,
+        className: y("w-full", T),
         children: [
-          y && /* @__PURE__ */ n.jsx(H, { htmlFor: o, children: y }),
-          /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-            /* @__PURE__ */ n.jsxs(
+          w && /* @__PURE__ */ r.jsx(W, { htmlFor: o, children: w }),
+          /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+            /* @__PURE__ */ r.jsxs(
               "div",
               {
-                className: b(
+                className: y(
                   "font-normal file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1.5 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 text-sm",
                   "flex-wrap gap-1.5 items-center",
-                  R && "border-ring ring-ring/50 ring-[3px]",
-                  (m || h) && "border-destructive ring-destructive/20 dark:ring-destructive/40",
-                  p && "opacity-50 cursor-not-allowed"
+                  S && "border-ring ring-ring/50 ring-[3px]",
+                  (h || g) && "border-destructive ring-destructive/20 dark:ring-destructive/40",
+                  l && "opacity-50 cursor-not-allowed"
                 ),
                 onClick: () => {
-                  p || document.getElementById(o)?.focus();
+                  l || document.getElementById(o)?.focus();
                 },
                 children: [
-                  t.map((e, r) => /* @__PURE__ */ n.jsxs(Q, { variant: I, children: [
-                    e,
-                    /* @__PURE__ */ n.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (a) => X(a, e),
-                        children: /* @__PURE__ */ n.jsx(U, { name: "X", className: "h-3 w-3" })
-                      }
-                    )
-                  ] }, `${e}-${r}`)),
-                  /* @__PURE__ */ n.jsx(
+                  (() => {
+                    const e = a && !l && t.length >= a.length;
+                    return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                      e && /* @__PURE__ */ r.jsx(
+                        "div",
+                        {
+                          onClick: (n) => {
+                            n.preventDefault(), n.stopPropagation(), H();
+                          },
+                          children: /* @__PURE__ */ r.jsx(
+                            E,
+                            {
+                              variant: "secondary",
+                              className: "gap-1 cursor-pointer flex items-center",
+                              children: a.label || "Delete all"
+                            }
+                          )
+                        }
+                      ),
+                      t.map((n, d) => /* @__PURE__ */ r.jsxs(E, { variant: N, children: [
+                        n,
+                        /* @__PURE__ */ r.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (J) => G(J, n),
+                            children: /* @__PURE__ */ r.jsx(_, { name: "X", className: "h-3 w-3" })
+                          }
+                        )
+                      ] }, `${n}-${d}`))
+                    ] });
+                  })(),
+                  /* @__PURE__ */ r.jsx(
                     "input",
                     {
-                      ref: C,
+                      ref: R,
                       id: o,
                       name: V,
                       type: "text",
                       value: x,
-                      onChange: A,
-                      onKeyDown: S,
-                      onFocus: L,
-                      onBlur: P,
-                      placeholder: t.length === 0 ? F : "",
-                      disabled: p,
-                      className: b(
+                      onChange: X,
+                      onKeyDown: L,
+                      onFocus: q,
+                      onBlur: z,
+                      placeholder: t.length === 0 ? v : "",
+                      disabled: l,
+                      className: y(
                         "flex-1 min-w-[120px] outline-none bg-transparent border-none shadow-none p-0 h-6",
                         "placeholder:text-muted-foreground",
                         "disabled:cursor-not-allowed"
                       ),
-                      "aria-invalid": m || !!h,
-                      "aria-describedby": u || d ? `${o}-description` : void 0
+                      "aria-invalid": h || !!g,
+                      "aria-describedby": f || u ? `${o}-description` : void 0
                     }
                   )
                 ]
               }
             ),
-            u && !d && /* @__PURE__ */ n.jsx(J, { id: `${o}-description`, children: u }),
-            d && /* @__PURE__ */ n.jsx(O, { id: `${o}-description`, children: d })
+            f && !u && /* @__PURE__ */ r.jsx(Y, { id: `${o}-description`, children: f }),
+            u && /* @__PURE__ */ r.jsx(Z, { id: `${o}-description`, children: u })
           ] })
         ]
       }
     );
   }
 );
-W.displayName = "MultiValuesField";
+A.displayName = "MultiValuesField";
 export {
-  W as MultiValuesField
+  A as MultiValuesField
 };

package/dist/components/atoms/multi-values-field/multi-values-field.types.d.ts

@@ -81,4 +81,21 @@ export interface MultiValuesFieldProps {
      * Additional CSS classes
      */
     className?: string;
+    /**
+     * Configuration for "Delete All" chip functionality
+     */
+    deleteAll?: {
+        /**
+         * Label for the delete all chip
+         */
+        label?: string;
+        /**
+         * Minimum number of selected items to show delete all
+         */
+        length: number;
+        /**
+         * Callback fired when delete all is clicked
+         */
+        onClick: () => void;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",