@obisoft/ui 0.8.0

package/src/components/DateRangeFilter.tsx

@@ -0,0 +1,226 @@
+import React, { useMemo, useState } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { useObiStyles } from '../styles/useObiStyles';
+import { BottomSheet } from './BottomSheet';
+import { Icon } from './Icon';
+
+export interface DateRangeValue {
+  from: string;
+  to: string;
+}
+
+export type DatePreset = 'today' | '7d' | 'month' | 'custom';
+export type DateFilterOption = { value: string; label: string };
+
+const iso = (date: Date) => date.toISOString().slice(0, 10);
+
+const parse = (value: string) => {
+  const parts = value.split('-').map(Number);
+  return new Date(parts[0] || 2000, Math.max(0, (parts[1] || 1) - 1), parts[2] || 1, 12);
+};
+
+const today = () => iso(new Date());
+
+const daysAgo = (days: number) => {
+  const d = new Date();
+  d.setDate(d.getDate() - days);
+  return iso(d);
+};
+
+const monthStart = () => {
+  const d = new Date();
+  d.setDate(1);
+  return iso(d);
+};
+
+const formatDisplay = (value: string, locale: string) =>
+  parse(value).toLocaleDateString(locale, {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  });
+
+const PRESETS: { value: DatePreset; label: string }[] = [
+  { value: 'today', label: 'Hoy' },
+  { value: '7d', label: 'Últimos 7 días' },
+  { value: 'month', label: 'Este mes' },
+  { value: 'custom', label: 'Personalizado…' },
+];
+
+export type DateRangeFilterProps = {
+  value: DateRangeValue;
+  onChange: (value: DateRangeValue) => void;
+  filterTitle?: string;
+  scopeValue?: string;
+  onScopeChange?: (value: string) => void;
+  scopeOptions?: DateFilterOption[];
+  scopeTitle?: string;
+  locale?: string;
+};
+
+/**
+ * Reusable date-range control with preset/scope bottom sheets.
+ * Visuals and theme resolution live entirely in @obisoft/ui.
+ */
+export function DateRangeFilter({
+  value,
+  onChange,
+  filterTitle = 'Período',
+  scopeValue,
+  onScopeChange,
+  scopeOptions,
+  scopeTitle = 'Alcance',
+  locale = 'es-DO',
+}: DateRangeFilterProps) {
+  const theme = useObiTheme();
+  const ui = useObiStyles();
+  const [presetOpen, setPresetOpen] = useState(false);
+  const [customOpen, setCustomOpen] = useState(false);
+  const [picker, setPicker] = useState<'from' | 'to' | null>(null);
+
+  const preset = useMemo<DatePreset>(() => {
+    if (value.from === today() && value.to === today()) return 'today';
+    if (value.from === daysAgo(6) && value.to === today()) return '7d';
+    if (value.from === monthStart() && value.to === today()) return 'month';
+    return 'custom';
+  }, [value]);
+
+  const hasScope = Boolean(scopeOptions?.length && onScopeChange);
+  const isFilterActive = preset !== 'today' || (hasScope && scopeValue !== scopeOptions?.[0]?.value);
+
+  const applyPreset = (kind: DatePreset) => {
+    if (kind === 'today') onChange({ from: today(), to: today() });
+    if (kind === '7d') onChange({ from: daysAgo(6), to: today() });
+    if (kind === 'month') onChange({ from: monthStart(), to: today() });
+    if (kind === 'custom') {
+      setPresetOpen(false);
+      setCustomOpen(true);
+      return;
+    }
+    setPresetOpen(false);
+  };
+
+  const rangeLabel = `${formatDisplay(value.from, locale)}  —  ${formatDisplay(value.to, locale)}`;
+
+  return (
+    <View style={ui.filterWrap}>
+      <View style={ui.filterRowInner}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Rango de fechas"
+          onPress={() => setCustomOpen(true)}
+          style={({ pressed }) => [ui.filterSearch, ui.input, ui.dateRangeField, pressed && ui.listItemPressed]}
+        >
+          <Text style={ui.dateRangeFieldText} numberOfLines={1}>{rangeLabel}</Text>
+        </Pressable>
+
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={filterTitle}
+          accessibilityState={{ expanded: presetOpen }}
+          onPress={() => setPresetOpen(true)}
+          style={({ pressed }) => [ui.filterBtn, isFilterActive && ui.filterBtnActive, pressed && ui.listItemPressed]}
+          hitSlop={8}
+        >
+          <View style={ui.filterIcon}>
+            <View style={[ui.filterBarMark, { width: 16 }, isFilterActive && ui.filterBarMarkActive]} />
+            <View style={[ui.filterBarMark, { width: 11 }, isFilterActive && ui.filterBarMarkActive]} />
+            <View style={[ui.filterBarMark, { width: 6 }, isFilterActive && ui.filterBarMarkActive]} />
+          </View>
+        </Pressable>
+      </View>
+
+      <BottomSheet
+        visible={presetOpen}
+        onClose={() => setPresetOpen(false)}
+        title={filterTitle}
+        minHeight={hasScope ? 420 : 320}
+        contentStyle={ui.filterSheetContent}
+      >
+        {PRESETS.map(option => {
+          const selected = option.value === preset;
+          return (
+            <Pressable
+              key={option.value}
+              style={({ pressed }) => [ui.sheetOption, pressed && ui.listItemPressed]}
+              onPress={() => applyPreset(option.value)}
+            >
+              <Text style={[ui.sheetOptionLabel, selected && ui.sheetOptionLabelSelected]}>{option.label}</Text>
+              {selected ? <Icon name="check" size={16} color={theme.colors.primary} /> : null}
+            </Pressable>
+          );
+        })}
+
+        {hasScope ? (
+          <>
+            <Text style={[ui.sectionLabel, ui.dateRangeSheetSection]}>{scopeTitle}</Text>
+            {scopeOptions!.map(option => {
+              const selected = option.value === scopeValue;
+              return (
+                <Pressable
+                  key={option.value}
+                  style={({ pressed }) => [ui.sheetOption, pressed && ui.listItemPressed]}
+                  onPress={() => {
+                    onScopeChange!(option.value);
+                    setPresetOpen(false);
+                  }}
+                >
+                  <Text style={[ui.sheetOptionLabel, selected && ui.sheetOptionLabelSelected]}>{option.label}</Text>
+                  {selected ? <Icon name="check" size={16} color={theme.colors.primary} /> : null}
+                </Pressable>
+              );
+            })}
+          </>
+        ) : null}
+      </BottomSheet>
+
+      <BottomSheet
+        visible={customOpen}
+        onClose={() => {
+          setCustomOpen(false);
+          setPicker(null);
+        }}
+        title="Rango personalizado"
+        minHeight={280}
+        contentStyle={ui.filterSheetContent}
+      >
+        <Pressable style={({ pressed }) => [ui.sheetOption, pressed && ui.listItemPressed]} onPress={() => setPicker('from')}>
+          <View>
+            <Text style={ui.dateRangeSheetCaption}>Desde</Text>
+            <Text style={ui.sheetOptionLabel}>{formatDisplay(value.from, locale)}</Text>
+          </View>
+          <Icon name="pencil" size={16} color={theme.colors.textMuted} />
+        </Pressable>
+        <Pressable style={({ pressed }) => [ui.sheetOption, pressed && ui.listItemPressed]} onPress={() => setPicker('to')}>
+          <View>
+            <Text style={ui.dateRangeSheetCaption}>Hasta</Text>
+            <Text style={ui.sheetOptionLabel}>{formatDisplay(value.to, locale)}</Text>
+          </View>
+          <Icon name="pencil" size={16} color={theme.colors.textMuted} />
+        </Pressable>
+
+        {picker ? (
+          <DateTimePicker
+            value={parse(picker === 'from' ? value.from : value.to)}
+            mode="date"
+            display={Platform.OS === 'android' ? 'default' : 'compact'}
+            onChange={(_, date) => {
+              if (Platform.OS === 'android') setPicker(null);
+              if (!date) return;
+              const next = iso(date);
+              onChange(
+                picker === 'from'
+                  ? { from: next, to: next > value.to ? next : value.to }
+                  : { from: next < value.from ? next : value.from, to: next },
+              );
+            }}
+          />
+        ) : null}
+      </BottomSheet>
+    </View>
+  );
+}
+
+export const defaultDateRange = (): DateRangeValue => ({ from: monthStart(), to: today() });

