@obisoft/ui 0.8.0

package/src/components/ScanInputBar.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, TextInput, View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { useObiStyles } from '../styles/useObiStyles';
+import { ObiText } from '../typography/ObiText';
+import { Button } from './Button';
+
+export type ScanInputBarProps = {
+  onSubmit: (code: string) => Promise<boolean> | boolean;
+  onOpenCamera: () => void;
+  loading?: boolean;
+  autoFocus?: boolean;
+  label?: string;
+  placeholder?: string;
+  cameraLabel?: string;
+};
+
+export function ScanInputBar({
+  onSubmit,
+  onOpenCamera,
+  loading = false,
+  autoFocus = false,
+  label = 'ESCÁNER / CÓDIGO',
+  placeholder = 'Escanee o escriba y presione Enter',
+  cameraLabel = 'Cámara',
+}: ScanInputBarProps) {
+  const theme = useObiTheme();
+  const ui = useObiStyles();
+  const [code, setCode] = useState('');
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (!autoFocus) return;
+    const timer = setTimeout(() => inputRef.current?.focus(), 80);
+    return () => clearTimeout(timer);
+  }, [autoFocus]);
+
+  const submit = async () => {
+    const value = code.trim();
+    if (!value || loading) return;
+    const success = await onSubmit(value);
+    if (success) setCode('');
+    setTimeout(() => inputRef.current?.focus(), 60);
+  };
+
+  return (
+    <View style={ui.formSection}>
+      <View style={ui.scanInputWrap}>
+        <ObiText variant="caption" weight="800" muted>{label}</ObiText>
+        <View style={ui.scanInputRow}>
+          <TextInput
+            ref={inputRef}
+            value={code}
+            onChangeText={setCode}
+            placeholder={placeholder}
+            placeholderTextColor={theme.colors.textMuted}
+            autoCapitalize="characters"
+            autoCorrect={false}
+            returnKeyType="search"
+            onSubmitEditing={() => void submit()}
+            style={ui.input}
+          />
+          {loading ? <ActivityIndicator color={theme.colors.primary} /> : null}
+        </View>
+      </View>
+      <Button title={cameraLabel} variant="secondary" onPress={onOpenCamera} />
+    </View>
+  );
+}

