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

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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,13 @@
+/**
+ * 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

@@ -0,0 +1,14 @@
+/**
+ * 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

@@ -0,0 +1,20 @@
+/**
+ * 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

@@ -0,0 +1,21 @@
+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
+};