@yuno-payments/dashboard-design-system 2.0.2 → 2.0.4-beta.0

package/dist/components/atoms/icon/directional-icons.d.ts

@@ -0,0 +1,12 @@
+/**
+ * List of icon names that represent directional concepts and should be
+ * automatically mirrored in RTL (right-to-left) layouts.
+ *
+ * These icons point left/right or imply horizontal direction, so they need
+ * to be flipped when the UI direction changes from LTR to RTL.
+ *
+ * @example
+ * - ArrowLeft in LTR → points left (back)
+ * - ArrowLeft in RTL → should point right (still means "back")
+ */
+export declare const DIRECTIONAL_ICONS: Set<string>;

package/dist/components/atoms/icon/directional-icons.js

@@ -0,0 +1,38 @@
+const r = /* @__PURE__ */ new Set([
+  // Arrows - horizontal direction
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowCircleLeft",
+  "ArrowCircleRight",
+  "ArrowCircleUpLeft",
+  "ArrowBendUpLeft",
+  "ArrowBendUpRight",
+  "ArrowElbowDownRight",
+  "ArrowUpRight",
+  "ArrowSquareIn",
+  // Carets - horizontal direction
+  "CaretLeft",
+  "CaretRight",
+  "CaretDoubleLeft",
+  "CaretDoubleRight",
+  "CaretCircleRight",
+  // Actions with implied direction
+  "SignOut",
+  "Export",
+  "PhoneOutgoing",
+  // Toggle switches (thumb position implies direction)
+  "ToggleLeft",
+  "ToggleRight",
+  // Trend indicators (arrow direction)
+  "TrendUp",
+  "TrendDown",
+  // Sort indicators
+  "SortAscending",
+  "SortDescending",
+  // Play control (points right in LTR)
+  "Play",
+  "PlayCircle"
+]);
+export {
+  r as DIRECTIONAL_ICONS
+};

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

@@ -30,6 +30,12 @@ interface IconProps extends Omit<PhosphorIconProps, "size">, VariantProps<typeof
      * Additional props to pass to the Tooltip component
      */
     tooltipProps?: Partial<TooltipProps>;
+    /**
+     * Auto-mirror icon in RTL layouts.
+     * Defaults to `true` for directional icons (arrows, chevrons, carets, etc.)
+     * Set to `false` to disable auto-mirroring for a specific icon.
+     */
+    autoMirrorRtl?: boolean;
 }
 /**
  * Icon component using Phosphor Icons with size variants and optional tooltip.

package/dist/components/atoms/icon/icon.js

@@ -1,10 +1,11 @@
-import { j as s } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as p } from "react";
-import { cva as u } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { cn as x } from "../../../lib/utils.js";
-import { IconList as z } from "./icon-list.js";
-import { Tooltip as d } from "../tooltip/tooltip.js";
-const j = u("inline-flex items-center justify-center shrink-0", {
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as d } from "react";
+import { cva as z } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { cn as I } from "../../../lib/utils.js";
+import { IconList as h } from "./icon-list.js";
+import { Tooltip as j } from "../tooltip/tooltip.js";
+import { DIRECTIONAL_ICONS as C } from "./directional-icons.js";
+const N = z("inline-flex items-center justify-center shrink-0", {
   variants: {
     size: {
       xs: "size-3",
@@ -17,34 +18,39 @@ const j = u("inline-flex items-center justify-center shrink-0", {
   defaultVariants: {
     size: "md"
   }
-}), g = p(
+}), g = d(
   ({
     name: r,
-    weight: t = "light",
+    weight: n = "light",
     size: e,
     className: c,
     color: l,
-    tooltip: i,
+    tooltip: o,
     tooltipProps: m,
-    ...a
-  }, f) => {
+    autoMirrorRtl: a,
+    ...f
+  }, u) => {
     if (!r)
       return null;
-    const o = z?.[r];
-    if (!o)
+    const i = h?.[r];
+    if (!i)
       return console.error("Missing icon", r), null;
-    const n = /* @__PURE__ */ s.jsx(
-      o,
+    const p = C.has(r), x = a ?? p, s = /* @__PURE__ */ t.jsx(
+      i,
       {
-        ref: f,
+        ref: u,
         "aria-label": r,
-        className: x(j({ size: e }), c),
+        className: I(
+          N({ size: e }),
+          x && "rtl:scale-x-[-1]",
+          c
+        ),
         color: l || "currentColor",
-        weight: t,
-        ...a
+        weight: n,
+        ...f
       }
     );
-    return i ? /* @__PURE__ */ s.jsx(d, { content: i, ...m, children: n }) : n;
+    return o ? /* @__PURE__ */ t.jsx(j, { content: o, ...m, children: s }) : s;
   }
 );
 g.displayName = "Icon";

package/dist/components/atoms/icon/index.d.ts

@@ -1,2 +1,3 @@
 export { Icon, type IconProps } from './icon';
 export { IconList, type IconName } from './icon-list';
+export { DIRECTIONAL_ICONS } from './directional-icons';

package/dist/components/atoms/radio-group/radio-group-option.js

@@ -1,7 +1,7 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
 import { RadioGroupItem as d } from "../../../vendor/shadcn/radio-group.js";
