@obisoft/ui 0.8.0

package/README.md

@@ -0,0 +1,45 @@
+# @obisoft/ui
+
+Design system reutilizable de Obisoft para React Native. Centraliza theme, Liquid Glass, primitives, formularios, navegación presentacional, listas, métricas, scanner, estados async y una capa de utilidades semánticas. No depende de Redux, APIs, React Navigation ni reglas de negocio de OBI Ventas.
+
+## Estado
+
+Versión: **`0.8.0`** (npm público, scope `@obisoft`).
+
+- Desarrollo en monorepo: `file:packages/obisoft-ui`
+- Consumo externo: `npm i @obisoft/ui@0.8.0` (requiere `NPM_TOKEN` de la org)
+
+Ver [docs/OBISOFT_UI_PUBLISH.md](../../docs/OBISOFT_UI_PUBLISH.md).
+
+## Capas
+
+- `theme` / `provider` / `styles` / `layout` / `typography` / `glass`
+- `components`: forms, acciones, listas, navegación visual, métricas, record detail, estados, rango de fechas y scanner
+- `gallery`: catálogo público `OBI_UI_CATALOG`
+
+## Workspaces de pantalla
+
+| Export | Uso |
+|--------|-----|
+| `ListWorkspace` | Listados FlashList |
+| `QueryWorkspace` | Scroll/métricas (reportes, estados de cuenta) |
+| `QueryState` / `LoadingState` / `ErrorState` / `EmptyState` | Estados async |
+| `FormRow` | Filas de formularios CRUD |
+
+## Storybook
+
+Catálogo visual fuera de la app de producto:
+
+```bash
+npm run storybook
+```
+
+Ver [`apps/obisoft-ui-storybook`](../../apps/obisoft-ui-storybook).
+
+## Metro (consumidores)
+
+El package es source-first (`.ts`). Configura transpile + `watchFolders` / `extraNodeModules` como en este monorepo.
+
+## Regla de arquitectura
+
+`@obisoft/ui` solo conoce React Native y dependencias visuales. Nunca importa Redux, APIs, features, pages ni `@obisoft/ventas-ui`. Validar con `npm run audit:ui`.

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@obisoft/ui",
+  "version": "0.8.0",
+  "description": "Obisoft React Native design system with Liquid Glass, adaptive themes and reusable primitives.",
+  "license": "UNLICENSED",
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "react-native": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "react-native",
+    "design-system",
+    "obisoft",
+    "ui"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/obisoft/obi-projects.git",
+    "directory": "obi-ventas-mobile/packages/obisoft-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/obisoft/obi-projects/issues"
+  },
+  "homepage": "https://github.com/obisoft/obi-projects/tree/main/obi-ventas-mobile/packages/obisoft-ui#readme",
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.80.0",
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-linear-gradient": ">=2.8.0",
+    "@sbaiahmed1/react-native-blur": ">=6.0.0",
+    "lucide-react-native": ">=0.47.0",
+    "react-native-gesture-handler": ">=3.0.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-svg": ">=15.0.0",
+    "@react-native-community/datetimepicker": ">=8.0.0"
+  }
+}

