@yuno-payments/dashboard-design-system 0.0.170 → 0.0.172

package/dist/components/molecules/breadcrumb/breadcrumb.js

@@ -1,42 +1,42 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
 import { forwardRef as L, Fragment as i } from "react";
-import { Breadcrumb as C, BreadcrumbList as M, BreadcrumbItem as h, BreadcrumbEllipsis as E, BreadcrumbSeparator as I, BreadcrumbPage as N, BreadcrumbLink as V } from "../../../vendor/shadcn/breadcrumb.js";
+import { Icon as C } from "../../atoms/icon/icon.js";
+import { Breadcrumb as M, BreadcrumbList as E, BreadcrumbItem as h, BreadcrumbEllipsis as I, BreadcrumbSeparator as N, BreadcrumbPage as V, BreadcrumbLink as k } from "../../../vendor/shadcn/breadcrumb.js";
 import { DropdownMenu as u, DropdownMenuTrigger as x, DropdownMenuContent as j, DropdownMenuItem as p } from "../../../vendor/shadcn/dropdown-menu.js";
-import { Icon as k } from "../../atoms/icon/icon.js";
 const v = L(
-  ({ items: s, separator: b, maxItems: l = 0, className: f }, m) => {
-    const a = l > 0 && s.length > l, c = a ? [
+  ({ items: s, separator: f, maxItems: l = 0, className: b }, m) => {
+    const d = l > 0 && s.length > l, o = d ? [
       s[0],
       // First item always visible
       null,
       // Placeholder for ellipsis
       ...s.slice(-(l - 2))
       // Last items
-    ] : s, d = a ? s.slice(1, s.length - (l - 2)) : [], g = ((e) => {
+    ] : s, a = d ? s.slice(1, s.length - (l - 2)) : [], g = ((e) => {
       for (let n = e.length - 1; n >= 0; n--)
         if (e[n]) return n;
       return -1;
-    })(c), t = () => /* @__PURE__ */ r.jsx(I, { children: b }), B = (e) => /* @__PURE__ */ r.jsxs(u, { children: [
-      /* @__PURE__ */ r.jsxs(x, { className: "flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700 transition-colors", children: [
+    })(o), t = () => /* @__PURE__ */ r.jsx(N, { children: f }), B = (e) => /* @__PURE__ */ r.jsxs(u, { children: [
+      /* @__PURE__ */ r.jsxs(x, { className: "flex items-center gap-1 text-sm text-muted-foreground hover:text-neutral-700 transition-colors", children: [
         e.label,
-        /* @__PURE__ */ r.jsx(k, { name: "CaretDown", className: "size-4" })
+        /* @__PURE__ */ r.jsx(C, { name: "CaretDown", className: "size-4" })
       ] }),
-      /* @__PURE__ */ r.jsx(j, { children: e.dropdown?.map((n, o) => /* @__PURE__ */ r.jsx(p, { asChild: !0, children: /* @__PURE__ */ r.jsx("a", { href: n.href, children: n.label }) }, o)) })
-    ] }), w = (e, n) => n ? /* @__PURE__ */ r.jsx(N, { children: e.label }) : /* @__PURE__ */ r.jsx(V, { href: e.href, children: e.label }), D = () => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+      /* @__PURE__ */ r.jsx(j, { children: e.dropdown?.map((n, c) => /* @__PURE__ */ r.jsx(p, { asChild: !0, children: /* @__PURE__ */ r.jsx("a", { href: n.href, children: n.label }) }, c)) })
+    ] }), w = (e, n) => n ? /* @__PURE__ */ r.jsx(V, { children: e.label }) : /* @__PURE__ */ r.jsx(k, { href: e.href, children: e.label }), D = () => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
       /* @__PURE__ */ r.jsx(h, { children: /* @__PURE__ */ r.jsxs(u, { children: [
-        /* @__PURE__ */ r.jsx(x, { children: /* @__PURE__ */ r.jsx(E, {}) }),
-        /* @__PURE__ */ r.jsx(j, { children: d.map((e, n) => /* @__PURE__ */ r.jsx(p, { asChild: !0, children: /* @__PURE__ */ r.jsx("a", { href: e.href, children: e.label }) }, n)) })
+        /* @__PURE__ */ r.jsx(x, { children: /* @__PURE__ */ r.jsx(I, {}) }),
+        /* @__PURE__ */ r.jsx(j, { children: a.map((e, n) => /* @__PURE__ */ r.jsx(p, { asChild: !0, children: /* @__PURE__ */ r.jsx("a", { href: e.href, children: e.label }) }, n)) })
       ] }) }),
       t()
     ] });
-    return /* @__PURE__ */ r.jsx(C, { ref: m, className: f, children: /* @__PURE__ */ r.jsx(M, { children: c.map((e, n) => {
-      if (e === null && d.length > 0)
+    return /* @__PURE__ */ r.jsx(M, { ref: m, className: b, children: /* @__PURE__ */ r.jsx(E, { children: o.map((e, n) => {
+      if (e === null && a.length > 0)
         return /* @__PURE__ */ r.jsx(i, { children: D() }, n);
       if (!e) return null;
-      const o = n === g;
+      const c = n === g;
       return /* @__PURE__ */ r.jsxs(i, { children: [
-        /* @__PURE__ */ r.jsx(h, { children: e.dropdown ? B(e) : w(e, o) }),
-        n < c.length - 1 && e && t()
+        /* @__PURE__ */ r.jsx(h, { children: e.dropdown ? B(e) : w(e, c) }),
+        n < o.length - 1 && e && t()
       ] }, n);
     }) }) });
   }

package/dist/components/molecules/dialog-content/dialog-content.d.ts

@@ -1,5 +1,21 @@
 import * as React from "react";
+/**
+ * Props for the DialogContent component
+ */
 export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content to display in the dialog body
+     */
     children: React.ReactNode;
 }
+/**
+ * Scrollable content area for dialog body.
+ *
+ * @example
+ * ```tsx
+ * <DialogContent>
+ *   <p>Your dialog content goes here...</p>
+ * </DialogContent>
+ * ```
+ */
 export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/dialog-footer/dialog-footer.d.ts

@@ -1,6 +1,26 @@
 import { ButtonProps } from '../../atoms/button';
 import * as React from "react";
+/**
+ * Props for the DialogFooter component
+ */
 export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of button configurations to display in the footer
+     */
     buttons?: ButtonProps[];
 }
+/**
+ * Dialog footer component for action buttons.
+ * Renders nothing if no buttons are provided.
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter
+ *   buttons={[
+ *     { children: 'Cancel', variant: 'outline', onClick: handleCancel },
+ *     { children: 'Save', variant: 'default', onClick: handleSave }
+ *   ]}
+ * />
+ * ```
+ */
 export declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/dialog-header/dialog-header.d.ts

@@ -1,9 +1,40 @@
 import * as React from "react";
+/**
+ * Props for the DialogHeader component
+ */
 export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Dialog title (text or custom element)
+     */
     title?: React.ReactElement | string;
+    /**
+     * Callback fired when the close button is clicked
+     */
     onClose?: () => void;
+    /**
+     * Callback fired when the back button is clicked
+     */
     onBack?: () => void;
+    /**
+     * Additional action elements to display before the close button
+     */
     otherActions?: React.ReactNode;
+    /**
+     * Whether to show the close button
+     * @default true
+     */
     showCloseButton?: boolean;
 }
+/**
+ * Dialog header component with title, back button, and close button.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader
+ *   title="Edit Profile"
+ *   onClose={() => setOpen(false)}
+ *   onBack={() => goToPreviousStep()}
+ * />
+ * ```
+ */
 export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/empty/empty-icon.js

@@ -1,14 +1,14 @@
 import { j as o } from "../../../_virtual/jsx-runtime.js";
 import "react";
-import { Icon as i } from "../../atoms/icon/icon.js";
-function x({
+import { Icon as t } from "../../atoms/icon/icon.js";
+function d({
   name: r,
-  size: t = "xl",
-  className: m,
+  size: m = "xl",
+  className: n,
   children: s
 }) {
-  return /* @__PURE__ */ o.jsx("div", { className: "p-4 bg-white rounded-lg shadow-sm", children: s || /* @__PURE__ */ o.jsx(i, { name: r, size: t, className: m }) });
+  return /* @__PURE__ */ o.jsx("div", { className: "p-4 bg-background rounded-lg shadow-sm", children: s || /* @__PURE__ */ o.jsx(t, { name: r, size: m, className: n }) });
 }
 export {
-  x as EmptyIcon
+  d as EmptyIcon
 };

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

@@ -2,8 +2,10 @@ import { HTMLAttributes, ReactNode } from 'react';
 export interface EmptyProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Media content to display (image, icon, or any ReactNode)
+     * @default <img src="https://dashboard-assets.y.uno/common/empty_illustration.svg" alt="" />
+     * Pass `null` to hide the media content
      */
-    media?: ReactNode;
+    media?: ReactNode | null;
     /**
      * Title text displayed prominently
      */
@@ -17,5 +19,18 @@ export interface EmptyProps extends HTMLAttributes<HTMLDivElement> {
      */
     actions?: ReactNode;
 }
+/**
+ * Empty state component for displaying when there's no content or data.
+ * Shows an optional image/icon, title, description, and action buttons.
+ *
+ * @example
+ * ```tsx
+ * <Empty
+ *   title="No results found"
+ *   description="Try adjusting your search or filter criteria"
+ *   actions={<Button>Clear filters</Button>}
+ * />
+ * ```
+ */
 declare const Empty: import('react').ForwardRefExoticComponent<EmptyProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Empty };

package/dist/components/molecules/empty/empty.js

@@ -1,38 +1,41 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as i } from "react";
-import { cn as x } from "../../../lib/utils.js";
-import { Typography as t } from "../../atoms/typography/typography.js";
-const o = i(
-  ({ className: a, media: s, title: c, description: l, actions: r, ...m }, n) => /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      ref: n,
-      className: x(
-        "flex flex-col items-center gap-6 bg-secondary px-6 py-12 rounded-lg",
-        a
-      ),
-      ...m,
-      children: [
-        s && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: s }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-6 items-center w-full", children: [
-          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 items-center w-full", children: [
-            /* @__PURE__ */ e.jsx(
-              t,
-              {
-                as: "h3",
-                className: "text-base font-semibold text-center leading-none",
-                children: c
-              }
-            ),
-            l && /* @__PURE__ */ e.jsx(t, { variant: "muted", className: "text-center", children: l })
-          ] }),
-          r && /* @__PURE__ */ e.jsx("div", { className: "flex gap-3 items-center justify-center", children: r })
-        ] })
-      ]
-    }
-  )
+import { forwardRef as o } from "react";
+import { cn as d } from "../../../lib/utils.js";
+import { Typography as r } from "../../atoms/typography/typography.js";
+const x = "https://dashboard-assets.y.uno/common/empty_illustration.svg", f = o(
+  ({ className: c, media: s, title: i, description: t, actions: l, ...n }, m) => {
+    const a = s === void 0 ? /* @__PURE__ */ e.jsx("img", { src: x, alt: "" }) : s;
+    return /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: m,
+        className: d(
+          "flex flex-col items-center gap-6 bg-surface px-6 py-12 rounded-lg",
+          c
+        ),
+        ...n,
+        children: [
+          a && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: a }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-6 items-center w-full", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 items-center w-full", children: [
+              /* @__PURE__ */ e.jsx(
+                r,
+                {
+                  as: "h3",
+                  className: "text-base font-semibold text-center leading-none",
+                  children: i
+                }
+              ),
+              t && /* @__PURE__ */ e.jsx(r, { variant: "muted", className: "text-center", children: t })
+            ] }),
+            l && /* @__PURE__ */ e.jsx("div", { className: "flex gap-3 items-center justify-center", children: l })
+          ] })
+        ]
+      }
+    );
+  }
 );