package/src/components/EmptyState.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+import { Icon, type IconName } from './Icon';
+import { Button } from './Button';
+
+export function EmptyState({
+  title,
+  description,
+  icon = 'files',
+  actionLabel,
+  onAction,
+}: {
+  title: string;
+  description?: string;
+  icon?: IconName;
+  actionLabel?: string;
+  onAction?: () => void;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: theme.spacing.xxl, gap: theme.spacing.md }}>
+      <View style={{ width: 52, height: 52, borderRadius: 26, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.glass.primaryTint }}>
+        <Icon name={icon} size={24} color={theme.colors.primary} />
+      </View>
+      <ObiText variant="subtitle" weight="800" style={{ textAlign: 'center' }}>{title}</ObiText>
+      {description ? <ObiText muted style={{ textAlign: 'center' }}>{description}</ObiText> : null}
+      {actionLabel && onAction ? <Button title={actionLabel} onPress={onAction} variant="outline" size="sm" /> : null}
+    </View>
+  );
+}

package/src/components/ErrorState.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+import { Icon } from './Icon';
+import { Button } from './Button';
+
+export type ErrorStateProps = {
+  title?: string;
+  message?: string;
+  retryLabel?: string;
+  onRetry?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function ErrorState({
+  title = 'Algo salió mal',
+  message,
+  retryLabel = 'Reintentar',
+  onRetry,
+  style,
+}: ErrorStateProps) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={[
+        {
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: theme.spacing.xxl,
+          gap: theme.spacing.md,
+        },
+        style,
+      ]}
+    >
+      <View
+        style={{
+          width: 52,
+          height: 52,
+          borderRadius: 26,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.danger + '18',
+        }}
+      >
+        <Icon name="ban" size={24} color={theme.colors.danger} />
+      </View>
+      <ObiText variant="subtitle" weight="800" style={{ textAlign: 'center' }}>
+        {title}
+      </ObiText>
+      {message ? (
+        <ObiText muted style={{ textAlign: 'center', maxWidth: 420 }}>
+          {message}
+        </ObiText>
+      ) : null}
+      {onRetry ? (
+        <Button title={retryLabel} variant="outline" size="sm" onPress={onRetry} />
+      ) : null}
+    </View>
+  );
+}

