@korsolutions/ui 0.0.40 → 0.0.42

package/dist/typescript/src/safe-area/context.d.ts

@@ -0,0 +1,5 @@
+import type { SafeAreaContextValue } from "./types";
+declare const SafeAreaContext: import("react").Context<SafeAreaContextValue | null>;
+export declare const useSafeAreaInsets: () => import("./types").SafeAreaInsets;
+export { SafeAreaContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/typescript/src/safe-area/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,QAAA,MAAM,eAAe,sDAAmD,CAAC;AAEzE,eAAO,MAAM,iBAAiB,wCAM7B,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/typescript/src/safe-area/index.d.ts

@@ -0,0 +1,4 @@
+export { SafeAreaProvider } from "./provider";
+export { useSafeAreaInsets } from "./context";
+export type { SafeAreaInsets, SafeAreaContextValue } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/safe-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

package/dist/typescript/src/safe-area/provider.d.ts

@@ -0,0 +1,7 @@
+import { type PropsWithChildren } from "react";
+import type { SafeAreaInsets } from "./types";
+export interface SafeAreaProviderProps extends PropsWithChildren {
+    insets?: SafeAreaInsets;
+}
+export declare const SafeAreaProvider: ({ children, insets }: SafeAreaProviderProps) => import("react").JSX.Element;
+//# sourceMappingURL=provider.d.ts.map

package/dist/typescript/src/safe-area/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,GAAI,sBAAsB,qBAAqB,gCAmB3E,CAAC"}

package/dist/typescript/src/safe-area/types.d.ts

@@ -0,0 +1,10 @@
+export interface SafeAreaInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface SafeAreaContextValue {
+    insets: SafeAreaInsets;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/safe-area/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,cAAc,CAAC;CACxB"}

package/dist/typescript/src/themes/adapters/react-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/themes/adapters/react-navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAItD,wBAAgB,uBAAuB,IAAI,KAAK,CA+C/C"}
+{"version":3,"file":"react-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/themes/adapters/react-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAKtD,wBAAgB,uBAAuB,IAAI,KAAK,CAgD/C"}

package/dist/typescript/src/themes/provider.d.ts

@@ -1,5 +1,5 @@
 import { type PropsWithChildren } from "react";
-import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeName } from "./types";
+import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
 interface ThemeContext {
     colors: Colors;
     radius: Radius;
@@ -8,11 +8,12 @@ interface ThemeContext {
     letterSpacing: LetterSpacing;
     fontSize: FontSize;
     setColorScheme: (scheme: ColorScheme) => void;
-    setTheme: (themeName: ThemeName) => void;
-    themeName: ThemeName;
 }
 declare const ThemeContext: import("react").Context<ThemeContext | null>;
-export declare const ThemeProvider: (props: PropsWithChildren) => import("react").JSX.Element;
+export interface ThemeProviderProps extends PropsWithChildren {
+    theme?: Partial<ThemeAssets>;
+}
+export declare const ThemeProvider: (props: ThemeProviderProps) => import("react").JSX.Element;
 export declare const useTheme: () => ThemeContext;
 export {};
 //# sourceMappingURL=provider.d.ts.map

package/dist/typescript/src/themes/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE3G,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,eAAO,MAAM,aAAa,GAAI,OAAO,iBAAiB,gCAgCrD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG7G,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCA+BtD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC"}

package/dist/typescript/src/themes/types.d.ts

@@ -1,4 +1,3 @@
-export type ThemeName = "default";
 export type ColorScheme = "light" | "dark";
 type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;
 export interface Colors {

package/dist/typescript/src/themes/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC;AAClC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,KAAK,KAAK,GAAG,QAAQ,MAAM,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAElE,MAAM,WAAW,MAAM;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,KAAK,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC;IACjB,mBAAmB,EAAE,KAAK,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAC5B,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AACnC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,KAAK,KAAK,GAAG,QAAQ,MAAM,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAElE,MAAM,WAAW,MAAM;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,KAAK,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC;IACjB,mBAAmB,EAAE,KAAK,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAC5B,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AACnC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;CACpB"}

package/dist/typescript/src/themes/utils.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeAssets } from "./types";
+export declare function mergeThemeAssets(base: ThemeAssets, override: Partial<ThemeAssets>): ThemeAssets;
+//# sourceMappingURL=utils.d.ts.map

package/dist/typescript/src/themes/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/themes/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAW/F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/autocomplete/variants/default.tsx

@@ -10,24 +10,27 @@ export function useAutocompleteVariantDefault(): AutocompleteStyles {
         disabled: {},
       },
       input: {
+        placeholderTextColor: colors.mutedForeground,
+        selectionColor: colors.primary,
         default: {
           borderWidth: 1,
           borderColor: colors.border,
           borderRadius: radius,
+          backgroundColor: colors.surface,
           paddingVertical: 12,
           paddingHorizontal: 16,
-          height: 48,
+          outlineWidth: 0,
           fontFamily,
           fontSize,
+          height: 48,
           color: colors.foreground,
-          backgroundColor: colors.background,
         },
         focused: {
           borderColor: colors.primary,
         },
         disabled: {
-          backgroundColor: colors.muted,
           color: colors.mutedForeground,
+          backgroundColor: colors.muted,
         },
       },
       overlay: {

package/src/components/button/variants/secondary.tsx

@@ -30,7 +30,7 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
       },
       label: {
         default: {
-          color: colors.foreground,
+          color: colors.secondaryForeground,
           fontSize,
           fontWeight: "bold",
           fontFamily,
@@ -44,7 +44,7 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
       },
       spinner: {
         default: {
-          color: colors.primaryForeground,
+          color: colors.secondaryForeground,
         },
         disabled: {
           color: colors.mutedForeground,
@@ -53,6 +53,6 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
           color: colors.mutedForeground,
         },
       },
-    })
+    }),
   );
 };

