@yuno-payments/dashboard-design-system 2.9.5 → 3.0.0

package/dist/components/organisms/combobox/combobox.js

@@ -1,240 +0,0 @@
-import { j as s } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as _, useState as y, useRef as W, useEffect as z } from "react";
-import { cn as f } from "../../../lib/utils.js";
-import { Combobox as A, ComboboxTrigger as P, ComboboxContent as ee } from "../../../vendor/shadcn/combobox.js";
-import { Icon as B } from "../../atoms/icon/icon.js";
-import { Label as se } from "../../atoms/label/label.js";
-import { Typography as C } from "../../atoms/typography/typography.js";
-import { Badge as N } from "../../atoms/badge/badge.js";
-import { Checkbox as te } from "../../molecules/checkbox/checkbox.js";
-const ne = ({ message: n = "No results" }) => /* @__PURE__ */ s.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ s.jsx(C, { variant: "sm", className: "text-muted-foreground", children: n }) }), re = _(
-  ({
-    value: n,
-    options: o,
-    selectPlaceholder: K = "Select",
-    searchPlaceholder: w = "Search",
-    onChange: k,
-    onCloseChip: x,
-    valueProp: r = "value",
-    fullWidth: D = !1,
-    disabled: a = !1,
-    withSearch: d = !0,
-    limitTags: v = 10,
-    maxHeightList: g = 320,
-    emptyState: G = /* @__PURE__ */ s.jsx(ne, {}),
-    label: E,
-    description: O,
-    error: u,
-    deleteAll: l,
-    className: L,
-    id: i,
-    renderOption: R,
-    renderChip: F
-  }, M) => {
-    const [c, S] = y(!1), [U, V] = y(""), [T, p] = y(o), h = W(null);
-    z(() => {
-      p(o);
-    }, [o]), z(() => {
-      c && h.current && d && setTimeout(() => {
-        h.current?.focus();
-      }, 0);
-    }, [c, d]);
-    const b = (e) => {
-      const t = e.label || e[r];
-      return String(t);
-    }, X = (e) => {
-      const t = e.target.value;
-      if (V(t), t === "")
-        p(o);
-      else {
-        const m = o.filter(
-          (Z) => b(Z).toLowerCase().includes(t.toLowerCase())
-        );
-        p(m);
-      }
-    }, j = (e) => {
-      if (a) return;
-      const t = n.includes(e) ? n.filter((m) => m !== e) : [...n, e];
-      k(t);
-    }, q = (e) => {
-      if (!a)
-        if (x)
-          x(e);
-        else {
-          const t = n.filter((m) => m !== e);
-          k(t);
-        }
-    }, H = () => {
-      a || !l?.onClick || l.onClick();
-    }, J = (e, t) => e?.length <= t ? e : e?.substring(0, t) + "...", I = n.map((e) => o.find((t) => t[r] === e)).filter(Boolean), Q = l && !a && n.length >= l.length, Y = I.slice(0, v), $ = I.length - v;
-    return /* @__PURE__ */ s.jsxs("div", { className: f("w-full", D && "w-full", L), children: [
-      E && /* @__PURE__ */ s.jsx(
-        se,
-        {
-          htmlFor: i,
-          className: f("mb-2 block", a && "opacity-50"),
-          children: E
-        }
-      ),
-      O && !u && /* @__PURE__ */ s.jsx(
-        C,
-        {
-          variant: "sm",
-          className: f(
-            "text-muted-foreground mb-2",
-            a && "opacity-50"
-          ),
-          children: O
-        }
-      ),
-      /* @__PURE__ */ s.jsxs(A, { open: c, onOpenChange: S, children: [
-        /* @__PURE__ */ s.jsx(P, { asChild: !0, children: /* @__PURE__ */ s.jsxs(
-          "button",
-          {
-            ref: M,
-            id: i,
-            type: "button",
-            disabled: a,
-            role: "combobox",
-            "aria-expanded": c,
-            "aria-haspopup": "listbox",
-            "aria-controls": c ? `${i}-listbox` : void 0,
-            className: f(
-              "flex h-auto min-h-[38px] w-full items-center justify-between gap-2 rounded-md border border-input bg-input px-3 py-1.5 text-sm shadow-xs 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",
-              u && "border-destructive",
-              D && "w-full"
-            ),
-            children: [
-              /* @__PURE__ */ s.jsx("div", { className: "flex flex-wrap gap-1 flex-1 items-center", children: n.length === 0 ? /* @__PURE__ */ s.jsx("span", { className: "text-muted-foreground", children: K }) : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-                Q && /* @__PURE__ */ s.jsx(
-                  "div",
-                  {
-                    onClick: (e) => {
-                      e.preventDefault(), e.stopPropagation(), H();
-                    },
-                    children: /* @__PURE__ */ s.jsx(
-                      N,
-                      {
-                        variant: "secondary",
-                        className: "gap-1 cursor-pointer flex items-center",
-                        children: l.label || "Delete all"
-                      }
-                    )
-                  }
-                ),
-                Y.map((e) => /* @__PURE__ */ s.jsx(
-                  "div",
-                  {
-                    onClick: (t) => {
-                      x && !a && (t.preventDefault(), t.stopPropagation(), q(e[r]));
-                    },
-                    children: F ? F(e) : /* @__PURE__ */ s.jsx(
-                      N,
-                      {
-                        variant: "outline",
-                        className: "gap-1 flex items-center",
-                        endIcon: x && !a ? "X" : void 0,
-                        children: J(b(e), 8)
-                      }
-                    )
-                  },
-                  e[r]
-                )),
-                $ > 0 && /* @__PURE__ */ s.jsx(N, { variant: "outline", className: "flex items-center", children: `+${$}` })
-              ] }) }),
-              /* @__PURE__ */ s.jsx(
-                B,
-                {
-                  name: "CaretUpDown",
-                  size: "sm",
-                  className: f(
-                    "opacity-50 transition-transform",
-                    c && "transform rotate-180"
-                  )
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ s.jsx(
-          ee,
-          {
-            className: "p-0",
-            align: "start",
-            style: { maxHeight: g },
-            id: i ? `${i}-listbox` : void 0,
-            role: "listbox",
-            children: /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col", children: [
-              d && o.length > 0 && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b", children: [
-                /* @__PURE__ */ s.jsx(
-                  B,
-                  {
-                    name: "MagnifyingGlass",
-                    size: "sm",
-                    className: "text-muted-foreground"
-                  }
-                ),
-                /* @__PURE__ */ s.jsx(
-                  "input",
-                  {
-                    ref: h,
-                    type: "text",
-                    placeholder: w,
-                    value: U,
-                    onChange: X,
-                    onKeyDown: (e) => {
-                      e.stopPropagation(), e.key === "Escape" && S(!1);
-                    },
-                    className: "flex-1 outline-none bg-transparent text-sm placeholder:text-muted-foreground",
-                    "aria-label": w
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ s.jsx(
-                "div",
-                {
-                  className: "overflow-y-auto",
-                  style: {
-                    maxHeight: d ? g - 48 : g
-                  },
-                  children: T.length > 0 ? T.map((e) => /* @__PURE__ */ s.jsx(
-                    "div",
-                    {
-                      role: "option",
-                      "aria-selected": n.includes(e[r]),
-                      className: "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent transition-colors",
-                      onClick: () => j(e[r]),
-                      onKeyDown: (t) => {
-                        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), j(e[r]));
-                      },
-                      children: R ? R(
-                        e,
-                        n.includes(e[r])
-                      ) : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-                        /* @__PURE__ */ s.jsx(
-                          te,
-                          {
-                            checked: n.includes(e[r]),
-                            onChange: () => j(e[r]),
-                            onClick: (t) => t.stopPropagation()
-                          }
-                        ),
-                        /* @__PURE__ */ s.jsx("span", { className: "text-sm flex-1", children: b(e) })
-                      ] })
-                    },
-                    e[r]
-                  )) : G
-                }
-              )
-            ] })
-          }
-        )
-      ] }),
-      u && /* @__PURE__ */ s.jsx(C, { variant: "sm", className: "text-destructive mt-2", children: u })
-    ] });
-  }
-);
-re.displayName = "Combobox";
-export {
-  re as Combobox
-};

