alouette
Version:
A modern, customizable design system built on top of NativeWind v5 with configurable defaults
1,396 lines (1,370 loc) • 101 kB
JavaScript
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
import { VariableContextProvider, styled as styled$1 } from 'nativewind';
import { createContext, useContext, forwardRef, Children, cloneElement, Fragment, useRef, useState, useEffect, isValidElement, useId, useReducer, useCallback } from 'react';
import { useColorScheme, View as View$1, Text as Text$1, ScrollView as ScrollView$1, FlatList as FlatList$1, SectionList as SectionList$1, Pressable, Platform, useWindowDimensions, Modal as Modal$1, TextInput, Switch as Switch$1, Linking } from 'react-native';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
export { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { tv } from 'tailwind-variants';
import { XRegularIcon } from 'alouette-icons/phosphor-icons/XRegularIcon';
import { CheckCircleRegularIcon } from 'alouette-icons/phosphor-icons/CheckCircleRegularIcon';
import { WarningDuotoneIcon } from 'alouette-icons/phosphor-icons/WarningDuotoneIcon';
import Animated, { Easing, useSharedValue, withTiming, useAnimatedProps } from 'react-native-reanimated';
import { Circle, Svg } from 'react-native-svg';
import { CheckRegularIcon } from 'alouette-icons/phosphor-icons/CheckRegularIcon';
import { InfoRegularIcon } from 'alouette-icons/phosphor-icons/InfoRegularIcon';
import { QuestionRegularIcon } from 'alouette-icons/phosphor-icons/QuestionRegularIcon';
import { WarningRegularIcon } from 'alouette-icons/phosphor-icons/WarningRegularIcon';
import { CaretDownRegularIcon } from 'alouette-icons/phosphor-icons/CaretDownRegularIcon';
import { AsteriskSimpleRegularIcon } from 'alouette-icons/phosphor-icons/AsteriskSimpleRegularIcon';
import { useForm, FormProvider, useFormContext, Controller, useFieldArray } from 'react-hook-form';
import { PlusRegularIcon } from 'alouette-icons/phosphor-icons/PlusRegularIcon';
import { TrashRegularIcon } from 'alouette-icons/phosphor-icons/TrashRegularIcon';
import { CaretRightRegularIcon } from 'alouette-icons/phosphor-icons/CaretRightRegularIcon';
import * as WebBrowser from 'expo-web-browser';
import { WebBrowserPresentationStyle } from 'expo-web-browser';
const ThemeContext = createContext("light");
function useCurrentTheme() {
return useContext(ThemeContext);
}
function useCurrentMode() {
return useContext(ThemeContext).startsWith("dark") ? "dark" : "light";
}
const themeVariables = {
"light": {
"--color-translucent": "#ffffff66",
"--color-disabled-sharp": "#616161",
"--color-disabled-muted": "#8F8F8F",
"--color-disabled-interactive": "#B8B8B8",
"--color-disabled-interactive-muted": "#E0E0E0",
"--color-muted": "#474747",
"--color-form-border-disabled": "#B8B8B8",
"--color-form-placeholder": "#616161",
"--color-form-disabled-text": "#474747",
"--color-interactive-contained-disabled": "#C7C7C7",
"--color-interactive-outlined-disabled": "#B8B8B8",
"--color-interactive-accent-contained-bg-disabled": "#EBEBEB",
"--color-interactive-accent-outlined-disabled": "#B8B8B8",
"--color-screen": "#EBEBEB",
"--color-surface": "#FAFAFA",
"--color-highlight": "#FFFFFF",
"--color-enabled": "#C7C7C7",
"--color-highlight-accent": "#E0E0E0",
"--color-lowered": "#E0E0E0",
"--color-screen-gradient-start": "#E0E0E0",
"--color-screen-gradient-middle": "#C7C7C7",
"--color-screen-gradient-end": "#B8B8B8",
"--color-border-muted": "#8F8F8F",
"--color-border-sharp": "#616161",
"--color-interactive-contained-pressable": "#FFFFFF",
"--color-interactive-contained-hover": "#FAFAFA",
"--color-interactive-contained-focus": "#FAFAFA",
"--color-interactive-contained-active": "#EBEBEB",
"--color-interactive-outlined-pressable": "#616161",
"--color-interactive-outlined-hover": "#8F8F8F",
"--color-interactive-outlined-focus": "#8F8F8F",
"--color-interactive-outlined-active": "#8F8F8F",
"--color-interactive-outlined-outline-focus": "#8F8F8F",
"--color-interactive-active": "#616161",
"--color-interactive-pressable": "#474747",
"--color-interactive-hover": "#141414",
"--color-sharp": "#141414",
"--color-accent": "#141414",
"--color-accent-muted": "#616161",
"--color-on-accent": "#141414",
"--color-on-accent-muted": "#616161",
"--color-selection": "#47474740",
"--color-interactive-accent-contained-bg": "#EBEBEB",
"--color-interactive-accent-contained-bg-hover": "#FAFAFA",
"--color-interactive-accent-contained-bg-focus": "#FAFAFA",
"--color-interactive-accent-contained-bg-active": "#FAFAFA"
},
"dark": {
"--color-translucent": "#1f1e1e55",
"--color-disabled-sharp": "#A8A8A8",
"--color-disabled-muted": "#A8A8A8",
"--color-disabled-interactive": "#525252",
"--color-disabled-interactive-muted": "#333333",
"--color-muted": "#C2C2C2",
"--color-form-border-disabled": "#525252",
"--color-form-placeholder": "#A8A8A8",
"--color-form-disabled-text": "#C2C2C2",
"--color-interactive-contained-disabled": "#3D3D3D",
"--color-interactive-outlined-disabled": "#474747",
"--color-interactive-accent-contained-bg-disabled": "#3D3D3D",
"--color-interactive-accent-outlined-disabled": "#474747",
"--color-screen": "#1F1F1F",
"--color-surface": "#292929",
"--color-highlight": "#333333",
"--color-enabled": "#525252",
"--color-highlight-accent": "#333333",
"--color-lowered": "#0F0F0F",
"--color-screen-gradient-start": "#292929",
"--color-screen-gradient-middle": "#1F1F1F",
"--color-screen-gradient-end": "#0F0F0F",
"--color-border-muted": "#525252",
"--color-border-sharp": "#A8A8A8",
"--color-interactive-contained-pressable": "#474747",
"--color-interactive-contained-hover": "#525252",
"--color-interactive-contained-focus": "#525252",
"--color-interactive-contained-active": "#525252",
"--color-interactive-outlined-pressable": "#525252",
"--color-interactive-outlined-hover": "#A8A8A8",
"--color-interactive-outlined-focus": "#A8A8A8",
"--color-interactive-outlined-active": "#A8A8A8",
"--color-interactive-outlined-outline-focus": "#525252",
"--color-interactive-active": "#A8A8A8",
"--color-interactive-pressable": "#C2C2C2",
"--color-interactive-hover": "#F5F5F5",
"--color-sharp": "#F5F5F5",
"--color-accent": "#F5F5F5",
"--color-accent-muted": "#C2C2C2",
"--color-on-accent": "#F5F5F5",
"--color-on-accent-muted": "#C2C2C2",
"--color-selection": "#C2C2C240",
"--color-interactive-accent-contained-bg": "#474747",
"--color-interactive-accent-contained-bg-hover": "#525252",
"--color-interactive-accent-contained-bg-focus": "#525252",
"--color-interactive-accent-contained-bg-active": "#525252"
},
"light_brand": {
"--color-translucent": "#ffffff66",
"--color-disabled-sharp": "#616161",
"--color-disabled-muted": "#8F8F8F",
"--color-disabled-interactive": "#B8B8B8",
"--color-disabled-interactive-muted": "#E0E0E0",
"--color-muted": "#474747",
"--color-form-border-disabled": "#B8B8B8",
"--color-form-placeholder": "#616161",
"--color-form-disabled-text": "#474747",
"--color-interactive-contained-disabled": "#C7C7C7",
"--color-interactive-outlined-disabled": "#B8B8B8",
"--color-interactive-accent-contained-bg-disabled": "#EBEBEB",
"--color-interactive-accent-outlined-disabled": "#B8B8B8",
"--color-screen": "#DFF1F6",
"--color-surface": "#EFF8FB",
"--color-highlight": "#F7FBFD",
"--color-enabled": "#99DFF5",
"--color-highlight-accent": "#C7EEF9",
"--color-lowered": "#C7EEF9",
"--color-screen-gradient-start": "#C7EEF9",
"--color-screen-gradient-middle": "#99DFF5",
"--color-screen-gradient-end": "#7DD7F2",
"--color-border-muted": "#23C8FB",
"--color-border-sharp": "#037496",
"--color-interactive-contained-pressable": "#037496",
"--color-interactive-contained-hover": "#049AC8",
"--color-interactive-contained-focus": "#049AC8",
"--color-interactive-contained-active": "#23C8FB",
"--color-interactive-outlined-pressable": "#037496",
"--color-interactive-outlined-hover": "#23C8FB",
"--color-interactive-outlined-focus": "#23C8FB",
"--color-interactive-outlined-active": "#23C8FB",
"--color-interactive-outlined-outline-focus": "#23C8FB",
"--color-interactive-active": "#037496",
"--color-interactive-pressable": "#024D64",
"--color-interactive-hover": "#011F28",
"--color-sharp": "#011F28",
"--color-accent": "#024D64",
"--color-accent-muted": "#037496",
"--color-on-accent": "#FFFFFF",
"--color-on-accent-muted": "#C7EEF9",
"--color-selection": "#024D6440",
"--color-interactive-accent-contained-bg": "#DFF1F6",
"--color-interactive-accent-contained-bg-hover": "#EFF8FB",
"--color-interactive-accent-contained-bg-focus": "#EFF8FB",
"--color-interactive-accent-contained-bg-active": "#EFF8FB"
},
"light_info": {
"--color-translucent": "#ffffff66",
"--color-disabled-sharp": "#616161",
"--color-disabled-muted": "#8F8F8F",
"--color-disabled-interactive": "#B8B8B8",
"--color-disabled-interactive-muted": "#E0E0E0",
"--color-muted": "#474747",
"--color-form-border-disabled": "#B8B8B8",
"--color-form-placeholder": "#616161",
"--color-form-disabled-text": "#474747",
"--color-interactive-contained-disabled": "#C7C7C7",
"--color-interactive-outlined-disabled": "#B8B8B8",
"--color-interactive-accent-contained-bg-disabled": "#EBEBEB",
"--color-interactive-accent-outlined-disabled": "#B8B8B8",
"--color-screen": "#DFF0F6",
"--color-surface": "#EFF8FB",
"--color-highlight": "#F7FBFD",
"--color-enabled": "#99DEF5",
"--color-highlight-accent": "#C7EDF9",
"--color-lowered": "#C7EDF9",
"--color-screen-gradient-start": "#C7EDF9",
"--color-screen-gradient-middle": "#99DEF5",
"--color-screen-gradient-end": "#7DD5F2",
"--color-border-muted": "#23C5FB",
"--color-border-sharp": "#037196",
"--color-interactive-contained-pressable": "#037196",
"--color-interactive-contained-hover": "#0497C8",
"--color-interactive-contained-focus": "#0497C8",
"--color-interactive-contained-active": "#23C5FB",
"--color-interactive-outlined-pressable": "#037196",
"--color-interactive-outlined-hover": "#23C5FB",
"--color-interactive-outlined-focus": "#23C5FB",
"--color-interactive-outlined-active": "#23C5FB",
"--color-interactive-outlined-outline-focus": "#23C5FB",
"--color-interactive-active": "#037196",
"--color-interactive-pressable": "#024B64",
"--color-interactive-hover": "#011E28",
"--color-sharp": "#011E28",
"--color-accent": "#024B64",
"--color-accent-muted": "#037196",
"--color-on-accent": "#FFFFFF",
"--color-on-accent-muted": "#C7EDF9",
"--color-selection": "#024B6440",
"--color-interactive-accent-contained-bg": "#DFF0F6",
"--color-interactive-accent-contained-bg-hover": "#EFF8FB",
"--color-interactive-accent-contained-bg-focus": "#EFF8FB",
"--color-interactive-accent-contained-bg-active": "#EFF8FB"
},
"light_success": {
"--color-translucent": "#ffffff66",
"--color-disabled-sharp": "#616161",
"--color-disabled-muted": "#8F8F8F",
"--color-disabled-interactive": "#B8B8B8",
"--color-disabled-interactive-muted": "#E0E0E0",
"--color-muted": "#474747",
"--color-form-border-disabled": "#B8B8B8",
"--color-form-placeholder": "#616161",
"--color-form-disabled-text": "#474747",
"--color-interactive-contained-disabled": "#C7C7C7",
"--color-interactive-outlined-disabled": "#B8B8B8",
"--color-interactive-accent-contained-bg-disabled": "#EBEBEB",
"--color-interactive-accent-outlined-disabled": "#B8B8B8",
"--color-screen": "#DFF6DF",
"--color-surface": "#EFFBEF",
"--color-highlight": "#F7FDF7",
"--color-enabled": "#91F391",
"--color-highlight-accent": "#BFF8BF",
"--color-lowered": "#BFF8BF",
"--color-screen-gradient-start": "#BFF8BF",
"--color-screen-gradient-middle": "#91F391",
"--color-screen-gradient-end": "#75F075",
"--color-border-muted": "#19FA19",
"--color-border-sharp": "#027802",
"--color-interactive-contained-pressable": "#027802",
"--color-interactive-contained-hover": "#03AA03",
"--color-interactive-contained-focus": "#03AA03",
"--color-interactive-contained-active": "#19FA19",
"--color-interactive-outlined-pressable": "#027802",
"--color-interactive-outlined-hover": "#19FA19",
"--color-interactive-outlined-focus": "#19FA19",
"--color-interactive-outlined-active": "#19FA19",
"--color-interactive-outlined-outline-focus": "#19FA19",
"--color-interactive-active": "#027802",
"--color-interactive-pressable": "#014601",
"--color-interactive-hover": "#012801",
"--color-sharp": "#012801",
"--color-accent": "#014601",
"--color-accent-muted": "#027802",
"--color-on-accent": "#FFFFFF",
"--color-on-accent-muted": "#BFF8BF",
"--color-selection": "#01460140",
"--color-interactive-accent-contained-bg": "#DFF6DF",
"--color-interactive-accent-contained-bg-hover": "#EFFBEF",
"--color-interactive-accent-contained-bg-focus": "#EFFBEF",
"--color-interactive-accent-contained-bg-active": "#EFFBEF"
},
"light_warning": {
"--color-translucent": "#ffffff66",
"--color-disabled-sharp": "#616161",
"--color-disabled-muted": "#8F8F8F",
"--color-disabled-interactive": "#B8B8B8",
"--color-disabled-interactive-muted": "#E0E0E0",
"--color-muted": "#474747",
"--color-form-border-disabled": "#B8B8B8",
"--color-form-placeholder": "#616161",
"--color-form-disabled-text": "#474747",
"--color-interactive-contained-disabled": "#C7C7C7",
"--color-interactive-outlined-disabled": "#B8B8B8",
"--color-interactive-accent-contained-bg-disabled": "#EBEBEB",
"--color-interactive-accent-outlined-disabled": "#B8B8B8",
"--color-screen": "#F6EEDF",
"--color-surface": "#FBF7EF",
"--color-highlight": "#FDFBF7",
"--color-enabled": "#F3D291",
"--color-highlight-accent": "#F8E5BF",
"--color-lowered": "#F8E5BF",
"--color-screen-gradient-start": "#F8E5BF",
"--color-screen-gradient-middle": "#F3D291",
"--color-screen-gradient-end": "#F0C775",
"--color-border-muted": "#FAAF19",
"--color-border-sharp": "#8C5E03",
"--color-interactive-contained-pressable": "#8C5E03",
"--color-interactive-contained-hover": "#BE8004",
"--color-interactive-contained-focus": "#BE8004",
"--color-interactive-contained-active": "#FAAF19",
"--color-interactive-outlined-pressable": "#8C5E03",
"--color-interactive-outlined-hover": "#FAAF19",
"--color-interactive-outlined-focus": "#FAAF19",
"--color-interactive-outlined-active": "#FAAF19",
"--color-interactive-outlined-outline-focus": "#FAAF19",
"--color-interactive-active": "#8C5E03",
"--color-interactive-pressable": "#5A3D02",
"--color-interactive-hover": "#281B01",
"--color-sharp": "#281B01",
"--color-accent": "#5A3D02",
"--color-accent-muted": "#8C5E03",
"--color-on-accent": "#FFFFFF",
"--color-on-accent-muted": "#F8E5BF",
"--color-selection": "#5A3D0240",
"--color-interactive-accent-contained-bg": "#F6EEDF",
"--color-interactive-accent-contained-bg-hover": "#FBF7EF",
"--color-interactive-accent-contained-bg-focus": "#FBF7EF",
"--color-interactive-accent-contained-bg-active": "#FBF7EF"
},
"light_danger": {
"--color-translucent": "#ffffff66",
"--color-disabled-sharp": "#616161",
"--color-disabled-muted": "#8F8F8F",
"--color-disabled-interactive": "#B8B8B8",
"--color-disabled-interactive-muted": "#E0E0E0",
"--color-muted": "#474747",
"--color-form-border-disabled": "#B8B8B8",
"--color-form-placeholder": "#616161",
"--color-form-disabled-text": "#474747",
"--color-interactive-contained-disabled": "#C7C7C7",
"--color-interactive-outlined-disabled": "#B8B8B8",
"--color-interactive-accent-contained-bg-disabled": "#EBEBEB",
"--color-interactive-accent-outlined-disabled": "#B8B8B8",
"--color-screen": "#F6E0DF",
"--color-surface": "#FBEFEF",
"--color-highlight": "#FDF7F7",
"--color-enabled": "#F7A4A1",
"--color-highlight-accent": "#FBD2D0",
"--color-lowered": "#FBD2D0",
"--color-screen-gradient-start": "#FBD2D0",
"--color-screen-gradient-middle": "#F7A4A1",
"--color-screen-gradient-end": "#F48985",
"--color-border-muted": "#FB342D",
"--color-border-sharp": "#A00803",
"--color-interactive-contained-pressable": "#A00803",
"--color-interactive-contained-hover": "#D20B04",
"--color-interactive-contained-focus": "#D20B04",
"--color-interactive-contained-active": "#FB342D",
"--color-interactive-outlined-pressable": "#A00803",
"--color-interactive-outlined-hover": "#FB342D",
"--color-interactive-outlined-focus": "#FB342D",
"--color-interactive-outlined-active": "#FB342D",
"--color-interactive-outlined-outline-focus": "#FB342D",
"--color-interactive-active": "#A00803",
"--color-interactive-pressable": "#6E0602",
"--color-interactive-hover": "#280201",
"--color-sharp": "#280201",
"--color-accent": "#6E0602",
"--color-accent-muted": "#A00803",
"--color-on-accent": "#FFFFFF",
"--color-on-accent-muted": "#FBD2D0",
"--color-selection": "#6E060240",
"--color-interactive-accent-contained-bg": "#F6E0DF",
"--color-interactive-accent-contained-bg-hover": "#FBEFEF",
"--color-interactive-accent-contained-bg-focus": "#FBEFEF",
"--color-interactive-accent-contained-bg-active": "#FBEFEF"
},
"dark_brand": {
"--color-translucent": "#1f1e1e55",
"--color-disabled-sharp": "#A8A8A8",
"--color-disabled-muted": "#A8A8A8",
"--color-disabled-interactive": "#525252",
"--color-disabled-interactive-muted": "#333333",
"--color-muted": "#C2C2C2",
"--color-form-border-disabled": "#525252",
"--color-form-placeholder": "#A8A8A8",
"--color-form-disabled-text": "#C2C2C2",
"--color-interactive-contained-disabled": "#3D3D3D",
"--color-interactive-outlined-disabled": "#474747",
"--color-interactive-accent-contained-bg-disabled": "#3D3D3D",
"--color-interactive-accent-outlined-disabled": "#474747",
"--color-screen": "#0D2830",
"--color-surface": "#123540",
"--color-highlight": "#104E60",
"--color-enabled": "#1E94B8",
"--color-highlight-accent": "#104E60",
"--color-lowered": "#071418",
"--color-screen-gradient-start": "#123540",
"--color-screen-gradient-middle": "#0D2830",
"--color-screen-gradient-end": "#071418",
"--color-border-muted": "#1E94B8",
"--color-border-sharp": "#5CD1F5",
"--color-interactive-contained-pressable": "#156A84",
"--color-interactive-contained-hover": "#1E94B8",
"--color-interactive-contained-focus": "#1E94B8",
"--color-interactive-contained-active": "#1E94B8",
"--color-interactive-outlined-pressable": "#1E94B8",
"--color-interactive-outlined-hover": "#5CD1F5",
"--color-interactive-outlined-focus": "#5CD1F5",
"--color-interactive-outlined-active": "#5CD1F5",
"--color-interactive-outlined-outline-focus": "#1E94B8",
"--color-interactive-active": "#5CD1F5",
"--color-interactive-pressable": "#8CDFF8",
"--color-interactive-hover": "#D9F4FD",
"--color-sharp": "#D9F4FD",
"--color-accent": "#8CDFF8",
"--color-accent-muted": "#8CDFF8",
"--color-on-accent": "#F5F5F5",
"--color-on-accent-muted": "#8CDFF8",
"--color-selection": "#8CDFF840",
"--color-interactive-accent-contained-bg": "#156A84",
"--color-interactive-accent-contained-bg-hover": "#1E94B8",
"--color-interactive-accent-contained-bg-focus": "#1E94B8",
"--color-interactive-accent-contained-bg-active": "#1E94B8"
},
"dark_info": {
"--color-translucent": "#1f1e1e55",
"--color-disabled-sharp": "#A8A8A8",
"--color-disabled-muted": "#A8A8A8",
"--color-disabled-interactive": "#525252",
"--color-disabled-interactive-muted": "#333333",
"--color-muted": "#C2C2C2",
"--color-form-border-disabled": "#525252",
"--color-form-placeholder": "#A8A8A8",
"--color-form-disabled-text": "#C2C2C2",
"--color-interactive-contained-disabled": "#3D3D3D",
"--color-interactive-outlined-disabled": "#474747",
"--color-interactive-accent-contained-bg-disabled": "#3D3D3D",
"--color-interactive-accent-outlined-disabled": "#474747",
"--color-screen": "#0D2730",
"--color-surface": "#123440",
"--color-highlight": "#104C60",
"--color-enabled": "#1E92B8",
"--color-highlight-accent": "#104C60",
"--color-lowered": "#071418",
"--color-screen-gradient-start": "#123440",
"--color-screen-gradient-middle": "#0D2730",
"--color-screen-gradient-end": "#071418",
"--color-border-muted": "#1E92B8",
"--color-border-sharp": "#5CCEF5",
"--color-interactive-contained-pressable": "#156884",
"--color-interactive-contained-hover": "#1E92B8",
"--color-interactive-contained-focus": "#1E92B8",
"--color-interactive-contained-active": "#1E92B8",
"--color-interactive-outlined-pressable": "#1E92B8",
"--color-interactive-outlined-hover": "#5CCEF5",
"--color-interactive-outlined-focus": "#5CCEF5",
"--color-interactive-outlined-active": "#5CCEF5",
"--color-interactive-outlined-outline-focus": "#1E92B8",
"--color-interactive-active": "#5CCEF5",
"--color-interactive-pressable": "#8CDDF8",
"--color-interactive-hover": "#D9F4FD",
"--color-sharp": "#D9F4FD",
"--color-accent": "#8CDDF8",
"--color-accent-muted": "#8CDDF8",
"--color-on-accent": "#F5F5F5",
"--color-on-accent-muted": "#8CDDF8",
"--color-selection": "#8CDDF840",
"--color-interactive-accent-contained-bg": "#156884",
"--color-interactive-accent-contained-bg-hover": "#1E92B8",
"--color-interactive-accent-contained-bg-focus": "#1E92B8",
"--color-interactive-accent-contained-bg-active": "#1E92B8"
},
"dark_success": {
"--color-translucent": "#1f1e1e55",
"--color-disabled-sharp": "#A8A8A8",
"--color-disabled-muted": "#A8A8A8",
"--color-disabled-interactive": "#525252",
"--color-disabled-interactive-muted": "#333333",
"--color-muted": "#C2C2C2",
"--color-form-border-disabled": "#525252",
"--color-form-placeholder": "#A8A8A8",
"--color-form-disabled-text": "#C2C2C2",
"--color-interactive-contained-disabled": "#3D3D3D",
"--color-interactive-outlined-disabled": "#474747",
"--color-interactive-accent-contained-bg-disabled": "#3D3D3D",
"--color-interactive-accent-outlined-disabled": "#474747",
"--color-screen": "#0D300D",
"--color-surface": "#124012",
"--color-highlight": "#0F570F",
"--color-enabled": "#1FAD1F",
"--color-highlight-accent": "#0F570F",
"--color-lowered": "#071807",
"--color-screen-gradient-start": "#124012",
"--color-screen-gradient-middle": "#0D300D",
"--color-screen-gradient-end": "#071807",
"--color-border-muted": "#1FAD1F",
"--color-border-sharp": "#52F452",
"--color-interactive-contained-pressable": "#157915",
"--color-interactive-contained-hover": "#1FAD1F",
"--color-interactive-contained-focus": "#1FAD1F",
"--color-interactive-contained-active": "#1FAD1F",
"--color-interactive-outlined-pressable": "#1FAD1F",
"--color-interactive-outlined-hover": "#52F452",
"--color-interactive-outlined-focus": "#52F452",
"--color-interactive-outlined-active": "#52F452",
"--color-interactive-outlined-outline-focus": "#1FAD1F",
"--color-interactive-active": "#52F452",
"--color-interactive-pressable": "#82F782",
"--color-interactive-hover": "#D9FDD9",
"--color-sharp": "#D9FDD9",
"--color-accent": "#82F782",
"--color-accent-muted": "#82F782",
"--color-on-accent": "#F5F5F5",
"--color-on-accent-muted": "#82F782",
"--color-selection": "#82F78240",
"--color-interactive-accent-contained-bg": "#157915",
"--color-interactive-accent-contained-bg-hover": "#1FAD1F",
"--color-interactive-accent-contained-bg-focus": "#1FAD1F",
"--color-interactive-accent-contained-bg-active": "#1FAD1F"
},
"dark_warning": {
"--color-translucent": "#1f1e1e55",
"--color-disabled-sharp": "#A8A8A8",
"--color-disabled-muted": "#A8A8A8",
"--color-disabled-interactive": "#525252",
"--color-disabled-interactive-muted": "#333333",
"--color-muted": "#C2C2C2",
"--color-form-border-disabled": "#525252",
"--color-form-placeholder": "#A8A8A8",
"--color-form-disabled-text": "#C2C2C2",
"--color-interactive-contained-disabled": "#3D3D3D",
"--color-interactive-outlined-disabled": "#474747",
"--color-interactive-accent-contained-bg-disabled": "#3D3D3D",
"--color-interactive-accent-outlined-disabled": "#474747",
"--color-screen": "#30240D",
"--color-surface": "#403012",
"--color-highlight": "#583F0E",
"--color-enabled": "#AF7E1D",
"--color-highlight-accent": "#583F0E",
"--color-lowered": "#181207",
"--color-screen-gradient-start": "#403012",
"--color-screen-gradient-middle": "#30240D",
"--color-screen-gradient-end": "#181207",
"--color-border-muted": "#AF7E1D",
"--color-border-sharp": "#F4BE52",
"--color-interactive-contained-pressable": "#7B5914",
"--color-interactive-contained-hover": "#AF7E1D",
"--color-interactive-contained-focus": "#AF7E1D",
"--color-interactive-contained-active": "#AF7E1D",
"--color-interactive-outlined-pressable": "#AF7E1D",
"--color-interactive-outlined-hover": "#F4BE52",
"--color-interactive-outlined-focus": "#F4BE52",
"--color-interactive-outlined-active": "#F4BE52",
"--color-interactive-outlined-outline-focus": "#AF7E1D",
"--color-interactive-active": "#F4BE52",
"--color-interactive-pressable": "#F7D082",
"--color-interactive-hover": "#FDF1D9",
"--color-sharp": "#FDF1D9",
"--color-accent": "#F7D082",
"--color-accent-muted": "#F7D082",
"--color-on-accent": "#F5F5F5",
"--color-on-accent-muted": "#F7D082",
"--color-selection": "#F7D08240",
"--color-interactive-accent-contained-bg": "#7B5914",
"--color-interactive-accent-contained-bg-hover": "#AF7E1D",
"--color-interactive-accent-contained-bg-focus": "#AF7E1D",
"--color-interactive-accent-contained-bg-active": "#AF7E1D"
},
"dark_danger": {
"--color-translucent": "#1f1e1e55",
"--color-disabled-sharp": "#A8A8A8",
"--color-disabled-muted": "#A8A8A8",
"--color-disabled-interactive": "#525252",
"--color-disabled-interactive-muted": "#333333",
"--color-muted": "#C2C2C2",
"--color-form-border-disabled": "#525252",
"--color-form-placeholder": "#A8A8A8",
"--color-form-disabled-text": "#C2C2C2",
"--color-interactive-contained-disabled": "#3D3D3D",
"--color-interactive-outlined-disabled": "#474747",
"--color-interactive-accent-contained-bg-disabled": "#3D3D3D",
"--color-interactive-accent-outlined-disabled": "#474747",
"--color-screen": "#300F0D",
"--color-surface": "#401312",
"--color-highlight": "#691411",
"--color-enabled": "#C1251F",
"--color-highlight-accent": "#691411",
"--color-lowered": "#180707",
"--color-screen-gradient-start": "#401312",
"--color-screen-gradient-middle": "#300F0D",
"--color-screen-gradient-end": "#180707",
"--color-border-muted": "#C1251F",
"--color-border-sharp": "#F56A66",
"--color-interactive-contained-pressable": "#8C1B17",
"--color-interactive-contained-hover": "#C1251F",
"--color-interactive-contained-focus": "#C1251F",
"--color-interactive-contained-active": "#C1251F",
"--color-interactive-outlined-pressable": "#C1251F",
"--color-interactive-outlined-hover": "#F56A66",
"--color-interactive-outlined-focus": "#F56A66",
"--color-interactive-outlined-active": "#F56A66",
"--color-interactive-outlined-outline-focus": "#C1251F",
"--color-interactive-active": "#F56A66",
"--color-interactive-pressable": "#F89996",
"--color-interactive-hover": "#FDDAD9",
"--color-sharp": "#FDDAD9",
"--color-accent": "#F89996",
"--color-accent-muted": "#F89996",
"--color-on-accent": "#F5F5F5",
"--color-on-accent-muted": "#F89996",
"--color-selection": "#F8999640",
"--color-interactive-accent-contained-bg": "#8C1B17",
"--color-interactive-accent-contained-bg-hover": "#C1251F",
"--color-interactive-accent-contained-bg-focus": "#C1251F",
"--color-interactive-accent-contained-bg-active": "#C1251F"
}
};
function ScopedTheme({ theme, children }) {
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(VariableContextProvider, { value: themeVariables[theme], children }) });
}
function AlouetteProvider({
children
}) {
const colorScheme = useColorScheme();
return /* @__PURE__ */ jsx(ScopedTheme, { theme: colorScheme === "dark" ? "dark" : "light", children });
}
const AlouetteDecorator = (storyFn, context) => {
const theme = context.globals.backgrounds?.value === "#000000" ? "dark" : "light";
return /* @__PURE__ */ jsx(SafeAreaProvider, { children: /* @__PURE__ */ jsx(AlouetteProvider, { children: /* @__PURE__ */ jsx(ScopedTheme, { theme, children: storyFn(context) }) }) });
};
function useThemeToken(tokenOrTokens) {
const theme = useContext(ThemeContext);
const vars = themeVariables[theme];
if (Array.isArray(tokenOrTokens)) {
return tokenOrTokens.map((token) => vars[token]);
}
return vars[tokenOrTokens];
}
const View = forwardRef((props, ref) => {
return /* @__PURE__ */ jsx(View$1, { ref, ...props });
});
function AccentScope({
mode: forcedMode,
accent,
children
}) {
const currentMode = useCurrentMode();
if (!accent) {
return children;
}
const mode = forcedMode ?? currentMode;
return /* @__PURE__ */ jsx(ScopedTheme, { theme: `${mode}_${accent}`, children });
}
const twMerge = extendTailwindMerge({
extend: {
classGroups: {
"font-family": [
"font-body",
"font-body-bold",
"font-body-extrabold",
"font-heading",
"font-heading-bold",
"font-heading-extrabold",
"font-mono",
"font-mono-bold",
"font-mono-extrabold"
]
}
}
});
const Text = forwardRef(
({ className, accent, ...props }, ref) => {
return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsx(
Text$1,
{
ref,
className: twMerge("font-body text-sharp", className),
...props
}
) });
}
);
const Paragraph = forwardRef(
({ className, ...props }, ref) => {
return /* @__PURE__ */ jsx(
Text,
{
ref,
role: "paragraph",
className: `select-auto ${className ?? ""}`,
...props
}
);
}
);
const ScrollView = styled$1(
ScrollView$1,
{
className: "style",
contentContainerClassName: "contentContainerStyle"
}
);
const FlatList = styled$1(
FlatList$1,
{
className: "style",
contentContainerClassName: "contentContainerStyle",
columnWrapperClassName: "columnWrapperStyle"
}
);
const SectionList = styled$1(
SectionList$1,
{
className: "style",
contentContainerClassName: "contentContainerStyle"
}
);
const Stack = forwardRef(
({ className, ...props }, ref) => {
return /* @__PURE__ */ jsx(
View$1,
{
ref,
className: `flex-row flex-wrap ${className ?? ""}`,
...props
}
);
}
);
const HStack = forwardRef(
({ className, ...props }, ref) => {
return /* @__PURE__ */ jsx(View$1, { ref, className: `flex-row ${className ?? ""}`, ...props });
}
);
const VStack = forwardRef(
({ className, ...props }, ref) => {
return /* @__PURE__ */ jsx(View$1, { ref, className: `flex-col ${className ?? ""}`, ...props });
}
);
const separatorVariants = tv({
base: "border-border-sharp",
variants: {
vertical: {
true: "self-stretch border-r w-px",
false: "self-stretch border-b h-px"
}
},
defaultVariants: {
vertical: false
}
});
const Separator = forwardRef(
({ className, vertical, ...props }, ref) => {
return /* @__PURE__ */ jsx(
View$1,
{
ref,
className: separatorVariants({ vertical, className }),
...props
}
);
}
);
const boxBaseClasses = "shrink";
const Box = forwardRef(
({ className, accent, ...props }, ref) => {
return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsx(
View$1,
{
ref,
className: `${boxBaseClasses} ${className ?? ""}`,
...props
}
) });
}
);
const interactiveBoxVariants = tv({
base: [
boxBaseClasses,
"cursor-pointer",
"transition-[transform,background-color,border-color] duration-fast ease-in",
"disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70",
"active:scale-[0.975]"
].join(" "),
variants: {
withFocusVisibleOutline: {
true: "focus-visible:outline-2 focus-visible:outline-offset-2"
}
}
});
const InteractiveBox = forwardRef(
({ withFocusVisibleOutline, className, ...rest }, ref) => /* @__PURE__ */ jsx(
Pressable,
{
ref,
pointerEvents: "auto",
...rest,
className: interactiveBoxVariants({ withFocusVisibleOutline, className })
}
)
);
forwardRef(
({ withFocusVisibleOutline, children, className, ...rest }, ref) => {
const child = Children.only(children);
return /* @__PURE__ */ jsx(
Pressable,
{
ref,
pointerEvents: "auto",
className: `flex-center ${className ?? ""}`,
...rest,
children: cloneElement(child, {
className: interactiveBoxVariants({
withFocusVisibleOutline,
className: child.props.className
})
})
}
);
}
);
const SafeAreaBox = forwardRef(
(props, ref) => {
const insets = useSafeAreaInsets();
return /* @__PURE__ */ jsx(
Box,
{
ref,
style: {
paddingTop: insets.top,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right
},
...props
}
);
}
);
const surfaceVariants = tv(
{
// overflow-hidden so the multi-layer shadow respects the rounded corners.
base: "overflow-hidden transition-background duration-fast",
variants: {
size: {
xs: "p-sm rounded-xs",
sm: "p-m rounded-sm",
md: "p-xl rounded-sm",
lg: "p-xxl rounded-md"
},
variant: {
surface: "bg-surface",
highlight: "bg-highlight",
"highlight-accent": "bg-highlight-accent",
lowered: "bg-lowered",
translucent: "bg-translucent"
},
shadow: {
none: "shadow-none",
s: "shadow-s",
m: "shadow-m",
l: "shadow-l",
lowered: "shadow-lowered"
}
},
defaultVariants: {
size: "md",
variant: "surface"
}
},
{ twMerge: false }
);
const Surface = forwardRef(
({ className, size, variant, shadow, accent, ...props }, ref) => {
const resolvedShadow = shadow ?? (variant === "lowered" ? "lowered" : "s");
return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsx(
Box,
{
ref,
className: surfaceVariants({
size,
variant,
shadow: resolvedShadow,
className
}),
...props
}
) });
}
);
function styled(Component, defaultClassName) {
function StyledComponent({ className, ...props }) {
return /* @__PURE__ */ jsx(
Component,
{
className: twMerge$1(defaultClassName, className),
...props
}
);
}
StyledComponent.displayName = `Styled(${Component.displayName ?? Component.name ?? "Component"})`;
StyledComponent.__isStyledComponent = true;
return StyledComponent;
}
const storyTitleVariants = tv({
base: "font-heading-extrabold text-sharp",
variants: {
level: {
1: "text-4xl mb-xl",
2: "text-3xl mb-xl",
3: "text-2xl mb-m",
4: "text-xl mb-m"
}
},
defaultVariants: {
level: 1
}
});
const StoryTitle = forwardRef(
({ className, level, ...props }, ref) => {
return /* @__PURE__ */ jsx(
Text,
{
ref,
className: storyTitleVariants({ level, className }),
...props
}
);
}
);
const InternalStorySection = styled(View, "-mx-l px-l");
function StorySection({
title,
children,
level = 1,
modeTheme,
accent,
withSurface = false
}) {
const content = /* @__PURE__ */ jsx(InternalStorySection, { className: "pb-xl bg-screen", children: withSurface ? /* @__PURE__ */ jsxs(Surface, { children: [
/* @__PURE__ */ jsx(StoryTitle, { level: level + 1, children: title }),
/* @__PURE__ */ jsx(VStack, { className: "gap-m", children })
] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
/* @__PURE__ */ jsx(StoryTitle, { level: level + 1, children: title }),
/* @__PURE__ */ jsx(VStack, { className: "gap-m", children })
] }) });
if (modeTheme) {
return /* @__PURE__ */ jsx(ScopedTheme, { theme: modeTheme, children: content });
}
if (accent) {
return /* @__PURE__ */ jsx(AccentScope, { accent, children: content });
}
return content;
}
function StorySubSection({
title,
children,
modeTheme,
accent,
withSurface = false
}) {
const content = /* @__PURE__ */ jsx(InternalStorySection, { className: "mb-m", children: withSurface ? /* @__PURE__ */ jsxs(Surface, { children: [
/* @__PURE__ */ jsx(StoryTitle, { level: 3, children: title }),
/* @__PURE__ */ jsx(VStack, { className: "gap-m", children })
] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
/* @__PURE__ */ jsx(StoryTitle, { level: 3, children: title }),
/* @__PURE__ */ jsx(VStack, { className: "gap-m", children })
] }) });
if (modeTheme) {
return /* @__PURE__ */ jsx(ScopedTheme, { theme: modeTheme, children: content });
}
if (accent) {
return /* @__PURE__ */ jsx(AccentScope, { accent, children: content });
}
return content;
}
const ScrollWrapper = Platform.OS === "web" ? Fragment : ScrollView;
function Story({
documentation,
children,
noDarkMode
}) {
return /* @__PURE__ */ jsxs(ScrollWrapper, { children: [
documentation && /* @__PURE__ */ jsx(Surface, { accent: "info", className: "mb-xxl", children: documentation }),
["light", ...noDarkMode ? [] : ["dark"]].map(
(mode) => /* @__PURE__ */ jsx(ScopedTheme, { theme: mode, children: /* @__PURE__ */ jsx(View, { className: "bg-screen p-l", children }) }, mode)
)
] });
}
Story.Section = StorySection;
Story.SubSection = StorySubSection;
function StoryContainer({
title,
children
}) {
return /* @__PURE__ */ jsx(ScopedTheme, { theme: "light", children: /* @__PURE__ */ jsxs(ScrollView, { className: "bg-white p-3xl", children: [
/* @__PURE__ */ jsx(StoryTitle, { level: 1, children: title }),
children
] }) });
}
const StoryDecorator = (storyFn, { name, parameters }) => {
if (parameters?.container === false) return storyFn();
return /* @__PURE__ */ jsx(StoryContainer, { title: name, children: storyFn() });
};
const rowVariants = tv(
{
base: "flex-col",
variants: {
breakpoint: {
small: "sm:flex-row sm:mb-xl",
medium: "md:flex-row md:mb-xl"
},
flexWrap: { true: "" }
},
compoundVariants: [
{ breakpoint: "small", flexWrap: true, class: "sm:flex-wrap sm:gap-m" },
{ breakpoint: "medium", flexWrap: true, class: "md:flex-wrap md:gap-m" }
]
},
{ twMerge: false }
);
const itemVariants = tv(
{
base: "pt-m pb-xl",
variants: {
breakpoint: {
small: "sm:pt-0 sm:pb-0 sm:my-xxs shrink",
medium: "md:pt-0 md:pb-0 md:my-xxs shrink"
},
flexWrap: {
true: "",
false: ""
},
loose: {
true: "",
false: "grow"
}
},
compoundVariants: [
{ breakpoint: "small", flexWrap: false, class: "sm:basis-0" },
{ breakpoint: "medium", flexWrap: false, class: "md:basis-0" }
],
defaultVariants: {
flexWrap: false
}
},
{ twMerge: false }
);
function StoryGridRow({
children,
breakpoint = "small",
flexWrap,
loose
}) {
return /* @__PURE__ */ jsx(View, { className: rowVariants({ breakpoint, flexWrap }), children: Children.map(children, (child) => /* @__PURE__ */ jsx(View, { className: itemVariants({ breakpoint, flexWrap, loose }), children: child })) });
}
function StoryGridCol({
title,
children,
platform = "all"
}) {
const isNative = Platform.OS === "ios" || Platform.OS === "android";
if (Platform.OS === "web" && platform === "native") {
return null;
}
if (isNative && platform === "web") {
return null;
}
return title ? /* @__PURE__ */ jsxs(VStack, { children: [
/* @__PURE__ */ jsx(StoryTitle, { level: 4, numberOfLines: 1, children: title }),
children
] }) : children;
}
const StoryGrid = {
Row: StoryGridRow,
Col: StoryGridCol
};
function StableAccentScope({
mode: forcedMode,
accent,
children
}) {
const currentTheme = useCurrentTheme();
const currentMode = useCurrentMode();
return /* @__PURE__ */ jsx(
ScopedTheme,
{
theme: accent ? `${forcedMode ?? currentMode}_${accent}` : currentTheme,
children
}
);
}
function joinClasses(...classes) {
return classes.filter(Boolean).join(" ");
}
function usePresence(activeKey, exitDurationMs, children) {
const [exiting, setExiting] = useState([]);
const previousRef = useRef({ key: activeKey, node: children });
const childrenRef = useRef(children);
childrenRef.current = children;
const timersRef = useRef([]);
useEffect(
() => () => {
timersRef.current.forEach(clearTimeout);
},
[]
);
useEffect(() => {
const previous = previousRef.current;
if (previous.key === activeKey) {
return;
}
previousRef.current = { key: activeKey, node: childrenRef.current };
setExiting((list) => [...list, previous]);
const timer = setTimeout(() => {
setExiting((list) => list.filter((item) => item !== previous));
timersRef.current = timersRef.current.filter((t) => t !== timer);
}, exitDurationMs);
timersRef.current.push(timer);
}, [activeKey, exitDurationMs]);
return exiting;
}
function toItems(children) {
return Children.toArray(children).filter(isValidElement).map((child) => ({ key: child.key, node: child }));
}
function mergeKeys(previous, next) {
const nextSet = new Set(next);
const pendingByNext = /* @__PURE__ */ new Map();
let pending = [];
for (const key of previous) {
if (nextSet.has(key)) {
if (pending.length > 0) {
pendingByNext.set(key, pending);
pending = [];
}
} else {
pending.push(key);
}
}
const result = [];
for (const key of next) {
const before = pendingByNext.get(key);
if (before) {
result.push(...before);
}
result.push(key);
}
result.push(...pending);
return result;
}
function usePresenceList(children, exitDurationMs) {
const items = toItems(children);
const liveKeys = items.map((item) => item.key);
const signature = liveKeys.join("\0");
const nodesRef = useRef(/* @__PURE__ */ new Map());
for (const item of items) {
nodesRef.current.set(item.key, item.node);
}
const liveKeysRef = useRef(liveKeys);
liveKeysRef.current = liveKeys;
const [order, setOrder] = useState(liveKeys);
const orderRef = useRef(order);
orderRef.current = order;
const timersRef = useRef(/* @__PURE__ */ new Map());
useEffect(
() => () => {
timersRef.current.forEach(clearTimeout);
},
[]
);
useEffect(() => {
const live2 = new Set(liveKeysRef.current);
const newOrder = mergeKeys(orderRef.current, liveKeysRef.current);
for (const key of liveKeysRef.current) {
const timer = timersRef.current.get(key);
if (timer) {
clearTimeout(timer);
timersRef.current.delete(key);
}
}
for (const key of newOrder) {
if (!live2.has(key) && !timersRef.current.has(key)) {
const timer = setTimeout(() => {
timersRef.current.delete(key);
nodesRef.current.delete(key);
setOrder((current) => current.filter((k) => k !== key));
}, exitDurationMs);
timersRef.current.set(key, timer);
}
}
setOrder(newOrder);
}, [signature, exitDurationMs]);
const live = new Set(liveKeys);
return order.map((key) => ({
key,
node: nodesRef.current.get(key),
exiting: !live.has(key)
}));
}
function PresenceList({
exitDurationMs,
enterClassName,
exitClassName,
className,
children
}) {
const items = usePresenceList(children, exitDurationMs);
return /* @__PURE__ */ jsx(Fragment$1, { children: items.map((item) => /* @__PURE__ */ jsx(
View,
{
className: joinClasses(
className,
item.exiting ? exitClassName : enterClassName
),
children: item.node
},
item.key
)) });
}
function PresenceOne({
activeKey,
exitDurationMs,
enterClassName,
exitClassName,
className,
children
}) {
const exiting = usePresence(activeKey, exitDurationMs, children);
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
exiting.map((item) => {
const node = item.node;
return cloneElement(node, {
key: item.key,
className: joinClasses(
node.props.className,
className,
exitClassName
)
});
}),
cloneElement(children, {
key: activeKey,
className: joinClasses(
children.props.className,
className,
enterClassName
)
})
] });
}
const animationDurationsMs = {
"slide": 600,
"collapse": 800,
"progress": 600,
"fade": 300,
"fast": 200
};
const pressableBoxVariants = tv(
{
extend: interactiveBoxVariants,
base: "overflow-hidden",
variants: {
variant: {
contained: [
"rounded-sm",
process.env.EXPO_PUBLIC_STORYBOOK_ENABLED ? "" : "shadow-s bg-interactive-contained-pressable",
"hover:bg-interactive-contained-hover",
"focus:bg-interactive-contained-focus",
"active:bg-interactive-contained-active",
"disabled:bg-interactive-contained-disabled disabled:shadow-none",
"focus-visible:outline-border-muted"
].join(" "),
outlined: [
"border bg-highlight",
process.env.EXPO_PUBLIC_STORYBOOK_ENABLED ? "" : "border-interactive-outlined-pressable",
"hover:border-interactive-outlined-hover",
"focus:border-interactive-outlined-focus",
"active:border-interactive-outlined-active",
"disabled:border-interactive-outlined-disabled",
"focus-visible:outline-interactive-outlined-outline-focus"
].join(" "),
ghost: [
"border border-transparent",
"hover:border hover:border-interactive-outlined-hover",
"focus:border focus:border-interactive-outlined-focus",
"active:border active:border-interactive-outlined-active",
"disabled:border-interactive-outlined-disabled",
"focus-visible:outline-interactive-outlined-outline-focus"
].join(" ")
},
forceStyle: {
hover: "",
focus: "",
press: "scale-[0.975]"
}
},
compoundVariants: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED ? [
/* contained */
{
variant: "contained",
forceStyle: void 0,
ghost: false,
className: "shadow-s bg-interactive-contained-pressable"
},
{
variant: "contained",
forceStyle: "hover",
className: "shadow-s bg-interactive-contained-hover"
},
{
variant: "contained",
forceStyle: "focus",
className: "shadow-s bg-interactive-contained-focus"
},
{
variant: "contained",
forceStyle: "press",
className: "shadow-s bg-interactive-contained-active"
},
/* outlined */
{
variant: "outlined",
forceStyle: void 0,
ghost: false,
className: "border-interactive-outlined-pressable"
},
{
variant: "outlined",
forceStyle: "hover",
className: "border-interactive-outlined-hover"
},
{
variant: "outlined",
forceStyle: "focus",
className: "border-interactive-outlined-focus"
},
{
variant: "outlined",
forceStyle: "press",
className: "border-interactive-outlined-active"
},
/* ghost */
{
variant: "ghost",
forceStyle: void 0,
className: "border-transparent"
},
{
variant: "ghost",
forceStyle: "hover",
className: "border-interactive-outlined-hover"
},
{
variant: "ghost",
forceStyle: "focus",
className: "border-interactive-outlined-focus"
},
{
variant: "ghost",
forceStyle: "press",
className: "border-interactive-outlined-active"
}
] : void 0,
defaultVariants: {
variant: "contained"
}
},
{ twMerge: false }
);
const PressableBox = forwardRef(
({ className, variant, forceStyle, accent, ...props }, ref) => {
return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsx(
InteractiveBox,
{
ref,
withFocusVisibleOutline: true,
role: "b