-o.displayName = "Empty";
+f.displayName = "Empty";
 export {
-  o as Empty
+  f as Empty
 };

package/dist/components/molecules/highlight-banner/highlight-banner.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { IconName } from '../../atoms/icon';
+/**
+ * Props for the HighlightBanner component
+ */
 interface HighlightBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /**
      * Icon name to display on the left side of the banner.
@@ -21,5 +24,19 @@ interface HighlightBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
      */
     button?: ReactNode;
 }
+/**
+ * Prominent banner component for highlighting important information or calls-to-action.
+ * Features an icon in a circular container, title, description, and optional action button.
+ *
+ * @example
+ * ```tsx
+ * <HighlightBanner
+ *   icon="Lightbulb"
+ *   title="Get started with our API"
+ *   description="Learn how to integrate our payment solution in minutes"
+ *   button={<Button>View Documentation</Button>}
+ * />
+ * ```
+ */
 declare const HighlightBanner: import('react').ForwardRefExoticComponent<HighlightBannerProps & import('react').RefAttributes<HTMLDivElement>>;
 export { HighlightBanner, type HighlightBannerProps };

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

@@ -1,14 +1,63 @@
 import { ComponentProps } from 'react';
+/**
+ * Props for the Pagination component
+ */
 interface PaginationProps extends ComponentProps<"nav"> {
+    /**
+     * Current active page number (1-indexed)
+     */
     currentPage: number;
+    /**
+     * Total number of pages available
+     */
     totalPages?: number;
+    /**
+     * Callback fired when a page number is clicked
+     */
     onPageClick?: (page: number) => void;
+    /**
+     * Callback fired when the next button is clicked
+     */
     onClickNext?: () => void;
+    /**
+     * Callback fired when the previous button is clicked
+     */
     onClickPrev?: () => void;
+    /**
+     * Whether the previous button is disabled
+     * @default false
+     */
     disablePrevious?: boolean;
+    /**
+     * Whether the next button is disabled
+     * @default false
+     */
     disableNext?: boolean;
+    /**
+     * Whether to show previous/next navigation buttons
+     * @default true
+     */
     showPreviousNext?: boolean;
+    /**
+     * Maximum number of page numbers to display before using ellipsis
+     * @default 5
+     */
     maxVisiblePages?: number;
 }