package/src/components/toast/toast-manager.tsx

@@ -1,8 +1,9 @@
+import { Portal } from "@/primitives/portal";
+import { useSafeAreaInsets } from "@/safe-area";
 import React, { useSyncExternalStore } from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { ToastComponent } from "./toast";
 import { ToastVariants } from "./variants";
-import { Portal } from "@/primitives/portal";
 
 export const TOAST_PORTAL_NAME = "toast-portal";
 
@@ -76,12 +77,13 @@ export const ToastAPI = {
 
 export function ToastContainer() {
   const toasts = useSyncExternalStore(subscribe, getSnapshot);
+  const insets = useSafeAreaInsets();
 
   if (!toasts.length) return null;
 
   return (
     <Portal name={TOAST_PORTAL_NAME}>
-      <View style={s.wrapper}>
+      <View style={[s.wrapper, { top: insets.top + 24 }]}>
         {toasts.map((toast) => (
           <ToastComponent key={toast.id} title={toast.title} description={toast.description} variant={toast.variant} />
         ))}
@@ -95,7 +97,6 @@ const s = StyleSheet.create({
     width: "100%",
     alignItems: "center",
     position: "absolute",
-    top: 24,
     gap: 8,
   },
 });

package/src/index.tsx

@@ -1,4 +1,5 @@
-import { ThemeProvider } from "@/themes";
+import { SafeAreaProvider, type SafeAreaInsets } from "@/safe-area";
+import { ThemeProvider, type ThemeProviderProps } from "@/themes";
 import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
 import { ToastContainer } from "./components/toast/toast-manager";
 import { PortalHost } from "./primitives/portal";
@@ -6,21 +7,27 @@ import { type PortalHostProps } from "./primitives/portal/portal.constants";
 
 export interface ProviderProps {
   children: React.ReactNode;
-
   portalContainer?: PortalHostProps["container"];
+  theme?: ThemeProviderProps["theme"];
+  safeAreaInsets?: SafeAreaInsets;
 }
 
-export const UniversalUIProvider = ({ children, portalContainer }: ProviderProps) => {
+export const UniversalUIProvider = ({ children, portalContainer, theme, safeAreaInsets }: ProviderProps) => {
   return (
-    <ThemeProvider>
-      <ToastContainer />
-      {children}
-      <PortalHost container={portalContainer} />
-      <AsyncAlertDialogManager />
-    </ThemeProvider>
+    <SafeAreaProvider insets={safeAreaInsets}>
+      <ThemeProvider theme={theme}>
+        <ToastContainer />
+        {children}
+        <PortalHost container={portalContainer} />
+        <AsyncAlertDialogManager />
+      </ThemeProvider>
+    </SafeAreaProvider>
   );
 };
 
 export * from "./themes/adapters";
+export * from "./themes/default";
 export { useTheme } from "./themes/provider";
 export * from "./themes/types";
+
+export * from "./safe-area";

package/src/primitives/autocomplete/autocomplete-input.tsx

@@ -17,6 +17,8 @@ export const AutocompleteInput = forwardRef<TextInputRef, AutocompleteInputProps
   const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   const composedStyles = [autocomplete.styles?.input?.default, autocomplete.styles?.input?.[autocomplete.state], props.style];
+  const placeholderTextColor = autocomplete.styles?.input?.placeholderTextColor;
+  const selectionColor = autocomplete.styles?.input?.selectionColor;
 
   const handleFocus: TextInputProps["onFocus"] = (e) => {
     // Clear any pending blur timeout
@@ -74,6 +76,8 @@ export const AutocompleteInput = forwardRef<TextInputRef, AutocompleteInputProps
       id={field?.id}
       value={autocomplete.inputValue}
       placeholder={autocomplete.placeholder}
+      placeholderTextColor={placeholderTextColor}
+      selectionColor={selectionColor}
       onChangeText={handleChangeText}
       onFocus={handleFocus}
       onBlur={handleBlur}

package/src/primitives/autocomplete/types.ts

@@ -10,7 +10,7 @@ export type AutocompleteOptionState = AutocompleteState | "hovered" | "selected"
 
 export interface AutocompleteStyles {
   root?: Partial<Record<AutocompleteState, AutocompleteRootProps["style"]>>;
-  input?: Partial<Record<AutocompleteState, AutocompleteInputProps["style"]>>;
+  input?: Partial<Record<AutocompleteState, AutocompleteInputProps["style"]>> & Pick<AutocompleteInputProps, "placeholderTextColor" | "selectionColor">;
   overlay?: Partial<Record<AutocompleteState, AutocompleteOverlayProps["style"]>>;
   content?: Partial<Record<AutocompleteState, AutocompleteContentProps["style"]>>;
   option?: Partial<Record<AutocompleteOptionState, AutocompleteOptionProps["style"]>>;

package/src/primitives/avatar/avatar-fallback.tsx

@@ -1,16 +1,14 @@
 import React from "react";
-import { type StyleProp, type TextStyle, View } from "react-native";
+import { Text, type StyleProp, type TextStyle } from "react-native";
 import { useAvatar } from "./context";
 
 export interface AvatarFallbackProps {
   children: string;
-  render?: (props: AvatarFallbackProps) => React.ReactNode;
   style?: StyleProp<TextStyle>;
 }
 
 export function AvatarFallback(props: AvatarFallbackProps) {
   const avatar = useAvatar();
   const composedStyles = [avatar.styles?.fallback, props.style];
-  const Component = props.render ?? View;
-  return <Component {...props} style={composedStyles} />;
+  return <Text {...props} style={composedStyles} />;
 }

package/src/safe-area/context.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+import type { SafeAreaContextValue } from "./types";
+
+const SafeAreaContext = createContext<SafeAreaContextValue | null>(null);
+
+export const useSafeAreaInsets = () => {
+  const context = useContext(SafeAreaContext);
+  if (!context) {
+    throw new Error("useSafeAreaInsets must be used within SafeAreaProvider");
+  }
+  return context.insets;
+};
+
+export { SafeAreaContext };

package/src/safe-area/index.ts

@@ -0,0 +1,3 @@
+export { SafeAreaProvider } from "./provider";
+export { useSafeAreaInsets } from "./context";
+export type { SafeAreaInsets, SafeAreaContextValue } from "./types";

package/src/safe-area/provider.tsx

@@ -0,0 +1,28 @@
+import { type PropsWithChildren } from "react";
+import { SafeAreaContext } from "./context";
+import type { SafeAreaInsets } from "./types";
+
+export interface SafeAreaProviderProps extends PropsWithChildren {
+  insets?: SafeAreaInsets;
+}
+
+export const SafeAreaProvider = ({ children, insets }: SafeAreaProviderProps) => {
+  const defaultInsets: SafeAreaInsets = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  };
+
+  const calculatedInsets: SafeAreaInsets = { ...defaultInsets, ...insets };
+
+  return (
+    <SafeAreaContext.Provider
+      value={{
+        insets: calculatedInsets,
+      }}
+    >
+      {children}
+    </SafeAreaContext.Provider>
+  );
+};

package/src/safe-area/types.ts

@@ -0,0 +1,10 @@
+export interface SafeAreaInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+export interface SafeAreaContextValue {
+  insets: SafeAreaInsets;
+}

package/src/themes/adapters/react-navigation.ts

@@ -1,7 +1,7 @@
-import { useEffect } from "react";
 import type { Theme } from "@react-navigation/native";
-import { useTheme } from "../provider";
+import { useEffect } from "react";
 import { Platform } from "react-native";
+import { useTheme } from "../provider";
 
 export function useReactNavigationTheme(): Theme {
   const theme = useTheme();
@@ -13,13 +13,14 @@ export function useReactNavigationTheme(): Theme {
     styles.innerHTML = `
       :root {
         --expo-router-modal-border: 1px solid ${theme.colors.border};
+        --expo-router-modal-border-radius: ${theme.radius}px;
       }
     `;
     document.head.appendChild(styles);
     return () => {
       document.head.removeChild(styles);
     };
-  }, [theme.colors.border]);
+  }, [theme.colors.border, theme.radius]);
 
   return {
     dark: theme.colorScheme === "dark",

package/src/themes/default/colors.ts

@@ -1,45 +1,45 @@
 import type { Colors } from "../types";
 
 export const lightColors: Colors = {
-  background: "hsla(223.81, 100%, 100%, 1)",
-  foreground: "hsla(223.81, 0%, 3.94%, 1)",
+  background: "hsla(224, 0%, 100%, 1)",
+  foreground: "hsla(224, 0%, 4%, 1)",
 
-  primary: "hsla(223.81, 0%, 9.05%, 1)",
-  primaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+  primary: "hsla(224, 0%, 9%, 1)",
+  primaryForeground: "hsla(224, 0%, 98%, 1)",
 
-  secondary: "hsla(223.81, 0%, 96.06%, 1)",
-  secondaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+  secondary: "hsla(224, 0%, 96%, 1)",
+  secondaryForeground: "hsla(224, 0%, 9%, 1)",
 
-  muted: "hsla(223.81, 0%, 96.06%, 1)",
-  mutedForeground: "hsla(223.81, 0%, 45.15%, 1)",
+  muted: "hsla(224, 0%, 96%, 1)",
+  mutedForeground: "hsla(224, 0%, 45%, 1)",
 
-  border: "hsla(223.81, 0%, 89.82%, 1)",
-  surface: "hsla(223.81, 100%, 100%, 1)",
+  border: "hsla(224, 0%, 90%, 1)",
+  surface: "hsla(224, 0%, 100%, 1)",
 
-  danger: "hsla(0, 84.2%, 60.2%, 1)",
-  success: "hsla(173, 58%, 39%, 1)",
-  warning: "hsla(43, 74%, 66%, 1)",
-  info: "hsla(197, 37%, 24%, 1)",
+  danger: "hsla(352, 100%, 41%, 1)",
+  success: "hsla(227, 70%, 40%, 1)",
+  warning: "hsla(212, 100%, 79%, 1)",
+  info: "hsla(221, 86%, 54%, 1)",
 };
 
 export const darkColors: Colors = {
-  background: "hsla(223.81, 0%, 3.94%, 1)",
-  foreground: "hsla(223.81, 0%, 98.03%, 1)",
+  background: "hsla(224, 0%, 4%, 1)",
+  foreground: "hsla(224, 0%, 98%, 1)",
 
-  primary: "hsla(223.81, 0%, 89.82%, 1)",
-  primaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+  primary: "hsla(224, 0%, 90%, 1)",
+  primaryForeground: "hsla(224, 0%, 9%, 1)",
 
-  secondary: "hsla(223.81, 0%, 14.94%, 1)",
-  secondaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+  secondary: "hsla(224, 0%, 15%, 1)",
+  secondaryForeground: "hsla(224, 0%, 98%, 1)",
 
-  muted: "hsla(223.81, 0%, 14.94%, 1)",
-  mutedForeground: "hsla(223.81, 0%, 63.02%, 1)",
+  muted: "hsla(224, 0%, 15%, 1)",
+  mutedForeground: "hsla(224, 0%, 63%, 1)",
 
-  border: "hsla(223.81, 0%, 15.51%, 1)",
-  surface: "hsla(223.81, 0%, 9.05%, 1)",
+  border: "hsla(224, 0%, 16%, 1)",
+  surface: "hsla(224, 0%, 9%, 1)",
 
-  danger: "hsla(0, 62.8%, 30.6%, 1)",
-  success: "hsla(160, 60%, 45%, 1)",
-  warning: "hsla(30, 80%, 55%, 1)",
-  info: "hsla(220, 70%, 50%, 1)",
+  danger: "hsla(359, 100%, 70%, 1)",
+  success: "hsla(227, 70%, 40%, 1)",
+  warning: "hsla(212, 100%, 79%, 1)",
+  info: "hsla(221, 86%, 54%, 1)",
 };

package/src/themes/provider.tsx

@@ -1,7 +1,8 @@
 import { createContext, type PropsWithChildren, useContext, useEffect, useState } from "react";
 import { useColorScheme } from "react-native";
-import { themes } from "./themes";
-import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeName } from "./types";
+import { defaultThemeAssets } from "./default";
+import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
+import { mergeThemeAssets } from "./utils";
 
 interface ThemeContext {
   colors: Colors;
@@ -11,20 +12,23 @@ interface ThemeContext {
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
   setColorScheme: (scheme: ColorScheme) => void;
-  setTheme: (themeName: ThemeName) => void;
-  themeName: ThemeName;
 }
 
 const ThemeContext = createContext<ThemeContext | null>(null);
 
-export const ThemeProvider = (props: PropsWithChildren) => {
-  const [themeName, setTheme] = useState<ThemeName>("default");
+export interface ThemeProviderProps extends PropsWithChildren {
+  theme?: Partial<ThemeAssets>;
+}
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  const { children, theme } = props;
 
   const systemColorScheme = useColorScheme();
   const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme === "dark" ? "dark" : "light");
 
-  const themesAssets = themes[themeName];
-  const colors = themesAssets.colors[colorScheme];
+  const themeAssets = theme ? mergeThemeAssets(defaultThemeAssets, theme) : defaultThemeAssets;
+
+  const colors = themeAssets.colors[colorScheme];
 
   useEffect(() => {
     if (systemColorScheme) {
@@ -35,18 +39,16 @@ export const ThemeProvider = (props: PropsWithChildren) => {
   return (
     <ThemeContext.Provider
       value={{
-        themeName,
-        setTheme,
         colorScheme,
         setColorScheme,
         colors,
-        radius: themesAssets.radius,
-        fontFamily: themesAssets.fontFamily,
-        letterSpacing: themesAssets.letterSpacing,
-        fontSize: themesAssets.fontSize,
+        radius: themeAssets.radius,
+        fontFamily: themeAssets.fontFamily,
+        letterSpacing: themeAssets.letterSpacing,
+        fontSize: themeAssets.fontSize,
       }}
     >
-      {props.children}
+      {children}
     </ThemeContext.Provider>
   );
 };

package/src/themes/types.ts

@@ -1,4 +1,3 @@
-export type ThemeName = "default";
 export type ColorScheme = "light" | "dark";
 
 type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;

package/src/themes/utils.ts

@@ -0,0 +1,14 @@
+import type { ThemeAssets } from "./types";
+
+export function mergeThemeAssets(base: ThemeAssets, override: Partial<ThemeAssets>): ThemeAssets {
+  return {
+    colors: {
+      light: { ...base.colors.light, ...override.colors?.light },
+      dark: { ...base.colors.dark, ...override.colors?.dark },
+    },
+    radius: override.radius ?? base.radius,
+    fontFamily: override.fontFamily ?? base.fontFamily,
+    letterSpacing: override.letterSpacing ?? base.letterSpacing,
+    fontSize: override.fontSize ?? base.fontSize,
+  };
+}

package/dist/module/themes/themes.js

@@ -1,7 +0,0 @@
-"use strict";
-
-import { defaultThemeAssets } from "./default/index.js";
-export const themes = {
-  default: defaultThemeAssets
-};
-//# sourceMappingURL=themes.js.map

package/dist/module/themes/themes.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["defaultThemeAssets","themes","default"],"sourceRoot":"../../../src","sources":["themes/themes.ts"],"mappings":";;AAAA,SAASA,kBAAkB;AAG3B,OAAO,MAAMC,MAAsC,GAAG;EACpDC,OAAO,EAAEF;AACX,CAAC","ignoreList":[]}

package/dist/typescript/src/themes/themes.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeAssets, ThemeName } from "./types";
-export declare const themes: Record<ThemeName, ThemeAssets>;
-//# sourceMappingURL=themes.d.ts.map

package/dist/typescript/src/themes/themes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../src/themes/themes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAEjD,CAAC"}

package/src/themes/themes.ts

@@ -1,6 +0,0 @@
-import { defaultThemeAssets } from "./default";
-import type { ThemeAssets, ThemeName } from "./types";
-
-export const themes: Record<ThemeName, ThemeAssets> = {
-  default: defaultThemeAssets,
-};