orn-ui 0.1.0

package/src/icons/defaultIcons.tsx

@@ -0,0 +1,292 @@
+import React, { memo } from 'react';
+import { Text, View } from 'react-native';
+import type { IconName, IconRenderProps } from './types';
+
+/**
+ * Glifos default dibujados con primitivas de RN (View + border + transform).
+ * Cero dependencias, cero fuentes, cero carga asíncrona. Cubren únicamente
+ * lo que la librería necesita internamente (checkbox, chevrons de Select,
+ * toggle de password en Input, etc). Para íconos de producto, el consumidor
+ * inyecta su propio set vía <UIProvider icons={...}> o la prop `icon`.
+ */
+
+const Chevron = memo(({ size, color, direction }: IconRenderProps & { direction: 'up' | 'down' | 'left' | 'right' }) => {
+  const strokeWidth = Math.max(1.5, size / 12);
+  const arm = size * 0.32;
+  const rotation: Record<typeof direction, number> = {
+    down: 45,
+    up: 225,
+    left: 135,
+    right: -45,
+  };
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: arm,
+          height: arm,
+          borderRightWidth: strokeWidth,
+          borderBottomWidth: strokeWidth,
+          borderColor: color,
+          transform: [{ rotate: `${rotation[direction]}deg` }, { translateY: -arm * 0.15 }],
+        }}
+      />
+    </View>
+  );
+});
+Chevron.displayName = 'Chevron';
+
+const Check = memo(({ size, color }: IconRenderProps) => {
+  const strokeWidth = Math.max(1.5, size / 10);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.5,
+          height: size * 0.28,
+          borderLeftWidth: strokeWidth,
+          borderBottomWidth: strokeWidth,
+          borderColor: color,
+          transform: [{ rotate: '-45deg' }, { translateY: -size * 0.06 }],
+        }}
+      />
+    </View>
+  );
+});
+Check.displayName = 'Check';
+
+const Close = memo(({ size, color }: IconRenderProps) => {
+  const strokeWidth = Math.max(1.5, size / 10);
+  const line = size * 0.62;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          position: 'absolute',
+          width: line,
+          height: strokeWidth,
+          backgroundColor: color,
+          borderRadius: strokeWidth / 2,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: line,
+          height: strokeWidth,
+          backgroundColor: color,
+          borderRadius: strokeWidth / 2,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </View>
+  );
+});
+Close.displayName = 'Close';
+
+const PlusMinus = memo(({ size, color, minusOnly }: IconRenderProps & { minusOnly?: boolean }) => {
+  const strokeWidth = Math.max(1.5, size / 10);
+  const line = size * 0.56;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          position: 'absolute',
+          width: line,
+          height: strokeWidth,
+          backgroundColor: color,
+          borderRadius: strokeWidth / 2,
+        }}
+      />
+      {!minusOnly && (
+        <View
+          style={{
+            position: 'absolute',
+            width: strokeWidth,
+            height: line,
+            backgroundColor: color,
+            borderRadius: strokeWidth / 2,
+          }}
+        />
+      )}
+    </View>
+  );
+});
+PlusMinus.displayName = 'PlusMinus';
+
+/**
+ * Círculo con un glifo tipográfico adentro (!, i, ?).
+ *
+ * Usa <Text> con la fuente del sistema en vez de componer el glifo con
+ * Views: sigue siendo cero-dependencias (no carga ninguna fuente), y "i" vs
+ * "!" vs "?" quedan inequívocos. Dibujarlos con barras y puntos daba un
+ * "info" idéntico a un "!" invertido, que es exactamente lo que un ícono de
+ * información no debe comunicar.
+ */
+const Circle = memo(
+  ({ size, color, filled, label }: IconRenderProps & { filled?: boolean; label?: string }) => {
+    const strokeWidth = Math.max(1.5, size / 12);
+    return (
+      <View
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: filled ? 0 : strokeWidth,
+          borderColor: color,
+          backgroundColor: filled ? color : 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {!!label && (
+          <Text
+            allowFontScaling={false}
+            style={{
+              color: filled ? '#fff' : color,
+              fontSize: size * 0.62,
+              lineHeight: size * 0.74,
+              fontWeight: '700',
+              textAlign: 'center',
+              includeFontPadding: false,
+            }}
+          >
+            {label}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+Circle.displayName = 'Circle';
+
+const Eye = memo(({ size, color, off }: IconRenderProps & { off?: boolean }) => {
+  const strokeWidth = Math.max(1.5, size / 12);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.8,
+          height: size * 0.8,
+          borderRadius: size * 0.4,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          overflow: 'hidden',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transform: [{ scaleY: 0.55 }],
+        }}
+      >
+        <View
+          style={{
+            width: size * 0.26,
+            height: size * 0.26,
+            borderRadius: size * 0.13,
+            backgroundColor: color,
+            transform: [{ scaleY: 1 / 0.55 }],
+          }}
+        />
+      </View>
+      {off && (
+        <View
+          style={{
+            position: 'absolute',
+            width: size * 1.05,
+            height: strokeWidth,
+            backgroundColor: color,
+            borderRadius: strokeWidth / 2,
+            transform: [{ rotate: '-45deg' }],
+          }}
+        />
+      )}
+    </View>
+  );
+});
+Eye.displayName = 'Eye';
+
+const Search = memo(({ size, color }: IconRenderProps) => {
+  const strokeWidth = Math.max(1.5, size / 9);
+  // Lente grande (72% del alto) arriba-izquierda y mango corto saliendo de su
+  // borde inferior-derecho sobre la diagonal de 45°. Las proporciones importan
+  // a tamaños chicos (16-20px): con un lente chico y mango largo el glifo se
+  // lee como una coma, no como una lupa.
+  const lensD = size * 0.72;
+  const lensR = lensD / 2;
+  const handleLen = size * 0.34;
+  const diag = Math.SQRT1_2; // cos(45°) === sin(45°)
+  // El mango se centra sobre la diagonal, arrancando justo en el borde del
+  // lente: distancia = radio + mitad del mango, menos un solapamiento de
+  // medio trazo para que no quede un hueco entre borde y mango.
+  const dist = lensR + handleLen / 2 - strokeWidth / 2;
+  const cx = lensR + dist * diag;
+  const cy = lensR + dist * diag;
+
+  return (
+    <View style={{ width: size, height: size }}>
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: lensD,
+          height: lensD,
+          borderRadius: lensR,
+          borderWidth: strokeWidth,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: cx - strokeWidth / 2,
+          top: cy - handleLen / 2,
+          width: strokeWidth,
+          height: handleLen,
+          backgroundColor: color,
+          borderRadius: strokeWidth / 2,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </View>
+  );
+});
+Search.displayName = 'Search';
+
+/** Renderer default. Se usa cuando <UIProvider icons={...}> no pasa uno propio. */
+export function renderDefaultIcon(name: IconName, props: IconRenderProps): React.ReactNode {
+  switch (name) {
+    case 'check':
+      return <Check {...props} />;
+    case 'close':
+      return <Close {...props} />;
+    case 'chevron-down':
+      return <Chevron {...props} direction="down" />;
+    case 'chevron-up':
+      return <Chevron {...props} direction="up" />;
+    case 'chevron-left':
+      return <Chevron {...props} direction="left" />;
+    case 'chevron-right':
+      return <Chevron {...props} direction="right" />;
+    case 'eye':
+      return <Eye {...props} />;
+    case 'eye-off':
+      return <Eye {...props} off />;
+    case 'search':
+      return <Search {...props} />;
+    case 'plus':
+      return <PlusMinus {...props} />;
+    case 'minus':
+      return <PlusMinus {...props} minusOnly />;
+    case 'alert':
+      return <Circle {...props} filled label="!" />;
+    case 'info':
+      return <Circle {...props} label="i" />;
+    case 'warning':
+      return <Circle {...props} filled label="!" />;
+    case 'question':
+      return <Circle {...props} label="?" />;
+    default:
+      return null;
+  }
+}

package/src/icons/index.ts

@@ -0,0 +1,4 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+export { renderDefaultIcon } from './defaultIcons';
+export type { IconName, IconRenderer, IconRenderProps } from './types';

package/src/icons/types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+/** Glifos que los componentes de la librería necesitan internamente. */
+export type IconName =
+  | 'check'
+  | 'close'
+  | 'chevron-down'
+  | 'chevron-up'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'eye'
+  | 'eye-off'
+  | 'search'
+  | 'plus'
+  | 'minus'
+  | 'alert'
+  | 'info'
+  | 'warning'
+  | 'question';
+
+export interface IconRenderProps {
+  size: number;
+  color: string;
+}
+
+/** Renderer inyectable: reemplaza los glifos default por los de cualquier set de iconos. */
+export type IconRenderer = (name: IconName, props: IconRenderProps) => ReactNode;

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './theme';
+export * from './icons';
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';

package/src/molecules/AvatarHeader.tsx

@@ -0,0 +1,69 @@
+import React, { memo } from 'react';
+import { 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 interface AvatarHeaderProps {
+  /** Ícono a mostrar dentro del círculo. Si se omite, se usan `initials`. */
+  iconName?: IconName;
+  iconColor?: string;
+  /** Texto corto (ej. 2 letras) mostrado si no se pasa `iconName`. */
+  initials?: string;
+  title: string;
+  subtitle?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: { alignItems: 'center', marginBottom: theme.tokens.spacing.xl },
+  avatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: theme.colors.primary + '20',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: theme.tokens.spacing.md,
+  },
+  initials: { fontSize: theme.tokens.fontSize.xxl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.primary },
+  title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, textAlign: 'center', color: theme.colors.text, marginBottom: theme.tokens.spacing.xs },
+  subtitle: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight },
+}));
+
+/**
+ * AvatarHeader
+ * Círculo 80x80 con ícono o iniciales + título/subtítulo centrado. Header
+ * típico de modales de detalle (cliente, producto, etc).
+ */
+export const AvatarHeader = memo(({ iconName, iconColor, initials, title, subtitle, style }: AvatarHeaderProps) => {
+  const colors = useColors();
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.avatar}>
+        {iconName ? (
+          <Icon name={iconName} size={40} color={iconColor || colors.primary} />
+        ) : (
+          <Text allowFontScaling={allowFontScaling} style={styles.initials}>
+            {initials}
+          </Text>
+        )}
+      </View>
+      <Text allowFontScaling={allowFontScaling} style={styles.title}>
+        {title}
+      </Text>
+      {typeof subtitle === 'string' ? (
+        <Text allowFontScaling={allowFontScaling} style={styles.subtitle}>
+          {subtitle}
+        </Text>
+      ) : (
+        subtitle
+      )}
+    </View>
+  );
+});
+AvatarHeader.displayName = 'AvatarHeader';