+/**
+ * Pagination component for navigating through multiple pages of content.
+ * Supports custom page number display with ellipsis for large page counts.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   currentPage={5}
+ *   totalPages={20}
+ *   onPageClick={(page) => console.log('Go to page', page)}
+ *   onClickNext={() => console.log('Next')}
+ *   onClickPrev={() => console.log('Previous')}
+ * />
+ * ```
+ */
 declare const Pagination: import('react').ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 export { Pagination, type PaginationProps };

package/dist/components/organisms/data-table/components/cells/data-table-list-cell.d.ts

@@ -1,12 +1,53 @@
+/**
+ * Represents a single item in the list cell
+ */
 export interface DataTableListCellItem {
+    /**
+     * Item name/label
+     */
     name: string;
+    /**
+     * Optional icon
+     */
     icon?: string;
 }
+/**
+ * Props for the DataTableListCell component
+ */
 export interface DataTableListCellProps {
+    /**
+     * Array of items to display
+     */
     items: DataTableListCellItem[];
+    /**
+     * Maximum length for item names before truncation
+     * @default 7
+     */
     maxLength?: number;
+    /**
+     * Whether to show remaining items count
+     * @default true
+     */
     showRemainingCount?: boolean;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
 }
+/**
+ * Table cell component for displaying a list of items with badges.
+ * Shows first item and remaining count with tooltip.
+ *
+ * @example
+ * ```tsx
+ * <DataTableListCell
+ *   items={[
+ *     { name: 'Item 1' },
+ *     { name: 'Item 2' }
+ *   ]}
+ *   maxLength={10}
+ * />
+ * ```
+ */
 declare const DataTableListCell: import('react').ForwardRefExoticComponent<DataTableListCellProps & import('react').RefAttributes<HTMLDivElement>>;
 export { DataTableListCell };