package/dist/components/organisms/combobox/index.d.ts

@@ -1,2 +0,0 @@
-export { Combobox } from './combobox';
-export type { ComboboxProps, ComboboxOption } from './types';

package/dist/components/organisms/combobox/types.d.ts

@@ -1,132 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * Represents a single option in the combobox
- */
-export interface ComboboxOption {
-    /**
-     * Unique value for the option
-     */
-    value: string | number;
-    /**
-     * Display label for the option
-     */
-    label: string;
-    /**
-     * Additional properties can be added
-     */
-    [key: string]: string | number;
-}
-/**
- * Props for the Combobox component
- */
-export interface ComboboxProps {
-    /**
-     * Array of selected option values
-     */
-    value: Array<string | number>;
-    /**
-     * Array of available options
-     */
-    options: ComboboxOption[];
-    /**
-     * Placeholder text when no options are selected
-     * @default "Select"
-     */
-    selectPlaceholder?: string;
-    /**
-     * Placeholder text for the search input
-     * @default "Search"
-     */
-    searchPlaceholder?: string;
-    /**
-     * Callback fired when selection changes
-     */
-    onChange: (values: Array<string | number>) => void;
-    /**
-     * Callback fired when a chip/tag is removed
-     */
-    onCloseChip?: (value: string | number) => void;
-    /**
-     * Property name to use as the value identifier
-     * @default "value"
-     */
-    valueProp?: string;
-    /**
-     * Whether the combobox should take full width
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Whether the combobox is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show the search input
-     * @default true
-     */
-    withSearch?: boolean;
-    /**
-     * Maximum number of chips to display before showing "+N"
-     * @default 10
-     */
-    limitTags?: number;
-    /**
-     * Maximum height of the options list in pixels
-     * @default 320
-     */
-    maxHeightList?: number;
-    /**
-     * Custom empty state component when no options match search
-     */
-    emptyState?: ReactNode;
-    /**
-     * Label text displayed above the combobox
-     */
-    label?: string;
-    /**
-     * Helper text displayed below the combobox
-     */
-    description?: string;
-    /**
-     * Error message displayed below the combobox
-     */
-    error?: string;
-    /**
-     * Configuration for "Delete All" chip functionality
-     */
-    deleteAll?: {
-        /**
-         * Label for the delete all chip
-         */
-        label?: string;
-        /**
-         * Minimum number of selected items to show delete all
-         */
-        length: number;
-        /**
-         * Callback fired when delete all is clicked
-         */
-        onClick: () => void;
-    };
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /**
-     * HTML id attribute
-     */
-    id?: string;
-    /**
-     * Custom render function for each option in the dropdown list.
-     * Replaces inner content only — the wrapper with role="option",
-     * click handlers, and hover styles is always provided by the Combobox.
-     */
-    renderOption?: (option: ComboboxOption, isSelected: boolean) => ReactNode;
-    /**
-     * Custom render function for each selected chip in the trigger area.
-     * Replaces the default truncated Badge — the wrapper div with
-     * remove-on-click behavior is always provided by the Combobox.
-     */
-    renderChip?: (option: ComboboxOption) => ReactNode;
-}

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

