@obisoft/ui 0.8.0

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../../provider/ObiUIProvider';
+import { ObiText } from '../../typography/ObiText';
+import { StatusBadge, type StatusTone } from '../StatusBadge';
+
+export function RecordDetailHero({
+  kicker,
+  title,
+  subtitle,
+  amount,
+  badge,
+}: {
+  kicker?: string;
+  title: string;
+  subtitle?: string;
+  amount?: string;
+  badge?: { label: string; tone?: StatusTone };
+}) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={{
+        alignItems: 'center',
+        paddingHorizontal: theme.spacing.xl,
+        paddingTop: theme.spacing.xl,
+        paddingBottom: theme.spacing.md,
+        gap: theme.spacing.sm,
+      }}
+    >
+      {kicker ? (
+        <ObiText variant="caption" weight="700" muted style={{ letterSpacing: 1.4, textTransform: 'uppercase' }}>
+          {kicker}
+        </ObiText>
+      ) : null}
+      <ObiText variant="title" weight="800" style={{ textAlign: 'center', fontSize: 22, lineHeight: 28 }}>{title}</ObiText>
+      {subtitle ? <ObiText muted style={{ textAlign: 'center', fontSize: 14 }}>{subtitle}</ObiText> : null}
+      {badge ? <StatusBadge label={badge.label} tone={badge.tone} /> : null}
+      {amount ? (
+        <ObiText variant="display" weight="800" style={{ marginTop: theme.spacing.xs, letterSpacing: -0.6, textAlign: 'center' }}>
+          {amount}
+        </ObiText>
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useObiTheme } from '../../provider/ObiUIProvider';
+import { ObiText } from '../../typography/ObiText';
+
+export function RecordDetailLine({
+  title,
+  caption,
+  amount,
+  last,
+}: {
+  title: string;
+  caption?: string;
+  amount?: string;
+  last?: boolean;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacing.md,
+        paddingVertical: theme.spacing.md,
+        borderBottomWidth: last ? 0 : 1,
+        borderBottomColor: theme.colors.border,
+      }}
+    >
+      <View style={{ flex: 1, gap: 2 }}>
+        <ObiText weight="700" numberOfLines={2}>{title}</ObiText>
+        {caption ? <ObiText variant="caption" muted>{caption}</ObiText> : null}
+      </View>
+      {amount ? <ObiText weight="800" style={{ textAlign: 'right' }}>{amount}</ObiText> : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,36 @@
+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 function RecordDetailSection({ title, children }: { title?: string; children: React.ReactNode }) {
+  const theme = useObiTheme();
+  return (
+    <View style={{ marginHorizontal: theme.spacing.lg, marginBottom: theme.spacing.md, gap: theme.spacing.sm }}>
+      {title ? (
+        <ObiText
+          variant="caption"
+          weight="700"
+          muted
+          style={{ letterSpacing: 0.9, textTransform: 'uppercase', paddingHorizontal: theme.spacing.xs }}
+        >
+          {title}
+        </ObiText>
+      ) : null}
+      <View
+        style={{
+          backgroundColor: theme.glass.surfaceStrong,
+          borderRadius: theme.radius.lg,
+          borderWidth: 1,
+          borderColor: theme.glass.border,
+          paddingHorizontal: theme.spacing.lg,
+          overflow: 'hidden',
+          ...shadow.xs,
+        }}
+      >
+        {children}
+      </View>
+    </View>
+  );
+}

package/src/components/record-detail/index.ts

@@ -0,0 +1,7 @@
+export { RecordDetail, RecordDetailNote } from './RecordDetail';
+export { RecordDetailActions, type RecordAction } from './RecordDetailActions';
+export { RecordDetailHero } from './RecordDetailHero';
+export { RecordDetailSection } from './RecordDetailSection';
+export { RecordDetailField } from './RecordDetailField';
+export { RecordDetailLine } from './RecordDetailLine';
+export { toneFromStatus, prettyStatus } from './status';

package/src/components/record-detail/status.ts

@@ -0,0 +1,16 @@
+import type { StatusTone } from '../StatusBadge';
+
+export function toneFromStatus(status: string): StatusTone {
+  const value = (status ?? '').toLowerCase();
+  if (/pagad|aprob|activ|finaliz|acept|confirm|emitid/.test(value)) return 'success';
+  if (/pend|proces|borrad|cola/.test(value)) return 'warning';
+  if (/anul|inactiv|rechaz|vencid|error/.test(value)) return 'danger';
+  if (/convert/.test(value)) return 'primary';
+  return 'neutral';
+}
+
+export function prettyStatus(status: string) {
+  const trimmed = (status ?? '').trim();
+  if (!trimmed) return trimmed;
+  return trimmed.charAt(0).toUpperCase() + trimmed.slice(1);
+}

package/src/gallery/catalog.ts

@@ -0,0 +1,31 @@
+export type ObiCatalogEntry = {
+  name: string;
+  group: 'foundation' | 'forms' | 'lists' | 'metrics' | 'feedback' | 'scanner' | 'navigation';
+  description: string;
+  exportName: string;
+};
+
+/** Public surface catalog for gallery / docs. Keep in sync with package exports. */
+export const OBI_UI_CATALOG: ObiCatalogEntry[] = [
+  { name: 'ObiUIProvider', group: 'foundation', description: 'Theme provider (light/dark/system)', exportName: 'ObiUIProvider' },
+  { name: 'useObiStyles', group: 'foundation', description: 'Semantic utility styles reactive to theme', exportName: 'useObiStyles' },
+  { name: 'Box / Stack / Row', group: 'foundation', description: 'Layout primitives', exportName: 'Box' },
+  { name: 'Button', group: 'forms', description: 'Primary actions', exportName: 'Button' },
+  { name: 'TextField', group: 'forms', description: 'Text input', exportName: 'TextField' },
+  { name: 'FormWorkspaceShell', group: 'forms', description: 'CRUD form chrome with dock actions', exportName: 'FormWorkspaceShell' },
+  { name: 'FormRow', group: 'forms', description: 'Multi-field form row', exportName: 'FormRow' },
+  { name: 'ChoiceField', group: 'forms', description: 'Selectable options', exportName: 'ChoiceField' },
+  { name: 'DateRangeFilter', group: 'forms', description: 'Date range + presets sheet', exportName: 'DateRangeFilter' },
+  { name: 'ListWorkspace', group: 'lists', description: 'List screen chrome with query states + optional footer/FAB', exportName: 'ListWorkspace' },
+  { name: 'QueryWorkspace', group: 'lists', description: 'Scroll/metrics query chrome with filter + QueryState + footer', exportName: 'QueryWorkspace' },
+  { name: 'ListFilterBar', group: 'lists', description: 'Search + filter icon sheet', exportName: 'ListFilterBar' },
+  { name: 'ListRow', group: 'lists', description: 'Swipeable list row', exportName: 'ListRow' },
+  { name: 'MetricCard / MetricsGrid', group: 'metrics', description: 'KPI tiles in 2×2 grid', exportName: 'MetricsGrid' },
+  { name: 'QueryState', group: 'feedback', description: 'Loading / error / empty orchestration', exportName: 'QueryState' },
+  { name: 'LoadingState', group: 'feedback', description: 'Centered spinner', exportName: 'LoadingState' },
+  { name: 'ErrorState', group: 'feedback', description: 'Error with retry', exportName: 'ErrorState' },
+  { name: 'EmptyState', group: 'feedback', description: 'Empty placeholder with CTA', exportName: 'EmptyState' },
+  { name: 'ScannerShell', group: 'scanner', description: 'Scanner chrome (camera slot in app)', exportName: 'ScannerShell' },
+  { name: 'ScanInputBar', group: 'scanner', description: 'Manual barcode entry bar', exportName: 'ScanInputBar' },
+  { name: 'NavigationDrawer', group: 'navigation', description: 'Presentational drawer menu', exportName: 'NavigationDrawer' },
+];

package/src/glass/AmbientBackground.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export function AmbientBackground({ children }: { children?: React.ReactNode }) {
+  const theme = useObiTheme();
+  return (
+    <View style={[styles.root, { backgroundColor: theme.isDark ? '#0D1118' : '#EEF3FA' }]}>
+      <LinearGradient
+        pointerEvents="none"
+        colors={theme.isDark ? ['#0D1118', '#121A26', '#111522'] : ['#EDF3FB', '#F4F3FF', '#EEF8F6']}
+        start={{ x: 0.05, y: 0 }}
+        end={{ x: 0.95, y: 1 }}
+        style={StyleSheet.absoluteFill}
+      />
+      <View pointerEvents="none" style={[styles.glow, styles.glowPrimary, { backgroundColor: theme.isDark ? 'rgba(123,124,240,0.16)' : 'rgba(91,92,230,0.14)' }]} />
+      <View pointerEvents="none" style={[styles.glow, styles.glowMint, { backgroundColor: theme.isDark ? 'rgba(45,212,191,0.12)' : 'rgba(14,165,150,0.11)' }]} />
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  glow: { position: 'absolute', borderRadius: 999 },
+  glowPrimary: { width: 340, height: 340, top: -120, right: -120 },
+  glowMint: { width: 300, height: 300, bottom: 80, left: -150 },
+});

package/src/glass/GlassSurface.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Platform, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { BlurView, LiquidGlassView } from '@sbaiahmed1/react-native-blur';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { liquidGlassPresets } from '../theme/effects';
+
+type Variant = keyof typeof liquidGlassPresets;
+
+type Props = {
+  variant?: Variant;
+  interactive?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+};
+
+function AndroidFrost({ variant, style, children }: Required<Pick<Props, 'variant'>> & Pick<Props, 'style' | 'children'>) {
+  const theme = useObiTheme();
+  const preset = liquidGlassPresets[variant];
+  const overlay = theme.isDark
+    ? 'rgba(22,27,38,0.30)'
+    : variant === 'dock' || variant === 'chrome'
+      ? 'rgba(255,255,255,0.14)'
+      : variant === 'sheet' || variant === 'modal'
+        ? 'rgba(255,255,255,0.26)'
+        : 'rgba(255,255,255,0.18)';
+
+  return (
+    <BlurView
+      blurType={theme.isDark ? 'dark' : 'xlight'}
+      blurAmount={Math.min(preset.blurAmount, 24)}
+      blurRounds={3}
+      overlayColor={overlay}
+      reducedTransparencyFallbackColor={theme.isDark ? 'rgba(25,30,42,0.78)' : 'rgba(255,255,255,0.72)'}
+      style={[styles.clip, { borderColor: theme.glass.borderSoft }, style]}
+    >
+      {children}
+    </BlurView>
+  );
+}
+
+export function GlassSurface({ variant = 'surface', interactive = false, style, children }: Props) {
+  const theme = useObiTheme();
+  const preset = liquidGlassPresets[variant];
+
+  if (Platform.OS === 'android') {
+    return <AndroidFrost variant={variant} style={style}>{children}</AndroidFrost>;
+  }
+
+  return (
+    <LiquidGlassView
+      glassType={preset.glassType}
+      glassTintColor={theme.isDark ? '#171C27' : '#FFFFFF'}
+      glassOpacity={preset.glassOpacity}
+      isInteractive={interactive}
+      reducedTransparencyFallbackColor={theme.isDark ? 'rgba(25,30,42,0.72)' : 'rgba(255,255,255,0.72)'}
+      style={[styles.clip, { borderColor: theme.glass.borderSoft }, style]}
+    >
+      {children}
+    </LiquidGlassView>
+  );
+}
+
+export function FrostedSurface({ variant = 'chrome', style, children }: Props) {
+  const theme = useObiTheme();
+  if (Platform.OS === 'android') {
+    return <AndroidFrost variant={variant} style={[{ borderColor: 'transparent' }, style]}>{children}</AndroidFrost>;
+  }
+  const preset = liquidGlassPresets[variant];
+  return (
+    <BlurView
+      blurType={theme.isDark ? 'systemMaterialDark' : 'systemMaterialLight'}
+      blurAmount={preset.blurAmount}
+      overlayColor={theme.isDark ? 'rgba(20,25,36,0.12)' : 'rgba(255,255,255,0.16)'}
+      reducedTransparencyFallbackColor={theme.isDark ? 'rgba(25,30,42,0.72)' : 'rgba(255,255,255,0.72)'}
+      style={[styles.clip, { borderColor: 'transparent' }, style]}
+    >
+      {children}
+    </BlurView>
+  );
+}
+
+export function SoftGlassPanel({ style, children, dense = false }: Props & { dense?: boolean }) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={[
+        styles.clip,
+        {
+          borderColor: theme.glass.borderSoft,
+          backgroundColor: theme.isDark
+            ? dense ? 'rgba(22,27,38,0.62)' : 'rgba(22,27,38,0.45)'
+            : dense ? 'rgba(255,255,255,0.38)' : 'rgba(255,255,255,0.24)',
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  clip: {
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+});

package/src/index.ts

@@ -0,0 +1,66 @@
+export { ObiUIProvider, useObiUI, useObiTheme, type ObiThemePreference } from './provider/ObiUIProvider';
+export { createObiTheme, type ObiTheme, type ObiThemeMode, type ObiSpacingKey, type ObiRadiusKey, type ObiThemeOverrides } from './theme/theme';
+export { lightColors, darkColors, radius, spacing, type, type AppColors } from './theme/tokens';
+export { createGlass, liquidGlassPresets, shadow } from './theme/effects';
+
+export { Box, type BoxProps } from './layout/Box';
+export { Stack } from './layout/Stack';
+export { Row } from './layout/Row';
+export { Divider } from './layout/Divider';
+
+export { ObiText, AppText, type ObiTextProps } from './typography/ObiText';
+export { Button, type ButtonProps } from './components/Button';
+export { Card } from './components/Card';
+export { TextField } from './components/TextField';
+export { Screen } from './components/Screen';
+
+export { GlassSurface, FrostedSurface, SoftGlassPanel } from './glass/GlassSurface';
+export { AmbientBackground } from './glass/AmbientBackground';
+
+export { Chip } from './components/Chip';
+export { SegmentedControl, type SegmentedOption } from './components/SegmentedControl';
+export { Skeleton } from './components/Skeleton';
+export { ToggleRow } from './components/ToggleRow';
+export { StatusBadge, type StatusTone } from './components/StatusBadge';
+export { Fab } from './components/Fab';
+export { BottomSheet } from './components/BottomSheet';
+export { ChoiceField, type ChoiceOption } from './components/ChoiceField';
+
+export { Icon, type IconName, type IconProps } from './components/Icon';
+export { IconButton } from './components/IconButton';
+export { SearchArea } from './components/SearchArea';
+export { ListFilterBar, type ListFilterBarProps, type FilterOption } from './components/ListFilterBar';
+export { ListRow, type ListRowProps, type SwipeAction, type SwipeActionTone } from './components/ListRow';
+export { FormWorkspaceShell, FormBlock, type FormWorkspaceShellProps, type FormBlockProps } from './components/FormWorkspaceShell';
+export { AppHeader, type AppHeaderProps } from './components/AppHeader';
+export { GlassTabBarBackground, glassTabBarBaseStyle } from './components/GlassTabBar';
+export { MetricCard, type MetricCardProps, type MetricFormat } from './components/MetricCard';
+export { MetricsGrid } from './components/MetricsGrid';
+export { MiniBarChart, type MiniBarChartItem } from './components/MiniBarChart';
+export { EmptyState } from './components/EmptyState';
+export {
+  RecordDetail,
+  RecordDetailNote,
+  RecordDetailActions,
+  RecordDetailHero,
+  RecordDetailSection,
+  RecordDetailField,
+  RecordDetailLine,
+  toneFromStatus,
+  prettyStatus,
+  type RecordAction,
+} from './components/record-detail';
+export { NavigationDrawer, type NavigationDrawerProps, type NavigationDrawerEntry, type NavigationDrawerLeaf, type NavigationDrawerGroup, type NavigationDrawerDivider } from './components/NavigationDrawer';
+export { SuccessState } from './components/SuccessState';
+export { LoadingState, type LoadingStateProps } from './components/LoadingState';
+export { ErrorState, type ErrorStateProps } from './components/ErrorState';
+export { QueryState, type QueryStateProps } from './components/QueryState';
+export { ListWorkspace, type ListWorkspaceProps } from './components/ListWorkspace';
+export { QueryWorkspace, type QueryWorkspaceProps } from './components/QueryWorkspace';
+export { FormRow, type FormRowProps } from './components/FormRow';
+export { createObiStyles, useObiStyles, type ObiStyles } from './styles/useObiStyles';
+export { DateRangeFilter, defaultDateRange, type DateRangeValue, type DatePreset, type DateFilterOption, type DateRangeFilterProps } from './components/DateRangeFilter';
+export { CenteredState, type CenteredStateProps } from './components/CenteredState';
+export { ScanInputBar, type ScanInputBarProps } from './components/ScanInputBar';
+export { ScannerShell, type ScannerShellProps } from './components/ScannerShell';
+export { OBI_UI_CATALOG, type ObiCatalogEntry } from './gallery/catalog';

package/src/layout/Box.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import type { ObiRadiusKey, ObiSpacingKey } from '../theme/theme';
+
+type Space = ObiSpacingKey | number;
+
+function resolveSpace(value: Space | undefined, values: Record<string, number>) {
+  if (value == null) return undefined;
+  return typeof value === 'number' ? value : values[value];
+}
+
+export type BoxProps = ViewProps & {
+  padding?: Space;
+  paddingX?: Space;
+  paddingY?: Space;
+  margin?: Space;
+  gap?: Space;
+  radius?: ObiRadiusKey | number;
+  flex?: number;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function Box({
+  padding,
+  paddingX,
+  paddingY,
+  margin,
+  gap,
+  radius,
+  flex,
+  backgroundColor,
+  style,
+  ...props
+}: BoxProps) {
+  const theme = useObiTheme();
+  const resolvedRadius = typeof radius === 'number'
+    ? radius
+    : radius
+      ? theme.radius[radius]
+      : undefined;
+
+  return (
+    <View
+      {...props}
+      style={[
+        {
+          padding: resolveSpace(padding, theme.spacing),
+          paddingHorizontal: resolveSpace(paddingX, theme.spacing),
+          paddingVertical: resolveSpace(paddingY, theme.spacing),
+          margin: resolveSpace(margin, theme.spacing),
+          gap: resolveSpace(gap, theme.spacing),
+          borderRadius: resolvedRadius,
+          flex,
+          backgroundColor,
+        },
+        style,
+      ]}
+    />
+  );
+}

package/src/layout/Divider.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+
+export function Divider({ style }: { style?: StyleProp<ViewStyle> }) {
+  const { colors } = useObiTheme();
+  return <View style={[{ height: 1, backgroundColor: colors.separator }, style]} />;
+}

package/src/layout/Row.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+import { Box, type BoxProps } from './Box';
+
+export function Row({ style, ...props }: BoxProps) {
+  return <Box {...props} style={[{ flexDirection: 'row', alignItems: 'center' } satisfies ViewStyle, style]} />;
+}

package/src/layout/Stack.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+import { Box, type BoxProps } from './Box';
+
+export function Stack({ style, ...props }: BoxProps) {
+  return <Box {...props} style={[{ flexDirection: 'column' } satisfies ViewStyle, style]} />;
+}

package/src/provider/ObiUIProvider.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { createObiTheme, type ObiTheme, type ObiThemeMode, type ObiThemeOverrides } from '../theme/theme';
+
+export type ObiThemePreference = ObiThemeMode | 'system';
+
+type ObiUIContextValue = {
+  theme: ObiTheme;
+  mode: ObiThemeMode;
+};
+
+const ObiUIContext = createContext<ObiUIContextValue | null>(null);
+
+export function ObiUIProvider({
+  children,
+  mode = 'system',
+  overrides,
+}: {
+  children: React.ReactNode;
+  mode?: ObiThemePreference;
+  overrides?: ObiThemeOverrides;
+}) {
+  const systemMode = useColorScheme();
+  const resolvedMode: ObiThemeMode =
+    mode === 'system' ? (systemMode === 'dark' ? 'dark' : 'light') : mode;
+
+  const value = useMemo<ObiUIContextValue>(() => ({
+    mode: resolvedMode,
+    theme: createObiTheme(resolvedMode, overrides),
+  }), [resolvedMode, overrides]);
+
+  return <ObiUIContext.Provider value={value}>{children}</ObiUIContext.Provider>;
+}
+
+export function useObiUI() {
+  const value = useContext(ObiUIContext);
+  if (!value) {
+    throw new Error('useObiUI debe utilizarse dentro de <ObiUIProvider>.');
+  }
+  return value;
+}
+
+export function useObiTheme() {
+  return useObiUI().theme;
+}