create-expo-stack 2.6.5 → 2.7.0-next.327ab2a

package/README.md

@@ -164,21 +164,28 @@ Thanks go to these wonderful people:
             <sub><b>Simon Grimm</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/mrzachnugent">
+            <img src="https://avatars.githubusercontent.com/u/63797719?v=4" width="100;" alt="mrzachnugent"/>
+            <br />
+            <sub><b>Zach Nugent</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/dannyhw">
             <img src="https://avatars.githubusercontent.com/u/3481514?v=4" width="100;" alt="dannyhw"/>
             <br />
             <sub><b>Daniel Williams</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/todevmilen">
             <img src="https://avatars.githubusercontent.com/u/78319110?v=4" width="100;" alt="todevmilen"/>
             <br />
             <sub><b>Milen Todev</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/alitnk">
             <img src="https://avatars.githubusercontent.com/u/35243344?v=4" width="100;" alt="alitnk"/>
@@ -213,15 +220,15 @@ Thanks go to these wonderful people:
             <br />
             <sub><b>Andrew Levy</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/gialencar">
             <img src="https://avatars.githubusercontent.com/u/11895696?v=4" width="100;" alt="gialencar"/>
             <br />
             <sub><b>Gilson Alencar</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/mwarger">
             <img src="https://avatars.githubusercontent.com/u/686823?v=4" width="100;" alt="mwarger"/>
@@ -256,15 +263,15 @@ Thanks go to these wonderful people:
             <br />
             <sub><b>Joar Karlsson</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/Joehoel">
             <img src="https://avatars.githubusercontent.com/u/31251240?v=4" width="100;" alt="Joehoel"/>
             <br />
             <sub><b>Joël Kuijper</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/asapMaki">
             <img src="https://avatars.githubusercontent.com/u/30200380?v=4" width="100;" alt="asapMaki"/>
@@ -279,6 +286,13 @@ Thanks go to these wonderful people:
             <sub><b>Sean Boult</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/YounessHassoune">
+            <img src="https://avatars.githubusercontent.com/u/36106440?v=4" width="100;" alt="YounessHassoune"/>
+            <br />
+            <sub><b>YOUNESS HASSOUNE</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/bautistaaa">
             <img src="https://avatars.githubusercontent.com/u/3660667?v=4" width="100;" alt="bautistaaa"/>

package/build/templates/base/App.tsx.ejs