@@ -1,7 +0,0 @@
-import { Cell } from '@tanstack/react-table';
-interface DataTableBodyCellProps<TData, TValue> {
-    cell: Cell<TData, TValue>;
-    enableColumnResizing: boolean;
-}
-export declare function DataTableBodyCell<TData, TValue>({ cell, enableColumnResizing, }: DataTableBodyCellProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/organisms/data-table/components/cells/data-table-body-cell.js

@@ -1,19 +0,0 @@
-import { j as m } from "../../../../../_virtual/jsx-runtime.js";
-import { flexRender as l } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { TableCell as n } from "../../../../../vendor/shadcn/table.js";
-import { getCellStyles as i } from "../../utils/data-table-styles.js";
-import { CELL_BACKGROUND_COLORS as s } from "../../utils/data-table-constants.js";
-function x({
-  cell: o,
-  enableColumnResizing: t
-}) {
-  const { style: e, className: r } = i(
-    o.column,
-    t,
-    s.body
-  );
-  return /* @__PURE__ */ m.jsx(n, { style: e, className: r, children: l(o.column.columnDef.cell, o.getContext()) }, o.id);
-}
-export {
-  x as DataTableBodyCell
-};

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

@@ -1,8 +0,0 @@
-import { Header } from '@tanstack/react-table';
-interface DataTableDraggableHeaderCellProps<TData, TValue> {
-    header: Header<TData, TValue>;
-    index: number;
-    enableColumnResizing: boolean;
-}
-export declare function DataTableDraggableHeaderCell<TData, TValue>({ header, index, enableColumnResizing, }: DataTableDraggableHeaderCellProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/organisms/data-table/components/cells/data-table-draggable-header-cell.js

@@ -1,51 +0,0 @@
-import { j as t } from "../../../../../_virtual/jsx-runtime.js";
-import { flexRender as m } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useSortable as c } from "../../../../../node_modules/@dnd-kit/react/sortable.js";
-import { TableHead as p } from "../../../../../vendor/shadcn/table.js";
-import { cn as u } from "../../../../../lib/utils.js";
-import { getCellStyles as d } from "../../utils/data-table-styles.js";
-import { CELL_BACKGROUND_COLORS as f } from "../../utils/data-table-constants.js";
-import { DataTableResizeHandle as g } from "./data-table-resize-handle.js";
-function H({
-  header: e,
-  index: r,
-  enableColumnResizing: l
-}) {
-  const { style: s, className: i } = d(
-    e.column,
-    l,
-    f.header
-  ), { ref: n, isDragging: o } = c({
-    id: e.column.id,
-    index: r,
-    group: "columns"
-  }), a = {
-    ...s,
-    opacity: o ? 0.5 : 1,
-    zIndex: o ? 1 : void 0,
-    position: o ? "relative" : s?.position,
-    cursor: "grab"
-  };
-  return /* @__PURE__ */ t.jsxs(
-    p,
-    {
-      ref: n,
-      style: a,
-      className: u(i, o && "bg-muted/80"),
-      children: [
-        /* @__PURE__ */ t.jsx("div", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: e.isPlaceholder ? null : m(e.column.columnDef.header, e.getContext()) }),
-        l && e.column.getCanResize() && /* @__PURE__ */ t.jsx(
-          g,
-          {
-            onMouseDown: e.getResizeHandler(),
-            onTouchStart: e.getResizeHandler()
-          }
-        )
-      ]
-    },
-    e.id
-  );
-}
-export {
-  H as DataTableDraggableHeaderCell
-};

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

