@tribepad/themis 1.0.19 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/Sidebar/Sidebar.styles.d.ts +41 -0
- package/dist/elements/Sidebar/Sidebar.styles.d.ts.map +1 -0
- package/dist/elements/Sidebar/Sidebar.types.d.ts +224 -0
- package/dist/elements/Sidebar/Sidebar.types.d.ts.map +1 -0
- package/dist/elements/Sidebar/SidebarCompound.d.ts +39 -0
- package/dist/elements/Sidebar/SidebarCompound.d.ts.map +1 -0
- package/dist/elements/Sidebar/SidebarMobileDrawer.d.ts +7 -0
- package/dist/elements/Sidebar/SidebarMobileDrawer.d.ts.map +1 -0
- package/dist/elements/Sidebar/SidebarPanel.d.ts +21 -0
- package/dist/elements/Sidebar/SidebarPanel.d.ts.map +1 -0
- package/dist/elements/Sidebar/SidebarPopover.d.ts +13 -0
- package/dist/elements/Sidebar/SidebarPopover.d.ts.map +1 -0
- package/dist/elements/Sidebar/SidebarRail.d.ts +10 -0
- package/dist/elements/Sidebar/SidebarRail.d.ts.map +1 -0
- package/dist/elements/Sidebar/SidebarRoot.d.ts +24 -0
- package/dist/elements/Sidebar/SidebarRoot.d.ts.map +1 -0
- package/dist/elements/Sidebar/index.d.ts +5 -0
- package/dist/elements/Sidebar/index.d.ts.map +1 -0
- package/dist/elements/Sidebar/index.js +3 -0
- package/dist/elements/Sidebar/index.js.map +1 -0
- package/dist/elements/Sidebar/index.mjs +3 -0
- package/dist/elements/Sidebar/index.mjs.map +1 -0
- package/dist/elements/index.d.ts +4 -0
- package/dist/elements/index.d.ts.map +1 -1
- package/dist/elements/index.js +1 -1
- package/dist/elements/index.js.map +1 -1
- package/dist/elements/index.mjs +1 -1
- package/dist/elements/index.mjs.map +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/index.mjs +1 -1
- package/dist/hooks/index.mjs.map +1 -1
- package/dist/hooks/useMediaQuery.d.ts +12 -0
- package/dist/hooks/useMediaQuery.d.ts.map +1 -0
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -1
- package/src/elements/Sidebar/Sidebar.stories.tsx +514 -0
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
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"}
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var react=require('react');
|
|
1
|
+
'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
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useReducedMotion.ts"],"names":["QUERY","getInitialState","useReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","
|
|
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"]}
|
package/dist/hooks/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {useState,useEffect}from'react';
|
|
1
|
+
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
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/hooks/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useReducedMotion.ts"],"names":["QUERY","getInitialState","useReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","
|
|
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"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* SSR-safe media query hook using useSyncExternalStore.
|
|
3
|
+
*
|
|
4
|
+
* - No hydration mismatch flicker (getServerSnapshot returns false)
|
|
5
|
+
* - Listener registered once per query value (no dependency bugs)
|
|
6
|
+
* - Reacts to changes in real time
|
|
7
|
+
*
|
|
8
|
+
* @param query - CSS media query string, e.g. '(max-width: 767px)'
|
|
9
|
+
* @returns Whether the media query currently matches
|
|
10
|
+
*/
|
|
11
|
+
export declare function useMediaQuery(query: string): boolean;
|
|
12
|
+
//# sourceMappingURL=useMediaQuery.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAkBpD"}
|