@arolariu/components 0.4.2 → 1.0.0

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,16 @@
+"use client";
+import { useMediaQuery } from "./useMediaQuery.js";
+function useBreakpoint() {
+    const is2xl = useMediaQuery("(min-width: 1536px)");
+    const isXl = useMediaQuery("(min-width: 1280px)");
+    const isLg = useMediaQuery("(min-width: 1024px)");
+    const isMd = useMediaQuery("(min-width: 768px)");
+    if (is2xl) return "2xl";
+    if (isXl) return "xl";
+    if (isLg) return "lg";
+    if (isMd) return "md";
+    return "sm";
+}
+export { useBreakpoint };
+
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\nconst BREAKPOINTS = [\r\n  [\"2xl\", \"(min-width: 1536px)\"],\r\n  [\"xl\", \"(min-width: 1280px)\"],\r\n  [\"lg\", \"(min-width: 1024px)\"],\r\n  [\"md\", \"(min-width: 768px)\"],\r\n  [\"sm\", \"(min-width: 640px)\"],\r\n] as const;\r\n\r\ntype Breakpoint = (typeof BREAKPOINTS)[number][0];\r\n\r\n/**\r\n * Returns the name of the current CSS breakpoint based on viewport width.\r\n * Evaluates breakpoints from largest to smallest and returns the first match.\r\n *\r\n * @returns The active breakpoint name: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`, or `\"2xl\"`.\r\n *   Returns `\"sm\"` when no breakpoint matches (viewport narrower than 640px).\r\n *\r\n * @example\r\n * ```tsx\r\n * const bp = useBreakpoint(); // \"lg\" on a 1200px viewport\r\n * ```\r\n */\r\nexport function useBreakpoint(): Breakpoint {\r\n  const is2xl = useMediaQuery(\"(min-width: 1536px)\");\r\n  const isXl = useMediaQuery(\"(min-width: 1280px)\");\r\n  const isLg = useMediaQuery(\"(min-width: 1024px)\");\r\n  const isMd = useMediaQuery(\"(min-width: 768px)\");\r\n\r\n  if (is2xl) return \"2xl\";\r\n  if (isXl) return \"xl\";\r\n  if (isLg) return \"lg\";\r\n  if (isMd) return \"md\";\r\n\r\n  return \"sm\";\r\n}\r\n\r\nexport type {Breakpoint};\r\n"],"names":["useBreakpoint","is2xl","useMediaQuery","isXl","isLg","isMd"],"mappings":";;AA0BO,SAASA;IACd,MAAMC,QAAQC,cAAc;IAC5B,MAAMC,OAAOD,cAAc;IAC3B,MAAME,OAAOF,cAAc;IAC3B,MAAMG,OAAOH,cAAc;IAE3B,IAAID,OAAO,OAAO;IAClB,IAAIE,MAAM,OAAO;IACjB,IAAIC,MAAM,OAAO;IACjB,IAAIC,MAAM,OAAO;IAEjB,OAAO;AACT"}

package/dist/hooks/useColorScheme.d.ts

@@ -0,0 +1,14 @@
+type ColorScheme = "light" | "dark";
+/**
+ * Returns the user's system color scheme preference.
+ *
+ * @returns `"dark"` when the system prefers dark mode, `"light"` otherwise.
+ *
+ * @example
+ * ```tsx
+ * const scheme = useColorScheme(); // "dark"
+ * ```
+ */
+export declare function useColorScheme(): ColorScheme;
+export type { ColorScheme };
+//# sourceMappingURL=useColorScheme.d.ts.map

package/dist/hooks/useColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useColorScheme.tsx"],"names":[],"mappings":"AAIA,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpC;;;;;;;;;GASG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAI5C;AAED,YAAY,EAAC,WAAW,EAAC,CAAC"}

package/dist/hooks/useColorScheme.js

@@ -0,0 +1,9 @@
+"use client";
+import { useMediaQuery } from "./useMediaQuery.js";
+function useColorScheme() {
+    const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+    return prefersDark ? "dark" : "light";
+}
+export { useColorScheme };
+
+//# sourceMappingURL=useColorScheme.js.map

