@obisoft/ui 0.8.0

package/src/components/ListWorkspace.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Screen } from './Screen';
+import { SearchArea } from './SearchArea';
+import { QueryState, type QueryStateProps } from './QueryState';
+
+export type ListWorkspaceProps = {
+  filter?: React.ReactNode;
+  loading?: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+  errorTitle?: string;
+  errorMessage?: string;
+  /** When true (and not loading/error), shows EmptyState instead of children. */
+  empty?: boolean;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyActionLabel?: string;
+  onEmptyAction?: () => void;
+  loadingMessage?: string;
+  /** Optional footer below content (above FAB), for non-FlashList footers. */
+  footer?: React.ReactNode;
+  fab?: React.ReactNode;
+  children?: React.ReactNode;
+  contentStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * High-level chrome for master/list screens:
+ * Screen → optional SearchArea/filter → QueryState → list children → footer → FAB.
+ */
+export function ListWorkspace({
+  filter,
+  loading,
+  error,
+  onRetry,
+  errorTitle,
+  errorMessage,
+  empty,
+  emptyTitle,
+  emptyDescription,
+  emptyActionLabel,
+  onEmptyAction,
+  loadingMessage,
+  footer,
+  fab,
+  children,
+  contentStyle,
+  style,
+}: ListWorkspaceProps) {
+  const queryProps: QueryStateProps = {
+    loading,
+    error,
+    onRetry,
+    errorTitle,
+    errorMessage,
+    empty,
+    emptyTitle,
+    emptyDescription,
+    emptyActionLabel,
+    onEmptyAction,
+    loadingMessage,
+    style: contentStyle,
+    children,
+  };
+
+  return (
+    <Screen style={style}>
+      {filter ? <SearchArea>{filter}</SearchArea> : null}
+      <QueryState {...queryProps} />
+      {footer ? <View>{footer}</View> : null}
+      {fab}
+    </Screen>
+  );
+}

package/src/components/LoadingState.tsx

@@ -0,0 +1,37 @@
+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 LoadingStateProps = {
+  message?: string;
+  compact?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function LoadingState({ message, compact = false, style }: LoadingStateProps) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={[
+        compact
+          ? {
+              padding: theme.spacing.md,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }
+          : {
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: theme.spacing.xxl,
+              gap: theme.spacing.md,
+            },
+        style,
+      ]}
+    >
+      <ActivityIndicator size={compact ? 'small' : 'large'} color={theme.colors.primary} />
+      {message ? <ObiText muted style={{ textAlign: 'center' }}>{message}</ObiText> : null}
+    </View>
+  );
+}

