react-shadcn-kit 0.2.2 → 0.2.4

package/dist/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export * from './use-mobile';
+export * from './use-aria-live';
+export * from './use-focus-visible';
+export * from './use-screen-reader-only';
+export type * from './use-mobile';
+export type * from './use-aria-live';
+export type * from './use-focus-visible';
+export type * from './use-screen-reader-only';

package/dist/hooks/index.js

@@ -0,0 +1,11 @@
+import { useIsMobile as o } from "./use-mobile.js";
+import { useAriaLive as i } from "./use-aria-live.js";
+import { useFocusVisible as f } from "./use-focus-visible.js";
+import { useScreenReaderOnly as p } from "./use-screen-reader-only.js";
+export {
+  i as useAriaLive,
+  f as useFocusVisible,
+  o as useIsMobile,
+  p as useScreenReaderOnly
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/hooks/use-aria-live.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef as r, useEffect as u } from "react";
 function c() {
   const t = r(null), n = (e) => {

package/dist/hooks/use-aria-live.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-aria-live.js","sources":["../../src/hooks/use-aria-live.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * useAriaLive\n *\n * Provides a simple way to announce dynamic content to screen readers using an\n * `aria-live` region. The hook returns a ref that should be attached to a hidden\n * element and a function to update the live message.\n *\n * Example usage:\n * ```tsx\n * const { liveRef, announce } = useAriaLive();\n * return (\n *   <>\n *     <div ref={liveRef} aria-live=\"polite\" className=\"sr-only\" />\n *     <button onClick={() => announce('Item added')}>Add</button>\n *   </>\n * );\n * ```\n */\nexport function useAriaLive() {\n  const liveRef = useRef<HTMLDivElement>(null);\n\n  const announce = (message: string) => {\n    if (liveRef.current) {\n      // Clear previous message to ensure screen readers pick up the new one\n      liveRef.current.textContent = \"\";\n      // Use a timeout to allow the DOM to register the change\n      setTimeout(() => {\n        if (liveRef.current) {\n          liveRef.current.textContent = message;\n        }\n      }, 100);\n    }\n  };\n\n  // Cleanup on unmount\n  useEffect(() => {\n    const liveElement = liveRef.current;\n    return () => {\n      if (liveElement) {\n        liveElement.textContent = \"\";\n      }\n    };\n  }, []);\n\n  return { liveRef, announce } as const;\n}\n"],"names":["useRef","useEffect","useAriaLive","liveRef","announce","message","liveElement"],"mappings":"AAoBO,SAAA,UAAAA,GAAA,aAAAC,SAAA;AAAA,SAASC,IAAc;AAC5B,QAAMC,IAAUH,EAAuB,IAAI,GAErCI,IAAW,CAACC,MAAoB;AACpC,IAAIF,EAAQ,YAEVA,EAAQ,QAAQ,cAAc,IAE9B,WAAW,MAAM;AACf,MAAIA,EAAQ,YACVA,EAAQ,QAAQ,cAAcE;AAAA,IAElC,GAAG,GAAG;AAAA,EAEV;AAGA,SAAAJ,EAAU,MAAM;AACd,UAAMK,IAAcH,EAAQ;AAC5B,WAAO,MAAM;AACX,MAAIG,MACFA,EAAY,cAAc;AAAA,IAE9B;AAAA,EACF,GAAG,CAAA,CAAE,GAEE,EAAE,SAAAH,GAAS,UAAAC,EAAA;AACpB;"}
+{"version":3,"file":"use-aria-live.js","sources":["../../src/hooks/use-aria-live.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\n/**\n * useAriaLive\n *\n * Provides a simple way to announce dynamic content to screen readers using an\n * `aria-live` region. The hook returns a ref that should be attached to a hidden\n * element and a function to update the live message.\n *\n * Example usage:\n * ```tsx\n * const { liveRef, announce } = useAriaLive();\n * return (\n *   <>\n *     <div ref={liveRef} aria-live=\"polite\" className=\"sr-only\" />\n *     <button onClick={() => announce('Item added')}>Add</button>\n *   </>\n * );\n * ```\n */\nexport function useAriaLive() {\n  const liveRef = useRef<HTMLDivElement>(null);\n\n  const announce = (message: string) => {\n    if (liveRef.current) {\n      // Clear previous message to ensure screen readers pick up the new one\n      liveRef.current.textContent = \"\";\n      // Use a timeout to allow the DOM to register the change\n      setTimeout(() => {\n        if (liveRef.current) {\n          liveRef.current.textContent = message;\n        }\n      }, 100);\n    }\n  };\n\n  // Cleanup on unmount\n  useEffect(() => {\n    const liveElement = liveRef.current;\n    return () => {\n      if (liveElement) {\n        liveElement.textContent = \"\";\n      }\n    };\n  }, []);\n\n  return { liveRef, announce } as const;\n}\n"],"names":[],"mappings":";AAsBO;AAAA;AACL;AAGE;AAKI;AACgC;AAE5B;AAKV;AACE;AACA;AACE;AAC4B;AAE9B;AAIJ;;;;"}

package/dist/hooks/use-focus-visible.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState as r, useEffect as i } from "react";
 function u() {
   const [t, o] = r(!1);

package/dist/hooks/use-focus-visible.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-focus-visible.js","sources":["../../src/hooks/use-focus-visible.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * useFocusVisible\n *\n * Detects when the user is navigating via keyboard (focus-visible) and provides a\n * boolean flag that can be used to apply a visual focus style only for keyboard\n * users. This mirrors the behavior of the `:focus-visible` CSS pseudo‑class but\n * works in browsers that lack native support.\n *\n * Example usage:\n * ```tsx\n * const isFocusVisible = useFocusVisible();\n * return <button className={isFocusVisible ? 'focus-visible' : ''}>Click</button>;\n * ```\n */\nexport function useFocusVisible() {\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (\n        e.key === \"Tab\" ||\n        e.key === \"Shift\" ||\n        e.key === \"ArrowUp\" ||\n        e.key === \"ArrowDown\" ||\n        e.key === \"ArrowLeft\" ||\n        e.key === \"ArrowRight\"\n      ) {\n        setIsFocusVisible(true);\n      }\n    };\n    const onMouseDown = () => setIsFocusVisible(false);\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    window.addEventListener(\"mousedown\", onMouseDown);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n      window.removeEventListener(\"mousedown\", onMouseDown);\n    };\n  }, []);\n\n  return isFocusVisible;\n}\n"],"names":["useState","useEffect","useFocusVisible","isFocusVisible","setIsFocusVisible","onKeyDown","onMouseDown"],"mappings":"AAgBO,SAAA,YAAAA,GAAA,aAAAC,SAAA;AAAA,SAASC,IAAkB;AAChC,QAAM,CAACC,GAAgBC,CAAiB,IAAIJ,EAAS,EAAK;AAE1D,SAAAC,EAAU,MAAM;AACd,UAAMI,IAAY,CAAC,MAAqB;AACtC,OACE,EAAE,QAAQ,SACV,EAAE,QAAQ,WACV,EAAE,QAAQ,aACV,EAAE,QAAQ,eACV,EAAE,QAAQ,eACV,EAAE,QAAQ,iBAEVD,EAAkB,EAAI;AAAA,IAE1B,GACME,IAAc,MAAMF,EAAkB,EAAK;AAEjD,kBAAO,iBAAiB,WAAWC,CAAS,GAC5C,OAAO,iBAAiB,aAAaC,CAAW,GACzC,MAAM;AACX,aAAO,oBAAoB,WAAWD,CAAS,GAC/C,OAAO,oBAAoB,aAAaC,CAAW;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE,GAEEH;AACT;"}
+{"version":3,"file":"use-focus-visible.js","sources":["../../src/hooks/use-focus-visible.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * useFocusVisible\n *\n * Detects when the user is navigating via keyboard (focus-visible) and provides a\n * boolean flag that can be used to apply a visual focus style only for keyboard\n * users. This mirrors the behavior of the `:focus-visible` CSS pseudo‑class but\n * works in browsers that lack native support.\n *\n * Example usage:\n * ```tsx\n * const isFocusVisible = useFocusVisible();\n * return <button className={isFocusVisible ? 'focus-visible' : ''}>Click</button>;\n * ```\n */\nexport function useFocusVisible() {\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (\n        e.key === \"Tab\" ||\n        e.key === \"Shift\" ||\n        e.key === \"ArrowUp\" ||\n        e.key === \"ArrowDown\" ||\n        e.key === \"ArrowLeft\" ||\n        e.key === \"ArrowRight\"\n      ) {\n        setIsFocusVisible(true);\n      }\n    };\n    const onMouseDown = () => setIsFocusVisible(false);\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    window.addEventListener(\"mousedown\", onMouseDown);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n      window.removeEventListener(\"mousedown\", onMouseDown);\n    };\n  }, []);\n\n  return isFocusVisible;\n}\n"],"names":[],"mappings":";AAkBO;AAAA;AACL;AAEA;AACE;AACE;AAQwB;AAK1B;AAGE;AACmD;AACrD;AAIJ;;;;"}

package/dist/hooks/use-mobile.js

@@ -1,3 +1,4 @@
+"use client";
 import * as o from "react";
 const e = 768;
 function r() {

package/dist/hooks/use-mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-mobile.js","sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","onChange"],"mappings":";AAEA,MAAMA,IAAoB;AAEnB,SAASC,IAAc;AAC5B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAM,SAA8B,MAAS;AAE7E,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAM,OAAO,WAAW,eAAeL,IAAoB,CAAC,KAAK,GACjEM,IAAW,MAAM;AACrB,MAAAH,EAAY,OAAO,aAAaH,CAAiB;AAAA,IACnD;AACA,WAAAK,EAAI,iBAAiB,UAAUC,CAAQ,GACvCH,EAAY,OAAO,aAAaH,CAAiB,GAC1C,MAAMK,EAAI,oBAAoB,UAAUC,CAAQ;AAAA,EACzD,GAAG,CAAA,CAAE,GAEE,CAAC,CAACJ;AACX;"}
+{"version":3,"file":"use-mobile.js","sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"names":[],"mappings":";;AAIA;AAEO;AACL;AAEA;AACE;AAEE;AAAiD;AAEnD;AAEuD;AAI3D;;;;"}

package/dist/hooks/use-screen-reader-only.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect as r } from "react";
 function p() {
   const e = "absolute w-px h-px overflow-hidden whitespace-nowrap border-0 p-0 -m-px clip[rect(0,0,0,0)]";

package/dist/hooks/use-screen-reader-only.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-screen-reader-only.js","sources":["../../src/hooks/use-screen-reader-only.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * useScreenReaderOnly\n *\n * Provides a utility hook that returns a className string for visually hidden\n * elements that are still accessible to screen readers. It mirrors the common\n * `sr-only` utility from Tailwind but can be used without Tailwind.\n *\n * Example usage:\n * ```tsx\n * const srOnly = useScreenReaderOnly();\n * return <span className={srOnly}>Only for screen readers</span>;\n * ```\n */\nexport function useScreenReaderOnly() {\n  // The className mirrors Tailwind's `sr-only` implementation.\n  const className =\n    \"absolute w-px h-px overflow-hidden whitespace-nowrap border-0 p-0 -m-px clip[rect(0,0,0,0)]\";\n\n  // Ensure the element is removed from the visual flow on mount (no side‑effects needed).\n  useEffect(() => {}, []);\n\n  return className;\n}\n"],"names":["useEffect","useScreenReaderOnly","className"],"mappings":"AAeO,SAAA,aAAAA,SAAA;AAAA,SAASC,IAAsB;AAEpC,QAAMC,IACJ;AAGF,SAAAF,EAAU,MAAM;AAAA,EAAC,GAAG,CAAA,CAAE,GAEfE;AACT;"}
+{"version":3,"file":"use-screen-reader-only.js","sources":["../../src/hooks/use-screen-reader-only.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\n/**\n * useScreenReaderOnly\n *\n * Provides a utility hook that returns a className string for visually hidden\n * elements that are still accessible to screen readers. It mirrors the common\n * `sr-only` utility from Tailwind but can be used without Tailwind.\n *\n * Example usage:\n * ```tsx\n * const srOnly = useScreenReaderOnly();\n * return <span className={srOnly}>Only for screen readers</span>;\n * ```\n */\nexport function useScreenReaderOnly() {\n  // The className mirrors Tailwind's `sr-only` implementation.\n  const className =\n    \"absolute w-px h-px overflow-hidden whitespace-nowrap border-0 p-0 -m-px clip[rect(0,0,0,0)]\";\n\n  // Ensure the element is removed from the visual flow on mount (no side‑effects needed).\n  useEffect(() => {}, []);\n\n  return className;\n}\n"],"names":[],"mappings":";AAiBO;AAAA;AAEL;AAIA;AAAgB;AAGlB;;;;"}