package/src/molecules/FormActions.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../atoms/Button';
+import type { IconName } from '../icons/types';
+import { useLabels } from '../theme/UIProvider';
+
+export interface FormActionsProps {
+  /** Si se omite, solo se muestra el botón secundario. */
+  primaryLabel?: string;
+  onPrimaryPress?: () => void;
+  primaryDisabled?: boolean;
+  primaryLoading?: boolean;
+  primaryLeftIconName?: IconName;
+  secondaryLabel?: string;
+  onSecondaryPress: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FormActions
+ * Par de botones: uno primario (guardar/editar) y uno ghost (cerrar/cancelar).
+ * Uso típico: al final de un form, o en el footer de un Modal.
+ */
+export const FormActions = memo(
+  ({
+    primaryLabel,
+    onPrimaryPress,
+    primaryDisabled = false,
+    primaryLoading = false,
+    primaryLeftIconName,
+    secondaryLabel,
+    onSecondaryPress,
+    style,
+  }: FormActionsProps) => {
+    const labels = useLabels();
+    return (
+      <View style={[{ gap: 12 }, style]}>
+        {primaryLabel && onPrimaryPress && (
+          <Button
+            title={primaryLabel}
+            onPress={onPrimaryPress}
+            disabled={primaryDisabled}
+            loading={primaryLoading}
+            leftIconName={primaryLeftIconName}
+          />
+        )}
+        <Button title={secondaryLabel ?? labels.close} onPress={onSecondaryPress} variant="ghost" />
+      </View>
+    );
+  }
+);
+FormActions.displayName = 'FormActions';

package/src/molecules/InfoRow.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react';
+import { 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';
+import { Avatar } from '../atoms/Avatar';
+
+export interface InfoRowProps {
+  icon: IconName;
+  label: string;
+  value: string | null | undefined;
+  placeholder: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  row: { flexDirection: 'row', alignItems: 'center' },
+  icon: { marginRight: theme.tokens.spacing.md },
+  textContainer: { flex: 1 },
+  label: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight, marginBottom: 2 },
+  value: { fontSize: theme.tokens.fontSize.md + 1, color: theme.colors.text, fontWeight: theme.tokens.fontWeight.medium },
+  placeholder: { color: theme.colors.textLight, fontStyle: 'italic' },
+}));
+
+/**
+ * InfoRow
+ * Ícono circular a la izquierda + label/valor apilado a la derecha. Muestra
+ * `placeholder` en itálica si no hay valor. Pensado para modales de detalle.
+ */
+export const InfoRow = memo(({ icon, label, value, placeholder, style }: InfoRowProps) => {
+  const colors = useColors();
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+
+  return (
+    <View style={[styles.row, style]}>
+      <Avatar size={40} backgroundColor={colors.inputBackground} style={styles.icon}>
+        <Icon name={icon} size={20} color={colors.textLight} />
+      </Avatar>
+      <View style={styles.textContainer}>
+        <Text allowFontScaling={allowFontScaling} style={styles.label}>
+          {label}
+        </Text>
+        <Text allowFontScaling={allowFontScaling} style={[styles.value, !value && styles.placeholder]}>
+          {value || placeholder}
+        </Text>
+      </View>
+    </View>
+  );
+});
+InfoRow.displayName = 'InfoRow';