package/src/components/MetricCard.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { ObiText } from '../typography/ObiText';
+
+export type MetricFormat = 'currency' | 'number' | 'text';
+
+export type MetricCardProps = {
+  label: string;
+  value: number | string;
+  trend?: number | null;
+  format?: MetricFormat;
+  locale?: string;
+  currency?: string;
+  formatter?: (value: number | string) => string;
+  trendCaption?: string;
+};
+
+function defaultFormat(value: number | string, format: MetricFormat, locale: string, currency: string) {
+  if (format === 'text' || typeof value === 'string') return String(value);
+  if (format === 'currency') {
+    return new Intl.NumberFormat(locale, { style: 'currency', currency, minimumFractionDigits: 2 }).format(value);
+  }
+  return new Intl.NumberFormat(locale).format(value);
+}
+
+export function MetricCard({
+  label,
+  value,
+  trend,
+  format = 'currency',
+  locale = 'es-DO',
+  currency = 'DOP',
+  formatter,
+  trendCaption = 'vs. período anterior',
+}: MetricCardProps) {
+  const theme = useObiTheme();
+  const trendText = trend == null ? null : `${trend >= 0 ? '+' : ''}${trend.toFixed(1)}%`;
+  const display = formatter ? formatter(value) : defaultFormat(value, format, locale, currency);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        minWidth: 0,
+        backgroundColor: theme.glass.surface,
+        borderRadius: theme.radius.lg,
+        padding: theme.spacing.md,
+        gap: theme.spacing.xs,
+        borderWidth: 1,
+        borderColor: theme.glass.border,
+        ...shadow.glass,
+      }}
+    >
+      <View style={{ backgroundColor: 'transparent', gap: 2 }}>
+        <ObiText variant="caption" muted numberOfLines={1}>{label.toUpperCase()}</ObiText>
+        <ObiText variant="subtitle" weight="900" numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.7}>
+          {display}
+        </ObiText>
+        {trendText ? (
+          <ObiText
+            variant="caption"
+            weight="800"
+            numberOfLines={1}
+            style={{ color: trend! >= 0 ? theme.colors.success : theme.colors.danger, marginTop: theme.spacing.xs }}
+          >
+            {trendText} {trendCaption}
+          </ObiText>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/components/MetricsGrid.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export function MetricsGrid({ children, columns = 2 }: { children: React.ReactNode; columns?: number }) {
+  const theme = useObiTheme();
+  const items = React.Children.toArray(children).filter(Boolean);
+  const rows: React.ReactNode[][] = [];
+  for (let i = 0; i < items.length; i += columns) rows.push(items.slice(i, i + columns));
+
+  return (
+    <View style={{ gap: theme.spacing.md }}>
+      {rows.map((row, index) => (
+        <View key={index} style={{ flexDirection: 'row', gap: theme.spacing.md }}>
+          {row}
+          {row.length < columns
+            ? Array.from({ length: columns - row.length }).map((_, spacerIndex) => (
+                <View key={`spacer-${spacerIndex}`} style={{ flex: 1, minWidth: 0 }} />
+              ))
+            : null}
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/MiniBarChart.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+
+export type MiniBarChartItem = { label: string; value: number };
+
+export function MiniBarChart({
+  items,
+  formatValue,
+  emptyText = 'No hay datos para el período.',
+}: {
+  items: MiniBarChartItem[];
+  formatValue?: (value: number) => string;
+  emptyText?: string;
+}) {
+  const theme = useObiTheme();
+  const max = Math.max(1, ...items.map(item => Math.abs(item.value)));
+  const format = formatValue ?? ((value: number) => new Intl.NumberFormat('es-DO').format(value));
+  if (!items.length) return <ObiText muted>{emptyText}</ObiText>;
+
+  return (
+    <View style={{ gap: theme.spacing.sm }}>
+      {items.map((item, index) => (
+        <View key={`${item.label}-${index}`} style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.sm }}>
+          <ObiText variant="caption" muted style={{ width: 72 }}>{item.label}</ObiText>
+          <View style={{ height: 10, flex: 1, backgroundColor: theme.colors.borderStrong, borderRadius: theme.radius.pill, overflow: 'hidden' }}>
+            <View
+              style={{
+                width: `${Math.max(2, Math.min(100, Math.abs(item.value) / max * 100))}%`,
+                height: '100%',
+                backgroundColor: theme.colors.primary,
+                borderRadius: theme.radius.pill,
+              }}
+            />
+          </View>
+          <ObiText variant="caption" weight="800" style={{ minWidth: 64, textAlign: 'right' }}>{format(item.value)}</ObiText>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/NavigationDrawer.tsx

@@ -0,0 +1,243 @@
+import React, { useState } from 'react';
+import { Pressable, ScrollView, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { Icon, type IconName } from './Icon';
+
+export type NavigationDrawerLeaf = {
+  type: 'item';
+  key: string;
+  label: string;
+  icon: IconName;
+  onPress: () => void;
+};
+
+export type NavigationDrawerGroup = {
+  type: 'group';
+  key: string;
+  label: string;
+  icon: IconName;
+  children: Array<{ key: string; label: string; icon?: IconName; onPress: () => void }>;
+};
+
+export type NavigationDrawerDivider = { type: 'divider'; key: string };
+export type NavigationDrawerEntry = NavigationDrawerLeaf | NavigationDrawerGroup | NavigationDrawerDivider;
+
+export type NavigationDrawerProps = {
+  profile: {
+    name: string;
+    subtitle?: string;
+    initial?: string;
+  };
+  entries: NavigationDrawerEntry[];
+  footerAction?: {
+    label: string;
+    icon: IconName;
+    onPress: () => void;
+    tone?: 'default' | 'danger';
+  };
+  style?: StyleProp<ViewStyle>;
+};
+
+export function NavigationDrawer({ profile, entries, footerAction, style }: NavigationDrawerProps) {
+  const theme = useObiTheme();
+  const insets = useSafeAreaInsets();
+  const [openKeys, setOpenKeys] = useState<Record<string, boolean>>({});
+  const pressedColor = theme.colors.surfacePressed;
+
+  const toggle = (key: string) => {
+    setOpenKeys(current => ({ ...current, [key]: !current[key] }));
+  };
+
+  const itemIcon = (icon: IconName, color = theme.colors.textMuted, size = 18) => (
+    <View style={{ width: 24, alignItems: 'center', justifyContent: 'center' }}>
+      <Icon name={icon} size={size} color={color} />
+    </View>
+  );
+
+  return (
+    <View style={[{ flex: 1, backgroundColor: 'transparent' }, style]}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: theme.spacing.md,
+          paddingHorizontal: theme.spacing.lg,
+          paddingTop: insets.top + theme.spacing.lg,
+          paddingBottom: theme.spacing.lg,
+          backgroundColor: theme.glass.chrome,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.glass.borderSoft,
+          ...shadow.glassSm,
+        }}
+      >
+        <View
+          style={{
+            width: 44,
+            height: 44,
+            borderRadius: 22,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.glass.primaryTintStrong,
+            borderWidth: 1,
+            borderColor: theme.glass.border,
+          }}
+        >
+          <Text style={{ fontSize: 18, fontWeight: '900', color: theme.colors.primary }}>
+            {(profile.initial || profile.name || 'U').charAt(0).toUpperCase()}
+          </Text>
+        </View>
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <Text style={{ fontSize: theme.type.body, fontWeight: '800', color: theme.colors.text }} numberOfLines={1}>
+            {profile.name}
+          </Text>
+          {profile.subtitle ? (
+            <Text style={{ fontSize: 12, color: theme.colors.textMuted, marginTop: 2 }} numberOfLines={1}>
+              {profile.subtitle}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingVertical: theme.spacing.sm }}
+        showsVerticalScrollIndicator={false}
+      >
+        {entries.map(entry => {
+          if (entry.type === 'divider') {
+            return (
+              <View
+                key={entry.key}
+                style={{
+                  height: 1,
+                  backgroundColor: theme.colors.separator,
+                  marginHorizontal: theme.spacing.lg,
+                  marginVertical: theme.spacing.sm,
+                }}
+              />
+            );
+          }
+
+          if (entry.type === 'item') {
+            return (
+              <Pressable
+                key={entry.key}
+                accessibilityRole="button"
+                onPress={entry.onPress}
+                style={({ pressed }) => ({
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingHorizontal: theme.spacing.lg,
+                  paddingVertical: theme.spacing.sm + 2,
+                  minHeight: 44,
+                  gap: theme.spacing.sm,
+                  borderRadius: theme.radius.md,
+                  marginHorizontal: theme.spacing.xs,
+                  backgroundColor: pressed ? pressedColor : 'transparent',
+                })}
+              >
+                {itemIcon(entry.icon)}
+                <Text style={{ fontSize: theme.type.body, color: theme.colors.text, flex: 1, fontWeight: '600' }}>
+                  {entry.label}
+                </Text>
+              </Pressable>
+            );
+          }
+
+          const open = Boolean(openKeys[entry.key]);
+          return (
+            <View key={entry.key}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityState={{ expanded: open }}
+                onPress={() => toggle(entry.key)}
+                style={({ pressed }) => ({
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingHorizontal: theme.spacing.lg,
+                  paddingVertical: theme.spacing.sm + 2,
+                  minHeight: 44,
+                  gap: theme.spacing.sm,
+                  borderRadius: theme.radius.md,
+                  marginHorizontal: theme.spacing.xs,
+                  backgroundColor: pressed ? pressedColor : 'transparent',
+                })}
+              >
+                {itemIcon(entry.icon)}
+                <Text style={{ flex: 1, fontSize: 15, fontWeight: '800', color: theme.colors.text }}>
+                  {entry.label}
+                </Text>
+                <Icon name={open ? 'chevron-down' : 'chevron-right'} size={14} color={theme.colors.textMuted} />
+              </Pressable>
+
+              {open ? entry.children.map(child => (
+                <Pressable
+                  key={child.key}
+                  accessibilityRole="button"
+                  onPress={child.onPress}
+                  style={({ pressed }) => ({
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingLeft: theme.spacing.xl + theme.spacing.md,
+                    paddingRight: theme.spacing.lg,
+                    paddingVertical: theme.spacing.sm,
+                    minHeight: 40,
+                    gap: theme.spacing.sm,
+                    borderRadius: theme.radius.md,
+                    marginHorizontal: theme.spacing.xs,
+                    backgroundColor: pressed ? pressedColor : 'transparent',
+                  })}
+                >
+                  {itemIcon(child.icon ?? 'dot', theme.colors.textMuted, 16)}
+                  <Text style={{ flex: 1, fontSize: 14, fontWeight: '600', color: theme.colors.text }}>{child.label}</Text>
+                </Pressable>
+              )) : null}
+            </View>
+          );
+        })}
+      </ScrollView>
+
+      {footerAction ? (
+        <View
+          style={{
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.separator,
+            padding: theme.spacing.md,
+            paddingBottom: theme.spacing.md + insets.bottom,
+          }}
+        >
+          <Pressable
+            accessibilityRole="button"
+            onPress={footerAction.onPress}
+            style={({ pressed }) => ({
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: theme.spacing.md,
+              paddingHorizontal: theme.spacing.lg,
+              paddingVertical: theme.spacing.md,
+              minHeight: 48,
+              borderRadius: theme.radius.md,
+              backgroundColor: pressed ? pressedColor : 'transparent',
+            })}
+          >
+            {itemIcon(
+              footerAction.icon,
+              footerAction.tone === 'danger' ? theme.colors.danger : theme.colors.textMuted,
+            )}
+            <Text
+              style={{
+                fontSize: theme.type.body,
+                color: footerAction.tone === 'danger' ? theme.colors.danger : theme.colors.text,
+                fontWeight: '600',
+              }}
+            >
+              {footerAction.label}
+            </Text>
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/QueryState.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { LoadingState } from './LoadingState';
+import { ErrorState } from './ErrorState';
+import { EmptyState } from './EmptyState';
+import type { IconName } from './Icon';
+
+export type QueryStateProps = {
+  loading?: boolean;
+  error?: unknown;
+  errorTitle?: string;
+  errorMessage?: string;
+  onRetry?: () => void;
+  empty?: boolean;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyIcon?: IconName;
+  emptyActionLabel?: string;
+  onEmptyAction?: () => void;
+  loadingMessage?: string;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+function resolveErrorMessage(error: unknown, fallback?: string): string | undefined {
+  if (fallback) return fallback;
+  if (!error) return undefined;
+  const custom = (error as { customMessage?: string })?.customMessage;
+  if (custom) return custom;
+  if (error instanceof Error && error.message) return error.message;
+  return 'No se pudo cargar la información.';
+}
+
+/**
+ * Orchestrates loading / error / empty / content for list and detail screens.
+ * Keeps FlashList / React Query outside the design system.
+ */
+export function QueryState({
+  loading = false,
+  error,
+  errorTitle,
+  errorMessage,
+  onRetry,
+  empty = false,
+  emptyTitle = 'Sin resultados',
+  emptyDescription,
+  emptyIcon,
+  emptyActionLabel,
+  onEmptyAction,
+  loadingMessage,
+  children,
+  style,
+}: QueryStateProps) {
+  if (loading) {
+    return <LoadingState message={loadingMessage} style={style} />;
+  }
+
+  if (error) {
+    return (
+      <ErrorState
+        title={errorTitle}
+        message={resolveErrorMessage(error, errorMessage)}
+        onRetry={onRetry}
+        style={style}
+      />
+    );
+  }
+
+  if (empty) {
+    return (
+      <EmptyState
+        title={emptyTitle}
+        description={emptyDescription}
+        icon={emptyIcon}
+        actionLabel={emptyActionLabel}
+        onAction={onEmptyAction}
+      />
+    );
+  }
+
+  return <View style={[{ flex: 1 }, style]}>{children}</View>;
+}

package/src/components/QueryWorkspace.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Screen } from './Screen';
+import { SearchArea } from './SearchArea';
+import { QueryState, type QueryStateProps } from './QueryState';
+
+export type QueryWorkspaceProps = {
+  filter?: React.ReactNode;
+  loading?: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+  errorTitle?: string;
+  errorMessage?: string;
+  /** When true (and not loading/error), shows EmptyState instead of children. */
+  empty?: boolean;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyActionLabel?: string;
+  onEmptyAction?: () => void;
+  loadingMessage?: string;
+  /** Optional footer below content. */
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  contentStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * High-level chrome for scroll/metrics query screens (reports, statements):
+ * Screen → optional SearchArea/filter → QueryState → children → footer.
+ * Prefer ListWorkspace for FlashList master screens.
+ */
+export function QueryWorkspace({
+  filter,
+  loading,
+  error,
+  onRetry,
+  errorTitle,
+  errorMessage,
+  empty,
+  emptyTitle,
+  emptyDescription,
+  emptyActionLabel,
+  onEmptyAction,
+  loadingMessage,
+  footer,
+  children,
+  contentStyle,
+  style,
+}: QueryWorkspaceProps) {
+  const queryProps: QueryStateProps = {
+    loading,
+    error,
+    onRetry,
+    errorTitle,
+    errorMessage,
+    empty,
+    emptyTitle,
+    emptyDescription,
+    emptyActionLabel,
+    onEmptyAction,
+    loadingMessage,
+    style: contentStyle,
+    children,
+  };
+
+  return (
+    <Screen style={style}>
+      {filter ? <SearchArea>{filter}</SearchArea> : null}
+      <QueryState {...queryProps} />
+      {footer ? <View>{footer}</View> : null}
+    </Screen>
+  );
+}