@yuno-payments/dashboard-design-system 2.2.0 → 2.2.1-beta.2

package/dist/lib/utils.d.ts

@@ -16,3 +16,16 @@ export declare function normalizeDimension(value: number | string | undefined):
  * @returns The truncated string or the original if it's shorter than strLen
  */
 export declare function truncate(fullStr: string, strLen?: number, separator?: string, frontChars?: number, backChars?: number): string;
+/**
+ * Supported language codes for i18n
+ */
+export type SupportedLanguage = "en" | "es" | "ja" | "ar" | "fr" | "pt" | "tr" | "ru" | "de" | "zh";
+/**
+ * localStorage key for storing the user's preferred language
+ */
+export declare const LANGUAGE_STORAGE_KEY = "yuno-lang";
+/**
+ * Gets the default language from localStorage, falling back to "en"
+ * @returns The language code from localStorage or "en" as default
+ */
+export declare function getDefaultLanguage(): SupportedLanguage;

package/dist/lib/utils.js

@@ -1,17 +1,41 @@
-import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
-import { twMerge as m } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
-function g(...n) {
-  return m(e(n));
+import { clsx as i } from "../node_modules/clsx/dist/clsx.js";
+import { twMerge as u } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
+function a(...n) {
+  return u(i(n));
 }
-function p(n) {
+function d(n) {
   if (n !== void 0)
     return typeof n == "number" ? `${n}px` : n;
 }
-function u(n, r = 8, t = "...", i = 3, o = 4) {
-  return n.length <= r ? n : n.substring(0, i) + t + n.substring(n.length - o);
+function m(n, t = 8, e = "...", r = 3, o = 4) {
+  return n.length <= t ? n : n.substring(0, r) + e + n.substring(n.length - o);
+}
+const c = [
+  "en",
+  "es",
+  "ja",
+  "ar",
+  "fr",
+  "pt",
+  "tr",
+  "ru",
+  "de",
+  "zh"
+], g = "yuno-lang";
+function p() {
+  if (typeof window > "u") return "en";
+  try {
+    const n = localStorage.getItem(g);
+    if (n && c.includes(n))
+      return n;
+  } catch {
+  }
+  return "en";
 }
 export {
-  g as cn,
-  p as normalizeDimension,
-  u as truncate
+  g as LANGUAGE_STORAGE_KEY,
+  a as cn,
+  p as getDefaultLanguage,
+  d as normalizeDimension,
+  m as truncate
 };

package/dist/vendor/shadcn/pagination.d.ts

@@ -15,16 +15,32 @@ declare const PaginationLink: {
     ({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {
+    /** Custom label text (default: "Previous") */
+    label?: string;
+    /** Custom aria-label (default: "Go to previous page") */
+    ariaLabel?: string;
+};
 declare const PaginationPrevious: {
-    ({ className, size, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+    ({ className, size, label, ariaLabel, ...props }: PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {
+    /** Custom label text (default: "Next") */
+    label?: string;
+    /** Custom aria-label (default: "Go to next page") */
+    ariaLabel?: string;
+};
 declare const PaginationNext: {
-    ({ className, size, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+    ({ className, size, label, ariaLabel, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+type PaginationEllipsisProps = React.ComponentProps<"span"> & {
+    /** Screen reader text (default: "More pages") */
+    srLabel?: string;
+};
 declare const PaginationEllipsis: {
-    ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    ({ className, srLabel, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/vendor/shadcn/pagination.js

@@ -1,10 +1,9 @@
 import { j as s } from "../../_virtual/jsx-runtime.js";
-import * as o from "react";
+import * as l from "react";
 import { cn as n } from "../../lib/utils.js";
-import { buttonVariants as l } from "./button.js";
-import m from "../../node_modules/lucide-react/dist/esm/icons/ellipsis.js";
-import p from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
-import c from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import { buttonVariants as p } from "./button.js";
+import { Icon as m } from "../../components/atoms/icon/icon.js";
+import c from "../../node_modules/lucide-react/dist/esm/icons/ellipsis.js";
 const g = ({ className: i, ...a }) => /* @__PURE__ */ s.jsx(
   "nav",
   {
@@ -15,7 +14,7 @@ const g = ({ className: i, ...a }) => /* @__PURE__ */ s.jsx(
   }
 );
 g.displayName = "Pagination";
-const x = o.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ s.jsx(
+const x = l.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ s.jsx(
   "ul",
   {
     ref: e,
@@ -24,76 +23,81 @@ const x = o.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ s.jsx(
   }
 ));
 x.displayName = "PaginationContent";
-const f = o.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ s.jsx("li", { ref: e, className: n("", i), ...a }));
-f.displayName = "PaginationItem";
-const t = ({
+const d = l.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ s.jsx("li", { ref: e, className: n("", i), ...a }));
+d.displayName = "PaginationItem";
+const r = ({
   className: i,
   isActive: a,
   size: e = "icon",
-  ...r
+  ...t
 }) => /* @__PURE__ */ s.jsx(
   "a",
   {
     "aria-current": a ? "page" : void 0,
     className: n(
-      l({
+      p({
         variant: a ? "outline" : "ghost",
         size: e
       }),
       i
     ),
-    ...r
+    ...t
   }
 );
-t.displayName = "PaginationLink";
-const N = ({
+r.displayName = "PaginationLink";
+const f = ({
   className: i,
   size: a = "default",
-  ...e
+  label: e = "Previous",
+  ariaLabel: t = "Go to previous page",
+  ...o
 }) => /* @__PURE__ */ s.jsxs(
-  t,
+  r,
   {
-    "aria-label": "Go to previous page",
+    "aria-label": t,
     size: a,
     className: n("gap-1 pl-2.5 pr-4", i),
-    ...e,
+    ...o,
     children: [
-      /* @__PURE__ */ s.jsx(c, { className: "size-4" }),
-      /* @__PURE__ */ s.jsx("span", { children: "Previous" })
+      /* @__PURE__ */ s.jsx(m, { name: "CaretLeft", size: "sm" }),
+      /* @__PURE__ */ s.jsx("span", { children: e })
     ]
   }
 );
-N.displayName = "PaginationPrevious";
-const d = ({
+f.displayName = "PaginationPrevious";
+const N = ({
   className: i,
   size: a = "default",
-  ...e
+  label: e = "Next",
+  ariaLabel: t = "Go to next page",
+  ...o
 }) => /* @__PURE__ */ s.jsxs(
-  t,
+  r,
   {
-    "aria-label": "Go to next page",
+    "aria-label": t,
     size: a,
     className: n("gap-1 pl-4 pr-2.5", i),
-    ...e,
+    ...o,
     children: [
-      /* @__PURE__ */ s.jsx("span", { children: "Next" }),
-      /* @__PURE__ */ s.jsx(p, { className: "size-4" })
+      /* @__PURE__ */ s.jsx("span", { children: e }),
+      /* @__PURE__ */ s.jsx(m, { name: "CaretRight", size: "sm" })
     ]
   }
 );
-d.displayName = "PaginationNext";
+N.displayName = "PaginationNext";
 const j = ({
   className: i,
-  ...a
+  srLabel: a = "More pages",
+  ...e
 }) => /* @__PURE__ */ s.jsxs(
   "span",
   {
     "aria-hidden": !0,
     className: n("flex size-9 items-center justify-center", i),
-    ...a,
+    ...e,
     children: [
-      /* @__PURE__ */ s.jsx(m, { className: "size-4" }),
-      /* @__PURE__ */ s.jsx("span", { className: "sr-only", children: "More pages" })
+      /* @__PURE__ */ s.jsx(c, { className: "size-4" }),
+      /* @__PURE__ */ s.jsx("span", { className: "sr-only", children: a })
     ]
   }
 );
@@ -102,8 +106,8 @@ export {
   g as Pagination,
   x as PaginationContent,
   j as PaginationEllipsis,
-  f as PaginationItem,
-  t as PaginationLink,
-  d as PaginationNext,
-  N as PaginationPrevious
+  d as PaginationItem,
+  r as PaginationLink,
+  N as PaginationNext,
+  f as PaginationPrevious
 };

package/dist/vendor/shadcn/select.js

@@ -1,71 +1,71 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-import * as l from "react";
+import * as d from "react";
 import * as e from "@radix-ui/react-select";
-import { Icon as n } from "../../components/atoms/icon/icon.js";
-import { cn as o } from "../../lib/utils.js";
-const j = e.Root, N = e.Group, b = e.Value, p = l.forwardRef(({ className: s, children: r, ...a }, d) => /* @__PURE__ */ t.jsxs(
+import { Icon as l } from "../../components/atoms/icon/icon.js";
+import { cn as r } from "../../lib/utils.js";
+const j = e.Root, N = e.Group, b = e.Value, p = d.forwardRef(({ className: s, children: o, ...a }, n) => /* @__PURE__ */ t.jsxs(
   e.Trigger,
   {
-    ref: d,
-    className: o(
+    ref: n,
+    className: r(
       "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:opacity-50 shadow-xs [&>span]:min-w-0 [&>span]:truncate",
       s
     ),
     ...a,
     children: [
-      r,
-      /* @__PURE__ */ t.jsx(e.Icon, { asChild: !0, children: /* @__PURE__ */ t.jsx(n, { name: "CaretDown", size: "sm", className: "opacity-50 shrink-0" }) })
+      o,
+      /* @__PURE__ */ t.jsx(e.Icon, { asChild: !0, children: /* @__PURE__ */ t.jsx(l, { name: "CaretDown", size: "sm", className: "opacity-50 shrink-0" }) })
     ]
   }
 ));
 p.displayName = e.Trigger.displayName;
-const i = l.forwardRef(({ className: s, ...r }, a) => /* @__PURE__ */ t.jsx(
+const i = d.forwardRef(({ className: s, ...o }, a) => /* @__PURE__ */ t.jsx(
   e.ScrollUpButton,
   {
     ref: a,
-    className: o(
+    className: r(
       "flex cursor-default items-center justify-center py-1",
       s
     ),
-    ...r,
-    children: /* @__PURE__ */ t.jsx(n, { name: "CaretUp", size: "sm" })
+    ...o,
+    children: /* @__PURE__ */ t.jsx(l, { name: "CaretUp", size: "sm" })
   }
 ));
 i.displayName = e.ScrollUpButton.displayName;
-const c = l.forwardRef(({ className: s, ...r }, a) => /* @__PURE__ */ t.jsx(
+const c = d.forwardRef(({ className: s, ...o }, a) => /* @__PURE__ */ t.jsx(
   e.ScrollDownButton,
   {
     ref: a,
-    className: o(
+    className: r(
       "flex cursor-default items-center justify-center py-1",
       s
     ),
-    ...r,
-    children: /* @__PURE__ */ t.jsx(n, { name: "CaretDown", size: "sm" })
+    ...o,
+    children: /* @__PURE__ */ t.jsx(l, { name: "CaretDown", size: "sm" })
   }
 ));
 c.displayName = e.ScrollDownButton.displayName;
-const f = l.forwardRef(({ className: s, children: r, position: a = "popper", ...d }, m) => /* @__PURE__ */ t.jsx(e.Portal, { children: /* @__PURE__ */ t.jsxs(
+const f = d.forwardRef(({ className: s, children: o, position: a = "popper", ...n }, m) => /* @__PURE__ */ t.jsx(e.Portal, { children: /* @__PURE__ */ t.jsxs(
   e.Content,
   {
     ref: m,
-    className: o(
+    className: r(
       "relative z-[1100] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       a === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       s
     ),
     position: a,
-    ...d,
+    ...n,
     children: [
       /* @__PURE__ */ t.jsx(i, {}),
       /* @__PURE__ */ t.jsx(
         e.Viewport,
         {
-          className: o(
+          className: r(
             "p-1",
             a === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           ),
-          children: r
+          children: o
         }
       ),
       /* @__PURE__ */ t.jsx(c, {})
@@ -73,40 +73,40 @@ const f = l.forwardRef(({ className: s, children: r, position: a = "popper", ...
   }
 ) }));
 f.displayName = e.Content.displayName;
-const u = l.forwardRef(({ className: s, ...r }, a) => /* @__PURE__ */ t.jsx(
+const u = d.forwardRef(({ className: s, ...o }, a) => /* @__PURE__ */ t.jsx(
   e.Label,
   {
     ref: a,
-    className: o(
+    className: r(
       "px-2 py-1.5 text-xs font-medium text-muted-foreground",
       s
     ),
-    ...r
+    ...o
   }
 ));
 u.displayName = e.Label.displayName;
-const x = l.forwardRef(({ className: s, children: r, ...a }, d) => /* @__PURE__ */ t.jsxs(
+const x = d.forwardRef(({ className: s, children: o, ...a }, n) => /* @__PURE__ */ t.jsxs(
   e.Item,
   {
-    ref: d,
-    className: o(
-      "relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    ref: n,
+    className: r(
+      "relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 ps-2 pe-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       s
     ),
     ...a,
     children: [
-      /* @__PURE__ */ t.jsx("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t.jsx(e.ItemIndicator, { children: /* @__PURE__ */ t.jsx(n, { name: "Check", size: "sm" }) }) }),
-      /* @__PURE__ */ t.jsx(e.ItemText, { children: r })
+      /* @__PURE__ */ t.jsx("span", { className: "absolute end-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t.jsx(e.ItemIndicator, { children: /* @__PURE__ */ t.jsx(l, { name: "Check", size: "sm" }) }) }),
+      /* @__PURE__ */ t.jsx(e.ItemText, { children: o })
     ]
   }
 ));
 x.displayName = e.Item.displayName;
-const g = l.forwardRef(({ className: s, ...r }, a) => /* @__PURE__ */ t.jsx(
+const g = d.forwardRef(({ className: s, ...o }, a) => /* @__PURE__ */ t.jsx(
   e.Separator,
   {
     ref: a,
-    className: o("-mx-1 my-1 h-px bg-muted", s),
-    ...r
+    className: r("-mx-1 my-1 h-px bg-muted", s),
+    ...o
   }
 ));
 g.displayName = e.Separator.displayName;

package/dist/vendor/shadcn/switch.js

@@ -20,7 +20,7 @@ function d({
         {
           "data-slot": "switch-thumb",
           className: a(
-            "bg-input dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+            "bg-input dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:ltr:translate-x-[calc(100%-2px)] data-[state=checked]:rtl:-translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
           )
         }
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "2.2.0",
+  "version": "2.2.1-beta.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -128,6 +128,8 @@
     "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "postcss-rtlcss": "^5.5.0",
+    "@tailwindcss/postcss": "^4.0.0"
   }
 }

package/registry/components-registry.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.2.0",
-  "generatedAt": "2026-03-25T11:50:35.573Z",
+  "version": "2.2.1-beta.2",
+  "generatedAt": "2026-03-26T18:26:44.303Z",
   "components": [
     {
       "name": "AccessDeniedAlert",
@@ -1261,6 +1261,13 @@
           "type": "unknown",
           "required": true,
           "description": "Callback when end time changes"
+        },
+        {
+          "name": "labels",
+          "type": "FilterDateRangeLabels",
+          "default": "undefined (uses English defaults)",
+          "required": false,
+          "description": "Labels for i18n/translation support. Keys: custom, today, last3Days, last7Days, last30Days, thisMonth, allTime, startDate, endDate"
         }
       ],
       "examples": []
@@ -1334,6 +1341,13 @@
           "type": "string",
           "required": true,
           "description": "Optional tooltip text that appears on hover"
+        },
+        {
+          "name": "autoMirrorRtl",
+          "type": "boolean",
+          "default": "true (for directional icons)",
+          "required": false,
+          "description": "Auto-mirror icon in RTL layouts. Defaults to true for directional icons (arrows, chevrons, carets)"
         }
       ],
       "examples": [
@@ -3565,28 +3579,40 @@
           "type": "(page: number) => void",
           "required": true,
           "description": "Callback function when a page number is clicked"
+        },
+        {
+          "name": "lang",
+          "type": "PaginationLanguage",
+          "required": true,
+          "description": "Language for translations. Falls back to localStorage 'yuno-lang', then 'en'."
+        },
+        {
+          "name": "translations",
+          "type": "Partial<PaginationTranslations>",
+          "required": true,
+          "description": "Custom translations to override default language strings"
         }
       ],
       "examples": [
         {
-          "name": "CustomDisabled",
-          "code": "<Pagination currentPage={5} totalPages={10} disableNext />"
+          "name": "Arabic",
+          "code": "<Pagination currentPage={5} totalPages={10} lang=\"ar\" />"
         },
         {
-          "name": "Default",
-          "code": "<Pagination currentPage={2} totalPages={10} />"
+          "name": "Chinese",
+          "code": "<Pagination currentPage={5} totalPages={10} lang=\"zh\" />"
         },
         {
-          "name": "FewPages",
-          "code": "<Pagination currentPage={2} totalPages={5} />"
+          "name": "CustomDisabled",
+          "code": "<Pagination currentPage={5} totalPages={10} disableNext />"
         },
         {
-          "name": "FirstPage",
-          "code": "<Pagination currentPage={1} totalPages={10} />"
+          "name": "CustomTranslations",
+          "code": "<Pagination currentPage={5} totalPages={10} translations={{\"previous\":\"Back\",\"next\":\"Forward\"}} />"
         },
         {
-          "name": "LastPage",
-          "code": "<Pagination currentPage={10} totalPages={10} />"
+          "name": "Default",
+          "code": "<Pagination currentPage={2} totalPages={10} />"
         }
       ],
       "figmaComponent": "https://www.figma.com/design/fcHm3yuz9KiqdRHM7oWneG/shadcn-ui-kit--Yuno-?node-id=17086-206986&m=dev"