@tutti-os/ui-system 0.0.229 → 0.0.231
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/NOTICE +31 -0
- package/agent/tutti-ui-system/SKILL.md +6 -4
- package/agent/tutti-ui-system/references/extract-base-component.md +9 -7
- package/dist/dev-vite.js +2 -0
- package/dist/dev-vite.js.map +1 -1
- package/dist/metadata/components.json +107 -0
- package/dist/metadata/components.schema.json +6 -0
- package/dist/metadata/index.d.ts +1 -0
- package/dist/metadata/index.js +107 -0
- package/dist/metadata/index.js.map +1 -1
- package/dist/native.d.ts +222 -0
- package/dist/native.js +405 -0
- package/dist/native.js.map +1 -0
- package/dist/styles/generated/renderer-theme.css +56 -0
- package/dist/styles/native.css +3 -0
- package/dist/styles/native.css.d.ts +1 -0
- package/dist/styles/theme.css +38 -36
- package/package.json +25 -2
- package/ui-system.md +43 -1
package/dist/native.d.ts
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, PropsWithChildren } from 'react';
|
|
3
|
+
import { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
|
|
4
|
+
import { BottomSheetModalProps } from '@gorhom/bottom-sheet';
|
|
5
|
+
|
|
6
|
+
type ButtonVariant = "primary" | "secondary" | "destructive" | "destructiveGhost" | "ghost";
|
|
7
|
+
type ButtonSize = "regular" | "large" | "compact" | "icon";
|
|
8
|
+
interface NativeButtonProps {
|
|
9
|
+
accessibilityLabel?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
label: string;
|
|
12
|
+
leading?: ReactNode;
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
onPress(event: GestureResponderEvent): void;
|
|
15
|
+
size?: ButtonSize;
|
|
16
|
+
style?: StyleProp<ViewStyle>;
|
|
17
|
+
testID?: string;
|
|
18
|
+
variant?: ButtonVariant;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Native counterpart of the UI System Button contract.
|
|
22
|
+
*
|
|
23
|
+
* Its interaction hierarchy is adapted from React Native Reusables' Button,
|
|
24
|
+
* while the styling is deliberately token-backed and platform-native.
|
|
25
|
+
*/
|
|
26
|
+
declare function NativeButton({ accessibilityLabel, disabled, label, leading, loading, onPress, size, style, testID, variant }: NativeButtonProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface NativeIconButtonProps {
|
|
29
|
+
accessibilityLabel: string;
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
icon: ReactNode;
|
|
32
|
+
onPress(event: GestureResponderEvent): void;
|
|
33
|
+
size?: Extract<ButtonSize, "compact" | "icon">;
|
|
34
|
+
style?: StyleProp<ViewStyle>;
|
|
35
|
+
testID?: string;
|
|
36
|
+
variant?: ButtonVariant;
|
|
37
|
+
}
|
|
38
|
+
declare function NativeIconButton({ accessibilityLabel, disabled, icon, onPress, size, style, testID, variant }: NativeIconButtonProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
40
|
+
interface NativeListRowProps {
|
|
41
|
+
accessibilityLabel?: string;
|
|
42
|
+
description?: ReactNode;
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
leading?: ReactNode;
|
|
45
|
+
onPress?(): void;
|
|
46
|
+
selected?: boolean;
|
|
47
|
+
style?: StyleProp<ViewStyle>;
|
|
48
|
+
title: string;
|
|
49
|
+
trailing?: ReactNode;
|
|
50
|
+
}
|
|
51
|
+
declare function NativeListRow({ accessibilityLabel, description, disabled, leading, onPress, selected, style, title, trailing }: NativeListRowProps): react_jsx_runtime.JSX.Element;
|
|
52
|
+
|
|
53
|
+
interface NativeSheetProps {
|
|
54
|
+
children: ReactNode;
|
|
55
|
+
onOpenChange(open: boolean): void;
|
|
56
|
+
open: boolean;
|
|
57
|
+
snapPoints?: BottomSheetModalProps["snapPoints"];
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Controlled modal sheet backed by @gorhom/bottom-sheet.
|
|
61
|
+
*
|
|
62
|
+
* The app root owns BottomSheetModalProvider; callers own whether the sheet is
|
|
63
|
+
* open and what product actions its content performs.
|
|
64
|
+
*/
|
|
65
|
+
declare function NativeSheet({ children, onOpenChange, open, snapPoints }: NativeSheetProps): react_jsx_runtime.JSX.Element;
|
|
66
|
+
|
|
67
|
+
declare const nativeThemeDimensions: {
|
|
68
|
+
readonly control: {
|
|
69
|
+
readonly compact: 40;
|
|
70
|
+
readonly icon: 40;
|
|
71
|
+
readonly large: 52;
|
|
72
|
+
readonly regular: 48;
|
|
73
|
+
readonly row: 60;
|
|
74
|
+
};
|
|
75
|
+
readonly radius: {
|
|
76
|
+
readonly large: 18;
|
|
77
|
+
readonly medium: 12;
|
|
78
|
+
readonly small: 8;
|
|
79
|
+
};
|
|
80
|
+
readonly space: {
|
|
81
|
+
readonly large: 24;
|
|
82
|
+
readonly medium: 16;
|
|
83
|
+
readonly small: 10;
|
|
84
|
+
readonly xlarge: 32;
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
declare const nativeThemes: {
|
|
88
|
+
readonly light: {
|
|
89
|
+
readonly accent: "#4182f5";
|
|
90
|
+
readonly accentPressed: "#3975df";
|
|
91
|
+
readonly background: "#f7f8fa";
|
|
92
|
+
readonly backgroundFronted: "#ffffff";
|
|
93
|
+
readonly backgroundPanel: "#f8fafc";
|
|
94
|
+
readonly border: "#e5e7eb";
|
|
95
|
+
readonly danger: "#dc2626";
|
|
96
|
+
readonly foreground: "#29313d";
|
|
97
|
+
readonly muted: "#6b7280";
|
|
98
|
+
readonly panel: "#f8f8fa";
|
|
99
|
+
readonly scrim: "rgba(0, 0, 0, 0.6)";
|
|
100
|
+
readonly scrimStrong: "rgba(0, 0, 0, 0.64)";
|
|
101
|
+
readonly success: "#22c55e";
|
|
102
|
+
readonly textPrimary: "#3c3c3c";
|
|
103
|
+
readonly textSecondary: "#6c6c6c";
|
|
104
|
+
};
|
|
105
|
+
readonly dark: {
|
|
106
|
+
readonly accent: "#ff6b4a";
|
|
107
|
+
readonly accentPressed: "#eb5839";
|
|
108
|
+
readonly background: "#111216";
|
|
109
|
+
readonly backgroundFronted: "#22252d";
|
|
110
|
+
readonly backgroundPanel: "#1a1c22";
|
|
111
|
+
readonly border: "#30333b";
|
|
112
|
+
readonly danger: "#ff716c";
|
|
113
|
+
readonly foreground: "#f6f6f7";
|
|
114
|
+
readonly muted: "#9398a5";
|
|
115
|
+
readonly panel: "#1a1c22";
|
|
116
|
+
readonly scrim: "rgba(0, 0, 0, 0.6)";
|
|
117
|
+
readonly scrimStrong: "rgba(0, 0, 0, 0.64)";
|
|
118
|
+
readonly success: "#62d49f";
|
|
119
|
+
readonly textPrimary: "#f6f6f7";
|
|
120
|
+
readonly textSecondary: "#c3c6ce";
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
type NativeThemeMode = keyof typeof nativeThemes;
|
|
124
|
+
type NativeThemePalette = (typeof nativeThemes)[NativeThemeMode];
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Resolves a renderer-neutral semantic theme for React Native.
|
|
128
|
+
*/
|
|
129
|
+
declare function resolveNativeTheme(mode: NativeThemeMode): {
|
|
130
|
+
readonly control: {
|
|
131
|
+
readonly compact: 40;
|
|
132
|
+
readonly icon: 40;
|
|
133
|
+
readonly large: 52;
|
|
134
|
+
readonly regular: 48;
|
|
135
|
+
readonly row: 60;
|
|
136
|
+
};
|
|
137
|
+
readonly color: {
|
|
138
|
+
readonly accent: "#4182f5" | "#ff6b4a";
|
|
139
|
+
readonly accentPressed: "#3975df" | "#eb5839";
|
|
140
|
+
readonly background: "#f7f8fa" | "#111216";
|
|
141
|
+
readonly border: "#e5e7eb" | "#30333b";
|
|
142
|
+
readonly danger: "#dc2626" | "#ff716c";
|
|
143
|
+
readonly muted: "#6b7280" | "#9398a5";
|
|
144
|
+
readonly panel: "#f8f8fa" | "#1a1c22";
|
|
145
|
+
readonly panelRaised: "#ffffff" | "#22252d";
|
|
146
|
+
readonly scrim: "rgba(0, 0, 0, 0.6)";
|
|
147
|
+
readonly scrimStrong: "rgba(0, 0, 0, 0.64)";
|
|
148
|
+
readonly success: "#22c55e" | "#62d49f";
|
|
149
|
+
readonly text: "#3c3c3c" | "#f6f6f7";
|
|
150
|
+
readonly textSecondary: "#6c6c6c" | "#c3c6ce";
|
|
151
|
+
};
|
|
152
|
+
readonly mode: "light" | "dark";
|
|
153
|
+
readonly radius: {
|
|
154
|
+
readonly large: 18;
|
|
155
|
+
readonly medium: 12;
|
|
156
|
+
readonly small: 8;
|
|
157
|
+
};
|
|
158
|
+
readonly space: {
|
|
159
|
+
readonly large: 24;
|
|
160
|
+
readonly medium: 16;
|
|
161
|
+
readonly small: 10;
|
|
162
|
+
readonly xlarge: 32;
|
|
163
|
+
};
|
|
164
|
+
};
|
|
165
|
+
/**
|
|
166
|
+
* Backwards-compatible dark Native theme.
|
|
167
|
+
*
|
|
168
|
+
* New components should consume the context-backed `useNativeTheme` hook so
|
|
169
|
+
* they respond to the Native renderer's configured color scheme.
|
|
170
|
+
*/
|
|
171
|
+
declare const nativeTheme: {
|
|
172
|
+
readonly control: {
|
|
173
|
+
readonly compact: 40;
|
|
174
|
+
readonly icon: 40;
|
|
175
|
+
readonly large: 52;
|
|
176
|
+
readonly regular: 48;
|
|
177
|
+
readonly row: 60;
|
|
178
|
+
};
|
|
179
|
+
readonly color: {
|
|
180
|
+
readonly accent: "#4182f5" | "#ff6b4a";
|
|
181
|
+
readonly accentPressed: "#3975df" | "#eb5839";
|
|
182
|
+
readonly background: "#f7f8fa" | "#111216";
|
|
183
|
+
readonly border: "#e5e7eb" | "#30333b";
|
|
184
|
+
readonly danger: "#dc2626" | "#ff716c";
|
|
185
|
+
readonly muted: "#6b7280" | "#9398a5";
|
|
186
|
+
readonly panel: "#f8f8fa" | "#1a1c22";
|
|
187
|
+
readonly panelRaised: "#ffffff" | "#22252d";
|
|
188
|
+
readonly scrim: "rgba(0, 0, 0, 0.6)";
|
|
189
|
+
readonly scrimStrong: "rgba(0, 0, 0, 0.64)";
|
|
190
|
+
readonly success: "#22c55e" | "#62d49f";
|
|
191
|
+
readonly text: "#3c3c3c" | "#f6f6f7";
|
|
192
|
+
readonly textSecondary: "#6c6c6c" | "#c3c6ce";
|
|
193
|
+
};
|
|
194
|
+
readonly mode: "light" | "dark";
|
|
195
|
+
readonly radius: {
|
|
196
|
+
readonly large: 18;
|
|
197
|
+
readonly medium: 12;
|
|
198
|
+
readonly small: 8;
|
|
199
|
+
};
|
|
200
|
+
readonly space: {
|
|
201
|
+
readonly large: 24;
|
|
202
|
+
readonly medium: 16;
|
|
203
|
+
readonly small: 10;
|
|
204
|
+
readonly xlarge: 32;
|
|
205
|
+
};
|
|
206
|
+
};
|
|
207
|
+
type NativeTheme = typeof nativeTheme;
|
|
208
|
+
|
|
209
|
+
type NativeThemePreference = NativeThemeMode | "system";
|
|
210
|
+
interface NativeThemeProviderProps extends PropsWithChildren {
|
|
211
|
+
/** Defaults to the operating system preference when no product override exists. */
|
|
212
|
+
mode?: NativeThemePreference;
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* Supplies the resolved Native semantic theme to UI System primitives and
|
|
216
|
+
* application composition. The provider is intentionally UI-only: product
|
|
217
|
+
* settings decide which preference, if any, it receives.
|
|
218
|
+
*/
|
|
219
|
+
declare function NativeThemeProvider({ children, mode }: NativeThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
220
|
+
declare function useNativeTheme(): NativeTheme;
|
|
221
|
+
|
|
222
|
+
export { type ButtonSize, type ButtonVariant, NativeButton, type NativeButtonProps, NativeIconButton, type NativeIconButtonProps, NativeListRow, type NativeListRowProps, NativeSheet, type NativeSheetProps, type NativeTheme, type NativeThemeMode, type NativeThemePalette, type NativeThemePreference, NativeThemeProvider, type NativeThemeProviderProps, nativeTheme, nativeThemeDimensions, nativeThemes, resolveNativeTheme, useNativeTheme };
|
package/dist/native.js
ADDED
|
@@ -0,0 +1,405 @@
|
|
|
1
|
+
// src/native/button.tsx
|
|
2
|
+
import {
|
|
3
|
+
ActivityIndicator,
|
|
4
|
+
Pressable,
|
|
5
|
+
StyleSheet,
|
|
6
|
+
Text,
|
|
7
|
+
View
|
|
8
|
+
} from "react-native";
|
|
9
|
+
|
|
10
|
+
// src/native/theme-provider.tsx
|
|
11
|
+
import {
|
|
12
|
+
createContext,
|
|
13
|
+
useContext,
|
|
14
|
+
useMemo
|
|
15
|
+
} from "react";
|
|
16
|
+
import { useColorScheme } from "react-native";
|
|
17
|
+
|
|
18
|
+
// src/native/generated-tokens.ts
|
|
19
|
+
var nativeThemeDimensions = {
|
|
20
|
+
control: {
|
|
21
|
+
compact: 40,
|
|
22
|
+
icon: 40,
|
|
23
|
+
large: 52,
|
|
24
|
+
regular: 48,
|
|
25
|
+
row: 60
|
|
26
|
+
},
|
|
27
|
+
radius: {
|
|
28
|
+
large: 18,
|
|
29
|
+
medium: 12,
|
|
30
|
+
small: 8
|
|
31
|
+
},
|
|
32
|
+
space: {
|
|
33
|
+
large: 24,
|
|
34
|
+
medium: 16,
|
|
35
|
+
small: 10,
|
|
36
|
+
xlarge: 32
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
var nativeThemes = {
|
|
40
|
+
light: {
|
|
41
|
+
accent: "#4182f5",
|
|
42
|
+
accentPressed: "#3975df",
|
|
43
|
+
background: "#f7f8fa",
|
|
44
|
+
backgroundFronted: "#ffffff",
|
|
45
|
+
backgroundPanel: "#f8fafc",
|
|
46
|
+
border: "#e5e7eb",
|
|
47
|
+
danger: "#dc2626",
|
|
48
|
+
foreground: "#29313d",
|
|
49
|
+
muted: "#6b7280",
|
|
50
|
+
panel: "#f8f8fa",
|
|
51
|
+
scrim: "rgba(0, 0, 0, 0.6)",
|
|
52
|
+
scrimStrong: "rgba(0, 0, 0, 0.64)",
|
|
53
|
+
success: "#22c55e",
|
|
54
|
+
textPrimary: "#3c3c3c",
|
|
55
|
+
textSecondary: "#6c6c6c"
|
|
56
|
+
},
|
|
57
|
+
dark: {
|
|
58
|
+
accent: "#ff6b4a",
|
|
59
|
+
accentPressed: "#eb5839",
|
|
60
|
+
background: "#111216",
|
|
61
|
+
backgroundFronted: "#22252d",
|
|
62
|
+
backgroundPanel: "#1a1c22",
|
|
63
|
+
border: "#30333b",
|
|
64
|
+
danger: "#ff716c",
|
|
65
|
+
foreground: "#f6f6f7",
|
|
66
|
+
muted: "#9398a5",
|
|
67
|
+
panel: "#1a1c22",
|
|
68
|
+
scrim: "rgba(0, 0, 0, 0.6)",
|
|
69
|
+
scrimStrong: "rgba(0, 0, 0, 0.64)",
|
|
70
|
+
success: "#62d49f",
|
|
71
|
+
textPrimary: "#f6f6f7",
|
|
72
|
+
textSecondary: "#c3c6ce"
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
// src/native/tokens.ts
|
|
77
|
+
function resolveNativeTheme(mode) {
|
|
78
|
+
const palette = nativeThemes[mode];
|
|
79
|
+
return {
|
|
80
|
+
control: nativeThemeDimensions.control,
|
|
81
|
+
color: {
|
|
82
|
+
accent: palette.accent,
|
|
83
|
+
accentPressed: palette.accentPressed,
|
|
84
|
+
background: palette.background,
|
|
85
|
+
border: palette.border,
|
|
86
|
+
danger: palette.danger,
|
|
87
|
+
muted: palette.muted,
|
|
88
|
+
panel: palette.panel,
|
|
89
|
+
panelRaised: palette.backgroundFronted,
|
|
90
|
+
scrim: palette.scrim,
|
|
91
|
+
scrimStrong: palette.scrimStrong,
|
|
92
|
+
success: palette.success,
|
|
93
|
+
text: palette.textPrimary,
|
|
94
|
+
textSecondary: palette.textSecondary
|
|
95
|
+
},
|
|
96
|
+
mode,
|
|
97
|
+
radius: nativeThemeDimensions.radius,
|
|
98
|
+
space: nativeThemeDimensions.space
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
var nativeTheme = resolveNativeTheme("dark");
|
|
102
|
+
|
|
103
|
+
// src/native/theme-provider.tsx
|
|
104
|
+
import { jsx } from "react/jsx-runtime";
|
|
105
|
+
var NativeThemeContext = createContext(nativeTheme);
|
|
106
|
+
function NativeThemeProvider({
|
|
107
|
+
children,
|
|
108
|
+
mode = "system"
|
|
109
|
+
}) {
|
|
110
|
+
const systemMode = useColorScheme();
|
|
111
|
+
const resolvedMode = mode === "system" ? systemMode === "light" ? "light" : "dark" : mode;
|
|
112
|
+
const theme = useMemo(() => resolveNativeTheme(resolvedMode), [resolvedMode]);
|
|
113
|
+
return /* @__PURE__ */ jsx(NativeThemeContext.Provider, { value: theme, children });
|
|
114
|
+
}
|
|
115
|
+
function useNativeTheme() {
|
|
116
|
+
return useContext(NativeThemeContext);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// src/native/button.tsx
|
|
120
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
121
|
+
function NativeButton({
|
|
122
|
+
accessibilityLabel,
|
|
123
|
+
disabled = false,
|
|
124
|
+
label,
|
|
125
|
+
leading,
|
|
126
|
+
loading = false,
|
|
127
|
+
onPress,
|
|
128
|
+
size = "regular",
|
|
129
|
+
style,
|
|
130
|
+
testID,
|
|
131
|
+
variant = "primary"
|
|
132
|
+
}) {
|
|
133
|
+
const theme = useNativeTheme();
|
|
134
|
+
const styles2 = createStyles(theme);
|
|
135
|
+
const unavailable = disabled || loading;
|
|
136
|
+
const foreground = textColorByVariant(theme)[variant];
|
|
137
|
+
const hasLabel = label.trim().length > 0;
|
|
138
|
+
return /* @__PURE__ */ jsx2(
|
|
139
|
+
Pressable,
|
|
140
|
+
{
|
|
141
|
+
accessibilityLabel: accessibilityLabel ?? label,
|
|
142
|
+
accessibilityRole: "button",
|
|
143
|
+
accessibilityState: { busy: loading, disabled: unavailable },
|
|
144
|
+
disabled: unavailable,
|
|
145
|
+
onPress,
|
|
146
|
+
style: ({ pressed }) => [
|
|
147
|
+
styles2.button,
|
|
148
|
+
styles2[size],
|
|
149
|
+
variantStyles(theme)[variant],
|
|
150
|
+
pressed && !unavailable ? styles2.pressed : void 0,
|
|
151
|
+
unavailable ? styles2.disabled : void 0,
|
|
152
|
+
style
|
|
153
|
+
],
|
|
154
|
+
testID,
|
|
155
|
+
children: loading ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: foreground, size: "small" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
156
|
+
leading ? /* @__PURE__ */ jsx2(View, { style: [styles2.leading, !hasLabel && styles2.leadingOnly], children: leading }) : null,
|
|
157
|
+
hasLabel ? /* @__PURE__ */ jsx2(
|
|
158
|
+
Text,
|
|
159
|
+
{
|
|
160
|
+
numberOfLines: 1,
|
|
161
|
+
style: [styles2.label, { color: foreground }],
|
|
162
|
+
children: label
|
|
163
|
+
}
|
|
164
|
+
) : null
|
|
165
|
+
] })
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
function textColorByVariant(theme) {
|
|
170
|
+
return {
|
|
171
|
+
primary: theme.color.background,
|
|
172
|
+
secondary: theme.color.text,
|
|
173
|
+
destructive: theme.color.background,
|
|
174
|
+
destructiveGhost: theme.color.danger,
|
|
175
|
+
ghost: theme.color.text
|
|
176
|
+
};
|
|
177
|
+
}
|
|
178
|
+
function variantStyles(theme) {
|
|
179
|
+
return {
|
|
180
|
+
primary: { backgroundColor: theme.color.accent },
|
|
181
|
+
secondary: {
|
|
182
|
+
backgroundColor: theme.color.panelRaised,
|
|
183
|
+
borderColor: theme.color.border,
|
|
184
|
+
borderWidth: StyleSheet.hairlineWidth
|
|
185
|
+
},
|
|
186
|
+
destructive: { backgroundColor: theme.color.danger },
|
|
187
|
+
destructiveGhost: { backgroundColor: "transparent" },
|
|
188
|
+
ghost: { backgroundColor: "transparent" }
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
function createStyles(theme) {
|
|
192
|
+
return StyleSheet.create({
|
|
193
|
+
button: {
|
|
194
|
+
alignItems: "center",
|
|
195
|
+
borderRadius: theme.radius.medium,
|
|
196
|
+
flexDirection: "row",
|
|
197
|
+
justifyContent: "center"
|
|
198
|
+
},
|
|
199
|
+
compact: {
|
|
200
|
+
minHeight: theme.control.compact,
|
|
201
|
+
paddingHorizontal: theme.space.small
|
|
202
|
+
},
|
|
203
|
+
disabled: { opacity: 0.45 },
|
|
204
|
+
icon: {
|
|
205
|
+
height: theme.control.icon,
|
|
206
|
+
paddingHorizontal: 0,
|
|
207
|
+
width: theme.control.icon
|
|
208
|
+
},
|
|
209
|
+
label: { fontSize: theme.space.medium, fontWeight: "700" },
|
|
210
|
+
large: {
|
|
211
|
+
minHeight: theme.control.large,
|
|
212
|
+
paddingHorizontal: theme.space.medium
|
|
213
|
+
},
|
|
214
|
+
leading: { marginRight: theme.space.small },
|
|
215
|
+
leadingOnly: { marginRight: 0 },
|
|
216
|
+
pressed: { opacity: 0.82 },
|
|
217
|
+
regular: {
|
|
218
|
+
minHeight: theme.control.regular,
|
|
219
|
+
paddingHorizontal: theme.space.medium
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
// src/native/icon-button.tsx
|
|
225
|
+
import {
|
|
226
|
+
StyleSheet as StyleSheet2
|
|
227
|
+
} from "react-native";
|
|
228
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
229
|
+
function NativeIconButton({
|
|
230
|
+
accessibilityLabel,
|
|
231
|
+
disabled = false,
|
|
232
|
+
icon,
|
|
233
|
+
onPress,
|
|
234
|
+
size = "icon",
|
|
235
|
+
style,
|
|
236
|
+
testID,
|
|
237
|
+
variant = "ghost"
|
|
238
|
+
}) {
|
|
239
|
+
return /* @__PURE__ */ jsx3(
|
|
240
|
+
NativeButton,
|
|
241
|
+
{
|
|
242
|
+
accessibilityLabel,
|
|
243
|
+
disabled,
|
|
244
|
+
label: "",
|
|
245
|
+
leading: icon,
|
|
246
|
+
onPress,
|
|
247
|
+
size,
|
|
248
|
+
style: [styles.button, style],
|
|
249
|
+
testID,
|
|
250
|
+
variant
|
|
251
|
+
}
|
|
252
|
+
);
|
|
253
|
+
}
|
|
254
|
+
var styles = StyleSheet2.create({
|
|
255
|
+
button: { paddingHorizontal: 0 }
|
|
256
|
+
});
|
|
257
|
+
|
|
258
|
+
// src/native/list-row.tsx
|
|
259
|
+
import {
|
|
260
|
+
Pressable as Pressable2,
|
|
261
|
+
StyleSheet as StyleSheet3,
|
|
262
|
+
Text as Text2,
|
|
263
|
+
View as View2
|
|
264
|
+
} from "react-native";
|
|
265
|
+
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
266
|
+
function NativeListRow({
|
|
267
|
+
accessibilityLabel,
|
|
268
|
+
description,
|
|
269
|
+
disabled = false,
|
|
270
|
+
leading,
|
|
271
|
+
onPress,
|
|
272
|
+
selected = false,
|
|
273
|
+
style,
|
|
274
|
+
title,
|
|
275
|
+
trailing
|
|
276
|
+
}) {
|
|
277
|
+
const theme = useNativeTheme();
|
|
278
|
+
const styles2 = createStyles2(theme);
|
|
279
|
+
const interactive = onPress !== void 0;
|
|
280
|
+
return /* @__PURE__ */ jsxs2(
|
|
281
|
+
Pressable2,
|
|
282
|
+
{
|
|
283
|
+
accessibilityLabel: accessibilityLabel ?? title,
|
|
284
|
+
accessibilityRole: interactive ? "button" : void 0,
|
|
285
|
+
accessibilityState: { disabled, selected },
|
|
286
|
+
disabled: !interactive || disabled,
|
|
287
|
+
onPress,
|
|
288
|
+
style: ({ pressed }) => [
|
|
289
|
+
styles2.row,
|
|
290
|
+
selected ? styles2.selected : void 0,
|
|
291
|
+
pressed && interactive && !disabled ? styles2.pressed : void 0,
|
|
292
|
+
disabled ? styles2.disabled : void 0,
|
|
293
|
+
style
|
|
294
|
+
],
|
|
295
|
+
children: [
|
|
296
|
+
selected ? /* @__PURE__ */ jsx4(View2, { style: styles2.selectedIndicator }) : null,
|
|
297
|
+
leading ? /* @__PURE__ */ jsx4(View2, { style: styles2.leading, children: leading }) : null,
|
|
298
|
+
/* @__PURE__ */ jsxs2(View2, { style: styles2.copy, children: [
|
|
299
|
+
/* @__PURE__ */ jsx4(
|
|
300
|
+
Text2,
|
|
301
|
+
{
|
|
302
|
+
numberOfLines: 2,
|
|
303
|
+
style: [styles2.title, selected ? styles2.titleSelected : void 0],
|
|
304
|
+
children: title
|
|
305
|
+
}
|
|
306
|
+
),
|
|
307
|
+
typeof description === "string" ? /* @__PURE__ */ jsx4(Text2, { numberOfLines: 1, style: styles2.description, children: description }) : description ? /* @__PURE__ */ jsx4(View2, { style: styles2.descriptionSlot, children: description }) : null
|
|
308
|
+
] }),
|
|
309
|
+
trailing ? /* @__PURE__ */ jsx4(View2, { style: styles2.trailing, children: trailing }) : null
|
|
310
|
+
]
|
|
311
|
+
}
|
|
312
|
+
);
|
|
313
|
+
}
|
|
314
|
+
function createStyles2(theme) {
|
|
315
|
+
return StyleSheet3.create({
|
|
316
|
+
copy: { flex: 1, paddingVertical: theme.space.small },
|
|
317
|
+
description: {
|
|
318
|
+
color: theme.color.muted,
|
|
319
|
+
fontSize: theme.space.small,
|
|
320
|
+
marginTop: theme.space.small / 2
|
|
321
|
+
},
|
|
322
|
+
descriptionSlot: { marginTop: theme.space.small / 2 },
|
|
323
|
+
disabled: { opacity: 0.45 },
|
|
324
|
+
leading: { marginRight: theme.space.small },
|
|
325
|
+
pressed: { opacity: 0.7 },
|
|
326
|
+
row: {
|
|
327
|
+
alignItems: "center",
|
|
328
|
+
borderRadius: theme.radius.small,
|
|
329
|
+
flexDirection: "row",
|
|
330
|
+
minHeight: theme.control.row,
|
|
331
|
+
overflow: "hidden",
|
|
332
|
+
paddingHorizontal: theme.space.small
|
|
333
|
+
},
|
|
334
|
+
selected: { backgroundColor: theme.color.panelRaised },
|
|
335
|
+
selectedIndicator: {
|
|
336
|
+
backgroundColor: theme.color.accent,
|
|
337
|
+
borderRadius: theme.radius.small / 2,
|
|
338
|
+
bottom: theme.radius.small,
|
|
339
|
+
left: 0,
|
|
340
|
+
position: "absolute",
|
|
341
|
+
top: theme.radius.small,
|
|
342
|
+
width: theme.radius.small / 2
|
|
343
|
+
},
|
|
344
|
+
title: {
|
|
345
|
+
color: theme.color.textSecondary,
|
|
346
|
+
fontSize: theme.space.medium - 2,
|
|
347
|
+
fontWeight: "600",
|
|
348
|
+
lineHeight: theme.space.medium + theme.space.small - 1
|
|
349
|
+
},
|
|
350
|
+
titleSelected: { color: theme.color.text },
|
|
351
|
+
trailing: { marginLeft: theme.space.small }
|
|
352
|
+
});
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
// src/native/sheet.tsx
|
|
356
|
+
import {
|
|
357
|
+
BottomSheetModal
|
|
358
|
+
} from "@gorhom/bottom-sheet";
|
|
359
|
+
import { useEffect, useRef } from "react";
|
|
360
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
361
|
+
function NativeSheet({
|
|
362
|
+
children,
|
|
363
|
+
onOpenChange,
|
|
364
|
+
open,
|
|
365
|
+
snapPoints
|
|
366
|
+
}) {
|
|
367
|
+
const theme = useNativeTheme();
|
|
368
|
+
const sheet = useRef(null);
|
|
369
|
+
useEffect(() => {
|
|
370
|
+
if (open) {
|
|
371
|
+
sheet.current?.present();
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
sheet.current?.dismiss();
|
|
375
|
+
}, [open]);
|
|
376
|
+
return /* @__PURE__ */ jsx5(
|
|
377
|
+
BottomSheetModal,
|
|
378
|
+
{
|
|
379
|
+
backgroundStyle: {
|
|
380
|
+
backgroundColor: theme.color.panelRaised,
|
|
381
|
+
borderTopLeftRadius: theme.radius.large,
|
|
382
|
+
borderTopRightRadius: theme.radius.large
|
|
383
|
+
},
|
|
384
|
+
enableDynamicSizing: snapPoints === void 0,
|
|
385
|
+
handleIndicatorStyle: { backgroundColor: theme.color.muted },
|
|
386
|
+
onDismiss: () => onOpenChange(false),
|
|
387
|
+
ref: sheet,
|
|
388
|
+
snapPoints,
|
|
389
|
+
children
|
|
390
|
+
}
|
|
391
|
+
);
|
|
392
|
+
}
|
|
393
|
+
export {
|
|
394
|
+
NativeButton,
|
|
395
|
+
NativeIconButton,
|
|
396
|
+
NativeListRow,
|
|
397
|
+
NativeSheet,
|
|
398
|
+
NativeThemeProvider,
|
|
399
|
+
nativeTheme,
|
|
400
|
+
nativeThemeDimensions,
|
|
401
|
+
nativeThemes,
|
|
402
|
+
resolveNativeTheme,
|
|
403
|
+
useNativeTheme
|
|
404
|
+
};
|
|
405
|
+
//# sourceMappingURL=native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/native/button.tsx","../src/native/theme-provider.tsx","../src/native/generated-tokens.ts","../src/native/tokens.ts","../src/native/icon-button.tsx","../src/native/list-row.tsx","../src/native/sheet.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n ActivityIndicator,\n type GestureResponderEvent,\n Pressable,\n StyleSheet,\n Text,\n View,\n type StyleProp,\n type ViewStyle\n} from \"react-native\";\nimport { type NativeTheme } from \"./tokens\";\nimport { useNativeTheme } from \"./theme-provider\";\n\nexport type ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"destructive\"\n | \"destructiveGhost\"\n | \"ghost\";\n\nexport type ButtonSize = \"regular\" | \"large\" | \"compact\" | \"icon\";\n\nexport interface NativeButtonProps {\n accessibilityLabel?: string;\n disabled?: boolean;\n label: string;\n leading?: ReactNode;\n loading?: boolean;\n onPress(event: GestureResponderEvent): void;\n size?: ButtonSize;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n variant?: ButtonVariant;\n}\n\n/**\n * Native counterpart of the UI System Button contract.\n *\n * Its interaction hierarchy is adapted from React Native Reusables' Button,\n * while the styling is deliberately token-backed and platform-native.\n */\nexport function NativeButton({\n accessibilityLabel,\n disabled = false,\n label,\n leading,\n loading = false,\n onPress,\n size = \"regular\",\n style,\n testID,\n variant = \"primary\"\n}: NativeButtonProps) {\n const theme = useNativeTheme();\n const styles = createStyles(theme);\n const unavailable = disabled || loading;\n const foreground = textColorByVariant(theme)[variant];\n const hasLabel = label.trim().length > 0;\n\n return (\n <Pressable\n accessibilityLabel={accessibilityLabel ?? label}\n accessibilityRole=\"button\"\n accessibilityState={{ busy: loading, disabled: unavailable }}\n disabled={unavailable}\n onPress={onPress}\n style={({ pressed }) => [\n styles.button,\n styles[size],\n variantStyles(theme)[variant],\n pressed && !unavailable ? styles.pressed : undefined,\n unavailable ? styles.disabled : undefined,\n style\n ]}\n testID={testID}\n >\n {loading ? (\n <ActivityIndicator color={foreground} size=\"small\" />\n ) : (\n <>\n {leading ? (\n <View style={[styles.leading, !hasLabel && styles.leadingOnly]}>\n {leading}\n </View>\n ) : null}\n {hasLabel ? (\n <Text\n numberOfLines={1}\n style={[styles.label, { color: foreground }]}\n >\n {label}\n </Text>\n ) : null}\n </>\n )}\n </Pressable>\n );\n}\n\nfunction textColorByVariant(theme: NativeTheme): Record<ButtonVariant, string> {\n return {\n primary: theme.color.background,\n secondary: theme.color.text,\n destructive: theme.color.background,\n destructiveGhost: theme.color.danger,\n ghost: theme.color.text\n };\n}\n\nfunction variantStyles(theme: NativeTheme): Record<ButtonVariant, ViewStyle> {\n return {\n primary: { backgroundColor: theme.color.accent },\n secondary: {\n backgroundColor: theme.color.panelRaised,\n borderColor: theme.color.border,\n borderWidth: StyleSheet.hairlineWidth\n },\n destructive: { backgroundColor: theme.color.danger },\n destructiveGhost: { backgroundColor: \"transparent\" },\n ghost: { backgroundColor: \"transparent\" }\n };\n}\n\nfunction createStyles(theme: NativeTheme) {\n return StyleSheet.create({\n button: {\n alignItems: \"center\",\n borderRadius: theme.radius.medium,\n flexDirection: \"row\",\n justifyContent: \"center\"\n },\n compact: {\n minHeight: theme.control.compact,\n paddingHorizontal: theme.space.small\n },\n disabled: { opacity: 0.45 },\n icon: {\n height: theme.control.icon,\n paddingHorizontal: 0,\n width: theme.control.icon\n },\n label: { fontSize: theme.space.medium, fontWeight: \"700\" },\n large: {\n minHeight: theme.control.large,\n paddingHorizontal: theme.space.medium\n },\n leading: { marginRight: theme.space.small },\n leadingOnly: { marginRight: 0 },\n pressed: { opacity: 0.82 },\n regular: {\n minHeight: theme.control.regular,\n paddingHorizontal: theme.space.medium\n }\n });\n}\n","import {\n createContext,\n type PropsWithChildren,\n useContext,\n useMemo\n} from \"react\";\nimport { useColorScheme } from \"react-native\";\nimport {\n nativeTheme,\n resolveNativeTheme,\n type NativeTheme,\n type NativeThemeMode\n} from \"./tokens\";\n\nexport type NativeThemePreference = NativeThemeMode | \"system\";\n\nconst NativeThemeContext = createContext<NativeTheme>(nativeTheme);\n\nexport interface NativeThemeProviderProps extends PropsWithChildren {\n /** Defaults to the operating system preference when no product override exists. */\n mode?: NativeThemePreference;\n}\n\n/**\n * Supplies the resolved Native semantic theme to UI System primitives and\n * application composition. The provider is intentionally UI-only: product\n * settings decide which preference, if any, it receives.\n */\nexport function NativeThemeProvider({\n children,\n mode = \"system\"\n}: NativeThemeProviderProps) {\n const systemMode = useColorScheme();\n const resolvedMode =\n mode === \"system\" ? (systemMode === \"light\" ? \"light\" : \"dark\") : mode;\n const theme = useMemo(() => resolveNativeTheme(resolvedMode), [resolvedMode]);\n\n return (\n <NativeThemeContext.Provider value={theme}>\n {children}\n </NativeThemeContext.Provider>\n );\n}\n\nexport function useNativeTheme(): NativeTheme {\n return useContext(NativeThemeContext);\n}\n","/* This file is generated from ../tokens/renderer-theme.json. Do not edit it directly. */\nexport const nativeThemeDimensions = {\n control: {\n compact: 40,\n icon: 40,\n large: 52,\n regular: 48,\n row: 60\n },\n radius: {\n large: 18,\n medium: 12,\n small: 8\n },\n space: {\n large: 24,\n medium: 16,\n small: 10,\n xlarge: 32\n }\n} as const;\n\nexport const nativeThemes = {\n light: {\n accent: \"#4182f5\",\n accentPressed: \"#3975df\",\n background: \"#f7f8fa\",\n backgroundFronted: \"#ffffff\",\n backgroundPanel: \"#f8fafc\",\n border: \"#e5e7eb\",\n danger: \"#dc2626\",\n foreground: \"#29313d\",\n muted: \"#6b7280\",\n panel: \"#f8f8fa\",\n scrim: \"rgba(0, 0, 0, 0.6)\",\n scrimStrong: \"rgba(0, 0, 0, 0.64)\",\n success: \"#22c55e\",\n textPrimary: \"#3c3c3c\",\n textSecondary: \"#6c6c6c\"\n },\n dark: {\n accent: \"#ff6b4a\",\n accentPressed: \"#eb5839\",\n background: \"#111216\",\n backgroundFronted: \"#22252d\",\n backgroundPanel: \"#1a1c22\",\n border: \"#30333b\",\n danger: \"#ff716c\",\n foreground: \"#f6f6f7\",\n muted: \"#9398a5\",\n panel: \"#1a1c22\",\n scrim: \"rgba(0, 0, 0, 0.6)\",\n scrimStrong: \"rgba(0, 0, 0, 0.64)\",\n success: \"#62d49f\",\n textPrimary: \"#f6f6f7\",\n textSecondary: \"#c3c6ce\"\n }\n} as const;\n\nexport type NativeThemeMode = keyof typeof nativeThemes;\nexport type NativeThemePalette = (typeof nativeThemes)[NativeThemeMode];\n","import {\n nativeThemeDimensions,\n nativeThemes,\n type NativeThemeMode,\n type NativeThemePalette\n} from \"./generated-tokens\";\n\nexport { nativeThemeDimensions, nativeThemes };\nexport type { NativeThemeMode, NativeThemePalette };\n\n/**\n * Resolves a renderer-neutral semantic theme for React Native.\n */\nexport function resolveNativeTheme(mode: NativeThemeMode) {\n const palette = nativeThemes[mode];\n\n return {\n control: nativeThemeDimensions.control,\n color: {\n accent: palette.accent,\n accentPressed: palette.accentPressed,\n background: palette.background,\n border: palette.border,\n danger: palette.danger,\n muted: palette.muted,\n panel: palette.panel,\n panelRaised: palette.backgroundFronted,\n scrim: palette.scrim,\n scrimStrong: palette.scrimStrong,\n success: palette.success,\n text: palette.textPrimary,\n textSecondary: palette.textSecondary\n },\n mode,\n radius: nativeThemeDimensions.radius,\n space: nativeThemeDimensions.space\n } as const;\n}\n\n/**\n * Backwards-compatible dark Native theme.\n *\n * New components should consume the context-backed `useNativeTheme` hook so\n * they respond to the Native renderer's configured color scheme.\n */\nexport const nativeTheme = resolveNativeTheme(\"dark\");\n\nexport type NativeTheme = typeof nativeTheme;\n","import type { ReactNode } from \"react\";\nimport {\n StyleSheet,\n type GestureResponderEvent,\n type StyleProp,\n type ViewStyle\n} from \"react-native\";\nimport { NativeButton, type ButtonSize, type ButtonVariant } from \"./button\";\n\nexport interface NativeIconButtonProps {\n accessibilityLabel: string;\n disabled?: boolean;\n icon: ReactNode;\n onPress(event: GestureResponderEvent): void;\n size?: Extract<ButtonSize, \"compact\" | \"icon\">;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n variant?: ButtonVariant;\n}\n\nexport function NativeIconButton({\n accessibilityLabel,\n disabled = false,\n icon,\n onPress,\n size = \"icon\",\n style,\n testID,\n variant = \"ghost\"\n}: NativeIconButtonProps) {\n return (\n <NativeButton\n accessibilityLabel={accessibilityLabel}\n disabled={disabled}\n label=\"\"\n leading={icon}\n onPress={onPress}\n size={size}\n style={[styles.button, style]}\n testID={testID}\n variant={variant}\n />\n );\n}\n\nconst styles = StyleSheet.create({\n button: { paddingHorizontal: 0 }\n});\n","import type { ReactNode } from \"react\";\nimport {\n Pressable,\n StyleSheet,\n Text,\n View,\n type StyleProp,\n type ViewStyle\n} from \"react-native\";\nimport { type NativeTheme } from \"./tokens\";\nimport { useNativeTheme } from \"./theme-provider\";\n\nexport interface NativeListRowProps {\n accessibilityLabel?: string;\n description?: ReactNode;\n disabled?: boolean;\n leading?: ReactNode;\n onPress?(): void;\n selected?: boolean;\n style?: StyleProp<ViewStyle>;\n title: string;\n trailing?: ReactNode;\n}\n\nexport function NativeListRow({\n accessibilityLabel,\n description,\n disabled = false,\n leading,\n onPress,\n selected = false,\n style,\n title,\n trailing\n}: NativeListRowProps) {\n const theme = useNativeTheme();\n const styles = createStyles(theme);\n const interactive = onPress !== undefined;\n\n return (\n <Pressable\n accessibilityLabel={accessibilityLabel ?? title}\n accessibilityRole={interactive ? \"button\" : undefined}\n accessibilityState={{ disabled, selected }}\n disabled={!interactive || disabled}\n onPress={onPress}\n style={({ pressed }) => [\n styles.row,\n selected ? styles.selected : undefined,\n pressed && interactive && !disabled ? styles.pressed : undefined,\n disabled ? styles.disabled : undefined,\n style\n ]}\n >\n {selected ? <View style={styles.selectedIndicator} /> : null}\n {leading ? <View style={styles.leading}>{leading}</View> : null}\n <View style={styles.copy}>\n <Text\n numberOfLines={2}\n style={[styles.title, selected ? styles.titleSelected : undefined]}\n >\n {title}\n </Text>\n {typeof description === \"string\" ? (\n <Text numberOfLines={1} style={styles.description}>\n {description}\n </Text>\n ) : description ? (\n <View style={styles.descriptionSlot}>{description}</View>\n ) : null}\n </View>\n {trailing ? <View style={styles.trailing}>{trailing}</View> : null}\n </Pressable>\n );\n}\n\nfunction createStyles(theme: NativeTheme) {\n return StyleSheet.create({\n copy: { flex: 1, paddingVertical: theme.space.small },\n description: {\n color: theme.color.muted,\n fontSize: theme.space.small,\n marginTop: theme.space.small / 2\n },\n descriptionSlot: { marginTop: theme.space.small / 2 },\n disabled: { opacity: 0.45 },\n leading: { marginRight: theme.space.small },\n pressed: { opacity: 0.7 },\n row: {\n alignItems: \"center\",\n borderRadius: theme.radius.small,\n flexDirection: \"row\",\n minHeight: theme.control.row,\n overflow: \"hidden\",\n paddingHorizontal: theme.space.small\n },\n selected: { backgroundColor: theme.color.panelRaised },\n selectedIndicator: {\n backgroundColor: theme.color.accent,\n borderRadius: theme.radius.small / 2,\n bottom: theme.radius.small,\n left: 0,\n position: \"absolute\",\n top: theme.radius.small,\n width: theme.radius.small / 2\n },\n title: {\n color: theme.color.textSecondary,\n fontSize: theme.space.medium - 2,\n fontWeight: \"600\",\n lineHeight: theme.space.medium + theme.space.small - 1\n },\n titleSelected: { color: theme.color.text },\n trailing: { marginLeft: theme.space.small }\n });\n}\n","import {\n BottomSheetModal,\n type BottomSheetModalProps\n} from \"@gorhom/bottom-sheet\";\nimport { useEffect, useRef, type ReactNode } from \"react\";\nimport { useNativeTheme } from \"./theme-provider\";\n\nexport interface NativeSheetProps {\n children: ReactNode;\n onOpenChange(open: boolean): void;\n open: boolean;\n snapPoints?: BottomSheetModalProps[\"snapPoints\"];\n}\n\n/**\n * Controlled modal sheet backed by @gorhom/bottom-sheet.\n *\n * The app root owns BottomSheetModalProvider; callers own whether the sheet is\n * open and what product actions its content performs.\n */\nexport function NativeSheet({\n children,\n onOpenChange,\n open,\n snapPoints\n}: NativeSheetProps) {\n const theme = useNativeTheme();\n const sheet = useRef<BottomSheetModal>(null);\n\n useEffect(() => {\n if (open) {\n sheet.current?.present();\n return;\n }\n\n sheet.current?.dismiss();\n }, [open]);\n\n return (\n <BottomSheetModal\n backgroundStyle={{\n backgroundColor: theme.color.panelRaised,\n borderTopLeftRadius: theme.radius.large,\n borderTopRightRadius: theme.radius.large\n }}\n enableDynamicSizing={snapPoints === undefined}\n handleIndicatorStyle={{ backgroundColor: theme.color.muted }}\n onDismiss={() => onOpenChange(false)}\n ref={sheet}\n snapPoints={snapPoints}\n >\n {children}\n </BottomSheetModal>\n );\n}\n"],"mappings":"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","names":["jsx","styles","StyleSheet","jsx","StyleSheet","Pressable","StyleSheet","Text","View","jsx","jsxs","styles","createStyles","Pressable","View","Text","StyleSheet","jsx"]}
|