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

package/dist/components/atoms/label/label.js

@@ -1,28 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { cn as o } from "../../../lib/utils.js";
-import { Label as a } from "../../../vendor/shadcn/label.js";
-import "react";
-import { Icon as i } from "../icon/icon.js";
-const l = ({ htmlFor: r, className: t, info: s, ...m }) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ e.jsx(
-    a,
-    {
-      htmlFor: r,
-      className: o("text-sm leading-[18.39px] cursor-pointer", t),
-      ...m
-    }
-  ),
-  s && /* @__PURE__ */ e.jsx(
-    i,
-    {
-      name: "Info",
-      size: "sm",
-      className: "text-muted-foreground",
-      tooltip: s
-    }
-  )
-] });
-l.displayName = "Label";
-export {
-  l as Label
-};

package/dist/components/atoms/loading/index.d.ts

@@ -1 +0,0 @@
-export { Loading, type LoadingProps } from './loading';

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

@@ -1,39 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { IconWeight as PhosphorIconWeight } from '@phosphor-icons/react';
-declare const loadingVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Props for the Loading component
- */
-interface LoadingProps extends VariantProps<typeof loadingVariants> {
-    /**
-     * Icon weight/style
-     * @default "light"
-     */
-    weight?: PhosphorIconWeight;
-    /**
-     * Custom color for the loading icon
-     */
-    color?: string;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /**
-     * Whether the loading icon should be mirrored
-     */
-    mirrored?: boolean;
-}
-/**
- * Loading component that displays an animated spinning icon.
- *
- * @example
- * ```tsx
- * <Loading size="md" />
- * <Loading size="lg" color="#3b82f6" />
- * <Loading weight="bold" className="text-primary" />
- * ```
- */
-declare const Loading: import('react').ForwardRefExoticComponent<LoadingProps & import('react').RefAttributes<SVGSVGElement>>;
-export { Loading, type LoadingProps };

package/dist/components/atoms/loading/loading.js

