orn-ui 0.1.0

package/src/organisms/Toast.tsx

@@ -0,0 +1,135 @@
+import React, { memo, useEffect, useRef } from 'react';
+import { Animated, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+export interface ToastProps {
+  title: string;
+  message?: string;
+  variant?: ToastVariant;
+  /** Se dispara al tocar el toast (además de cerrarlo). */
+  onPress?: () => void;
+  onDismiss?: () => void;
+  /** Oculta la X de cerrar. El toast igual se auto-descarta por tiempo. */
+  hideCloseButton?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const ICON_BY_VARIANT: Record<ToastVariant, IconName> = {
+  success: 'check',
+  error: 'alert',
+  warning: 'warning',
+  info: 'info',
+};
+
+const useStyles = createStyles((theme) => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.tokens.spacing.md,
+    backgroundColor: theme.colors.surface,
+    borderRadius: theme.tokens.radius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    paddingVertical: theme.tokens.spacing.md,
+    paddingHorizontal: theme.tokens.spacing.lg,
+    ...theme.tokens.shadow.lg,
+  },
+  accent: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: 4,
+    borderTopLeftRadius: theme.tokens.radius.lg,
+    borderBottomLeftRadius: theme.tokens.radius.lg,
+  },
+  text: { flex: 1, gap: 2 },
+  title: {
+    fontSize: theme.tokens.fontSize.md,
+    fontWeight: theme.tokens.fontWeight.semibold,
+    color: theme.colors.text,
+  },
+  message: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight, lineHeight: theme.tokens.lineHeight.sm },
+}));
+
+/**
+ * Toast
+ * Notificación efímera. Normalmente no se usa directo: `ToastProvider` +
+ * `useToast()` la montan y la descartan por vos. Se expone igual por si
+ * querés colocarla vos mismo dentro de una pantalla concreta.
+ */
+export const Toast = memo(
+  ({ title, message, variant = 'info', onPress, onDismiss, hideCloseButton, style, testID }: ToastProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+
+    const accentColor: Record<ToastVariant, string> = {
+      success: colors.success,
+      error: colors.error,
+      warning: colors.warning,
+      info: colors.secondary,
+    };
+
+    const body = (
+      <View style={[styles.container, style]} testID={testID} accessibilityRole="alert">
+        <View style={[styles.accent, { backgroundColor: accentColor[variant] }]} />
+        <Icon name={ICON_BY_VARIANT[variant]} size={22} color={accentColor[variant]} />
+        <View style={styles.text}>
+          <Text allowFontScaling={allowFontScaling} style={styles.title}>
+            {title}
+          </Text>
+          {!!message && (
+            <Text allowFontScaling={allowFontScaling} style={styles.message}>
+              {message}
+            </Text>
+          )}
+        </View>
+        {!hideCloseButton && !!onDismiss && (
+          <Pressable onPress={onDismiss} accessibilityRole="button" accessibilityLabel="Dismiss" hitSlop={8}>
+            <Icon name="close" size={18} color={colors.textLight} />
+          </Pressable>
+        )}
+      </View>
+    );
+
+    if (!onPress) return body;
+
+    return (
+      <Pressable onPress={onPress} accessibilityRole="button" accessibilityLabel={title}>
+        {body}
+      </Pressable>
+    );
+  }
+);
+Toast.displayName = 'Toast';
+
+/** Envuelve un Toast con su animación de entrada/salida. Uso interno del provider. */
+export const AnimatedToast = memo(
+  ({ children, onHeight }: { children: React.ReactNode; onHeight?: (h: number) => void }) => {
+    const progress = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.spring(progress, { toValue: 1, useNativeDriver: true, speed: 14, bounciness: 4 }).start();
+    }, [progress]);
+
+    return (
+      <Animated.View
+        onLayout={(e) => onHeight?.(e.nativeEvent.layout.height)}
+        style={{
+          opacity: progress,
+          transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-16, 0] }) }],
+        }}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+);
+AnimatedToast.displayName = 'AnimatedToast';

package/src/organisms/ToastProvider.tsx

