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

package/dist/components/organisms/multi-select/multi-select.js

@@ -1,160 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as c from "react";
-import { cn as j } from "../../../lib/utils.js";
-import { Button as B } from "../../../vendor/shadcn/button.js";
-import { Command as E, CommandInput as F, CommandEmpty as I, CommandList as A, CommandGroup as G, CommandItem as T } from "../../../vendor/shadcn/command.js";
-import { Popover as W, PopoverTrigger as X, PopoverContent as q } from "../../../vendor/shadcn/popover.js";
-import g from "../../../node_modules/lucide-react/dist/esm/icons/x.js";
-import z from "../../../node_modules/lucide-react/dist/esm/icons/check.js";
-const D = c.forwardRef(
-  ({
-    options: m,
-    value: s = [],
-    onChange: l,
-    placeholder: b = "Select items...",
-    searchPlaceholder: w = "Search",
-    emptyMessage: N = "No results found.",
-    disabled: v = !1,
-    label: i,
-    description: u,
-    error: o,
-    maxDisplay: a = 3,
-    className: C,
-    showBadges: x = !0,
-    allowClear: y = !0
-  }, k) => {
-    const [h, S] = c.useState(!1), [p, V] = c.useState(""), L = (t) => {
-      const r = s.includes(t) ? s.filter((d) => d !== t) : [...s, t];
-      l?.(r);
-    }, P = (t, r) => {
-      r?.preventDefault(), r?.stopPropagation();
-      const d = s.filter((R) => R !== t);
-      l?.(d);
-    }, O = (t) => {
-      t.preventDefault(), t.stopPropagation(), l?.([]);
-    }, n = s.map((t) => m.find((r) => r.value === t)).filter(Boolean), M = x ? n.slice(0, a) : [], f = n.length > a ? n.length - a : 0;
-    return /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
-      i && /* @__PURE__ */ e.jsx("label", { className: "text-sm font-medium text-foreground mb-1.5 block", children: i }),
-      u && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground mb-2", children: u }),
-      /* @__PURE__ */ e.jsxs(W, { open: h, onOpenChange: S, children: [
-        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-          B,
-          {
-            ref: k,
-            variant: "outline",
-            role: "combobox",
-            "aria-expanded": h,
-            disabled: v,
-            className: j(
-              "w-full justify-between h-auto min-h-9 py-2",
-              o && "border-destructive",
-              !s.length && "text-muted-foreground",
-              C
-            ),
-            children: [
-              /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1 items-center flex-1", children: s.length === 0 ? /* @__PURE__ */ e.jsx("span", { children: b }) : x ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                M.map((t) => /* @__PURE__ */ e.jsxs(
-                  "span",
-                  {
-                    className: "inline-flex items-center mr-1 px-2 py-0.5 h-6 text-xs font-normal rounded-md border border-border bg-secondary text-secondary-foreground",
-                    children: [
-                      /* @__PURE__ */ e.jsx("span", { className: "max-w-[150px] truncate", children: t.label }),
-                      /* @__PURE__ */ e.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          className: "ml-1 rounded-full outline-hidden hover:bg-muted-foreground/20",
-                          onClick: (r) => P(t.value, r),
-                          children: /* @__PURE__ */ e.jsx(g, { className: "h-3 w-3" })
-                        }
-                      )
-                    ]
-                  },
-                  t.value
-                )),
-                f > 0 && /* @__PURE__ */ e.jsxs("span", { className: "inline-flex items-center px-2 py-0.5 h-6 text-xs font-normal rounded-md border border-border bg-secondary text-secondary-foreground", children: [
-                  "+",
-                  f,
-                  " more"
-                ] })
-              ] }) : /* @__PURE__ */ e.jsxs("span", { className: "text-sm", children: [
-                n.length,
-                " selected"
-              ] }) }),
-              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 ml-2", children: [
-                y && s.length > 0 && /* @__PURE__ */ e.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: O,
-                    className: "h-4 w-4 rounded-full hover:bg-muted p-0.5",
-                    children: /* @__PURE__ */ e.jsx(g, { className: "h-3 w-3" })
-                  }
-                ),
-                /* @__PURE__ */ e.jsx(
-                  "svg",
-                  {
-                    className: "h-4 w-4 shrink-0 opacity-50",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ e.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M19 9l-7 7-7-7"
-                      }
-                    )
-                  }
-                )
-              ] })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(q, { className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ e.jsxs(E, { shouldFilter: !1, children: [
-          /* @__PURE__ */ e.jsx(
-            F,
-            {
-              placeholder: w,
-              value: p,
-              onValueChange: V
-            }
-          ),
-          /* @__PURE__ */ e.jsx(I, { children: N }),
-          /* @__PURE__ */ e.jsx(A, { children: /* @__PURE__ */ e.jsx(G, { children: m.filter(
-            (t) => t.label.toLowerCase().includes(p.toLowerCase())
-          ).map((t) => /* @__PURE__ */ e.jsxs(
-            T,
-            {
-              value: t.value,
-              onSelect: () => {
-                L(t.value);
-              },
-              children: [
-                /* @__PURE__ */ e.jsx(
-                  z,
-                  {
-                    className: j(
-                      "mr-2 h-4 w-4",
-                      s.includes(t.value) ? "opacity-100" : "opacity-0"
-                    )
-                  }
-                ),
-                t.label
-              ]
-            },
-            t.value
-          )) }) })
-        ] }) })
-      ] }),
-      o && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-destructive mt-1.5", children: o })
-    ] });
-  }
-);
-D.displayName = "MultiSelect";
-export {
-  D as MultiSelect
-};

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

