@obisoft/ui 0.8.0

package/src/components/Icon.tsx

@@ -0,0 +1,259 @@
+import React from 'react';
+import {
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpRight,
+  Ban,
+  Banknote,
+  Bell,
+  Bluetooth,
+  Bookmark,
+  BookText,
+  Calculator,
+  CalendarDays,
+  Car,
+  ChartBar,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  CircleCheckBig,
+  ClipboardList,
+  Clock,
+  Contact,
+  CreditCard,
+  Dot,
+  Dumbbell,
+  Eye,
+  Factory,
+  Files,
+  FilePenLine,
+  FileText,
+  FolderKanban,
+  Gift,
+  HandCoins,
+  House,
+  KeyRound,
+  Landmark,
+  LogOut,
+  Mail,
+  Map,
+  MapPin,
+  Menu,
+  Minus,
+  MessageCircle,
+  Moon,
+  Package,
+  Pencil,
+  Pill,
+  Pin,
+  Plus,
+  Power,
+  Printer,
+  Receipt,
+  RefreshCw,
+  Scale,
+  Search,
+  ScanLine,
+  Send,
+  Settings,
+  Share2,
+  Shield,
+  Shirt,
+  ShoppingCart,
+  Sparkle,
+  Sparkles,
+  Star,
+  Sun,
+  Tag,
+  TrendingUp,
+  Trash2,
+  Truck,
+  UtensilsCrossed,
+  User,
+  Users,
+  Undo2,
+  Upload,
+  Wallet,
+  Wrench,
+  X,
+  Zap,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+export type IconName =
+  | 'document'
+  | 'share'
+  | 'print'
+  | 'mail'
+  | 'bluetooth'
+  | 'collect'
+  | 'invoice'
+  | 'delivery'
+  | 'check'
+  | 'close'
+  | 'send'
+  | 'power'
+  | 'home'
+  | 'menu'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'chevron-down'
+  | 'chevron-right'
+  | 'chevron-up'
+  | 'dot'
+  | 'sun'
+  | 'moon'
+  | 'bell'
+  | 'log-out'
+  | 'settings'
+  | 'search'
+  | 'users'
+  | 'file-text'
+  | 'shield'
+  | 'trending-up'
+  | 'banknote'
+  | 'bar-chart'
+  | 'wallet'
+  | 'files'
+  | 'undo'
+  | 'arrow-up-right'
+  | 'upload'
+  | 'clipboard-list'
+  | 'truck'
+  | 'package'
+  | 'check-circle'
+  | 'refresh'
+  | 'shopping-cart'
+  | 'tag'
+  | 'bookmark'
+  | 'contact'
+  | 'map-pin'
+  | 'scale'
+  | 'calendar'
+  | 'factory'
+  | 'history'
+  | 'credit-card'
+  | 'book'
+  | 'calculator'
+  | 'map'
+  | 'star'
+  | 'message-circle'
+  | 'user'
+  | 'key'
+  | 'file-edit'
+  | 'pencil'
+  | 'ban'
+  | 'landmark'
+  | 'plus'
+  | 'minus'
+  | 'trash-2'
+  | 'scan-line'
+  | 'eye'
+  | 'folder-kanban'
+  | 'utensils'
+  | 'zap'
+  | 'shirt'
+  | 'wrench'
+  | 'pill'
+  | 'dumbbell'
+  | 'car'
+  | 'sparkles'
+  | 'sparkle'
+  | 'gift'
+  | 'pin';
+
+const ICONS: Record<IconName, LucideIcon> = {
+  document: FileText,
+  share: Share2,
+  print: Printer,
+  mail: Mail,
+  bluetooth: Bluetooth,
+  collect: HandCoins,
+  invoice: Receipt,
+  delivery: Truck,
+  check: Check,
+  close: X,
+  send: Send,
+  power: Power,
+  home: House,
+  menu: Menu,
+  'arrow-left': ArrowLeft,
+  'arrow-right': ArrowRight,
+  'chevron-down': ChevronDown,
+  'chevron-right': ChevronRight,
+  'chevron-up': ChevronUp,
+  dot: Dot,
+  sun: Sun,
+  moon: Moon,
+  bell: Bell,
+  'log-out': LogOut,
+  settings: Settings,
+  search: Search,
+  users: Users,
+  'file-text': FileText,
+  shield: Shield,
+  'trending-up': TrendingUp,
+  banknote: Banknote,
+  'bar-chart': ChartBar,
+  wallet: Wallet,
+  files: Files,
+  undo: Undo2,
+  'arrow-up-right': ArrowUpRight,
+  upload: Upload,
+  'clipboard-list': ClipboardList,
+  truck: Truck,
+  package: Package,
+  'check-circle': CircleCheckBig,
+  refresh: RefreshCw,
+  'shopping-cart': ShoppingCart,
+  tag: Tag,
+  bookmark: Bookmark,
+  contact: Contact,
+  'map-pin': MapPin,
+  scale: Scale,
+  calendar: CalendarDays,
+  factory: Factory,
+  history: Clock,
+  'credit-card': CreditCard,
+  book: BookText,
+  calculator: Calculator,
+  map: Map,
+  star: Star,
+  'message-circle': MessageCircle,
+  user: User,
+  key: KeyRound,
+  'file-edit': FilePenLine,
+  pencil: Pencil,
+  ban: Ban,
+  landmark: Landmark,
+  plus: Plus,
+  minus: Minus,
+  'trash-2': Trash2,
+  'scan-line': ScanLine,
+  eye: Eye,
+  'folder-kanban': FolderKanban,
+  utensils: UtensilsCrossed,
+  zap: Zap,
+  shirt: Shirt,
+  wrench: Wrench,
+  pill: Pill,
+  dumbbell: Dumbbell,
+  car: Car,
+  sparkles: Sparkles,
+  sparkle: Sparkle,
+  gift: Gift,
+  pin: Pin,
+};
+
+export type IconProps = {
+  name: IconName;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+};
+
+export function Icon({ name, size = 22, color = '#111827', strokeWidth = 2 }: IconProps) {
+  const Cmp = ICONS[name];
+  return <Cmp size={size} color={color} strokeWidth={strokeWidth} />;
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { Icon, type IconName } from './Icon';
+
+type IconButtonVariant = 'ghost' | 'glass' | 'solid' | 'danger';
+
+type Props = {
+  icon: IconName;
+  onPress?: () => void;
+  accessibilityLabel: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: IconButtonVariant;
+  disabled?: boolean;
+  selected?: boolean;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function IconButton({
+  icon,
+  onPress,
+  accessibilityLabel,
+  size = 'md',
+  variant = 'glass',
+  disabled,
+  selected,
+  color,
+  style,
+}: Props) {
+  const theme = useObiTheme();
+  const box = size === 'sm' ? 38 : size === 'lg' ? 50 : 44;
+  const iconSize = size === 'sm' ? 18 : size === 'lg' ? 24 : 20;
+  const backgroundColor = selected
+    ? theme.glass.primaryTintStrong
+    : variant === 'solid'
+      ? theme.colors.primary
+      : variant === 'danger'
+        ? theme.glass.dangerTint
+        : variant === 'glass'
+          ? theme.glass.control
+          : 'transparent';
+  const foreground = color ?? (variant === 'solid' ? theme.colors.onPrimary : variant === 'danger' ? theme.colors.danger : theme.colors.textStrong);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled: Boolean(disabled), selected: Boolean(selected) }}
+      disabled={disabled}
+      onPress={onPress}
+      hitSlop={8}
+      style={({ pressed }) => [
+        {
+          width: box,
+          height: box,
+          borderRadius: theme.radius.md,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor,
+          borderWidth: variant === 'glass' || selected ? 1 : 0,
+          borderColor: selected ? theme.colors.primary : theme.glass.border,
+          opacity: disabled ? 0.4 : pressed ? 0.72 : 1,
+          ...(variant === 'glass' ? shadow.glassSm : {}),
+        },
+        style,
+      ]}
+    >
+      <Icon name={icon} size={iconSize} color={foreground} />
+    </Pressable>
+  );
+}