@@ -1,37 +0,0 @@
-import { j as n } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as e } from "react";
-import { cva as d } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { cn as f } from "../../../lib/utils.js";
-import { Icon as l } from "../icon/icon.js";
-const p = d("animate-spin", {
-  variants: {
-    size: {
-      xs: "",
-      sm: "",
-      md: "",
-      lg: "",
-      xl: ""
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), c = e(
-  ({ size: a = "md", weight: o = "light", color: r, className: m, mirrored: i = !1, ...t }, s) => /* @__PURE__ */ n.jsx(
-    l,
-    {
-      ref: s,
-      name: "CircleNotch",
-      size: a,
-      weight: o,
-      color: r,
-      mirrored: i,
-      className: f(p({ size: a }), m),
-      ...t
-    }
-  )
-);
-c.displayName = "Loading";
-export {
-  c as Loading
-};

package/dist/components/atoms/select/search-select.d.ts

@@ -1,22 +0,0 @@
-import { SelectOption, SelectOptionGroup } from './select';
-import * as React from "react";
-export interface SearchSelectProps {
-    label?: string;
-    description?: string;
-    error?: string;
-    optional?: boolean;
-    placeholder?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    disabled?: boolean;
-    options?: SelectOption[];
-    groups?: SelectOptionGroup[];
-    className?: string;
-    id?: string;
-    searchPlaceholder?: string;
-    maxHeight?: number;
-}
-declare const SearchSelect: React.ForwardRefExoticComponent<SearchSelectProps & React.RefAttributes<HTMLButtonElement>>;
-export { SearchSelect };
-export type { SearchSelectProps };

package/dist/components/atoms/select/search-select.js

@@ -1,201 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as n from "react";
-import { cn as a } from "../../../lib/utils.js";
-import { FieldLabel as A } from "../../../vendor/shadcn/field.js";
-import { Icon as b } from "../icon/icon.js";
-import { Combobox as B, ComboboxTrigger as H, ComboboxContent as J } from "../../../vendor/shadcn/combobox.js";
-import { Command as K, CommandInput as M, CommandList as P, CommandEmpty as Q, CommandGroup as U, CommandItem as k } from "../../../vendor/shadcn/command.js";
-import { Typography as x } from "../typography/typography.js";
-const W = n.forwardRef(
-  ({
-    label: j,
-    description: N,
-    error: u,
-    optional: G = !1,
-    placeholder: L = "Select an option",
-    value: r,
-    defaultValue: p,
-    onChange: h,
-    disabled: f = !1,
-    options: c = [],
-    groups: o = [],
-    className: E,
-    id: g,
-    searchPlaceholder: z = "Search...",
-    maxHeight: F = 300
-  }, I) => {
-    const [i, C] = n.useState(!1), [v, S] = n.useState(""), d = o.length > 0, w = c.length > 0, R = n.useCallback(() => {
-      if (!r) return null;
-      if (d)
-        for (const s of o) {
-          const l = s.options.find((t) => t.value === r);
-          if (l) return l.label;
-        }
-      else if (w) {
-        const s = c.find((l) => l.value === r);
-        if (s) return s.label;
-      }
-      return null;
-    }, [r, o, c, d, w]), T = n.useCallback(
-      (s) => {
-        if (!s)
-          return { filteredOptions: c, filteredGroups: o };
-        const l = s.toLowerCase();
-        if (d) {
-          const t = o.map((m) => ({
-            ...m,
-            options: m.options.filter(
-              (V) => V.label.toLowerCase().includes(l)
-            )
-          })).filter((m) => m.options.length > 0);
-          return { filteredOptions: [], filteredGroups: t };
-        } else
-          return { filteredOptions: c.filter(
-            (m) => m.label.toLowerCase().includes(l)
-          ), filteredGroups: [] };
-      },
-      [c, o, d]
-    ), { filteredOptions: q, filteredGroups: D } = T(v);
-    n.useEffect(() => {
-      i && setTimeout(() => {
-        document.querySelector(
-          '[data-slot="command-input"]'
-        )?.focus();
-      }, 0);
-    }, [i]), n.useEffect(() => {
-      i || S("");
-    }, [i]), n.useEffect(() => {
-      p && !r && h?.(p);
-    }, [p, r, h]);
-    const y = (s) => {
-      f || (h?.(s), C(!1));
-    }, O = R();
-    return /* @__PURE__ */ e.jsxs("div", { className: a("w-full", E), children: [
-      j && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
-        /* @__PURE__ */ e.jsx(A, { htmlFor: g, className: a(f && "text-muted-foreground"), children: j }),
-        G && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
-      ] }),
-      N && !u && /* @__PURE__ */ e.jsx(
-        x,
-        {
-          variant: "sm",
-          className: a(
-            "text-muted-foreground mb-2",
-            f && "text-muted-"
-          ),
-          children: N
-        }
-      ),
-      /* @__PURE__ */ e.jsxs(B, { open: i, onOpenChange: C, children: [
-        /* @__PURE__ */ e.jsx(H, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            ref: I,
-            id: g,
-            type: "button",
-            disabled: f,
-            role: "combobox",
-            "aria-expanded": i,
-            "aria-haspopup": "listbox",
-            className: a(
-              "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm 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:text-muted- shadow-xs [&>span]:min-w-0 [&>span]:truncate",
-              u && "border-destructive"
-            ),
-            children: [
-              /* @__PURE__ */ e.jsx(
-                "span",
-                {
-                  className: a(
-                    "truncate",
-                    !O && "text-muted-foreground"
-                  ),
-                  children: O || L
-                }
-              ),
-              /* @__PURE__ */ e.jsx(
-                b,
-                {
-                  name: "CaretDown",
-                  size: "sm",
-                  className: "text-muted- shrink-0"
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(J, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(K, { shouldFilter: !1, children: [
-          /* @__PURE__ */ e.jsx(
-            M,
-            {
-              placeholder: z,
-              value: v,
-              onValueChange: S
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(P, { style: { maxHeight: F }, children: [
-            /* @__PURE__ */ e.jsx(Q, { children: /* @__PURE__ */ e.jsx(
-              x,
-              {
-                variant: "sm",
-                className: "text-muted-foreground py-6 text-center",
-                children: "No results found."
-              }
-            ) }),
-            d ? D.map((s, l) => /* @__PURE__ */ e.jsxs(U, { children: [
-              s.label && /* @__PURE__ */ e.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: s.label }),
-              s.options.map((t) => /* @__PURE__ */ e.jsxs(
-                k,
-                {
-                  value: t.value,
-                  onSelect: () => y(t.value),
-                  className: a(
-                    "cursor-pointer",
-                    r === t.value && "bg-accent"
-                  ),
-                  children: [
-                    /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                      t.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: t.icon }),
-                      t.label
-                    ] }),
-                    r === t.value && /* @__PURE__ */ e.jsx(
-                      b,
-                      {
-                        name: "Check",
-                        size: "sm",
-                        className: "ml-auto"
-                      }
-                    )
-                  ]
-                },
-                t.value
-              ))
-            ] }, l)) : q.map((s) => /* @__PURE__ */ e.jsxs(
-              k,
-              {
-                value: s.value,
-                onSelect: () => y(s.value),
-                className: a(
-                  "cursor-pointer",
-                  r === s.value && "bg-accent"
-                ),
-                children: [
-                  /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                    s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
-                    s.label
-                  ] }),
-                  r === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
-                ]
-              },
-              s.value
-            ))
-          ] })
-        ] }) })
-      ] }),
-      u && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
-    ] });
-  }
-);
-W.displayName = "SearchSelect";
-export {
-  W as SearchSelect
-};

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