@@ -1 +0,0 @@
-export { Sheet, type SheetProps } from './sheet';

package/dist/components/organisms/sheet/sheet.d.ts

@@ -1,94 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { ButtonProps } from '../../atoms/button';
-import * as React from "react";
-declare const sheetVariants: (props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
-    isOpen?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Props for the Sheet component
- */
-export interface SheetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof sheetVariants> {
-    /**
-     * Sheet title (text or custom element)
-     */
-    title?: React.ReactElement | string;
-    /**
-     * Optional description displayed below the title
-     */
-    description?: React.ReactElement | string;
-    /**
-     * Whether the sheet is open
-     */
-    open: boolean;
-    /**
-     * Callback fired when the sheet should close
-     */
-    onClose: () => void;
-    /**
-     * Array of button configurations to display in the footer
-     */
-    buttons?: ButtonProps[];
-    /**
-     * Custom width for the sheet (applies to left/right sides)
-     */
-    width?: number | string;
-    /**
-     * Custom height for the sheet (applies to top/bottom sides)
-     */
-    height?: number | string;
-    /**
-     * Whether to show the header section
-     * @default true
-     */
-    showHeader?: boolean;
-    /**
-     * Whether to show the footer section
-     * @default true
-     */
-    showFooter?: boolean;
-    /**
-     * Content to display in the sheet body
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS classes for the header
-     */
-    headerClassName?: string;
-    /**
-     * Additional CSS classes for the content area
-     */
-    contentClassName?: string;
-    /**
-     * Additional CSS classes for the footer
-     */
-    footerClassName?: string;
-    /**
-     * Whether to disable buttons during loading state
-     * @default false
-     */
-    loading?: boolean;
-}
-/**
- * Slide-out panel component that appears from the sides (or top/bottom) of the screen.
- * Features smooth animations, backdrop overlay, ESC key support, and body scroll locking.
- *
- * @example
- * ```tsx
- * <Sheet
- *   open={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   side="right"
- *   title="Edit Profile"
- *   description="Update your personal information"
- *   buttons={[
- *     { children: 'Cancel', variant: 'outline', onClick: handleCancel },
- *     { children: 'Save', onClick: handleSave }
- *   ]}
- * >
- *   <form>...</form>
- * </Sheet>
- * ```
- */
-declare const Sheet: React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>>;
-export { Sheet };

package/dist/components/organisms/sheet/sheet.js

@@ -1,181 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as i from "react";
-import { createPortal as H } from "react-dom";
-import { cva as g } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { cn as r, normalizeDimension as p } from "../../../lib/utils.js";
-import { useBodyScrollLock as M } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as R } from "../../../hooks/use-escape-key.js";
-import { Icon as W } from "../../atoms/icon/icon.js";
-import { Button as x } from "../../atoms/button/button.js";
-import { Typography as b } from "../../atoms/typography/typography.js";
-const D = g(
-  "fixed z-sheet bg-background shadow-lg transition-transform duration-300 ease-in-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b",
-        bottom: "inset-x-0 bottom-0 border-t",
-        left: "inset-y-0 left-0 border-r w-3/4 sm:max-w-sm",
-        right: "inset-y-0 right-0 border-l w-3/4 sm:max-w-lg"
-      },
-      isOpen: {
-        true: "",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      { side: "right", isOpen: !1, class: "translate-x-full" },
-      { side: "right", isOpen: !0, class: "translate-x-0" },
-      { side: "left", isOpen: !1, class: "-translate-x-full" },
-      { side: "left", isOpen: !0, class: "translate-x-0" },
-      { side: "top", isOpen: !1, class: "-translate-y-full" },
-      { side: "top", isOpen: !0, class: "translate-y-0" },
-      { side: "bottom", isOpen: !1, class: "translate-y-full" },
-      { side: "bottom", isOpen: !0, class: "translate-y-0" }
-    ],
-    defaultVariants: {
-      side: "right",
-      isOpen: !1
-    }
-  }
-), F = g(
-  "fixed inset-0 z-sheet bg-black/50 transition-opacity duration-300",
-  {
-    variants: {
-      isOpen: {
-        true: "opacity-100",
-        false: "opacity-0"
-      }
-    },
-    defaultVariants: {
-      isOpen: !1
-    }
-  }
-), K = i.forwardRef(
-  ({
-    className: y,
-    side: s = "right",
-    title: l,
-    description: o,
-    open: a,
-    onClose: n,
-    buttons: c = [],
-    width: j,
-    height: v,
-    showHeader: O = !0,
-    showFooter: N = !0,
-    children: w,
-    headerClassName: S,
-    contentClassName: k,
-    footerClassName: z,
-    loading: T = !1,
-    ...V
-  }, E) => {
-    const [I, f] = i.useState(!1), [u, h] = i.useState(!1);
-    if (M(a), R(a, n), i.useEffect(() => {
-      if (a) {
-        f(!0);
-        const t = setTimeout(() => h(!0), 10);
-        return () => clearTimeout(t);
-      } else {
-        h(!1);
-        const t = setTimeout(() => f(!1), 300);
-        return () => clearTimeout(t);
-      }
-    }, [a]), !I) return null;
-    const d = p(j), m = p(v), A = {
-      ...d && (s === "left" || s === "right") ? { width: d, maxWidth: d } : {},
-      ...m && (s === "top" || s === "bottom") ? { height: m, maxHeight: m } : {}
-    }, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: F({ isOpen: u }),
-          onClick: n,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          ref: E,
-          className: r(D({ side: s, isOpen: u }), y),
-          style: A,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": l ? "sheet-title" : void 0,
-          "aria-describedby": o ? "sheet-description" : void 0,
-          ...V,
-          children: /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-            O && /* @__PURE__ */ e.jsxs(
-              "div",
-              {
-                className: r(
-                  "flex items-center justify-between border-b border-border p-6",
-                  S
-                ),
-                children: [
-                  /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
-                    l && /* @__PURE__ */ e.jsx(
-                      b,
-                      {
-                        id: "sheet-title",
-                        as: "h2",
-                        variant: "h3",
-                        className: "font-semibold",
-                        children: l
-                      }
-                    ),
-                    o && /* @__PURE__ */ e.jsx(
-                      b,
-                      {
-                        id: "sheet-description",
-                        variant: "muted",
-                        className: "text-sm",
-                        children: o
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ e.jsx(
-                    x,
-                    {
-                      variant: "ghost",
-                      size: "icon",
-                      onClick: n,
-                      "aria-label": "Close",
-                      className: "h-6 w-6",
-                      children: /* @__PURE__ */ e.jsx(W, { name: "X", size: "md" })
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ e.jsx("div", { className: r("flex-1 overflow-y-auto p-6", k), children: w }),
-            N && c.length > 0 && /* @__PURE__ */ e.jsx(
-              "div",
-              {
-                className: r(
-                  "flex items-center justify-end gap-3 border-t border-border p-6",
-                  z
-                ),
-                children: c.map((t, C) => /* @__PURE__ */ e.jsx(
-                  x,
-                  {
-                    disabled: T || t.disabled,
-                    ...t
-                  },
-                  C
-                ))
-              }
-            )
-          ] })
-        }
-      )
-    ] });
-    return H(B, document.body);
-  }
-);
-K.displayName = "Sheet";
-export {
-  K as Sheet
-};

