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

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

@@ -1,50 +1,51 @@
-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(
+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(
     "button",
     {
-      ref: j,
-      className: d(
+      ref: x,
+      className: o(
         "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors",
         "hover:bg-secondary",
-        u
+        d
       ),
-      ...o,
+      ...s,
       children: [
-        r && /* @__PURE__ */ n.jsx(
-          C,
+        l && /* @__PURE__ */ a.jsx(
+          h,
           {
-            name: r,
-            className: d(
+            name: l,
+            className: o(
               "size-4 shrink-0",
-              l ? "text-primary" : "text-foreground"
+              t ? "text-primary" : "text-foreground"
             )
           }
         ),
-        /* @__PURE__ */ n.jsx(
+        /* @__PURE__ */ a.jsx(
           "span",
           {
-            className: d(
+            className: o(
               "flex-1 text-sm font-normal text-left truncate",
-              l ? "text-primary" : "text-foreground"
+              t ? "font-medium text-primary" : "text-foreground"
             ),
-            children: h
+            children: c
           }
         ),
-        (l || m) && /* @__PURE__ */ n.jsx(
-          C,
+        (t || i) && /* @__PURE__ */ a.jsx(
+          h,
           {
             name: "CaretRight",
-            className: d(
+            className: o(
               "size-4 shrink-0",
-              l ? "text-primary" : "text-foreground"
+              t ? "text-primary" : "text-foreground"
             )
           }
         )
@@ -52,94 +53,51 @@ const M = v(
     }
   )
 );
-M.displayName = "FilterMenuItem";
-const A = v(
-  ({ items: r, activeItemId: h, onItemClick: l, className: m }, u) => /* @__PURE__ */ n.jsx(
+I.displayName = "FilterMenuItem";
+const F = u(
+  ({ items: l, activeItemId: c, onItemClick: t, className: i }, d) => /* @__PURE__ */ a.jsx(
     "div",
     {
-      ref: u,
-      className: d(
-        "flex flex-col gap-2 w-64 h-full p-2 bg-surface border border-border rounded-md",
-        m
+      ref: d,
+      className: o(
+        "flex flex-col gap-2 w-64 h-full p-2 bg-neutral-50 border border-border rounded-md",
+        i
       ),
-      children: r.map((o) => /* @__PURE__ */ n.jsx(
-        M,
+      children: l.map((s) => /* @__PURE__ */ a.jsx(
+        I,
         {
-          icon: o.icon,
-          label: o.label,
-          isActive: h === o.id,
-          showChevron: o.showChevron,
-          onClick: () => l?.(o.id)
+          icon: s.icon,
+          label: s.label,
+          isActive: c === s.id,
+          showChevron: s.showChevron,
+          onClick: () => t?.(s.id)
         },
-        o.id
+        s.id
       ))
     }
   )
 );
-A.displayName = "FilterMenu";
-const Y = v(
+F.displayName = "FilterMenu";
+const P = u(
   ({
-    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 = () => {
+    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 = () => {
       if (!e) return null;
       switch (e.type) {
         case "checkbox":
-          return /* @__PURE__ */ n.jsx(
-            k,
+          return /* @__PURE__ */ a.jsx(
+            D,
             {
               title: e.label,
               items: e.items || [],
@@ -155,8 +113,8 @@ const Y = v(
             }
           );
         case "radio":
-          return /* @__PURE__ */ n.jsx(
-            k,
+          return /* @__PURE__ */ a.jsx(
+            D,
             {
               type: "radio",
               title: e.label,
@@ -173,22 +131,22 @@ const Y = v(
             }
           );
         case "date": {
-          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");
+          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");
             }
           };
-          return /* @__PURE__ */ n.jsx(
-            X,
+          return /* @__PURE__ */ a.jsx(
+            O,
             {
-              value: e.dateValue || b.LAST_7_DAYS,
-              onValueChange: t,
-              showCustomFields: e.dateValue === b.CUSTOM,
-              onCustomFieldsChange: (a) => {
-                a && t(b.CUSTOM);
+              value: e.dateValue || "last-7-days",
+              onValueChange: n,
+              showCustomFields: e.dateValue === "custom",
+              onCustomFieldsChange: (r) => {
+                r && n("custom");
               },
               startDate: e.dateInit,
               endDate: e.dateEnd,
@@ -210,109 +168,97 @@ const Y = v(
           return null;
       }
     };
-    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(
+    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: [
+              "+",
               g,
+              " more"
+            ] }) }),
+            d && k && /* @__PURE__ */ a.jsx(
+              v,
               {
-                variant: "outline",
+                variant: "ghost",
                 size: "sm",
-                className: "gap-2",
-                onClick: () => p(!x),
-                disabled: V,
-                children: [
-                  /* @__PURE__ */ n.jsx(C, { name: "FunnelSimple", className: "size-4" }),
-                  h
-                ]
+                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
               }
             ),
-            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() })
-              ]
-            }
-          )
-        ]
-      }
-    );
+            /* @__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() })
+          ]
+        }
+      )
+    ] });
   }
 );
-Y.displayName = "FilterDropdown";
+P.displayName = "FilterDropdown";
 export {
-  Y as FilterDropdown,
-  A as FilterMenu,
-  M as FilterMenuItem
+  P as FilterDropdown,
+  F as FilterMenu,
+  I as FilterMenuItem
 };

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

@@ -1,5 +1,4 @@
 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;
@@ -143,8 +142,6 @@ 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;
@@ -189,8 +186,6 @@ 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;