@@ -8,6 +8,9 @@ import { StatusBar } from 'expo-status-bar';
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } else if (props.stylingPackage?.name === "restyle") { %>
   import { ThemeProvider } from '@shopify/restyle';
   import { theme } from 'theme';

package/build/templates/base/babel.config.js.ejs

@@ -17,7 +17,7 @@ module.exports = function(api) {
   <% } %>
 
   return {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
       presets: [
         ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
         'nativewind/babel',

package/build/templates/base/package.json.ejs

@@ -16,9 +16,19 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
       "nativewind": "^4.0.1",
     <% } %>
+    <% if (props.stylingPackage?.name === "nativewindui") { %>
+      "@roninoss/icons": "^0.0.3",
+      "@shopify/flash-list": "1.6.3",
+      "class-variance-authority": "^0.7.0",
+      "clsx": "^2.1.0",
+      "expo-dev-client": "~3.3.8",
+      "tailwind-merge": "^2.2.1",
+      "react-native-uitextview": "^1.1.4",
+      "react-native-pager-view": "6.2.3",
+    <% } %>
     
     <% if (props.stylingPackage?.name === "restyle") { %>
       "@shopify/restyle": "^2.4.2",
@@ -112,7 +122,7 @@
     "eslint": "^8.50.0",
     "eslint-config-universe": "^12.0.0",
     "prettier": "^3.2.5",
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
       "tailwindcss": "^3.4.0",
       "prettier-plugin-tailwindcss": "^0.5.11",
     <% } %>
@@ -124,7 +134,7 @@
   "eslintConfig": {
     "extends": "universe/native"
   },
-  <% if (props.navigationPackage?.name === 'expo-router') { %>
+  <% if (props.navigationPackage?.name === "expo-router") { %>
     "resolutions": {
       "expo-modules-core": "~1.11.0"
     },

package/build/templates/base/prettier.config.js.ejs

@@ -4,7 +4,7 @@ module.exports = {
   singleQuote: true,
   bracketSameLine: true,
   trailingComma: 'es5',
-  <% if (props.stylingPackage?.name === "nativewind") { %>
+  <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
   plugins: [require.resolve("prettier-plugin-tailwindcss")],
   tailwindAttributes: ["className"],
   <% } %>

package/build/templates/base/tsconfig.json.ejs

@@ -6,12 +6,16 @@
       ,
     "baseUrl": ".",
     "paths": {
-      <% if  (props.navigationPackage?.name === "expo-router" && props.flags.importAlias === true) { %>
-      "~/*": ["*"]
-      <% } else if  (props.flags.importAlias === true) { %>
-      "~/*": ["src/*"]
-      <% } else { %>
-      "<%= props.flags.importAlias %>": ["src/*"]
+      <% if (props.stylingPackage?.name === 'nativewindui') { %>
+        "~/*": [ "./*" ]
+      <% } else { %>  
+        <% if  (props.navigationPackage?.name === "expo-router" && props.flags.importAlias === true) { %>
+        "~/*": ["*"]
+        <% } else if  (props.flags.importAlias === true) { %>
+        "~/*": ["src/*"]
+        <% } else { %>
+        "<%= props.flags.importAlias %>": ["src/*"]
+        <% } %>
       <% } %>
     }
     <% } %>

package/build/templates/packages/expo-router/drawer/app/_layout.tsx.ejs

@@ -1,5 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-import '../global.css';
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';

package/build/templates/packages/expo-router/stack/app/_layout.tsx.ejs

@@ -1,5 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-import '../global.css';
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';

package/build/templates/packages/expo-router/tabs/app/_layout.tsx.ejs

@@ -1,5 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-import '../global.css';
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';

package/build/templates/packages/nativewindui/app/+not-found.tsx.ejs

@@ -0,0 +1,18 @@
+import { Link, Stack } from 'expo-router';
+import { View } from 'react-native';
+import { Text } from '~/components/nativewind-ui/Text';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View className='flex-1 items-center justify-center p-5 bg-background'>
+        <Text variant='largeTitle'>This screen doesn't exist.</Text>
+
+        <Link href='/' className='m-4 py-4'>
+          <Text>Go to home screen!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}

package/build/templates/packages/nativewindui/app/_layout.tsx.ejs

@@ -0,0 +1,85 @@
+import '~/global.css';
+import 'expo-dev-client';
+import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import { Icon } from '@roninoss/icons';
+import { Link, Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { Pressable, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { ThemeToggle } from '~/components/ThemeToggle';
+import { cn } from '~/lib/cn';
+import { useColorScheme } from '~/lib/useColorScheme';
+import { NAV_THEME } from '~/theme';
+
+export {
+  // Catch any errors thrown by the Layout component.
+  ErrorBoundary,
+} from 'expo-router';
+
+export default function RootLayout() {
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+
+  return (
+    <>
+      <StatusBar
+        key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
+        style={isDarkColorScheme ? 'light' : 'dark'}
+      />
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <NavThemeProvider value={NAV_THEME[colorScheme]}>
+          <Stack screenOptions={SCREEN_OPTIONS}>
+            <Stack.Screen name="index" options={INDEX_OPTIONS} />
+            <Stack.Screen name="top-tabs" options={TOP_TABS_OPTIONS} />
+            <Stack.Screen name="drawer" options={DEFAULT_OPTIONS} />
+            <Stack.Screen name="bottom-tabs" options={DEFAULT_OPTIONS} />
+            <Stack.Screen name="modal" options={MODAL_OPTIONS} />
+          </Stack>
+        </NavThemeProvider>
+      </GestureHandlerRootView>
+    </>
+  );
+}
+
+const SCREEN_OPTIONS = {
+  animation: 'ios', // for android
+} as const;
+
+const INDEX_OPTIONS = {
+  headerLargeTitle: true,
+  title: 'NativeWindUI',
+  headerRight: () => <SettingsIcon />,
+} as const;
+
+function SettingsIcon() {
+  const { colors } = useColorScheme();
+  return (
+    <Link href="/modal" asChild>
+      <Pressable className="opacity-80">
+        {({ pressed }) => (
+          <View className={cn(pressed ? 'opacity-50' : 'opacity-90')}>
+            <Icon name="cog-outline" color={colors.foreground} />
+          </View>
+        )}
+      </Pressable>
+    </Link>
+  );
+}
+
+const TOP_TABS_OPTIONS = {
+  title: 'Top Tabs',
+  headerShadowVisible: false,
+  headerBackTitle: 'Back',
+  headerRight: () => <ThemeToggle />,
+} as const;
+
+const MODAL_OPTIONS = {
+  presentation: 'modal',
+  animation: 'fade_from_bottom', // for android
+  title: 'Settings',
+  headerRight: () => <ThemeToggle />,
+} as const;
+
+const DEFAULT_OPTIONS = {
+  headerShown: false,
+};

package/build/templates/packages/nativewindui/app/index.tsx.ejs

@@ -0,0 +1,99 @@
+import { useHeaderHeight } from '@react-navigation/elements';
+import { FlashList } from '@shopify/flash-list';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { Button as RNButton, ButtonProps, Linking, View, Platform } from 'react-native';
+
+import { Text } from '~/components/nativewind-ui/Text';
+import { useColorScheme } from '~/lib/useColorScheme';
+import { useHeaderSearchBar } from '~/lib/useHeaderSearchBar';
+
+cssInterop(FlashList, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+});
+
+function DefaultButton({ color, ...props }: ButtonProps) {
+  const { colors } = useColorScheme();
+  return <RNButton color={color ?? colors.primary} {...props} />;
+}
+
+export default function Screen() {
+  const searchValue = useHeaderSearchBar();
+
+  const data = searchValue
+    ? COMPONENTS.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()))
+    : COMPONENTS;
+
+  return (
+    <FlashList
+      contentInsetAdjustmentBehavior="automatic"
+      keyboardShouldPersistTaps="handled"
+      data={data}
+      estimatedItemSize={200}
+      contentContainerClassName="py-4"
+      centerContent={data.length === 0}
+      extraData={searchValue}
+      removeClippedSubviews={false} // used for selecting text on android
+      keyExtractor={keyExtractor}
+      ItemSeparatorComponent={renderItemSeparator}
+      renderItem={renderItem}
+      ListEmptyComponent={ListEmptyComponent}
+    />
+  );
+}
+
+const SEARCH_BAR_HEIGHT = 52;
+
+function ListEmptyComponent() {
+  const headerHeight = useHeaderHeight();
+  return (
+    <>
+      {Platform.OS === 'ios' && <View style={{ height: headerHeight + SEARCH_BAR_HEIGHT }} />}
+      <View className="flex-1 items-center justify-center px-8">
+        <Text variant="title3" className="pb-1 text-center font-bold">
+          No Components Installed
+        </Text>
+        <Text color="tertiary" variant="body" className="pb-4 text-center">
+          You can install any of the free components from the NativeWindUI website.
+        </Text>
+        <DefaultButton
+          title="Open NativeWindUI"
+          onPress={() => Linking.openURL('https://nativewindui.com')}
+        />
+      </View>
+    </>
+  );
+}
+
+type ComponentItem = { name: string; component: () => React.JSX.Element };
+
+function keyExtractor(item: ComponentItem) {
+  return item.name;
+}
+
+function renderItemSeparator() {
+  return <View className="p-2" />;
+}
+
+function renderItem({ item }: { item: ComponentItem }) {
+  return (
+    <Card title={item.name}>
+      <item.component />
+    </Card>
+  );
+}
+
+function Card({ children, title }: { children: React.ReactNode; title: string }) {
+  return (
+    <View className="px-4">
+      <View className="gap-4 rounded-xl border border-border bg-card p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
+        <Text className="text-center text-sm font-medium tracking-wider opacity-60">{title}</Text>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+const COMPONENTS: ComponentItem[] = [];
+

package/build/templates/packages/nativewindui/app/modal.tsx.ejs

@@ -0,0 +1,32 @@
+import { Text } from '~/components/nativewind-ui/Text';
+import { Link } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { useColorScheme } from 'nativewind';
+import { Platform, View } from 'react-native';
+
+export default function ModalScreen() {
+  const { colorScheme } = useColorScheme();
+  return (
+    <>
+      <StatusBar
+        style={
+          Platform.OS === 'ios'
+            ? 'light'
+            : colorScheme === 'dark'
+            ? 'light'
+            : 'dark'
+        }
+      />
+      <View className='flex-1 justify-center items-center gap-8 pb-12'>
+        <View className='items-center gap-2'>
+          <Text variant='largeTitle' className='font-bold'>
+            NativeWindUI
+          </Text>
+          <Link href={'https://nativewindui.com/'}>
+            <Text className='text-primary'>https://nativewindui.com/</Text>
+          </Link>
+        </View>
+      </View>
+    </>
+  );
+}

package/build/templates/packages/nativewindui/components/ThemeToggle.tsx.ejs

@@ -0,0 +1,39 @@
+import { Icon } from '@roninoss/icons';
+import { Appearance, Pressable, View } from 'react-native';
+import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
+
+import { cn } from '~/lib/cn';
+import { useColorScheme } from '~/lib/useColorScheme';
+import { COLORS } from '~/theme/colors';
+
+export function ThemeToggle() {
+  const { colorScheme, toggleColorScheme } = useColorScheme();
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <Animated.View
+        className="items-center justify-center"
+        key={`toggle-${colorScheme}`}
+        entering={ZoomInRotate}>
+        <Pressable
+          onPress={() => {
+            // ColorScheme is set with `Appearance` as well for the iOS header search placeholder text: https://github.com/software-mansion/react-native-screens/discussions/1758
+            Appearance.setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
+            toggleColorScheme();
+          }}
+          className="opacity-80">
+          {colorScheme === 'dark'
+            ? ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon namingScheme="sfSymbol" name="moon.stars" color={COLORS.white} />
+                </View>
+              )
+            : ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon namingScheme="sfSymbol" name="sun.min" color={COLORS.black} />
+                </View>
+              )}
+        </Pressable>
+      </Animated.View>
+    </LayoutAnimationConfig>
+  );
+}

package/build/templates/packages/nativewindui/components/nativewind-ui/Text.tsx.ejs

@@ -0,0 +1,55 @@
+import { VariantProps, cva } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { UITextView } from 'react-native-uitextview';
+
+import { cn } from '~/lib/cn';
+
+cssInterop(UITextView, { className: 'style' });
+
+const textVariants = cva('text-foreground', {
+  variants: {
+    variant: {
+      largeTitle: 'text-4xl',
+      title1: 'text-2xl',
+      title2: 'text-[22px] leading-7',
+      title3: 'text-xl',
+      heading: 'text-[17px] leading-6 font-semibold',
+      body: 'text-[17px] leading-6',
+      callout: 'text-base',
+      subhead: 'text-[15px] leading-6',
+      footnote: 'text-[13px] leading-5',
+      caption1: 'text-xs',
+      caption2: 'text-[11px] leading-4',
+    },
+    color: {
+      primary: '',
+      secondary: 'text-secondary-foreground/90',
+      tertiary: 'text-muted-foreground/90',
+      quarternary: 'text-muted-foreground/50',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+    color: 'primary',
+  },
+});
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+function Text({
+  className,
+  variant,
+  color,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof UITextView> & VariantProps<typeof textVariants>) {
+  const textClassName = React.useContext(TextClassContext);
+  return (
+    <UITextView
+      className={cn(textVariants({ variant, color }), textClassName, className)}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextClassContext, textVariants };

package/build/templates/packages/nativewindui/expo-env.d.ts.ejs

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/build/templates/packages/nativewindui/global.css.ejs

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 242 242 247;
+    --foreground: 0 0 0;
+    --card: 255 255 255;
+    --card-foreground: 8 28 30;
+    --popover: 230 230 235;
+    --popover-foreground: 0 0 0;
+    --primary: 0 123 254;
+    --primary-foreground: 255 255 255;
+    --secondary: 45 175 231;
+    --secondary-foreground: 255 255 255;
+    --muted: 175 176 180;
+    --muted-foreground: 142 142 147;
+    --accent: 255 40 84;
+    --accent-foreground: 255 255 255;
+    --destructive: 255 56 43;
+    --destructive-foreground: 255 255 255;
+    --border: 230 230 235;
+    --input: 210 210 215;
+    --ring: 230 230 235;
+
+    --android-background: 249 249 255;
+    --android-foreground: 0 0 0;
+    --android-card: 255 255 255;
+    --android-card-foreground: 24 28 35;
+    --android-popover: 215 217 228;
+    --android-popover-foreground: 0 0 0;
+    --android-primary: 0 112 233;
+    --android-primary-foreground: 255 255 255;
+    --android-secondary: 176 201 255;
+    --android-secondary-foreground: 20 55 108;
+    --android-muted: 193 198 215;
+    --android-muted-foreground: 113 119 134;
+    --android-accent: 169 73 204;
+    --android-accent-foreground: 255 255 255;
+    --android-destructive: 254 67 54;
+    --android-destructive-foreground: 255 255 255;
+    --android-border: 215 217 228;
+    --android-input: 210 210 215;
+    --android-ring: 215 217 228;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 0 0 0;
+      --foreground: 255 255 255;
+      --card: 21 21 24;
+      --card-foreground: 255 255 255;
+      --popover: 40 40 42;
+      --popover-foreground: 255 255 255;
+      --primary: 3 133 255;
+      --primary-foreground: 255 255 255;
+      --secondary: 100 211 254;
+      --secondary-foreground: 255 255 255;
+      --muted: 70 70 73;
+      --muted-foreground: 142 142 147;
+      --accent: 255 52 95;
+      --accent-foreground: 255 255 255;
+      --destructive: 254 67 54;
+      --destructive-foreground: 255 255 255;
+      --border: 40 40 42;
+      --input: 55 55 57;
+      --ring: 40 40 42;
+
+      --android-background: 0 0 0;
+      --android-foreground: 255 255 255;
+      --android-card: 16 19 27;
+      --android-card-foreground: 224 226 237;
+      --android-popover: 39 42 50;
+      --android-popover-foreground: 224 226 237;
+      --android-primary: 3 133 255;
+      --android-primary-foreground: 255 255 255;
+      --android-secondary: 28 60 114;
+      --android-secondary-foreground: 189 209 255;
+      --android-muted: 216 226 255;
+      --android-muted-foreground: 139 144 160;
+      --android-accent: 83 0 111;
+      --android-accent-foreground: 238 177 255;
+      --android-destructive: 147 0 10;
+      --android-destructive-foreground: 255 255 255;
+      --android-border: 39 42 50;
+      --android-input: 55 55 57;
+      --android-ring: 39 42 50;
+    }
+  }
+}

package/build/templates/packages/nativewindui/lib/cn.ts.ejs

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/build/templates/packages/nativewindui/lib/useColorScheme.tsx.ejs

@@ -0,0 +1,14 @@
+import { useColorScheme as useNativewindColorScheme } from 'nativewind';
+
+import { COLORS } from '~/theme/colors';
+
+export function useColorScheme() {
+  const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme();
+  return {
+    colorScheme: colorScheme ?? 'light',
+    isDarkColorScheme: colorScheme === 'dark',
+    setColorScheme,
+    toggleColorScheme,
+    colors: COLORS[colorScheme ?? 'light'],
+  };
+}