@tutti-os/ui-system 0.0.261 → 0.0.263
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/metadata/components.json +1 -1
- package/dist/metadata/index.js +1 -1
- package/dist/metadata/index.js.map +1 -1
- package/dist/native.js +10 -2
- package/dist/native.js.map +1 -1
- package/package.json +1 -1
- package/ui-system.md +6 -4
package/dist/native.js
CHANGED
|
@@ -367,7 +367,13 @@ function createStyles2(theme) {
|
|
|
367
367
|
}
|
|
368
368
|
|
|
369
369
|
// src/native/sheet.tsx
|
|
370
|
-
import {
|
|
370
|
+
import {
|
|
371
|
+
KeyboardAvoidingView,
|
|
372
|
+
Modal,
|
|
373
|
+
Platform,
|
|
374
|
+
Pressable as Pressable3,
|
|
375
|
+
StyleSheet as StyleSheet4
|
|
376
|
+
} from "react-native";
|
|
371
377
|
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
372
378
|
function NativeSheet({
|
|
373
379
|
children,
|
|
@@ -389,9 +395,11 @@ function NativeSheet({
|
|
|
389
395
|
transparent: true,
|
|
390
396
|
visible: open,
|
|
391
397
|
children: /* @__PURE__ */ jsxs3(
|
|
392
|
-
|
|
398
|
+
KeyboardAvoidingView,
|
|
393
399
|
{
|
|
394
400
|
accessible: false,
|
|
401
|
+
behavior: Platform.OS === "ios" ? "padding" : "height",
|
|
402
|
+
keyboardVerticalOffset: 0,
|
|
395
403
|
onAccessibilityEscape: dismiss,
|
|
396
404
|
style: styles2.backdrop,
|
|
397
405
|
children: [
|
package/dist/native.js.map
CHANGED
|
@@ -1 +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, useState } 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 [pressed, setPressed] = useState(false);\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 onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={[\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 <View style={styles.content}>\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 </View>\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 justifyContent: \"center\"\n },\n compact: {\n minHeight: theme.control.compact,\n paddingHorizontal: theme.space.small\n },\n content: {\n alignItems: \"center\",\n flexDirection: \"row\",\n justifyContent: \"center\"\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 <View style={styles.content}>\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 </View>\n </Pressable>\n );\n}\n\nfunction createStyles(theme: NativeTheme) {\n return StyleSheet.create({\n content: {\n alignItems: \"center\",\n flex: 1,\n flexDirection: \"row\",\n minHeight: theme.control.row,\n paddingHorizontal: theme.space.small,\n position: \"relative\",\n width: \"100%\"\n },\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 borderRadius: theme.radius.small,\n minHeight: theme.control.row,\n overflow: \"hidden\"\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 type { ReactNode } from \"react\";\nimport { Modal, Pressable, StyleSheet, View } from \"react-native\";\nimport { useNativeTheme } from \"./theme-provider\";\n\nexport interface NativeSheetProps {\n children: ReactNode;\n closeAccessibilityLabel: string;\n height?: number | `${number}%`;\n onOpenChange(open: boolean): void;\n open: boolean;\n}\n\n/**\n * Controlled sheet backed by React Native's window-level Modal.\n *\n * Callers own whether the sheet is open and what product actions its content\n * performs.\n */\nexport function NativeSheet({\n children,\n closeAccessibilityLabel,\n height,\n onOpenChange,\n open\n}: NativeSheetProps) {\n const theme = useNativeTheme();\n const styles = createStyles(theme);\n const dismiss = () => onOpenChange(false);\n\n return (\n <Modal\n animationType=\"fade\"\n onRequestClose={dismiss}\n presentationStyle=\"overFullScreen\"\n statusBarTranslucent\n transparent\n visible={open}\n >\n <View\n accessible={false}\n onAccessibilityEscape={dismiss}\n style={styles.backdrop}\n >\n <Pressable\n accessibilityLabel={closeAccessibilityLabel}\n accessibilityRole=\"button\"\n accessible\n onPress={dismiss}\n style={StyleSheet.absoluteFill}\n testID=\"native-sheet-backdrop\"\n />\n <Pressable\n accessible={false}\n onPress={() => undefined}\n style={[styles.sheet, height === undefined ? null : { height }]}\n testID=\"native-sheet-panel\"\n >\n {children}\n </Pressable>\n </View>\n </Modal>\n );\n}\n\nfunction createStyles(theme: ReturnType<typeof useNativeTheme>) {\n return StyleSheet.create({\n backdrop: {\n backgroundColor: theme.color.scrim,\n flex: 1,\n justifyContent: \"flex-end\"\n },\n sheet: {\n backgroundColor: theme.color.panelRaised,\n borderTopLeftRadius: theme.radius.large,\n borderTopRightRadius: theme.radius.large,\n maxHeight: \"80%\",\n overflow: \"hidden\"\n }\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","Pressable","StyleSheet","View","jsx","jsxs","styles","createStyles","View","Pressable","StyleSheet"]}
|
|
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, useState } 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 [pressed, setPressed] = useState(false);\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 onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={[\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 <View style={styles.content}>\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 </View>\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 justifyContent: \"center\"\n },\n compact: {\n minHeight: theme.control.compact,\n paddingHorizontal: theme.space.small\n },\n content: {\n alignItems: \"center\",\n flexDirection: \"row\",\n justifyContent: \"center\"\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 <View style={styles.content}>\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 </View>\n </Pressable>\n );\n}\n\nfunction createStyles(theme: NativeTheme) {\n return StyleSheet.create({\n content: {\n alignItems: \"center\",\n flex: 1,\n flexDirection: \"row\",\n minHeight: theme.control.row,\n paddingHorizontal: theme.space.small,\n position: \"relative\",\n width: \"100%\"\n },\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 borderRadius: theme.radius.small,\n minHeight: theme.control.row,\n overflow: \"hidden\"\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 type { ReactNode } from \"react\";\nimport {\n KeyboardAvoidingView,\n Modal,\n Platform,\n Pressable,\n StyleSheet\n} from \"react-native\";\nimport { useNativeTheme } from \"./theme-provider\";\n\nexport interface NativeSheetProps {\n children: ReactNode;\n closeAccessibilityLabel: string;\n height?: number | `${number}%`;\n onOpenChange(open: boolean): void;\n open: boolean;\n}\n\n/**\n * Controlled sheet backed by React Native's window-level Modal.\n *\n * Callers own whether the sheet is open and what product actions its content\n * performs.\n */\nexport function NativeSheet({\n children,\n closeAccessibilityLabel,\n height,\n onOpenChange,\n open\n}: NativeSheetProps) {\n const theme = useNativeTheme();\n const styles = createStyles(theme);\n const dismiss = () => onOpenChange(false);\n\n return (\n <Modal\n animationType=\"fade\"\n onRequestClose={dismiss}\n presentationStyle=\"overFullScreen\"\n statusBarTranslucent\n transparent\n visible={open}\n >\n <KeyboardAvoidingView\n accessible={false}\n behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\n keyboardVerticalOffset={0}\n onAccessibilityEscape={dismiss}\n style={styles.backdrop}\n >\n <Pressable\n accessibilityLabel={closeAccessibilityLabel}\n accessibilityRole=\"button\"\n accessible\n onPress={dismiss}\n style={StyleSheet.absoluteFill}\n testID=\"native-sheet-backdrop\"\n />\n <Pressable\n accessible={false}\n onPress={() => undefined}\n style={[styles.sheet, height === undefined ? null : { height }]}\n testID=\"native-sheet-panel\"\n >\n {children}\n </Pressable>\n </KeyboardAvoidingView>\n </Modal>\n );\n}\n\nfunction createStyles(theme: ReturnType<typeof useNativeTheme>) {\n return StyleSheet.create({\n backdrop: {\n backgroundColor: theme.color.scrim,\n flex: 1,\n justifyContent: \"flex-end\"\n },\n sheet: {\n backgroundColor: theme.color.panelRaised,\n borderTopLeftRadius: theme.radius.large,\n borderTopRightRadius: theme.radius.large,\n maxHeight: \"80%\",\n overflow: \"hidden\"\n }\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","Pressable","StyleSheet","jsx","jsxs","styles","createStyles","Pressable","StyleSheet"]}
|
package/package.json
CHANGED
package/ui-system.md
CHANGED
|
@@ -328,11 +328,13 @@ component implementation.
|
|
|
328
328
|
`NativeSheet` uses React Native's window-level `Modal` for its controlled
|
|
329
329
|
overlay and does not require a portal provider. It owns the semantic scrim,
|
|
330
330
|
bottom-aligned panel, system-back dismissal, screen-reader escape gesture,
|
|
331
|
-
accessible backdrop dismissal, and optional fixed `height`.
|
|
332
|
-
|
|
331
|
+
accessible backdrop dismissal, keyboard avoidance, and optional fixed `height`.
|
|
332
|
+
Its window-level keyboard container uses padding on iOS and height reduction on
|
|
333
|
+
Android, with no caller-supplied keyboard height. Callers must supply the
|
|
334
|
+
localized `closeAccessibilityLabel`; one fixed height replaces the former
|
|
333
335
|
single-value `snapPoints` usage. Keep `@gorhom/bottom-sheet` app-owned for
|
|
334
|
-
genuinely complex gesture, keyboard, or multi-snap-point sheets rather
|
|
335
|
-
routing the shared compact sheet through its React 19-incompatible portal.
|
|
336
|
+
genuinely complex gesture, animated keyboard, or multi-snap-point sheets rather
|
|
337
|
+
than routing the shared compact sheet through its React 19-incompatible portal.
|
|
336
338
|
|
|
337
339
|
For cross-surface stacking, use shared semantic `z-index` tokens instead of
|
|
338
340
|
local magic numbers. Current global layer tokens live in
|