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

package/dist/components/molecules/multi-values-field/multi-values-field.types.d.ts

@@ -1,101 +0,0 @@
-/**
- * Keyboard keys that trigger adding a value
- */
-export type TriggerKey = "Enter" | "Tab" | "Comma" | "Space";
-/**
- * Props for the MultiValuesField component
- */
-export interface MultiValuesFieldProps {
-    /**
-     * Current array of values
-     */
-    value: string[];
-    /**
-     * Callback fired when the values array changes
-     */
-    onChange: (values: string[]) => void;
-    /**
-     * Label text displayed above the input
-     */
-    label?: string;
-    /**
-     * Helper text displayed below the input
-     */
-    description?: string;
-    /**
-     * Error message displayed below the input
-     */
-    error?: string;
-    /**
-     * Placeholder text for the input
-     * @default "Type and press Enter..."
-     */
-    placeholder?: string;
-    /**
-     * Whether the field is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * HTML id attribute
-     */
-    id?: string;
-    /**
-     * HTML name attribute
-     */
-    name?: string;
-    /**
-     * Keys that trigger adding a new value
-     * @default ["Enter", "Tab", "Comma"]
-     */
-    triggerKeys?: TriggerKey[];
-    /**
-     * Whether to add value when input loses focus
-     * @default true
-     */
-    addOnBlur?: boolean;
-    /**
-     * Whether to allow duplicate values
-     * @default false
-     */
-    allowDuplicates?: boolean;
-    /**
-     * Maximum number of values allowed
-     */
-    maxItems?: number;
-    /**
-     * Validation function that returns true or an error message
-     */
-    validate?: (value: string) => boolean | string;
-    /**
-     * Visual variant for the value badges
-     * @default "outline"
-     */
-    badgeVariant?: "default" | "secondary" | "destructive" | "outline";
-    /**
-     * Layout orientation
-     * @default "vertical"
-     */
-    orientation?: "vertical" | "horizontal";
-    /**
-     * Additional CSS classes
-     */
-    className?: 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;
-    };
-}

package/dist/components/molecules/nav-link/index.d.ts

@@ -1,2 +0,0 @@
-export { NavLink } from './nav-link';
-export type { NavLinkProps } from './nav-link';

package/dist/components/molecules/nav-link/nav-link.d.ts

@@ -1,40 +0,0 @@
-import * as React from 'react';
-export interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * The text content of the navigation link
-     */
-    children: React.ReactNode;
-    /**
-     * Whether this navigation link is currently active/selected
-     * @default false
-     */
-    current?: boolean;
-    /**
-     * Optional badge to show a count or indicator
-     */
-    badge?: string | number;
-    /**
-     * Whether the link is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Callback fired when the link is clicked
-     */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-}
-/**
- * NavLink component for tab-style navigation.
- *
- * Based on Figma design: Pro Blocks / Tab Nav Links
- * Node ID: 11002-9502
- *
- * @example
- * ```tsx
- * <NavLink current>Profile</NavLink>
- * <NavLink badge="3">Notifications</NavLink>
- * <NavLink disabled>Settings</NavLink>
- * ```
- */
-declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export { NavLink };

package/dist/components/molecules/nav-link/nav-link.js