package/src/components/Fab.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+
+export function Fab({ label, onPress }: { label: string; onPress: () => void }) {
+  const insets = useSafeAreaInsets();
+  const theme = useObiTheme();
+  const bottom = theme.navigation.bottomBarHeight + theme.spacing.sm + insets.bottom + theme.spacing.sm;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      hitSlop={8}
+      style={({ pressed }) => ({
+        position: 'absolute',
+        bottom,
+        right: theme.spacing.lg,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        backgroundColor: theme.colors.primary,
+        borderRadius: theme.radius.pill,
+        paddingVertical: theme.spacing.md,
+        paddingHorizontal: theme.spacing.xl,
+        zIndex: 50,
+        opacity: pressed ? 0.76 : 1,
+        ...shadow.floating,
+      })}
+    >
+      <Text style={{ color: theme.colors.onPrimary, fontSize: 20, fontWeight: '800', lineHeight: 22 }}>+</Text>
+      <Text style={{ color: theme.colors.onPrimary, fontSize: theme.type.body, fontWeight: '700' }}>{label}</Text>
+    </Pressable>
+  );
+}

package/src/components/FormRow.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export type FormRowProps = {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Lays 1–N form fields in a responsive row with theme gaps.
+ * Each child should typically be wrapped or use flex:1 via FormRow.Item.
+ */
+export function FormRow({ children, style }: FormRowProps) {
+  const theme = useObiTheme();
+  return (
+    <View style={[{ flexDirection: 'row', gap: theme.spacing.md, alignItems: 'flex-start' }, style]}>
+      {React.Children.map(children, child => {
+        if (!React.isValidElement(child)) return child;
+        if (child.type === FormRowItem) return child;
+        return <FormRowItem>{child}</FormRowItem>;
+      })}
+    </View>
+  );
+}
+
+function FormRowItem({
+  children,
+  style,
+  flex = 1,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  flex?: number;
+}) {
+  return <View style={[{ flex, minWidth: 0 }, style]}>{children}</View>;
+}
+
+FormRow.Item = FormRowItem;

package/src/components/FormWorkspaceShell.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Keyboard, ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { ObiText } from '../typography/ObiText';
+import { Button } from './Button';
+import { Screen } from './Screen';
+import { GlassSurface } from '../glass/GlassSurface';
+
+export type FormWorkspaceShellProps = {
+  children: React.ReactNode;
+  title?: string;
+  subtitle?: React.ReactNode;
+  contentStyle?: StyleProp<ViewStyle>;
+  secondaryTitle?: string;
+  onSecondary?: () => void;
+  secondaryDisabled?: boolean;
+  primaryTitle: string;
+  onPrimary: () => void;
+  primaryDisabled?: boolean;
+  primaryLoading?: boolean;
+};
+
+export function FormWorkspaceShell({
+  children,
+  title,
+  subtitle,
+  contentStyle,
+  secondaryTitle,
+  onSecondary,
+  secondaryDisabled = false,
+  primaryTitle,
+  onPrimary,
+  primaryDisabled = false,
+  primaryLoading = false,
+}: FormWorkspaceShellProps) {
+  const theme = useObiTheme();
+  return (
+    <Screen style={{ backgroundColor: 'transparent' }} navigationClearance={false}>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={[
+          {
+            padding: theme.spacing.lg,
+            gap: theme.spacing.lg,
+            maxWidth: 840,
+            width: '100%',
+            alignSelf: 'center',
+          },
+          contentStyle,
+        ]}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
+      >
+        {title ? (
+          <View style={{ gap: theme.spacing.md }}>
+            <ObiText variant="title" weight="900">{title}</ObiText>
+            {subtitle ? (typeof subtitle === 'string' ? <ObiText muted>{subtitle}</ObiText> : subtitle) : null}
+          </View>
+        ) : null}
+        {children}
+      </ScrollView>
+
+      <GlassSurface
+        variant="dock"
+        style={{
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          width: '100%',
+          gap: theme.spacing.sm,
+          paddingHorizontal: theme.spacing.sm,
+          paddingTop: theme.spacing.sm,
+          paddingBottom: theme.spacing.md,
+          backgroundColor: 'transparent',
+          zIndex: 20,
+          borderTopWidth: 1,
+          borderTopColor: theme.glass.borderSoft,
+        }}
+      >
+        <View style={{ flexDirection: 'row', width: '100%', gap: theme.spacing.sm }} collapsable={false}>
+          {onSecondary ? (
+            <Button
+              title={secondaryTitle ?? 'CANCELAR'}
+              variant="danger"
+              disabled={secondaryDisabled}
+              onPress={() => {
+                Keyboard.dismiss();
+                onSecondary();
+              }}
+              style={{ flex: 1, flexBasis: 0, minHeight: 52, alignSelf: 'stretch' }}
+            />
+          ) : null}
+          <Button
+            title={primaryTitle}
+            loading={primaryLoading}
+            disabled={primaryDisabled || primaryLoading}
+            onPress={() => {
+              Keyboard.dismiss();
+              onPrimary();
+            }}
+            style={{ flex: 1, flexBasis: 0, minHeight: 52, alignSelf: 'stretch' }}
+          />
+        </View>
+      </GlassSurface>
+    </Screen>
+  );
+}
+
+export type FormBlockProps = {
+  title: string;
+  hint?: string;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function FormBlock({ title, hint, children, style }: FormBlockProps) {
+  const theme = useObiTheme();
+  return (
+    <View style={[{ gap: theme.spacing.md }, style]}>
+      <View style={{ gap: 2 }}>
+        <ObiText variant="subtitle" weight="900">{title}</ObiText>
+        {hint ? <ObiText variant="caption" muted>{hint}</ObiText> : null}
+      </View>
+      {children}
+    </View>
+  );
+}

package/src/components/GlassTabBar.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { BlurView } from '@sbaiahmed1/react-native-blur';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export function GlassTabBarBackground() {
+  const theme = useObiTheme();
+  const frosted = theme.isDark ? 'rgba(18,22,32,0.70)' : 'rgba(248,250,255,0.62)';
+  const overlay = theme.isDark ? 'rgba(18,22,32,0.18)' : 'rgba(255,255,255,0.10)';
+  return (
+    <View style={StyleSheet.absoluteFillObject} pointerEvents="none">
+      <View style={[StyleSheet.absoluteFillObject, { backgroundColor: frosted }]} />
+      <BlurView
+        blurType={theme.isDark ? 'dark' : Platform.OS === 'ios' ? 'systemMaterialLight' : 'light'}
+        blurAmount={Platform.OS === 'ios' ? 36 : 28}
+        blurRounds={4}
+        overlayColor={overlay}
+        reducedTransparencyFallbackColor={frosted}
+        style={StyleSheet.absoluteFillObject}
+      />
+      <View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFillObject,
+          { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: theme.glass.borderSoft },
+        ]}
+      />
+    </View>
+  );
+}
+
+export const glassTabBarBaseStyle = {
+  position: 'absolute' as const,
+  backgroundColor: 'transparent' as const,
+  borderTopWidth: 0,
+  elevation: 0,
+  shadowOpacity: 0,
+  zIndex: 100,
+};