package/src/components/ListFilterBar.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import { BottomSheet } from './BottomSheet';
+import { Icon } from './Icon';
+import { TextField } from './TextField';
+
+export type FilterOption = { value: string; label: string };
+
+export type ListFilterBarProps = {
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+  filterValue?: string;
+  onFilterChange?: (value: string) => void;
+  filterOptions?: FilterOption[];
+  filterTitle?: string;
+  extra?: React.ReactNode;
+};
+
+export function ListFilterBar({
+  search,
+  onSearchChange,
+  searchPlaceholder = 'Buscar…',
+  filterValue,
+  onFilterChange,
+  filterOptions,
+  filterTitle = 'Filtrar por estado',
+  extra,
+}: ListFilterBarProps) {
+  const theme = useObiTheme();
+  const [open, setOpen] = useState(false);
+  const hasSearch = onSearchChange != null;
+  const hasFilter = Boolean(filterOptions?.length && onFilterChange);
+  const isFilterActive = hasFilter && filterValue != null && filterValue !== filterOptions![0].value;
+
+  return (
+    <View style={{ gap: theme.spacing.sm }}>
+      <View style={{ flexDirection: 'row', gap: theme.spacing.sm, alignItems: 'center' }}>
+        {hasSearch ? (
+          <View style={{ flex: 1 }}>
+            <TextField
+              value={search}
+              onChangeText={onSearchChange}
+              placeholder={searchPlaceholder}
+              autoCapitalize="none"
+            />
+          </View>
+        ) : null}
+        {hasFilter ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={filterTitle}
+            accessibilityState={{ expanded: open, selected: isFilterActive }}
+            onPress={() => setOpen(true)}
+            hitSlop={8}
+            style={({ pressed }) => ({
+              width: 48,
+              height: 48,
+              borderRadius: theme.radius.md,
+              borderWidth: 1,
+              borderColor: isFilterActive ? theme.colors.primary : theme.glass.border,
+              backgroundColor: isFilterActive ? theme.glass.primaryTintStrong : theme.glass.surface,
+              alignItems: 'center',
+              justifyContent: 'center',
+              opacity: pressed ? 0.76 : 1,
+              ...shadow.glassSm,
+            })}
+          >
+            <View style={{ gap: 3, alignItems: 'flex-start' }}>
+              {[16, 11, 6].map(width => (
+                <View
+                  key={width}
+                  style={{
+                    width,
+                    height: 2,
+                    borderRadius: 1,
+                    backgroundColor: isFilterActive ? theme.colors.primary : theme.colors.textMuted,
+                  }}
+                />
+              ))}
+            </View>
+          </Pressable>
+        ) : null}
+      </View>
+      {extra}
+
+      {hasFilter ? (
+        <BottomSheet
+          visible={open}
+          onClose={() => setOpen(false)}
+          title={filterTitle}
+          minHeight={320}
+          contentStyle={{ gap: theme.spacing.xs, paddingTop: theme.spacing.sm, paddingBottom: theme.spacing.lg, flexGrow: 1 }}
+        >
+          {filterOptions!.map(option => {
+            const selected = option.value === filterValue;
+            return (
+              <Pressable
+                key={option.value}
+                onPress={() => {
+                  onFilterChange!(option.value);
+                  setOpen(false);
+                }}
+                style={({ pressed }) => ({
+                  minHeight: 56,
+                  paddingVertical: theme.spacing.lg,
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  borderBottomWidth: 1,
+                  borderBottomColor: theme.glass.separator,
+                  backgroundColor: pressed ? theme.colors.surfacePressed : 'transparent',
+                })}
+              >
+                <Text
+                  style={{
+                    fontSize: theme.type.body,
+                    color: selected ? theme.colors.primary : theme.colors.text,
+                    fontWeight: selected ? '800' : '600',
+                  }}
+                >
+                  {option.label}
+                </Text>
+                {selected ? <Icon name="check" size={16} color={theme.colors.primary} /> : null}
+              </Pressable>
+            );
+          })}
+        </BottomSheet>
+      ) : null}
+    </View>
+  );
+}