@@ -1,58 +0,0 @@
-import { j as o } from "../../../_virtual/jsx-runtime.js";
-import * as l from "react";
-import { cn as n } from "../../../lib/utils.js";
-import { Badge as x } from "../../atoms/badge/badge.js";
-const d = l.forwardRef(
-  ({ children: s, current: r = !1, badge: t, disabled: e = !1, className: i, onClick: m, ...p }, f) => {
-    const c = (a) => {
-      if (e) {
-        a.preventDefault();
-        return;
-      }
-      m?.(a);
-    };
-    return /* @__PURE__ */ o.jsx(
-      "a",
-      {
-        ref: f,
-        className: n(
-          // Base styles - wrapper
-          "box-border flex items-center justify-center gap-2 px-0 py-1.5 h-12",
-          // Border styles
-          r && "border-b-2 border-primary",
-          !r && "border-b-2 border-transparent",
-          // Disabled state
-          e && "pointer-events-none cursor-not-allowed",
-          i
-        ),
-        onClick: c,
-        "aria-current": r ? "page" : void 0,
-        "aria-disabled": e,
-        ...p,
-        children: /* @__PURE__ */ o.jsxs(
-          "div",
-          {
-            className: n(
-              // Text wrapper base styles
-              "flex items-center justify-center gap-2 px-2.5 py-2 rounded-md",
-              // Text color states
-              !e && !r && "text-muted-foreground",
-              !e && r && "text-foreground",
-              e && "text-muted-foreground opacity-50",
-              // Hover state (only when not disabled and not current)
-              !e && !r && "hover:bg-accent hover:text-accent-foreground"
-            ),
-            children: [
-              /* @__PURE__ */ o.jsx("span", { className: "text-sm font-normal leading-5 whitespace-nowrap", children: s }),
-              t && /* @__PURE__ */ o.jsx(x, { variant: "default", className: "min-w-5 h-5 px-1 rounded-full", children: t })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-d.displayName = "NavLink";
-export {
-  d as NavLink
-};

package/dist/components/molecules/nav-tabs/index.d.ts

@@ -1 +0,0 @@
-export { NavTabs, type NavTab, type NavTabsProps } from './nav-tabs';

package/dist/components/molecules/nav-tabs/nav-tabs.d.ts

@@ -1,77 +0,0 @@
-import * as React from "react";
-export interface NavTab {
-    /**
-     * The label/text content of the tab
-     */
-    label: React.ReactNode;
-    /**
-     * The content to display when this tab is active
-     */
-    content: React.ReactNode;
-    /**
-     * Optional badge to show a count or indicator
-     */
-    badge?: string | number;
-    /**
-     * Whether the tab is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Optional ID for the tab
-     */
-    id?: string;
-    /**
-     * Stable analytics name applied to the tab as `data-action-name`.
-     * Used by Datadog RUM to produce locale-stable action events instead
-     * of deriving the name from the rendered (translated) label.
-     */
-    actionName?: string;
-}
-export interface NavTabsProps {
-    /**
-     * Array of tab configurations
-     */
-    tabs: NavTab[];
-    /**
-     * Index of the default active tab
-     * @default 0
-     */
-    defaultTab?: number;
-    /**
-     * Callback fired when tab changes
-     */
-    onChange?: (index: number, tab: NavTab) => void;
-    /**
-     * Additional CSS classes for the navigation container
-     */
-    className?: string;
-    /**
-     * Additional CSS classes for the content container
-     */
-    contentClassName?: string;
-    /**
-     * Additional CSS classes for the navigation container
-     */
-    navTabsClassName?: string;
-}
-/**
- * NavTabs component for tab-style navigation with content panels.
- *
- * Provides a navigation interface using NavLink components with associated
- * content panels that display based on the active tab.
- *
- * @example
- * ```tsx
- * <NavTabs
- *   tabs={[
- *     { label: 'Profile', content: <ProfileContent /> },
- *     { label: 'Settings', content: <SettingsContent />, badge: '3' },
- *     { label: 'Disabled', content: <div />, disabled: true },
- *   ]}
- *   defaultTab={0}
- *   onChange={(index) => console.log('Tab changed:', index)}
- * />
- * ```
- */
-export declare const NavTabs: React.ForwardRefExoticComponent<NavTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/nav-tabs/nav-tabs.js

@@ -1,61 +0,0 @@
-import { j as s } from "../../../_virtual/jsx-runtime.js";
-import * as c from "react";
-import { cn as l } from "../../../lib/utils.js";
-import { NavLink as N } from "../nav-link/nav-link.js";
-const j = c.forwardRef(
-  ({
-    tabs: i,
-    defaultTab: d = 0,
-    onChange: o,
-    className: m,
-    contentClassName: b,
-    navTabsClassName: p
-  }, f) => {
-    const [n, u] = c.useState(d), v = (a, e) => {
-      e.disabled || (u(a), o?.(a, e));
-    };
-    return /* @__PURE__ */ s.jsxs("div", { ref: f, className: l("flex flex-col", m), children: [
-      /* @__PURE__ */ s.jsx("nav", { className: l("flex gap-0", p), role: "tablist", children: i.map((a, e) => {
-        const r = a.id || `tab-${e}`, t = n === e;
-        return /* @__PURE__ */ s.jsx(
-          N,
-          {
-            current: t,
-            badge: a.badge,
-            disabled: a.disabled,
-            onClick: (h) => {
-              h.preventDefault(), v(e, a);
-            },
-            role: "tab",
-            "aria-selected": t,
-            "aria-controls": `tabpanel-${r}`,
-            id: `tab-${r}`,
-            href: "#",
-            "data-action-name": a.actionName,
-            children: a.label
-          },
-          r
-        );
-      }) }),
-      /* @__PURE__ */ s.jsx("div", { className: l("mt-6", b), children: i.map((a, e) => {
-        const r = a.id || `tab-${e}`, t = n === e;
-        return /* @__PURE__ */ s.jsx(
-          "div",
-          {
-            role: "tabpanel",
-            id: `tabpanel-${r}`,
-            "aria-labelledby": `tab-${r}`,
-            hidden: !t,
-            className: l(!t && "hidden"),
-            children: t && a.content
-          },
-          r
-        );
-      }) })
-    ] });
-  }
-);
-j.displayName = "NavTabs";
-export {
-  j as NavTabs
-};

package/dist/components/molecules/otp-field/index.d.ts

@@ -1 +0,0 @@
-export { OTPField, type OTPFieldProps } from './otp-field';

package/dist/components/molecules/otp-field/otp-field.d.ts

@@ -1,44 +0,0 @@
-import { ComponentProps } from 'react';
-import { InputOTP } from '../../../vendor/shadcn/input-otp';
-import * as React from "react";
-/**
- * Props for the OTPField component
- */
-export interface OTPFieldProps extends Omit<ComponentProps<typeof InputOTP>, "maxLength" | "render"> {
-    /**
-     * Number of OTP input slots
-     * @default 6
-     */
-    maxLength?: number;
-    /**
-     * Label text displayed above the input
-     */
-    label?: string;
-    /**
-     * Error message displayed below the input
-     */
-    error?: string;
-    /**
-     * Additional CSS classes for the field wrapper
-     */
-    className?: string;
-    /**
-     * Additional CSS classes for the OTP input container
-     */
-    containerClassName?: string;
-}
-/**
- * One-Time Password input field with individual digit slots.
- *
- * @example
- * ```tsx
- * <OTPField
- *   label="Enter verification code"
- *   maxLength={6}
- *   value={otp}
- *   onChange={(value) => setOtp(value)}
- * />
- * ```
- */
-declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export { OTPField };

package/dist/components/molecules/otp-field/otp-field.js

@@ -1,53 +0,0 @@
-import { j as i } from "../../../_virtual/jsx-runtime.js";
-import * as u from "react";
-import { forwardRef as j, useId as x } from "react";
-import { InputOTP as h, InputOTPGroup as v, InputOTPSlot as F } from "../../../vendor/shadcn/input-otp.js";
-import { Field as I, FieldLabel as O, FieldError as P } from "../../../vendor/shadcn/field.js";
-import { cn as n } from "../../../lib/utils.js";
-const T = j(
-  ({
-    maxLength: o = 6,
-    className: s,
-    containerClassName: l,
-    label: a,
-    error: r,
-    id: m,
-    ...c
-  }, p) => {
-    const f = x(), t = m || f, e = !!r;
-    return /* @__PURE__ */ i.jsxs(
-      I,
-      {
-        orientation: "vertical",
-        "data-invalid": e,
-        className: n(s),
-        children: [
-          a && /* @__PURE__ */ i.jsx(O, { htmlFor: t, children: a }),
-          /* @__PURE__ */ i.jsx(
-            h,
-            {
-              ref: p,
-              maxLength: o,
-              containerClassName: n(l),
-              "aria-invalid": e ? !0 : void 0,
-              "aria-describedby": r ? `${t}-description` : void 0,
-              ...c,
-              children: Array.from({ length: o }).map((N, d) => /* @__PURE__ */ i.jsx(u.Fragment, { children: /* @__PURE__ */ i.jsx(v, { children: /* @__PURE__ */ i.jsx(
-                F,
-                {
-                  index: d,
-                  "aria-invalid": e ? !0 : void 0
-                }
-              ) }) }, d))
-            }
-          ),
-          r && /* @__PURE__ */ i.jsx(P, { id: `${t}-description`, className: "text-left", children: r })
-        ]
-      }
-    );
-  }
-);
-T.displayName = "OTPField";
-export {
-  T as OTPField
-};

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

@@ -1,3 +0,0 @@
-export { Pagination, type PaginationProps } from './pagination';
-export { getPaginationTranslations, type PaginationLanguage, type PaginationTranslations, } from './pagination-translations';
-export { Pagination as PaginationRoot, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from '../../../vendor/shadcn/pagination';

package/dist/components/molecules/pagination/page-numbers.d.ts

@@ -1,10 +0,0 @@
-interface PageNumbersProps {
-    currentPage: number;
-    totalPages?: number;
-    maxVisiblePages: number;
-    onPageClick?: (page: number) => void;
-    /** Screen reader label for ellipsis (default: "More pages") */
-    morePagesLabel?: string;
-}
-declare const PageNumbers: ({ currentPage, totalPages, maxVisiblePages, onPageClick, morePagesLabel, }: PageNumbersProps) => import("react/jsx-runtime").JSX.Element;
-export { PageNumbers, type PageNumbersProps };

package/dist/components/molecules/pagination/page-numbers.js

@@ -1,30 +0,0 @@
-import { j as i } from "../../../_virtual/jsx-runtime.js";
-import { PaginationItem as e, PaginationLink as t, PaginationEllipsis as h } from "../../../vendor/shadcn/pagination.js";
-import { calculateVisiblePages as d } from "./page-numbers.utils.js";
-const b = ({
-  currentPage: n,
-  totalPages: l,
-  maxVisiblePages: o,
-  onPageClick: c,
-  morePagesLabel: m
-}) => {
-  if (!l)
-    return /* @__PURE__ */ i.jsx(e, { children: /* @__PURE__ */ i.jsx(t, { isActive: !0, children: n }) });
-  const x = (s, r) => {
-    s.preventDefault(), r !== n && c?.(r);
-  }, j = d(n, l, o);
-  return /* @__PURE__ */ i.jsx(i.Fragment, { children: j.map(
-    (s, r) => s === "ellipsis" ? /* @__PURE__ */ i.jsx(e, { children: /* @__PURE__ */ i.jsx(h, { srLabel: m }) }, `ellipsis-${r}`) : /* @__PURE__ */ i.jsx(e, { children: /* @__PURE__ */ i.jsx(
-      t,
-      {
-        href: "#",
-        onClick: (a) => x(a, s),
-        isActive: s === n,
-        children: s
-      }
-    ) }, s)
-  ) });
-};
-export {
-  b as PageNumbers
-};

package/dist/components/molecules/pagination/page-numbers.utils.d.ts

@@ -1,3 +0,0 @@
-type PageElement = number | "ellipsis";
-export declare const calculateVisiblePages: (currentPage: number, totalPages: number, maxVisiblePages: number) => PageElement[];
-export {};

package/dist/components/molecules/pagination/page-numbers.utils.js

@@ -1,15 +0,0 @@
-const c = (n, i, f) => {
-  if (i <= f)
-    return Array.from({ length: i }, (h, r) => r + 1);
-  const t = Math.max(n - 1, 1), m = Math.min(n + 1, i), l = t > 2, s = m < i - 1;
-  return !l && s ? [...Array.from(
-    { length: Math.min(3, i) },
-    (r, e) => e + 1
-  ), "ellipsis", i] : l && !s ? [1, "ellipsis", ...Array.from(
-    { length: 3 },
-    (r, e) => Math.max(i - 2, 1) + e
-  ).filter((r) => r <= i)] : l && s ? [1, "ellipsis", n, "ellipsis", i] : Array.from({ length: i }, (h, r) => r + 1);
-};
-export {
-  c as calculateVisiblePages
-};

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

@@ -1,33 +0,0 @@
-import { SupportedLanguage } from '../../../lib/utils';
-/**
- * Supported languages for pagination translations
- */
-export type PaginationLanguage = SupportedLanguage;
-/**
- * Translation strings for Pagination component
- */
-export interface PaginationTranslations {
-    /** Text for "Previous" button */
-    previous?: string;
-    /** Text for "Next" button */
-    next?: string;
-    /** Screen reader text for ellipsis ("More pages") */
-    morePages?: string;
-    /** Aria-label for Previous button */
-    goToPreviousPage?: string;
-    /** Aria-label for Next button */
-    goToNextPage?: string;
-}
-/**
- * All translations by language code
- */
-export declare const PAGINATION_TRANSLATIONS: Record<PaginationLanguage, Required<PaginationTranslations>>;
-/**
- * Default translations (English)
- */
-export declare const DEFAULT_PAGINATION_TRANSLATIONS: Required<PaginationTranslations>;
-/**
- * Get translations for a specific language
- * Falls back to localStorage language, then to English if not found
- */
-export declare function getPaginationTranslations(lang?: PaginationLanguage): Required<PaginationTranslations>;

package/dist/components/molecules/pagination/pagination-translations.js

@@ -1,82 +0,0 @@
-import { getDefaultLanguage as g } from "../../../lib/utils.js";
-const e = {
-  previous: "Previous",
-  next: "Next",
-  morePages: "More pages",
-  goToPreviousPage: "Go to previous page",
-  goToNextPage: "Go to next page"
-}, r = {
-  previous: "Anterior",
-  next: "Siguiente",
-  morePages: "Más páginas",
-  goToPreviousPage: "Ir a página anterior",
-  goToNextPage: "Ir a página siguiente"
-}, t = {
-  previous: "前へ",
-  next: "次へ",
-  morePages: "その他のページ",
-  goToPreviousPage: "前のページへ",
-  goToNextPage: "次のページへ"
-}, s = {
-  previous: "السابق",
-  next: "التالي",
-  morePages: "صفحات أخرى",
-  goToPreviousPage: "انتقل إلى الصفحة السابقة",
-  goToNextPage: "انتقل إلى الصفحة التالية"
-}, i = {
-  previous: "Précédent",
-  next: "Suivant",
-  morePages: "Plus de pages",
-  goToPreviousPage: "Aller à la page précédente",
-  goToNextPage: "Aller à la page suivante"
-}, n = {
-  previous: "Anterior",
-  next: "Próximo",
-  morePages: "Mais páginas",
-  goToPreviousPage: "Ir para página anterior",
-  goToNextPage: "Ir para próxima página"
-}, T = {
-  previous: "Önceki",
-  next: "Sonraki",
-  morePages: "Daha fazla sayfa",
-  goToPreviousPage: "Önceki sayfaya git",
-  goToNextPage: "Sonraki sayfaya git"
-}, P = {
-  previous: "Назад",
-  next: "Вперёд",
-  morePages: "Ещё страницы",
-  goToPreviousPage: "Перейти на предыдущую страницу",
-  goToNextPage: "Перейти на следующую страницу"
-}, N = {
-  previous: "Zurück",
-  next: "Weiter",
-  morePages: "Weitere Seiten",
-  goToPreviousPage: "Zur vorherigen Seite",
-  goToNextPage: "Zur nächsten Seite"
-}, u = {
-  previous: "上一页",
-  next: "下一页",
-  morePages: "更多页面",
-  goToPreviousPage: "转到上一页",
-  goToNextPage: "转到下一页"
-}, A = {
-  en: e,
-  es: r,
-  ja: t,
-  ar: s,
-  fr: i,
-  pt: n,
-  tr: T,
-  ru: P,
-  de: N,
-  zh: u
-}, S = e;
-function v(o) {
-  const a = o ?? g();
-  return A[a] ?? S;
-}
-export {
-  S as DEFAULT_PAGINATION_TRANSLATIONS,
-  A as PAGINATION_TRANSLATIONS,
-  v as getPaginationTranslations
-};