orn-ui 0.1.0

package/src/theme/index.ts

@@ -0,0 +1,22 @@
+export { spacing, radius, fontSize, fontWeight, lineHeight, duration, shadow, tokens } from './tokens';
+export type { Tokens } from './tokens';
+export { lightPalette, darkPalette } from './palettes';
+export type { ThemeColors } from './palettes';
+export { createTheme, defaultTheme } from './createTheme';
+export type { Theme, ThemePair, ThemeOverrides, DeepPartial } from './types';
+export { defaultLabels } from './labels';
+export type { Labels } from './labels';
+export { zeroInsets } from './insets';
+export type { EdgeInsets } from './insets';
+export { createStyles } from './createStyles';
+export {
+  UIProvider,
+  useTheme,
+  useColors,
+  useThemeMode,
+  useIcons,
+  useInsets,
+  useLabels,
+  useAllowFontScaling,
+} from './UIProvider';
+export type { UIProviderProps, ThemeMode } from './UIProvider';

package/src/theme/insets.ts

@@ -0,0 +1,9 @@
+/** Estructuralmente igual a EdgeInsets de react-native-safe-area-context, sin depender del paquete. */
+export interface EdgeInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export const zeroInsets: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };

package/src/theme/labels.ts

@@ -0,0 +1,23 @@
+export interface Labels {
+  close: string;
+  cancel: string;
+  confirm: string;
+  loading: string;
+  loadingMore: string;
+  noResultsTitle: string;
+  noResultsDescription: string;
+  search: string;
+  selectPlaceholder: string;
+}
+
+export const defaultLabels: Labels = {
+  close: 'Close',
+  cancel: 'Cancel',
+  confirm: 'OK',
+  loading: 'Loading...',
+  loadingMore: 'Loading more...',
+  noResultsTitle: 'No results found',
+  noResultsDescription: 'Try a different search term',
+  search: 'Search...',
+  selectPlaceholder: 'Select...',
+};

package/src/theme/palettes.ts

@@ -0,0 +1,53 @@
+/**
+ * Cada color es `string`, no un literal (`as const`): light y dark tienen
+ * valores distintos para la misma clave, y createTheme() debe poder
+ * aceptar cualquier hex/rgba en los overrides — literal typing lo impediría.
+ */
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  white: string;
+  black: string;
+  error: string;
+  success: string;
+  warning: string;
+  background: string;
+  surface: string;
+  text: string;
+  textLight: string;
+  border: string;
+  inputBackground: string;
+  overlay: string;
+}
+
+const shared = {
+  primary: '#004cef',
+  secondary: '#00cae1',
+  white: '#ffffff',
+  black: '#000000',
+  error: '#ff3b30',
+  success: '#34c759',
+  warning: '#f59e0b',
+};
+
+export const lightPalette: ThemeColors = {
+  ...shared,
+  background: '#f8f9fa',
+  surface: '#ffffff',
+  text: '#333333',
+  textLight: '#666666',
+  border: '#e5e7eb',
+  inputBackground: '#f5f7fa',
+  overlay: 'rgba(0,0,0,0.5)',
+};
+
+export const darkPalette: ThemeColors = {
+  ...shared,
+  background: '#121212',
+  surface: '#1e1e1e',
+  text: '#ecedee',
+  textLight: '#9ba1a6',
+  border: '#2a2a2e',
+  inputBackground: '#232326',
+  overlay: 'rgba(0,0,0,0.6)',
+};

package/src/theme/tokens.ts

@@ -0,0 +1,113 @@
+import { Platform, type ViewStyle } from 'react-native';
+
+// Las escalas numéricas se tipan explícitamente como `number` (no `as const`):
+// createTheme() debe poder sobreescribir cualquier valor con otro número
+// arbitrario: con literal typing, un override de `radius.md` a `999` fallaría
+// porque el tipo inferido sería el literal `8`, no `number`.
+
+/**
+ * Escala de espaciado. Usar siempre estos valores en vez de números mágicos
+ * para que el ritmo vertical/horizontal sea consistente entre componentes.
+ */
+export const spacing: Record<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl', number> = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  xxl: 24,
+  xxxl: 32,
+};
+
+export const radius: Record<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full', number> = {
+  none: 0,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  xxl: 20,
+  full: 9999,
+};
+
+export const fontSize: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> = {
+  xs: 11,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  xxl: 24,
+};
+
+// fontWeight sí necesita literales: TextStyle.fontWeight de RN exige un union
+// de strings específicos ('400' | '500' | ...), no `string` arbitrario.
+export const fontWeight = {
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+} as const;
+
+export const lineHeight: Record<'sm' | 'md' | 'lg', number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
+/** Duraciones en ms para Animated.timing/spring. */
+export const duration: Record<'fast' | 'base' | 'slow', number> = {
+  fast: 150,
+  base: 200,
+  slow: 250,
+};
+
+type ShadowStyle = Pick<
+  ViewStyle,
+  'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'elevation'
+>;
+
+/**
+ * Sombras cross-platform: shadow* para iOS, elevation para Android.
+ * `shadowColor` se deja en negro fijo — el color de sombra por tema es un
+ * detalle demasiado fino para justificar la complejidad de resolverlo aquí.
+ */
+export const shadow: Record<'none' | 'sm' | 'md' | 'lg', ShadowStyle> = {
+  none: Platform.select({
+    android: { elevation: 0 },
+    default: { shadowOpacity: 0 },
+  }) as ShadowStyle,
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+};
+
+export const tokens = {
+  spacing,
+  radius,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  duration,
+  shadow,
+};
+
+export type Tokens = typeof tokens;

package/src/theme/types.ts

@@ -0,0 +1,27 @@
+import type { Tokens } from './tokens';
+import type { ThemeColors } from './palettes';
+
+/** Theme resuelto: paleta de un scheme concreto + tokens compartidos. */
+export interface Theme {
+  colors: ThemeColors;
+  tokens: Tokens;
+  scheme: 'light' | 'dark';
+}
+
+/** Par de themes light/dark que produce createTheme() y consume UIProvider. */
+export interface ThemePair {
+  light: Theme;
+  dark: Theme;
+}
+
+export type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+export interface ThemeOverrides {
+  colors?: {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+  };
+  tokens?: DeepPartial<Tokens>;
+}