package/src/components/ListRow.tsx

@@ -0,0 +1,198 @@
+import React, { useCallback, useRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Animated, { type SharedValue, useAnimatedStyle } from 'react-native-reanimated';
+import Swipeable, { type SwipeableMethods } from 'react-native-gesture-handler/ReanimatedSwipeable';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { Icon, type IconName } from './Icon';
+import { StatusBadge, type StatusTone } from './StatusBadge';
+
+export type SwipeActionTone = 'primary' | 'danger' | 'success' | 'warning' | 'neutral';
+
+export type SwipeAction = {
+  key: string;
+  icon: IconName;
+  label: string;
+  tone?: SwipeActionTone;
+  onPress: () => void;
+};
+
+export type ListRowProps = {
+  title: string;
+  subtitle?: string;
+  captions?: (string | null | undefined | false)[];
+  amount?: string;
+  badgeLabel?: string;
+  badgeTone?: StatusTone;
+  onPress?: () => void;
+  footer?: React.ReactNode;
+  icon?: React.ReactNode;
+  swipeActions?: SwipeAction[];
+};
+
+const ACTION_WIDTH = 76;
+const MAX_SWIPE_ACTIONS = 4;
+
+let closeOpenSwipe: (() => void) | null = null;
+
+function claimSwipeOpen(close: () => void) {
+  if (closeOpenSwipe && closeOpenSwipe !== close) closeOpenSwipe();
+  closeOpenSwipe = close;
+}
+
+function releaseSwipeOpen(close: () => void) {
+  if (closeOpenSwipe === close) closeOpenSwipe = null;
+}
+
+function SwipeActionsPanel({
+  actions,
+  progress,
+  methods,
+}: {
+  actions: SwipeAction[];
+  progress: SharedValue<number>;
+  methods: SwipeableMethods;
+}) {
+  const theme = useObiTheme();
+  const hideUntilSwipe = useAnimatedStyle(() => ({ opacity: progress.value <= 0.001 ? 0 : 1 }));
+  const toneColor = (tone: SwipeActionTone) => {
+    switch (tone) {
+      case 'primary': return theme.colors.primary;
+      case 'danger': return theme.colors.danger;
+      case 'success': return theme.colors.success;
+      case 'warning': return theme.colors.warning;
+      default: return theme.colors.textMuted;
+    }
+  };
+
+  return (
+    <Animated.View
+      style={[
+        { flexDirection: 'row', alignItems: 'stretch', height: '100%', width: ACTION_WIDTH * actions.length },
+        hideUntilSwipe,
+      ]}
+    >
+      {actions.map(action => {
+        const tone = action.tone ?? 'neutral';
+        return (
+          <Pressable
+            key={action.key}
+            accessibilityRole="button"
+            accessibilityLabel={action.label}
+            onPress={() => {
+              methods.close();
+              action.onPress();
+            }}
+            style={({ pressed }) => ({
+              width: ACTION_WIDTH,
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 4,
+              paddingHorizontal: theme.spacing.xs,
+              backgroundColor: toneColor(tone),
+              opacity: pressed ? 0.85 : 1,
+            })}
+          >
+            <Icon name={action.icon} size={20} color="#FFFFFF" strokeWidth={2.25} />
+            <Text style={{ fontSize: 10, fontWeight: '700', color: '#FFFFFF', textAlign: 'center' }} numberOfLines={1}>
+              {action.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </Animated.View>
+  );
+}
+
+export function ListRow({
+  title,
+  subtitle,
+  captions,
+  amount,
+  badgeLabel,
+  badgeTone = 'neutral',
+  onPress,
+  footer,
+  icon,
+  swipeActions,
+}: ListRowProps) {
+  const theme = useObiTheme();
+  const visibleCaptions = (captions ?? []).filter(Boolean) as string[];
+  const actions = (swipeActions ?? []).slice(0, MAX_SWIPE_ACTIONS);
+  const swipeRef = useRef<SwipeableMethods>(null);
+  const closeSelf = useCallback(() => swipeRef.current?.close(), []);
+
+  const content = (
+    <>
+      {icon ? (
+        <View style={{ width: 38, height: 38, borderRadius: theme.radius.md, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.glass.primaryTint }}>
+          {icon}
+        </View>
+      ) : null}
+      <View style={{ flex: 1, gap: 3 }}>
+        <Text style={{ fontSize: theme.type.body, fontWeight: '700', color: theme.colors.text }} numberOfLines={1}>{title}</Text>
+        {subtitle ? <Text style={{ fontSize: 13, color: theme.colors.textMuted }} numberOfLines={1}>{subtitle}</Text> : null}
+        {visibleCaptions.length > 0 ? (
+          <View style={{ flexDirection: 'row', gap: theme.spacing.sm, flexWrap: 'wrap' }}>
+            {visibleCaptions.map((caption, index) => (
+              <Text key={`${caption}-${index}`} style={{ fontSize: 11, color: theme.colors.textMuted }}>{caption}</Text>
+            ))}
+          </View>
+        ) : null}
+      </View>
+      {amount || badgeLabel ? (
+        <View style={{ alignItems: 'flex-end', gap: theme.spacing.xs }}>
+          {amount ? <Text style={{ fontSize: theme.type.body, fontWeight: '800', color: theme.colors.text }}>{amount}</Text> : null}
+          {badgeLabel ? <StatusBadge label={badgeLabel} tone={badgeTone} /> : null}
+        </View>
+      ) : null}
+    </>
+  );
+
+  const itemStyle = ({ pressed }: { pressed: boolean }) => [
+    {
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      padding: theme.spacing.lg,
+      gap: theme.spacing.md,
+      backgroundColor: actions.length ? theme.colors.surface : pressed ? theme.colors.surfacePressed : 'transparent',
+      paddingBottom: footer && !actions.length ? theme.spacing.sm : theme.spacing.lg,
+    },
+  ];
+
+  const row = onPress ? (
+    <Pressable onPress={onPress} style={itemStyle}>{content}</Pressable>
+  ) : (
+    <View style={itemStyle({ pressed: false })}>{content}</View>
+  );
+
+  if (actions.length === 0) {
+    return (
+      <View style={{ borderBottomWidth: 1, borderBottomColor: theme.colors.separator, backgroundColor: theme.glass.surface }}>
+        {row}
+        {footer ? (
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: theme.spacing.sm, paddingHorizontal: theme.spacing.lg, paddingBottom: theme.spacing.md }}>
+            {footer}
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+
+  return (
+    <Swipeable
+      ref={swipeRef}
+      friction={2}
+      rightThreshold={40}
+      overshootRight={false}
+      containerStyle={{ borderBottomWidth: 1, borderBottomColor: theme.colors.separator, backgroundColor: theme.colors.surface, overflow: 'hidden' }}
+      childrenContainerStyle={{ backgroundColor: theme.colors.surface }}
+      onSwipeableWillOpen={() => claimSwipeOpen(closeSelf)}
+      onSwipeableClose={() => releaseSwipeOpen(closeSelf)}
+      renderRightActions={(progress, _translation, methods) => (
+        <SwipeActionsPanel actions={actions} progress={progress} methods={methods} />
+      )}
+    >
+      {row}
+    </Swipeable>
+  );
+}