package/src/components/AppHeader.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+import { GlassSurface } from '../glass/GlassSurface';
+import { IconButton } from './IconButton';
+import type { IconName } from './Icon';
+
+export type AppHeaderProps = {
+  title: string;
+  subtitle?: string;
+  leftIcon?: IconName;
+  onLeftPress?: () => void;
+  leftAccessibilityLabel?: string;
+  right?: React.ReactNode;
+  safeArea?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function AppHeader({
+  title,
+  subtitle,
+  leftIcon,
+  onLeftPress,
+  leftAccessibilityLabel,
+  right,
+  safeArea = true,
+  style,
+}: AppHeaderProps) {
+  const theme = useObiTheme();
+  const insets = useSafeAreaInsets();
+  return (
+    <GlassSurface
+      variant="chrome"
+      style={[
+        {
+          minHeight: theme.navigation.headerMinHeight,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: theme.spacing.md,
+          paddingHorizontal: theme.spacing.lg,
+          paddingTop: (safeArea ? insets.top : 0) + theme.spacing.sm,
+          paddingBottom: theme.spacing.sm,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.glass.borderSoft,
+        },
+        style,
+      ]}
+    >
+      {leftIcon && onLeftPress ? (
+        <IconButton
+          icon={leftIcon}
+          onPress={onLeftPress}
+          accessibilityLabel={leftAccessibilityLabel ?? (leftIcon === 'arrow-left' ? 'Volver' : 'Abrir menú')}
+          variant="ghost"
+          size="md"
+        />
+      ) : null}
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <ObiText variant="subtitle" weight="900" numberOfLines={1}>{title}</ObiText>
+        {subtitle ? <ObiText variant="caption" muted numberOfLines={1}>{subtitle}</ObiText> : null}
+      </View>
+      {right ? <View style={{ marginLeft: theme.spacing.xs }}>{right}</View> : null}
+    </GlassSurface>
+  );
+}

package/src/components/BottomSheet.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  subtitle?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  contentStyle?: StyleProp<ViewStyle>;
+  minHeight?: number;
+};
+
+const SLIDE_IN_FROM = 420;
+const OPEN_MS = 280;
+const CLOSE_MS = 200;
+
+export function BottomSheet({ visible, onClose, title, subtitle, children, footer, contentStyle, minHeight }: Props) {
+  const insets = useSafeAreaInsets();
+  const theme = useObiTheme();
+  const [mounted, setMounted] = useState(visible);
+  const backdrop = useRef(new Animated.Value(0)).current;
+  const slide = useRef(new Animated.Value(SLIDE_IN_FROM)).current;
+  const animRef = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    animRef.current?.stop();
+    if (visible) {
+      if (!mounted) {
+        backdrop.setValue(0);
+        slide.setValue(SLIDE_IN_FROM);
+        setMounted(true);
+        return;
+      }
+      backdrop.setValue(0);
+      slide.setValue(SLIDE_IN_FROM);
+      animRef.current = Animated.parallel([
+        Animated.timing(backdrop, { toValue: 1, duration: OPEN_MS, easing: Easing.out(Easing.cubic), useNativeDriver: true }),
+        Animated.timing(slide, { toValue: 0, duration: OPEN_MS, easing: Easing.out(Easing.cubic), useNativeDriver: true }),
+      ]);
+      animRef.current.start();
+      return;
+    }
+    if (!mounted) return;
+    animRef.current = Animated.parallel([
+      Animated.timing(backdrop, { toValue: 0, duration: CLOSE_MS, easing: Easing.in(Easing.cubic), useNativeDriver: true }),
+      Animated.timing(slide, { toValue: 48, duration: CLOSE_MS, easing: Easing.in(Easing.cubic), useNativeDriver: true }),
+    ]);
+    animRef.current.start(({ finished }) => { if (finished) setMounted(false); });
+  }, [visible, mounted, backdrop, slide]);
+
+  if (!mounted) return null;
+
+  return (
+    <Modal visible transparent animationType="none" onRequestClose={onClose} statusBarTranslucent>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+          <View style={{ flex: 1 }}>
+            <Pressable style={{ flex: 1 }} onPress={onClose} accessibilityLabel="Cerrar">
+              <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { backgroundColor: theme.glass.backdropStrong, opacity: backdrop }]} />
+            </Pressable>
+            <Animated.View style={{ transform: [{ translateY: slide }] }}>
+              <View style={{
+                backgroundColor: theme.glass.panel,
+                borderTopLeftRadius: theme.radius.xl,
+                borderTopRightRadius: theme.radius.xl,
+                paddingTop: theme.spacing.sm,
+                paddingHorizontal: theme.spacing.lg,
+                paddingBottom: theme.spacing.lg + insets.bottom,
+                maxHeight: '88%',
+                overflow: 'hidden',
+                ...(minHeight != null ? { minHeight } : {}),
+              }}>
+                <View style={{ alignSelf: 'center', width: 36, height: 4, borderRadius: 2, backgroundColor: theme.glass.border, marginBottom: theme.spacing.md }} />
+                {title ? <ObiText variant="caption" weight="700" muted style={{ letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: theme.spacing.md }}>{title}</ObiText> : null}
+                {subtitle ? <View style={{ marginBottom: theme.spacing.md, gap: 2 }}>{subtitle}</View> : null}
+                <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  showsVerticalScrollIndicator={false}
+                  bounces={false}
+                  contentContainerStyle={[{ gap: theme.spacing.md, paddingBottom: theme.spacing.sm }, contentStyle]}
+                >
+                  {children}
+                </ScrollView>
+                {footer ? <View style={{ gap: theme.spacing.sm, paddingTop: theme.spacing.md, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: theme.glass.borderSoft }}>{footer}</View> : null}
+              </View>
+            </Animated.View>
+          </View>
+        </KeyboardAvoidingView>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { ObiText } from '../typography/ObiText';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'outline' | 'glass';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+export type ButtonProps = {
+  title?: string;
+  children?: React.ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  testID?: string;
+};
+
+export function Button({
+  title,
+  children,
+  onPress,
+  disabled,
+  loading,
+  variant = 'primary',
+  size = 'md',
+  style,
+  contentStyle,
+  textStyle,
+  left,
+  right,
+  testID,
+}: ButtonProps) {
+  const theme = useObiTheme();
+  const inert = Boolean(disabled || loading);
+
+  const backgroundColor = variant === 'primary'
+    ? theme.colors.primary
+    : variant === 'secondary'
+      ? theme.colors.secondary
+      : variant === 'danger'
+        ? theme.colors.danger
+        : variant === 'success'
+          ? theme.colors.success
+          : variant === 'glass'
+            ? theme.glass.control
+            : 'transparent';
+  const borderColor = variant === 'outline'
+    ? theme.colors.borderStrong
+    : variant === 'ghost' || variant === 'glass'
+      ? theme.glass.border
+      : 'transparent';
+  const foreground = variant === 'ghost' || variant === 'outline' || variant === 'glass'
+    ? theme.colors.primary
+    : theme.colors.onPrimary;
+  const minHeight = size === 'sm' ? 40 : size === 'lg' ? 54 : 48;
+  const padX = size === 'sm' ? theme.spacing.md : size === 'lg' ? theme.spacing.xl : theme.spacing.lg;
+
+  return (
+    <View style={style}>
+      <Pressable
+        testID={testID}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: inert, busy: Boolean(loading) }}
+        disabled={inert}
+        onPress={onPress}
+        hitSlop={8}
+        style={({ pressed }) => [
+          {
+            minHeight,
+            paddingHorizontal: padX,
+            borderRadius: theme.radius.md,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            gap: theme.spacing.sm,
+            backgroundColor,
+            borderWidth: variant === 'ghost' || variant === 'outline' || variant === 'glass' ? 1 : 0,
+            borderColor,
+            opacity: inert ? 0.45 : pressed ? 0.78 : 1,
+            ...(variant === 'primary' ? shadow.sm : variant === 'secondary' || variant === 'danger' || variant === 'success' ? shadow.xs : {}),
+          },
+          style ? { width: '100%', alignSelf: 'stretch' } : null,
+          contentStyle,
+        ]}
+      >
+        {loading ? (
+          <ActivityIndicator color={foreground} />
+        ) : (
+          <>
+            {left}
+            {typeof children === 'string' || typeof children === 'number' || title ? (
+              <ObiText weight="800" style={[{ color: foreground }, textStyle]}>
+                {title ?? children}
+              </ObiText>
+            ) : children}
+            {right}
+          </>
+        )}
+      </Pressable>
+    </View>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+
+type CardVariant = 'default' | 'glass' | 'flat' | 'outlined' | 'elevated';
+
+export function Card({
+  children,
+  style,
+  variant = 'glass',
+  padding,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  variant?: CardVariant;
+  padding?: number;
+}) {
+  const theme = useObiTheme();
+  const isGlass = variant === 'glass' || variant === 'default';
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: isGlass
+            ? theme.glass.surface
+            : variant === 'flat'
+              ? theme.colors.surfaceMuted
+              : theme.colors.surface,
+          borderRadius: theme.radius.lg,
+          padding: padding ?? theme.spacing.lg,
+          borderWidth: 1,
+          borderColor: isGlass
+            ? theme.glass.border
+            : variant === 'outlined'
+              ? theme.colors.borderStrong
+              : theme.colors.separator,
+          ...(variant === 'elevated' ? shadow.md : isGlass ? shadow.glass : {}),
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}