@@ -0,0 +1,166 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { AnimatedToast, Toast, type ToastVariant } from './Toast';
+import { useInsets } from '../theme/UIProvider';
+import { createStyles } from '../theme/createStyles';
+
+export interface ToastOptions {
+  title: string;
+  message?: string;
+  variant?: ToastVariant;
+  /** ms antes de auto-descartar. 0 = no se descarta solo. @default 4000 */
+  duration?: number;
+  onPress?: () => void;
+  hideCloseButton?: boolean;
+}
+
+interface ToastEntry extends ToastOptions {
+  id: string;
+}
+
+interface ToastContextValue {
+  /** Muestra un toast y devuelve su id (por si querés cerrarlo antes de tiempo). */
+  show: (options: ToastOptions) => string;
+  hide: (id: string) => void;
+  hideAll: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+const useStyles = createStyles((theme) => ({
+  host: { position: 'absolute', left: 0, right: 0, paddingHorizontal: theme.tokens.spacing.lg, gap: theme.tokens.spacing.sm },
+}));
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+  /** @default 'top' */
+  position?: 'top' | 'bottom';
+  /** Máximo de toasts simultáneos; los más viejos se descartan. @default 3 */
+  maxVisible?: number;
+  /** Duración por defecto en ms. @default 4000 */
+  defaultDuration?: number;
+}
+
+/**
+ * ToastProvider
+ * Monta la capa de toasts sobre el resto de la app. Colocar una vez cerca de
+ * la raíz, dentro de UIProvider. Los timers de auto-dismiss se limpian al
+ * desmontar y al cerrar cada toast, así que no quedan callbacks colgados.
+ */
+export function ToastProvider({
+  children,
+  position = 'top',
+  maxVisible = 3,
+  defaultDuration = 4000,
+}: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastEntry[]>([]);
+  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());
+  const counter = useRef(0);
+  const insets = useInsets();
+  const styles = useStyles();
+
+  const clearTimer = useCallback((id: string) => {
+    const t = timers.current.get(id);
+    if (t) {
+      clearTimeout(t);
+      timers.current.delete(id);
+    }
+  }, []);
+
+  const hide = useCallback(
+    (id: string) => {
+      clearTimer(id);
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    },
+    [clearTimer]
+  );
+
+  const hideAll = useCallback(() => {
+    timers.current.forEach((t) => clearTimeout(t));
+    timers.current.clear();
+    setToasts([]);
+  }, []);
+
+  const show = useCallback(
+    (options: ToastOptions) => {
+      counter.current += 1;
+      const id = `toast-${counter.current}`;
+      const duration = options.duration ?? defaultDuration;
+
+      setToasts((prev) => {
+        const next = [...prev, { ...options, id }];
+        // Se descartan los más viejos, no los recién llegados: un toast nuevo
+        // siempre se ve.
+        const overflow = next.length - maxVisible;
+        if (overflow > 0) {
+          next.slice(0, overflow).forEach((t) => clearTimer(t.id));
+          return next.slice(overflow);
+        }
+        return next;
+      });
+
+      if (duration > 0) {
+        timers.current.set(
+          id,
+          setTimeout(() => hide(id), duration)
+        );
+      }
+      return id;
+    },
+    [defaultDuration, maxVisible, hide, clearTimer]
+  );
+
+  // Al desmontar el provider no debe quedar ningún setTimeout apuntando a un
+  // setState de un árbol ya desmontado.
+  useEffect(() => {
+    const pending = timers.current;
+    return () => {
+      pending.forEach((t) => clearTimeout(t));
+      pending.clear();
+    };
+  }, []);
+
+  const value = useMemo<ToastContextValue>(() => ({ show, hide, hideAll }), [show, hide, hideAll]);
+
+  const hostPosition =
+    position === 'top'
+      ? { top: insets.top + 8 }
+      : { bottom: insets.bottom + 8, flexDirection: 'column-reverse' as const };
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {toasts.length > 0 && (
+        <View style={[styles.host, hostPosition]} pointerEvents="box-none" testID="toast-host">
+          {toasts.map((t) => (
+            <AnimatedToast key={t.id}>
+              <Toast
+                title={t.title}
+                message={t.message}
+                variant={t.variant}
+                hideCloseButton={t.hideCloseButton}
+                onDismiss={() => hide(t.id)}
+                onPress={
+                  t.onPress
+                    ? () => {
+                        t.onPress?.();
+                        hide(t.id);
+                      }
+                    : undefined
+                }
+              />
+            </AnimatedToast>
+          ))}
+        </View>
+      )}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error('orn-ui: useToast must be used within a <ToastProvider>.');
+  }
+  return ctx;
+}

package/src/organisms/Wizard.tsx