package/dist/components/organisms/data-table/components/column-header/data-table-column-header-content.js

@@ -1,8 +1,8 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
+import { Icon as o } from "../../../../atoms/icon/icon.js";
 import { cn as u } from "../../../../../lib/utils.js";
 import { DataTableSortIndicator as f } from "./data-table-sort-indicator.js";
 import { COLUMN_HEADER_CONFIG as t } from "../../utils/data-table-constants.js";
-import { Icon as o } from "../../../../atoms/icon/icon.js";
 import { DropdownMenuTrigger as d } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
 function N({
   title: r,

package/dist/components/organisms/data-table/components/column-header/data-table-column-header-menu.js

@@ -1,6 +1,6 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { DropdownMenuContent as g, DropdownMenuItem as n, DropdownMenuSeparator as o } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
-import { Icon as i } from "../../../../atoms/icon/icon.js";
+import { Icon as n } from "../../../../atoms/icon/icon.js";
+import { DropdownMenuContent as g, DropdownMenuItem as i, DropdownMenuSeparator as o } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
 function p({
   column: s,
   isLastVisibleColumn: r,
@@ -9,63 +9,63 @@ function p({
   const l = s.getCanSort(), d = s.getCanPin(), x = s.getCanHide(), t = s.getIsPinned(), c = s.getIsSorted();
   return /* @__PURE__ */ e.jsxs(g, { align: "start", children: [
     l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsxs(n, { onClick: () => s.toggleSorting(!1), children: [
-        /* @__PURE__ */ e.jsx(i, { name: "ArrowUp", size: "sm" }),
+      /* @__PURE__ */ e.jsxs(i, { onClick: () => s.toggleSorting(!1), children: [
+        /* @__PURE__ */ e.jsx(n, { name: "ArrowUp", size: "sm" }),
         "Ascending"
       ] }),
-      /* @__PURE__ */ e.jsxs(n, { onClick: () => s.toggleSorting(!0), children: [
-        /* @__PURE__ */ e.jsx(i, { name: "ArrowDown", size: "sm" }),
+      /* @__PURE__ */ e.jsxs(i, { onClick: () => s.toggleSorting(!0), children: [
+        /* @__PURE__ */ e.jsx(n, { name: "ArrowDown", size: "sm" }),
         "Descending"
       ] }),
-      c && /* @__PURE__ */ e.jsxs(n, { onClick: () => s.clearSorting(), children: [
-        /* @__PURE__ */ e.jsx(i, { name: "X", size: "sm" }),
+      c && /* @__PURE__ */ e.jsxs(i, { onClick: () => s.clearSorting(), children: [
+        /* @__PURE__ */ e.jsx(n, { name: "X", size: "sm" }),
         "Clear sorting"
       ] }),
       /* @__PURE__ */ e.jsx(o, {})
     ] }),
     d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsxs(
-        n,
+        i,
         {
           onClick: () => s.pin("left"),
           disabled: t === "left",
           children: [
-            /* @__PURE__ */ e.jsx(i, { name: "PushPinSimple", size: "sm" }),
+            /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
             "Pin to the left"
           ]
         }
       ),
       /* @__PURE__ */ e.jsxs(
-        n,
+        i,
         {
           onClick: () => s.pin("right"),
           disabled: t === "right",
           children: [
-            /* @__PURE__ */ e.jsx(i, { name: "PushPinSimple", size: "sm" }),
+            /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
             "Pin to the right"
           ]
         }
       ),
-      t && /* @__PURE__ */ e.jsxs(n, { onClick: () => s.pin(!1), children: [
-        /* @__PURE__ */ e.jsx(i, { name: "PushPinSimpleSlash", size: "sm" }),
+      t && /* @__PURE__ */ e.jsxs(i, { onClick: () => s.pin(!1), children: [
+        /* @__PURE__ */ e.jsx(n, { name: "PushPinSimpleSlash", size: "sm" }),
         "Unpin"
       ] }),
       /* @__PURE__ */ e.jsx(o, {})
     ] }),
     x && /* @__PURE__ */ e.jsxs(
-      n,
+      i,
       {
         onClick: () => s.toggleVisibility(!1),
         disabled: r,
         children: [
-          /* @__PURE__ */ e.jsx(i, { name: "EyeSlash", size: "sm" }),
+          /* @__PURE__ */ e.jsx(n, { name: "EyeSlash", size: "sm" }),
           "Hide",
           r && /* @__PURE__ */ e.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(Last column)" })
         ]
       }
     ),
-    /* @__PURE__ */ e.jsxs(n, { onClick: a, children: [
-      /* @__PURE__ */ e.jsx(i, { name: "Columns", size: "sm" }),
+    /* @__PURE__ */ e.jsxs(i, { onClick: a, children: [
+      /* @__PURE__ */ e.jsx(n, { name: "Columns", size: "sm" }),
       "Manage columns"
     ] })
   ] });

package/dist/components/organisms/data-table/components/column-header/data-table-column-header.d.ts

@@ -1,9 +1,27 @@
 import { Column, Table } from '@tanstack/react-table';
+/**
+ * Props for the DataTableColumnHeader component
+ */
 interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * TanStack Table column instance
+     */
     column: Column<TData, TValue>;
+    /**
+     * TanStack Table instance
+     */
     table: Table<TData>;
+    /**
+     * Column header title text
+     */
     title: string;
+    /**
+     * Optional info/tooltip text
+     */
     info?: string;
 }
+/**
+ * Column header component with sorting, pinning, and visibility controls
+ */
 export declare function DataTableColumnHeader<TData, TValue>({ column, table, title, className, info, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
+import { Icon as b } from "../../../../atoms/icon/icon.js";
 import { cn as m } from "../../../../../lib/utils.js";
-import { useColumnHeader as b } from "../../hooks/use-column-header.js";
-import { DataTableColumnHeaderMenu as D } from "./data-table-column-header-menu.js";
-import { DataTableManageColumnsDialog as O } from "../dialogs/data-table-manage-columns-dialog.js";
-import { DataTableColumnHeaderContent as v } from "./data-table-column-header-content.js";
-import { Icon as H } from "../../../../atoms/icon/icon.js";
+import { useColumnHeader as D } from "../../hooks/use-column-header.js";
+import { DataTableColumnHeaderMenu as O } from "./data-table-column-header-menu.js";
+import { DataTableManageColumnsDialog as v } from "../dialogs/data-table-manage-columns-dialog.js";
+import { DataTableColumnHeaderContent as H } from "./data-table-column-header-content.js";
 import { DropdownMenu as I } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
 function z({
   column: o,
@@ -28,10 +28,10 @@ function z({
     visibleColumnsCount: j,
     isLastVisibleColumn: M,
     handleManageColumnsClick: h
-  } = b(o, l);
+  } = D(o, l);
   return !i && !x ? /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center gap-2", a), children: [
     n && /* @__PURE__ */ e.jsx(
-      H,
+      b,
       {
         name: "Info",
         size: "sm",
@@ -43,7 +43,7 @@ function z({
   ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: m("flex items-center gap-2", a), children: /* @__PURE__ */ e.jsxs(I, { open: t, onOpenChange: p, children: [
       /* @__PURE__ */ e.jsx(
-        v,
+        H,
         {
           title: s,
           info: n,
@@ -57,7 +57,7 @@ function z({
         }
       ),
       /* @__PURE__ */ e.jsx(
-        D,
+        O,
         {
           column: o,
           isLastVisibleColumn: M,
@@ -66,7 +66,7 @@ function z({
       )
     ] }) }),
     /* @__PURE__ */ e.jsx(
-      O,
+      v,
       {
         isOpen: d,
         onOpenChange: C,

package/dist/components/organisms/data-table/components/data-table-body.d.ts

@@ -1,9 +1,27 @@
 import { Table } from '@tanstack/react-table';
+/**
+ * Props for the DataTableBody component
+ */
 interface DataTableBodyProps<TData> {
+    /**
+     * TanStack Table instance
+     */
     table: Table<TData>;
+    /**
+     * Whether column resizing is enabled
+     */
     enableColumnResizing?: boolean;
+    /**
+     * Callback fired when a row is clicked
+     */
     onRowClick?: (row: TData) => void;
+    /**
+     * Fixed height for each row in pixels
+     */
     rowHeight?: number;
 }
+/**
+ * Table body component that renders data rows
+ */
 export declare function DataTableBody<TData>({ table, enableColumnResizing, onRowClick, rowHeight, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};