package/src/components/CenteredState.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ActivityIndicator, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+
+export type CenteredStateProps = {
+  title?: string;
+  message?: string;
+  loading?: boolean;
+  action?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function CenteredState({ title, message, loading, action, children, style }: CenteredStateProps) {
+  const theme = useObiTheme();
+  return (
+    <View style={[
+      {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing.xxl,
+        gap: theme.spacing.md,
+      },
+      style,
+    ]}>
+      {loading ? <ActivityIndicator size="large" color={theme.colors.primary} /> : null}
+      {title ? <ObiText variant="subtitle" weight="900" style={{ textAlign: 'center' }}>{title}</ObiText> : null}
+      {message ? <ObiText muted style={{ textAlign: 'center', maxWidth: 460 }}>{message}</ObiText> : null}
+      {children}
+      {action}
+    </View>
+  );
+}

package/src/components/Chip.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { ObiText } from '../typography/ObiText';
+
+export function Chip({
+  label,
+  selected,
+  onPress,
+  style,
+}: {
+  label: string;
+  selected?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useObiTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: Boolean(selected) }}
+      onPress={onPress}
+      style={({ pressed }) => [
+        {
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.sm,
+          borderRadius: theme.radius.pill,
+          backgroundColor: selected ? theme.colors.primary : theme.glass.surface,
+          borderWidth: 1,
+          borderColor: selected ? theme.colors.primary : theme.glass.border,
+          opacity: pressed ? 0.76 : 1,
+          ...shadow.glassSm,
+        },
+        style,
+      ]}
+    >
+      <ObiText
+        variant="caption"
+        weight="700"
+        style={selected ? { color: theme.colors.onPrimary } : undefined}
+      >
+        {label}
+      </ObiText>
+    </Pressable>
+  );
+}