@@ -0,0 +1,137 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { Steps, type StepItem } from '../molecules/Steps';
+import { Button } from '../atoms/Button';
+
+export interface WizardStep extends StepItem {
+  content: React.ReactNode;
+  /** false bloquea el avance desde este paso (validación). @default true */
+  canGoNext?: boolean;
+}
+
+export interface WizardProps {
+  steps: WizardStep[];
+  /** Paso actual (controlado). Si se omite, el Wizard maneja su propio estado. */
+  current?: number;
+  onStepChange?: (index: number) => void;
+  onFinish?: () => void;
+  /** @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  completedIndicator?: 'check' | 'number';
+  /** Permite volver a un paso ya completado tocándolo en el indicador. @default true */
+  allowStepNavigation?: boolean;
+  backLabel?: string;
+  nextLabel?: string;
+  finishLabel?: string;
+  /**
+   * El contenido del paso scrollea cuando no entra. Ponelo en false sólo si
+   * un paso renderiza su propia lista virtualizada (anidar una
+   * VirtualizedList dentro de un ScrollView rompe la virtualización).
+   * @default true
+   */
+  scrollableContent?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: { flex: 1, gap: theme.tokens.spacing.xl },
+  content: { flex: 1 },
+  contentInner: { flexGrow: 1, paddingBottom: theme.tokens.spacing.sm },
+  footer: { flexDirection: 'row', gap: theme.tokens.spacing.md },
+  footerButton: { flex: 1 },
+}));
+
+/**
+ * Wizard
+ * Flujo multi-paso: indicador (Steps) + contenido del paso actual + barra de
+ * navegación. Funciona controlado (`current` + `onStepChange`) o por su
+ * cuenta. `canGoNext: false` en un paso deshabilita el avance, que es donde
+ * se engancha la validación del formulario de ese paso.
+ */
+export function Wizard({
+  steps,
+  current: controlledCurrent,
+  onStepChange,
+  onFinish,
+  orientation = 'horizontal',
+  completedIndicator = 'check',
+  allowStepNavigation = true,
+  backLabel = 'Back',
+  nextLabel = 'Next',
+  finishLabel = 'Finish',
+  scrollableContent = true,
+  style,
+}: WizardProps) {
+  const styles = useStyles();
+  const [uncontrolled, setUncontrolled] = useState(0);
+  const isControlled = controlledCurrent !== undefined;
+  const current = isControlled ? controlledCurrent : uncontrolled;
+
+  const goTo = useCallback(
+    (index: number) => {
+      const clamped = Math.max(0, Math.min(index, steps.length - 1));
+      if (!isControlled) setUncontrolled(clamped);
+      onStepChange?.(clamped);
+    },
+    [isControlled, onStepChange, steps.length]
+  );
+
+  const stepItems = useMemo(
+    () => steps.map(({ label, description }) => ({ label, description })),
+    [steps]
+  );
+
+  const activeStep = steps[current];
+  const isFirst = current === 0;
+  const isLast = current === steps.length - 1;
+  const canGoNext = activeStep?.canGoNext !== false;
+
+  const handleNext = () => {
+    if (isLast) onFinish?.();
+    else goTo(current + 1);
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <Steps
+        steps={stepItems}
+        current={current}
+        orientation={orientation}
+        completedIndicator={completedIndicator}
+        // Sólo se puede volver atrás tocando el indicador; saltar hacia
+        // adelante se saltearía la validación de los pasos intermedios.
+        onStepPress={allowStepNavigation ? (index) => index < current && goTo(index) : undefined}
+      />
+
+      {/* El contenido scrollea en vez de desbordar: con el teclado abierto un
+          form largo se comía el footer y los botones quedaban pintados encima
+          de los campos. */}
+      {scrollableContent ? (
+        <ScrollView
+          style={styles.content}
+          contentContainerStyle={styles.contentInner}
+          keyboardShouldPersistTaps="handled"
+          automaticallyAdjustKeyboardInsets
+          showsVerticalScrollIndicator={false}
+        >
+          {activeStep?.content}
+        </ScrollView>
+      ) : (
+        <View style={styles.content}>{activeStep?.content}</View>
+      )}
+
+      <View style={styles.footer}>
+        {!isFirst && (
+          <Button title={backLabel} variant="outline" onPress={() => goTo(current - 1)} style={styles.footerButton} />
+        )}
+        <Button
+          title={isLast ? finishLabel : nextLabel}
+          onPress={handleNext}
+          disabled={!canGoNext}
+          style={styles.footerButton}
+        />
+      </View>
+    </View>
+  );
+}

package/src/organisms/index.ts