@@ -1,7 +0,0 @@
-import { Header } from '@tanstack/react-table';
-interface DataTableHeaderCellProps<TData, TValue> {
-    header: Header<TData, TValue>;
-    enableColumnResizing: boolean;
-}
-export declare function DataTableHeaderCell<TData, TValue>({ header, enableColumnResizing, }: DataTableHeaderCellProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/organisms/data-table/components/cells/data-table-header-cell.js

@@ -1,29 +0,0 @@
-import { j as o } from "../../../../../_virtual/jsx-runtime.js";
-import { flexRender as r } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { TableHead as n } from "../../../../../vendor/shadcn/table.js";
-import { getCellStyles as i } from "../../utils/data-table-styles.js";
-import { CELL_BACKGROUND_COLORS as m } from "../../utils/data-table-constants.js";
-import { DataTableResizeHandle as a } from "./data-table-resize-handle.js";
-function R({
-  header: e,
-  enableColumnResizing: t
-}) {
-  const { style: l, className: s } = i(
-    e.column,
-    t,
-    m.header
-  );
-  return /* @__PURE__ */ o.jsxs(n, { style: l, className: s, children: [
-    /* @__PURE__ */ o.jsx("div", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: e.isPlaceholder ? null : r(e.column.columnDef.header, e.getContext()) }),
-    t && e.column.getCanResize() && /* @__PURE__ */ o.jsx(
-      a,
-      {
-        onMouseDown: e.getResizeHandler(),
-        onTouchStart: e.getResizeHandler()
-      }
-    )
-  ] }, e.id);
-}
-export {
-  R as DataTableHeaderCell
-};

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

