alouette

Version:

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

1 lines • 249 kB

Source Map (JSON)

{"version":3,"file":"index-node22.cjs","sources":["../src/core/ThemeContext.ts","../src/themeVariables.ts","../src/ui/containers/ScopedTheme.tsx","../src/core/AlouetteProvider.tsx","../src/core/AlouetteDecorator.tsx","../src/core/useThemeToken.ts","../src/ui/primitives/View.tsx","../src/ui/containers/AccentScope.tsx","../src/ui/primitives/Text.tsx","../src/ui/primitives/ScrollView.tsx","../src/ui/primitives/FlatList.tsx","../src/ui/primitives/SectionList.tsx","../src/ui/stacks/stacks.tsx","../src/ui/stacks/Separator.tsx","../src/ui/containers/Box.tsx","../src/ui/containers/Surface.tsx","../src/ui/styled.tsx","../src/ui/story-components/StoryTitle.tsx","../src/ui/story-components/Story.tsx","../src/ui/story-components/StoryContainer.tsx","../src/ui/story-components/StoryDecorator.tsx","../src/ui/story-components/StoryGrid.tsx","../src/ui/containers/StableAccentScope.tsx","../src/ui/containers/Presence.tsx","../src/animationDurationsMs.ts","../src/ui/data/PressableBox.tsx","../src/core/useColorToken.ts","../src/ui/primitives/Icon.tsx","../src/ui/feedback/RingCircle.tsx","../src/ui/feedback/useSimulatedProgress.ts","../src/ui/feedback/CircularProgress.tsx","../src/ui/actions/Button.tsx","../src/ui/actions/IconButton.tsx","../src/ui/containers/Modal.tsx","../src/ui/containers/AlertDialog.tsx","../src/ui/feedback/Message.tsx","../src/ui/actions/usePressAsync.ts","../src/ui/actions/ActionButton.tsx","../src/ui/inputs/InputText.tsx","../src/ui/inputs/TextArea.tsx","../src/ui/inputs/Switch.tsx","../src/ui/inputs/Select.shared.tsx","../src/ui/inputs/Select.tsx","../src/ui/forms/FormItem.tsx","../src/ui/forms/Form.tsx","../src/ui/forms/FormField.tsx","../src/ui/forms/FormFieldArray.tsx","../src/ui/forms/FormSubmitButton.tsx","../src/ui/forms/SimpleVForm.tsx","../src/ui/feedback/Badge.tsx","../src/ui/feedback/ConnectionState.tsx","../src/ui/feedback/LinearProgress.tsx","../src/ui/data/PressableListItem.tsx","../src/ui/layout/GradientBackground.tsx","../src/ui/layout/GradientScrollView.tsx","../src/config/Breakpoints.ts","../src/windowSize/useCurrentBreakpointName.ts","../src/windowSize/SwitchBreakpoints.tsx","../src/expo/ExternalLink.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { AlouetteModeTheme, AlouetteTheme } from \"./AlouetteConfig\";\n\n/**\n * Tracks the currently applied theme name (e.g. \"dark_brand\") so JS reads\n * (`useThemeToken`) and accent composition (`AccentScope`) know which theme\n * is active. Set by `ScopedTheme` alongside NativeWind's variable context.\n *\n * Defaults to \"light\", matching the light defaults in the global `@theme` block.\n */\nexport const ThemeContext = createContext<AlouetteTheme>(\"light\");\n\nexport function useCurrentTheme(): AlouetteTheme {\n return useContext(ThemeContext);\n}\n\nexport function useCurrentMode(): AlouetteModeTheme {\n return useContext(ThemeContext).startsWith(\"dark\") ? \"dark\" : \"light\";\n}\n","/* Generated by scripts/build-css.ts. DO NOT EDIT. */\nimport type { AlouetteTheme } from \"./core/AlouetteConfig\";\n\n/**\n * Resolved CSS-variable maps for every theme, shared with global.css. Feeds\n * `ScopedTheme` (NativeWind's `VariableContextProvider`) and `useThemeToken`.\n */\nexport const themeVariables: Record<\n AlouetteTheme,\n Record<`--${string}`, string>\n> = {\n \"light\": {\n \"--color-translucent\": \"#ffffff66\",\n \"--color-disabled-sharp\": \"#616161\",\n \"--color-disabled-muted\": \"#8F8F8F\",\n \"--color-disabled-interactive\": \"#B8B8B8\",\n \"--color-disabled-interactive-muted\": \"#E0E0E0\",\n \"--color-muted\": \"#474747\",\n \"--color-form-border-disabled\": \"#B8B8B8\",\n \"--color-form-placeholder\": \"#616161\",\n \"--color-form-disabled-text\": \"#474747\",\n \"--color-interactive-contained-disabled\": \"#C7C7C7\",\n \"--color-interactive-outlined-disabled\": \"#B8B8B8\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#EBEBEB\",\n \"--color-interactive-accent-outlined-disabled\": \"#B8B8B8\",\n \"--color-screen\": \"#EBEBEB\",\n \"--color-surface\": \"#FAFAFA\",\n \"--color-highlight\": \"#FFFFFF\",\n \"--color-enabled\": \"#C7C7C7\",\n \"--color-highlight-accent\": \"#E0E0E0\",\n \"--color-lowered\": \"#E0E0E0\",\n \"--color-screen-gradient-start\": \"#E0E0E0\",\n \"--color-screen-gradient-middle\": \"#C7C7C7\",\n \"--color-screen-gradient-end\": \"#B8B8B8\",\n \"--color-border-muted\": \"#8F8F8F\",\n \"--color-border-sharp\": \"#616161\",\n \"--color-interactive-contained-pressable\": \"#FFFFFF\",\n \"--color-interactive-contained-hover\": \"#FAFAFA\",\n \"--color-interactive-contained-focus\": \"#FAFAFA\",\n \"--color-interactive-contained-active\": \"#EBEBEB\",\n \"--color-interactive-outlined-pressable\": \"#616161\",\n \"--color-interactive-outlined-hover\": \"#8F8F8F\",\n \"--color-interactive-outlined-focus\": \"#8F8F8F\",\n \"--color-interactive-outlined-active\": \"#8F8F8F\",\n \"--color-interactive-outlined-outline-focus\": \"#8F8F8F\",\n \"--color-interactive-active\": \"#616161\",\n \"--color-interactive-pressable\": \"#474747\",\n \"--color-interactive-hover\": \"#141414\",\n \"--color-sharp\": \"#141414\",\n \"--color-accent\": \"#141414\",\n \"--color-accent-muted\": \"#616161\",\n \"--color-on-accent\": \"#141414\",\n \"--color-on-accent-muted\": \"#616161\",\n \"--color-selection\": \"#47474740\",\n \"--color-interactive-accent-contained-bg\": \"#EBEBEB\",\n \"--color-interactive-accent-contained-bg-hover\": \"#FAFAFA\",\n \"--color-interactive-accent-contained-bg-focus\": \"#FAFAFA\",\n \"--color-interactive-accent-contained-bg-active\": \"#FAFAFA\"\n },\n \"dark\": {\n \"--color-translucent\": \"#1f1e1e55\",\n \"--color-disabled-sharp\": \"#A8A8A8\",\n \"--color-disabled-muted\": \"#A8A8A8\",\n \"--color-disabled-interactive\": \"#525252\",\n \"--color-disabled-interactive-muted\": \"#333333\",\n \"--color-muted\": \"#C2C2C2\",\n \"--color-form-border-disabled\": \"#525252\",\n \"--color-form-placeholder\": \"#A8A8A8\",\n \"--color-form-disabled-text\": \"#C2C2C2\",\n \"--color-interactive-contained-disabled\": \"#3D3D3D\",\n \"--color-interactive-outlined-disabled\": \"#474747\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#3D3D3D\",\n \"--color-interactive-accent-outlined-disabled\": \"#474747\",\n \"--color-screen\": \"#1F1F1F\",\n \"--color-surface\": \"#292929\",\n \"--color-highlight\": \"#333333\",\n \"--color-enabled\": \"#525252\",\n \"--color-highlight-accent\": \"#333333\",\n \"--color-lowered\": \"#0F0F0F\",\n \"--color-screen-gradient-start\": \"#292929\",\n \"--color-screen-gradient-middle\": \"#1F1F1F\",\n \"--color-screen-gradient-end\": \"#0F0F0F\",\n \"--color-border-muted\": \"#525252\",\n \"--color-border-sharp\": \"#A8A8A8\",\n \"--color-interactive-contained-pressable\": \"#474747\",\n \"--color-interactive-contained-hover\": \"#525252\",\n \"--color-interactive-contained-focus\": \"#525252\",\n \"--color-interactive-contained-active\": \"#525252\",\n \"--color-interactive-outlined-pressable\": \"#525252\",\n \"--color-interactive-outlined-hover\": \"#A8A8A8\",\n \"--color-interactive-outlined-focus\": \"#A8A8A8\",\n \"--color-interactive-outlined-active\": \"#A8A8A8\",\n \"--color-interactive-outlined-outline-focus\": \"#525252\",\n \"--color-interactive-active\": \"#A8A8A8\",\n \"--color-interactive-pressable\": \"#C2C2C2\",\n \"--color-interactive-hover\": \"#F5F5F5\",\n \"--color-sharp\": \"#F5F5F5\",\n \"--color-accent\": \"#F5F5F5\",\n \"--color-accent-muted\": \"#C2C2C2\",\n \"--color-on-accent\": \"#F5F5F5\",\n \"--color-on-accent-muted\": \"#C2C2C2\",\n \"--color-selection\": \"#C2C2C240\",\n \"--color-interactive-accent-contained-bg\": \"#474747\",\n \"--color-interactive-accent-contained-bg-hover\": \"#525252\",\n \"--color-interactive-accent-contained-bg-focus\": \"#525252\",\n \"--color-interactive-accent-contained-bg-active\": \"#525252\"\n },\n \"light_brand\": {\n \"--color-translucent\": \"#ffffff66\",\n \"--color-disabled-sharp\": \"#616161\",\n \"--color-disabled-muted\": \"#8F8F8F\",\n \"--color-disabled-interactive\": \"#B8B8B8\",\n \"--color-disabled-interactive-muted\": \"#E0E0E0\",\n \"--color-muted\": \"#474747\",\n \"--color-form-border-disabled\": \"#B8B8B8\",\n \"--color-form-placeholder\": \"#616161\",\n \"--color-form-disabled-text\": \"#474747\",\n \"--color-interactive-contained-disabled\": \"#C7C7C7\",\n \"--color-interactive-outlined-disabled\": \"#B8B8B8\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#EBEBEB\",\n \"--color-interactive-accent-outlined-disabled\": \"#B8B8B8\",\n \"--color-screen\": \"#DFF1F6\",\n \"--color-surface\": \"#EFF8FB\",\n \"--color-highlight\": \"#F7FBFD\",\n \"--color-enabled\": \"#99DFF5\",\n \"--color-highlight-accent\": \"#C7EEF9\",\n \"--color-lowered\": \"#C7EEF9\",\n \"--color-screen-gradient-start\": \"#C7EEF9\",\n \"--color-screen-gradient-middle\": \"#99DFF5\",\n \"--color-screen-gradient-end\": \"#7DD7F2\",\n \"--color-border-muted\": \"#23C8FB\",\n \"--color-border-sharp\": \"#037496\",\n \"--color-interactive-contained-pressable\": \"#037496\",\n \"--color-interactive-contained-hover\": \"#049AC8\",\n \"--color-interactive-contained-focus\": \"#049AC8\",\n \"--color-interactive-contained-active\": \"#23C8FB\",\n \"--color-interactive-outlined-pressable\": \"#037496\",\n \"--color-interactive-outlined-hover\": \"#23C8FB\",\n \"--color-interactive-outlined-focus\": \"#23C8FB\",\n \"--color-interactive-outlined-active\": \"#23C8FB\",\n \"--color-interactive-outlined-outline-focus\": \"#23C8FB\",\n \"--color-interactive-active\": \"#037496\",\n \"--color-interactive-pressable\": \"#024D64\",\n \"--color-interactive-hover\": \"#011F28\",\n \"--color-sharp\": \"#011F28\",\n \"--color-accent\": \"#024D64\",\n \"--color-accent-muted\": \"#037496\",\n \"--color-on-accent\": \"#FFFFFF\",\n \"--color-on-accent-muted\": \"#C7EEF9\",\n \"--color-selection\": \"#024D6440\",\n \"--color-interactive-accent-contained-bg\": \"#DFF1F6\",\n \"--color-interactive-accent-contained-bg-hover\": \"#EFF8FB\",\n \"--color-interactive-accent-contained-bg-focus\": \"#EFF8FB\",\n \"--color-interactive-accent-contained-bg-active\": \"#EFF8FB\"\n },\n \"light_info\": {\n \"--color-translucent\": \"#ffffff66\",\n \"--color-disabled-sharp\": \"#616161\",\n \"--color-disabled-muted\": \"#8F8F8F\",\n \"--color-disabled-interactive\": \"#B8B8B8\",\n \"--color-disabled-interactive-muted\": \"#E0E0E0\",\n \"--color-muted\": \"#474747\",\n \"--color-form-border-disabled\": \"#B8B8B8\",\n \"--color-form-placeholder\": \"#616161\",\n \"--color-form-disabled-text\": \"#474747\",\n \"--color-interactive-contained-disabled\": \"#C7C7C7\",\n \"--color-interactive-outlined-disabled\": \"#B8B8B8\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#EBEBEB\",\n \"--color-interactive-accent-outlined-disabled\": \"#B8B8B8\",\n \"--color-screen\": \"#DFF0F6\",\n \"--color-surface\": \"#EFF8FB\",\n \"--color-highlight\": \"#F7FBFD\",\n \"--color-enabled\": \"#99DEF5\",\n \"--color-highlight-accent\": \"#C7EDF9\",\n \"--color-lowered\": \"#C7EDF9\",\n \"--color-screen-gradient-start\": \"#C7EDF9\",\n \"--color-screen-gradient-middle\": \"#99DEF5\",\n \"--color-screen-gradient-end\": \"#7DD5F2\",\n \"--color-border-muted\": \"#23C5FB\",\n \"--color-border-sharp\": \"#037196\",\n \"--color-interactive-contained-pressable\": \"#037196\",\n \"--color-interactive-contained-hover\": \"#0497C8\",\n \"--color-interactive-contained-focus\": \"#0497C8\",\n \"--color-interactive-contained-active\": \"#23C5FB\",\n \"--color-interactive-outlined-pressable\": \"#037196\",\n \"--color-interactive-outlined-hover\": \"#23C5FB\",\n \"--color-interactive-outlined-focus\": \"#23C5FB\",\n \"--color-interactive-outlined-active\": \"#23C5FB\",\n \"--color-interactive-outlined-outline-focus\": \"#23C5FB\",\n \"--color-interactive-active\": \"#037196\",\n \"--color-interactive-pressable\": \"#024B64\",\n \"--color-interactive-hover\": \"#011E28\",\n \"--color-sharp\": \"#011E28\",\n \"--color-accent\": \"#024B64\",\n \"--color-accent-muted\": \"#037196\",\n \"--color-on-accent\": \"#FFFFFF\",\n \"--color-on-accent-muted\": \"#C7EDF9\",\n \"--color-selection\": \"#024B6440\",\n \"--color-interactive-accent-contained-bg\": \"#DFF0F6\",\n \"--color-interactive-accent-contained-bg-hover\": \"#EFF8FB\",\n \"--color-interactive-accent-contained-bg-focus\": \"#EFF8FB\",\n \"--color-interactive-accent-contained-bg-active\": \"#EFF8FB\"\n },\n \"light_success\": {\n \"--color-translucent\": \"#ffffff66\",\n \"--color-disabled-sharp\": \"#616161\",\n \"--color-disabled-muted\": \"#8F8F8F\",\n \"--color-disabled-interactive\": \"#B8B8B8\",\n \"--color-disabled-interactive-muted\": \"#E0E0E0\",\n \"--color-muted\": \"#474747\",\n \"--color-form-border-disabled\": \"#B8B8B8\",\n \"--color-form-placeholder\": \"#616161\",\n \"--color-form-disabled-text\": \"#474747\",\n \"--color-interactive-contained-disabled\": \"#C7C7C7\",\n \"--color-interactive-outlined-disabled\": \"#B8B8B8\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#EBEBEB\",\n \"--color-interactive-accent-outlined-disabled\": \"#B8B8B8\",\n \"--color-screen\": \"#DFF6DF\",\n \"--color-surface\": \"#EFFBEF\",\n \"--color-highlight\": \"#F7FDF7\",\n \"--color-enabled\": \"#91F391\",\n \"--color-highlight-accent\": \"#BFF8BF\",\n \"--color-lowered\": \"#BFF8BF\",\n \"--color-screen-gradient-start\": \"#BFF8BF\",\n \"--color-screen-gradient-middle\": \"#91F391\",\n \"--color-screen-gradient-end\": \"#75F075\",\n \"--color-border-muted\": \"#19FA19\",\n \"--color-border-sharp\": \"#027802\",\n \"--color-interactive-contained-pressable\": \"#027802\",\n \"--color-interactive-contained-hover\": \"#03AA03\",\n \"--color-interactive-contained-focus\": \"#03AA03\",\n \"--color-interactive-contained-active\": \"#19FA19\",\n \"--color-interactive-outlined-pressable\": \"#027802\",\n \"--color-interactive-outlined-hover\": \"#19FA19\",\n \"--color-interactive-outlined-focus\": \"#19FA19\",\n \"--color-interactive-outlined-active\": \"#19FA19\",\n \"--color-interactive-outlined-outline-focus\": \"#19FA19\",\n \"--color-interactive-active\": \"#027802\",\n \"--color-interactive-pressable\": \"#014601\",\n \"--color-interactive-hover\": \"#012801\",\n \"--color-sharp\": \"#012801\",\n \"--color-accent\": \"#014601\",\n \"--color-accent-muted\": \"#027802\",\n \"--color-on-accent\": \"#FFFFFF\",\n \"--color-on-accent-muted\": \"#BFF8BF\",\n \"--color-selection\": \"#01460140\",\n \"--color-interactive-accent-contained-bg\": \"#DFF6DF\",\n \"--color-interactive-accent-contained-bg-hover\": \"#EFFBEF\",\n \"--color-interactive-accent-contained-bg-focus\": \"#EFFBEF\",\n \"--color-interactive-accent-contained-bg-active\": \"#EFFBEF\"\n },\n \"light_warning\": {\n \"--color-translucent\": \"#ffffff66\",\n \"--color-disabled-sharp\": \"#616161\",\n \"--color-disabled-muted\": \"#8F8F8F\",\n \"--color-disabled-interactive\": \"#B8B8B8\",\n \"--color-disabled-interactive-muted\": \"#E0E0E0\",\n \"--color-muted\": \"#474747\",\n \"--color-form-border-disabled\": \"#B8B8B8\",\n \"--color-form-placeholder\": \"#616161\",\n \"--color-form-disabled-text\": \"#474747\",\n \"--color-interactive-contained-disabled\": \"#C7C7C7\",\n \"--color-interactive-outlined-disabled\": \"#B8B8B8\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#EBEBEB\",\n \"--color-interactive-accent-outlined-disabled\": \"#B8B8B8\",\n \"--color-screen\": \"#F6EEDF\",\n \"--color-surface\": \"#FBF7EF\",\n \"--color-highlight\": \"#FDFBF7\",\n \"--color-enabled\": \"#F3D291\",\n \"--color-highlight-accent\": \"#F8E5BF\",\n \"--color-lowered\": \"#F8E5BF\",\n \"--color-screen-gradient-start\": \"#F8E5BF\",\n \"--color-screen-gradient-middle\": \"#F3D291\",\n \"--color-screen-gradient-end\": \"#F0C775\",\n \"--color-border-muted\": \"#FAAF19\",\n \"--color-border-sharp\": \"#8C5E03\",\n \"--color-interactive-contained-pressable\": \"#8C5E03\",\n \"--color-interactive-contained-hover\": \"#BE8004\",\n \"--color-interactive-contained-focus\": \"#BE8004\",\n \"--color-interactive-contained-active\": \"#FAAF19\",\n \"--color-interactive-outlined-pressable\": \"#8C5E03\",\n \"--color-interactive-outlined-hover\": \"#FAAF19\",\n \"--color-interactive-outlined-focus\": \"#FAAF19\",\n \"--color-interactive-outlined-active\": \"#FAAF19\",\n \"--color-interactive-outlined-outline-focus\": \"#FAAF19\",\n \"--color-interactive-active\": \"#8C5E03\",\n \"--color-interactive-pressable\": \"#5A3D02\",\n \"--color-interactive-hover\": \"#281B01\",\n \"--color-sharp\": \"#281B01\",\n \"--color-accent\": \"#5A3D02\",\n \"--color-accent-muted\": \"#8C5E03\",\n \"--color-on-accent\": \"#FFFFFF\",\n \"--color-on-accent-muted\": \"#F8E5BF\",\n \"--color-selection\": \"#5A3D0240\",\n \"--color-interactive-accent-contained-bg\": \"#F6EEDF\",\n \"--color-interactive-accent-contained-bg-hover\": \"#FBF7EF\",\n \"--color-interactive-accent-contained-bg-focus\": \"#FBF7EF\",\n \"--color-interactive-accent-contained-bg-active\": \"#FBF7EF\"\n },\n \"light_danger\": {\n \"--color-translucent\": \"#ffffff66\",\n \"--color-disabled-sharp\": \"#616161\",\n \"--color-disabled-muted\": \"#8F8F8F\",\n \"--color-disabled-interactive\": \"#B8B8B8\",\n \"--color-disabled-interactive-muted\": \"#E0E0E0\",\n \"--color-muted\": \"#474747\",\n \"--color-form-border-disabled\": \"#B8B8B8\",\n \"--color-form-placeholder\": \"#616161\",\n \"--color-form-disabled-text\": \"#474747\",\n \"--color-interactive-contained-disabled\": \"#C7C7C7\",\n \"--color-interactive-outlined-disabled\": \"#B8B8B8\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#EBEBEB\",\n \"--color-interactive-accent-outlined-disabled\": \"#B8B8B8\",\n \"--color-screen\": \"#F6E0DF\",\n \"--color-surface\": \"#FBEFEF\",\n \"--color-highlight\": \"#FDF7F7\",\n \"--color-enabled\": \"#F7A4A1\",\n \"--color-highlight-accent\": \"#FBD2D0\",\n \"--color-lowered\": \"#FBD2D0\",\n \"--color-screen-gradient-start\": \"#FBD2D0\",\n \"--color-screen-gradient-middle\": \"#F7A4A1\",\n \"--color-screen-gradient-end\": \"#F48985\",\n \"--color-border-muted\": \"#FB342D\",\n \"--color-border-sharp\": \"#A00803\",\n \"--color-interactive-contained-pressable\": \"#A00803\",\n \"--color-interactive-contained-hover\": \"#D20B04\",\n \"--color-interactive-contained-focus\": \"#D20B04\",\n \"--color-interactive-contained-active\": \"#FB342D\",\n \"--color-interactive-outlined-pressable\": \"#A00803\",\n \"--color-interactive-outlined-hover\": \"#FB342D\",\n \"--color-interactive-outlined-focus\": \"#FB342D\",\n \"--color-interactive-outlined-active\": \"#FB342D\",\n \"--color-interactive-outlined-outline-focus\": \"#FB342D\",\n \"--color-interactive-active\": \"#A00803\",\n \"--color-interactive-pressable\": \"#6E0602\",\n \"--color-interactive-hover\": \"#280201\",\n \"--color-sharp\": \"#280201\",\n \"--color-accent\": \"#6E0602\",\n \"--color-accent-muted\": \"#A00803\",\n \"--color-on-accent\": \"#FFFFFF\",\n \"--color-on-accent-muted\": \"#FBD2D0\",\n \"--color-selection\": \"#6E060240\",\n \"--color-interactive-accent-contained-bg\": \"#F6E0DF\",\n \"--color-interactive-accent-contained-bg-hover\": \"#FBEFEF\",\n \"--color-interactive-accent-contained-bg-focus\": \"#FBEFEF\",\n \"--color-interactive-accent-contained-bg-active\": \"#FBEFEF\"\n },\n \"dark_brand\": {\n \"--color-translucent\": \"#1f1e1e55\",\n \"--color-disabled-sharp\": \"#A8A8A8\",\n \"--color-disabled-muted\": \"#A8A8A8\",\n \"--color-disabled-interactive\": \"#525252\",\n \"--color-disabled-interactive-muted\": \"#333333\",\n \"--color-muted\": \"#C2C2C2\",\n \"--color-form-border-disabled\": \"#525252\",\n \"--color-form-placeholder\": \"#A8A8A8\",\n \"--color-form-disabled-text\": \"#C2C2C2\",\n \"--color-interactive-contained-disabled\": \"#3D3D3D\",\n \"--color-interactive-outlined-disabled\": \"#474747\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#3D3D3D\",\n \"--color-interactive-accent-outlined-disabled\": \"#474747\",\n \"--color-screen\": \"#0D2830\",\n \"--color-surface\": \"#123540\",\n \"--color-highlight\": \"#104E60\",\n \"--color-enabled\": \"#1E94B8\",\n \"--color-highlight-accent\": \"#104E60\",\n \"--color-lowered\": \"#071418\",\n \"--color-screen-gradient-start\": \"#123540\",\n \"--color-screen-gradient-middle\": \"#0D2830\",\n \"--color-screen-gradient-end\": \"#071418\",\n \"--color-border-muted\": \"#1E94B8\",\n \"--color-border-sharp\": \"#5CD1F5\",\n \"--color-interactive-contained-pressable\": \"#156A84\",\n \"--color-interactive-contained-hover\": \"#1E94B8\",\n \"--color-interactive-contained-focus\": \"#1E94B8\",\n \"--color-interactive-contained-active\": \"#1E94B8\",\n \"--color-interactive-outlined-pressable\": \"#1E94B8\",\n \"--color-interactive-outlined-hover\": \"#5CD1F5\",\n \"--color-interactive-outlined-focus\": \"#5CD1F5\",\n \"--color-interactive-outlined-active\": \"#5CD1F5\",\n \"--color-interactive-outlined-outline-focus\": \"#1E94B8\",\n \"--color-interactive-active\": \"#5CD1F5\",\n \"--color-interactive-pressable\": \"#8CDFF8\",\n \"--color-interactive-hover\": \"#D9F4FD\",\n \"--color-sharp\": \"#D9F4FD\",\n \"--color-accent\": \"#8CDFF8\",\n \"--color-accent-muted\": \"#8CDFF8\",\n \"--color-on-accent\": \"#F5F5F5\",\n \"--color-on-accent-muted\": \"#8CDFF8\",\n \"--color-selection\": \"#8CDFF840\",\n \"--color-interactive-accent-contained-bg\": \"#156A84\",\n \"--color-interactive-accent-contained-bg-hover\": \"#1E94B8\",\n \"--color-interactive-accent-contained-bg-focus\": \"#1E94B8\",\n \"--color-interactive-accent-contained-bg-active\": \"#1E94B8\"\n },\n \"dark_info\": {\n \"--color-translucent\": \"#1f1e1e55\",\n \"--color-disabled-sharp\": \"#A8A8A8\",\n \"--color-disabled-muted\": \"#A8A8A8\",\n \"--color-disabled-interactive\": \"#525252\",\n \"--color-disabled-interactive-muted\": \"#333333\",\n \"--color-muted\": \"#C2C2C2\",\n \"--color-form-border-disabled\": \"#525252\",\n \"--color-form-placeholder\": \"#A8A8A8\",\n \"--color-form-disabled-text\": \"#C2C2C2\",\n \"--color-interactive-contained-disabled\": \"#3D3D3D\",\n \"--color-interactive-outlined-disabled\": \"#474747\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#3D3D3D\",\n \"--color-interactive-accent-outlined-disabled\": \"#474747\",\n \"--color-screen\": \"#0D2730\",\n \"--color-surface\": \"#123440\",\n \"--color-highlight\": \"#104C60\",\n \"--color-enabled\": \"#1E92B8\",\n \"--color-highlight-accent\": \"#104C60\",\n \"--color-lowered\": \"#071418\",\n \"--color-screen-gradient-start\": \"#123440\",\n \"--color-screen-gradient-middle\": \"#0D2730\",\n \"--color-screen-gradient-end\": \"#071418\",\n \"--color-border-muted\": \"#1E92B8\",\n \"--color-border-sharp\": \"#5CCEF5\",\n \"--color-interactive-contained-pressable\": \"#156884\",\n \"--color-interactive-contained-hover\": \"#1E92B8\",\n \"--color-interactive-contained-focus\": \"#1E92B8\",\n \"--color-interactive-contained-active\": \"#1E92B8\",\n \"--color-interactive-outlined-pressable\": \"#1E92B8\",\n \"--color-interactive-outlined-hover\": \"#5CCEF5\",\n \"--color-interactive-outlined-focus\": \"#5CCEF5\",\n \"--color-interactive-outlined-active\": \"#5CCEF5\",\n \"--color-interactive-outlined-outline-focus\": \"#1E92B8\",\n \"--color-interactive-active\": \"#5CCEF5\",\n \"--color-interactive-pressable\": \"#8CDDF8\",\n \"--color-interactive-hover\": \"#D9F4FD\",\n \"--color-sharp\": \"#D9F4FD\",\n \"--color-accent\": \"#8CDDF8\",\n \"--color-accent-muted\": \"#8CDDF8\",\n \"--color-on-accent\": \"#F5F5F5\",\n \"--color-on-accent-muted\": \"#8CDDF8\",\n \"--color-selection\": \"#8CDDF840\",\n \"--color-interactive-accent-contained-bg\": \"#156884\",\n \"--color-interactive-accent-contained-bg-hover\": \"#1E92B8\",\n \"--color-interactive-accent-contained-bg-focus\": \"#1E92B8\",\n \"--color-interactive-accent-contained-bg-active\": \"#1E92B8\"\n },\n \"dark_success\": {\n \"--color-translucent\": \"#1f1e1e55\",\n \"--color-disabled-sharp\": \"#A8A8A8\",\n \"--color-disabled-muted\": \"#A8A8A8\",\n \"--color-disabled-interactive\": \"#525252\",\n \"--color-disabled-interactive-muted\": \"#333333\",\n \"--color-muted\": \"#C2C2C2\",\n \"--color-form-border-disabled\": \"#525252\",\n \"--color-form-placeholder\": \"#A8A8A8\",\n \"--color-form-disabled-text\": \"#C2C2C2\",\n \"--color-interactive-contained-disabled\": \"#3D3D3D\",\n \"--color-interactive-outlined-disabled\": \"#474747\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#3D3D3D\",\n \"--color-interactive-accent-outlined-disabled\": \"#474747\",\n \"--color-screen\": \"#0D300D\",\n \"--color-surface\": \"#124012\",\n \"--color-highlight\": \"#0F570F\",\n \"--color-enabled\": \"#1FAD1F\",\n \"--color-highlight-accent\": \"#0F570F\",\n \"--color-lowered\": \"#071807\",\n \"--color-screen-gradient-start\": \"#124012\",\n \"--color-screen-gradient-middle\": \"#0D300D\",\n \"--color-screen-gradient-end\": \"#071807\",\n \"--color-border-muted\": \"#1FAD1F\",\n \"--color-border-sharp\": \"#52F452\",\n \"--color-interactive-contained-pressable\": \"#157915\",\n \"--color-interactive-contained-hover\": \"#1FAD1F\",\n \"--color-interactive-contained-focus\": \"#1FAD1F\",\n \"--color-interactive-contained-active\": \"#1FAD1F\",\n \"--color-interactive-outlined-pressable\": \"#1FAD1F\",\n \"--color-interactive-outlined-hover\": \"#52F452\",\n \"--color-interactive-outlined-focus\": \"#52F452\",\n \"--color-interactive-outlined-active\": \"#52F452\",\n \"--color-interactive-outlined-outline-focus\": \"#1FAD1F\",\n \"--color-interactive-active\": \"#52F452\",\n \"--color-interactive-pressable\": \"#82F782\",\n \"--color-interactive-hover\": \"#D9FDD9\",\n \"--color-sharp\": \"#D9FDD9\",\n \"--color-accent\": \"#82F782\",\n \"--color-accent-muted\": \"#82F782\",\n \"--color-on-accent\": \"#F5F5F5\",\n \"--color-on-accent-muted\": \"#82F782\",\n \"--color-selection\": \"#82F78240\",\n \"--color-interactive-accent-contained-bg\": \"#157915\",\n \"--color-interactive-accent-contained-bg-hover\": \"#1FAD1F\",\n \"--color-interactive-accent-contained-bg-focus\": \"#1FAD1F\",\n \"--color-interactive-accent-contained-bg-active\": \"#1FAD1F\"\n },\n \"dark_warning\": {\n \"--color-translucent\": \"#1f1e1e55\",\n \"--color-disabled-sharp\": \"#A8A8A8\",\n \"--color-disabled-muted\": \"#A8A8A8\",\n \"--color-disabled-interactive\": \"#525252\",\n \"--color-disabled-interactive-muted\": \"#333333\",\n \"--color-muted\": \"#C2C2C2\",\n \"--color-form-border-disabled\": \"#525252\",\n \"--color-form-placeholder\": \"#A8A8A8\",\n \"--color-form-disabled-text\": \"#C2C2C2\",\n \"--color-interactive-contained-disabled\": \"#3D3D3D\",\n \"--color-interactive-outlined-disabled\": \"#474747\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#3D3D3D\",\n \"--color-interactive-accent-outlined-disabled\": \"#474747\",\n \"--color-screen\": \"#30240D\",\n \"--color-surface\": \"#403012\",\n \"--color-highlight\": \"#583F0E\",\n \"--color-enabled\": \"#AF7E1D\",\n \"--color-highlight-accent\": \"#583F0E\",\n \"--color-lowered\": \"#181207\",\n \"--color-screen-gradient-start\": \"#403012\",\n \"--color-screen-gradient-middle\": \"#30240D\",\n \"--color-screen-gradient-end\": \"#181207\",\n \"--color-border-muted\": \"#AF7E1D\",\n \"--color-border-sharp\": \"#F4BE52\",\n \"--color-interactive-contained-pressable\": \"#7B5914\",\n \"--color-interactive-contained-hover\": \"#AF7E1D\",\n \"--color-interactive-contained-focus\": \"#AF7E1D\",\n \"--color-interactive-contained-active\": \"#AF7E1D\",\n \"--color-interactive-outlined-pressable\": \"#AF7E1D\",\n \"--color-interactive-outlined-hover\": \"#F4BE52\",\n \"--color-interactive-outlined-focus\": \"#F4BE52\",\n \"--color-interactive-outlined-active\": \"#F4BE52\",\n \"--color-interactive-outlined-outline-focus\": \"#AF7E1D\",\n \"--color-interactive-active\": \"#F4BE52\",\n \"--color-interactive-pressable\": \"#F7D082\",\n \"--color-interactive-hover\": \"#FDF1D9\",\n \"--color-sharp\": \"#FDF1D9\",\n \"--color-accent\": \"#F7D082\",\n \"--color-accent-muted\": \"#F7D082\",\n \"--color-on-accent\": \"#F5F5F5\",\n \"--color-on-accent-muted\": \"#F7D082\",\n \"--color-selection\": \"#F7D08240\",\n \"--color-interactive-accent-contained-bg\": \"#7B5914\",\n \"--color-interactive-accent-contained-bg-hover\": \"#AF7E1D\",\n \"--color-interactive-accent-contained-bg-focus\": \"#AF7E1D\",\n \"--color-interactive-accent-contained-bg-active\": \"#AF7E1D\"\n },\n \"dark_danger\": {\n \"--color-translucent\": \"#1f1e1e55\",\n \"--color-disabled-sharp\": \"#A8A8A8\",\n \"--color-disabled-muted\": \"#A8A8A8\",\n \"--color-disabled-interactive\": \"#525252\",\n \"--color-disabled-interactive-muted\": \"#333333\",\n \"--color-muted\": \"#C2C2C2\",\n \"--color-form-border-disabled\": \"#525252\",\n \"--color-form-placeholder\": \"#A8A8A8\",\n \"--color-form-disabled-text\": \"#C2C2C2\",\n \"--color-interactive-contained-disabled\": \"#3D3D3D\",\n \"--color-interactive-outlined-disabled\": \"#474747\",\n \"--color-interactive-accent-contained-bg-disabled\": \"#3D3D3D\",\n \"--color-interactive-accent-outlined-disabled\": \"#474747\",\n \"--color-screen\": \"#300F0D\",\n \"--color-surface\": \"#401312\",\n \"--color-highlight\": \"#691411\",\n \"--color-enabled\": \"#C1251F\",\n \"--color-highlight-accent\": \"#691411\",\n \"--color-lowered\": \"#180707\",\n \"--color-screen-gradient-start\": \"#401312\",\n \"--color-screen-gradient-middle\": \"#300F0D\",\n \"--color-screen-gradient-end\": \"#180707\",\n \"--color-border-muted\": \"#C1251F\",\n \"--color-border-sharp\": \"#F56A66\",\n \"--color-interactive-contained-pressable\": \"#8C1B17\",\n \"--color-interactive-contained-hover\": \"#C1251F\",\n \"--color-interactive-contained-focus\": \"#C1251F\",\n \"--color-interactive-contained-active\": \"#C1251F\",\n \"--color-interactive-outlined-pressable\": \"#C1251F\",\n \"--color-interactive-outlined-hover\": \"#F56A66\",\n \"--color-interactive-outlined-focus\": \"#F56A66\",\n \"--color-interactive-outlined-active\": \"#F56A66\",\n \"--color-interactive-outlined-outline-focus\": \"#C1251F\",\n \"--color-interactive-active\": \"#F56A66\",\n \"--color-interactive-pressable\": \"#F89996\",\n \"--color-interactive-hover\": \"#FDDAD9\",\n \"--color-sharp\": \"#FDDAD9\",\n \"--color-accent\": \"#F89996\",\n \"--color-accent-muted\": \"#F89996\",\n \"--color-on-accent\": \"#F5F5F5\",\n \"--color-on-accent-muted\": \"#F89996\",\n \"--color-selection\": \"#F8999640\",\n \"--color-interactive-accent-contained-bg\": \"#8C1B17\",\n \"--color-interactive-accent-contained-bg-hover\": \"#C1251F\",\n \"--color-interactive-accent-contained-bg-focus\": \"#C1251F\",\n \"--color-interactive-accent-contained-bg-active\": \"#C1251F\"\n }\n};\n","import { VariableContextProvider } from \"nativewind\";\nimport type { ReactNode } from \"react\";\nimport type { AlouetteTheme } from \"../../core/AlouetteConfig\";\nimport { ThemeContext } from \"../../core/ThemeContext\";\nimport { themeVariables } from \"../../themeVariables\";\n\nexport interface ScopedThemeProps {\n /** Full theme name, e.g. \"light\", \"dark\", \"light_brand\", \"dark_danger\". */\n theme: AlouetteTheme;\n children?: ReactNode;\n}\n\n/**\n * Applies a theme to its subtree by pushing the theme's resolved CSS variables\n * through NativeWind's `VariableContextProvider` (layout-neutral on both web —\n * `display: contents` — and native — context only). It also records the active\n * theme name in `ThemeContext` so `useThemeToken` and `AccentScope` can read it.\n *\n * Replaces Uniwind's `ScopedTheme`.\n */\nexport function ScopedTheme({ theme, children }: ScopedThemeProps): ReactNode {\n return (\n <ThemeContext.Provider value={theme}>\n <VariableContextProvider value={themeVariables[theme]}>\n {children}\n </VariableContextProvider>\n </ThemeContext.Provider>\n );\n}\n","import type { ReactNode } from \"react\";\nimport { useColorScheme } from \"react-native\";\nimport { ScopedTheme } from \"../ui/containers/ScopedTheme\";\n\nexport interface AlouetteProviderProps {\n children: ReactNode;\n}\n\nexport function AlouetteProvider({\n children,\n}: AlouetteProviderProps): ReactNode {\n // Apply the OS light/dark scheme as the root theme so base tokens resolve\n // correctly app-wide. Subtrees can override via ScopedTheme / AccentScope.\n const colorScheme = useColorScheme();\n return (\n <ScopedTheme theme={colorScheme === \"dark\" ? \"dark\" : \"light\"}>\n {children}\n </ScopedTheme>\n );\n}\n","/* eslint-disable react/destructuring-assignment */\nimport type { Decorator } from \"@storybook/react-vite\";\nimport { ScopedTheme } from \"../ui/containers/ScopedTheme\";\nimport { AlouetteProvider } from \"./AlouetteProvider\";\nimport { SafeAreaProvider } from \"./SafeAreaProvider\";\n\n// eslint-disable-next-line react/function-component-definition -- not a component\nexport const AlouetteDecorator: Decorator = (storyFn, context) => {\n const theme: \"dark\" | \"light\" =\n context.globals.backgrounds?.value === \"#000000\" ? \"dark\" : \"light\";\n\n return (\n <SafeAreaProvider>\n <AlouetteProvider>\n <ScopedTheme theme={theme}>{storyFn(context)}</ScopedTheme>\n </AlouetteProvider>\n </SafeAreaProvider>\n );\n};\n","import { useContext } from \"react\";\nimport { themeVariables } from \"../themeVariables\";\nimport { ThemeContext } from \"./ThemeContext\";\n\ntype TokenName = `--${string}`;\n\n/**\n * Reads theme token values in JS for the few props that can't take a className\n * (gradient stops, `placeholderTextColor`, native Switch track/thumb, the Expo\n * browser chrome, SVG icon tint). Values come from the generated `themeVariables`\n * map keyed by the active `ThemeContext`, so they stay in sync with `global.css`.\n *\n * Replaces Uniwind's `useCSSVariable`. Unlike NativeWind's\n * `useUnstableNativeVariable` this works on web and native alike and is stable.\n */\nexport function useThemeToken(token: TokenName): string | undefined;\nexport function useThemeToken<const T extends readonly TokenName[]>(\n tokens: T,\n): { [K in keyof T]: string | undefined };\nexport function useThemeToken(\n tokenOrTokens: TokenName | readonly TokenName[],\n): (string | undefined)[] | string | undefined {\n const theme = useContext(ThemeContext);\n const vars = themeVariables[theme];\n if (Array.isArray(tokenOrTokens)) {\n return tokenOrTokens.map((token) => vars[token]);\n }\n return vars[tokenOrTokens as TokenName];\n}\n","import { forwardRef } from \"react\";\nimport { View as RNView, type ViewProps as RNViewProps } from \"react-native\";\n\nexport type ViewProps = RNViewProps;\n\nexport const View = forwardRef<RNView, ViewProps>((props, ref) => {\n return <RNView ref={ref} {...props} />;\n});\n","import type { ReactNode } from \"react\";\nimport type { Accent } from \"../../core/AlouetteConfig\";\nimport { useCurrentMode } from \"../../core/ThemeContext\";\nimport { ScopedTheme } from \"./ScopedTheme\";\n\nexport interface AccentScopeProps {\n mode?: \"dark\" | \"light\";\n accent?: Accent;\n children?: ReactNode;\n}\n\nexport function AccentScope({\n mode: forcedMode,\n accent,\n children,\n}: AccentScopeProps): ReactNode {\n const currentMode = useCurrentMode();\n if (!accent) {\n return children;\n }\n // ScopedTheme applies the accent theme's *resolved* variables (base mode + accent),\n // so a single scope works at any depth — no need to pre-apply the base mode.\n const mode = forcedMode ?? currentMode;\n return <ScopedTheme theme={`${mode}_${accent}`}>{children}</ScopedTheme>;\n}\n","import { forwardRef } from \"react\";\nimport { Text as RNText, type TextProps as RNTextProps } from \"react-native\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport type { Accent } from \"../../core/AlouetteConfig\";\nimport { AccentScope } from \"../containers/AccentScope\";\n\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-family\": [\n \"font-body\",\n \"font-body-bold\",\n \"font-body-extrabold\",\n \"font-heading\",\n \"font-heading-bold\",\n \"font-heading-extrabold\",\n \"font-mono\",\n \"font-mono-bold\",\n \"font-mono-extrabold\",\n ],\n },\n },\n});\n\nexport interface TextProps extends RNTextProps {\n accent?: Accent;\n}\n\nexport const Text = forwardRef<RNText, TextProps>(\n ({ className, accent, ...props }, ref) => {\n return (\n <AccentScope accent={accent}>\n <RNText\n ref={ref}\n className={twMerge(\"font-body text-sharp\", className)}\n {...props}\n />\n </AccentScope>\n );\n },\n);\n\nexport type ParagraphProps = TextProps;\n\nexport const Paragraph = forwardRef<RNText, ParagraphProps>(\n ({ className, ...props }, ref) => {\n return (\n <Text\n ref={ref}\n role=\"paragraph\"\n className={`select-auto ${className ?? \"\"}`}\n {...props}\n />\n );\n },\n);\n","import { styled } from \"nativewind\";\nimport type { ComponentType } from \"react\";\nimport {\n ScrollView as RNScrollView,\n type ScrollViewProps as RNScrollViewProps,\n type StyleProp,\n type ViewStyle,\n} from \"react-native\";\n\nexport type ScrollViewProps = RNScrollViewProps;\n\ninterface StyledScrollViewProps {\n style?: StyleProp<ViewStyle>;\n contentContainerStyle?: StyleProp<ViewStyle>;\n}\n\nexport const ScrollView = styled(\n RNScrollView as unknown as ComponentType<StyledScrollViewProps>,\n {\n className: \"style\",\n contentContainerClassName: \"contentContainerStyle\",\n },\n) as ComponentType<ScrollViewProps>;\n","import { styled } from \"nativewind\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport {\n FlatList as RNFlatList,\n type FlatListProps as RNFlatListProps,\n type StyleProp,\n type ViewStyle,\n} from \"react-native\";\n\nexport type FlatListProps<ItemT> = RNFlatListProps<ItemT>;\n\ninterface StyledFlatListProps {\n style?: StyleProp<ViewStyle>;\n contentContainerStyle?: StyleProp<ViewStyle>;\n columnWrapperStyle?: StyleProp<ViewStyle>;\n}\n\nexport const FlatList = styled(\n RNFlatList as unknown as ComponentType<StyledFlatListProps>,\n {\n className: \"style\",\n contentContainerClassName: \"contentContainerStyle\",\n columnWrapperClassName: \"columnWrapperStyle\",\n },\n) as <ItemT>(props: FlatListProps<ItemT>) => ReactNode;\n","import { styled } from \"nativewind\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport {\n SectionList as RNSectionList,\n type SectionListProps as RNSectionListProps,\n type StyleProp,\n type ViewStyle,\n} from \"react-native\";\n\ntype DefaultSectionT = Record<string, unknown>;\n\nexport type SectionListProps<\n ItemT,\n SectionT = DefaultSectionT,\n> = RNSectionListProps<ItemT, SectionT>;\n\ninterface StyledSectionListProps {\n style?: StyleProp<ViewStyle>;\n contentContainerStyle?: StyleProp<ViewStyle>;\n}\n\nexport const SectionList = styled(\n RNSectionList as unknown as ComponentType<StyledSectionListProps>,\n {\n className: \"style\",\n contentContainerClassName: \"contentContainerStyle\",\n },\n) as <ItemT, SectionT = DefaultSectionT>(\n props: SectionListProps<ItemT, SectionT>,\n) => ReactNode;\n","import { forwardRef } from \"react\";\nimport { View as RNView, type ViewProps as RNViewProps } from \"react-native\";\n\nexport type StackProps = RNViewProps;\n\nexport const Stack = forwardRef<RNView, StackProps>(\n ({ className, ...props }, ref) => {\n return (\n <RNView\n ref={ref}\n className={`flex-row flex-wrap ${className ?? \"\"}`}\n {...props}\n />\n );\n },\n);\n\nexport type HStackProps = RNViewProps;\n\nexport const HStack = forwardRef<RNView, HStackProps>(\n ({ className, ...props }, ref) => {\n return (\n <RNView ref={ref} className={`flex-row ${className ?? \"\"}`} {...props} />\n );\n },\n);\n\nexport type VStackProps = RNViewProps;\n\nexport const VStack = forwardRef<RNView, VStackProps>(\n ({ className, ...props }, ref) => {\n return (\n <RNView ref={ref} className={`flex-col ${className ?? \"\"}`} {...props} />\n );\n },\n);\n","import { forwardRef } from \"react\";\nimport { View as RNView, type ViewProps as RNViewProps } from \"react-native\";\nimport { type VariantProps, tv } from \"tailwind-variants\";\n\nconst separatorVariants = tv({\n base: \"border-border-sharp\",\n variants: {\n vertical: {\n true: \"self-stretch border-r w-px\",\n false: \"self-stretch border-b h-px\",\n },\n },\n defaultVariants: {\n vertical: false,\n },\n});\n\ntype SeparatorVariantProps = VariantProps<typeof separatorVariants>;\n\nexport interface SeparatorProps extends RNViewProps, SeparatorVariantProps {}\n\nexport const Separator = forwardRef<RNView, SeparatorProps>(\n ({ className, vertical, ...props }, ref) => {\n return (\n <RNView\n ref={ref}\n className={separatorVariants({ vertical, className })}\n {...props}\n />\n );\n },\n);\n","import type { ReactElement } from \"react\";\nimport { Children, cloneElement, forwardRef } from \"react\";\nimport {\n Pressable,\n type PressableProps,\n View as RNView,\n type ViewProps as RNViewProps,\n} from \"react-native\";\nimport type { VariantProps } from \"tailwind-variants\";\nimport { tv } from \"tailwind-variants\";\nimport type { Accent } from \"../../core/AlouetteConfig\";\nimport { useSafeAreaInsets } from \"../../core/useSafeAreaInsets\";\nimport { AccentScope } from \"./AccentScope\";\n// Allow Box to shrink when used inside HStack/VStack (matches the original\n// BoxFrame default). overflow is intentionally left off so multi-layer\n// box-shadows are not clipped.\nexport const boxBaseClasses = \"shrink\";\n\nexport interface BoxProps extends RNViewProps {\n accent?: Accent;\n}\n\nexport const Box = forwardRef<RNView, BoxProps>(\n ({ className, accent, ...props }, ref) => {\n return (\n <AccentScope accent={accent}>\n <RNView\n ref={ref}\n className={`${boxBaseClasses} ${className ?? \"\"}`}\n {...props}\n />\n </AccentScope>\n );\n },\n);\n\nexport const interactiveBoxVariants = tv({\n base: [\n boxBaseClasses,\n \"cursor-pointer\",\n \"transition-[transform,background-color,border-color] duration-fast ease-in\",\n \"disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70\",\n \"active:scale-[0.975]\",\n ].join(\" \"),\n variants: {\n withFocusVisibleOutline: {\n true: \"focus-visible:outline-2 focus-visible:outline-offset-2\",\n },\n },\n});\n\nexport interface InteractiveBoxProps\n extends VariantProps<typeof interactiveBoxVariants>, PressableProps {}\n\nexport const InteractiveBox = forwardRef<RNView, InteractiveBoxProps>(\n ({ withFocusVisibleOutline, className, ...rest }, ref) => (\n <Pressable\n ref={ref}\n // override default behavior of Pressable which sets pointerEvents to \"none\" on disabled state. However this prevents cursor to display as\n pointerEvents=\"auto\"\n {...rest}\n className={interactiveBoxVariants({ withFocusVisibleOutline, className })}\n />\n ),\n);\n\nexport const InteractiveBoxHitSlop = forwardRef<RNView, InteractiveBoxProps>(\n ({ withFocusVisibleOutline, children, className, ...rest }, ref) => {\n const child = Children.only(children) as ReactElement<RNViewProps>;\n return (\n <Pressable\n ref={ref}\n // override default behavior of Pressable which sets pointerEvents to \"none\" on disabled state. However this prevents cursor to display as\n pointerEvents=\"auto\"\n className={`flex-center ${className ?? \"\"}`}\n {...rest}\n >\n {cloneElement(child, {\n className: interactiveBoxVariants({\n withFocusVisibleOutline,\n className: child.props.className,\n }),\n })}\n </Pressable>\n );\n },\n);\n\nexport type SafeAreaBoxProps = Omit<BoxProps, \"style\">;\n\nexport const SafeAreaBox = forwardRef<RNView, SafeAreaBoxProps>(\n (props, ref) => {\n const insets = useSafeAreaInsets();\n return (\n <Box\n ref={ref}\n style={{\n paddingTop: insets.top,\n paddingBottom: insets.bottom,\n paddingLeft: insets.left,\n paddingRight: insets.right,\n }}\n {...props}\n />\n );\n },\n);\n","import { forwardRef } from \"react\";\nimport type { View as RNView } from \"react-native\";\nimport { type VariantProps, tv } from \"tailwind-variants\";\nimport type { Accent } from \"../../core/AlouetteConfig\";\nimport { AccentScope } from \"./AccentScope\";\nimport { Box, type BoxProps } from \"./Box\";\n\nconst surfaceVariants = tv(\n {\n // overflow-hidden so the multi-layer shadow respects the rounded corners.\n base: \"overflow-hidden transition-background duration-fast\",\n variants: {\n size: {\n xs: \"p-sm rounded-xs\",\n sm: \"p-m rounded-sm\",\n md: \"p-xl rounded-sm\",\n lg: \"p-xxl rounded-md\",\n },\n variant: {\n surface: \"bg-surface\",\n highlight: \"bg-highlight\",\n \"highlight-accent\": \"bg-highlight-accent\",\n lowered: \"bg-lowered\",\n translucent: \"bg-translucent\",\n },\n shadow: {\n none: \"shadow-none\",\n s: \"shadow-s\",\n m: \"shadow-m\",\n l: \"shadow-l\",\n lowered: \"shadow-lowered\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"surface\",\n },\n },\n { twMerge: false },\n);\n\ntype SurfaceVariantProps = VariantProps<typeof surfaceVariants>;\n\nexport interface SurfaceProps extends BoxProps, SurfaceVariantProps {\n accent?: Accent;\n}\n\nexport const Surface = forwardRef<RNView, SurfaceProps>(\n ({ className, size, variant, shadow, accent, ...props }, ref) => {\n // shadow defaults to \"s\", or \"lowered\" when variant=\"lowered\".\n const resolvedShadow = shadow ?? (variant === \"lowered\" ? \"lowered\" : \"s\");\n return (\n <AccentScope accent={accent}>\n <Box\n ref={ref}\n className={surfaceVariants({\n size,\n variant,\n shadow: resolvedShadow,\n className,\n })}\n {...props}\n />\n </AccentScope>\n );\n },\n);\n","import type { ComponentType } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function styled<P extends { className?: string }>(\n Component: ComponentType<P>,\n defaultClassName: string,\n): ComponentType<P> {\n function StyledComponent({ className, ...props }: P) {\n return (\n <Component\n className={twMerge(defaultClassName, className)}\n {...(props as P)}\n />\n );\n }\n StyledComponent.displayName = `Styled(${Component.displayName ?? Component.name ?? \"Component\"})`;\n StyledComponent.__isStyledComponent = true;\n return StyledComponent;\n}\n","import { forwardRef } from \"react\";\nimport type { Text as RNText } from \"react-native\";\nimport { type VariantProps, tv } from \"tailwind-variants\";\nimport { Text, type TextProps } from \"../primitives/Text\";\n\nconst storyTitleVariants = tv({\n base: \"font-heading-extrabold text-sharp\",\n variants: {\n level: {\n 1: \"text-4xl mb-xl\",\n 2: \"text-3xl mb-xl\",\n 3: \"text-2xl mb-m\",\n 4: \"text-xl mb-m\",\n },\n },\n defaultVariants: {\n level: 1,\n },\n});\n\ntype StoryTitleVariantProps = VariantProps<typeof storyTitleVariants>;\n\nexport interface StoryTitleProps extends TextProps, StoryTitleVariantProps {}\n\nexport const StoryTitle = forwardRef<RNText, StoryTitleProps>(\n ({ className, level, ...props }, ref) => {\n return (\n <Text\n ref={ref}\n className={storyTitleVariants({ level, className })}\n {...props}\n />\n );\n },\n);\n","import { Fragment, type ReactNode } from \"react\";\nimport { Platform } from \"react-native\";\