@yuno-payments/dashboard-design-system 1.4.4-RTL.2 → 2.0.2

package/dist/components/atoms/alert/alert.js

@@ -1,16 +1,16 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { Alert as a, AlertTitle as i, AlertDescription as f } from "../../../vendor/shadcn/alert.js";
-import { forwardRef as n } from "react";
-import { Icon as p } from "../icon/icon.js";
-import { cn as x } from "../../../lib/utils.js";
-const c = n(
-  ({ icon: e, title: m, description: s, iconProps: t, ...l }, o) => /* @__PURE__ */ r.jsxs(a, { ref: o, ...l, children: [
-    e && /* @__PURE__ */ r.jsx(p, { name: e, className: x("size-4", t?.className), ...t }),
-    m && /* @__PURE__ */ r.jsx(i, { children: m }),
-    s && /* @__PURE__ */ r.jsx(f, { children: s })
+import { Alert as n, AlertTitle as c, AlertDescription as f } from "../../../vendor/shadcn/alert.js";
+import { forwardRef as p } from "react";
+import { Icon as x } from "../icon/icon.js";
+import { cn as l } from "../../../lib/utils.js";
+const j = p(
+  ({ icon: e, title: s, description: m, iconProps: t, className: a, ...o }, i) => /* @__PURE__ */ r.jsxs(n, { ref: i, className: l("yuno-alert", a), ...o, children: [
+    e && /* @__PURE__ */ r.jsx(x, { name: e, className: l("size-4", t?.className), ...t }),
+    s && /* @__PURE__ */ r.jsx(c, { children: s }),
+    m && /* @__PURE__ */ r.jsx(f, { children: m })
   ] })
 );
-c.displayName = "Alert";
+j.displayName = "Alert";
 export {
-  c as Alert
+  j as Alert
 };

package/dist/components/atoms/badge/badge.js

@@ -1,23 +1,24 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as f } from "react";
-import { Badge as o } from "../../../vendor/shadcn/badge.js";
+import { forwardRef as x } from "react";
+import { Badge as d } from "../../../vendor/shadcn/badge.js";
 import { Icon as s } from "../icon/icon.js";
-const d = f(
-  ({ children: g, startIcon: i, endIcon: r, startIconProps: m, endIconProps: a, ...t }, x) => /* @__PURE__ */ e.jsxs(o, { ref: x, ...t, children: [
+import { cn as l } from "../../../lib/utils.js";
+const p = x(
+  ({ children: g, className: o, startIcon: i, endIcon: m, startIconProps: r, endIconProps: a, ...t }, f) => /* @__PURE__ */ e.jsxs(d, { ref: f, className: l("yuno-badge", o), ...t, children: [
     i && /* @__PURE__ */ e.jsx(
       s,
       {
         name: i,
         size: "xs",
-        weight: m?.weight || "fill",
-        ...m
+        weight: r?.weight || "fill",
+        ...r
       }
     ),
     g,
-    r && /* @__PURE__ */ e.jsx(
+    m && /* @__PURE__ */ e.jsx(
       s,
       {
-        name: r,
+        name: m,
         size: "xs",
         weight: a?.weight || "regular",
         ...a
@@ -25,7 +26,7 @@ const d = f(
     )
   ] })
 );
-d.displayName = "Badge";
+p.displayName = "Badge";
 export {
-  d as Badge
+  p as Badge
 };

package/dist/components/atoms/button/button.js

@@ -1,19 +1,20 @@
 import { j as s } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as p } from "react";
+import { forwardRef as b } from "react";
 import { Button as f } from "../../../vendor/shadcn/button.js";
-import { Icon as e } from "../icon/icon.js";
-const c = p(
-  ({ children: m, startIcon: i, endIcon: r, startIconProps: u, endIconProps: x, loading: t = !1, disabled: j, asChild: l = !1, ...a }, o) => {
-    const n = j || t;
-    return l ? /* @__PURE__ */ s.jsx(f, { ref: o, disabled: n, asChild: !0, ...a, children: m }) : /* @__PURE__ */ s.jsxs(f, { ref: o, disabled: n, ...a, children: [
-      t && /* @__PURE__ */ s.jsx(e, { name: "CircleNotch", size: "sm", className: "animate-spin" }),
-      i && !t && /* @__PURE__ */ s.jsx(e, { name: i, size: "sm", ...u }),
-      m,
-      r && !t && /* @__PURE__ */ s.jsx(e, { name: r, size: "sm", ...x })
+import { Icon as m } from "../icon/icon.js";
+import { cn as x } from "../../../lib/utils.js";
+const d = b(
+  ({ children: e, className: o, startIcon: r, endIcon: a, startIconProps: j, endIconProps: l, loading: t = !1, disabled: p, asChild: c = !1, ...i }, n) => {
+    const u = p || t;
+    return c ? /* @__PURE__ */ s.jsx(f, { ref: n, disabled: u, asChild: !0, className: x("yuno-button", o), ...i, children: e }) : /* @__PURE__ */ s.jsxs(f, { ref: n, disabled: u, className: x("yuno-button", o), ...i, children: [
+      t && /* @__PURE__ */ s.jsx(m, { name: "CircleNotch", size: "sm", className: "animate-spin" }),
+      r && !t && /* @__PURE__ */ s.jsx(m, { name: r, size: "sm", ...j }),
+      e,
+      a && !t && /* @__PURE__ */ s.jsx(m, { name: a, size: "sm", ...l })
     ] });
   }
 );
-c.displayName = "Button";
+d.displayName = "Button";
 export {
-  c as Button
+  d as Button
 };

package/dist/components/atoms/card/card.js

@@ -2,28 +2,28 @@ import { j as d } from "../../../_virtual/jsx-runtime.js";
 import { forwardRef as t } from "react";
 import { Card as D, CardContent as F, CardDescription as T, CardFooter as B, CardHeader as R, CardTitle as w } from "../../../vendor/shadcn/card.js";
 import { cn as n } from "../../../lib/utils.js";
-const C = t(
-  ({ className: s, children: a, variant: r = "default", ...e }, o) => /* @__PURE__ */ d.jsx(D, { ref: o, className: n(s), variant: r, ...e, children: a })
-);
-C.displayName = "CardBase";
 const c = t(
-  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(R, { ref: e, className: n(s), ...r, children: a })
+  ({ className: s, children: a, variant: r = "default", ...e }, o) => /* @__PURE__ */ d.jsx(D, { ref: o, className: n("yuno-card", s), variant: r, ...e, children: a })
+);
+c.displayName = "CardBase";
+const C = t(
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(R, { ref: e, className: n("yuno-card-header", s), ...r, children: a })
 );
-c.displayName = "CardHeader";
+C.displayName = "CardHeader";
 const l = t(
-  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(w, { ref: e, className: n(s), ...r, children: a })
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(w, { ref: e, className: n("yuno-card-title", s), ...r, children: a })
 );
 l.displayName = "CardTitle";
 const m = t(
-  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(T, { ref: e, className: n(s), ...r, children: a })
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(T, { ref: e, className: n("yuno-card-description", s), ...r, children: a })
 );
 m.displayName = "CardDescription";
 const i = t(
-  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(F, { ref: e, className: n(s), ...r, children: a })
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(F, { ref: e, className: n("yuno-card-content", s), ...r, children: a })
 );
 i.displayName = "CardContent";
 const N = t(
-  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(B, { ref: e, className: n(s), ...r, children: a })
+  ({ className: s, children: a, ...r }, e) => /* @__PURE__ */ d.jsx(B, { ref: e, className: n("yuno-card-footer", s), ...r, children: a })
 );
 N.displayName = "CardFooter";
 const E = t(
@@ -34,31 +34,31 @@ const E = t(
     children: e,
     footer: o,
     variant: p = "default",
-    headerClassName: x,
-    titleClassName: j,
-    descriptionClassName: u,
-    contentClassName: f,
-    footerClassName: y,
+    headerClassName: u,
+    titleClassName: x,
+    descriptionClassName: j,
+    contentClassName: y,
+    footerClassName: f,
     ...h
   }, $) => {
     const H = a || r;
-    return /* @__PURE__ */ d.jsxs(C, { ref: $, className: s, variant: p, ...h, children: [
-      H && /* @__PURE__ */ d.jsxs(c, { className: x, children: [
-        a && /* @__PURE__ */ d.jsx(l, { className: j, children: a }),
-        r && /* @__PURE__ */ d.jsx(m, { className: u, children: r })
+    return /* @__PURE__ */ d.jsxs(c, { ref: $, className: s, variant: p, ...h, children: [
+      H && /* @__PURE__ */ d.jsxs(C, { className: u, children: [
+        a && /* @__PURE__ */ d.jsx(l, { className: x, children: a }),
+        r && /* @__PURE__ */ d.jsx(m, { className: j, children: r })
       ] }),
-      /* @__PURE__ */ d.jsx(i, { className: f, children: e }),
-      o && /* @__PURE__ */ d.jsx(N, { className: y, children: o })
+      /* @__PURE__ */ d.jsx(i, { className: y, children: e }),
+      o && /* @__PURE__ */ d.jsx(N, { className: f, children: o })
     ] });
   }
 );
 E.displayName = "Card";
 export {
   E as Card,
-  C as CardBase,
+  c as CardBase,
   i as CardContent,
   m as CardDescription,
   N as CardFooter,
-  c as CardHeader,
+  C as CardHeader,
   l as CardTitle
 };

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

@@ -35,6 +35,7 @@ export { Icon, type IconProps, type IconName } from './icon';
 export { Label, type LabelProps } from './label';
 export { Loading, type LoadingProps } from './loading';
 export { OTPField, type OTPFieldProps } from './otp-field';
+export { PageTitle, type PageTitleProps } from './page-title';
 export { PasswordField, type PasswordFieldProps } from './password-field';
 export { ProtectedField, type ProtectedFieldProps } from './protected-field';
 export { Progress, type ProgressProps } from './progress';

package/dist/components/atoms/page-title/index.d.ts

@@ -0,0 +1 @@
+export { PageTitle, type PageTitleProps } from './page-title';

package/dist/components/atoms/page-title/page-title.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
+interface PageTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    as?: ElementType;
+}
+declare const PageTitle: import('react').ForwardRefExoticComponent<PageTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export { PageTitle, type PageTitleProps };

package/dist/components/atoms/page-title/page-title.js

@@ -0,0 +1,18 @@
+import { j as i } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as m } from "react";
+import { cn as s } from "../../../lib/utils.js";
+const l = m(
+  ({ className: e, children: t, as: o = "h1", ...r }, a) => /* @__PURE__ */ i.jsx(
+    o,
+    {
+      ref: a,
+      className: s("yuno-page-title", "text-3xl font-semibold leading-[140%]", e),
+      ...r,
+      children: t
+    }
+  )
+);
+l.displayName = "PageTitle";
+export {
+  l as PageTitle
+};

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 a } from "../../../lib/utils.js";
-import { Label as l } from "../label/label.js";
+import { cn as l } from "../../../lib/utils.js";
+import { Label as a } 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(
-          l,
+          a,
           {
             htmlFor: s,
-            className: a(
+            className: l(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),
             children: e.label
           }
         ),
-        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground ms-auto", children: e.description })
+        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground ml-auto", children: e.description })
       ] }) : /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
         /* @__PURE__ */ r.jsx(
-          l,
+          a,
           {
             htmlFor: s,
-            className: a(
+            className: l(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),

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

@@ -1,7 +1,7 @@
 import { cva as s } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { cn as i } from "../../../lib/utils.js";
 import { forwardRef as m, createElement as c } from "react";
-const d = s("font-[var(--font-family-inter)]", {
+const d = s("font-sans", {
   variants: {
     variant: {
       h1: "scroll-m-20 text-4xl tracking-tight lg:text-5xl",

package/dist/components/molecules/dialog-content/dialog-content.js

@@ -1,11 +1,12 @@
 import { j as a } from "../../../_virtual/jsx-runtime.js";
-import * as m from "react";
-import { cn as n } from "../../../lib/utils.js";
-const s = m.forwardRef(({ className: o, children: t, ...r }, e) => /* @__PURE__ */ a.jsx(
+import * as n from "react";
+import { cn as m } from "../../../lib/utils.js";
+const i = n.forwardRef(({ className: o, children: t, ...r }, e) => /* @__PURE__ */ a.jsx(
   "div",
   {
     ref: e,
-    className: n(
+    className: m(
+      "yuno-dialog-content",
       "flex-1 overflow-auto p-6 text-muted-foreground",
       o
     ),
@@ -13,7 +14,7 @@ const s = m.forwardRef(({ className: o, children: t, ...r }, e) => /* @__PURE__
     children: t
   }
 ));
-s.displayName = "DialogContent";
+i.displayName = "DialogContent";
 export {
-  s as DialogContent
+  i as DialogContent
 };

package/dist/components/molecules/dialog-footer/dialog-footer.js

@@ -1,22 +1,23 @@
-import { j as o } from "../../../_virtual/jsx-runtime.js";
+import { j as e } from "../../../_virtual/jsx-runtime.js";
 import * as s from "react";
-import { cn as p } from "../../../lib/utils.js";
-import { Button as f } from "../../atoms/button/button.js";
-const l = s.forwardRef(
-  ({ className: t, buttons: r = [], ...i }, m) => r.length === 0 ? null : /* @__PURE__ */ o.jsx(
+import { cn as f } from "../../../lib/utils.js";
+import { Button as l } from "../../atoms/button/button.js";
+const n = s.forwardRef(
+  ({ className: t, buttons: r = [], ...i }, a) => r.length === 0 ? null : /* @__PURE__ */ e.jsx(
     "div",
     {
-      ref: m,
-      className: p(
+      ref: a,
+      className: f(
+        "yuno-dialog-footer",
         "flex items-center justify-end gap-3 p-6 border-t border-border",
         t
       ),
       ...i,
-      children: r.map((e, a) => /* @__PURE__ */ o.jsx(f, { ...e }, e.key || a))
+      children: r.map((o, m) => /* @__PURE__ */ e.jsx(l, { ...o }, o.key || m))
     }
   )
 );
-l.displayName = "DialogFooter";
+n.displayName = "DialogFooter";
 export {
-  l as DialogFooter
+  n as DialogFooter
 };

package/dist/components/molecules/dialog-header/dialog-header.js

@@ -7,8 +7,8 @@ const x = d.forwardRef(
   ({
     className: r,
     title: t,
-    onClose: s,
-    onBack: a,
+    onClose: a,
+    onBack: s,
     otherActions: o,
     showCloseButton: l = !0,
     ...n
@@ -17,16 +17,17 @@ const x = d.forwardRef(
     {
       ref: c,
       className: i(
+        "yuno-dialog-header",
         "flex items-center justify-between p-6 border-b border-border",
         r
       ),
       ...n,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
-          a && /* @__PURE__ */ e.jsx(
+          s && /* @__PURE__ */ e.jsx(
             "button",
             {
-              onClick: a,
+              onClick: s,
               className: i(
                 "inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
               ),
@@ -39,10 +40,10 @@ const x = d.forwardRef(
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
           o,
-          l && s && /* @__PURE__ */ e.jsx(
+          l && a && /* @__PURE__ */ e.jsx(
             "button",
             {
-              onClick: s,
+              onClick: a,
               className: i(
                 "inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
               ),

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

@@ -8,5 +8,6 @@ export { NavTabs, type NavTab, type NavTabsProps } from './nav-tabs';
 export { HighlightBanner, type HighlightBannerProps } from './highlight-banner';
 export { Empty, type EmptyProps } from './empty';
 export { EmptyIcon, type EmptyIconProps } from './empty';
+export { ProviderCard, type ProviderCardProps } from './provider-card';
 export { FileUpload, type FileUploadProps, type UploadFile, } from './file-upload';
 export { Stepper, type StepperProps, type StepperStep } from './stepper';

package/dist/components/molecules/provider-card/index.d.ts

@@ -0,0 +1 @@
+export { ProviderCard, type ProviderCardProps } from './provider-card';

package/dist/components/molecules/provider-card/provider-card.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+interface ProviderCardProps {
+    /** Provider logo — URL string or custom ReactNode */
+    logo?: string | ReactNode;
+    /** Fallback logo URL when primary logo fails to load */
+    fallbackLogo?: string;
+    /** Provider name */
+    name: string;
+    /** Subtitle displayed below the name */
+    subtitle?: ReactNode;
+    /** Badge content (e.g. provider type) */
+    badge?: ReactNode;
+    /** Content rendered on the left side of the footer (replaces badge when provided) */
+    status?: ReactNode;
+    /** Action button label */
+    actionLabel?: string;
+    /** Callback when the action button is clicked */
+    onAction?: () => void;
+    /** Custom footer content — replaces the default footer entirely */
+    footer?: ReactNode;
+    /** Additional className for the card */
+    className?: string;
+}
+declare const ProviderCard: import('react').ForwardRefExoticComponent<ProviderCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ProviderCard, type ProviderCardProps };

package/dist/components/molecules/provider-card/provider-card.js

@@ -0,0 +1,75 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as v, useState as t } from "react";
+import { cn as b } from "../../../lib/utils.js";
+import { Button as y } from "../../atoms/button/button.js";
+import { CardBase as C, CardContent as E, CardFooter as w } from "../../atoms/card/card.js";
+const k = v(
+  ({
+    logo: e,
+    fallbackLogo: a,
+    name: s,
+    subtitle: o,
+    badge: m,
+    status: f,
+    actionLabel: n,
+    onAction: d,
+    footer: i,
+    className: x
+  }, u) => {
+    const [l, c] = t(!1), [p, h] = t(!1), [j, g] = t(!1), N = () => e && typeof e != "string" ? e : !p && typeof e == "string" ? /* @__PURE__ */ r.jsx(
+      "img",
+      {
+        src: e,
+        alt: s,
+        className: "w-10 h-10 shrink-0 rounded-md",
+        onError: () => h(!0)
+      }
+    ) : !j && a ? /* @__PURE__ */ r.jsx(
+      "img",
+      {
+        src: a,
+        alt: s,
+        className: "w-10 h-10 shrink-0 rounded-md",
+        onError: () => g(!0)
+      }
+    ) : /* @__PURE__ */ r.jsx("div", { className: "w-10 h-10 shrink-0 rounded-md bg-muted flex items-center justify-center", children: /* @__PURE__ */ r.jsx("span", { className: "text-sm font-semibold text-muted-foreground", children: s?.charAt(0)?.toUpperCase() || "?" }) });
+    return /* @__PURE__ */ r.jsxs(
+      C,
+      {
+        ref: u,
+        onMouseEnter: () => c(!0),
+        onMouseLeave: () => c(!1),
+        className: b(
+          "flex flex-col bg-card transition-all overflow-hidden",
+          l ? "border-primary shadow-lg" : "",
+          x
+        ),
+        children: [
+          /* @__PURE__ */ r.jsxs(E, { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ r.jsx("div", { className: "flex items-start gap-6", children: N() }),
+            /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ r.jsx("span", { className: "text-base font-semibold leading-none text-card-foreground tracking-tight", children: s }),
+              o && /* @__PURE__ */ r.jsx("span", { className: "text-sm text-muted-foreground", children: o })
+            ] })
+          ] }),
+          i !== void 0 ? i : /* @__PURE__ */ r.jsxs(w, { className: "justify-between border-t border-border px-6 py-4", children: [
+            f ?? m,
+            d && n && /* @__PURE__ */ r.jsx(
+              y,
+              {
+                size: "sm",
+                onClick: d,
+                className: l ? "" : "opacity-50",
+                children: n
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "ProviderCard";
+export {
+  k as ProviderCard
+};

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

@@ -26,7 +26,7 @@ function Te({
   sorting: F,
   onSortingChange: M,
   enableColumnFilters: O = !1,
-  enableColumnResizing: d = !0,
+  enableColumnResizing: f = !0,
   columnResizeMode: N = "onChange",
   enableColumnPinning: k = !0,
   onRowClick: A,
@@ -44,8 +44,8 @@ function Te({
     checkboxSelection: h,
     actions: g
   }), {
-    sorting: j,
-    setSorting: y,
+    sorting: y,
+    setSorting: j,
     columnFilters: _,
     setColumnFilters: $,
     columnVisibility: z,
@@ -54,7 +54,7 @@ function Te({
     setRowSelection: U,
     columnPinning: q,
     handleColumnPinningChange: J,
-    columnOrder: f,
+    columnOrder: d,
     setColumnOrder: m
   } = se({
     persistKey: B,
@@ -69,7 +69,7 @@ function Te({
     data: l,
     columns: W,
     getCoreRowModel: me(),
-    enableColumnResizing: d,
+    enableColumnResizing: f,
     columnResizeMode: N,
     enableColumnPinning: k,
     defaultColumn: {
@@ -78,7 +78,7 @@ function Te({
     },
     ...E && {
       onSortingChange: (e) => {
-        y(typeof e == "function" ? e(j) : e);
+        j(typeof e == "function" ? e(y) : e);
       },
       getSortedRowModel: ae(),
       manualSorting: R
@@ -98,12 +98,12 @@ function Te({
     onColumnPinningChange: J,
     onColumnOrderChange: m,
     state: {
-      sorting: j,
+      sorting: y,
       columnFilters: _,
       columnVisibility: z,
       rowSelection: i,
       columnPinning: q,
-      columnOrder: f
+      columnOrder: d
     }
   });
   c.useEffect(() => {
@@ -113,8 +113,8 @@ function Te({
     }
   }, [i, a, l, u]);
   const v = c.useRef([]), K = c.useCallback(() => {
-    v.current = f.length > 0 ? [...f] : r.getAllLeafColumns().map((e) => e.id);
-  }, [f, r]), Q = c.useCallback(
+    v.current = d.length > 0 ? [...d] : r.getAllLeafColumns().map((e) => e.id);
+  }, [d, r]), Q = c.useCallback(
     (e) => {
       m((o) => {
         const s = o.length > 0 ? o : r.getAllLeafColumns().map((C) => C.id);
@@ -158,7 +158,7 @@ function Te({
   const D = /* @__PURE__ */ t.jsx("div", { className: S("yuno-data-table space-y-4", P), children: /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: "rounded-md border overflow-x-auto",
+      className: "yuno-data-table rounded-md border overflow-x-auto",
       style: { height: L || "auto" },
       children: /* @__PURE__ */ t.jsxs(ee, { className: S("table-fixed"), children: [
         /* @__PURE__ */ t.jsx("colgroup", { children: r.getHeaderGroups()[0]?.headers.map((e) => {
@@ -179,7 +179,7 @@ function Te({
           te,
           {
             table: r,
-            enableColumnResizing: d,
+            enableColumnResizing: f,
             enableColumnDragDrop: p
           }
         ),
@@ -187,7 +187,7 @@ function Te({
           ne,
           {
             table: r,
-            enableColumnResizing: d,
+            enableColumnResizing: f,
             onRowClick: A,
             rowHeight: x
           }

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

@@ -1,23 +1,20 @@
-function r(e) {
+function f(e) {
   return typeof e == "object" && e !== null && "title" in e && typeof e.title == "string";
 }
-function f(e) {
+function n(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, n) {
+function o(e, t, i, r) {
   return e ? {
     position: "sticky",
-    // 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,
+    left: e === "left" ? `${t("left")}px` : void 0,
+    right: e === "right" ? `${i("right")}px` : void 0,
     zIndex: 10,
-    backgroundColor: n
+    backgroundColor: r
   } : {};
 }
 export {
-  f as getColumnDisplayName,
+  n as getColumnDisplayName,
   o as getPinnedStyles,
-  r as isHeaderConfig
+  f as isHeaderConfig
 };