@@ -1,54 +0,0 @@
-/**
- * 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.
- * Item icons that fail to load are hidden automatically.
- *
- * @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/cells/data-table-list-cell.js

@@ -1,73 +0,0 @@
-import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { forwardRef as g } from "react";
-import { cn as f } from "../../../../../lib/utils.js";
-import { TooltipProvider as c, Tooltip as i, TooltipTrigger as o, TooltipContent as m } from "../../../../../vendor/shadcn/tooltip.js";
-import { Badge as N } from "../../../../atoms/badge/badge.js";
-const T = g(
-  ({ items: n, maxLength: a = 7, showRemainingCount: d = !0, className: x }, p) => {
-    if (!n || n.length === 0) return null;
-    const r = n[0], t = n.slice(1), l = r.name.length > a && a > 0, h = l ? `${r.name.slice(0, a)}...` : r.name;
-    return /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        ref: p,
-        className: f("flex items-center gap-2 h-[46px]", x),
-        children: [
-          r.icon && /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: r.icon,
-              alt: r.name,
-              className: "h-4 w-4 object-contain",
-              onError: (s) => {
-                s.currentTarget.style.display = "none";
-              }
-            }
-          ),
-          /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-1", children: l ? /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsxs(i, { children: [
-            /* @__PURE__ */ e.jsx(o, { asChild: !0, children: /* @__PURE__ */ e.jsx("span", { className: "text-sm cursor-help", children: h }) }),
-            /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx("p", { children: r.name }) })
-          ] }) }) : /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: r.name }) }),
-          t.length > 0 && d && /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsxs(i, { children: [
-            /* @__PURE__ */ e.jsx(o, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-              N,
-              {
-                variant: "outline",
-                className: "h-3 px-1 text-[8px] leading-none cursor-pointer hover:border-primary hover:text-primary",
-                children: [
-                  "+",
-                  t.length
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ e.jsx(m, { className: "p-2", children: /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: t.map((s, j) => /* @__PURE__ */ e.jsxs(
-              "div",
-              {
-                className: "flex items-center gap-3",
-                children: [
-                  s.icon && /* @__PURE__ */ e.jsx(
-                    "img",
-                    {
-                      src: s.icon,
-                      alt: s.name,
-                      className: "h-4 w-4 object-contain",
-                      onError: (u) => {
-                        u.currentTarget.style.display = "none";
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ e.jsx("span", { className: "text-sm text-foreground", children: s.name })
-                ]
-              },
-              `${s.name}-${j}`
-            )) }) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-T.displayName = "DataTableListCell";
-export {
-  T as DataTableListCell
-};

package/dist/components/organisms/data-table/components/cells/data-table-resize-handle.d.ts

@@ -1,6 +0,0 @@
-interface DataTableResizeHandleProps {
-    onMouseDown: (event: React.MouseEvent) => void;
-    onTouchStart: (event: React.TouchEvent) => void;
-}
-export declare function DataTableResizeHandle({ onMouseDown, onTouchStart, }: DataTableResizeHandleProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/organisms/data-table/components/cells/data-table-resize-handle.js

@@ -1,30 +0,0 @@
-import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { RESIZE_HANDLE_CONFIG as t } from "../../utils/data-table-constants.js";
-function c({
-  onMouseDown: n,
-  onTouchStart: r
-}) {
-  const s = (o) => {
-    o.stopPropagation(), n(o);
-  }, a = (o) => {
-    o.stopPropagation(), r(o);
-  };
-  return /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      onMouseDown: s,
-      onTouchStart: a,
-      onPointerDown: (o) => o.stopPropagation(),
-      className: `absolute right-0 top-0 h-full ${t.width} cursor-col-resize select-none touch-none flex items-center justify-center hover:bg-neutral-100`,
-      children: /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: `${t.lineHeight} ${t.lineWidth} bg-neutral-300`
-        }
-      )
-    }
-  );
-}
-export {
-  c as DataTableResizeHandle
-};