@@ -1,2 +0,0 @@
-export { Tutorial } from './tutorial';
-export type { TutorialProps, TutorialButtonProps } from './tutorial.types';

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

@@ -1,16 +0,0 @@
-import { TutorialProps } from './tutorial.types';
-/**
- * Tutorial component that renders a customizable tooltip for guided tours.
- * Designed to be used with react-joyride as a custom tooltip component.
- *
- * @example
- * ```tsx
- * <ReactJoyride
- *   tooltipComponent={(props) => (
- *     <Tutorial {...props} buttonGroup={buttons} width={400} />
- *   )}
- * />
- * ```
- */
-declare const Tutorial: import('react').ForwardRefExoticComponent<TutorialProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Tutorial };

package/dist/components/organisms/tutorial/tutorial.js

@@ -1,114 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as C } from "react";
-import { cn as j } from "../../../lib/utils.js";
-import { Button as c } from "../../atoms/button/button.js";
-import { Icon as y } from "../../atoms/icon/icon.js";
-import { Typography as x } from "../../atoms/typography/typography.js";
-import { Link as b } from "../../atoms/link/link.js";
-import { Badge as w } from "../../atoms/badge/badge.js";
-const B = C(
-  ({
-    continuous: o,
-    step: a,
-    closeProps: l,
-    primaryProps: n,
-    tooltipProps: g,
-    withTag: v = !1,
-    tagLabel: f,
-    buttonGroup: r = [],
-    width: i,
-    skipProps: t,
-    index: h,
-    size: d,
-    ...z
-  }, N) => {
-    const u = (s) => {
-      l?.onClick?.(s);
-    }, k = (s, m) => {
-      m(), u(s);
-    };
-    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsx("style", { children: `
-          .react-joyride__spotlight {
-            border-radius: 8px !important;
-          }
-        ` }),
-      /* @__PURE__ */ e.jsxs(
-        "div",
-        {
-          ref: N,
-          ...g,
-          className: j(
-            "bg-background rounded border shadow-lg p-4",
-            "max-w-[368px]",
-            i && `max-w-[${i}px]`
-          ),
-          style: i ? { maxWidth: `${i}px` } : void 0,
-          children: [
-            /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-4 mb-3", children: [
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1", children: a.title && /* @__PURE__ */ e.jsx(x, { variant: "h4", className: "text-base font-semibold", children: a.title }) }),
-              !a.hideCloseButton && /* @__PURE__ */ e.jsx(
-                c,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  className: "h-8 w-8 shrink-0",
-                  onClick: l?.onClick,
-                  children: /* @__PURE__ */ e.jsx(y, { name: "X", size: "sm" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e.jsx("div", { className: "mb-5", children: /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground font-normal", children: a.content }) }),
-            /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-              t && h !== (d ?? 0) - 1 && /* @__PURE__ */ e.jsx("div", { className: "flex-1", children: /* @__PURE__ */ e.jsx(
-                b,
-                {
-                  ...t,
-                  onClick: l?.onClick,
-                  underline: !1,
-                  className: "text-xs",
-                  children: t.title
-                }
-              ) }),
-              (d ?? 0) > 1 && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsxs(x, { variant: "xs", className: "text-muted-foreground mr-6", children: [
-                "Step ",
-                (h ?? 0) + 1,
-                " of ",
-                d
-              ] }) }),
-              o && n && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(c, { size: "default", ...n, children: n.title }) })
-            ] }),
-            !o && r.length > 0 && /* @__PURE__ */ e.jsxs(
-              "div",
-              {
-                className: j(
-                  "flex items-center mt-6 gap-3",
-                  r.length > 1 ? "justify-between" : "justify-end"
-                ),
-                children: [
-                  v && f && /* @__PURE__ */ e.jsx(w, { variant: "default", className: "bg-green-100 text-green-800", children: f }),
-                  r.map((s, m) => /* @__PURE__ */ e.jsx(
-                    c,
-                    {
-                      variant: s.variant || "default",
-                      size: s.size || "default",
-                      loading: s.loading,
-                      disabled: s.disabled,
-                      onClick: (p) => k(p, s.event),
-                      children: s.label
-                    },
-                    m
-                  ))
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-);
-B.displayName = "Tutorial";
-export {
-  B as Tutorial
-};

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

@@ -1,15 +0,0 @@
-import { TooltipRenderProps } from 'react-joyride';
-export interface TutorialButtonProps {
-    label: string;
-    event: () => void;
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-    size?: "default" | "sm" | "lg" | "icon";
-    loading?: boolean;
-    disabled?: boolean;
-}
-export interface TutorialProps extends TooltipRenderProps {
-    withTag?: boolean;
-    tagLabel?: string;
-    buttonGroup?: TutorialButtonProps[];
-    width?: number;
-}

package/dist/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export { useBodyScrollLock } from './use-body-scroll-lock';
-export { useEscapeKey } from './use-escape-key';
-export { useMediaQuery } from './use-media-query';

package/dist/hooks/use-body-scroll-lock.d.ts

@@ -1,13 +0,0 @@
-/**
- * Custom hook to lock/unlock body scroll when a modal or overlay is open
- * This prevents the background from scrolling while a modal is active
- *
- * @param isLocked - Whether the body scroll should be locked
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(false)
- * useBodyScrollLock(isOpen)
- * ```
- */
-export declare function useBodyScrollLock(isLocked: boolean): void;

package/dist/hooks/use-escape-key.d.ts

@@ -1,14 +0,0 @@
-/**
- * Custom hook to handle Escape key press
- * Commonly used for closing modals, dialogs, sheets, etc.
- *
- * @param isActive - Whether the Escape key handler should be active
- * @param onEscape - Callback function to execute when Escape is pressed
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(false)
- * useEscapeKey(isOpen, () => setIsOpen(false))
- * ```
- */
-export declare function useEscapeKey(isActive: boolean, onEscape: () => void): void;

package/dist/hooks/use-media-query.d.ts

@@ -1,20 +0,0 @@
-/**
- * Custom hook to track media query matches
- * Returns true if the media query matches, false otherwise
- *
- * This hook uses the native window.matchMedia API and updates reactively
- * when the media query match state changes
- *
- * @param query - Media query string (e.g., '(max-width: 768px)')
- * @param defaultValue - Optional default value for SSR (defaults to false)
- *
- * @returns boolean indicating whether the media query matches
- *
- * @example
- * ```tsx
- * const isMobile = useMediaQuery('(max-width: 599px)')
- * const isTablet = useMediaQuery('(max-width: 1023px)')
- * const isDesktop = useMediaQuery('(min-width: 1024px)')
- * ```
- */
-export declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;

package/dist/hooks/use-media-query.js

@@ -1,21 +0,0 @@
-import { useState as s, useEffect as o } from "react";
-function f(n, a = !1) {
-  const [i, r] = s(() => typeof window > "u" ? a : window.matchMedia(n).matches);
-  return o(() => {
-    if (typeof window > "u")
-      return;
-    const e = window.matchMedia(n);
-    r(e.matches);
-    const t = (d) => {
-      r(d.matches);
-    };
-    return e.addEventListener ? (e.addEventListener("change", t), () => {
-      e.removeEventListener("change", t);
-    }) : (e.addListener(t), () => {
-      e.removeListener(t);
-    });
-  }, [n]), i;
-}
-export {
-  f as useMediaQuery
-};

package/dist/lib/notification-alert.d.ts

@@ -1,42 +0,0 @@
-export type NotificationMode = "success" | "error" | "warning" | "info";
-export interface NotificationAlertOptions {
-    mode: NotificationMode;
-    title?: string;
-    message: string;
-    primaryActionLabel?: string;
-    onAction?: () => void;
-    timeToLive?: number;
-    withCloseButton?: boolean;
-    withProgress?: boolean;
-}
-/**
- * Shows a notification alert toast with NotificationAlert structure.
- * IMPORTANT: Requires <Toaster /> component to be mounted in your app.
- *
- * @example
- * ```tsx
- * // In your root component:
- * import { Toaster } from '@yuno-payments/dashboard-design-system';
- * <Toaster position="top-right" />
- *
- * // Anywhere in your app:
- * import { showNotificationAlert } from '@yuno-payments/dashboard-design-system';
- *
- * // Simple message
- * showNotificationAlert({
- *   mode: 'success',
- *   message: 'Operation completed successfully',
- * });
- *
- * // With title and action
- * showNotificationAlert({
- *   mode: 'error',
- *   title: 'Error saving',
- *   message: 'Could not save changes. Please try again.',
- *   primaryActionLabel: 'Retry',
- *   onAction: () => retryOperation(),
- *   timeToLive: 8000,
- * });
- * ```
- */
-export declare const showNotificationAlert: ({ mode, title, message, primaryActionLabel, onAction, timeToLive, withCloseButton, withProgress, }: NotificationAlertOptions) => string | number;