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

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

@@ -1,66 +1,15 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps } from 'react';
 import { Tooltip as ShadcnTooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../vendor/shadcn/tooltip';
 type ShadcnTooltipRootProps = ComponentProps<typeof ShadcnTooltip>;
 type TooltipContentProps = ComponentProps<typeof TooltipContent>;
 type TooltipProviderProps = ComponentProps<typeof TooltipProvider>;
 type TooltipTriggerProps = ComponentProps<typeof TooltipTrigger>;
-/**
- * Props for the Tooltip component
- */
 interface TooltipProps extends ShadcnTooltipRootProps {
-    /**
-     * Content to display in the tooltip
-     * Can be a string, JSX element, or any React node
-     */
-    content: ReactNode;
-    /**
-     * Additional props for the tooltip content
-     */
+    content: string;
     contentProps?: TooltipContentProps;
-    /**
-     * Additional props for the tooltip provider
-     */
     providerProps?: TooltipProviderProps;
-    /**
-     * Additional props for the tooltip trigger
-     */
     triggerProps?: TooltipTriggerProps;
-    /**
-     * Whether to show the tooltip
-     * @default true
-     */
     show?: boolean;
 }
-/**
- * Tooltip component for displaying helpful content on hover or focus.
- *
- * @example
- * ```tsx
- * // Simple text tooltip
- * <Tooltip content="Click to edit">
- *   <Button>Edit</Button>
- * </Tooltip>
- *
- * // Conditional tooltip
- * <Tooltip content="Info" show={showTooltip}>
- *   <Icon name="Info" />
- * </Tooltip>
- *
- * // ReactNode content with formatting
- * <Tooltip content={<div><strong>Bold</strong> and <em>italic</em> text</div>}>
- *   <Button>Rich Content</Button>
- * </Tooltip>
- *
- * // Complex JSX content
- * <Tooltip content={
- *   <div className="space-y-1">
- *     <Typography variant="sm" weight="semibold">Title</Typography>
- *     <Typography variant="sm">Description here</Typography>
- *   </div>
- * }>
- *   <Icon name="Info" />
- * </Tooltip>
- * ```
- */
 declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipProvider, type TooltipProps, type TooltipProviderProps, };

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

@@ -4,26 +4,8 @@ declare const typographyVariants: (props?: ({
     variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "list" | "muted" | "xs" | "sm" | "lg" | "xl" | "lead" | null | undefined;
     weight?: "bold" | "regular" | "semibold" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Props for the Typography component
- */
 export interface TypographyProps extends HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
-    /**
-     * HTML element to render (overrides the default element for the variant)
-     * @example "div", "span", "h1", "p"
-     */
     as?: keyof JSX.IntrinsicElements;
 }
-/**
- * Flexible typography component with predefined text styles and semantic HTML elements.
- * Automatically renders the appropriate HTML element based on the variant.
- *
- * @example
- * ```tsx
- * <Typography variant="h1">Page Title</Typography>
- * <Typography variant="muted">Helper text</Typography>
- * <Typography as="span" variant="lg">Custom span with lg style</Typography>
- * ```
- */
 declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<HTMLElement>>;
 export { Typography };

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

@@ -1,67 +1,17 @@
 import { ReactNode } from 'react';
-/**
- * Represents a single breadcrumb item
- */
 interface BreadcrumbItemData {
-    /**
-     * Display text for the breadcrumb item
-     */
     label: string;
-    /**
-     * URL to navigate to when the breadcrumb is clicked
-     */
     href?: string;
-    /**
-     * Optional dropdown menu items for this breadcrumb
-     */
     dropdown?: Array<{
-        /**
-         * Display text for dropdown item
-         */
         label: string;
-        /**
-         * URL for dropdown item
-         */
         href: string;
     }>;
 }
-/**
- * Props for the Breadcrumb component
- */
 interface BreadcrumbProps {
-    /**
-     * Array of breadcrumb items to display
-     */
     items: BreadcrumbItemData[];
-    /**
-     * Custom separator element between breadcrumb items
-     */
     separator?: ReactNode;
-    /**
-     * Maximum number of items before collapsing with ellipsis
-     * @default 0 (no collapsing)
-     */
     maxItems?: number;
-    /**
-     * Additional CSS classes
-     */
     className?: string;
 }
-/**
- * Navigation breadcrumb component with support for collapsing and dropdown menus.
- * Automatically collapses middle items when maxItems is exceeded.
- *
- * @example
- * ```tsx
- * <Breadcrumb
- *   items={[
- *     { label: 'Home', href: '/' },
- *     { label: 'Products', href: '/products' },
- *     { label: 'Item Detail' }
- *   ]}
- *   maxItems={3}
- * />
- * ```
- */
 declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
 export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItemData };

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 { 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 { 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 { 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: f, maxItems: l = 0, className: b }, m) => {
-    const d = l > 0 && s.length > l, o = d ? [
+  ({ items: s, separator: b, maxItems: l = 0, className: f }, m) => {
+    const a = l > 0 && s.length > l, c = a ? [
       s[0],
       // First item always visible
       null,
       // Placeholder for ellipsis
       ...s.slice(-(l - 2))
       // Last items
-    ] : s, a = d ? s.slice(1, s.length - (l - 2)) : [], g = ((e) => {
+    ] : s, d = a ? 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;
-    })(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: [
+    })(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: [
         e.label,
-        /* @__PURE__ */ r.jsx(C, { name: "CaretDown", className: "size-4" })
+        /* @__PURE__ */ r.jsx(k, { name: "CaretDown", className: "size-4" })
       ] }),
-      /* @__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(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(h, { children: /* @__PURE__ */ r.jsxs(u, { children: [
-        /* @__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)) })
+        /* @__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)) })
       ] }) }),
       t()
     ] });
-    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(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(i, { children: D() }, n);
       if (!e) return null;
-      const c = n === g;
+      const o = n === g;
       return /* @__PURE__ */ r.jsxs(i, { children: [
-        /* @__PURE__ */ r.jsx(h, { children: e.dropdown ? B(e) : w(e, c) }),
-        n < o.length - 1 && e && t()
+        /* @__PURE__ */ r.jsx(h, { children: e.dropdown ? B(e) : w(e, o) }),
+        n < c.length - 1 && e && t()
       ] }, n);
     }) }) });
   }

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

@@ -1,21 +1,5 @@
 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,26 +1,6 @@
 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,40 +1,9 @@
 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 t } from "../../atoms/icon/icon.js";
-function d({
+import { Icon as i } from "../../atoms/icon/icon.js";
+function x({
   name: r,
-  size: m = "xl",
-  className: n,
+  size: t = "xl",
+  className: m,
   children: s
 }) {
-  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 }) });
+  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 }) });
 }
 export {
-  d as EmptyIcon
+  x as EmptyIcon
 };

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

@@ -2,10 +2,8 @@ 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 | null;
+    media?: ReactNode;
     /**
      * Title text displayed prominently
      */
@@ -19,18 +17,5 @@ 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,41 +1,38 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-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 })
-          ] })
-        ]
-      }
-    );
-  }
+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 })
+        ] })
+      ]
+    }
+  )
 );
-f.displayName = "Empty";
+o.displayName = "Empty";
 export {
-  f as Empty
+  o as Empty
 };

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

@@ -1,8 +1,5 @@
 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.
@@ -24,19 +21,5 @@ 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,63 +1,14 @@
 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,53 +1,12 @@
-/**
- * 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,