@stackflow/plugin-basic-ui 1.7.0 → 1.8.1
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/assets/IconBack.d.ts +0 -1
- package/dist/assets/IconClose.d.ts +0 -1
- package/dist/basicUIPlugin.css.d.ts +32 -6
- package/dist/basicUIPlugin.d.ts +1 -2
- package/dist/components/AppBar.css.d.ts +2 -2
- package/dist/components/AppBar.d.ts +17 -18
- package/dist/components/AppScreen.css.d.ts +19 -18
- package/dist/components/AppScreen.d.ts +2 -3
- package/dist/components/BottomSheet.css.d.ts +6 -6
- package/dist/components/BottomSheet.d.ts +1 -2
- package/dist/components/Modal.css.d.ts +6 -6
- package/dist/components/Modal.d.ts +1 -2
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useMaxWidth.d.ts +0 -1
- package/dist/hooks/useStyleEffect.d.ts +1 -2
- package/dist/hooks/useStyleEffectHide.d.ts +0 -1
- package/dist/hooks/useStyleEffectOffset.d.ts +0 -1
- package/dist/hooks/useStyleEffectSwipeBack.d.ts +0 -1
- package/dist/hooks/useZIndexBase.d.ts +1 -0
- package/dist/index.css +11 -15
- package/dist/index.css.map +3 -3
- package/dist/index.d.ts +1 -0
- package/dist/index.js +25 -19
- package/dist/index.js.map +4 -4
- package/dist/index.mjs +25 -19
- package/dist/index.mjs.map +4 -4
- package/dist/utils/PropOf.d.ts +1 -2
- package/dist/utils/RecursivePartial.d.ts +1 -1
- package/dist/utils/last.d.ts +1 -1
- package/package.json +12 -25
- package/src/basicUIPlugin.css.ts +32 -32
- package/src/basicUIPlugin.tsx +2 -2
- package/src/components/AppBar.css.ts +0 -1
- package/src/components/AppBar.tsx +5 -5
- package/src/components/AppScreen.css.ts +7 -8
- package/src/components/AppScreen.tsx +2 -2
- package/src/components/BottomSheet.css.ts +0 -1
- package/src/components/BottomSheet.tsx +8 -5
- package/src/components/Modal.css.ts +0 -1
- package/src/components/Modal.tsx +8 -5
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useStyleEffect.ts +1 -1
- package/src/hooks/useStyleEffectHide.ts +0 -2
- package/src/hooks/useStyleEffectOffset.ts +1 -5
- package/src/hooks/useStyleEffectSwipeBack.ts +1 -3
- package/src/hooks/useZIndexBase.ts +6 -0
- package/src/index.ts +1 -0
- package/src/utils/last.ts +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const globalVars: MapLeafNodes<{
|
|
1
|
+
declare const GLOBAL_VARS: {
|
|
3
2
|
backgroundColor: string;
|
|
4
3
|
dimBackgroundColor: string;
|
|
5
4
|
transitionDuration: string;
|
|
@@ -26,12 +25,39 @@ export declare const globalVars: MapLeafNodes<{
|
|
|
26
25
|
modal: {
|
|
27
26
|
borderRadius: string;
|
|
28
27
|
};
|
|
29
|
-
}
|
|
30
|
-
declare
|
|
31
|
-
|
|
28
|
+
};
|
|
29
|
+
export declare const globalVars: {
|
|
30
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
31
|
+
dimBackgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
32
|
+
transitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
33
|
+
computedTransitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
34
|
+
appBar: {
|
|
35
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
36
|
+
borderColorTransitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
37
|
+
borderSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
38
|
+
height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
39
|
+
heightTransitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
40
|
+
minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
41
|
+
iconColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
42
|
+
iconColorTransitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
43
|
+
textColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
44
|
+
textColorTransitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
45
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
46
|
+
backgroundColorTransitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
47
|
+
overflow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
48
|
+
minSafeAreaInsetTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
49
|
+
};
|
|
50
|
+
bottomSheet: {
|
|
51
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
52
|
+
};
|
|
53
|
+
modal: {
|
|
54
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
export type GlobalVars = typeof GLOBAL_VARS;
|
|
32
58
|
export declare const android: string;
|
|
33
59
|
export declare const cupertino: string;
|
|
34
|
-
export declare const stackWrapper: import("@vanilla-extract/recipes
|
|
60
|
+
export declare const stackWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
35
61
|
theme: {
|
|
36
62
|
android: string;
|
|
37
63
|
cupertino: string;
|
package/dist/basicUIPlugin.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { StackflowReactPlugin } from "@stackflow/react";
|
|
3
2
|
import * as css from "./basicUIPlugin.css";
|
|
4
3
|
import type { RecursivePartial } from "./utils";
|
|
5
|
-
|
|
4
|
+
type BasicUIPluginOptions = RecursivePartial<css.GlobalVars> & {
|
|
6
5
|
theme: "android" | "cupertino";
|
|
7
6
|
rootClassName?: string;
|
|
8
7
|
appBar?: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const appBar: import("@vanilla-extract/recipes
|
|
1
|
+
export declare const appBar: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
2
2
|
border: {
|
|
3
3
|
true: {
|
|
4
4
|
boxShadow: `inset 0px calc(-1 * var(--${string})) 0 var(--${string})` | `inset 0px calc(-1 * var(--${string})) 0 var(--${string}, ${string})` | `inset 0px calc(-1 * var(--${string})) 0 var(--${string}, ${number})` | `inset 0px calc(-1 * var(--${string}, ${string})) 0 var(--${string})` | `inset 0px calc(-1 * var(--${string}, ${string})) 0 var(--${string}, ${string})` | `inset 0px calc(-1 * var(--${string}, ${string})) 0 var(--${string}, ${number})` | `inset 0px calc(-1 * var(--${string}, ${number})) 0 var(--${string})` | `inset 0px calc(-1 * var(--${string}, ${number})) 0 var(--${string}, ${string})` | `inset 0px calc(-1 * var(--${string}, ${number})) 0 var(--${string}, ${number})`;
|
|
@@ -39,7 +39,7 @@ export declare const left: string;
|
|
|
39
39
|
export declare const backButton: string;
|
|
40
40
|
export declare const closeButton: string;
|
|
41
41
|
export declare const center: string;
|
|
42
|
-
export declare const centerMain: import("@vanilla-extract/recipes
|
|
42
|
+
export declare const centerMain: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
43
43
|
hasLeft: {
|
|
44
44
|
true: {
|
|
45
45
|
selectors: {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
declare const AppBar: import("react").ForwardRefExoticComponent<Partial<Pick<{
|
|
3
2
|
borderColor: string;
|
|
4
3
|
borderColorTransitionDuration: string;
|
|
@@ -16,26 +15,26 @@ declare const AppBar: import("react").ForwardRefExoticComponent<Partial<Pick<{
|
|
|
16
15
|
minSafeAreaInsetTop: string;
|
|
17
16
|
}, "height" | "backgroundColor" | "borderColor" | "overflow" | "borderColorTransitionDuration" | "borderSize" | "heightTransitionDuration" | "iconColor" | "iconColorTransitionDuration" | "textColor" | "textColorTransitionDuration" | "backgroundColorTransitionDuration">> & {
|
|
18
17
|
title?: React.ReactNode;
|
|
19
|
-
renderLeft?: (
|
|
20
|
-
renderRight?: (
|
|
18
|
+
renderLeft?: () => React.ReactNode;
|
|
19
|
+
renderRight?: () => React.ReactNode;
|
|
21
20
|
backButton?: {
|
|
22
|
-
renderIcon?: (
|
|
23
|
-
ariaLabel?: string
|
|
24
|
-
onClick?: (
|
|
21
|
+
renderIcon?: () => React.ReactNode;
|
|
22
|
+
ariaLabel?: string;
|
|
23
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
25
24
|
} | {
|
|
26
|
-
render?: (
|
|
27
|
-
}
|
|
25
|
+
render?: () => React.ReactNode;
|
|
26
|
+
};
|
|
28
27
|
closeButton?: {
|
|
29
|
-
renderIcon?: (
|
|
30
|
-
ariaLabel?: string
|
|
31
|
-
onClick?: (
|
|
28
|
+
renderIcon?: () => React.ReactNode;
|
|
29
|
+
ariaLabel?: string;
|
|
30
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
32
31
|
} | {
|
|
33
|
-
render?: (
|
|
34
|
-
}
|
|
35
|
-
closeButtonLocation?: "left" | "right"
|
|
36
|
-
border?: boolean
|
|
37
|
-
modalPresentationStyle?: "fullScreen"
|
|
38
|
-
activityEnterStyle?: "slideInLeft"
|
|
39
|
-
onTopClick?: (
|
|
32
|
+
render?: () => React.ReactNode;
|
|
33
|
+
};
|
|
34
|
+
closeButtonLocation?: "left" | "right";
|
|
35
|
+
border?: boolean;
|
|
36
|
+
modalPresentationStyle?: "fullScreen";
|
|
37
|
+
activityEnterStyle?: "slideInLeft";
|
|
38
|
+
onTopClick?: (e: React.MouseEvent) => void;
|
|
40
39
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
41
40
|
export default AppBar;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
export declare const vars:
|
|
2
|
-
transitionDuration:
|
|
1
|
+
export declare const vars: {
|
|
2
|
+
transitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3
3
|
zIndexes: {
|
|
4
|
-
dim:
|
|
5
|
-
paper:
|
|
6
|
-
edge:
|
|
7
|
-
appBar:
|
|
4
|
+
dim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
5
|
+
paper: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
6
|
+
edge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
7
|
+
appBar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8
8
|
};
|
|
9
9
|
appBar: {
|
|
10
10
|
center: {
|
|
11
|
-
mainWidth:
|
|
11
|
+
mainWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
|
-
}
|
|
14
|
+
};
|
|
15
15
|
export declare const background: string;
|
|
16
16
|
export declare const allTransitions: string;
|
|
17
17
|
export declare const enterActive: string;
|
|
18
18
|
export declare const enterDone: string;
|
|
19
19
|
export declare const exitActive: string;
|
|
20
20
|
export declare const exitDone: string;
|
|
21
|
-
export declare const appScreen: import("@vanilla-extract/recipes
|
|
21
|
+
export declare const appScreen: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
22
22
|
transitionState: {
|
|
23
23
|
"enter-active": string;
|
|
24
24
|
"enter-done": string;
|
|
@@ -27,17 +27,18 @@ export declare const appScreen: import("@vanilla-extract/recipes/dist/declaratio
|
|
|
27
27
|
};
|
|
28
28
|
}>;
|
|
29
29
|
export declare const dim: string;
|
|
30
|
-
export declare const paper: import("@vanilla-extract/recipes
|
|
30
|
+
export declare const paper: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
31
31
|
hasAppBar: {
|
|
32
32
|
true: (string | {
|
|
33
|
-
transition: `transform var(--${string}), opacity var(--${string}),
|
|
34
|
-
|
|
33
|
+
transition: `transform var(--${string}), opacity var(--${string}), margin-top var(--${string})` | `transform var(--${string}), opacity var(--${string}), margin-top var(--${string}, ${string})` | `transform var(--${string}), opacity var(--${string}), margin-top var(--${string}, ${number})` | `transform var(--${string}), opacity var(--${string}, ${string}), margin-top var(--${string})` | `transform var(--${string}), opacity var(--${string}, ${string}), margin-top var(--${string}, ${string})` | `transform var(--${string}), opacity var(--${string}, ${string}), margin-top var(--${string}, ${number})` | `transform var(--${string}), opacity var(--${string}, ${number}), margin-top var(--${string})` | `transform var(--${string}), opacity var(--${string}, ${number}), margin-top var(--${string}, ${string})` | `transform var(--${string}), opacity var(--${string}, ${number}), margin-top var(--${string}, ${number})` | `transform var(--${string}, ${string}), opacity var(--${string}), margin-top var(--${string})` | `transform var(--${string}, ${string}), opacity var(--${string}), margin-top var(--${string}, ${string})` | `transform var(--${string}, ${string}), opacity var(--${string}), margin-top var(--${string}, ${number})` | `transform var(--${string}, ${string}), opacity var(--${string}, ${string}), margin-top var(--${string})` | `transform var(--${string}, ${string}), opacity var(--${string}, ${string}), margin-top var(--${string}, ${string})` | `transform var(--${string}, ${string}), opacity var(--${string}, ${string}), margin-top var(--${string}, ${number})` | `transform var(--${string}, ${string}), opacity var(--${string}, ${number}), margin-top var(--${string})` | `transform var(--${string}, ${string}), opacity var(--${string}, ${number}), margin-top var(--${string}, ${string})` | `transform var(--${string}, ${string}), opacity var(--${string}, ${number}), margin-top var(--${string}, ${number})` | `transform var(--${string}, ${number}), opacity var(--${string}), margin-top var(--${string})` | `transform var(--${string}, ${number}), opacity var(--${string}), margin-top var(--${string}, ${string})` | `transform var(--${string}, ${number}), opacity var(--${string}), margin-top var(--${string}, ${number})` | `transform var(--${string}, ${number}), opacity var(--${string}, ${string}), margin-top var(--${string})` | `transform var(--${string}, ${number}), opacity var(--${string}, ${string}), margin-top var(--${string}, ${string})` | `transform var(--${string}, ${number}), opacity var(--${string}, ${string}), margin-top var(--${string}, ${number})` | `transform var(--${string}, ${number}), opacity var(--${string}, ${number}), margin-top var(--${string})` | `transform var(--${string}, ${number}), opacity var(--${string}, ${number}), margin-top var(--${string}, ${string})` | `transform var(--${string}, ${number}), opacity var(--${string}, ${number}), margin-top var(--${string}, ${number})`;
|
|
34
|
+
marginTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
35
|
+
height: `calc(100% - var(--${string}))` | `calc(100% - var(--${string}, ${string}))` | `calc(100% - var(--${string}, ${number}))`;
|
|
35
36
|
"@supports": {
|
|
36
|
-
"(
|
|
37
|
-
|
|
37
|
+
"(margin-top: constant(safe-area-inset-top))": {
|
|
38
|
+
marginTop: `calc(var(--${string}) + max(var(--${string}), constant(safe-area-inset-top)))` | `calc(var(--${string}) + max(var(--${string}, ${string}), constant(safe-area-inset-top)))` | `calc(var(--${string}) + max(var(--${string}, ${number}), constant(safe-area-inset-top)))` | `calc(var(--${string}, ${string}) + max(var(--${string}), constant(safe-area-inset-top)))` | `calc(var(--${string}, ${string}) + max(var(--${string}, ${string}), constant(safe-area-inset-top)))` | `calc(var(--${string}, ${string}) + max(var(--${string}, ${number}), constant(safe-area-inset-top)))` | `calc(var(--${string}, ${number}) + max(var(--${string}), constant(safe-area-inset-top)))` | `calc(var(--${string}, ${number}) + max(var(--${string}, ${string}), constant(safe-area-inset-top)))` | `calc(var(--${string}, ${number}) + max(var(--${string}, ${number}), constant(safe-area-inset-top)))`;
|
|
38
39
|
};
|
|
39
|
-
"(
|
|
40
|
-
|
|
40
|
+
"(margin-top: env(safe-area-inset-top))": {
|
|
41
|
+
marginTop: `calc(var(--${string}) + max(var(--${string}), env(safe-area-inset-top)))` | `calc(var(--${string}) + max(var(--${string}, ${string}), env(safe-area-inset-top)))` | `calc(var(--${string}) + max(var(--${string}, ${number}), env(safe-area-inset-top)))` | `calc(var(--${string}, ${string}) + max(var(--${string}), env(safe-area-inset-top)))` | `calc(var(--${string}, ${string}) + max(var(--${string}, ${string}), env(safe-area-inset-top)))` | `calc(var(--${string}, ${string}) + max(var(--${string}, ${number}), env(safe-area-inset-top)))` | `calc(var(--${string}, ${number}) + max(var(--${string}), env(safe-area-inset-top)))` | `calc(var(--${string}, ${number}) + max(var(--${string}, ${string}), env(safe-area-inset-top)))` | `calc(var(--${string}, ${number}) + max(var(--${string}, ${number}), env(safe-area-inset-top)))`;
|
|
41
42
|
};
|
|
42
43
|
};
|
|
43
44
|
})[];
|
|
@@ -61,10 +62,10 @@ export declare const paper: import("@vanilla-extract/recipes/dist/declarations/s
|
|
|
61
62
|
};
|
|
62
63
|
};
|
|
63
64
|
}>;
|
|
64
|
-
export declare const edge: import("@vanilla-extract/recipes
|
|
65
|
+
export declare const edge: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
65
66
|
hasAppBar: {
|
|
66
67
|
true: {
|
|
67
|
-
top:
|
|
68
|
+
top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
68
69
|
height: `calc(100% - var(--${string}))` | `calc(100% - var(--${string}, ${string}))` | `calc(100% - var(--${string}, ${number}))`;
|
|
69
70
|
};
|
|
70
71
|
};
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { GlobalVars } from "../basicUIPlugin.css";
|
|
3
2
|
import type { PropOf } from "../utils";
|
|
4
3
|
import AppBar from "./AppBar";
|
|
5
|
-
export
|
|
4
|
+
export type AppScreenContext = {
|
|
6
5
|
scroll: (args: {
|
|
7
6
|
top: number;
|
|
8
7
|
}) => void;
|
|
9
8
|
};
|
|
10
9
|
export declare function useAppScreen(): AppScreenContext;
|
|
11
|
-
export
|
|
10
|
+
export type AppScreenProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & {
|
|
12
11
|
appBar?: Omit<PropOf<typeof AppBar>, "theme" | "modalPresentationStyle" | "ref" | "key">;
|
|
13
12
|
preventSwipeBack?: boolean;
|
|
14
13
|
CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
export declare const vars:
|
|
2
|
-
transitionDuration:
|
|
1
|
+
export declare const vars: {
|
|
2
|
+
transitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3
3
|
zIndexes: {
|
|
4
|
-
dim:
|
|
5
|
-
paper:
|
|
4
|
+
dim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
5
|
+
paper: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
6
6
|
};
|
|
7
|
-
}
|
|
7
|
+
};
|
|
8
8
|
export declare const enterActive: string;
|
|
9
9
|
export declare const enterDone: string;
|
|
10
10
|
export declare const exitActive: string;
|
|
11
11
|
export declare const exitDone: string;
|
|
12
|
-
export declare const container: import("@vanilla-extract/recipes
|
|
12
|
+
export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
13
13
|
transitionState: {
|
|
14
14
|
"enter-active": string;
|
|
15
15
|
"enter-done": string;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { GlobalVars } from "../basicUIPlugin.css";
|
|
3
|
-
export
|
|
2
|
+
export type BottomSheetProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & Partial<GlobalVars["bottomSheet"]> & {
|
|
4
3
|
paperRef?: React.Ref<HTMLDivElement>;
|
|
5
4
|
onOutsideClick?: React.MouseEventHandler;
|
|
6
5
|
children: React.ReactNode;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
export declare const vars:
|
|
2
|
-
transitionDuration:
|
|
1
|
+
export declare const vars: {
|
|
2
|
+
transitionDuration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3
3
|
zIndexes: {
|
|
4
|
-
dim:
|
|
5
|
-
paper:
|
|
4
|
+
dim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
5
|
+
paper: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
6
6
|
};
|
|
7
|
-
}
|
|
7
|
+
};
|
|
8
8
|
export declare const enterActive: string;
|
|
9
9
|
export declare const enterDone: string;
|
|
10
10
|
export declare const exitActive: string;
|
|
11
11
|
export declare const exitDone: string;
|
|
12
|
-
export declare const container: import("@vanilla-extract/recipes
|
|
12
|
+
export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
13
13
|
transitionState: {
|
|
14
14
|
"enter-active": string;
|
|
15
15
|
"enter-done": string;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { GlobalVars } from "../basicUIPlugin.css";
|
|
3
|
-
export
|
|
2
|
+
export type ModalProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & Partial<GlobalVars["modal"]> & {
|
|
4
3
|
onOutsideClick?: React.MouseEventHandler;
|
|
5
4
|
children: React.ReactNode;
|
|
6
5
|
};
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { ActivityTransitionState } from "@stackflow/core";
|
|
3
2
|
export declare function useStyleEffect<T extends HTMLElement>({ styleName, refs, effect, effectDeps, }: {
|
|
4
3
|
styleName: string;
|
|
@@ -6,6 +5,6 @@ export declare function useStyleEffect<T extends HTMLElement>({ styleName, refs,
|
|
|
6
5
|
effect?: (params: {
|
|
7
6
|
activityTransitionState: ActivityTransitionState;
|
|
8
7
|
refs: Array<React.RefObject<T>>;
|
|
9
|
-
}) => (() => void) |
|
|
8
|
+
}) => (() => void) | undefined;
|
|
10
9
|
effectDeps?: any[];
|
|
11
10
|
}): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useZIndexBase(): number;
|
package/dist/index.css
CHANGED
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
background: none;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
-
/* vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#
|
|
150
|
+
/* vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAA9WUwY6bMBCG73mKuVQCFUcm2d3uOpe+STUYh5iATY1JNq323SsMbIAEkl1VqsoJaTyf/5n5PcsfYZxtH9YPT/B7ARAh3ydGVyomXGfaMDig8QgpLfL9NtNHUmRVIhWJsJScVJLEMifjLH+zeFssO/K3T5Lnqc+Oag2qUlqpFWv+t9rkLbk7Sf0AdIFc2tNFZIDkZ2SNaYkZWrGOvZDSLwHQAEZJ0iW1fAZ0swD4RaSKxSsbXRd2mT+f4nSVUhhBdkImO8sgpEbkm0HPGGRSCTQkMRhLoaz3qbkEYJIIPdoUUtfiJC3Afe9yXnrKgnEQe8EmNmhAeA0YzQH5PJAO2p02wYMwruoTg5IbnWV1u8hRRHtpyXu0CUmVMLC64ruZ2ayGU00Z62gNJELjbo5lWWR4YqC0EoNxhjASeZ+R2m64flyAeoNIg9mTvamk3cEZEXRo5QtDpldcPY1yhp0uiN5dEL1dUN9o95bXYPZ/ZWMEkKOpX5rVxc0VhkVBIjSkednkfDeJK4P1j19XcSbe3opDpEvv9gbHjDt7Afkoxp+ycnbDRa2bJ42Uz+U/Xl+pyuUcZWx3DMLl6rFdhxNPdz3M1s2N/7iX38uqKLSxJXj96XKtSovKeiVuBUEjkEhVCltHfd8pH/l16A4n64N64Cvk+Hp3Vi4VuaYuuCHete9tunShDv9l1ZO6u4L/AD5kWy5DCQAA */
|
|
151
151
|
._1dlf4346 {
|
|
152
152
|
background-color: var(--stackflow-plugin-basic-ui-dim-background-color);
|
|
153
153
|
}
|
|
@@ -163,7 +163,6 @@
|
|
|
163
163
|
._1dlf434i {
|
|
164
164
|
opacity: 0;
|
|
165
165
|
z-index: var(--_1dlf4341);
|
|
166
|
-
will-change: opacity;
|
|
167
166
|
}
|
|
168
167
|
._1q6dj2j0 ._1dlf434i {
|
|
169
168
|
height: 10rem;
|
|
@@ -181,7 +180,6 @@
|
|
|
181
180
|
overflow-y: scroll;
|
|
182
181
|
-webkit-overflow-scrolling: touch;
|
|
183
182
|
z-index: var(--_1dlf4342);
|
|
184
|
-
will-change: transform;
|
|
185
183
|
}
|
|
186
184
|
._1dlf434j::-webkit-scrollbar {
|
|
187
185
|
display: none;
|
|
@@ -206,8 +204,9 @@
|
|
|
206
204
|
transition:
|
|
207
205
|
transform var(--_1dlf4340),
|
|
208
206
|
opacity var(--_1dlf4340),
|
|
209
|
-
|
|
210
|
-
|
|
207
|
+
margin-top var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);
|
|
208
|
+
margin-top: var(--stackflow-plugin-basic-ui-app-bar-height);
|
|
209
|
+
height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));
|
|
211
210
|
}
|
|
212
211
|
._1q6dj2j1 ._1dlf434l {
|
|
213
212
|
transform: translate3d(0, 100%, 0);
|
|
@@ -223,18 +222,18 @@
|
|
|
223
222
|
top: var(--stackflow-plugin-basic-ui-app-bar-height);
|
|
224
223
|
height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));
|
|
225
224
|
}
|
|
226
|
-
@supports (
|
|
225
|
+
@supports (margin-top: constant(safe-area-inset-top)) {
|
|
227
226
|
._1dlf434k {
|
|
228
|
-
|
|
227
|
+
margin-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top)));
|
|
229
228
|
}
|
|
230
229
|
}
|
|
231
|
-
@supports (
|
|
230
|
+
@supports (margin-top: env(safe-area-inset-top)) {
|
|
232
231
|
._1dlf434k {
|
|
233
|
-
|
|
232
|
+
margin-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top)));
|
|
234
233
|
}
|
|
235
234
|
}
|
|
236
235
|
|
|
237
|
-
/* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+
|
|
236
|
+
/* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+1Yy5KjIBTd5yvYdFUyJRbm0Q+zm8XsZjUf0IWKCR0EB0hieqr/fUrUKBrNo1Kz6Ole2XC53Hvu4XCJ++odNjM8XyDwZwRAQjlcE7paax/ssBxDqDQONzETe5iy7YpyGGBFQ7ilEKcpDLCE9ZrJcvQxciuPnvEodkTmyy/3V62wvU2NtwCHm5UUWx7BUDAhL/faXjlZjgB4h5RHJKu8vHoRi+ez+dxMaom5opoK7nf2vXlbWHuF0Vbi/GPigEBkUK1xJPaXexYyInLAawnf78fobfrmgRaSqahyw4ESbKtJ175AI2gvNZvFQiZ+8cmwJrNo7CH04ADkAPQp4HPqPAFSFjiojYhIcUj1wQdo2Y8PcoCHJEk+I0D2+UETp4KkM5MDOQLln41oYfLSANcZtMQNy8rQqoY3XI2Sqg2RmRUicwTLB5QrogFKMxBiFo6hB75di6Ci72QyAegm5HtP8XzoKBqqod36i2pHAjUo5J0k29w5Y9ug27w2Ha5Ck2JDwvpVzYuqeUqBFzef+Y6gBG2v//FNV8DwaGCoOsIEZ+NrukKFYwKxJBgaGYVapBMHhIIrjbken5o2gN53P8J3fVs1Mn2yMr1012Pfa7OgGL7Sy1ATV8T4XHRuOIooX/kAAeQuJElsG58kqT4Yy4iqlOGDD7jgxLJ6MfNXttA0FLzRPDcTrg7tDKFEOeA66td+eyAAYE8jvfbB1J0WCdeVmrpPHQxefBxquiOt3syd9oWN7h9zI5zQxFGmYMvawmR3ZR00yXRPHe5HvGsBqYM6/xhpqLeFTa6reUZvW6VpfICh4Jpw7YOYkSyPQeplfQAgI7H2gVcSIhZcm17LB57rPT9VRGGUk+Ob1nMXR9t9ORYIFi2rto++m6NVamYgsr7+K+x9RTXOXR53PoAZXXFINUmUD0LCNZEn86ynDJxmWXPUxB3jhLKDD3LoGYHqoHT+qPjOKN/8xOEv8/8PwXUn00eE2khVIBkoFwX8p269MVygB0ucb5FIkf67S+SOm527QTqsjppCXfIUubOuUhUSZaFfU/WodcMFSXAGywNULWgJ/4D4nCY3sa+PgIlwY8UdF+1RTtL6Bx7CGE0VVS2OUb4mknbZeBxv+F313XB5mjIvW4EV3mphLzxz7XVK1LNT/rEcffwFqRwZMRcTAAA= */
|
|
238
237
|
._1yk3a450 {
|
|
239
238
|
min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);
|
|
240
239
|
}
|
|
@@ -244,7 +243,6 @@
|
|
|
244
243
|
._1yk3a452 {
|
|
245
244
|
background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);
|
|
246
245
|
z-index: var(--_1dlf4344);
|
|
247
|
-
will-change: transform, opacity;
|
|
248
246
|
transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration);
|
|
249
247
|
}
|
|
250
248
|
._1q6dj2j1 ._1yk3a452 {
|
|
@@ -388,7 +386,7 @@
|
|
|
388
386
|
padding: 0 0.5rem 0 0;
|
|
389
387
|
}
|
|
390
388
|
|
|
391
|
-
/* vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=
|
|
389
|
+
/* vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0KLl8xaHQzOGgwNCAuXzFodDM4aDBlLCAuXzFodDM4aDA1IC5fMWh0MzhoMGUgewogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMCwgMCk7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAxMDAlLCAwKSAhaW1wb3J0YW50OwogIG9wYWNpdHk6IDAgIWltcG9ydGFudDsKfQ== */
|
|
392
390
|
._1ht38h03 {
|
|
393
391
|
transition: var(--_1ht38h00);
|
|
394
392
|
}
|
|
@@ -412,7 +410,6 @@
|
|
|
412
410
|
background-color: var(--stackflow-plugin-basic-ui-background-color);
|
|
413
411
|
width: 100%;
|
|
414
412
|
border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) 0 0;
|
|
415
|
-
will-change: transform, opacity;
|
|
416
413
|
transform: translate3d(0, 100%, 0);
|
|
417
414
|
opacity: 0;
|
|
418
415
|
}
|
|
@@ -427,7 +424,7 @@
|
|
|
427
424
|
opacity: 0 !important;
|
|
428
425
|
}
|
|
429
426
|
|
|
430
|
-
/* vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=
|
|
427
|
+
/* vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQouXzVvemc4YzQgLl81b3pnOGNlLCAuXzVvemc4YzUgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIG9wYWNpdHk6IDE7Cn0KLl81b3pnOGM2IC5fNW96ZzhjZSwgLl81b3pnOGM3IC5fNW96ZzhjZSB7CiAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpOwogIG9wYWNpdHk6IDA7Cn0= */
|
|
431
428
|
._5ozg8c3 {
|
|
432
429
|
transition: var(--_5ozg8c0);
|
|
433
430
|
}
|
|
@@ -456,7 +453,6 @@
|
|
|
456
453
|
0px .5625rem 2.875rem rgba(0, 0, 0, 0.12),
|
|
457
454
|
0px .3125rem .9375rem rgba(0, 0, 0, 0.1);
|
|
458
455
|
border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius);
|
|
459
|
-
will-change: transform, opacity;
|
|
460
456
|
transform: scale(1.1);
|
|
461
457
|
opacity: 0;
|
|
462
458
|
}
|