package/dist/hooks/useColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useColorScheme.js","sources":["../../src/hooks/useColorScheme.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\ntype ColorScheme = \"light\" | \"dark\";\r\n\r\n/**\r\n * Returns the user's system color scheme preference.\r\n *\r\n * @returns `\"dark\"` when the system prefers dark mode, `\"light\"` otherwise.\r\n *\r\n * @example\r\n * ```tsx\r\n * const scheme = useColorScheme(); // \"dark\"\r\n * ```\r\n */\r\nexport function useColorScheme(): ColorScheme {\r\n  const prefersDark = useMediaQuery(\"(prefers-color-scheme: dark)\");\r\n\r\n  return prefersDark ? \"dark\" : \"light\";\r\n}\r\n\r\nexport type {ColorScheme};\r\n"],"names":["useColorScheme","prefersDark","useMediaQuery"],"mappings":";;AAgBO,SAASA;IACd,MAAMC,cAAcC,cAAc;IAElC,OAAOD,cAAc,SAAS;AAChC"}

package/dist/hooks/useFocusManager.js

@@ -0,0 +1,51 @@
+"use client";
+import { useCallback } from "react";
+const FOCUSABLE_SELECTOR = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]), [contenteditable]';
+function useFocusManager(containerRef) {
+    const getFocusable = useCallback(()=>{
+        if (!containerRef.current) return [];
+        return [
+            ...containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR)
+        ].filter((element)=>!element.hasAttribute("disabled") && element.tabIndex >= 0);
+    }, [
+        containerRef
+    ]);
+    const focusFirst = useCallback(()=>{
+        getFocusable()[0]?.focus();
+    }, [
+        getFocusable
+    ]);
+    const focusLast = useCallback(()=>{
+        const items = getFocusable();
+        items.at(-1)?.focus();
+    }, [
+        getFocusable
+    ]);
+    const focusNext = useCallback(()=>{
+        const items = getFocusable();
+        const current = document.activeElement;
+        const index = items.indexOf(current);
+        const next = items[index + 1] ?? items[0];
+        next?.focus();
+    }, [
+        getFocusable
+    ]);
+    const focusPrevious = useCallback(()=>{
+        const items = getFocusable();
+        const current = document.activeElement;
+        const index = items.indexOf(current);
+        const previous = items[index - 1] ?? items.at(-1);
+        previous?.focus();
+    }, [
+        getFocusable
+    ]);
+    return {
+        focusFirst,
+        focusLast,
+        focusNext,
+        focusPrevious
+    };
+}
+export { useFocusManager };
+
+//# sourceMappingURL=useFocusManager.js.map

