@yuno-payments/dashboard-design-system 2.4.2-rtl.4 → 2.4.2-rtl.7

package/dist/components/atoms/typography/typography.js

@@ -15,8 +15,8 @@ const d = s("font-sans", {
       xs: "text-xs font-medium leading-none",
       sm: "text-sm font-medium leading-none",
       muted: "text-sm text-muted-foreground",
-      blockquote: "mt-6 border-l-2 pl-6 italic",
-      list: "my-6 ml-6 list-disc [&>li]:mt-2"
+      blockquote: "mt-6 border-s-2 ps-6 italic",
+      list: "my-6 ms-6 list-disc [&>li]:mt-2"
     },
     weight: {
       regular: "font-normal",
@@ -52,12 +52,12 @@ function u(t) {
   }
 }
 const x = m(
-  ({ className: t, variant: e = "p", weight: r, as: o, ...l }, a) => {
+  ({ className: t, variant: e = "p", weight: r, as: o, ...a }, l) => {
     const n = o || u(e ?? "p");
     return c(n, {
       className: i(d(r !== void 0 ? { variant: e, weight: r } : { variant: e }), t),
-      ref: a,
-      ...l
+      ref: l,
+      ...a
     });
   }
 );

package/dist/components/molecules/select/search-select.js

@@ -1,48 +1,48 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as r from "react";
-import { cn as a } from "../../../lib/utils.js";
-import { FieldLabel as A } from "../../../vendor/shadcn/field.js";
+import * as l from "react";
+import { cn as a, getDirection as A } from "../../../lib/utils.js";
+import { FieldLabel as B } from "../../../vendor/shadcn/field.js";
 import { Icon as b } from "../../atoms/icon/icon.js";
-import { Combobox as B, ComboboxTrigger as H, ComboboxContent as J } from "../../../vendor/shadcn/combobox.js";
-import { Command as K, CommandInput as M, CommandList as P, CommandEmpty as Q, CommandGroup as U, CommandItem as G } from "../../../vendor/shadcn/command.js";
+import { Combobox as H, ComboboxTrigger as J, ComboboxContent as K } from "../../../vendor/shadcn/combobox.js";
+import { Command as M, CommandInput as P, CommandList as Q, CommandEmpty as U, CommandGroup as W, CommandItem as G } from "../../../vendor/shadcn/command.js";
 import { Typography as x } from "../../atoms/typography/typography.js";
-const W = r.forwardRef(
+const X = l.forwardRef(
   ({
     label: j,
     description: N,
     error: u,
     optional: L = !1,
     placeholder: k = "Select an option",
-    value: l,
+    value: r,
     defaultValue: p,
     onChange: h,
     disabled: f = !1,
     options: c = [],
-    groups: o = [],
+    groups: i = [],
     className: E,
     id: g,
     searchPlaceholder: z = "Search",
     maxHeight: F = 300
   }, I) => {
-    const [i, C] = r.useState(!1), [v, S] = r.useState(""), d = o.length > 0, w = c.length > 0, R = r.useCallback(() => {
-      if (!l) return null;
+    const [o, C] = l.useState(!1), [v, S] = l.useState(""), d = i.length > 0, w = c.length > 0, D = l.useCallback(() => {
+      if (!r) return null;
       if (d)
-        for (const s of o) {
-          const n = s.options.find((t) => t.value === l);
+        for (const s of i) {
+          const n = s.options.find((t) => t.value === r);
           if (n) return n.label;
         }
       else if (w) {
-        const s = c.find((n) => n.value === l);
+        const s = c.find((n) => n.value === r);
         if (s) return s.label;
       }
       return null;
-    }, [l, o, c, d, w]), T = r.useCallback(
+    }, [r, i, c, d, w]), R = l.useCallback(
       (s) => {
         if (!s)
-          return { filteredOptions: c, filteredGroups: o };
+          return { filteredOptions: c, filteredGroups: i };
         const n = s.toLowerCase();
         if (d) {
-          const t = o.map((m) => ({
+          const t = i.map((m) => ({
             ...m,
             options: m.options.filter(
               (V) => V.label.toLowerCase().includes(n)
@@ -54,26 +54,26 @@ const W = r.forwardRef(
             (m) => m.label.toLowerCase().includes(n)
           ), filteredGroups: [] };
       },
-      [c, o, d]
-    ), { filteredOptions: q, filteredGroups: D } = T(v);
-    r.useEffect(() => {
-      i && setTimeout(() => {
+      [c, i, d]
+    ), { filteredOptions: T, filteredGroups: q } = R(v);
+    l.useEffect(() => {
+      o && setTimeout(() => {
         document.querySelector(
           '[data-slot="command-input"]'
         )?.focus();
       }, 0);
-    }, [i]), r.useEffect(() => {
-      i || S("");
-    }, [i]), r.useEffect(() => {
-      p && !l && h?.(p);
-    }, [p, l, h]);
+    }, [o]), l.useEffect(() => {
+      o || S("");
+    }, [o]), l.useEffect(() => {
+      p && !r && h?.(p);
+    }, [p, r, h]);
     const y = (s) => {
       f || (h?.(s), C(!1));
-    }, O = R();
-    return /* @__PURE__ */ e.jsxs("div", { className: a("w-full", E), children: [
+    }, O = D();
+    return /* @__PURE__ */ e.jsxs("div", { dir: A(), className: a("w-full", E), children: [
       j && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
         /* @__PURE__ */ e.jsx(
-          A,
+          B,
           {
             htmlFor: g,
             className: a(f && "text-muted-foreground"),
@@ -93,8 +93,8 @@ const W = r.forwardRef(
           children: N
         }
       ),
-      /* @__PURE__ */ e.jsxs(B, { open: i, onOpenChange: C, children: [
-        /* @__PURE__ */ e.jsx(H, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(H, { open: o, onOpenChange: C, children: [
+        /* @__PURE__ */ e.jsx(J, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             ref: I,
@@ -102,7 +102,7 @@ const W = r.forwardRef(
             type: "button",
             disabled: f,
             role: "combobox",
-            "aria-expanded": i,
+            "aria-expanded": o,
             "aria-haspopup": "listbox",
             className: a(
               "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:text-muted- shadow-xs [&>span]:min-w-0 [&>span]:truncate",
@@ -130,17 +130,17 @@ const W = r.forwardRef(
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(J, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(K, { shouldFilter: !1, children: [
+        /* @__PURE__ */ e.jsx(K, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(M, { shouldFilter: !1, children: [
           /* @__PURE__ */ e.jsx(
-            M,
+            P,
             {
               placeholder: z,
               value: v,
               onValueChange: S
             }
           ),
-          /* @__PURE__ */ e.jsxs(P, { style: { maxHeight: F }, children: [
-            /* @__PURE__ */ e.jsx(Q, { children: /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ e.jsxs(Q, { style: { maxHeight: F }, children: [
+            /* @__PURE__ */ e.jsx(U, { children: /* @__PURE__ */ e.jsx(
               x,
               {
                 variant: "sm",
@@ -148,7 +148,7 @@ const W = r.forwardRef(
                 children: "No results found."
               }
             ) }),
-            d ? D.map((s, n) => /* @__PURE__ */ e.jsxs(U, { children: [
+            d ? q.map((s, n) => /* @__PURE__ */ e.jsxs(W, { children: [
               s.label && /* @__PURE__ */ e.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: s.label }),
               s.options.map((t) => /* @__PURE__ */ e.jsxs(
                 G,
@@ -157,14 +157,14 @@ const W = r.forwardRef(
                   onSelect: () => y(t.value),
                   className: a(
                     "cursor-pointer",
-                    l === t.value && "bg-accent"
+                    r === t.value && "bg-accent"
                   ),
                   children: [
                     /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
                       t.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: t.icon }),
                       t.label
                     ] }),
-                    l === t.value && /* @__PURE__ */ e.jsx(
+                    r === t.value && /* @__PURE__ */ e.jsx(
                       b,
                       {
                         name: "Check",
@@ -176,21 +176,21 @@ const W = r.forwardRef(
                 },
                 t.value
               ))
-            ] }, n)) : q.map((s) => /* @__PURE__ */ e.jsxs(
+            ] }, n)) : T.map((s) => /* @__PURE__ */ e.jsxs(
               G,
               {
                 value: s.value,
                 onSelect: () => y(s.value),
                 className: a(
                   "cursor-pointer",
-                  l === s.value && "bg-accent"
+                  r === s.value && "bg-accent"
                 ),
                 children: [
                   /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
                     s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
                     s.label
                   ] }),
-                  l === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
+                  r === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
                 ]
               },
               s.value
@@ -202,7 +202,7 @@ const W = r.forwardRef(
     ] });
   }
 );
-W.displayName = "SearchSelect";
+X.displayName = "SearchSelect";
 export {
-  W as SearchSelect
+  X as SearchSelect
 };

package/dist/components/organisms/aggregated-table/aggregated-table.js

@@ -1,24 +1,24 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as N, useMemo as h, useCallback as R } from "react";
-import { useReactTable as v, flexRender as x } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { cn as n } from "../../../lib/utils.js";
-import { TableHeader as C, TableRow as m, TableHead as k, TableBody as D, TableCell as f, TableFooter as w } from "../../../vendor/shadcn/table.js";
+import { forwardRef as N, useMemo as x, useCallback as R } from "react";
+import { useReactTable as v, flexRender as f } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { cn as l } from "../../../lib/utils.js";
+import { TableHeader as C, TableRow as c, TableHead as k, TableBody as D, TableCell as h, TableFooter as w } from "../../../vendor/shadcn/table.js";
 import { calculateTotalsRow as z, isActionsColumn as M } from "./aggregated-table.helpers.js";
 import { getCoreRowModel as H } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
 function K({
-  rows: c,
-  columns: l,
-  aggregationLabel: d = "Total",
+  rows: d,
+  columns: n,
+  aggregationLabel: m = "Total",
   onRowClick: i,
   className: p,
   ...j
 }, y) {
-  const g = h(
-    () => l.some((t) => t.aggregationFn),
-    [l]
-  ), u = h(() => g ? z({ rows: c, columns: l, aggregationLabel: d }) : null, [c, l, d, g]), b = v({
-    data: c,
-    columns: l,
+  const g = x(
+    () => n.some((t) => t.aggregationFn),
+    [n]
+  ), u = x(() => g ? z({ rows: d, columns: n, aggregationLabel: m }) : null, [d, n, m, g]), b = v({
+    data: d,
+    columns: n,
     getCoreRowModel: H()
   }), A = R(
     (t, e) => {
@@ -30,14 +30,14 @@ function K({
     "div",
     {
       ref: y,
-      className: n(
+      className: l(
         "h-full rounded-lg border border-border overflow-auto",
         p
       ),
       ...j,
       children: /* @__PURE__ */ r.jsxs("table", { className: "w-full h-full border-collapse", children: [
         /* @__PURE__ */ r.jsx(C, { className: "sticky top-0 z-10", children: b.getHeaderGroups().map((t) => /* @__PURE__ */ r.jsx(
-          m,
+          c,
           {
             className: "border-b border-border bg-muted hover:bg-muted",
             children: t.headers.map((e, s) => {
@@ -45,17 +45,17 @@ function K({
               return /* @__PURE__ */ r.jsx(
                 k,
                 {
-                  className: n(
+                  className: l(
                     "h-12 px-4 text-sm font-medium text-muted-foreground bg-muted",
-                    s === 0 && "pl-6",
+                    s === 0 && "ps-6",
                     o?.headerAlign === "right" && "text-right",
-                    a && "sticky right-0 px-0"
+                    a && "sticky end-0 px-0"
                   ),
                   style: {
                     minWidth: e.column.columnDef.minSize,
                     width: e.column.columnDef.size
                   },
-                  children: e.isPlaceholder ? null : x(
+                  children: e.isPlaceholder ? null : f(
                     e.column.columnDef.header,
                     e.getContext()
                   )
@@ -68,9 +68,9 @@ function K({
         )) }),
         /* @__PURE__ */ r.jsxs(D, { children: [
           b.getRowModel().rows.map((t) => /* @__PURE__ */ r.jsx(
-            m,
+            c,
             {
-              className: n(
+              className: l(
                 "h-12 border-b border-border bg-card text-foreground",
                 "hover:bg-muted",
                 i && "cursor-pointer"
@@ -79,16 +79,16 @@ function K({
               children: t.getVisibleCells().map((e, s) => {
                 const o = e.column.columnDef.meta, a = o?.isActions;
                 return /* @__PURE__ */ r.jsx(
-                  f,
+                  h,
                   {
-                    className: n(
+                    className: l(
                       "px-4 text-sm",
-                      s === 0 && "pl-6",
+                      s === 0 && "ps-6",
                       o?.headerAlign === "right" && "text-right",
-                      a && "sticky right-0 bg-card px-0"
+                      a && "sticky end-0 bg-card px-0"
                     ),
                     ...a ? { "data-column": "actions" } : {},
-                    children: x(e.column.columnDef.cell, e.getContext())
+                    children: f(e.column.columnDef.cell, e.getContext())
                   },
                   e.id
                 );
@@ -98,16 +98,16 @@ function K({
           )),
           /* @__PURE__ */ r.jsx("tr", { "aria-hidden": "true" })
         ] }),
-        u && /* @__PURE__ */ r.jsx(w, { className: "sticky bottom-0 z-10 bg-muted", children: /* @__PURE__ */ r.jsx(m, { className: "h-12 bg-muted text-foreground hover:bg-muted", children: l.map((t, e) => {
+        u && /* @__PURE__ */ r.jsx(w, { className: "sticky bottom-0 z-10 bg-muted", children: /* @__PURE__ */ r.jsx(c, { className: "h-12 bg-muted text-foreground hover:bg-muted", children: n.map((t, e) => {
           const s = M(t), o = ("accessorKey" in t && typeof t.accessorKey == "string" ? t.accessorKey : t.id) || String(e), a = s ? null : u[o], T = t.meta;
           return /* @__PURE__ */ r.jsx(
-            f,
+            h,
             {
-              className: n(
+              className: l(
                 "px-4 text-sm font-bold bg-muted",
-                e === 0 && "pl-6",
+                e === 0 && "ps-6",
                 T?.headerAlign === "right" && "text-right",
-                s && "sticky right-0 px-0"
+                s && "sticky end-0 px-0"
               ),
               children: a ?? ""
             },