-import { cn as l } from "../../../lib/utils.js";
-import { Label as a } from "../label/label.js";
+import { cn as a } from "../../../lib/utils.js";
+import { Label as l } from "../label/label.js";
 const o = ({
   option: e,
   radioId: s,
@@ -22,23 +22,23 @@ const o = ({
       ),
       t ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
         /* @__PURE__ */ r.jsx(
-          a,
+          l,
           {
             htmlFor: s,
-            className: l(
+            className: a(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),
             children: e.label
           }
         ),
-        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground ml-auto", children: e.description })
+        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground ms-auto", children: e.description })
       ] }) : /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
         /* @__PURE__ */ r.jsx(
-          a,
+          l,
           {
             htmlFor: s,
-            className: l(
+            className: a(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),

package/dist/components/organisms/data-table/utils/data-table-styles.d.ts

@@ -222,7 +222,7 @@ export declare function getCellStyles<TData, TValue>(column: Column<TData, TValu
         maxHeight?: import("csstype").Property.MaxHeight<string | number> | undefined;
         maxInlineSize?: import("csstype").Property.MaxInlineSize<string | number> | undefined;
         maxLines?: import("csstype").Property.MaxLines | undefined;
-        maxWidth?: import("csstype").Property.MaxWidth<string | number> | undefined;
+        maxWidth?: string | number | undefined;
         minBlockSize?: import("csstype").Property.MinBlockSize<string | number> | undefined;
         minHeight?: import("csstype").Property.MinHeight<string | number> | undefined;
         minInlineSize?: import("csstype").Property.MinInlineSize<string | number> | undefined;
@@ -1874,11 +1874,11 @@ export declare function getCellStyles<TData, TValue>(column: Column<TData, TValu
         maxHeight?: import("csstype").Property.MaxHeight<string | number> | undefined;
         maxInlineSize?: import("csstype").Property.MaxInlineSize<string | number> | undefined;
         maxLines?: import("csstype").Property.MaxLines | undefined;
-        maxWidth?: import("csstype").Property.MaxWidth<string | number> | undefined;
+        maxWidth?: string | number | undefined;
         minBlockSize?: import("csstype").Property.MinBlockSize<string | number> | undefined;
         minHeight?: import("csstype").Property.MinHeight<string | number> | undefined;
         minInlineSize?: import("csstype").Property.MinInlineSize<string | number> | undefined;
-        minWidth?: import("csstype").Property.MinWidth<string | number> | undefined;
+        minWidth?: string | number | undefined;
         mixBlendMode?: import("csstype").Property.MixBlendMode | undefined;
         motionDistance?: import("csstype").Property.OffsetDistance<string | number> | undefined;
         motionPath?: import("csstype").Property.OffsetPath | undefined;

package/dist/components/organisms/data-table/utils/data-table-styles.js

@@ -1,38 +1,35 @@
 import { cn as o } from "../../../../lib/utils.js";
-import { getPinnedStyles as p } from "./data-table-utils.js";
-import { PINNED_SHADOW_CLASS as l } from "./data-table-constants.js";
-function f(t, r, d) {
-  const s = t.getIsPinned(), e = t.getSize(), i = t.id === "_spacer", a = t.columnDef.enableResizing === !1 && !i;
+import { getPinnedStyles as f } from "./data-table-utils.js";
+import { PINNED_SHADOW_CLASS as p } from "./data-table-constants.js";
+function l(t, i, e) {
+  return t ? { width: "auto", minWidth: 0 } : i ? {
+    width: `${e}px`,
+    minWidth: `${e}px`,
+    maxWidth: `${e}px`
+  } : { width: `${e}px` };
+}
+function m(t, i, e) {
+  const s = t.getIsPinned(), d = t.getSize(), n = t.id === "_spacer", a = t.columnDef.enableResizing === !1 && !n;
   return {
     style: {
-      // Spacer column should not have a fixed width, let it absorb remaining space
-      ...i ? {
-        width: "auto",
-        minWidth: 0
-      } : a ? {
-        width: `${e}px`,
-        minWidth: `${e}px`,
-        maxWidth: `${e}px`
-      } : {
-        width: `${e}px`
-      },
-      ...p(
+      ...l(n, a, d),
+      ...f(
         s,
-        (n) => t.getStart(n),
-        (n) => t.getAfter(n),
-        d
+        (r) => t.getStart(r),
+        (r) => t.getAfter(r),
+        e
       )
     },
     className: o(
-      r,
-      s && l,
+      i,
+      s && p,
       // Add a class to identify fixed-size columns
       a && "data-table-fixed-column",
       // Hide spacer column visually
-      i && "data-table-spacer"
+      n && "data-table-spacer"
     )
   };
 }
 export {
-  f as getCellStyles
+  m as getCellStyles
 };

package/dist/components/organisms/data-table/utils/data-table-utils.js

@@ -1,20 +1,23 @@
-function f(e) {
+function r(e) {
   return typeof e == "object" && e !== null && "title" in e && typeof e.title == "string";
 }
-function n(e) {
+function f(e) {
   return typeof e.columnDef.header == "string" ? e.columnDef.header : e.columnDef.header && typeof e.columnDef.header == "object" && "title" in e.columnDef.header ? e.columnDef.header.title : e.id;
 }
-function o(e, t, i, r) {
+function o(e, t, i, n) {
   return e ? {
     position: "sticky",
-    left: e === "left" ? `${t("left")}px` : void 0,
-    right: e === "right" ? `${i("right")}px` : void 0,
+    // Use logical properties so pinned columns work in both LTR and RTL.
+    // "left"-pinned columns stick to the inline-start edge,
+    // "right"-pinned columns (e.g. actions) stick to the inline-end edge.
+    insetInlineStart: e === "left" ? `${t("left")}px` : void 0,
+    insetInlineEnd: e === "right" ? `${i("right")}px` : void 0,
     zIndex: 10,
-    backgroundColor: r
+    backgroundColor: n
   } : {};
 }
 export {
-  n as getColumnDisplayName,
+  f as getColumnDisplayName,
   o as getPinnedStyles,
-  f as isHeaderConfig
+  r as isHeaderConfig
 };