@yuno-payments/dashboard-design-system 0.0.96 → 0.0.98

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

@@ -3,7 +3,7 @@ import { ComponentProps, ChangeEvent } from 'react';
 /**
  * Props for the Switch component
  */
-export interface SwitchProps extends Omit<ComponentProps<typeof ShadcnSwitch>, "children" | "onCheckedChange"> {
+export interface SwitchProps extends Omit<ComponentProps<typeof ShadcnSwitch>, "children" | "onCheckedChange" | "className" | "onChange"> {
     /**
      * Label text displayed next to the switch
      */
@@ -29,6 +29,14 @@ export interface SwitchProps extends Omit<ComponentProps<typeof ShadcnSwitch>, "
      * Provides a synthetic ChangeEvent compatible with react-hook-form
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional CSS classes to apply to the wrapper container
+     */
+    className?: string;
+    /**
+     * Additional CSS classes to apply to the switch element itself
+     */
+    switchClassName?: string;
 }
 /**
  * Toggle switch component with label and optional description.

package/dist/components/atoms/switch/switch.js

@@ -1,20 +1,22 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { Switch as u } from "../../../vendor/shadcn/switch.js";
-import { forwardRef as g, useId as w } from "react";
-import { cn as b } from "../../../lib/utils.js";
-import { Label as j } from "../../../vendor/shadcn/label.js";
-const v = g(
+import { Switch as b } from "../../../vendor/shadcn/switch.js";
+import { forwardRef as j, useId as v } from "react";
+import { cn as n } from "../../../lib/utils.js";
+import { Label as y } from "../../../vendor/shadcn/label.js";
+const N = j(
   ({
-    label: n,
+    label: i,
     description: o,
-    side: i = "left",
-    variant: l = "default",
-    id: c,
+    side: l = "left",
+    variant: c = "default",
+    id: x,
     name: t,
     onChange: a,
-    ...x
-  }, f) => {
-    const m = w(), r = c || t || m, p = (s) => {
+    className: f,
+    switchClassName: m,
+    ...p
+  }, d) => {
+    const h = v(), r = x || t || h, u = (s) => {
       if (!a) return;
       a({
         target: {
@@ -34,29 +36,29 @@ const v = g(
         stopPropagation: () => {
         }
       });
-    }, d = /* @__PURE__ */ e.jsx(
-      u,
+    }, g = /* @__PURE__ */ e.jsx(
+      b,
       {
-        ref: f,
+        ref: d,
         id: r,
         name: t,
-        className: "cursor-pointer",
-        onCheckedChange: p,
-        ...x
+        className: n("cursor-pointer", m),
+        onCheckedChange: u,
+        ...p
       }
-    ), h = b("flex gap-3 items-start", {
-      "flex-row-reverse": i === "right",
-      "bg-white box-border justify-start p-4 rounded-lg border shadow-xs": l === "box"
-    });
-    return /* @__PURE__ */ e.jsxs("div", { className: h, children: [
-      d,
+    ), w = n("flex gap-3 items-start", {
+      "flex-row-reverse": l === "right",
+      "bg-white box-border justify-start p-4 rounded-lg border shadow-xs": c === "box"
+    }, f);
+    return /* @__PURE__ */ e.jsxs("div", { className: w, children: [
+      g,
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
         /* @__PURE__ */ e.jsx(
-          j,
+          y,
           {
             htmlFor: r,
             className: "text-sm leading-[18.39px] cursor-pointer",
-            children: n
+            children: i
           }
         ),
         o && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-neutral-500", children: o })
@@ -64,7 +66,7 @@ const v = g(
     ] });
   }
 );
-v.displayName = "Switch";
+N.displayName = "Switch";
 export {
-  v as Switch
+  N as Switch
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.96",
+  "version": "0.0.98",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",