package/dist/hooks/useFocusManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useFocusManager.js","sources":["../../src/hooks/useFocusManager.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nconst FOCUSABLE_SELECTOR = [\r\n  \"a[href]\",\r\n  \"button:not(:disabled)\",\r\n  \"input:not(:disabled)\",\r\n  \"select:not(:disabled)\",\r\n  \"textarea:not(:disabled)\",\r\n  '[tabindex]:not([tabindex=\"-1\"])',\r\n  \"[contenteditable]\",\r\n].join(\", \");\r\n\r\n/**\r\n * Represents the focus movement helpers returned by {@link useFocusManager}.\r\n */\r\ninterface FocusManager {\r\n  /**\r\n   * Focuses the first focusable element in the container.\r\n   */\r\n  focusFirst: () => void;\r\n  /**\r\n   * Focuses the last focusable element in the container.\r\n   */\r\n  focusLast: () => void;\r\n  /**\r\n   * Focuses the next focusable element after the currently focused one.\r\n   */\r\n  focusNext: () => void;\r\n  /**\r\n   * Focuses the previous focusable element before the currently focused one.\r\n   */\r\n  focusPrevious: () => void;\r\n}\r\n\r\n/**\r\n * Provides programmatic focus movement helpers for a container element.\r\n *\r\n * @param containerRef - Ref pointing to the container whose focusable descendants should be managed.\r\n * @returns Focus helpers for moving to the first, last, next, or previous focusable descendant.\r\n *\r\n * @example\r\n * ```tsx\r\n * const containerRef = React.useRef<HTMLDivElement>(null);\r\n * const {focusNext, focusPrevious} = useFocusManager(containerRef);\r\n * ```\r\n */\r\nexport function useFocusManager(containerRef: React.RefObject<HTMLElement | null>): FocusManager {\r\n  const getFocusable = React.useCallback((): HTMLElement[] => {\r\n    if (!containerRef.current) {\r\n      return [];\r\n    }\r\n\r\n    return [...containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(\r\n      (element) => !element.hasAttribute(\"disabled\") && element.tabIndex >= 0,\r\n    );\r\n  }, [containerRef]);\r\n\r\n  const focusFirst = React.useCallback(() => {\r\n    getFocusable()[0]?.focus();\r\n  }, [getFocusable]);\r\n\r\n  const focusLast = React.useCallback(() => {\r\n    const items = getFocusable();\r\n\r\n    items.at(-1)?.focus();\r\n  }, [getFocusable]);\r\n\r\n  const focusNext = React.useCallback(() => {\r\n    const items = getFocusable();\r\n    const current = document.activeElement;\r\n    const index = items.indexOf(current as HTMLElement);\r\n    const next = items[index + 1] ?? items[0];\r\n\r\n    next?.focus();\r\n  }, [getFocusable]);\r\n\r\n  const focusPrevious = React.useCallback(() => {\r\n    const items = getFocusable();\r\n    const current = document.activeElement;\r\n    const index = items.indexOf(current as HTMLElement);\r\n    const previous = items[index - 1] ?? items.at(-1);\r\n\r\n    previous?.focus();\r\n  }, [getFocusable]);\r\n\r\n  return {focusFirst, focusLast, focusNext, focusPrevious};\r\n}\r\n"],"names":["FOCUSABLE_SELECTOR","useFocusManager","containerRef","getFocusable","React","element","focusFirst","focusLast","items","focusNext","current","document","index","next","focusPrevious","previous"],"mappings":";;AAIA,MAAMA,qBAAqB;AA4CpB,SAASC,gBAAgBC,YAAiD;IAC/E,MAAMC,eAAeC,YAAkB;QACrC,IAAI,CAACF,aAAa,OAAO,EACvB,OAAO,EAAE;QAGX,OAAO;eAAIA,aAAa,OAAO,CAAC,gBAAgB,CAAcF;SAAoB,CAAC,MAAM,CACvF,CAACK,UAAY,CAACA,QAAQ,YAAY,CAAC,eAAeA,QAAQ,QAAQ,IAAI;IAE1E,GAAG;QAACH;KAAa;IAEjB,MAAMI,aAAaF,YAAkB;QACnCD,cAAc,CAAC,EAAE,EAAE;IACrB,GAAG;QAACA;KAAa;IAEjB,MAAMI,YAAYH,YAAkB;QAClC,MAAMI,QAAQL;QAEdK,MAAM,EAAE,CAAC,KAAK;IAChB,GAAG;QAACL;KAAa;IAEjB,MAAMM,YAAYL,YAAkB;QAClC,MAAMI,QAAQL;QACd,MAAMO,UAAUC,SAAS,aAAa;QACtC,MAAMC,QAAQJ,MAAM,OAAO,CAACE;QAC5B,MAAMG,OAAOL,KAAK,CAACI,QAAQ,EAAE,IAAIJ,KAAK,CAAC,EAAE;QAEzCK,MAAM;IACR,GAAG;QAACV;KAAa;IAEjB,MAAMW,gBAAgBV,YAAkB;QACtC,MAAMI,QAAQL;QACd,MAAMO,UAAUC,SAAS,aAAa;QACtC,MAAMC,QAAQJ,MAAM,OAAO,CAACE;QAC5B,MAAMK,WAAWP,KAAK,CAACI,QAAQ,EAAE,IAAIJ,MAAM,EAAE,CAAC;QAE9CO,UAAU;IACZ,GAAG;QAACZ;KAAa;IAEjB,OAAO;QAACG;QAAYC;QAAWE;QAAWK;IAAa;AACzD"}