package/dist/components/organisms/transfer-list/index.d.ts

@@ -1,3 +0,0 @@
-export { TransferList, type TransferListProps } from './transfer-list';
-export { TransferListEmptyState } from './transfer-list-empty-state';
-export type { TransferItem } from './transfer-list.types';

package/dist/components/organisms/transfer-list/transfer-list-box.d.ts

@@ -1,17 +0,0 @@
-import { TransferItem } from './transfer-list.types';
-import { IconName } from '../../atoms/icon';
-export interface TransferListBoxProps {
-    id: string;
-    title: string;
-    items: TransferItem[];
-    height: number;
-    showSearch: boolean;
-    search: string;
-    searchPlaceholder: string;
-    onSearchChange: (value: string) => void;
-    onMove?: (item: TransferItem) => void;
-    moveIconName?: IconName;
-    emptyState?: React.ReactNode;
-    isSelected?: boolean;
-}
-export declare const TransferListBox: ({ id, title, items, height, showSearch, search, searchPlaceholder, onSearchChange, onMove, moveIconName, emptyState, isSelected, }: TransferListBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/transfer-list/transfer-list-box.js

@@ -1,65 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { useDroppable as j } from "../../../node_modules/@dnd-kit/react/index.js";
-import { TransferListItem as I } from "./transfer-list-item.js";
-import { TransferListEmptyState as y } from "./transfer-list-empty-state.js";
-import { Field as N } from "../../molecules/field/field.js";
-const v = 1, R = ({
-  id: l,
-  title: t,
-  items: o,
-  height: n,
-  showSearch: m,
-  search: s,
-  searchPlaceholder: f,
-  onSearchChange: p,
-  onMove: c,
-  moveIconName: x,
-  emptyState: d,
-  isSelected: u = !1
-}) => {
-  const a = `${l}-title`, i = o.length === 0, { ref: b } = j({ id: l, collisionPriority: v }), g = d ?? /* @__PURE__ */ e.jsx(y, {});
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: "border border-border rounded-lg p-4 w-full flex flex-col gap-2",
-      style: { height: n },
-      children: [
-        /* @__PURE__ */ e.jsx("p", { id: a, className: "text-sm text-foreground mb-2", children: t }),
-        m && (!i || s.length > 0) && /* @__PURE__ */ e.jsx(
-          N,
-          {
-            placeholder: f,
-            value: s,
-            onChange: (r) => p(r.target.value),
-            "aria-label": `${t} search`
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            ref: b,
-            className: "h-full overflow-auto w-full flex flex-col gap-2",
-            role: "listbox",
-            "aria-labelledby": a,
-            "aria-multiselectable": !0,
-            children: i ? g : o.map((r, h) => /* @__PURE__ */ e.jsx(
-              I,
-              {
-                item: r,
-                index: h,
-                group: l,
-                onMove: c,
-                moveIconName: x,
-                isSelected: u
-              },
-              r.id
-            ))
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  R as TransferListBox
-};

package/dist/components/organisms/transfer-list/transfer-list-empty-state.d.ts

@@ -1,7 +0,0 @@
-import { IconName } from '../../atoms/icon';
-export interface TransferListEmptyStateProps {
-    title?: string;
-    description?: string;
-    iconName?: IconName;
-}
-export declare const TransferListEmptyState: ({ title, description, iconName, }: TransferListEmptyStateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/transfer-list/transfer-list-empty-state.js

@@ -1,14 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { Icon as o } from "../../atoms/icon/icon.js";
-const l = ({
-  title: t = "No items",
-  description: r = "No items available",
-  iconName: s = "TextColumns"
-}) => /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 border border-border rounded-lg p-4 bg-muted", children: [
-  /* @__PURE__ */ e.jsx(o, { name: s, className: "text-muted-foreground", size: "xl" }),
-  /* @__PURE__ */ e.jsx("p", { className: "text-base text-center text-foreground font-bold", children: t }),
-  /* @__PURE__ */ e.jsx("p", { className: "text-xs text-center text-muted-foreground", children: r })
-] });
-export {
-  l as TransferListEmptyState
-};

package/dist/components/organisms/transfer-list/transfer-list-item.d.ts

@@ -1,15 +0,0 @@
-import { TransferItem } from './transfer-list.types';
-import { IconName } from '../../atoms/icon';
-export interface TransferListItemViewProps {
-    item: TransferItem;
-    onMove?: (item: TransferItem) => void;
-    moveIconName?: IconName;
-    isSelected?: boolean;
-}
-export interface TransferListItemProps extends TransferListItemViewProps {
-    index: number;
-    group: string;
-}
-/** Presentational-only item — used inside DragOverlay (no dnd hooks). */
-export declare const TransferListItemView: ({ item, onMove, moveIconName, isSelected, }: TransferListItemViewProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TransferListItem: ({ item, index, group, onMove, moveIconName, isSelected, }: TransferListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/transfer-list/transfer-list-item.js

@@ -1,76 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { useSortable as p } from "../../../node_modules/@dnd-kit/react/sortable.js";
-import { Button as l } from "../../atoms/button/button.js";
-import { Icon as n } from "../../atoms/icon/icon.js";
-import { cn as m } from "../../../lib/utils.js";
-const h = ({
-  item: r,
-  onMove: a,
-  moveIconName: o = "PlusCircle",
-  isSelected: s = !1
-}) => /* @__PURE__ */ e.jsxs(
-  "div",
-  {
-    className: "flex items-center py-1.5 px-2 bg-muted border border-border rounded gap-2 cursor-grabbing",
-    role: "option",
-    "aria-selected": s,
-    tabIndex: -1,
-    children: [
-      /* @__PURE__ */ e.jsx("span", { className: "flex items-center shrink-0", children: /* @__PURE__ */ e.jsx(n, { name: "DotsSixVertical", className: "text-muted-foreground" }) }),
-      /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-foreground flex-1 flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ e.jsx("span", { children: r.label }),
-        r.description && /* @__PURE__ */ e.jsx("span", { className: "text-xs text-muted-foreground font-normal", children: r.description })
-      ] }),
-      r.actions,
-      a && /* @__PURE__ */ e.jsx(l, { variant: "ghost", size: "icon", onClick: (i) => i.stopPropagation(), children: /* @__PURE__ */ e.jsx(n, { name: o, className: "text-muted-foreground" }) })
-    ]
-  }
-), N = ({
-  item: r,
-  index: a,
-  group: o,
-  onMove: s,
-  moveIconName: i = "PlusCircle",
-  isSelected: c = !1
-}) => {
-  const { ref: x, isDragging: d } = p({ id: r.id, index: a, group: o });
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      ref: x,
-      className: m(
-        "flex items-center py-1.5 px-2 bg-muted border border-border rounded gap-2 cursor-grab",
-        d && "opacity-50 cursor-grabbing"
-      ),
-      role: "option",
-      "aria-selected": c,
-      tabIndex: 0,
-      onKeyDown: (t) => {
-        (t.key === "Enter" || t.key === " ") && s && (t.preventDefault(), s(r));
-      },
-      children: [
-        /* @__PURE__ */ e.jsx("span", { className: "flex items-center shrink-0", children: /* @__PURE__ */ e.jsx(n, { name: "DotsSixVertical", className: "text-muted-foreground" }) }),
-        /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-foreground flex-1 flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ e.jsx("span", { children: r.label }),
-          r.description && /* @__PURE__ */ e.jsx("span", { className: "text-xs text-muted-foreground font-normal", children: r.description })
-        ] }),
-        r.actions,
-        s && /* @__PURE__ */ e.jsx(
-          l,
-          {
-            variant: "ghost",
-            size: "icon",
-            onClick: (t) => {
-              t.stopPropagation(), s(r);
-            },
-            children: /* @__PURE__ */ e.jsx(n, { name: i, className: "text-muted-foreground" })
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  N as TransferListItem,
-  h as TransferListItemView
-};