@tribepad/themis 1.5.9 → 1.6.1

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useMediaQuery } from './useMediaQuery';
 export { useReducedMotion } from './useReducedMotion';
+export { useContainerNarrow } from './useContainerNarrow';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/hooks/index.js

@@ -1,2 +1,2 @@
-'use strict';var react=require('react');function d(e){let n=react.useCallback(r=>{let i=window.matchMedia(e);return i.addEventListener("change",r),()=>i.removeEventListener("change",r)},[e]),t=react.useCallback(()=>window.matchMedia(e).matches,[e]),o=react.useCallback(()=>false,[]);return react.useSyncExternalStore(n,t,o)}var a="(prefers-reduced-motion: reduce)";function f(){return typeof window>"u"?false:window.matchMedia(a).matches}function h(){let[e,n]=react.useState(f);return react.useEffect(()=>{let t=window.matchMedia(a);n(t.matches);let o=r=>{n(r.matches);};return t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[]),e}exports.useMediaQuery=d;exports.useReducedMotion=h;//# sourceMappingURL=index.js.map
+'use strict';var react=require('react');function u(e){let n=react.useCallback(t=>{let o=window.matchMedia(e);return o.addEventListener("change",t),()=>o.removeEventListener("change",t)},[e]),r=react.useCallback(()=>window.matchMedia(e).matches,[e]),s=react.useCallback(()=>false,[]);return react.useSyncExternalStore(n,r,s)}var a="(prefers-reduced-motion: reduce)";function l(){return typeof window>"u"?false:window.matchMedia(a).matches}function v(){let[e,n]=react.useState(l);return react.useEffect(()=>{let r=window.matchMedia(a);n(r.matches);let s=t=>{n(t.matches);};return r.addEventListener("change",s),()=>r.removeEventListener("change",s)},[]),e}function p(e,n){let[r,s]=react.useState(false);return react.useEffect(()=>{let t=e.current;if(!t)return;let o=()=>s(t.offsetWidth<n);o();let i;return typeof ResizeObserver<"u"&&(i=new ResizeObserver(o),i.observe(t)),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o),i?.disconnect();}},[e,n]),r}exports.useContainerNarrow=p;exports.useMediaQuery=u;exports.useReducedMotion=v;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/hooks/useReducedMotion.ts"],"names":["useMediaQuery","query","subscribe","useCallback","callback","mql","getSnapshot","getServerSnapshot","useSyncExternalStore","QUERY","getInitialState","useReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","handler","event"],"mappings":"wCAcO,SAASA,CAAAA,CAAcC,CAAAA,CAAwB,CACpD,IAAMC,CAAAA,CAAYC,iBAAAA,CACfC,GAAyB,CACxB,IAAMC,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWJ,CAAK,CAAA,CACnC,OAAAI,EAAI,gBAAA,CAAiB,QAAA,CAAUD,CAAQ,CAAA,CAChC,IAAMC,CAAAA,CAAI,mBAAA,CAAoB,QAAA,CAAUD,CAAQ,CACzD,CAAA,CACA,CAACH,CAAK,CACR,CAAA,CAEMK,CAAAA,CAAcH,iBAAAA,CAClB,IAAM,MAAA,CAAO,UAAA,CAAWF,CAAK,CAAA,CAAE,OAAA,CAC/B,CAACA,CAAK,CACR,CAAA,CAEMM,CAAAA,CAAoBJ,iBAAAA,CAAY,IAAM,KAAA,CAAO,EAAE,CAAA,CAErD,OAAOK,0BAAAA,CAAqBN,CAAAA,CAAWI,CAAAA,CAAaC,CAAiB,CACvE,CC5BA,IAAME,CAAAA,CAAQ,kCAAA,CAEd,SAASC,CAAAA,EAA2B,CAClC,OAAI,OAAO,MAAA,CAAW,GAAA,CAAoB,KAAA,CACnC,MAAA,CAAO,UAAA,CAAWD,CAAK,CAAA,CAAE,OAClC,CASO,SAASE,CAAAA,EAA4B,CAC1C,GAAM,CAACC,EAAsBC,CAAuB,CAAA,CAAIC,cAAAA,CAASJ,CAAe,CAAA,CAEhF,OAAAK,eAAAA,CAAU,IAAM,CACd,IAAMV,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWI,CAAK,CAAA,CACnCI,CAAAA,CAAwBR,CAAAA,CAAI,OAAO,CAAA,CAEnC,IAAMW,CAAAA,CAAWC,CAAAA,EAAqC,CACpDJ,CAAAA,CAAwBI,CAAAA,CAAM,OAAO,EACvC,CAAA,CAEA,OAAAZ,CAAAA,CAAI,gBAAA,CAAiB,QAAA,CAAUW,CAAO,CAAA,CAC/B,IAAMX,CAAAA,CAAI,mBAAA,CAAoB,QAAA,CAAUW,CAAO,CACxD,CAAA,CAAG,EAAE,EAEEJ,CACT","file":"index.js","sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/**\n * SSR-safe media query hook using useSyncExternalStore.\n *\n * - No hydration mismatch flicker (getServerSnapshot returns false)\n * - Listener registered once per query value (no dependency bugs)\n * - Reacts to changes in real time\n *\n * @param query - CSS media query string, e.g. '(max-width: 767px)'\n * @returns Whether the media query currently matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener('change', callback);\n      return () => mql.removeEventListener('change', callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  const getServerSnapshot = useCallback(() => false, []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","'use client';\n\nimport { useState, useEffect } from 'react';\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\nfunction getInitialState(): boolean {\n  if (typeof window === 'undefined') return false;\n  return window.matchMedia(QUERY).matches;\n}\n\n/**\n * Detects whether the user prefers reduced motion.\n *\n * - SSR-safe (returns `false` on the server)\n * - Reacts to changes in the OS preference\n * - Cleans up the listener on unmount\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);\n\n  useEffect(() => {\n    const mql = window.matchMedia(QUERY);\n    setPrefersReducedMotion(mql.matches);\n\n    const handler = (event: MediaQueryListEvent): void => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mql.addEventListener('change', handler);\n    return () => mql.removeEventListener('change', handler);\n  }, []);\n\n  return prefersReducedMotion;\n}\n"]}
+{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/hooks/useReducedMotion.ts","../../src/hooks/useContainerNarrow.ts"],"names":["useMediaQuery","query","subscribe","useCallback","callback","mql","getSnapshot","getServerSnapshot","useSyncExternalStore","QUERY","getInitialState","useReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","handler","event","useContainerNarrow","ref","breakpoint","narrow","setNarrow","el","measure","observer"],"mappings":"wCAcO,SAASA,CAAAA,CAAcC,CAAAA,CAAwB,CACpD,IAAMC,CAAAA,CAAYC,kBACfC,CAAAA,EAAyB,CACxB,IAAMC,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWJ,CAAK,CAAA,CACnC,OAAAI,CAAAA,CAAI,gBAAA,CAAiB,QAAA,CAAUD,CAAQ,EAChC,IAAMC,CAAAA,CAAI,mBAAA,CAAoB,QAAA,CAAUD,CAAQ,CACzD,EACA,CAACH,CAAK,CACR,CAAA,CAEMK,CAAAA,CAAcH,iBAAAA,CAClB,IAAM,MAAA,CAAO,UAAA,CAAWF,CAAK,CAAA,CAAE,OAAA,CAC/B,CAACA,CAAK,CACR,CAAA,CAEMM,CAAAA,CAAoBJ,iBAAAA,CAAY,IAAM,KAAA,CAAO,EAAE,CAAA,CAErD,OAAOK,0BAAAA,CAAqBN,CAAAA,CAAWI,EAAaC,CAAiB,CACvE,CC5BA,IAAME,CAAAA,CAAQ,kCAAA,CAEd,SAASC,GAA2B,CAClC,OAAI,OAAO,MAAA,CAAW,GAAA,CAAoB,KAAA,CACnC,OAAO,UAAA,CAAWD,CAAK,CAAA,CAAE,OAClC,CASO,SAASE,GAA4B,CAC1C,GAAM,CAACC,CAAAA,CAAsBC,CAAuB,CAAA,CAAIC,eAASJ,CAAe,CAAA,CAEhF,OAAAK,eAAAA,CAAU,IAAM,CACd,IAAMV,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWI,CAAK,CAAA,CACnCI,CAAAA,CAAwBR,EAAI,OAAO,CAAA,CAEnC,IAAMW,CAAAA,CAAWC,CAAAA,EAAqC,CACpDJ,CAAAA,CAAwBI,CAAAA,CAAM,OAAO,EACvC,CAAA,CAEA,OAAAZ,EAAI,gBAAA,CAAiB,QAAA,CAAUW,CAAO,CAAA,CAC/B,IAAMX,CAAAA,CAAI,oBAAoB,QAAA,CAAUW,CAAO,CACxD,CAAA,CAAG,EAAE,EAEEJ,CACT,CClBO,SAASM,CAAAA,CACdC,CAAAA,CACAC,CAAAA,CACS,CACT,GAAM,CAACC,CAAAA,CAAQC,CAAS,CAAA,CAAIR,cAAAA,CAAS,KAAK,EAE1C,OAAAC,eAAAA,CAAU,IAAM,CACd,IAAMQ,CAAAA,CAAKJ,EAAI,OAAA,CACf,GAAI,CAACI,CAAAA,CAAI,OAET,IAAMC,CAAAA,CAAU,IAAYF,CAAAA,CAAUC,CAAAA,CAAG,WAAA,CAAcH,CAAU,EACjEI,CAAAA,EAAQ,CAER,IAAIC,CAAAA,CACJ,OAAI,OAAO,eAAmB,GAAA,GAC5BA,CAAAA,CAAW,IAAI,cAAA,CAAeD,CAAO,CAAA,CACrCC,EAAS,OAAA,CAAQF,CAAE,CAAA,CAAA,CAErB,MAAA,CAAO,gBAAA,CAAiB,QAAA,CAAUC,CAAO,CAAA,CAClC,IAAM,CACX,MAAA,CAAO,mBAAA,CAAoB,QAAA,CAAUA,CAAO,CAAA,CAC5CC,CAAAA,EAAU,UAAA,GACZ,CACF,CAAA,CAAG,CAACN,CAAAA,CAAKC,CAAU,CAAC,CAAA,CAEbC,CACT","file":"index.js","sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/**\n * SSR-safe media query hook using useSyncExternalStore.\n *\n * - No hydration mismatch flicker (getServerSnapshot returns false)\n * - Listener registered once per query value (no dependency bugs)\n * - Reacts to changes in real time\n *\n * @param query - CSS media query string, e.g. '(max-width: 767px)'\n * @returns Whether the media query currently matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener('change', callback);\n      return () => mql.removeEventListener('change', callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  const getServerSnapshot = useCallback(() => false, []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","'use client';\n\nimport { useState, useEffect } from 'react';\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\nfunction getInitialState(): boolean {\n  if (typeof window === 'undefined') return false;\n  return window.matchMedia(QUERY).matches;\n}\n\n/**\n * Detects whether the user prefers reduced motion.\n *\n * - SSR-safe (returns `false` on the server)\n * - Reacts to changes in the OS preference\n * - Cleans up the listener on unmount\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);\n\n  useEffect(() => {\n    const mql = window.matchMedia(QUERY);\n    setPrefersReducedMotion(mql.matches);\n\n    const handler = (event: MediaQueryListEvent): void => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mql.addEventListener('change', handler);\n    return () => mql.removeEventListener('change', handler);\n  }, []);\n\n  return prefersReducedMotion;\n}\n","'use client';\n\nimport { useEffect, useState, type RefObject } from 'react';\n\n/**\n * Track whether a referenced element is narrower than `breakpoint` (px), via a\n * `ResizeObserver`. This is a **container query**, not a viewport query — a table\n * inside a narrow panel reflows to cards even on a wide screen.\n *\n * Uses `offsetWidth` (ignores CSS transforms, e.g. zoom/preview scaling).\n *\n * @example\n * const ref = useRef<HTMLDivElement>(null);\n * const narrow = useContainerNarrow(ref, 680);\n * return <div ref={ref}>{narrow ? <TableCardList .../> : <Table .../>}</div>;\n */\nexport function useContainerNarrow(\n  ref: RefObject<HTMLElement | null>,\n  breakpoint: number\n): boolean {\n  const [narrow, setNarrow] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const measure = (): void => setNarrow(el.offsetWidth < breakpoint);\n    measure(); // initial — covers an already-narrow mount\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      observer = new ResizeObserver(measure);\n      observer.observe(el);\n    }\n    window.addEventListener('resize', measure);\n    return () => {\n      window.removeEventListener('resize', measure);\n      observer?.disconnect();\n    };\n  }, [ref, breakpoint]);\n\n  return narrow;\n}\n"]}

package/dist/hooks/index.mjs

@@ -1,2 +1,2 @@
-import {useCallback,useSyncExternalStore,useState,useEffect}from'react';function d(e){let n=useCallback(r=>{let i=window.matchMedia(e);return i.addEventListener("change",r),()=>i.removeEventListener("change",r)},[e]),t=useCallback(()=>window.matchMedia(e).matches,[e]),o=useCallback(()=>false,[]);return useSyncExternalStore(n,t,o)}var a="(prefers-reduced-motion: reduce)";function f(){return typeof window>"u"?false:window.matchMedia(a).matches}function h(){let[e,n]=useState(f);return useEffect(()=>{let t=window.matchMedia(a);n(t.matches);let o=r=>{n(r.matches);};return t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[]),e}export{d as useMediaQuery,h as useReducedMotion};//# sourceMappingURL=index.mjs.map
+import {useCallback,useSyncExternalStore,useState,useEffect}from'react';function u(e){let n=useCallback(t=>{let o=window.matchMedia(e);return o.addEventListener("change",t),()=>o.removeEventListener("change",t)},[e]),r=useCallback(()=>window.matchMedia(e).matches,[e]),s=useCallback(()=>false,[]);return useSyncExternalStore(n,r,s)}var a="(prefers-reduced-motion: reduce)";function l(){return typeof window>"u"?false:window.matchMedia(a).matches}function v(){let[e,n]=useState(l);return useEffect(()=>{let r=window.matchMedia(a);n(r.matches);let s=t=>{n(t.matches);};return r.addEventListener("change",s),()=>r.removeEventListener("change",s)},[]),e}function p(e,n){let[r,s]=useState(false);return useEffect(()=>{let t=e.current;if(!t)return;let o=()=>s(t.offsetWidth<n);o();let i;return typeof ResizeObserver<"u"&&(i=new ResizeObserver(o),i.observe(t)),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o),i?.disconnect();}},[e,n]),r}export{p as useContainerNarrow,u as useMediaQuery,v as useReducedMotion};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/hooks/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/hooks/useReducedMotion.ts"],"names":["useMediaQuery","query","subscribe","useCallback","callback","mql","getSnapshot","getServerSnapshot","useSyncExternalStore","QUERY","getInitialState","useReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","handler","event"],"mappings":"wEAcO,SAASA,CAAAA,CAAcC,CAAAA,CAAwB,CACpD,IAAMC,CAAAA,CAAYC,WAAAA,CACfC,GAAyB,CACxB,IAAMC,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWJ,CAAK,CAAA,CACnC,OAAAI,EAAI,gBAAA,CAAiB,QAAA,CAAUD,CAAQ,CAAA,CAChC,IAAMC,CAAAA,CAAI,mBAAA,CAAoB,QAAA,CAAUD,CAAQ,CACzD,CAAA,CACA,CAACH,CAAK,CACR,CAAA,CAEMK,CAAAA,CAAcH,WAAAA,CAClB,IAAM,MAAA,CAAO,UAAA,CAAWF,CAAK,CAAA,CAAE,OAAA,CAC/B,CAACA,CAAK,CACR,CAAA,CAEMM,CAAAA,CAAoBJ,WAAAA,CAAY,IAAM,KAAA,CAAO,EAAE,CAAA,CAErD,OAAOK,oBAAAA,CAAqBN,CAAAA,CAAWI,CAAAA,CAAaC,CAAiB,CACvE,CC5BA,IAAME,CAAAA,CAAQ,kCAAA,CAEd,SAASC,CAAAA,EAA2B,CAClC,OAAI,OAAO,MAAA,CAAW,GAAA,CAAoB,KAAA,CACnC,MAAA,CAAO,UAAA,CAAWD,CAAK,CAAA,CAAE,OAClC,CASO,SAASE,CAAAA,EAA4B,CAC1C,GAAM,CAACC,EAAsBC,CAAuB,CAAA,CAAIC,QAAAA,CAASJ,CAAe,CAAA,CAEhF,OAAAK,SAAAA,CAAU,IAAM,CACd,IAAMV,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWI,CAAK,CAAA,CACnCI,CAAAA,CAAwBR,CAAAA,CAAI,OAAO,CAAA,CAEnC,IAAMW,CAAAA,CAAWC,CAAAA,EAAqC,CACpDJ,CAAAA,CAAwBI,CAAAA,CAAM,OAAO,EACvC,CAAA,CAEA,OAAAZ,CAAAA,CAAI,gBAAA,CAAiB,QAAA,CAAUW,CAAO,CAAA,CAC/B,IAAMX,CAAAA,CAAI,mBAAA,CAAoB,QAAA,CAAUW,CAAO,CACxD,CAAA,CAAG,EAAE,EAEEJ,CACT","file":"index.mjs","sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/**\n * SSR-safe media query hook using useSyncExternalStore.\n *\n * - No hydration mismatch flicker (getServerSnapshot returns false)\n * - Listener registered once per query value (no dependency bugs)\n * - Reacts to changes in real time\n *\n * @param query - CSS media query string, e.g. '(max-width: 767px)'\n * @returns Whether the media query currently matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener('change', callback);\n      return () => mql.removeEventListener('change', callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  const getServerSnapshot = useCallback(() => false, []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","'use client';\n\nimport { useState, useEffect } from 'react';\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\nfunction getInitialState(): boolean {\n  if (typeof window === 'undefined') return false;\n  return window.matchMedia(QUERY).matches;\n}\n\n/**\n * Detects whether the user prefers reduced motion.\n *\n * - SSR-safe (returns `false` on the server)\n * - Reacts to changes in the OS preference\n * - Cleans up the listener on unmount\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);\n\n  useEffect(() => {\n    const mql = window.matchMedia(QUERY);\n    setPrefersReducedMotion(mql.matches);\n\n    const handler = (event: MediaQueryListEvent): void => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mql.addEventListener('change', handler);\n    return () => mql.removeEventListener('change', handler);\n  }, []);\n\n  return prefersReducedMotion;\n}\n"]}
+{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/hooks/useReducedMotion.ts","../../src/hooks/useContainerNarrow.ts"],"names":["useMediaQuery","query","subscribe","useCallback","callback","mql","getSnapshot","getServerSnapshot","useSyncExternalStore","QUERY","getInitialState","useReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","handler","event","useContainerNarrow","ref","breakpoint","narrow","setNarrow","el","measure","observer"],"mappings":"wEAcO,SAASA,CAAAA,CAAcC,CAAAA,CAAwB,CACpD,IAAMC,CAAAA,CAAYC,YACfC,CAAAA,EAAyB,CACxB,IAAMC,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWJ,CAAK,CAAA,CACnC,OAAAI,CAAAA,CAAI,gBAAA,CAAiB,QAAA,CAAUD,CAAQ,EAChC,IAAMC,CAAAA,CAAI,mBAAA,CAAoB,QAAA,CAAUD,CAAQ,CACzD,EACA,CAACH,CAAK,CACR,CAAA,CAEMK,CAAAA,CAAcH,WAAAA,CAClB,IAAM,MAAA,CAAO,UAAA,CAAWF,CAAK,CAAA,CAAE,OAAA,CAC/B,CAACA,CAAK,CACR,CAAA,CAEMM,CAAAA,CAAoBJ,WAAAA,CAAY,IAAM,KAAA,CAAO,EAAE,CAAA,CAErD,OAAOK,oBAAAA,CAAqBN,CAAAA,CAAWI,EAAaC,CAAiB,CACvE,CC5BA,IAAME,CAAAA,CAAQ,kCAAA,CAEd,SAASC,GAA2B,CAClC,OAAI,OAAO,MAAA,CAAW,GAAA,CAAoB,KAAA,CACnC,OAAO,UAAA,CAAWD,CAAK,CAAA,CAAE,OAClC,CASO,SAASE,GAA4B,CAC1C,GAAM,CAACC,CAAAA,CAAsBC,CAAuB,CAAA,CAAIC,SAASJ,CAAe,CAAA,CAEhF,OAAAK,SAAAA,CAAU,IAAM,CACd,IAAMV,CAAAA,CAAM,MAAA,CAAO,UAAA,CAAWI,CAAK,CAAA,CACnCI,CAAAA,CAAwBR,EAAI,OAAO,CAAA,CAEnC,IAAMW,CAAAA,CAAWC,CAAAA,EAAqC,CACpDJ,CAAAA,CAAwBI,CAAAA,CAAM,OAAO,EACvC,CAAA,CAEA,OAAAZ,EAAI,gBAAA,CAAiB,QAAA,CAAUW,CAAO,CAAA,CAC/B,IAAMX,CAAAA,CAAI,oBAAoB,QAAA,CAAUW,CAAO,CACxD,CAAA,CAAG,EAAE,EAEEJ,CACT,CClBO,SAASM,CAAAA,CACdC,CAAAA,CACAC,CAAAA,CACS,CACT,GAAM,CAACC,CAAAA,CAAQC,CAAS,CAAA,CAAIR,QAAAA,CAAS,KAAK,EAE1C,OAAAC,SAAAA,CAAU,IAAM,CACd,IAAMQ,CAAAA,CAAKJ,EAAI,OAAA,CACf,GAAI,CAACI,CAAAA,CAAI,OAET,IAAMC,CAAAA,CAAU,IAAYF,CAAAA,CAAUC,CAAAA,CAAG,WAAA,CAAcH,CAAU,EACjEI,CAAAA,EAAQ,CAER,IAAIC,CAAAA,CACJ,OAAI,OAAO,eAAmB,GAAA,GAC5BA,CAAAA,CAAW,IAAI,cAAA,CAAeD,CAAO,CAAA,CACrCC,EAAS,OAAA,CAAQF,CAAE,CAAA,CAAA,CAErB,MAAA,CAAO,gBAAA,CAAiB,QAAA,CAAUC,CAAO,CAAA,CAClC,IAAM,CACX,MAAA,CAAO,mBAAA,CAAoB,QAAA,CAAUA,CAAO,CAAA,CAC5CC,CAAAA,EAAU,UAAA,GACZ,CACF,CAAA,CAAG,CAACN,CAAAA,CAAKC,CAAU,CAAC,CAAA,CAEbC,CACT","file":"index.mjs","sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/**\n * SSR-safe media query hook using useSyncExternalStore.\n *\n * - No hydration mismatch flicker (getServerSnapshot returns false)\n * - Listener registered once per query value (no dependency bugs)\n * - Reacts to changes in real time\n *\n * @param query - CSS media query string, e.g. '(max-width: 767px)'\n * @returns Whether the media query currently matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      const mql = window.matchMedia(query);\n      mql.addEventListener('change', callback);\n      return () => mql.removeEventListener('change', callback);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(\n    () => window.matchMedia(query).matches,\n    [query],\n  );\n\n  const getServerSnapshot = useCallback(() => false, []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","'use client';\n\nimport { useState, useEffect } from 'react';\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\nfunction getInitialState(): boolean {\n  if (typeof window === 'undefined') return false;\n  return window.matchMedia(QUERY).matches;\n}\n\n/**\n * Detects whether the user prefers reduced motion.\n *\n * - SSR-safe (returns `false` on the server)\n * - Reacts to changes in the OS preference\n * - Cleans up the listener on unmount\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);\n\n  useEffect(() => {\n    const mql = window.matchMedia(QUERY);\n    setPrefersReducedMotion(mql.matches);\n\n    const handler = (event: MediaQueryListEvent): void => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mql.addEventListener('change', handler);\n    return () => mql.removeEventListener('change', handler);\n  }, []);\n\n  return prefersReducedMotion;\n}\n","'use client';\n\nimport { useEffect, useState, type RefObject } from 'react';\n\n/**\n * Track whether a referenced element is narrower than `breakpoint` (px), via a\n * `ResizeObserver`. This is a **container query**, not a viewport query — a table\n * inside a narrow panel reflows to cards even on a wide screen.\n *\n * Uses `offsetWidth` (ignores CSS transforms, e.g. zoom/preview scaling).\n *\n * @example\n * const ref = useRef<HTMLDivElement>(null);\n * const narrow = useContainerNarrow(ref, 680);\n * return <div ref={ref}>{narrow ? <TableCardList .../> : <Table .../>}</div>;\n */\nexport function useContainerNarrow(\n  ref: RefObject<HTMLElement | null>,\n  breakpoint: number\n): boolean {\n  const [narrow, setNarrow] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const measure = (): void => setNarrow(el.offsetWidth < breakpoint);\n    measure(); // initial — covers an already-narrow mount\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      observer = new ResizeObserver(measure);\n      observer.observe(el);\n    }\n    window.addEventListener('resize', measure);\n    return () => {\n      window.removeEventListener('resize', measure);\n      observer?.disconnect();\n    };\n  }, [ref, breakpoint]);\n\n  return narrow;\n}\n"]}

package/dist/hooks/useContainerNarrow.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+/**
+ * Track whether a referenced element is narrower than `breakpoint` (px), via a
+ * `ResizeObserver`. This is a **container query**, not a viewport query — a table
+ * inside a narrow panel reflows to cards even on a wide screen.
+ *
+ * Uses `offsetWidth` (ignores CSS transforms, e.g. zoom/preview scaling).
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ * const narrow = useContainerNarrow(ref, 680);
+ * return <div ref={ref}>{narrow ? <TableCardList .../> : <Table .../>}</div>;
+ */
+export declare function useContainerNarrow(ref: RefObject<HTMLElement | null>, breakpoint: number): boolean;
+//# sourceMappingURL=useContainerNarrow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerNarrow.d.ts","sourceRoot":"","sources":["../../src/hooks/useContainerNarrow.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,UAAU,EAAE,MAAM,GACjB,OAAO,CAuBT"}