package/src/components/ScannerShell.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { ActivityIndicator, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+import { GlassSurface } from '../glass/GlassSurface';
+import { Button } from './Button';
+
+export type ScannerShellProps = {
+  children?: React.ReactNode;
+  title?: string;
+  status?: string;
+  processing?: boolean;
+  torch?: boolean;
+  onClose: () => void;
+  onToggleTorch?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Chrome layer for camera/scanner screens. The camera remains owned by the app. */
+export function ScannerShell({
+  children,
+  title = 'Escanear',
+  status,
+  processing,
+  torch,
+  onClose,
+  onToggleTorch,
+  style,
+}: ScannerShellProps) {
+  const theme = useObiTheme();
+  return (
+    <View style={[{ flex: 1, backgroundColor: '#000' }, style]}>
+      {children}
+
+      <View style={{
+        paddingTop: theme.spacing.xl,
+        paddingHorizontal: theme.spacing.lg,
+        paddingBottom: theme.spacing.xl,
+        gap: theme.spacing.sm,
+        backgroundColor: 'rgba(0,0,0,0.36)',
+      }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: theme.spacing.md }}>
+          <Button title="Cerrar" variant="glass" size="sm" onPress={onClose} />
+          {onToggleTorch ? (
+            <Button
+              title={torch ? 'Apagar luz' : 'Encender luz'}
+              variant="glass"
+              size="sm"
+              onPress={onToggleTorch}
+            />
+          ) : null}
+        </View>
+        <ObiText weight="900" style={{ color: '#FFFFFF', textAlign: 'center' }}>{title}</ObiText>
+      </View>
+
+      {status ? (
+        <GlassSurface
+          variant="scanner"
+          style={{
+            position: 'absolute',
+            left: theme.spacing.md,
+            right: theme.spacing.md,
+            bottom: theme.spacing.md,
+            borderRadius: theme.radius.xl,
+            padding: theme.spacing.lg,
+          }}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.md }}>
+            {processing ? <ActivityIndicator color={theme.colors.primary} /> : null}
+            <ObiText weight="700" style={{ flex: 1 }}>{status}</ObiText>
+          </View>
+        </GlassSurface>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Screen.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { SafeAreaView, type Edge, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export function Screen({
+  children,
+  style,
+  edges = [],
+  tabClearance,
+  navigationClearance,
+  opaque = false,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  edges?: Edge[];
+  tabClearance?: boolean;
+  navigationClearance?: boolean | number;
+  opaque?: boolean;
+}) {
+  const insets = useSafeAreaInsets();
+  const theme = useObiTheme();
+  const clearTab = navigationClearance ?? tabClearance ?? !edges.includes('bottom');
+  const clearance = clearTab === true
+    ? theme.navigation.bottomBarHeight
+    : typeof clearTab === 'number'
+      ? clearTab
+      : 0;
+  const backgroundColor = opaque ? theme.colors.background : 'transparent';
+
+  return (
+    <SafeAreaView edges={edges} style={{ flex: 1, backgroundColor }}>
+      <View
+        style={[
+          { flex: 1, backgroundColor },
+          clearTab ? { paddingBottom: clearance + insets.bottom } : null,
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </SafeAreaView>
+  );
+}

package/src/components/SearchArea.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { SoftGlassPanel } from '../glass/GlassSurface';
+
+export function SearchArea({
+  children,
+  style,
+  dense = true,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  dense?: boolean;
+}) {
+  const theme = useObiTheme();
+  return (
+    <SoftGlassPanel
+      dense={dense}
+      style={[
+        {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+          backgroundColor: 'transparent',
+          borderBottomWidth: 1,
+          borderBottomColor: theme.glass.borderSoft,
+          gap: theme.spacing.sm,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </SoftGlassPanel>
+  );
+}

package/src/components/SegmentedControl.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { ObiText } from '../typography/ObiText';
+
+export type SegmentedOption<T extends string | number> = { value: T; label: string };
+
+export function SegmentedControl<T extends string | number>({
+  options,
+  value,
+  onChange,
+}: {
+  options: Array<SegmentedOption<T>>;
+  value: T;
+  onChange: (value: T) => void;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View style={{
+      flexDirection: 'row',
+      backgroundColor: theme.glass.surface,
+      borderRadius: theme.radius.md,
+      padding: 3,
+      gap: 2,
+      borderWidth: 1,
+      borderColor: theme.glass.border,
+      ...shadow.glassSm,
+    }}>
+      {options.map(option => {
+        const selected = option.value === value;
+        return (
+          <Pressable
+            key={String(option.value)}
+            accessibilityRole="button"
+            accessibilityState={{ selected }}
+            onPress={() => onChange(option.value)}
+            style={({ pressed }) => ({
+              flex: 1,
+              minHeight: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: theme.radius.sm,
+              paddingHorizontal: theme.spacing.sm,
+              backgroundColor: selected ? theme.glass.surfaceStrong : 'transparent',
+              opacity: pressed ? 0.78 : 1,
+            })}
+          >
+            <ObiText
+              weight={selected ? '800' : '700'}
+              style={{
+                fontSize: 12,
+                color: selected ? theme.colors.primary : theme.colors.textMuted,
+                letterSpacing: 0.2,
+              }}
+            >
+              {option.label}
+            </ObiText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export function Skeleton({
+  width,
+  height,
+  style,
+  radius,
+}: {
+  width?: number | `${number}%`;
+  height: number;
+  style?: StyleProp<ViewStyle>;
+  radius?: number;
+}) {
+  const theme = useObiTheme();
+  const opacity = useRef(new Animated.Value(0.4)).current;
+
+  useEffect(() => {
+    const pulse = Animated.loop(Animated.sequence([
+      Animated.timing(opacity, { toValue: 1, duration: 700, useNativeDriver: true }),
+      Animated.timing(opacity, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+    ]));
+    pulse.start();
+    return () => pulse.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width,
+          height,
+          borderRadius: radius ?? theme.radius.sm,
+          backgroundColor: theme.colors.surfaceMuted,
+          opacity,
+        },
+        style,
+      ]}
+    />
+  );
+}

package/src/components/StatusBadge.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export type StatusTone = 'success' | 'warning' | 'danger' | 'neutral' | 'primary';
+
+export function StatusBadge({ label, tone = 'neutral' }: { label: string; tone?: StatusTone }) {
+  const theme = useObiTheme();
+  const color = tone === 'success'
+    ? theme.colors.success
+    : tone === 'warning'
+      ? theme.colors.warning
+      : tone === 'danger'
+        ? theme.colors.danger
+        : tone === 'primary'
+          ? theme.colors.primary
+          : theme.colors.textMuted;
+  return (
+    <View style={{ borderRadius: theme.radius.pill, paddingHorizontal: theme.spacing.sm, paddingVertical: 2, backgroundColor: `${color}18` }}>
+      <Text style={{ fontSize: 11, fontWeight: '700', color }} numberOfLines={1}>{label}</Text>
+    </View>
+  );
+}

package/src/components/SuccessState.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { Card } from './Card';
+import { Icon, type IconName } from './Icon';
+import { ObiText } from '../typography/ObiText';
+
+export function SuccessState({
+  title,
+  description,
+  icon = 'check',
+  actions,
+}: {
+  title: string;
+  description?: string;
+  icon?: IconName;
+  actions?: React.ReactNode;
+}) {
+  const theme = useObiTheme();
+  return (
+    <Card style={{ width: '100%', maxWidth: 520, alignItems: 'center', gap: theme.spacing.lg }}>
+      <View
+        style={{
+          width: 72,
+          height: 72,
+          borderRadius: theme.radius.pill,
+          backgroundColor: theme.glass.successTint,
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderWidth: 1,
+          borderColor: theme.colors.success + '33',
+        }}
+      >
+        <Icon name={icon} size={36} color={theme.colors.success} strokeWidth={3} />
+      </View>
+      <ObiText variant="title" weight="900" style={{ textAlign: 'center' }}>{title}</ObiText>
+      {description ? <ObiText muted style={{ textAlign: 'center' }}>{description}</ObiText> : null}
+      {actions ? <View style={{ width: '100%', gap: theme.spacing.sm }}>{actions}</View> : null}
+    </Card>
+  );
+}

package/src/components/TextField.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TextInput, View, type TextInputProps } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { ObiText } from '../typography/ObiText';
+
+export function TextField({
+  label,
+  helperText,
+  error,
+  ...props
+}: TextInputProps & {
+  label?: string;
+  helperText?: string;
+  error?: string;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View style={{ gap: theme.spacing.xs }}>
+      {label ? <ObiText variant="caption" weight="700">{label}</ObiText> : null}
+      <TextInput
+        placeholderTextColor={theme.colors.textMuted}
+        {...props}
+        style={[
+          {
+            minHeight: 48,
+            borderWidth: 1,
+            borderColor: error ? theme.colors.danger : theme.glass.border,
+            borderRadius: theme.radius.md,
+            backgroundColor: theme.glass.input,
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            color: theme.colors.text,
+            fontSize: theme.type.body,
+            ...shadow.glassSm,
+          },
+          props.style,
+        ]}
+      />
+      {error ? (
+        <ObiText variant="caption" tone="danger">{error}</ObiText>
+      ) : helperText ? (
+        <ObiText variant="caption" muted>{helperText}</ObiText>
+      ) : null}
+    </View>
+  );
+}

package/src/components/ToggleRow.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Switch, View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+
+export function ToggleRow({
+  label,
+  description,
+  value,
+  onValueChange,
+  disabled,
+}: {
+  label: string;
+  description?: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: theme.spacing.lg }}>
+      <View style={{ flex: 1, gap: theme.spacing.xs }}>
+        <ObiText weight="800">{label}</ObiText>
+        {description ? <ObiText variant="caption" muted>{description}</ObiText> : null}
+      </View>
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        trackColor={{ false: theme.colors.borderStrong, true: theme.colors.primarySoft }}
+        thumbColor={value ? theme.colors.primary : undefined}
+      />
+    </View>
+  );
+}

package/src/components/record-detail/RecordDetail.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ActivityIndicator, ScrollView } from 'react-native';
+import { useObiTheme } from '../../provider/ObiUIProvider';
+import { ObiText } from '../../typography/ObiText';
+import { Button } from '../Button';
+import { Screen } from '../Screen';
+import { RecordDetailSection } from './RecordDetailSection';
+
+export function RecordDetailNote({ text }: { text?: string | null }) {
+  const theme = useObiTheme();
+  if (!text) return null;
+  return (
+    <RecordDetailSection title="Nota">
+      <ObiText style={{ paddingVertical: theme.spacing.md, lineHeight: 22 }}>{text}</ObiText>
+    </RecordDetailSection>
+  );
+}
+
+export function RecordDetail({
+  loading,
+  error,
+  onRetry,
+  children,
+}: {
+  loading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  children?: React.ReactNode;
+}) {
+  const theme = useObiTheme();
+  const center = { alignItems: 'center' as const, justifyContent: 'center' as const, gap: theme.spacing.lg, padding: theme.spacing.xl };
+
+  if (loading) {
+    return (
+      <Screen style={center}>
+        <ActivityIndicator size="large" color={theme.colors.primary} />
+      </Screen>
+    );
+  }
+
+  if (error) {
+    return (
+      <Screen style={center}>
+        <ObiText style={{ color: theme.colors.danger, textAlign: 'center' }}>{error}</ObiText>
+        {onRetry ? <Button title="Reintentar" onPress={onRetry} /> : null}
+      </Screen>
+    );
+  }
+
+  return (
+    <Screen>
+      <ScrollView
+        contentContainerStyle={{ paddingBottom: 128, width: '100%', maxWidth: 720, alignSelf: 'center' }}
+        showsVerticalScrollIndicator={false}
+      >
+        {children}
+      </ScrollView>
+    </Screen>
+  );
+}

package/src/components/record-detail/RecordDetailActions.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+import { useObiTheme } from '../../provider/ObiUIProvider';
+import { shadow } from '../../theme/effects';
+import { ObiText } from '../../typography/ObiText';
+import { Icon, type IconName } from '../Icon';
+
+export type RecordAction = {
+  key: string;
+  icon: IconName;
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  tone?: 'default' | 'primary' | 'danger';
+};
+
+export function RecordDetailActions({ actions }: { actions: RecordAction[] }) {
+  const theme = useObiTheme();
+  if (actions.length === 0) return null;
+  const compact = actions.length <= 5;
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        paddingHorizontal: theme.spacing.xs,
+        paddingVertical: theme.spacing.sm,
+        marginHorizontal: theme.spacing.lg,
+        marginBottom: theme.spacing.md,
+        backgroundColor: theme.glass.surfaceStrong,
+        borderRadius: theme.radius.lg,
+        borderWidth: 1,
+        borderColor: theme.glass.border,
+        ...shadow.sm,
+      }}
+    >
+      {actions.map(action => {
+        const tone = action.tone ?? 'default';
+        const inert = Boolean(action.disabled || action.loading);
+        const iconColor = tone === 'primary' ? theme.colors.onPrimary : tone === 'danger' ? theme.colors.danger : theme.colors.primary;
+        return (
+          <Pressable
+            key={action.key}
+            onPress={action.onPress}
+            disabled={inert}
+            hitSlop={6}
+            style={({ pressed }) => ({
+              ...(compact
+                ? { flexGrow: 1, flexBasis: 56, maxWidth: 76 }
+                : { width: '25%' }),
+              alignItems: 'center',
+              gap: 6,
+              paddingVertical: theme.spacing.sm,
+              opacity: inert ? 0.45 : pressed ? 0.72 : 1,
+            })}
+          >
+            <View
+              style={{
+                width: 46,
+                height: 46,
+                borderRadius: 23,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: tone === 'primary'
+                  ? theme.colors.primary
+                  : tone === 'danger'
+                    ? theme.glass.dangerTint
+                    : theme.glass.primaryTint,
+              }}
+            >
+              {action.loading ? (
+                <ActivityIndicator size="small" color={tone === 'primary' ? theme.colors.onPrimary : theme.colors.primary} />
+              ) : (
+                <Icon name={action.icon} color={iconColor} size={20} />
+              )}
+            </View>
+            <ObiText variant="caption" weight="700" style={{ textAlign: 'center', color: theme.colors.text, lineHeight: 14 }} numberOfLines={2}>
+              {action.label}
+            </ObiText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/record-detail/RecordDetailField.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../../provider/ObiUIProvider';
+import { ObiText } from '../../typography/ObiText';
+
+export function RecordDetailField({
+  label,
+  value,
+  emphasize,
+  last,
+}: {
+  label: string;
+  value?: React.ReactNode;
+  emphasize?: boolean;
+  last?: boolean;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        borderBottomWidth: last ? 0 : 1,
+        borderBottomColor: theme.colors.border,
+      }}
+    >
+      <ObiText muted style={{ flexShrink: 0, maxWidth: '42%' }}>{label}</ObiText>
+      {typeof value === 'string' || value == null ? (
+        <ObiText
+          weight={emphasize ? '800' : '700'}
+          style={{ flex: 1, textAlign: 'right', ...(emphasize ? { fontSize: 20, letterSpacing: -0.3 } : {}) }}
+        >
+          {value || '—'}
+        </ObiText>
+      ) : (
+        <View style={{ flex: 1, alignItems: 'flex-end' }}>{value}</View>
+      )}
+    </View>
+  );
+}