@yuno-payments/dashboard-design-system 2.9.4 → 3.0.0

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

@@ -1,497 +0,0 @@
-import { j as s } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as S, useMemo as Ne, useState as N, useRef as F, useCallback as p, useEffect as Q } from "react";
-import { Button as T } from "../../../vendor/shadcn/button.js";
-import { Separator as Z } from "../../../vendor/shadcn/separator.js";
-import { Icon as k } from "../../atoms/icon/icon.js";
-import { FilterSection as O } from "../filter/filter.js";
-import { FilterDateRangeValue as I, FilterDateRange as Fe } from "../filter/filter-date-range.js";
-import { cn as h } from "../../../lib/utils.js";
-import { getFilterTranslations as Ie, formatMoreFilters as Se } from "../filter/filter-translations.js";
-const ee = S(
-  ({ icon: d, label: D, isActive: u = !1, showChevron: x = !1, className: b, ...c }, w) => /* @__PURE__ */ s.jsxs(
-    "button",
-    {
-      ref: w,
-      className: h(
-        "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors shrink-0 hover:bg-secondary",
-        b
-      ),
-      ...c,
-      children: [
-        d && /* @__PURE__ */ s.jsx(
-          k,
-          {
-            name: d,
-            className: h(
-              "size-4 shrink-0",
-              u ? "text-primary" : "text-foreground"
-            )
-          }
-        ),
-        /* @__PURE__ */ s.jsx(
-          "span",
-          {
-            className: h(
-              "flex-1 text-sm font-normal text-left truncate",
-              u ? "text-primary" : "text-foreground"
-            ),
-            children: D
-          }
-        ),
-        (u || x) && /* @__PURE__ */ s.jsx(
-          k,
-          {
-            name: "CaretRight",
-            className: h(
-              "size-4 shrink-0",
-              u ? "text-primary" : "text-foreground"
-            )
-          }
-        )
-      ]
-    }
-  )
-);
-ee.displayName = "FilterMenuItem";
-const te = S(
-  ({ items: d, activeItemId: D, onItemClick: u, className: x }, b) => /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      ref: b,
-      className: h(
-        "flex flex-col gap-2 w-64 h-full p-2 bg-muted border border-border rounded-md overflow-y-auto",
-        x
-      ),
-      children: d.map((c) => /* @__PURE__ */ s.jsx(
-        ee,
-        {
-          icon: c.icon,
-          label: c.label,
-          isActive: D === c.id,
-          showChevron: c.showChevron,
-          onClick: () => u?.(c.id)
-        },
-        c.id
-      ))
-    }
-  )
-);
-te.displayName = "FilterMenu";
-const ye = S(
-  ({
-    filters: d,
-    buttonText: D,
-    appliedFilters: u = [],
-    onRemoveFilter: x,
-    onClearAllFilters: b,
-    onOpenChange: c,
-    maxVisibleTags: w = 4,
-    className: ne,
-    disabled: ae = !1,
-    applyOnClose: i = !1,
-    lang: V,
-    translations: g
-  }, v) => {
-    const E = Ne(() => {
-      const e = Ie(V);
-      return g ? { ...e, ...g } : e;
-    }, [V, g]), [m, y] = N(!1), [f, re] = N({}), B = F({}), M = F(d), l = p(
-      (e) => {
-        re((n) => {
-          const r = typeof e == "function" ? e(n) : e;
-          return B.current = r, r;
-        });
-      },
-      []
-    );
-    Q(() => {
-      M.current = d;
-    }, [d]);
-    const R = p(() => {
-      if (!i) return;
-      const e = B.current, n = M.current;
-      Object.entries(e).forEach(([r, a]) => {
-        const o = n.find((C) => C.id === r);
-        if (o)
-          switch (a.type) {
-            case "checkbox":
-              a.checkboxValues !== void 0 && o.onChange?.(a.checkboxValues);
-              break;
-            case "radio":
-              a.radioValue !== void 0 && o.onValueChange?.(a.radioValue);
-              break;
-            case "date":
-              a.dateValue !== void 0 && o.onDateValueChange?.(a.dateValue), a.dateInit !== void 0 && o.onDateInitChange?.(a.dateInit), a.dateEnd !== void 0 && o.onDateEndChange?.(a.dateEnd), a.startTime !== void 0 && o.onStartTimeChange?.(a.startTime), a.endTime !== void 0 && o.onEndTimeChange?.(a.endTime);
-              break;
-            case "custom":
-              a.customValue !== void 0 && o.onCustomChange?.(a.customValue);
-              break;
-          }
-      }), l({});
-    }, [i, l]), j = p(
-      (e) => {
-        if (!e && m && i) {
-          c?.(e), R(), y(e);
-          return;
-        }
-        e && !m && i && l({}), y(e), c?.(e);
-      },
-      [
-        c,
-        m,
-        i,
-        R,
-        l
-      ]
-    ), [A, H] = N(
-      d.length > 0 && d[0]?.id || ""
-    ), z = F(null), se = p(
-      (e) => {
-        z.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
-      },
-      [v]
-    );
-    Q(() => {
-      if (!m) return;
-      const e = (a) => {
-        const o = a.target;
-        z.current?.contains(o) || o.closest?.(
-          "[data-radix-popper-content-wrapper], [data-radix-portal]"
-        ) || o.closest?.(
-          ".rdp, .rdp-root, [data-calendar]"
-        ) || j(!1);
-      }, n = (a) => {
-        a.key === "Escape" && j(!1);
-      }, r = setTimeout(() => {
-        document.addEventListener("mousedown", e), document.addEventListener("keydown", n);
-      }, 0);
-      return () => {
-        clearTimeout(r), document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n);
-      };
-    }, [m, j]);
-    const ie = u.length > 0, oe = u.slice(0, w), L = u.length - w, P = (e) => {
-      if (d.find((a) => a.id === e)) return e;
-      const r = e.split("-");
-      if (r.length > 1) {
-        const a = r[0];
-        if (d.find((C) => C.id === a)) return a;
-      }
-      return e;
-    }, U = (e) => {
-      const n = P(e);
-      return d.find((a) => a.id === n)?.clearable !== !1;
-    }, de = (e) => {
-      const n = P(e);
-      H(n), j(!0);
-    }, ce = u.some(
-      (e) => U(e.id)
-    ), le = d.map((e) => ({
-      id: e.id,
-      icon: e.icon,
-      label: e.label
-    })), t = d.find((e) => e.id === A), ue = (e, n) => i ? f[e]?.checkboxValues ?? n : n, fe = (e, n) => i ? f[e]?.radioValue ?? n : n, me = (e, n) => i ? f[e]?.dateValue ?? n : n, he = (e, n) => i ? f[e]?.dateInit ?? n : n, xe = (e, n) => i ? f[e]?.dateEnd ?? n : n, be = (e, n) => i ? f[e]?.startTime ?? n : n, ge = (e, n) => i ? f[e]?.endTime ?? n : n, Ce = (e, n, r) => (a) => {
-      r !== void 0 && r > 0 && a.length < r || (i ? l((o) => ({
-        ...o,
-        [e]: {
-          ...o[e],
-          type: "checkbox",
-          checkboxValues: a
-        }
-      })) : n?.(a));
-    }, De = (e, n) => (r) => {
-      i ? l((a) => ({
-        ...a,
-        [e]: {
-          ...a[e],
-          type: "radio",
-          radioValue: r
-        }
-      })) : n?.(r);
-    }, Ve = (e, n) => (r) => {
-      i ? l((a) => ({
-        ...a,
-        [e]: {
-          ...a[e],
-          type: "date",
-          dateValue: r
-        }
-      })) : n?.(r);
-    }, ve = (e, n) => (r) => {
-      i ? l((a) => ({
-        ...a,
-        [e]: {
-          ...a[e],
-          type: "date",
-          dateInit: r
-        }
-      })) : n?.(r);
-    }, je = (e, n) => (r) => {
-      i ? l((a) => ({
-        ...a,
-        [e]: {
-          ...a[e],
-          type: "date",
-          dateEnd: r
-        }
-      })) : n?.(r);
-    }, we = (e, n) => (r) => {
-      i ? l((a) => ({
-        ...a,
-        [e]: {
-          ...a[e],
-          type: "date",
-          startTime: r
-        }
-      })) : n?.(r);
-    }, Ee = (e, n) => (r) => {
-      i ? l((a) => ({
-        ...a,
-        [e]: {
-          ...a[e],
-          type: "date",
-          endTime: r
-        }
-      })) : n?.(r);
-    }, pe = () => {
-      if (!t) return null;
-      switch (t.type) {
-        case "checkbox": {
-          const e = ue(
-            t.id,
-            t.selectedValues || []
-          ), n = t.description && (t.descriptionMinSelection === void 0 || e.length >= t.descriptionMinSelection);
-          return /* @__PURE__ */ s.jsx(
-            O,
-            {
-              title: t.label,
-              items: t.items || [],
-              selectedValues: e,
-              onChange: Ce(
-                t.id,
-                t.onChange,
-                t.minSelection
-              ),
-              searchable: t.searchable,
-              searchPlaceholder: t.searchPlaceholder,
-              showActions: t.showActions,
-              enableSelectAll: t.enableSelectAll,
-              enableInverse: t.enableInverse,
-              enableNone: t.enableNone,
-              description: n ? t.description : void 0,
-              lang: V,
-              translations: g
-            }
-          );
-        }
-        case "radio":
-          return /* @__PURE__ */ s.jsx(
-            O,
-            {
-              type: "radio",
-              title: t.label,
-              items: t.items || [],
-              selectedValue: fe(
-                t.id,
-                t.selectedValue || ""
-              ),
-              onChange: De(
-                t.id,
-                t.onValueChange
-              ),
-              searchable: t.searchable,
-              searchPlaceholder: t.searchPlaceholder,
-              showActions: t.showActions,
-              enableSelectAll: t.enableSelectAll,
-              enableInverse: t.enableInverse,
-              enableNone: t.enableNone,
-              description: t.description,
-              lang: V,
-              translations: g
-            }
-          );
-        case "date": {
-          const e = me(
-            t.id,
-            t.dateValue || I.LAST_7_DAYS
-          ), n = he(
-            t.id,
-            t.dateInit
-          ), r = xe(
-            t.id,
-            t.dateEnd
-          ), a = be(
-            t.id,
-            t.startTime || ""
-          ), o = ge(
-            t.id,
-            t.endTime || ""
-          ), C = i && f[t.id]?.dateInit !== void 0, _ = i && f[t.id]?.dateEnd !== void 0, Te = Ve(
-            t.id,
-            t.onDateValueChange
-          ), K = ve(
-            t.id,
-            t.onDateInitChange
-          ), W = je(
-            t.id,
-            t.onDateEndChange
-          ), X = we(
-            t.id,
-            t.onStartTimeChange
-          ), Y = Ee(
-            t.id,
-            t.onEndTimeChange
-          ), ke = ($) => {
-            if (Te($), $ === I.CUSTOM && !C && !_) {
-              const q = /* @__PURE__ */ new Date(), G = new Date(q);
-              G.setHours(23, 59, 59, 999);
-              const J = new Date(q);
-              J.setHours(0, 0, 0, 0), K(J), W(G), X("00:00:00"), Y("23:59:59");
-            }
-          };
-          return /* @__PURE__ */ s.jsx(
-            Fe,
-            {
-              value: e,
-              onValueChange: ke,
-              showCustomFields: e === I.CUSTOM,
-              startDate: n,
-              endDate: r,
-              startTime: a,
-              endTime: o,
-              mode: t.dateMode || "range",
-              singleDayLabel: t.singleDayLabel,
-              showAllTime: t.showAllTime,
-              onStartDateChange: K,
-              onEndDateChange: W,
-              onStartTimeChange: X,
-              onEndTimeChange: Y,
-              announcement: t.description,
-              labels: t.dateLabels,
-              lang: V,
-              translations: g
-            }
-          );
-        }
-        case "custom": {
-          const e = i ? {
-            bufferedValue: f[t.id]?.customValue,
-            onDeferredChange: (n) => {
-              l((r) => ({
-                ...r,
-                [t.id]: {
-                  ...r[t.id],
-                  type: "custom",
-                  customValue: n
-                }
-              }));
-            },
-            isDeferred: !0
-          } : void 0;
-          return t.renderContent?.(e);
-        }
-        default:
-          return null;
-      }
-    };
-    return /* @__PURE__ */ s.jsxs(
-      "div",
-      {
-        ref: se,
-        className: h("flex flex-col gap-1 relative", ne),
-        children: [
-          /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ s.jsxs(
-              T,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "gap-2",
-                onClick: () => j(!m),
-                disabled: ae,
-                children: [
-                  /* @__PURE__ */ s.jsx(k, { name: "FunnelSimple", className: "size-4" }),
-                  D ?? E.addFilter
-                ]
-              }
-            ),
-            ie ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-              /* @__PURE__ */ s.jsx(Z, { orientation: "vertical", className: "h-5" }),
-              /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-                oe.map((e) => {
-                  const n = U(e.id);
-                  return /* @__PURE__ */ s.jsxs(
-                    T,
-                    {
-                      variant: "secondary",
-                      onClick: () => de(e.id),
-                      className: "display-flex items-center gap-2",
-                      size: "sm",
-                      children: [
-                        e.label,
-                        x && n && /* @__PURE__ */ s.jsx(
-                          "button",
-                          {
-                            onClick: (r) => {
-                              r.stopPropagation(), x(e.id);
-                            },
-                            className: "inline-flex items-center justify-center",
-                            "aria-label": `Remove ${e.label} filter`,
-                            children: /* @__PURE__ */ s.jsx(k, { name: "X", className: "size-4" })
-                          }
-                        )
-                      ]
-                    },
-                    e.id
-                  );
-                }),
-                L > 0 && /* @__PURE__ */ s.jsx(T, { children: Se(E, L) }),
-                b && ce && /* @__PURE__ */ s.jsx(
-                  T,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 px-3 py-2",
-                    onClick: b,
-                    children: /* @__PURE__ */ s.jsx("span", { className: "text-xs font-medium leading-none text-primary", children: E.clearFilters })
-                  }
-                )
-              ] })
-            ] }) : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-              /* @__PURE__ */ s.jsx(Z, { orientation: "vertical", className: "h-5" }),
-              /* @__PURE__ */ s.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: E.noFiltersApplied })
-            ] })
-          ] }),
-          m && /* @__PURE__ */ s.jsxs(
-            "div",
-            {
-              className: h(
-                "z-popover shadow-lg",
-                "absolute top-full start-0 mt-1",
-                "flex flex-row gap-2",
-                "w-[728px] h-[448px]",
-                "bg-popover border border-border rounded-md p-2"
-              ),
-              children: [
-                /* @__PURE__ */ s.jsx(
-                  te,
-                  {
-                    items: le,
-                    activeItemId: A,
-                    onItemClick: H
-                  }
-                ),
-                /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: pe() })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-ye.displayName = "FilterDropdown";
-export {
-  ye as FilterDropdown,
-  te as FilterMenu,
-  ee as FilterMenuItem
-};

package/dist/components/organisms/filter-dropdown/index.d.ts

@@ -1 +0,0 @@
-export { FilterDropdown, FilterMenu, FilterMenuItem, type FilterDropdownProps, type FilterConfig, type FilterMenuProps, type FilterMenuItemProps, type FilterDeferredContext, } from './filter-dropdown';

package/dist/components/organisms/index.d.ts

@@ -1,11 +0,0 @@
-export * from './aggregated-table';
-export * from './data-table';
-export { Dialog } from './dialog';
-export { Sheet } from './sheet';
-export { Tutorial } from './tutorial';
-export type { TutorialProps, TutorialButtonProps } from './tutorial';
-export * from './transfer-list';
-export { Combobox, type ComboboxProps, type ComboboxOption } from './combobox';
-export { MultiSelect, type MultiSelectProps, type MultiSelectOption, } from './multi-select';
-export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, FilterMultiInput, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterDateRangeProps, type FilterDateRangeOptionProps, type FilterDateRangeLabels, type FilterMultiInputProps, } from './filter';
-export { FilterDropdown, FilterMenu, FilterMenuItem, type FilterDropdownProps, type FilterConfig, type FilterMenuProps, type FilterMenuItemProps, type FilterDeferredContext, } from './filter-dropdown';