@@ -0,0 +1,26 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalVariant } from './Modal';
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+export { Alert } from './Alert';
+export type { AlertProps, AlertButton, AlertType } from './Alert';
+export { AlertProvider, useAlert } from './AlertProvider';
+export type { AlertOptions, ConfirmOptions } from './AlertProvider';
+export { Screen } from './Screen';
+export type { ScreenProps, ScreenEdge } from './Screen';
+export { List } from './List';
+export type { ListProps } from './List';
+export { SearchList } from './SearchList';
+export type { SearchListProps } from './SearchList';
+export { Toast } from './Toast';
+export type { ToastProps, ToastVariant } from './Toast';
+export { ToastProvider, useToast } from './ToastProvider';
+export type { ToastProviderProps, ToastOptions } from './ToastProvider';
+export { DatePicker, buildMonthGrid, DEFAULT_MONTH_NAMES, DEFAULT_WEEKDAY_NAMES } from './DatePicker';
+export type { DatePickerProps, DateRange } from './DatePicker';
+export { DateField } from './DateField';
+export type { DateFieldProps } from './DateField';
+export { Wizard } from './Wizard';
+export type { WizardProps, WizardStep } from './Wizard';

package/src/theme/UIProvider.tsx

@@ -0,0 +1,129 @@
+import React, { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import { Appearance, useColorScheme } from 'react-native';
+import { defaultTheme } from './createTheme';
+import { defaultLabels, type Labels } from './labels';
+import { zeroInsets, type EdgeInsets } from './insets';
+import type { Theme, ThemePair } from './types';
+import { renderDefaultIcon } from '../icons/defaultIcons';
+import type { IconRenderer } from '../icons/types';
+
+export type ThemeMode = 'system' | 'light' | 'dark';
+
+interface UIContextValue {
+  theme: Theme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  icons: IconRenderer;
+  insets: EdgeInsets;
+  labels: Labels;
+  allowFontScaling: boolean;
+}
+
+const UIContext = createContext<UIContextValue | undefined>(undefined);
+
+export interface UIProviderProps {
+  children: React.ReactNode;
+  /** Par light/dark. Por defecto el theme de marca de la librería (créalo con createTheme()). */
+  theme?: ThemePair;
+  /** Modo inicial (no controlado) si no se pasa `mode`. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** Modo controlado. Si se pasa junto a onModeChange, el provider no gestiona estado propio. */
+  mode?: ThemeMode;
+  onModeChange?: (mode: ThemeMode) => void;
+  /** Renderer de íconos. Por defecto usa los glifos zero-dep incluidos. */
+  icons?: IconRenderer;
+  /** Insets de safe area (de useSafeAreaInsets()). Por defecto {0,0,0,0}. */
+  insets?: EdgeInsets;
+  labels?: Partial<Labels>;
+  /** @default false, para paridad con el resto de la librería (accesibilidad primero). */
+  allowFontScaling?: boolean;
+}
+
+/**
+ * UIProvider
+ * Único punto de entrada de la librería: resuelve el theme activo (sistema u
+ * override manual), e inyecta íconos, insets y textos por defecto a todo el
+ * árbol. No persiste el modo — si el consumidor quiere recordar la preferencia
+ * entre sesiones, controla `mode`/`onModeChange` y persiste donde prefiera.
+ */
+export function UIProvider({
+  children,
+  theme = defaultTheme,
+  defaultMode = 'system',
+  mode: controlledMode,
+  onModeChange,
+  icons = renderDefaultIcon,
+  insets = zeroInsets,
+  labels: labelOverrides,
+  allowFontScaling = false,
+}: UIProviderProps) {
+  const systemScheme = useColorScheme();
+  const [uncontrolledMode, setUncontrolledMode] = useState<ThemeMode>(defaultMode);
+  const isControlled = controlledMode !== undefined;
+  const mode = isControlled ? controlledMode : uncontrolledMode;
+
+  const setMode = useCallback(
+    (next: ThemeMode) => {
+      if (!isControlled) setUncontrolledMode(next);
+      onModeChange?.(next);
+    },
+    [isControlled, onModeChange]
+  );
+
+  const scheme: 'light' | 'dark' =
+    mode === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : mode;
+
+  const resolvedTheme = theme[scheme];
+
+  const labels = useMemo(
+    () => (labelOverrides ? { ...defaultLabels, ...labelOverrides } : defaultLabels),
+    [labelOverrides]
+  );
+
+  const value = useMemo<UIContextValue>(
+    () => ({ theme: resolvedTheme, mode, setMode, icons, insets, labels, allowFontScaling }),
+    [resolvedTheme, mode, setMode, icons, insets, labels, allowFontScaling]
+  );
+
+  return <UIContext.Provider value={value}>{children}</UIContext.Provider>;
+}
+
+function useUIContext(): UIContextValue {
+  const ctx = useContext(UIContext);
+  if (!ctx) {
+    throw new Error('orn-ui: this hook must be used within a <UIProvider>.');
+  }
+  return ctx;
+}
+
+export function useTheme(): Theme {
+  return useUIContext().theme;
+}
+
+export function useColors(): Theme['colors'] {
+  return useUIContext().theme.colors;
+}
+
+export function useThemeMode() {
+  const { mode, setMode } = useUIContext();
+  return { mode, setMode };
+}
+
+export function useIcons(): IconRenderer {
+  return useUIContext().icons;
+}
+
+export function useInsets(): EdgeInsets {
+  return useUIContext().insets;
+}
+
+export function useLabels(): Labels {
+  return useUIContext().labels;
+}
+
+export function useAllowFontScaling(): boolean {
+  return useUIContext().allowFontScaling;
+}
+
+/** Re-exportado para que tests/consumidores puedan simular cambios de sistema sin RN real. */
+export const __testUtils = { Appearance };

package/src/theme/createStyles.ts

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from './UIProvider';
+import type { Theme } from './types';
+
+/**
+ * createStyles(factory)
+ * Devuelve un hook useStyles() que memoiza el StyleSheet resultante por
+ * theme (WeakMap<Theme, Styles>), no por instancia de componente. Todas las
+ * filas de una lista comparten el mismo objeto de estilos: sin esto, N filas
+ * ⇒ N StyleSheet.create() por render, que es lo que hacía cada componente
+ * de la app original con `useMemo(() => createStyles(colors), [colors])`.
+ *
+ * La cache vive en el closure del factory (una WeakMap por llamada a
+ * createStyles, es decir, una por componente), así que temas de distintos
+ * <UIProvider> en el mismo árbol no colisionan entre sí.
+ *
+ * El tipo de `factory` sigue el patrón oficial de RN para StyleSheet
+ * tipados (`T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>`):
+ * es lo que le da contexto a TS para inferir literales ('row', 'center', ...)
+ * en vez de ensancharlos a `string` dentro del objeto devuelto.
+ */
+export function createStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(
+  factory: (theme: Theme) => T | StyleSheet.NamedStyles<T>
+): () => T {
+  const cache = new WeakMap<Theme, T>();
+
+  return function useStyles(): T {
+    const theme = useTheme();
+    let styles = cache.get(theme);
+    if (!styles) {
+      // El cast es seguro: StyleSheet.create<T>(...) con el mismo T del
+      // factory siempre devuelve T; TS no puede probarlo por sí solo dentro
+      // de un cuerpo genérico (T podría "instanciarse" con un subtipo no
+      // relacionado desde su punto de vista, aunque en runtime es el mismo).
+      styles = StyleSheet.create(factory(theme)) as T;
+      cache.set(theme, styles);
+    }
+    return styles;
+  };
+}

package/src/theme/createTheme.ts

@@ -0,0 +1,49 @@
+import { lightPalette, darkPalette } from './palettes';
+import { tokens as defaultTokens } from './tokens';
+import type { Theme, ThemeOverrides, ThemePair } from './types';
+
+function mergeDeep<T extends Record<string, any>>(base: T, patch?: Partial<T>): T {
+  if (!patch) return base;
+  const out: Record<string, any> = { ...base };
+  for (const key of Object.keys(patch)) {
+    const patchVal = (patch as Record<string, any>)[key];
+    const baseVal = (base as Record<string, any>)[key];
+    if (
+      patchVal &&
+      baseVal &&
+      typeof patchVal === 'object' &&
+      typeof baseVal === 'object' &&
+      !Array.isArray(patchVal)
+    ) {
+      out[key] = mergeDeep(baseVal, patchVal);
+    } else if (patchVal !== undefined) {
+      out[key] = patchVal;
+    }
+  }
+  return out as T;
+}
+
+/**
+ * Construye el par de themes light/dark que consume <UIProvider theme={...}>.
+ * Nunca muta los defaults: cada llamada produce objetos nuevos, seguros de
+ * compartir entre providers distintos (tests, multi-brand en el mismo árbol).
+ */
+export function createTheme(overrides?: ThemeOverrides): ThemePair {
+  const tokens = mergeDeep(defaultTokens, overrides?.tokens as any);
+
+  const light: Theme = {
+    colors: mergeDeep(lightPalette, overrides?.colors?.light),
+    tokens,
+    scheme: 'light',
+  };
+
+  const dark: Theme = {
+    colors: mergeDeep(darkPalette, overrides?.colors?.dark),
+    tokens,
+    scheme: 'dark',
+  };
+
+  return { light, dark };
+}
+
+export const defaultTheme: ThemePair = createTheme();