package/src/molecules/OptionCard.tsx

@@ -0,0 +1,82 @@
+import React, { memo } from 'react';
+import { Text, TouchableOpacity, 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 interface OptionCardProps {
+  label: string;
+  iconName: IconName;
+  isSelected: boolean;
+  onPress: () => void;
+  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': ícono y texto en fila. */
+  layout?: 'vertical' | 'horizontal';
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.surface,
+    borderRadius: theme.tokens.radius.md,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    ...theme.tokens.shadow.sm,
+  },
+  cardHorizontal: { flex: 1, flexDirection: 'row', padding: theme.tokens.spacing.md - 2, gap: theme.tokens.spacing.sm },
+  cardVertical: { width: '31%', padding: theme.tokens.spacing.sm, gap: 5, minHeight: 100 },
+  cardSelected: {
+    borderColor: theme.colors.primary,
+    backgroundColor: theme.colors.primary + '15',
+    borderWidth: 1.5,
+    elevation: 0,
+    shadowOpacity: 0,
+  },
+  label: { color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },
+  labelVertical: { fontSize: theme.tokens.fontSize.xs, textAlign: 'center' },
+  labelSelected: { color: theme.colors.primary },
+}));
+
+/**
+ * OptionCard
+ * Card con ícono+label que resalta con borde/fondo primary cuando
+ * `isSelected`. Para elegir entre opciones excluyentes (forma de pago, tipo
+ * de documento, etc).
+ */
+export const OptionCard = memo(
+  ({ label, iconName, isSelected, onPress, layout = 'horizontal', style }: OptionCardProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+
+    return (
+      <TouchableOpacity
+        // activeOpacity=1: esta tarjeta tiene elevation (sombra Android); animar su
+        // propia opacity en el press dispara un bug de Android que redibuja la
+        // sombra como un borde oscuro pegado al borde del componente.
+        activeOpacity={1}
+        style={[
+          styles.card,
+          layout === 'vertical' ? styles.cardVertical : styles.cardHorizontal,
+          isSelected && styles.cardSelected,
+          style,
+        ]}
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityState={{ selected: isSelected }}
+        accessibilityLabel={label}
+      >
+        <Icon name={iconName} size={24} color={isSelected ? colors.primary : colors.textLight} />
+        <Text
+          allowFontScaling={allowFontScaling}
+          style={[styles.label, layout === 'vertical' && styles.labelVertical, isSelected && styles.labelSelected]}
+        >
+          {label}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+);
+OptionCard.displayName = 'OptionCard';

package/src/molecules/Stepper.tsx

@@ -0,0 +1,76 @@
+import React, { memo } from 'react';
+import { TextInput, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+
+export interface StepperProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onIncrement: () => void;
+  onDecrement: () => void;
+  size?: 'sm' | 'md';
+  style?: StyleProp<ViewStyle>;
+  incrementAccessibilityLabel?: string;
+  decrementAccessibilityLabel?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  control: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: theme.colors.border, borderRadius: theme.tokens.radius.md },
+  btn: { height: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: theme.colors.inputBackground },
+  btnSm: { backgroundColor: 'transparent' },
+  input: { flex: 1, textAlign: 'center', fontSize: theme.tokens.fontSize.lg, color: theme.colors.text, height: '100%' },
+  inputSm: { flex: 0, width: 50, borderLeftWidth: 1, borderRightWidth: 1, borderColor: theme.colors.border },
+}));
+
+/** Stepper: botón "-" + input numérico editable + botón "+". */
+export const Stepper = memo(
+  ({
+    value,
+    onChangeText,
+    onIncrement,
+    onDecrement,
+    size = 'md',
+    style,
+    incrementAccessibilityLabel = 'Increment',
+    decrementAccessibilityLabel = 'Decrement',
+  }: StepperProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+    const isSmall = size === 'sm';
+    const btnSize = isSmall ? 36 : 48;
+    const iconSize = isSmall ? 18 : 20;
+
+    return (
+      <View style={[styles.control, { height: isSmall ? 36 : 48 }, style]}>
+        <TouchableOpacity
+          onPress={onDecrement}
+          style={[styles.btn, { width: btnSize }, isSmall && styles.btnSm]}
+          accessibilityRole="button"
+          accessibilityLabel={decrementAccessibilityLabel}
+        >
+          <Icon name="minus" size={iconSize} color={colors.primary} />
+        </TouchableOpacity>
+        <TextInput
+          allowFontScaling={allowFontScaling}
+          style={[styles.input, isSmall && styles.inputSm]}
+          value={value}
+          onChangeText={onChangeText}
+          keyboardType="numeric"
+          selectTextOnFocus
+          accessibilityLabel="Quantity"
+        />
+        <TouchableOpacity
+          onPress={onIncrement}
+          style={[styles.btn, { width: btnSize }, isSmall && styles.btnSm]}
+          accessibilityRole="button"
+          accessibilityLabel={incrementAccessibilityLabel}
+        >
+          <Icon name="plus" size={iconSize} color={colors.primary} />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+);
+Stepper.displayName = 'Stepper';