orn-ui 0.1.1 → 0.2.1

package/src/organisms/Select.tsx

@@ -1,12 +1,31 @@
-import React, { memo, useState } from 'react';
-import { ActivityIndicator, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Keyboard,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+  useWindowDimensions,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
 
 export interface SelectOption<T> {
   label: string;
   value: T;
+  /** Glifo del set de la librería, a la izquierda del label. */
+  iconName?: IconName;
+  /** Emoji a la izquierda del label. Gana sobre `iconName`. */
+  emoji?: string;
+  disabled?: boolean;
 }
 
 export interface SelectProps<T> {
@@ -18,12 +37,24 @@ export interface SelectProps<T> {
   placeholder?: string;
   error?: string;
   isLoading?: boolean;
+  disabled?: boolean;
+  /** Agrega un buscador dentro del desplegable. @default false */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Alto máximo del desplegable, si el espacio disponible lo permite. @default 280 */
+  maxHeight?: number;
+  onOpenChange?: (open: boolean) => void;
   containerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
+/** Aire entre el campo y el desplegable. */
+const GAP = 8;
+/** Por debajo de esto el desplegable no muestra ni dos filas. */
+const MIN_HEIGHT = 120;
+
 const useStyles = createStyles((theme) => ({
   container: { gap: theme.tokens.spacing.sm },
-  containerOpen: { zIndex: 20, elevation: 20 },
   label: { fontWeight: theme.tokens.fontWeight.bold, fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
   required: { color: theme.colors.errorText },
   field: {
@@ -37,23 +68,29 @@ const useStyles = createStyles((theme) => ({
     minHeight: 50,
     paddingHorizontal: theme.tokens.spacing.lg,
   },
-  fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text },
+  fieldOpen: { borderColor: theme.colors.primary },
+  fieldDisabled: { opacity: 0.5 },
+  fieldValue: { flexDirection: 'row', alignItems: 'center', gap: theme.tokens.spacing.sm, flexShrink: 1 },
+  fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text, flexShrink: 1 },
   fieldPlaceholder: { color: theme.colors.textLight },
-  optionsList: {
+  backdrop: { flex: 1 },
+  sheet: {
     position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    marginTop: theme.tokens.spacing.sm,
     borderWidth: 2,
     borderColor: theme.colors.border,
     borderRadius: theme.tokens.radius.lg,
     backgroundColor: theme.colors.surface,
     overflow: 'hidden',
-    zIndex: 20,
-    elevation: 20,
     ...theme.tokens.shadow.md,
   },
+  search: {
+    fontSize: theme.tokens.fontSize.md,
+    color: theme.colors.text,
+    paddingHorizontal: theme.tokens.spacing.lg,
+    paddingVertical: theme.tokens.spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
   optionRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -65,16 +102,33 @@ const useStyles = createStyles((theme) => ({
   },
   optionRowLast: { borderBottomWidth: 0 },
   optionRowSelected: { backgroundColor: theme.colors.primarySoft },
+  optionRowDisabled: { opacity: 0.4 },
+  optionLabel: { flexDirection: 'row', alignItems: 'center', gap: theme.tokens.spacing.sm, flexShrink: 1 },
   optionText: { fontSize: theme.tokens.fontSize.lg - 1, color: theme.colors.text },
   optionTextSelected: { fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.primaryText },
+  emoji: { fontSize: theme.tokens.fontSize.lg },
+  empty: {
+    padding: theme.tokens.spacing.lg,
+    textAlign: 'center',
+    color: theme.colors.textLight,
+    fontSize: theme.tokens.fontSize.md,
+  },
   errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
 }));
 
+interface Anchor {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 /**
  * Select
- * Dropdown que expande la lista de opciones flotando sobre el resto del
- * contenido (position: absolute), en vez de empujarlo hacia abajo o abrir
- * un picker nativo del sistema.
+ * Dropdown de una sola opción. La lista se mide contra la ventana y se dibuja
+ * dentro de un Modal, no en el árbol del campo: así ningún `overflow: hidden`
+ * la recorta, no depende del zIndex (poco confiable en Android) y el fondo del
+ * Modal resuelve cerrar tocando afuera y con el botón atrás.
  */
 export function Select<T extends string | number>({
   label,
@@ -85,17 +139,93 @@ export function Select<T extends string | number>({
   placeholder,
   error,
   isLoading = false,
+  disabled = false,
+  searchable = false,
+  searchPlaceholder,
+  maxHeight = 280,
+  onOpenChange,
   containerStyle,
+  testID,
 }: SelectProps<T>) {
   const colors = useColors();
   const styles = useStyles();
   const labels = useLabels();
   const allowFontScaling = useAllowFontScaling();
+  const { height: windowHeight } = useWindowDimensions();
+
+  const fieldRef = useRef<View>(null);
   const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<Anchor | null>(null);
+  const [query, setQuery] = useState('');
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const isDisabled = disabled || isLoading;
   const selectedOption = options.find((o) => o.value === selectedValue);
 
+  const close = useCallback(() => {
+    setOpen(false);
+    setAnchor(null);
+    setQuery('');
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+
+  // Abrir no espera a la medición: si `measureInWindow` no responde, la lista
+  // igual aparece (centrada) en vez de que el campo deje de funcionar.
+  const openList = () => {
+    fieldRef.current?.measureInWindow((x, y, width, height) => setAnchor({ x, y, width, height }));
+    setOpen(true);
+    onOpenChange?.(true);
+  };
+
+  // El buscador abre el teclado encima del desplegable: sin descontarlo, la
+  // lista se dibuja donde ya no se ve.
+  useEffect(() => {
+    if (!open) return;
+    setKeyboardHeight(Keyboard.metrics()?.height ?? 0);
+    const [show, hide] =
+      Platform.OS === 'ios' ? ['keyboardWillShow', 'keyboardWillHide'] : ['keyboardDidShow', 'keyboardDidHide'];
+    const subs = [
+      Keyboard.addListener(show as 'keyboardDidShow', (e) => setKeyboardHeight(e.endCoordinates.height)),
+      Keyboard.addListener(hide as 'keyboardDidHide', () => setKeyboardHeight(0)),
+    ];
+    return () => subs.forEach((sub) => sub.remove());
+  }, [open]);
+
+  const visibleOptions = useMemo(() => {
+    if (!searchable || query.trim() === '') return options;
+    const needle = query.trim().toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(needle));
+  }, [options, query, searchable]);
+
+  // Se abre hacia donde haya más aire: contra el borde inferior de la pantalla,
+  // hacia arriba es la única forma de que entre.
+  const placement = useMemo((): ViewStyle => {
+    if (!anchor) return { left: GAP * 2, right: GAP * 2, top: windowHeight * 0.25, maxHeight };
+    const usableHeight = windowHeight - keyboardHeight;
+    const below = usableHeight - (anchor.y + anchor.height) - GAP * 2;
+    const above = anchor.y - GAP * 2;
+    const downwards = below >= Math.min(maxHeight, above);
+    return {
+      left: anchor.x,
+      width: anchor.width,
+      maxHeight: Math.max(Math.min(maxHeight, downwards ? below : above), MIN_HEIGHT),
+      ...(downwards ? { top: anchor.y + anchor.height + GAP } : { bottom: windowHeight - anchor.y + GAP }),
+    };
+  }, [anchor, keyboardHeight, maxHeight, windowHeight]);
+
+  const renderLeading = (option: SelectOption<T> | undefined, color: string) => {
+    if (!option) return null;
+    if (option.emoji) {
+      return (
+        <Text allowFontScaling={allowFontScaling} style={styles.emoji}>
+          {option.emoji}
+        </Text>
+      );
+    }
+    return option.iconName ? <Icon name={option.iconName} size={20} color={color} /> : null;
+  };
+
   return (
-    <View style={[styles.container, open && styles.containerOpen, containerStyle]}>
+    <View style={[styles.container, containerStyle]} testID={testID}>
       {label && (
         <Text allowFontScaling={allowFontScaling} style={styles.label}>
           {label}
@@ -104,16 +234,25 @@ export function Select<T extends string | number>({
       )}
 
       <Pressable
-        style={styles.field}
-        onPress={() => !isLoading && setOpen((o) => !o)}
-        disabled={isLoading}
-        accessibilityRole="button"
+        ref={fieldRef}
+        style={[styles.field, open && styles.fieldOpen, isDisabled && styles.fieldDisabled]}
+        onPress={openList}
+        disabled={isDisabled}
+        accessibilityRole="combobox"
         accessibilityLabel={label ?? placeholder ?? labels.selectPlaceholder}
-        accessibilityState={{ expanded: open, disabled: isLoading }}
+        accessibilityValue={{ text: selectedOption?.label ?? '' }}
+        accessibilityState={{ expanded: open, disabled: isDisabled }}
       >
-        <Text allowFontScaling={allowFontScaling} style={[styles.fieldText, !selectedOption && styles.fieldPlaceholder]}>
-          {selectedOption?.label || placeholder || labels.selectPlaceholder}
-        </Text>
+        <View style={styles.fieldValue}>
+          {renderLeading(selectedOption, colors.textLight)}
+          <Text
+            allowFontScaling={allowFontScaling}
+            numberOfLines={1}
+            style={[styles.fieldText, !selectedOption && styles.fieldPlaceholder]}
+          >
+            {selectedOption?.label || placeholder || labels.selectPlaceholder}
+          </Text>
+        </View>
         {isLoading ? (
           <ActivityIndicator size="small" color={colors.primary} />
         ) : (
@@ -121,29 +260,68 @@ export function Select<T extends string | number>({
         )}
       </Pressable>
 
-      {open && !isLoading && (
-        <View style={styles.optionsList}>
-          {options.map((option, index) => {
-            const isSelected = option.value === selectedValue;
-            return (
-              <Pressable
-                key={String(option.value)}
-                style={[styles.optionRow, index === options.length - 1 && styles.optionRowLast, isSelected && styles.optionRowSelected]}
-                onPress={() => {
-                  onSelect(option.value);
-                  setOpen(false);
-                }}
-                accessibilityRole="menuitem"
-                accessibilityState={{ selected: isSelected }}
-              >
-                <Text allowFontScaling={allowFontScaling} style={[styles.optionText, isSelected && styles.optionTextSelected]}>
-                  {option.label}
+      {open && (
+        <Modal visible transparent animationType="fade" statusBarTranslucent onRequestClose={close}>
+          <Pressable style={styles.backdrop} onPress={close} testID="select-backdrop" />
+
+          <View style={[styles.sheet, placement]} accessibilityRole="radiogroup" testID="select-list">
+            {searchable && (
+              <TextInput
+                allowFontScaling={allowFontScaling}
+                style={styles.search}
+                value={query}
+                onChangeText={setQuery}
+                placeholder={searchPlaceholder ?? labels.search}
+                placeholderTextColor={colors.textLight}
+                autoFocus
+                accessibilityLabel={searchPlaceholder ?? labels.search}
+              />
+            )}
+
+            <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false} bounces={false}>
+              {visibleOptions.map((option, index) => {
+                const isSelected = option.value === selectedValue;
+                return (
+                  <Pressable
+                    key={String(option.value)}
+                    style={[
+                      styles.optionRow,
+                      index === visibleOptions.length - 1 && styles.optionRowLast,
+                      isSelected && styles.optionRowSelected,
+                      option.disabled && styles.optionRowDisabled,
+                    ]}
+                    onPress={() => {
+                      onSelect(option.value);
+                      close();
+                    }}
+                    disabled={option.disabled}
+                    accessibilityRole="radio"
+                    accessibilityLabel={option.label}
+                    accessibilityState={{ selected: isSelected, checked: isSelected, disabled: !!option.disabled }}
+                  >
+                    <View style={styles.optionLabel}>
+                      {renderLeading(option, isSelected ? colors.primary : colors.textLight)}
+                      <Text
+                        allowFontScaling={allowFontScaling}
+                        numberOfLines={1}
+                        style={[styles.optionText, isSelected && styles.optionTextSelected]}
+                      >
+                        {option.label}
+                      </Text>
+                    </View>
+                    {isSelected && <Icon name="check" size={18} color={colors.primary} />}
+                  </Pressable>
+                );
+              })}
+
+              {visibleOptions.length === 0 && (
+                <Text allowFontScaling={allowFontScaling} style={styles.empty}>
+                  {labels.noResultsTitle}
                 </Text>
-                {isSelected && <Icon name="check" size={18} color={colors.primary} />}
-              </Pressable>
-            );
-          })}
-        </View>
+              )}
+            </ScrollView>
+          </View>
+        </Modal>
       )}
 
       {!!error && (

package/src/organisms/ThemeToggle.tsx

@@ -0,0 +1,30 @@
+import React, { memo, useMemo } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { useThemeMode, type ThemeMode } from '../theme/UIProvider';
+import { SegmentedControl } from '../molecules/SegmentedControl';
+
+export interface ThemeToggleProps {
+  style?: StyleProp<ViewStyle>;
+  labels?: Partial<Record<ThemeMode, string>>;
+  testID?: string;
+}
+
+const MODES: ThemeMode[] = ['system', 'light', 'dark'];
+const DEFAULT_LABELS: Record<ThemeMode, string> = { system: 'Auto', light: 'Light', dark: 'Dark' };
+
+/**
+ * ThemeToggle
+ * Conecta un SegmentedControl con UIProvider.setMode. Sin persistencia — el
+ * consumidor la resuelve vía onModeChange en <UIProvider>.
+ */
+export const ThemeToggle = memo(({ style, labels: labelOverrides, testID }: ThemeToggleProps) => {
+  const { mode, setMode } = useThemeMode();
+
+  const options = useMemo(() => {
+    const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+    return MODES.map((value) => ({ value, label: labels[value] }));
+  }, [labelOverrides]);
+
+  return <SegmentedControl options={options} value={mode} onChange={setMode} style={style} testID={testID} />;
+});
+ThemeToggle.displayName = 'ThemeToggle';

package/src/organisms/Toast.tsx

@@ -1,7 +1,8 @@
-import React, { memo, useEffect, useRef } from 'react';
-import { Animated, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import React, { memo } from 'react';
+import { Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { Transition } from '../atoms/Transition';
 import { Icon } from '../icons/Icon';
 import type { IconName } from '../icons/types';
 
@@ -120,24 +121,10 @@ 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>
-    );
-  }
+  ({ children, onHeight }: { children: React.ReactNode; onHeight?: (h: number) => void }) => (
+    <Transition preset={['fade', 'slide-down']} distance={16} spring>
+      <View onLayout={(e) => onHeight?.(e.nativeEvent.layout.height)}>{children}</View>
+    </Transition>
+  )
 );
 AnimatedToast.displayName = 'AnimatedToast';

package/src/organisms/ToastProvider.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { AnimatedToast, Toast, type ToastVariant } from './Toast';
 import { useInsets } from '../theme/UIProvider';
 import { createStyles } from '../theme/createStyles';
+import { createImperativeBridge } from './imperativeBridge';
 
 export interface ToastOptions {
   title: string;
@@ -26,6 +27,24 @@ interface ToastContextValue {
 }
 
 const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+const bridge = createImperativeBridge<ToastContextValue>('ToastProvider');
+
+/**
+ * Muestra un toast desde fuera del árbol de React —un servicio, un
+ * interceptor— sin pasar por el hook. Devuelve el id, o '' si no hay
+ * <ToastProvider> montado.
+ */
+export function showToast(options: ToastOptions): string {
+  return bridge.get()?.show(options) ?? '';
+}
+
+export function hideToast(id: string): void {
+  bridge.get()?.hide(id);
+}
+
+export function hideAllToasts(): void {
+  bridge.get()?.hideAll();
+}
 
 const useStyles = createStyles((theme) => ({
   host: { position: 'absolute', left: 0, right: 0, paddingHorizontal: theme.tokens.spacing.lg, gap: theme.tokens.spacing.sm },
@@ -122,6 +141,11 @@ export function ToastProvider({
 
   const value = useMemo<ToastContextValue>(() => ({ show, hide, hideAll }), [show, hide, hideAll]);
 
+  useEffect(() => {
+    bridge.set(value);
+    return () => bridge.set(null);
+  }, [value]);
+
   const hostPosition =
     position === 'top'
       ? { top: insets.top + 8 }

package/src/organisms/Wizard.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, 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';
+import { Transition } from '../atoms/Transition';
 
 export interface WizardStep extends StepItem {
   content: React.ReactNode;
@@ -31,6 +32,12 @@ export interface WizardProps {
    * @default true
    */
   scrollableContent?: boolean;
+  /**
+   * El contenido del paso entra deslizándose en el sentido de la navegación.
+   * Sólo opacity y transform, así que la animación corre en el hilo nativo.
+   * @default true
+   */
+  animated?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -61,6 +68,7 @@ export function Wizard({
   nextLabel = 'Next',
   finishLabel = 'Finish',
   scrollableContent = true,
+  animated = true,
   style,
 }: WizardProps) {
   const styles = useStyles();
@@ -82,6 +90,15 @@ export function Wizard({
     [steps]
   );
 
+  // El ref todavía guarda el paso anterior durante el render que trae el nuevo.
+  const previous = useRef(current);
+  const forward = current >= previous.current;
+  const entered = useRef(false);
+  useEffect(() => {
+    previous.current = current;
+    entered.current = true;
+  }, [current]);
+
   const activeStep = steps[current];
   const isFirst = current === 0;
   const isLast = current === steps.length - 1;
@@ -92,6 +109,22 @@ export function Wizard({
     else goTo(current + 1);
   };
 
+  // El paso saliente no se anima: mantener los dos montados a la vez duplicaría
+  // los formularios y su estado.
+  const renderContent = () =>
+    animated ? (
+      <Transition
+        key={current}
+        testID="wizard-step"
+        preset={['fade', forward ? 'slide-left' : 'slide-right']}
+        appear={entered.current}
+      >
+        {activeStep?.content}
+      </Transition>
+    ) : (
+      activeStep?.content
+    );
+
   return (
     <View style={[styles.container, style]}>
       <Steps
@@ -109,16 +142,17 @@ export function Wizard({
           de los campos. */}
       {scrollableContent ? (
         <ScrollView
+          testID="wizard-content"
           style={styles.content}
           contentContainerStyle={styles.contentInner}
           keyboardShouldPersistTaps="handled"
           automaticallyAdjustKeyboardInsets
           showsVerticalScrollIndicator={false}
         >
-          {activeStep?.content}
+          {renderContent()}
         </ScrollView>
       ) : (
-        <View style={styles.content}>{activeStep?.content}</View>
+        <View style={styles.content}>{renderContent()}</View>
       )}
 
       <View style={styles.footer}>

package/src/organisms/imperativeBridge.ts

@@ -0,0 +1,28 @@
+/**
+ * Puente entre el proveedor montado y el código que no es un componente
+ * (servicios, capa de API, interceptores). El proveedor se registra al montar y
+ * se borra al desmontar, así que fuera del árbol nunca queda una referencia
+ * viva a un contexto muerto.
+ */
+export interface ImperativeBridge<T> {
+  set: (value: T | null) => void;
+  get: () => T | null;
+}
+
+export function createImperativeBridge<T>(providerName: string): ImperativeBridge<T> {
+  let current: T | null = null;
+
+  return {
+    set: (value) => {
+      current = value;
+    },
+    get: () => {
+      if (!current && __DEV__) {
+        console.warn(
+          `orn-ui: se llamó a la API imperativa sin un <${providerName}> montado. La llamada se ignoró.`
+        );
+      }
+      return current;
+    },
+  };
+}

package/src/organisms/index.ts

@@ -1,12 +1,12 @@
 export { Modal } from './Modal';
 export type { ModalProps, ModalVariant } from './Modal';
 export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './BottomSheet';
+export type { BottomSheetProps, FooterPlacement } 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 { AlertProvider, useAlert, showAlert, showConfirm, hideAlert } from './AlertProvider';
 export type { AlertOptions, ConfirmOptions } from './AlertProvider';
 export { Screen } from './Screen';
 export type { ScreenProps, ScreenEdge } from './Screen';
@@ -16,7 +16,7 @@ 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 { ToastProvider, useToast, showToast, hideToast, hideAllToasts } 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';
@@ -24,3 +24,7 @@ export { DateField } from './DateField';
 export type { DateFieldProps } from './DateField';
 export { Wizard } from './Wizard';
 export type { WizardProps, WizardStep } from './Wizard';
+export { ThemeToggle } from './ThemeToggle';
+export type { ThemeToggleProps } from './ThemeToggle';
+export { NavigationBar } from './NavigationBar';
+export type { NavigationBarProps, NavigationBarItem } from './NavigationBar';