package/dist/hooks/useFocusVisible.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+/**
+ * Represents the focus handlers returned by {@link useFocusVisible}.
+ *
+ * @remarks
+ * Spread these handlers onto the interactive element that should respond to keyboard
+ * focus visibility. They coordinate transient focus styling without owning rendering.
+ */
+interface FocusVisibleProps {
+    /**
+     * Called when the target receives focus.
+     */
+    onFocus: (event: React.FocusEvent) => void;
+    /**
+     * Called when the target loses focus.
+     */
+    onBlur: () => void;
+}
+/**
+ * Detects whether the current focus originated from keyboard navigation.
+ *
+ * @remarks
+ * Tracks global keyboard and pointer input so consumers can render focus rings only when
+ * users are tabbing through the interface. This mirrors the intent of `:focus-visible`
+ * while remaining available to JavaScript-driven components and custom states.
+ *
+ * @returns An object containing the current focus-visible state and focus handlers to spread on the target element.
+ *
+ * @example
+ * ```tsx
+ * const {isFocusVisible, focusProps} = useFocusVisible();
+ *
+ * return (
+ *   <button
+ *     type="button"
+ *     {...focusProps}
+ *     className={isFocusVisible ? "ring" : undefined}>
+ *     Click
+ *   </button>
+ * );
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible | MDN :focus-visible}
+ */
+export declare function useFocusVisible(): {
+    isFocusVisible: boolean;
+    focusProps: FocusVisibleProps;
+};
+export {};
+//# sourceMappingURL=useFocusVisible.d.ts.map

package/dist/hooks/useFocusVisible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusVisible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;GAMG;AACH,UAAU,iBAAiB;IACzB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,IAAI;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,iBAAiB,CAAC;CAC/B,CAoCA"}

