panelui-native 0.5.1 → 0.6.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/README.md +10 -5
- package/lib/module/components/scroll-fade/index.js +156 -0
- package/lib/module/components/scroll-fade/index.js.map +1 -0
- package/lib/module/components/shimmer/index.js +120 -0
- package/lib/module/components/shimmer/index.js.map +1 -0
- package/lib/module/components/surface/index.js +64 -0
- package/lib/module/components/surface/index.js.map +1 -0
- package/lib/module/components/timeline/index.js +55 -30
- package/lib/module/components/timeline/index.js.map +1 -1
- package/lib/module/hooks/index.js +9 -0
- package/lib/module/hooks/index.js.map +1 -0
- package/lib/module/hooks/use-breakpoint.js +39 -0
- package/lib/module/hooks/use-breakpoint.js.map +1 -0
- package/lib/module/hooks/use-copy-to-clipboard.js +62 -0
- package/lib/module/hooks/use-copy-to-clipboard.js.map +1 -0
- package/lib/module/hooks/use-debounced-value.js +24 -0
- package/lib/module/hooks/use-debounced-value.js.map +1 -0
- package/lib/module/hooks/use-disclosure.js +43 -0
- package/lib/module/hooks/use-disclosure.js.map +1 -0
- package/lib/module/hooks/use-keyboard.js +36 -0
- package/lib/module/hooks/use-keyboard.js.map +1 -0
- package/lib/module/hooks/use-previous.js +25 -0
- package/lib/module/hooks/use-previous.js.map +1 -0
- package/lib/module/index.js +6 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/components/scroll-fade/index.d.ts +38 -0
- package/lib/typescript/src/components/scroll-fade/index.d.ts.map +1 -0
- package/lib/typescript/src/components/shimmer/index.d.ts +42 -0
- package/lib/typescript/src/components/shimmer/index.d.ts.map +1 -0
- package/lib/typescript/src/components/surface/index.d.ts +30 -0
- package/lib/typescript/src/components/surface/index.d.ts.map +1 -0
- package/lib/typescript/src/components/timeline/index.d.ts.map +1 -1
- package/lib/typescript/src/hooks/index.d.ts +7 -0
- package/lib/typescript/src/hooks/index.d.ts.map +1 -0
- package/lib/typescript/src/hooks/use-breakpoint.d.ts +32 -0
- package/lib/typescript/src/hooks/use-breakpoint.d.ts.map +1 -0
- package/lib/typescript/src/hooks/use-copy-to-clipboard.d.ts +30 -0
- package/lib/typescript/src/hooks/use-copy-to-clipboard.d.ts.map +1 -0
- package/lib/typescript/src/hooks/use-debounced-value.d.ts +13 -0
- package/lib/typescript/src/hooks/use-debounced-value.d.ts.map +1 -0
- package/lib/typescript/src/hooks/use-disclosure.d.ts +32 -0
- package/lib/typescript/src/hooks/use-disclosure.d.ts.map +1 -0
- package/lib/typescript/src/hooks/use-keyboard.d.ts +20 -0
- package/lib/typescript/src/hooks/use-keyboard.d.ts.map +1 -0
- package/lib/typescript/src/hooks/use-previous.d.ts +15 -0
- package/lib/typescript/src/hooks/use-previous.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +4 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +8 -1
- package/src/components/scroll-fade/index.tsx +168 -0
- package/src/components/shimmer/index.tsx +135 -0
- package/src/components/surface/index.tsx +63 -0
- package/src/components/timeline/index.tsx +64 -38
- package/src/hooks/index.ts +19 -0
- package/src/hooks/use-breakpoint.ts +52 -0
- package/src/hooks/use-copy-to-clipboard.ts +81 -0
- package/src/hooks/use-debounced-value.ts +23 -0
- package/src/hooks/use-disclosure.ts +57 -0
- package/src/hooks/use-keyboard.ts +43 -0
- package/src/hooks/use-previous.ts +24 -0
- package/src/index.ts +9 -0
- package/theme.css +18 -0
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useWindowDimensions } from 'react-native';
|
|
4
|
+
|
|
5
|
+
/** Tailwind's breakpoints, minus the ones no phone or tablet reaches. */
|
|
6
|
+
export const BREAKPOINTS = {
|
|
7
|
+
sm: 640,
|
|
8
|
+
md: 768,
|
|
9
|
+
lg: 1024,
|
|
10
|
+
xl: 1280
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Responsive state from the window size — the React Native answer to
|
|
14
|
+
* coss.com/ui's `useMediaQuery`, which has no equivalent here.
|
|
15
|
+
*
|
|
16
|
+
* For styling, prefer Uniwind's responsive class prefixes (`md:flex-row`).
|
|
17
|
+
* Reach for this when the *behaviour* changes, not just the look — rendering
|
|
18
|
+
* a sheet on a phone and a dialog on a tablet, say.
|
|
19
|
+
*
|
|
20
|
+
* ```tsx
|
|
21
|
+
* const { isAtLeast } = useBreakpoint();
|
|
22
|
+
* return isAtLeast('md') ? <Dialog …/> : <BottomSheet …/>;
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export function useBreakpoint() {
|
|
26
|
+
const {
|
|
27
|
+
width,
|
|
28
|
+
height
|
|
29
|
+
} = useWindowDimensions();
|
|
30
|
+
const current = width >= BREAKPOINTS.xl ? 'xl' : width >= BREAKPOINTS.lg ? 'lg' : width >= BREAKPOINTS.md ? 'md' : width >= BREAKPOINTS.sm ? 'sm' : 'base';
|
|
31
|
+
return {
|
|
32
|
+
current,
|
|
33
|
+
isAtLeast: breakpoint => width >= BREAKPOINTS[breakpoint],
|
|
34
|
+
width,
|
|
35
|
+
height,
|
|
36
|
+
isLandscape: width > height
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=use-breakpoint.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useWindowDimensions","BREAKPOINTS","sm","md","lg","xl","useBreakpoint","width","height","current","isAtLeast","breakpoint","isLandscape"],"sourceRoot":"../../../src","sources":["hooks/use-breakpoint.ts"],"mappings":";;AAAA,SAASA,mBAAmB,QAAQ,cAAc;;AAElD;AACA,OAAO,MAAMC,WAAW,GAAG;EAAEC,EAAE,EAAE,GAAG;EAAEC,EAAE,EAAE,GAAG;EAAEC,EAAE,EAAE,IAAI;EAAEC,EAAE,EAAE;AAAK,CAAU;AAc5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAA,EAAwB;EACnD,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGR,mBAAmB,CAAC,CAAC;EAE/C,MAAMS,OAA4B,GAChCF,KAAK,IAAIN,WAAW,CAACI,EAAE,GACnB,IAAI,GACJE,KAAK,IAAIN,WAAW,CAACG,EAAE,GACrB,IAAI,GACJG,KAAK,IAAIN,WAAW,CAACE,EAAE,GACrB,IAAI,GACJI,KAAK,IAAIN,WAAW,CAACC,EAAE,GACrB,IAAI,GACJ,MAAM;EAElB,OAAO;IACLO,OAAO;IACPC,SAAS,EAAGC,UAAU,IAAKJ,KAAK,IAAIN,WAAW,CAACU,UAAU,CAAC;IAC3DJ,KAAK;IACLC,MAAM;IACNI,WAAW,EAAEL,KAAK,GAAGC;EACvB,CAAC;AACH","ignoreList":[]}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Copy text to the clipboard, with a temporary "copied" state.
|
|
6
|
+
*
|
|
7
|
+
* Mirrors coss.com/ui's `useCopyToClipboard`.
|
|
8
|
+
*
|
|
9
|
+
* Requires `expo-clipboard`, which is an optional peer dependency — React
|
|
10
|
+
* Native removed `Clipboard` from core, and pulling in a required native
|
|
11
|
+
* module for one hook would cost every consumer who never calls it:
|
|
12
|
+
*
|
|
13
|
+
* ```sh
|
|
14
|
+
* npx expo install expo-clipboard
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* ```tsx
|
|
18
|
+
* const { copy, copied } = useCopyToClipboard();
|
|
19
|
+
* <Button onPress={() => copy(url)}>{copied ? 'Copied' : 'Copy link'}</Button>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export function useCopyToClipboard({
|
|
23
|
+
timeout = 2000,
|
|
24
|
+
onCopy
|
|
25
|
+
} = {}) {
|
|
26
|
+
const [copied, setCopied] = useState(false);
|
|
27
|
+
const timer = useRef(null);
|
|
28
|
+
|
|
29
|
+
// Never leave a timer running against an unmounted component.
|
|
30
|
+
useEffect(() => () => {
|
|
31
|
+
if (timer.current) clearTimeout(timer.current);
|
|
32
|
+
}, []);
|
|
33
|
+
const copy = useCallback(async value => {
|
|
34
|
+
const setString = await loadClipboard();
|
|
35
|
+
await setString(value);
|
|
36
|
+
setCopied(true);
|
|
37
|
+
onCopy?.();
|
|
38
|
+
if (timer.current) clearTimeout(timer.current);
|
|
39
|
+
if (timeout > 0) {
|
|
40
|
+
timer.current = setTimeout(() => setCopied(false), timeout);
|
|
41
|
+
}
|
|
42
|
+
}, [timeout, onCopy]);
|
|
43
|
+
return {
|
|
44
|
+
copy,
|
|
45
|
+
copied
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Resolves expo-clipboard lazily, so apps that never call this hook are not
|
|
51
|
+
* asked to install it. The import is awaited rather than top-level for the
|
|
52
|
+
* same reason.
|
|
53
|
+
*/
|
|
54
|
+
async function loadClipboard() {
|
|
55
|
+
try {
|
|
56
|
+
const clipboard = await import('expo-clipboard');
|
|
57
|
+
return clipboard.setStringAsync;
|
|
58
|
+
} catch {
|
|
59
|
+
throw new Error('useCopyToClipboard requires expo-clipboard. Install it with: npx expo install expo-clipboard');
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
//# sourceMappingURL=use-copy-to-clipboard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useRef","useState","useCopyToClipboard","timeout","onCopy","copied","setCopied","timer","current","clearTimeout","copy","value","setString","loadClipboard","setTimeout","clipboard","setStringAsync","Error"],"sourceRoot":"../../../src","sources":["hooks/use-copy-to-clipboard.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAchE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,OAAO,GAAG,IAAI;EACdC;AACyB,CAAC,GAAG,CAAC,CAAC,EAA4B;EAC3D,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAMM,KAAK,GAAGP,MAAM,CAAuC,IAAI,CAAC;;EAEhE;EACAD,SAAS,CACP,MAAM,MAAM;IACV,IAAIQ,KAAK,CAACC,OAAO,EAAEC,YAAY,CAACF,KAAK,CAACC,OAAO,CAAC;EAChD,CAAC,EACD,EACF,CAAC;EAED,MAAME,IAAI,GAAGZ,WAAW,CACtB,MAAOa,KAAa,IAAK;IACvB,MAAMC,SAAS,GAAG,MAAMC,aAAa,CAAC,CAAC;IACvC,MAAMD,SAAS,CAACD,KAAK,CAAC;IAEtBL,SAAS,CAAC,IAAI,CAAC;IACfF,MAAM,GAAG,CAAC;IAEV,IAAIG,KAAK,CAACC,OAAO,EAAEC,YAAY,CAACF,KAAK,CAACC,OAAO,CAAC;IAC9C,IAAIL,OAAO,GAAG,CAAC,EAAE;MACfI,KAAK,CAACC,OAAO,GAAGM,UAAU,CAAC,MAAMR,SAAS,CAAC,KAAK,CAAC,EAAEH,OAAO,CAAC;IAC7D;EACF,CAAC,EACD,CAACA,OAAO,EAAEC,MAAM,CAClB,CAAC;EAED,OAAO;IAAEM,IAAI;IAAEL;EAAO,CAAC;AACzB;;AAEA;AACA;AACA;AACA;AACA;AACA,eAAeQ,aAAaA,CAAA,EAAiD;EAC3E,IAAI;IACF,MAAME,SAAS,GAAG,MAAM,MAAM,CAAC,gBAAgB,CAAC;IAChD,OAAOA,SAAS,CAACC,cAAc;EACjC,CAAC,CAAC,MAAM;IACN,MAAM,IAAIC,KAAK,CACb,8FACF,CAAC;EACH;AACF","ignoreList":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A copy of `value` that only updates once it has stopped changing for
|
|
7
|
+
* `delay` ms — for search fields, where you want the typed value on screen
|
|
8
|
+
* immediately but the query fired once.
|
|
9
|
+
*
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const [query, setQuery] = useState('');
|
|
12
|
+
* const debounced = useDebouncedValue(query, 300);
|
|
13
|
+
* useEffect(() => { search(debounced); }, [debounced]);
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export function useDebouncedValue(value, delay = 300) {
|
|
17
|
+
const [debounced, setDebounced] = useState(value);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
const timer = setTimeout(() => setDebounced(value), delay);
|
|
20
|
+
return () => clearTimeout(timer);
|
|
21
|
+
}, [value, delay]);
|
|
22
|
+
return debounced;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=use-debounced-value.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useState","useDebouncedValue","value","delay","debounced","setDebounced","timer","setTimeout","clearTimeout"],"sourceRoot":"../../../src","sources":["hooks/use-debounced-value.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAIC,KAAQ,EAAEC,KAAK,GAAG,GAAG,EAAK;EAC7D,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGL,QAAQ,CAACE,KAAK,CAAC;EAEjDH,SAAS,CAAC,MAAM;IACd,MAAMO,KAAK,GAAGC,UAAU,CAAC,MAAMF,YAAY,CAACH,KAAK,CAAC,EAAEC,KAAK,CAAC;IAC1D,OAAO,MAAMK,YAAY,CAACF,KAAK,CAAC;EAClC,CAAC,EAAE,CAACJ,KAAK,EAAEC,KAAK,CAAC,CAAC;EAElB,OAAOC,SAAS;AAClB","ignoreList":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Open/closed state for an overlay.
|
|
6
|
+
*
|
|
7
|
+
* The same controlled-or-uncontrolled pattern Dialog, BottomSheet and Select
|
|
8
|
+
* implement internally, lifted out for when you need to drive one from
|
|
9
|
+
* elsewhere — closing a sheet after a request settles, say.
|
|
10
|
+
*
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const sheet = useDisclosure();
|
|
13
|
+
* <Button onPress={sheet.open}>Share</Button>
|
|
14
|
+
* <BottomSheet {...sheet.props}>…</BottomSheet>
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export function useDisclosure({
|
|
18
|
+
defaultOpen = false,
|
|
19
|
+
open: controlledOpen,
|
|
20
|
+
onOpenChange
|
|
21
|
+
} = {}) {
|
|
22
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
|
23
|
+
const isControlled = controlledOpen !== undefined;
|
|
24
|
+
const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
|
|
25
|
+
const setOpen = useCallback(next => {
|
|
26
|
+
if (!isControlled) setUncontrolledOpen(next);
|
|
27
|
+
onOpenChange?.(next);
|
|
28
|
+
}, [isControlled, onOpenChange]);
|
|
29
|
+
const open = useCallback(() => setOpen(true), [setOpen]);
|
|
30
|
+
const close = useCallback(() => setOpen(false), [setOpen]);
|
|
31
|
+
const toggle = useCallback(() => setOpen(!isOpen), [setOpen, isOpen]);
|
|
32
|
+
return useMemo(() => ({
|
|
33
|
+
isOpen,
|
|
34
|
+
open,
|
|
35
|
+
close,
|
|
36
|
+
toggle,
|
|
37
|
+
props: {
|
|
38
|
+
open: isOpen,
|
|
39
|
+
onOpenChange: setOpen
|
|
40
|
+
}
|
|
41
|
+
}), [isOpen, open, close, toggle, setOpen]);
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=use-disclosure.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useMemo","useState","useDisclosure","defaultOpen","open","controlledOpen","onOpenChange","uncontrolledOpen","setUncontrolledOpen","isControlled","undefined","isOpen","setOpen","next","close","toggle","props"],"sourceRoot":"../../../src","sources":["hooks/use-disclosure.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAkBtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAC;EAC5BC,WAAW,GAAG,KAAK;EACnBC,IAAI,EAAEC,cAAc;EACpBC;AACoB,CAAC,GAAG,CAAC,CAAC,EAAuB;EACjD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGP,QAAQ,CAACE,WAAW,CAAC;EACrE,MAAMM,YAAY,GAAGJ,cAAc,KAAKK,SAAS;EACjD,MAAMC,MAAM,GAAGF,YAAY,GAAGJ,cAAc,GAAGE,gBAAgB;EAE/D,MAAMK,OAAO,GAAGb,WAAW,CACxBc,IAAa,IAAK;IACjB,IAAI,CAACJ,YAAY,EAAED,mBAAmB,CAACK,IAAI,CAAC;IAC5CP,YAAY,GAAGO,IAAI,CAAC;EACtB,CAAC,EACD,CAACJ,YAAY,EAAEH,YAAY,CAC7B,CAAC;EAED,MAAMF,IAAI,GAAGL,WAAW,CAAC,MAAMa,OAAO,CAAC,IAAI,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACxD,MAAME,KAAK,GAAGf,WAAW,CAAC,MAAMa,OAAO,CAAC,KAAK,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAC1D,MAAMG,MAAM,GAAGhB,WAAW,CAAC,MAAMa,OAAO,CAAC,CAACD,MAAM,CAAC,EAAE,CAACC,OAAO,EAAED,MAAM,CAAC,CAAC;EAErE,OAAOX,OAAO,CACZ,OAAO;IAAEW,MAAM;IAAEP,IAAI;IAAEU,KAAK;IAAEC,MAAM;IAAEC,KAAK,EAAE;MAAEZ,IAAI,EAAEO,MAAM;MAAEL,YAAY,EAAEM;IAAQ;EAAE,CAAC,CAAC,EACvF,CAACD,MAAM,EAAEP,IAAI,EAAEU,KAAK,EAAEC,MAAM,EAAEH,OAAO,CACvC,CAAC;AACH","ignoreList":[]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { Keyboard, Platform } from 'react-native';
|
|
5
|
+
/**
|
|
6
|
+
* Keyboard height and visibility, on the JS thread.
|
|
7
|
+
*
|
|
8
|
+
* Use this when the value drives rendering — showing a hint, swapping a
|
|
9
|
+
* layout. For *animating* against the keyboard, use Reanimated's
|
|
10
|
+
* `useAnimatedKeyboard` instead: it runs on the UI thread and tracks the
|
|
11
|
+
* keyboard frame-for-frame, where this fires once per show/hide.
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* const { isVisible } = useKeyboard();
|
|
15
|
+
* {isVisible ? null : <Footer />}
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export function useKeyboard() {
|
|
19
|
+
const [height, setHeight] = useState(0);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
// iOS reports the frame before it animates; Android only on completion.
|
|
22
|
+
const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
|
|
23
|
+
const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
|
|
24
|
+
const show = Keyboard.addListener(showEvent, event => setHeight(event.endCoordinates.height));
|
|
25
|
+
const hide = Keyboard.addListener(hideEvent, () => setHeight(0));
|
|
26
|
+
return () => {
|
|
27
|
+
show.remove();
|
|
28
|
+
hide.remove();
|
|
29
|
+
};
|
|
30
|
+
}, []);
|
|
31
|
+
return {
|
|
32
|
+
height,
|
|
33
|
+
isVisible: height > 0
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=use-keyboard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useState","Keyboard","Platform","useKeyboard","height","setHeight","showEvent","OS","hideEvent","show","addListener","event","endCoordinates","hide","remove","isVisible"],"sourceRoot":"../../../src","sources":["hooks/use-keyboard.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,cAAc;AAQjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAA,EAAsB;EAC/C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC;EAEvCD,SAAS,CAAC,MAAM;IACd;IACA,MAAMO,SAAS,GAAGJ,QAAQ,CAACK,EAAE,KAAK,KAAK,GAAG,kBAAkB,GAAG,iBAAiB;IAChF,MAAMC,SAAS,GAAGN,QAAQ,CAACK,EAAE,KAAK,KAAK,GAAG,kBAAkB,GAAG,iBAAiB;IAEhF,MAAME,IAAI,GAAGR,QAAQ,CAACS,WAAW,CAACJ,SAAS,EAAGK,KAAK,IACjDN,SAAS,CAACM,KAAK,CAACC,cAAc,CAACR,MAAM,CACvC,CAAC;IACD,MAAMS,IAAI,GAAGZ,QAAQ,CAACS,WAAW,CAACF,SAAS,EAAE,MAAMH,SAAS,CAAC,CAAC,CAAC,CAAC;IAEhE,OAAO,MAAM;MACXI,IAAI,CAACK,MAAM,CAAC,CAAC;MACbD,IAAI,CAACC,MAAM,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAEV,MAAM;IAAEW,SAAS,EAAEX,MAAM,GAAG;EAAE,CAAC;AAC1C","ignoreList":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The value from the previous render, or `undefined` on the first.
|
|
7
|
+
*
|
|
8
|
+
* Useful for reacting to a transition rather than a state — firing only when
|
|
9
|
+
* something *became* true.
|
|
10
|
+
*
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const wasOpen = usePrevious(isOpen);
|
|
13
|
+
* useEffect(() => {
|
|
14
|
+
* if (isOpen && !wasOpen) track('sheet_opened');
|
|
15
|
+
* }, [isOpen, wasOpen]);
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export function usePrevious(value) {
|
|
19
|
+
const ref = useRef(undefined);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
ref.current = value;
|
|
22
|
+
}, [value]);
|
|
23
|
+
return ref.current;
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=use-previous.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","usePrevious","value","ref","undefined","current"],"sourceRoot":"../../../src","sources":["hooks/use-previous.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAIC,KAAQ,EAAiB;EACtD,MAAMC,GAAG,GAAGH,MAAM,CAAgBI,SAAS,CAAC;EAE5CL,SAAS,CAAC,MAAM;IACdI,GAAG,CAACE,OAAO,GAAGH,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,OAAOC,GAAG,CAACE,OAAO;AACpB","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -31,9 +31,12 @@ export { InputGroup } from "./components/input-group/index.js";
|
|
|
31
31
|
export { Label } from "./components/label/index.js";
|
|
32
32
|
export { Progress } from "./components/progress/index.js";
|
|
33
33
|
export { RadioGroup } from "./components/radio-group/index.js";
|
|
34
|
+
export { ScrollFade } from "./components/scroll-fade/index.js";
|
|
35
|
+
export { Shimmer } from "./components/shimmer/index.js";
|
|
34
36
|
export { Skeleton } from "./components/skeleton/index.js";
|
|
35
37
|
export { Spinner } from "./components/spinner/index.js";
|
|
36
38
|
export { Steps } from "./components/steps/index.js";
|
|
39
|
+
export { Surface } from "./components/surface/index.js";
|
|
37
40
|
export { Switch } from "./components/switch/index.js";
|
|
38
41
|
export { Timeline } from "./components/timeline/index.js";
|
|
39
42
|
export { Toast, ToastViewport, toast, useToast } from "./components/toast/index.js";
|
|
@@ -42,6 +45,9 @@ export { Typography } from "./components/typography/index.js";
|
|
|
42
45
|
// Icons
|
|
43
46
|
export { AlertTriangleIcon, AppleIcon, ArrowUpRightIcon, BellIcon, CardIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, FacebookIcon, GoogleIcon, IconColorProvider, InfoIcon, MoonIcon, PackageIcon, PlusSquareIcon, ReceiptIcon, SearchIcon, SendIcon, ShareNodesIcon, ShieldAlertIcon, ShieldCheckIcon, SunIcon, XIcon, useIconColor } from "./icons/index.js";
|
|
44
47
|
|
|
48
|
+
// Hooks
|
|
49
|
+
export * from "./hooks/index.js";
|
|
50
|
+
|
|
45
51
|
// Utils
|
|
46
52
|
export { cn } from "./utils/cn.js";
|
|
47
53
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["PanelUIProvider","useTheme","useThemeMode","PANEL_THEMES","PANEL_THEME_NAMES","PANEL_EXTRA_THEMES","Portal","PortalHost","PortalProvider","Text","AnimatedPressable","Accordion","Alert","Avatar","Badge","BottomSheet","Button","Dialog","Frame","InlineSelect","Select","Tabs","Card","Checkbox","EmptyState","Input","InputGroup","Label","Progress","RadioGroup","Skeleton","Spinner","Steps","Switch","Timeline","Toast","ToastViewport","toast","useToast","Typography","AlertTriangleIcon","AppleIcon","ArrowUpRightIcon","BellIcon","CardIcon","CheckCircleIcon","CheckIcon","ChevronDownIcon","ChevronLeftIcon","ChevronRightIcon","FacebookIcon","GoogleIcon","IconColorProvider","InfoIcon","MoonIcon","PackageIcon","PlusSquareIcon","ReceiptIcon","SearchIcon","SendIcon","ShareNodesIcon","ShieldAlertIcon","ShieldCheckIcon","SunIcon","XIcon","useIconColor","cn"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,SAASA,eAAe,QAAmC,kCAA+B;;AAE1F;AACA,SACEC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,iBAAiB,EACjBC,kBAAkB,QAKb,sBAAmB;;AAE1B;AACA,SAASC,MAAM,EAAEC,UAAU,EAAEC,cAAc,QAAQ,wBAAqB;AACxE,SAASC,IAAI,QAAwB,sBAAmB;AACxD,SACEC,iBAAiB,QAEZ,oCAAiC;;AAExC;AACA,SACEC,SAAS,QAQJ,iCAAwB;AAC/B,SACEC,KAAK,QAGA,6BAAoB;AAC3B,SACEC,MAAM,QAGD,8BAAqB;AAC5B,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,WAAW,QAGN,oCAA2B;AAClC,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SACEC,MAAM,QAGD,8BAAqB;AAC5B,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,YAAY,QAGP,qCAA4B;AACnC,SAASC,MAAM,QAAgD,8BAAqB;AACpF,SACEC,IAAI,QAKC,4BAAmB;AAC1B,SAASC,IAAI,QAAwB,4BAAmB;AACxD,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SACEC,UAAU,QAGL,mCAA0B;AACjC,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,UAAU,QAIL,mCAA0B;AACjC,SAASC,KAAK,QAA8C,6BAAoB;AAChF,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SACEC,UAAU,QAGL,mCAA0B;AACjC,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SAASC,OAAO,QAA2B,+BAAsB;AACjE,SACEC,KAAK,QAQA,6BAAoB;AAC3B,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SACEC,QAAQ,QAOH,gCAAuB;AAC9B,SACEC,KAAK,EACLC,aAAa,EACbC,KAAK,EACLC,QAAQ,QASH,6BAAoB;AAC3B,SACEC,UAAU,QAML,kCAAyB;;AAEhC;AACA,SACEC,iBAAiB,EACjBC,SAAS,EACTC,gBAAgB,EAChBC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,SAAS,EACTC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,YAAY,EACZC,UAAU,EACVC,iBAAiB,EACjBC,QAAQ,EACRC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,OAAO,EACPC,KAAK,EACLC,YAAY,QAEP,kBAAS;;AAEhB;AACA,SAASC,EAAE,QAAQ,eAAY","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["PanelUIProvider","useTheme","useThemeMode","PANEL_THEMES","PANEL_THEME_NAMES","PANEL_EXTRA_THEMES","Portal","PortalHost","PortalProvider","Text","AnimatedPressable","Accordion","Alert","Avatar","Badge","BottomSheet","Button","Dialog","Frame","InlineSelect","Select","Tabs","Card","Checkbox","EmptyState","Input","InputGroup","Label","Progress","RadioGroup","ScrollFade","Shimmer","Skeleton","Spinner","Steps","Surface","Switch","Timeline","Toast","ToastViewport","toast","useToast","Typography","AlertTriangleIcon","AppleIcon","ArrowUpRightIcon","BellIcon","CardIcon","CheckCircleIcon","CheckIcon","ChevronDownIcon","ChevronLeftIcon","ChevronRightIcon","FacebookIcon","GoogleIcon","IconColorProvider","InfoIcon","MoonIcon","PackageIcon","PlusSquareIcon","ReceiptIcon","SearchIcon","SendIcon","ShareNodesIcon","ShieldAlertIcon","ShieldCheckIcon","SunIcon","XIcon","useIconColor","cn"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,SAASA,eAAe,QAAmC,kCAA+B;;AAE1F;AACA,SACEC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,iBAAiB,EACjBC,kBAAkB,QAKb,sBAAmB;;AAE1B;AACA,SAASC,MAAM,EAAEC,UAAU,EAAEC,cAAc,QAAQ,wBAAqB;AACxE,SAASC,IAAI,QAAwB,sBAAmB;AACxD,SACEC,iBAAiB,QAEZ,oCAAiC;;AAExC;AACA,SACEC,SAAS,QAQJ,iCAAwB;AAC/B,SACEC,KAAK,QAGA,6BAAoB;AAC3B,SACEC,MAAM,QAGD,8BAAqB;AAC5B,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,WAAW,QAGN,oCAA2B;AAClC,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SACEC,MAAM,QAGD,8BAAqB;AAC5B,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,YAAY,QAGP,qCAA4B;AACnC,SAASC,MAAM,QAAgD,8BAAqB;AACpF,SACEC,IAAI,QAKC,4BAAmB;AAC1B,SAASC,IAAI,QAAwB,4BAAmB;AACxD,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SACEC,UAAU,QAGL,mCAA0B;AACjC,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,UAAU,QAIL,mCAA0B;AACjC,SAASC,KAAK,QAA8C,6BAAoB;AAChF,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SACEC,UAAU,QAGL,mCAA0B;AACjC,SACEC,UAAU,QAEL,mCAA0B;AACjC,SAASC,OAAO,QAA2B,+BAAsB;AACjE,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SAASC,OAAO,QAA2B,+BAAsB;AACjE,SACEC,KAAK,QAQA,6BAAoB;AAC3B,SAASC,OAAO,QAA2B,+BAAsB;AACjE,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SACEC,QAAQ,QAOH,gCAAuB;AAC9B,SACEC,KAAK,EACLC,aAAa,EACbC,KAAK,EACLC,QAAQ,QASH,6BAAoB;AAC3B,SACEC,UAAU,QAML,kCAAyB;;AAEhC;AACA,SACEC,iBAAiB,EACjBC,SAAS,EACTC,gBAAgB,EAChBC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,SAAS,EACTC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,YAAY,EACZC,UAAU,EACVC,iBAAiB,EACjBC,QAAQ,EACRC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,OAAO,EACPC,KAAK,EACLC,YAAY,QAEP,kBAAS;;AAEhB;AACA,cAAc,kBAAS;;AAEvB;AACA,SAASC,EAAE,QAAQ,eAAY","ignoreList":[]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ScrollFade — fades the edges of a scroll container.
|
|
3
|
+
*
|
|
4
|
+
* The React Native equivalent of shadcn-ui/ui's `scroll-fade` utility
|
|
5
|
+
* (https://ui.shadcn.com/docs/utils/scroll-fade), which is CSS `mask-image`
|
|
6
|
+
* driven by a scroll timeline. React Native has neither masks nor scroll
|
|
7
|
+
* timelines, so the fades are SVG gradients overlaid on each edge, with their
|
|
8
|
+
* opacity following the scroll position.
|
|
9
|
+
*
|
|
10
|
+
* Composition follows heroui-native's ScrollShadow: wrap the scrollable and
|
|
11
|
+
* let the orientation be inferred from its `horizontal` prop.
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <ScrollFade>
|
|
15
|
+
* <ScrollView horizontal>…</ScrollView>
|
|
16
|
+
* </ScrollFade>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
import { type ReactNode } from 'react';
|
|
20
|
+
import { type ViewProps } from 'react-native';
|
|
21
|
+
export interface ScrollFadeProps extends ViewProps {
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Depth of the fade in pixels. */
|
|
24
|
+
size?: number;
|
|
25
|
+
/** Which edges fade. */
|
|
26
|
+
edges?: 'both' | 'start' | 'end';
|
|
27
|
+
/**
|
|
28
|
+
* Colour the fade resolves to — normally whatever sits behind the
|
|
29
|
+
* scrollable. Defaults to the theme's background.
|
|
30
|
+
*/
|
|
31
|
+
color?: string;
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
export declare function ScrollFade({ className, size, edges, color, children, ...props }: ScrollFadeProps): import("react").JSX.Element;
|
|
35
|
+
export declare namespace ScrollFade {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/scroll-fade/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAS,EACT,KAAc,EACd,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BA4DjB;yBAnEe,UAAU"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shimmer — an animated highlight sweeping across content.
|
|
3
|
+
*
|
|
4
|
+
* The React Native equivalent of shadcn-ui/ui's `shimmer` utility
|
|
5
|
+
* (https://ui.shadcn.com/docs/utils/shimmer). That one is CSS:
|
|
6
|
+
* `background-clip: text` with a `color-mix()` highlight. React Native has
|
|
7
|
+
* neither, so the highlight is drawn as an SVG gradient band swept across an
|
|
8
|
+
* overlay by Reanimated, on the UI thread.
|
|
9
|
+
*
|
|
10
|
+
* The visible difference: the band passes *over* the content rather than
|
|
11
|
+
* being clipped to glyph shapes. On body-sized text the two read the same; on
|
|
12
|
+
* very large text the web version is crisper.
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Shimmer>
|
|
16
|
+
* <Text muted>Generating response…</Text>
|
|
17
|
+
* </Shimmer>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
import { type ReactNode } from 'react';
|
|
21
|
+
import { type ViewProps } from 'react-native';
|
|
22
|
+
export interface ShimmerProps extends ViewProps {
|
|
23
|
+
className?: string;
|
|
24
|
+
/** Milliseconds for one sweep. */
|
|
25
|
+
duration?: number;
|
|
26
|
+
/** Sweep once instead of looping. */
|
|
27
|
+
once?: boolean;
|
|
28
|
+
/** Sweep right-to-left. */
|
|
29
|
+
reverse?: boolean;
|
|
30
|
+
/** Width of the highlight band, as a fraction of the content width. */
|
|
31
|
+
spread?: number;
|
|
32
|
+
/** Highlight colour. Defaults to the theme's foreground. */
|
|
33
|
+
color?: string;
|
|
34
|
+
/** Peak opacity of the highlight. */
|
|
35
|
+
intensity?: number;
|
|
36
|
+
children?: ReactNode;
|
|
37
|
+
}
|
|
38
|
+
export declare function Shimmer({ className, duration, once, reverse, spread, color, intensity, children, ...props }: ShimmerProps): import("react").JSX.Element;
|
|
39
|
+
export declare namespace Shimmer {
|
|
40
|
+
var displayName: string;
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/shimmer/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAc5E,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAe,EACf,IAAY,EACZ,OAAe,EACf,MAAY,EACZ,KAAK,EACL,SAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,+BAuEd;yBAjFe,OAAO"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { View, type ViewProps } from 'react-native';
|
|
2
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
3
|
+
declare const surfaceVariants: import("tailwind-variants").TVReturnType<{
|
|
4
|
+
variant: {
|
|
5
|
+
default: string;
|
|
6
|
+
secondary: string;
|
|
7
|
+
tertiary: string;
|
|
8
|
+
transparent: string;
|
|
9
|
+
};
|
|
10
|
+
}, undefined, "overflow-hidden rounded-3xl p-4", {
|
|
11
|
+
variant: {
|
|
12
|
+
default: string;
|
|
13
|
+
secondary: string;
|
|
14
|
+
tertiary: string;
|
|
15
|
+
transparent: string;
|
|
16
|
+
};
|
|
17
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
18
|
+
variant: {
|
|
19
|
+
default: string;
|
|
20
|
+
secondary: string;
|
|
21
|
+
tertiary: string;
|
|
22
|
+
transparent: string;
|
|
23
|
+
};
|
|
24
|
+
}, undefined, "overflow-hidden rounded-3xl p-4", unknown, unknown, undefined>>;
|
|
25
|
+
export interface SurfaceProps extends ViewProps, VariantProps<typeof surfaceVariants> {
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
export declare const Surface: import("react").ForwardRefExoticComponent<SurfaceProps & import("react").RefAttributes<View>>;
|
|
29
|
+
export {};
|
|
30
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/surface/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;8EAanB,CAAC;AAEH,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,+FAYnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/timeline/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAC/E,mEAAmE;AACnE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/timeline/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAC/E,mEAAmE;AACnE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAkJjF,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4KD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAgBD,eAAO,MAAM,QAAQ;;;oBA7M4C,MAAM;;;;oBA0FJ,MAAM;;;oBAgBP,MAAM;;;oBAUL,MAAM;;;;;;;;;oBA4DR,MAAM;;;CA4CrE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { useCopyToClipboard, type UseCopyToClipboardOptions, type UseCopyToClipboardResult, } from './use-copy-to-clipboard.js';
|
|
2
|
+
export { useDisclosure, type UseDisclosureOptions, type UseDisclosureResult, } from './use-disclosure.js';
|
|
3
|
+
export { useBreakpoint, BREAKPOINTS, type Breakpoint, type UseBreakpointResult, } from './use-breakpoint.js';
|
|
4
|
+
export { useKeyboard, type UseKeyboardResult } from './use-keyboard.js';
|
|
5
|
+
export { useDebouncedValue } from './use-debounced-value.js';
|
|
6
|
+
export { usePrevious } from './use-previous.js';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,4BAAyB,CAAC;AACjC,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,qBAAkB,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,KAAK,UAAU,EACf,KAAK,mBAAmB,GACzB,MAAM,qBAAkB,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAgB,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAAuB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAgB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/** Tailwind's breakpoints, minus the ones no phone or tablet reaches. */
|
|
2
|
+
export declare const BREAKPOINTS: {
|
|
3
|
+
readonly sm: 640;
|
|
4
|
+
readonly md: 768;
|
|
5
|
+
readonly lg: 1024;
|
|
6
|
+
readonly xl: 1280;
|
|
7
|
+
};
|
|
8
|
+
export type Breakpoint = keyof typeof BREAKPOINTS;
|
|
9
|
+
export interface UseBreakpointResult {
|
|
10
|
+
/** Largest breakpoint the window currently satisfies, or `base`. */
|
|
11
|
+
current: Breakpoint | 'base';
|
|
12
|
+
/** True when the window is at least this wide. */
|
|
13
|
+
isAtLeast: (breakpoint: Breakpoint) => boolean;
|
|
14
|
+
width: number;
|
|
15
|
+
height: number;
|
|
16
|
+
isLandscape: boolean;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Responsive state from the window size — the React Native answer to
|
|
20
|
+
* coss.com/ui's `useMediaQuery`, which has no equivalent here.
|
|
21
|
+
*
|
|
22
|
+
* For styling, prefer Uniwind's responsive class prefixes (`md:flex-row`).
|
|
23
|
+
* Reach for this when the *behaviour* changes, not just the look — rendering
|
|
24
|
+
* a sheet on a phone and a dialog on a tablet, say.
|
|
25
|
+
*
|
|
26
|
+
* ```tsx
|
|
27
|
+
* const { isAtLeast } = useBreakpoint();
|
|
28
|
+
* return isAtLeast('md') ? <Dialog …/> : <BottomSheet …/>;
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare function useBreakpoint(): UseBreakpointResult;
|
|
32
|
+
//# sourceMappingURL=use-breakpoint.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-breakpoint.ts"],"names":[],"mappings":"AAEA,yEAAyE;AACzE,eAAO,MAAM,WAAW;;;;;CAAoD,CAAC;AAE7E,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC,oEAAoE;IACpE,OAAO,EAAE,UAAU,GAAG,MAAM,CAAC;IAC7B,kDAAkD;IAClD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,OAAO,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,IAAI,mBAAmB,CAqBnD"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export interface UseCopyToClipboardOptions {
|
|
2
|
+
/** Milliseconds before `copied` flips back. */
|
|
3
|
+
timeout?: number;
|
|
4
|
+
onCopy?: () => void;
|
|
5
|
+
}
|
|
6
|
+
export interface UseCopyToClipboardResult {
|
|
7
|
+
/** Writes `value` to the clipboard and sets `copied`. */
|
|
8
|
+
copy: (value: string) => Promise<void>;
|
|
9
|
+
copied: boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Copy text to the clipboard, with a temporary "copied" state.
|
|
13
|
+
*
|
|
14
|
+
* Mirrors coss.com/ui's `useCopyToClipboard`.
|
|
15
|
+
*
|
|
16
|
+
* Requires `expo-clipboard`, which is an optional peer dependency — React
|
|
17
|
+
* Native removed `Clipboard` from core, and pulling in a required native
|
|
18
|
+
* module for one hook would cost every consumer who never calls it:
|
|
19
|
+
*
|
|
20
|
+
* ```sh
|
|
21
|
+
* npx expo install expo-clipboard
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* ```tsx
|
|
25
|
+
* const { copy, copied } = useCopyToClipboard();
|
|
26
|
+
* <Button onPress={() => copy(url)}>{copied ? 'Copied' : 'Copy link'}</Button>
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare function useCopyToClipboard({ timeout, onCopy, }?: UseCopyToClipboardOptions): UseCopyToClipboardResult;
|
|
30
|
+
//# sourceMappingURL=use-copy-to-clipboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-copy-to-clipboard.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-copy-to-clipboard.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,yBAAyB;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,wBAAwB;IACvC,yDAAyD;IACzD,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAc,EACd,MAAM,GACP,GAAE,yBAA8B,GAAG,wBAAwB,CA6B3D"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A copy of `value` that only updates once it has stopped changing for
|
|
3
|
+
* `delay` ms — for search fields, where you want the typed value on screen
|
|
4
|
+
* immediately but the query fired once.
|
|
5
|
+
*
|
|
6
|
+
* ```tsx
|
|
7
|
+
* const [query, setQuery] = useState('');
|
|
8
|
+
* const debounced = useDebouncedValue(query, 300);
|
|
9
|
+
* useEffect(() => { search(debounced); }, [debounced]);
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
export declare function useDebouncedValue<T>(value: T, delay?: number): T;
|
|
13
|
+
//# sourceMappingURL=use-debounced-value.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-debounced-value.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-debounced-value.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,SAAM,GAAG,CAAC,CAS7D"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export interface UseDisclosureOptions {
|
|
2
|
+
defaultOpen?: boolean;
|
|
3
|
+
/** Controlled open state. Pass this to drive it from outside. */
|
|
4
|
+
open?: boolean;
|
|
5
|
+
onOpenChange?: (open: boolean) => void;
|
|
6
|
+
}
|
|
7
|
+
export interface UseDisclosureResult {
|
|
8
|
+
isOpen: boolean;
|
|
9
|
+
open: () => void;
|
|
10
|
+
close: () => void;
|
|
11
|
+
toggle: () => void;
|
|
12
|
+
/** Spread onto Dialog, BottomSheet or Select. */
|
|
13
|
+
props: {
|
|
14
|
+
open: boolean;
|
|
15
|
+
onOpenChange: (open: boolean) => void;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Open/closed state for an overlay.
|
|
20
|
+
*
|
|
21
|
+
* The same controlled-or-uncontrolled pattern Dialog, BottomSheet and Select
|
|
22
|
+
* implement internally, lifted out for when you need to drive one from
|
|
23
|
+
* elsewhere — closing a sheet after a request settles, say.
|
|
24
|
+
*
|
|
25
|
+
* ```tsx
|
|
26
|
+
* const sheet = useDisclosure();
|
|
27
|
+
* <Button onPress={sheet.open}>Share</Button>
|
|
28
|
+
* <BottomSheet {...sheet.props}>…</BottomSheet>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare function useDisclosure({ defaultOpen, open: controlledOpen, onOpenChange, }?: UseDisclosureOptions): UseDisclosureResult;
|
|
32
|
+
//# sourceMappingURL=use-disclosure.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-disclosure.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-disclosure.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iDAAiD;IACjD,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAC;CACjE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,IAAI,EAAE,cAAc,EACpB,YAAY,GACb,GAAE,oBAAyB,GAAG,mBAAmB,CAqBjD"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface UseKeyboardResult {
|
|
2
|
+
/** Height of the keyboard in px, or 0 when hidden. */
|
|
3
|
+
height: number;
|
|
4
|
+
isVisible: boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Keyboard height and visibility, on the JS thread.
|
|
8
|
+
*
|
|
9
|
+
* Use this when the value drives rendering — showing a hint, swapping a
|
|
10
|
+
* layout. For *animating* against the keyboard, use Reanimated's
|
|
11
|
+
* `useAnimatedKeyboard` instead: it runs on the UI thread and tracks the
|
|
12
|
+
* keyboard frame-for-frame, where this fires once per show/hide.
|
|
13
|
+
*
|
|
14
|
+
* ```tsx
|
|
15
|
+
* const { isVisible } = useKeyboard();
|
|
16
|
+
* {isVisible ? null : <Footer />}
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export declare function useKeyboard(): UseKeyboardResult;
|
|
20
|
+
//# sourceMappingURL=use-keyboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-keyboard.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-keyboard.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,CAoB/C"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The value from the previous render, or `undefined` on the first.
|
|
3
|
+
*
|
|
4
|
+
* Useful for reacting to a transition rather than a state — firing only when
|
|
5
|
+
* something *became* true.
|
|
6
|
+
*
|
|
7
|
+
* ```tsx
|
|
8
|
+
* const wasOpen = usePrevious(isOpen);
|
|
9
|
+
* useEffect(() => {
|
|
10
|
+
* if (isOpen && !wasOpen) track('sheet_opened');
|
|
11
|
+
* }, [isOpen, wasOpen]);
|
|
12
|
+
* ```
|
|
13
|
+
*/
|
|
14
|
+
export declare function usePrevious<T>(value: T): T | undefined;
|
|
15
|
+
//# sourceMappingURL=use-previous.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-previous.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-previous.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAQtD"}
|