package/src/components/ChoiceField.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+import { BottomSheet } from './BottomSheet';
+import { Button } from './Button';
+import { Card } from './Card';
+
+export type ChoiceOption = { value: number | string; label: string };
+
+export function ChoiceField({ label, value, options, placeholder = 'Seleccionar', onChange }: {
+  label: string;
+  value?: number | string | null;
+  options: ChoiceOption[];
+  placeholder?: string;
+  onChange: (value: number | string) => void;
+}) {
+  const theme = useObiTheme();
+  const [open, setOpen] = useState(false);
+  const selected = options.find(option => String(option.value) === String(value));
+  return (
+    <>
+      <View style={{ gap: theme.spacing.xs }}>
+        <ObiText variant="caption" muted>{label}</ObiText>
+        <Button title={selected?.label || placeholder} variant="secondary" onPress={() => setOpen(true)} />
+      </View>
+      <BottomSheet visible={open} onClose={() => setOpen(false)} title={label}>
+        <View style={{ gap: theme.spacing.sm }}>
+          {options.map(option => {
+            const active = String(option.value) === String(value);
+            return (
+              <Pressable key={String(option.value)} onPress={() => { onChange(option.value); setOpen(false); }}>
+                <Card style={{ borderColor: active ? theme.colors.primary : theme.colors.border }}>
+                  <ObiText weight="800">{option.label}</ObiText>
+                </Card>
+              </Pressable>
+            );
+          })}
+          {!options.length ? <ObiText muted>No hay opciones disponibles.</ObiText> : null}
+        </View>
+      </BottomSheet>
+    </>
+  );
+}