@yuno-payments/dashboard-design-system 0.0.170 → 0.0.172

package/dist/components/atoms/filter-dropdown/filter-dropdown.js

@@ -1,51 +1,50 @@
-import { j as a } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as u, useState as N } from "react";
-import { Button as v } from "../../../vendor/shadcn/button.js";
-import { Separator as w } from "../../../vendor/shadcn/separator.js";
-import { Badge as y } from "../../../vendor/shadcn/badge.js";
-import { FilterSection as D } from "../filter/filter.js";
-import { FilterDateRange as O } from "../filter/filter-date-range.js";
-import { cn as o } from "../../../lib/utils.js";
-import { Icon as h } from "../icon/icon.js";
-const I = u(
-  ({ icon: l, label: c, isActive: t = !1, showChevron: i = !1, className: d, ...s }, x) => /* @__PURE__ */ a.jsxs(
+import { j as n } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as v, useState as E, useRef as H, useCallback as _, useEffect as K } from "react";
+import { Button as g } from "../../../vendor/shadcn/button.js";
+import { Separator as S } from "../../../vendor/shadcn/separator.js";
+import { Icon as C } from "../icon/icon.js";
+import { FilterSection as k } from "../filter/filter.js";
+import { FilterDateRange as X, FilterDateRangeValue as b } from "../filter/filter-date-range.js";
+import { cn as d } from "../../../lib/utils.js";
+const M = v(
+  ({ icon: r, label: h, isActive: l = !1, showChevron: m = !1, className: u, ...o }, j) => /* @__PURE__ */ n.jsxs(
     "button",
     {
-      ref: x,
-      className: o(
+      ref: j,
+      className: d(
         "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors",
         "hover:bg-secondary",
-        d
+        u
       ),
-      ...s,
+      ...o,
       children: [
-        l && /* @__PURE__ */ a.jsx(
-          h,
+        r && /* @__PURE__ */ n.jsx(
+          C,
           {
-            name: l,
-            className: o(
+            name: r,
+            className: d(
               "size-4 shrink-0",
-              t ? "text-primary" : "text-foreground"
+              l ? "text-primary" : "text-foreground"
             )
           }
         ),
-        /* @__PURE__ */ a.jsx(
+        /* @__PURE__ */ n.jsx(
           "span",
           {
-            className: o(
+            className: d(
               "flex-1 text-sm font-normal text-left truncate",
-              t ? "font-medium text-primary" : "text-foreground"
+              l ? "text-primary" : "text-foreground"
             ),
-            children: c
+            children: h
           }
         ),
-        (t || i) && /* @__PURE__ */ a.jsx(
-          h,
+        (l || m) && /* @__PURE__ */ n.jsx(
+          C,
           {
             name: "CaretRight",
-            className: o(
+            className: d(
               "size-4 shrink-0",
-              t ? "text-primary" : "text-foreground"
+              l ? "text-primary" : "text-foreground"
             )
           }
         )
@@ -53,51 +52,94 @@ const I = u(
     }
   )
 );
-I.displayName = "FilterMenuItem";
-const F = u(
-  ({ items: l, activeItemId: c, onItemClick: t, className: i }, d) => /* @__PURE__ */ a.jsx(
+M.displayName = "FilterMenuItem";
+const A = v(
+  ({ items: r, activeItemId: h, onItemClick: l, className: m }, u) => /* @__PURE__ */ n.jsx(
     "div",
     {
-      ref: d,
-      className: o(
-        "flex flex-col gap-2 w-64 h-full p-2 bg-neutral-50 border border-border rounded-md",
-        i
+      ref: u,
+      className: d(
+        "flex flex-col gap-2 w-64 h-full p-2 bg-surface border border-border rounded-md",
+        m
       ),
-      children: l.map((s) => /* @__PURE__ */ a.jsx(
-        I,
+      children: r.map((o) => /* @__PURE__ */ n.jsx(
+        M,
         {
-          icon: s.icon,
-          label: s.label,
-          isActive: c === s.id,
-          showChevron: s.showChevron,
-          onClick: () => t?.(s.id)
+          icon: o.icon,
+          label: o.label,
+          isActive: h === o.id,
+          showChevron: o.showChevron,
+          onClick: () => l?.(o.id)
         },
-        s.id
+        o.id
       ))
     }
   )
 );
-F.displayName = "FilterMenu";
-const P = u(
+A.displayName = "FilterMenu";
+const Y = v(
   ({
-    filters: l,
-    buttonText: c = "Add filter",
-    appliedFilters: t = [],
-    onRemoveFilter: i,
-    onClearAllFilters: d,
-    maxVisibleTags: s = 4,
-    className: x
-  }, T) => {
-    const [p, S] = N(!1), [f, A] = N(l.length > 0 && l[0]?.id || ""), E = t.length > 0, V = t.slice(0, s), g = t.length - s, b = (n) => l.find((m) => m.id === n)?.clearable !== !1, k = t.some((n) => b(n.id)), z = l.map((n) => ({
-      id: n.id,
-      icon: n.icon,
-      label: n.label
-    })), e = l.find((n) => n.id === f), M = () => {
+    filters: r,
+    buttonText: h = "Add filter",
+    appliedFilters: l = [],
+    onRemoveFilter: m,
+    onClearAllFilters: u,
+    maxVisibleTags: o = 4,
+    className: j,
+    disabled: V = !1
+  }, f) => {
+    const [x, p] = E(!1), [w, N] = E(
+      r.length > 0 && r[0]?.id || ""
+    ), y = H(null), z = _(
+      (t) => {
+        y.current = t, typeof f == "function" ? f(t) : f && (f.current = t);
+      },
+      [f]
+    );
+    K(() => {
+      if (!x) return;
+      const t = (s) => {
+        const c = s.target;
+        y.current?.contains(c) || c.closest?.(
+          "[data-radix-popper-content-wrapper], [data-radix-portal]"
+        ) || c.closest?.(
+          ".rdp, .rdp-root, [data-calendar]"
+        ) || p(!1);
+      }, a = (s) => {
+        s.key === "Escape" && p(!1);
+      }, i = setTimeout(() => {
+        document.addEventListener("mousedown", t), document.addEventListener("keydown", a);
+      }, 0);
+      return () => {
+        clearTimeout(i), document.removeEventListener("mousedown", t), document.removeEventListener("keydown", a);
+      };
+    }, [x]);
+    const O = l.length > 0, R = l.slice(0, o), T = l.length - o, D = (t) => {
+      if (r.find((s) => s.id === t)) return t;
+      const i = t.split("-");
+      if (i.length > 1) {
+        const s = i[0];
+        if (r.find((I) => I.id === s)) return s;
+      }
+      return t;
+    }, F = (t) => {
+      const a = D(t);
+      return r.find((s) => s.id === a)?.clearable !== !1;
+    }, L = (t) => {
+      const a = D(t);
+      N(a), p(!0);
+    }, P = l.some(
+      (t) => F(t.id)
+    ), U = r.map((t) => ({
+      id: t.id,
+      icon: t.icon,
+      label: t.label
+    })), e = r.find((t) => t.id === w), B = () => {
       if (!e) return null;
       switch (e.type) {
         case "checkbox":
-          return /* @__PURE__ */ a.jsx(
-            D,
+          return /* @__PURE__ */ n.jsx(
+            k,
             {
               title: e.label,
               items: e.items || [],
@@ -113,8 +155,8 @@ const P = u(
             }
           );
         case "radio":
-          return /* @__PURE__ */ a.jsx(
-            D,
+          return /* @__PURE__ */ n.jsx(
+            k,
             {
               type: "radio",
               title: e.label,
@@ -131,22 +173,22 @@ const P = u(
             }
           );
         case "date": {
-          const n = (r) => {
-            if (e.onDateValueChange?.(r), r === "custom" && !e.dateInit && !e.dateEnd) {
-              const m = /* @__PURE__ */ new Date(), C = new Date(m);
-              C.setHours(23, 59, 59, 999);
-              const j = new Date(m);
-              j.setHours(0, 0, 0, 0), e.onDateInitChange?.(j), e.onDateEndChange?.(C), e.startTime || e.onStartTimeChange?.("00:00:00"), e.endTime || e.onEndTimeChange?.("23:59:59");
+          const t = (a) => {
+            if (e.onDateValueChange?.(a), a === b.CUSTOM && !e.dateInit && !e.dateEnd) {
+              const i = /* @__PURE__ */ new Date(), s = new Date(i);
+              s.setHours(23, 59, 59, 999);
+              const c = new Date(i);
+              c.setHours(0, 0, 0, 0), e.onDateInitChange?.(c), e.onDateEndChange?.(s), e.startTime || e.onStartTimeChange?.("00:00:00"), e.endTime || e.onEndTimeChange?.("23:59:59");
             }
           };
-          return /* @__PURE__ */ a.jsx(
-            O,
+          return /* @__PURE__ */ n.jsx(
+            X,
             {
-              value: e.dateValue || "last-7-days",
-              onValueChange: n,
-              showCustomFields: e.dateValue === "custom",
-              onCustomFieldsChange: (r) => {
-                r && n("custom");
+              value: e.dateValue || b.LAST_7_DAYS,
+              onValueChange: t,
+              showCustomFields: e.dateValue === b.CUSTOM,
+              onCustomFieldsChange: (a) => {
+                a && t(b.CUSTOM);
               },
               startDate: e.dateInit,
               endDate: e.dateEnd,
@@ -168,97 +210,109 @@ const P = u(
           return null;
       }
     };
-    return /* @__PURE__ */ a.jsxs("div", { ref: T, className: o("flex flex-col gap-1 relative", x), children: [
-      /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ a.jsxs(
-          v,
-          {
-            variant: "outline",
-            size: "sm",
-            className: "h-8 gap-2 px-3 py-2",
-            onClick: () => S(!p),
-            children: [
-              /* @__PURE__ */ a.jsx(h, { name: "FunnelSimple", className: "size-4" }),
-              /* @__PURE__ */ a.jsx("span", { className: "text-xs font-medium leading-none", children: c })
-            ]
-          }
-        ),
-        E ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-          /* @__PURE__ */ a.jsx(w, { orientation: "vertical", className: "h-5" }),
-          /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-2", children: [
-            V.map((n) => {
-              const r = b(n.id);
-              return /* @__PURE__ */ a.jsxs(
-                y,
-                {
-                  variant: "secondary",
-                  className: "h-8 gap-2 px-3 py-2 shadow-xs",
-                  children: [
-                    /* @__PURE__ */ a.jsx("span", { className: "text-xs font-medium leading-none", children: n.label }),
-                    i && r && /* @__PURE__ */ a.jsx(
-                      "button",
-                      {
-                        onClick: () => i(n.id),
-                        className: "inline-flex items-center justify-center",
-                        "aria-label": `Remove ${n.label} filter`,
-                        children: /* @__PURE__ */ a.jsx(h, { name: "X", className: "size-4" })
-                      }
-                    )
-                  ]
-                },
-                n.id
-              );
-            }),
-            g > 0 && /* @__PURE__ */ a.jsx(y, { variant: "default", className: "h-8 px-3 py-2 shadow-xs", children: /* @__PURE__ */ a.jsxs("span", { className: "text-xs font-medium leading-none", children: [
-              "+",
+    return /* @__PURE__ */ n.jsxs(
+      "div",
+      {
+        ref: z,
+        className: d("flex flex-col gap-1 relative", j),
+        children: [
+          /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ n.jsxs(
               g,
-              " more"
-            ] }) }),
-            d && k && /* @__PURE__ */ a.jsx(
-              v,
               {
-                variant: "ghost",
+                variant: "outline",
                 size: "sm",
-                className: "h-8 px-3 py-2",
-                onClick: d,
-                children: /* @__PURE__ */ a.jsx("span", { className: "text-xs font-medium leading-none text-primary", children: "Clear filters" })
-              }
-            )
-          ] })
-        ] }) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-          /* @__PURE__ */ a.jsx(w, { orientation: "vertical", className: "h-5" }),
-          /* @__PURE__ */ a.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: "No filters applied" })
-        ] })
-      ] }),
-      p && /* @__PURE__ */ a.jsxs(
-        "div",
-        {
-          className: o(
-            "z-50 shadow-lg",
-            "absolute top-full left-0 mt-1",
-            "flex flex-row gap-2",
-            "w-[728px] h-[448px]",
-            "bg-popover border border-border rounded-md p-2"
-          ),
-          children: [
-            /* @__PURE__ */ a.jsx(
-              F,
-              {
-                items: z,
-                activeItemId: f,
-                onItemClick: A
+                className: "gap-2",
+                onClick: () => p(!x),
+                disabled: V,
+                children: [
+                  /* @__PURE__ */ n.jsx(C, { name: "FunnelSimple", className: "size-4" }),
+                  h
+                ]
               }
             ),
-            /* @__PURE__ */ a.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: M() })
-          ]
-        }
-      )
-    ] });
+            O ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+              /* @__PURE__ */ n.jsx(S, { orientation: "vertical", className: "h-5" }),
+              /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2", children: [
+                R.map((t) => {
+                  const a = F(t.id);
+                  return /* @__PURE__ */ n.jsxs(
+                    g,
+                    {
+                      variant: "secondary",
+                      onClick: () => L(t.id),
+                      className: "display-flex items-center gap-2",
+                      size: "sm",
+                      children: [
+                        t.label,
+                        m && a && /* @__PURE__ */ n.jsx(
+                          "button",
+                          {
+                            onClick: (i) => {
+                              i.stopPropagation(), m(t.id);
+                            },
+                            className: "inline-flex items-center justify-center",
+                            "aria-label": `Remove ${t.label} filter`,
+                            children: /* @__PURE__ */ n.jsx(C, { name: "X", className: "size-4" })
+                          }
+                        )
+                      ]
+                    },
+                    t.id
+                  );
+                }),
+                T > 0 && /* @__PURE__ */ n.jsxs(g, { children: [
+                  "+",
+                  T,
+                  " more"
+                ] }),
+                u && P && /* @__PURE__ */ n.jsx(
+                  g,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 px-3 py-2",
+                    onClick: u,
+                    children: /* @__PURE__ */ n.jsx("span", { className: "text-xs font-medium leading-none text-primary", children: "Clear filters" })
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+              /* @__PURE__ */ n.jsx(S, { orientation: "vertical", className: "h-5" }),
+              /* @__PURE__ */ n.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: "No filters applied" })
+            ] })
+          ] }),
+          x && /* @__PURE__ */ n.jsxs(
+            "div",
+            {
+              className: d(
+                "z-50 shadow-lg",
+                "absolute top-full left-0 mt-1",
+                "flex flex-row gap-2",
+                "w-[728px] h-[448px]",
+                "bg-popover border border-border rounded-md p-2"
+              ),
+              children: [
+                /* @__PURE__ */ n.jsx(
+                  A,
+                  {
+                    items: U,
+                    activeItemId: w,
+                    onItemClick: N
+                  }
+                ),
+                /* @__PURE__ */ n.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: B() })
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
-P.displayName = "FilterDropdown";
+Y.displayName = "FilterDropdown";
 export {
-  P as FilterDropdown,
-  F as FilterMenu,
-  I as FilterMenuItem
+  Y as FilterDropdown,
+  A as FilterMenu,
+  M as FilterMenuItem
 };

package/dist/components/atoms/icon/aida-logo.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '@phosphor-icons/react';
+declare const AidaLogo: ({ size, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default AidaLogo;

package/dist/components/atoms/icon/aida-logo.js

@@ -0,0 +1,64 @@
+import { j as s } from "../../../_virtual/jsx-runtime.js";
+const i = ({ size: C = 16, ...t }) => /* @__PURE__ */ s.jsxs(
+  "svg",
+  {
+    width: C,
+    height: C,
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: [
+      /* @__PURE__ */ s.jsx(
+        "path",
+        {
+          d: "M22.5987 5.33325C21.7107 7.76002 20.9907 8.47896 18.565 9.36657C20.9907 10.2545 21.7107 10.9746 22.5987 13.4003C23.4867 10.9746 24.2064 10.2545 26.632 9.36657C24.2064 8.47896 23.4867 7.76002 22.5987 5.33325Z",
+          fill: "url(#paint0_linear_12357_32157)"
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        "path",
+        {
+          d: "M13.7673 19.5838H18.8632C18.9599 19.5838 19.0557 19.5641 19.1446 19.526C19.2336 19.4879 19.3139 19.4321 19.3806 19.3621C19.4474 19.2921 19.4993 19.2092 19.5331 19.1186C19.567 19.0279 19.5821 18.9313 19.5775 18.8347C19.3936 15.3146 17.913 11.9873 15.4211 9.49435C12.9292 7.0014 9.60247 5.51937 6.0825 5.33405C5.98585 5.32949 5.88927 5.34459 5.79861 5.37842C5.70796 5.41226 5.62511 5.46414 5.55508 5.53092C5.48504 5.59769 5.42929 5.67798 5.39117 5.76693C5.35306 5.85587 5.33339 5.95162 5.33334 6.04839V11.7631C5.33479 11.9429 5.40368 12.1157 5.5264 12.2471C5.64912 12.3786 5.81672 12.4592 5.99602 12.473C7.49759 12.6156 8.91561 13.2294 10.0473 14.2266C11.179 15.2237 11.9665 16.5532 12.2971 18.0248C12.3447 18.2304 12.3397 18.4446 12.2823 18.6477C12.225 18.8507 12.1172 19.036 11.9691 19.1862C11.8543 19.3013 11.7179 19.3925 11.5678 19.4548C11.4176 19.517 11.2567 19.5491 11.0941 19.549H6.04656C5.9529 19.549 5.86016 19.5674 5.77363 19.6033C5.6871 19.6391 5.60847 19.6917 5.54224 19.7579C5.47601 19.8241 5.42348 19.9028 5.38764 19.9893C5.35179 20.0758 5.33334 20.1686 5.33334 20.2622V25.9534C5.3332 26.047 5.35151 26.1397 5.38723 26.2262C5.42295 26.3127 5.47538 26.3914 5.54152 26.4576C5.60765 26.5239 5.6862 26.5764 5.77267 26.6123C5.85914 26.6481 5.95183 26.6666 6.04544 26.6666H11.7321C11.8257 26.6666 11.9184 26.6481 12.0049 26.6123C12.0913 26.5764 12.1699 26.5239 12.236 26.4576C12.3022 26.3914 12.3546 26.3127 12.3903 26.2262C12.426 26.1397 12.4443 26.047 12.4442 25.9534V20.8991C12.4444 20.5717 12.5745 20.2579 12.8059 20.0263L12.889 19.9421C13.0038 19.8271 13.1402 19.7358 13.2903 19.6735C13.4404 19.6113 13.6014 19.5793 13.7639 19.5793",
+          fill: "url(#paint1_linear_12357_32157)"
+        }
+      ),
+      /* @__PURE__ */ s.jsxs("defs", { children: [
+        /* @__PURE__ */ s.jsxs(
+          "linearGradient",
+          {
+            id: "paint0_linear_12357_32157",
+            x1: "19.6597",
+            y1: "4.82531",
+            x2: "26.6515",
+            y2: "9.13909",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ s.jsx("stop", { stopColor: "#D073F6" }),
+              /* @__PURE__ */ s.jsx("stop", { offset: "1", stopColor: "#5E77FD" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s.jsxs(
+          "linearGradient",
+          {
+            id: "paint1_linear_12357_32157",
+            x1: "7.26631",
+            y1: "3.98998",
+            x2: "21.839",
+            y2: "9.9936",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ s.jsx("stop", { stopColor: "#D073F6" }),
+              /* @__PURE__ */ s.jsx("stop", { offset: "0.5", stopColor: "#5E77FD" }),
+              /* @__PURE__ */ s.jsx("stop", { offset: "1", stopColor: "#21B8F2" })
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+export {
+  i as default
+};

package/dist/components/atoms/icon/icon-list.d.ts

@@ -1,4 +1,5 @@
 declare const IconList: {
+    AidaLogo: ({ size, ...props }: import('@phosphor-icons/react').IconProps) => import("react/jsx-runtime").JSX.Element;
     Activity: import('@phosphor-icons/react').Icon;
     FileSearch: import('@phosphor-icons/react').Icon;
     MagnifyingGlass: import('@phosphor-icons/react').Icon;
@@ -142,6 +143,8 @@ declare const IconList: {
     ToggleRight: import('@phosphor-icons/react').Icon;
     ArrowCircleUp: import('@phosphor-icons/react').Icon;
     ArrowUp: import('@phosphor-icons/react').Icon;
+    File: import('@phosphor-icons/react').Icon;
+    Table: import('@phosphor-icons/react').Icon;
     ArrowDown: import('@phosphor-icons/react').Icon;
     ArrowUpRight: import('@phosphor-icons/react').Icon;
     PlayCircle: import('@phosphor-icons/react').Icon;
@@ -186,6 +189,8 @@ declare const IconList: {
     Intersect: import('@phosphor-icons/react').Icon;
     close: import('@phosphor-icons/react').Icon;
     MagicWand: import('@phosphor-icons/react').Icon;
+    Stop: import('@phosphor-icons/react').Icon;
+    Microphone: import('@phosphor-icons/react').Icon;
     Password: import('@phosphor-icons/react').Icon;
     Buildings: import('@phosphor-icons/react').Icon;
     ArrowRight: import('@phosphor-icons/react').Icon;