package/dist/hooks/useFocusVisible.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+function useFocusVisible() {
+    const [isFocusVisible, setIsFocusVisible] = useState(false);
+    const isKeyboardRef = useRef(false);
+    useEffect(()=>{
+        const onKeyDown = ()=>{
+            isKeyboardRef.current = true;
+        };
+        const onPointerDown = ()=>{
+            isKeyboardRef.current = false;
+        };
+        globalThis.document.addEventListener("keydown", onKeyDown, true);
+        globalThis.document.addEventListener("pointerdown", onPointerDown, true);
+        return ()=>{
+            globalThis.document.removeEventListener("keydown", onKeyDown, true);
+            globalThis.document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+    }, []);
+    const focusProps = useMemo(()=>({
+            onFocus: (_event)=>{
+                if (isKeyboardRef.current) setIsFocusVisible(true);
+            },
+            onBlur: ()=>{
+                setIsFocusVisible(false);
+            }
+        }), []);
+    return {
+        isFocusVisible,
+        focusProps
+    };
+}
+export { useFocusVisible };
+
+//# sourceMappingURL=useFocusVisible.js.map

package/dist/hooks/useFocusVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useFocusVisible.js","sources":["../../src/hooks/useFocusVisible.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Represents the focus handlers returned by {@link useFocusVisible}.\r\n *\r\n * @remarks\r\n * Spread these handlers onto the interactive element that should respond to keyboard\r\n * focus visibility. They coordinate transient focus styling without owning rendering.\r\n */\r\ninterface FocusVisibleProps {\r\n  /**\r\n   * Called when the target receives focus.\r\n   */\r\n  onFocus: (event: React.FocusEvent) => void;\r\n  /**\r\n   * Called when the target loses focus.\r\n   */\r\n  onBlur: () => void;\r\n}\r\n\r\n/**\r\n * Detects whether the current focus originated from keyboard navigation.\r\n *\r\n * @remarks\r\n * Tracks global keyboard and pointer input so consumers can render focus rings only when\r\n * users are tabbing through the interface. This mirrors the intent of `:focus-visible`\r\n * while remaining available to JavaScript-driven components and custom states.\r\n *\r\n * @returns An object containing the current focus-visible state and focus handlers to spread on the target element.\r\n *\r\n * @example\r\n * ```tsx\r\n * const {isFocusVisible, focusProps} = useFocusVisible();\r\n *\r\n * return (\r\n *   <button\r\n *     type=\"button\"\r\n *     {...focusProps}\r\n *     className={isFocusVisible ? \"ring\" : undefined}>\r\n *     Click\r\n *   </button>\r\n * );\r\n * ```\r\n *\r\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible | MDN :focus-visible}\r\n */\r\nexport function useFocusVisible(): {\r\n  isFocusVisible: boolean;\r\n  focusProps: FocusVisibleProps;\r\n} {\r\n  const [isFocusVisible, setIsFocusVisible] = React.useState(false);\r\n  const isKeyboardRef = React.useRef(false);\r\n\r\n  React.useEffect(() => {\r\n    const onKeyDown = () => {\r\n      isKeyboardRef.current = true;\r\n    };\r\n    const onPointerDown = () => {\r\n      isKeyboardRef.current = false;\r\n    };\r\n\r\n    globalThis.document.addEventListener(\"keydown\", onKeyDown, true);\r\n    globalThis.document.addEventListener(\"pointerdown\", onPointerDown, true);\r\n\r\n    return () => {\r\n      globalThis.document.removeEventListener(\"keydown\", onKeyDown, true);\r\n      globalThis.document.removeEventListener(\"pointerdown\", onPointerDown, true);\r\n    };\r\n  }, []);\r\n\r\n  const focusProps = React.useMemo<FocusVisibleProps>(\r\n    () => ({\r\n      onFocus: (_event: React.FocusEvent) => {\r\n        if (isKeyboardRef.current) {\r\n          setIsFocusVisible(true);\r\n        }\r\n      },\r\n      onBlur: () => {\r\n        setIsFocusVisible(false);\r\n      },\r\n    }),\r\n    [],\r\n  );\r\n\r\n  return {isFocusVisible, focusProps};\r\n}\r\n"],"names":["useFocusVisible","isFocusVisible","setIsFocusVisible","React","isKeyboardRef","onKeyDown","onPointerDown","globalThis","focusProps","_event"],"mappings":";;AAgDO,SAASA;IAId,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,SAAe;IAC3D,MAAMC,gBAAgBD,OAAa;IAEnCA,UAAgB;QACd,MAAME,YAAY;YAChBD,cAAc,OAAO,GAAG;QAC1B;QACA,MAAME,gBAAgB;YACpBF,cAAc,OAAO,GAAG;QAC1B;QAEAG,WAAW,QAAQ,CAAC,gBAAgB,CAAC,WAAWF,WAAW;QAC3DE,WAAW,QAAQ,CAAC,gBAAgB,CAAC,eAAeD,eAAe;QAEnE,OAAO;YACLC,WAAW,QAAQ,CAAC,mBAAmB,CAAC,WAAWF,WAAW;YAC9DE,WAAW,QAAQ,CAAC,mBAAmB,CAAC,eAAeD,eAAe;QACxE;IACF,GAAG,EAAE;IAEL,MAAME,aAAaL,QACjB,IAAO;YACL,SAAS,CAACM;gBACR,IAAIL,cAAc,OAAO,EACvBF,kBAAkB;YAEtB;YACA,QAAQ;gBACNA,kBAAkB;YACpB;QACF,IACA,EAAE;IAGJ,OAAO;QAACD;QAAgBO;IAAU;AACpC"}

package/dist/hooks/useIsMobile.d.ts

@@ -1,20 +1,14 @@
 /**
  * A custom React hook that detects whether the current device is a mobile device
- * based on the screen width.
- * This hook uses a media query to check if the viewport width is less than the defined
- * mobile breakpoint (768px). It updates the state when the window size changes.
- * @returns Returns true if the viewport width is less than the mobile breakpoint,
- * false otherwise.
+ * based on the screen width (viewport < 768px).
+ *
+ * @returns `true` if the viewport width is less than 768px, `false` otherwise.
+ *
  * @example
  * ```tsx
  * function MyComponent() {
  *   const isMobile = useIsMobile();
- *
- *   return (
- *     <div>
- *       {isMobile ? 'Mobile View' : 'Desktop View'}
- *     </div>
- *   );
+ *   return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;
  * }
  * ```
  */

package/dist/hooks/useIsMobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAgBrC"}
+{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC"}

package/dist/hooks/useIsMobile.js

@@ -1,18 +1,7 @@
 "use client";
-import { useEffect, useState } from "react";
-const MOBILE_BREAKPOINT = 768;
+import { useMediaQuery } from "./useMediaQuery.js";
 function useIsMobile() {
-    const [isMobile, setIsMobile] = useState(null);
-    useEffect(()=>{
-        const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = ()=>{
-            setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-        };
-        mql.addEventListener("change", onChange);
-        setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-        return ()=>mql.removeEventListener("change", onChange);
-    }, []);
-    return Boolean(isMobile);
+    return useMediaQuery("(max-width: 767px)");
 }
 export { useIsMobile };
 

package/dist/hooks/useIsMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks/useIsMobile.js","sources":["../../src/hooks/useIsMobile.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n/**\r\n * A custom React hook that detects whether the current device is a mobile device\r\n * based on the screen width.\r\n * This hook uses a media query to check if the viewport width is less than the defined\r\n * mobile breakpoint (768px). It updates the state when the window size changes.\r\n * @returns Returns true if the viewport width is less than the mobile breakpoint,\r\n * false otherwise.\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const isMobile = useIsMobile();\r\n *\r\n *   return (\r\n *     <div>\r\n *       {isMobile ? 'Mobile View' : 'Desktop View'}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useIsMobile(): boolean {\r\n  const [isMobile, setIsMobile] = React.useState<boolean | null>(null);\r\n\r\n  React.useEffect(() => {\r\n    const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return Boolean(isMobile);\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","globalThis","onChange","Boolean"],"mappings":";;AAGA,MAAMA,oBAAoB;AAsBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAA+B;IAE/DA,UAAgB;QACd,MAAMC,MAAMC,WAAW,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,EAAEN,oBAAoB,EAAE,GAAG,CAAC;QAClF,MAAMO,WAAW;YAEfJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC7C;QACAK,IAAI,gBAAgB,CAAC,UAAUE;QAE/BJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC3C,OAAO,IAAMK,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAOC,QAAQN;AACjB"}
+{"version":3,"file":"hooks/useIsMobile.js","sources":["../../src/hooks/useIsMobile.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\n/**\r\n * A custom React hook that detects whether the current device is a mobile device\r\n * based on the screen width (viewport < 768px).\r\n *\r\n * @returns `true` if the viewport width is less than 768px, `false` otherwise.\r\n *\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const isMobile = useIsMobile();\r\n *   return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;\r\n * }\r\n * ```\r\n */\r\nexport function useIsMobile(): boolean {\r\n  return useMediaQuery(\"(max-width: 767px)\");\r\n}\r\n"],"names":["useIsMobile","useMediaQuery"],"mappings":";;AAkBO,SAASA;IACd,OAAOC,cAAc;AACvB"}

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Subscribes to a CSS media query and returns whether it currently matches.
+ * SSR-safe — returns `false` on the server until hydration.
+ *
+ * @param query - A valid CSS media query string (e.g. `"(min-width: 768px)"`).
+ * @returns `true` when the media query matches, `false` otherwise.
+ *
+ * @example
+ * ```tsx
+ * const isWide = useMediaQuery("(min-width: 1024px)");
+ * ```
+ */
+export declare function useMediaQuery(query: string): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAiBpD"}

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect, useState } from "react";
+function useMediaQuery(query) {
+    const [matches, setMatches] = useState(false);
+    useEffect(()=>{
+        const mql = globalThis.window.matchMedia(query);
+        const onChange = (event)=>{
+            setMatches(event.matches);
+        };
+        setMatches(mql.matches);
+        mql.addEventListener("change", onChange);
+        return ()=>mql.removeEventListener("change", onChange);
+    }, [
+        query
+    ]);
+    return matches;
+}
+export { useMediaQuery };
+
+//# sourceMappingURL=useMediaQuery.js.map

package/dist/hooks/useMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useMediaQuery.js","sources":["../../src/hooks/useMediaQuery.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\n/**\r\n * Subscribes to a CSS media query and returns whether it currently matches.\r\n * SSR-safe — returns `false` on the server until hydration.\r\n *\r\n * @param query - A valid CSS media query string (e.g. `\"(min-width: 768px)\"`).\r\n * @returns `true` when the media query matches, `false` otherwise.\r\n *\r\n * @example\r\n * ```tsx\r\n * const isWide = useMediaQuery(\"(min-width: 1024px)\");\r\n * ```\r\n */\r\nexport function useMediaQuery(query: string): boolean {\r\n  const [matches, setMatches] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    const mql = globalThis.window.matchMedia(query);\r\n    const onChange = (event: MediaQueryListEvent) => {\r\n      setMatches(event.matches);\r\n    };\r\n\r\n    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n    setMatches(mql.matches);\r\n    mql.addEventListener(\"change\", onChange);\r\n\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, [query]);\r\n\r\n  return matches;\r\n}\r\n"],"names":["useMediaQuery","query","matches","setMatches","React","mql","globalThis","onChange","event"],"mappings":";;AAgBO,SAASA,cAAcC,KAAa;IACzC,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAe;IAE7CA,UAAgB;QACd,MAAMC,MAAMC,WAAW,MAAM,CAAC,UAAU,CAACL;QACzC,MAAMM,WAAW,CAACC;YAChBL,WAAWK,MAAM,OAAO;QAC1B;QAGAL,WAAWE,IAAI,OAAO;QACtBA,IAAI,gBAAgB,CAAC,UAAUE;QAE/B,OAAO,IAAMF,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG;QAACN;KAAM;IAEV,OAAOC;AACT"}

package/dist/hooks/usePrefersContrast.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns whether the user prefers higher contrast.
+ *
+ * @remarks
+ * Wraps a `prefers-contrast` media query in a semantic accessibility hook so components
+ * can adapt borders, focus states, and surface styling without repeating query strings.
+ *
+ * @returns `true` when `prefers-contrast: more` is active.
+ *
+ * @example
+ * ```tsx
+ * const highContrast = usePrefersContrast();
+ * ```
+ *
+ * @see {@link useMediaQuery} — Shared media-query subscription hook.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast | MDN prefers-contrast}
+ */
+export declare function usePrefersContrast(): boolean;
+//# sourceMappingURL=usePrefersContrast.d.ts.map

package/dist/hooks/usePrefersContrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersContrast.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrefersContrast.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C"}

package/dist/hooks/usePrefersContrast.js

@@ -0,0 +1,8 @@
+"use client";
+import { useMediaQuery } from "./useMediaQuery.js";
+function usePrefersContrast() {
+    return useMediaQuery("(prefers-contrast: more)");
+}
+export { usePrefersContrast };
+
+//# sourceMappingURL=usePrefersContrast.js.map

package/dist/hooks/usePrefersContrast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/usePrefersContrast.js","sources":["../../src/hooks/usePrefersContrast.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useMediaQuery} from \"./useMediaQuery\";\r\n\r\n/**\r\n * Returns whether the user prefers higher contrast.\r\n *\r\n * @remarks\r\n * Wraps a `prefers-contrast` media query in a semantic accessibility hook so components\r\n * can adapt borders, focus states, and surface styling without repeating query strings.\r\n *\r\n * @returns `true` when `prefers-contrast: more` is active.\r\n *\r\n * @example\r\n * ```tsx\r\n * const highContrast = usePrefersContrast();\r\n * ```\r\n *\r\n * @see {@link useMediaQuery} — Shared media-query subscription hook.\r\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast | MDN prefers-contrast}\r\n */\r\nexport function usePrefersContrast(): boolean {\r\n  return useMediaQuery(\"(prefers-contrast: more)\");\r\n}\r\n"],"names":["usePrefersContrast","useMediaQuery"],"mappings":";;AAqBO,SAASA;IACd,OAAOC,cAAc;AACvB"}

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns whether the user prefers reduced motion.
+ *
+ * @remarks
+ * This hook is re-exported from `motion/react` so consumers can depend on the component
+ * library for motion-aware behavior without importing Motion directly.
+ *
+ * @returns `true` when `prefers-reduced-motion: reduce` is active, or `null` until the first client measurement when Motion has not resolved the preference yet.
+ *
+ * @example
+ * ```tsx
+ * const prefersReduced = useReducedMotion();
+ * ```
+ *
+ * @see {@link https://motion.dev/docs/react-use-reduced-motion | Motion useReducedMotion}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | MDN prefers-reduced-motion}
+ */
+export { useReducedMotion } from "motion/react";
+//# sourceMappingURL=useReducedMotion.d.ts.map

package/dist/hooks/useReducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducedMotion.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC"}

package/dist/hooks/useReducedMotion.js

@@ -0,0 +1,2 @@
+"use client";
+export { useReducedMotion } from "motion/react";