package/dist/components/organisms/multi-select/index.d.ts

@@ -1,2 +0,0 @@
-export { MultiSelect } from './multi-select';
-export type { MultiSelectProps, MultiSelectOption } from './multi-select';

package/dist/components/organisms/multi-select/multi-select.d.ts

@@ -1,65 +0,0 @@
-import * as React from "react";
-export interface MultiSelectOption {
-    value: string;
-    label: string;
-    icon?: string;
-}
-export interface MultiSelectProps {
-    /**
-     * Array of options to display in the dropdown
-     */
-    options: MultiSelectOption[];
-    /**
-     * Currently selected values (array of value strings)
-     */
-    value?: string[];
-    /**
-     * Callback fired when selection changes
-     */
-    onChange?: (value: string[]) => void;
-    /**
-     * Placeholder text when no items are selected
-     */
-    placeholder?: string;
-    /**
-     * Placeholder text for the search input
-     */
-    searchPlaceholder?: string;
-    /**
-     * Message to display when no options match the search
-     */
-    emptyMessage?: string;
-    /**
-     * Whether the component is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Optional label for the multi-select
-     */
-    label?: string;
-    /**
-     * Optional description text
-     */
-    description?: string;
-    /**
-     * Error message to display
-     */
-    error?: string;
-    /**
-     * Maximum number of items to display as badges before showing count
-     */
-    maxDisplay?: number;
-    /**
-     * Additional CSS classes for the trigger button
-     */
-    className?: string;
-    /**
-     * Whether to show badges for selected items
-     */
-    showBadges?: boolean;
-    /**
-     * Whether to allow clearing all selections
-     */
-    allowClear?: boolean;
-}
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;