@obisoft/ventas-ui 0.7.0

package/README.md

@@ -0,0 +1,30 @@
+# @obisoft/ventas-ui
+
+Componentes presentacionales del dominio Ventas, construidos exclusivamente sobre `@obisoft/ui`.
+
+## Estado
+
+Versión: **`0.7.0`** (peer `@obisoft/ui >= 0.8.0`). Paquete npm público (`access: public`).
+
+- Monorepo: `file:packages/obisoft-ventas-ui`
+- Externo: `npm i @obisoft/ventas-ui@0.7.0` (con `NPM_TOKEN`)
+
+Ver [docs/OBISOFT_UI_PUBLISH.md](../../docs/OBISOFT_UI_PUBLISH.md).
+
+## Módulos
+
+- **Dashboard** — secciones, quick actions, activity, company status
+- **POS** — tiles, dock, tabs, ticket, quantity stepper
+- **Checkout** — drawer frame, summary, payment rows, select lists
+- **Chrome** — `SectionBlock`, `DetailRowsCard`, `ActionChipBar`
+- **Styles** — `useVentasStyles`
+
+## Storybook
+
+```bash
+npm run storybook
+```
+
+## Regla
+
+Solo puede depender de `@obisoft/ui` y peers de React Native. Nunca importa `src/app`, `features`, `entities` ni `pages`. Validar con `npm run audit:ui`.

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@obisoft/ventas-ui",
+  "version": "0.7.0",
+  "description": "Presentational React Native components for Obisoft Ventas built on @obisoft/ui.",
+  "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",
+    "obisoft",
+    "ventas",
+    "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-ventas-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/obisoft/obi-projects/issues"
+  },
+  "homepage": "https://github.com/obisoft/obi-projects/tree/main/obi-ventas-mobile/packages/obisoft-ventas-ui#readme",
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.80.0",
+    "@obisoft/ui": ">=0.8.0",
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-gesture-handler": ">=3.0.0",
+    "react-native-linear-gradient": ">=2.8.0"
+  }
+}

package/src/checkout/CheckoutDrawerFrame.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Keyboard, Modal, Pressable, useWindowDimensions, 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 '@obisoft/ui';
+
+export function CheckoutDrawerFrame({
+  visible,
+  onClose,
+  header,
+  children,
+  footer,
+  maxWidth = 420,
+  widthRatio = 0.88,
+  bodyStyle,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  header?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  maxWidth?: number;
+  widthRatio?: number;
+  bodyStyle?: StyleProp<ViewStyle>;
+}) {
+  const theme = useObiTheme();
+  const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  const panelWidth = useMemo(() => Math.min(maxWidth, Math.round(width * widthRatio)), [maxWidth, width, widthRatio]);
+  const slide = useRef(new Animated.Value(panelWidth)).current;
+
+  useEffect(() => {
+    if (!visible) {
+      slide.setValue(panelWidth);
+      return;
+    }
+    slide.setValue(panelWidth);
+    Animated.timing(slide, { toValue: 0, duration: 220, useNativeDriver: true }).start();
+  }, [panelWidth, slide, visible]);
+
+  const closeAnimated = () => {
+    Keyboard.dismiss();
+    Animated.timing(slide, { toValue: panelWidth, duration: 180, useNativeDriver: true }).start(({ finished }) => {
+      if (finished) onClose();
+    });
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="none" onRequestClose={closeAnimated} statusBarTranslucent>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', backgroundColor: theme.glass.backdropStrong }}>
+          <Pressable style={{ flex: 1 }} onPress={closeAnimated} accessibilityLabel="Cerrar cobro" />
+          <Animated.View style={{ width: panelWidth, height: '100%', transform: [{ translateX: slide }] }}>
+            <View
+              style={{
+                flex: 1,
+                paddingTop: insets.top,
+                paddingBottom: insets.bottom,
+                backgroundColor: theme.glass.panel,
+                borderTopLeftRadius: theme.radius.lg,
+                borderBottomLeftRadius: theme.radius.lg,
+                overflow: 'hidden',
+              }}
+            >
+              {header ? (
+                <View style={{ paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.lg, paddingBottom: theme.spacing.md, gap: theme.spacing.sm }}>
+                  {header}
+                </View>
+              ) : null}
+              <View style={[{ flex: 1 }, bodyStyle]}>{children}</View>
+              {footer ? (
+                <View style={{ paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.md, paddingBottom: theme.spacing.lg, gap: theme.spacing.sm }}>
+                  {footer}
+                </View>
+              ) : null}
+            </View>
+          </Animated.View>
+        </View>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+}

package/src/checkout/CheckoutPickerButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { AppText, Icon, shadow, useObiTheme } from '@obisoft/ui';
+
+export function CheckoutPickerButton({ label, onPress, open }: { label: string; onPress: () => void; open?: boolean }) {
+  const theme = useObiTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ expanded: Boolean(open) }}
+      onPress={onPress}
+      style={({ pressed }) => ({
+        minHeight: 48,
+        borderWidth: 1,
+        borderColor: open ? theme.colors.primary : theme.glass.border,
+        borderRadius: theme.radius.md,
+        backgroundColor: theme.glass.input,
+        paddingHorizontal: theme.spacing.md,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.spacing.sm,
+        opacity: pressed ? 0.76 : 1,
+        ...shadow.glassSm,
+      })}
+    >
+      <AppText numberOfLines={1} style={{ flex: 1 }}>{label}</AppText>
+      <Icon name={open ? 'chevron-up' : 'chevron-down'} size={18} color={theme.colors.textMuted} />
+    </Pressable>
+  );
+}

package/src/checkout/CheckoutSelectList.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+import { AppText, shadow, useObiTheme } from '@obisoft/ui';
+
+export type CheckoutSelectOption = {
+  key: string;
+  label: string;
+  subtitle?: string;
+};
+
+export function CheckoutSelectList({
+  items,
+  selectedKey,
+  onSelect,
+  maxHeight = 180,
+  emptyLabel = 'Sin resultados',
+}: {
+  items: CheckoutSelectOption[];
+  selectedKey?: string | null;
+  onSelect: (key: string) => void;
+  maxHeight?: number;
+  emptyLabel?: string;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={{
+        maxHeight,
+        borderWidth: 1,
+        borderColor: theme.glass.border,
+        borderRadius: theme.radius.md,
+        overflow: 'hidden',
+        backgroundColor: theme.glass.surface,
+        ...shadow.glassSm,
+      }}
+    >
+      <ScrollView nestedScrollEnabled keyboardShouldPersistTaps="handled">
+        {items.length === 0 ? (
+          <View style={{ paddingHorizontal: theme.spacing.md, paddingVertical: theme.spacing.lg }}>
+            <AppText muted>{emptyLabel}</AppText>
+          </View>
+        ) : null}
+        {items.map((item, index) => {
+          const selected = item.key === selectedKey;
+          return (
+            <Pressable
+              key={item.key}
+              onPress={() => onSelect(item.key)}
+              style={({ pressed }) => ({
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.sm,
+                borderBottomWidth: index === items.length - 1 ? 0 : 1,
+                borderBottomColor: theme.glass.separator,
+                backgroundColor: selected
+                  ? theme.glass.primaryTint
+                  : pressed
+                    ? theme.glass.controlPressed
+                    : 'transparent',
+                gap: 2,
+              })}
+            >
+              <AppText weight="700" numberOfLines={1}>{item.label}</AppText>
+              {item.subtitle ? <AppText variant="caption" muted numberOfLines={1}>{item.subtitle}</AppText> : null}
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}

package/src/checkout/CheckoutSummary.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import { AppText, useObiTheme } from '@obisoft/ui';
+
+export type CheckoutSummaryItem = {
+  key: string;
+  label: string;
+  value: string;
+  tone?: 'default' | 'warning' | 'success' | 'danger';
+  strong?: boolean;
+};
+
+export function CheckoutSummary({ items }: { items: CheckoutSummaryItem[] }) {
+  const theme = useObiTheme();
+  const toneColor = (tone: CheckoutSummaryItem['tone']) => {
+    if (tone === 'warning') return theme.colors.warning;
+    if (tone === 'success') return theme.colors.success;
+    if (tone === 'danger') return theme.colors.danger;
+    return theme.colors.text;
+  };
+  return (
+    <View style={{ gap: theme.spacing.sm }}>
+      {items.map(item => (
+        <View key={item.key} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: theme.spacing.md }}>
+          <AppText muted={item.tone == null || item.tone === 'default'} style={{ color: item.tone && item.tone !== 'default' ? toneColor(item.tone) : undefined }}>
+            {item.label}
+          </AppText>
+          <AppText weight={item.strong ? '900' : '800'} style={{ color: toneColor(item.tone) }}>{item.value}</AppText>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/checkout/PaymentAmountRow.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+import { AppText, TextField, shadow, useObiTheme } from '@obisoft/ui';
+
+export function PaymentAmountRow({
+  label,
+  value,
+  placeholder = '0.00',
+  onChangeText,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChangeText: (value: string) => void;
+}) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacing.md,
+        minHeight: 48,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        borderRadius: theme.radius.md,
+        backgroundColor: theme.glass.surface,
+        borderWidth: 1,
+        borderColor: theme.glass.border,
+        ...shadow.glassSm,
+      }}
+    >
+      <AppText weight="800" style={{ flex: 1 }} numberOfLines={1}>{label}</AppText>
+      <View style={{ width: 132, flexShrink: 0 }}>
+        <TextField
+          keyboardType="decimal-pad"
+          value={value}
+          placeholder={placeholder}
+          onChangeText={onChangeText}
+          style={{ width: '100%', minHeight: 40, margin: 0, paddingHorizontal: theme.spacing.sm, textAlign: 'right', fontWeight: '700' }}
+        />
+      </View>
+    </View>
+  );
+}

package/src/checkout/index.ts

@@ -0,0 +1,5 @@
+export { CheckoutDrawerFrame } from './CheckoutDrawerFrame';
+export { CheckoutSelectList, type CheckoutSelectOption } from './CheckoutSelectList';
+export { CheckoutPickerButton } from './CheckoutPickerButton';
+export { PaymentAmountRow } from './PaymentAmountRow';
+export { CheckoutSummary, type CheckoutSummaryItem } from './CheckoutSummary';

package/src/chrome/ActionChipBar.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useObiStyles } from '@obisoft/ui';
+import { SectionBlock } from './SectionBlock';
+
+export type ActionChipBarProps = {
+  title?: string;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Wrap action button groups (export / PDF / print) under an optional section title. */
+export function ActionChipBar({ title = 'Acciones', children, style }: ActionChipBarProps) {
+  const ui = useObiStyles();
+  return (
+    <SectionBlock title={title} style={style}>
+      <View style={ui.chipWrap}>{children}</View>
+    </SectionBlock>
+  );
+}

package/src/chrome/DetailRowsCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { AppText, Card, useObiStyles } from '@obisoft/ui';
+
+export type DetailAmountRow = {
+  label: string;
+  value: string;
+  strong?: boolean;
+};
+
+export type DetailRowsCardProps = {
+  rows: DetailAmountRow[];
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Card of label/value rows used in cash reconciliation and similar summaries. */
+export function DetailRowsCard({ rows, style }: DetailRowsCardProps) {
+  const ui = useObiStyles();
+  return (
+    <Card style={[ui.gapSm, style]}>
+      {rows.map(row => (
+        <View key={`${row.label}-${row.value}`} style={ui.formRow}>
+          <AppText muted={!row.strong} weight={row.strong ? '900' : undefined}>
+            {row.label}
+          </AppText>
+          <AppText weight="900">{row.value}</AppText>
+        </View>
+      ))}
+    </Card>
+  );
+}

package/src/chrome/SectionBlock.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { AppText, useObiStyles } from '@obisoft/ui';
+
+export type SectionBlockProps = {
+  title: string;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Domain section chrome: uppercase label + content gap. */
+export function SectionBlock({ title, children, style }: SectionBlockProps) {
+  const ui = useObiStyles();
+  return (
+    <View style={[ui.formSection, style]}>
+      <AppText style={ui.sectionLabel}>{title}</AppText>
+      {children}
+    </View>
+  );
+}

package/src/chrome/index.ts

@@ -0,0 +1,3 @@
+export { SectionBlock, type SectionBlockProps } from './SectionBlock';
+export { DetailRowsCard, type DetailRowsCardProps, type DetailAmountRow } from './DetailRowsCard';
+export { ActionChipBar, type ActionChipBarProps } from './ActionChipBar';

package/src/dashboard/ActivityList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Card, ObiText, useObiTheme } from '@obisoft/ui';
+
+export type DashboardActivityItem = {
+  key: string;
+  title: string;
+  subtitle: string;
+  amount: string;
+};
+
+export function ActivityList({ items, emptyText = 'No hay actividad reciente para mostrar.' }: { items: DashboardActivityItem[]; emptyText?: string }) {
+  const theme = useObiTheme();
+  return (
+    <Card variant="glass" padding={0}>
+      {items.length ? items.map((item, index) => (
+        <View
+          key={item.key}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: theme.spacing.md,
+            padding: theme.spacing.md,
+            borderBottomWidth: index < items.length - 1 ? 1 : 0,
+            borderBottomColor: theme.colors.separator,
+          }}
+        >
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <ObiText weight="800" numberOfLines={1}>{item.title}</ObiText>
+            <ObiText variant="caption" muted numberOfLines={1}>{item.subtitle}</ObiText>
+          </View>
+          <ObiText weight="800">{item.amount}</ObiText>
+        </View>
+      )) : (
+        <View style={{ padding: theme.spacing.md }}>
+          <ObiText muted>{emptyText}</ObiText>
+        </View>
+      )}
+    </Card>
+  );
+}

package/src/dashboard/CompanyStatusGrid.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+import { ObiText, shadow, useObiTheme } from '@obisoft/ui';
+
+export type CompanyStatusItem = { label: string; value: string };
+
+export function CompanyStatusGrid({ items }: { items: CompanyStatusItem[] }) {
+  const theme = useObiTheme();
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: theme.spacing.md }}>
+      {items.map(item => (
+        <View
+          key={item.label}
+          style={{
+            flex: 1,
+            minWidth: 120,
+            backgroundColor: theme.glass.surface,
+            borderRadius: theme.radius.lg,
+            padding: theme.spacing.md,
+            gap: theme.spacing.xs,
+            borderWidth: 1,
+            borderColor: theme.glass.border,
+            ...shadow.glassSm,
+          }}
+        >
+          <ObiText variant="caption" weight="700" muted style={{ letterSpacing: 0.8, textTransform: 'uppercase' }}>
+            {item.label}
+          </ObiText>
+          <ObiText weight="800">{item.value}</ObiText>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/dashboard/DashboardHeader.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View } from 'react-native';
+import { GlassSurface, IconButton, ObiText, useObiTheme } from '@obisoft/ui';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export function DashboardHeader({
+  greeting,
+  company,
+  onMenuPress,
+  right,
+}: {
+  greeting: string;
+  company: string;
+  onMenuPress: () => void;
+  right?: React.ReactNode;
+}) {
+  const theme = useObiTheme();
+  const insets = useSafeAreaInsets();
+  return (
+    <GlassSurface
+      variant="chrome"
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacing.md,
+        paddingHorizontal: theme.spacing.lg,
+        paddingTop: insets.top + theme.spacing.md,
+        paddingBottom: theme.spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.glass.borderSoft,
+      }}
+    >
+      <IconButton icon="menu" accessibilityLabel="Abrir menú" onPress={onMenuPress} variant="ghost" />
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <ObiText variant="subtitle" weight="900" numberOfLines={1}>{greeting}</ObiText>
+        <ObiText variant="caption" muted numberOfLines={1}>{company}</ObiText>
+      </View>
+      {right}
+    </GlassSurface>
+  );
+}

package/src/dashboard/DashboardSection.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+import { ObiText, useObiTheme } from '@obisoft/ui';
+
+export function DashboardSection({ title, children }: { title: string; children: React.ReactNode }) {
+  const theme = useObiTheme();
+  return (
+    <View style={{ gap: theme.spacing.md }}>
+      <ObiText variant="caption" weight="800" muted style={{ letterSpacing: 0.8, textTransform: 'uppercase' }}>
+        {title}
+      </ObiText>
+      {children}
+    </View>
+  );
+}

package/src/dashboard/QuickActionGrid.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { Icon, type IconName, ObiText, shadow, useObiTheme } from '@obisoft/ui';
+
+export type DashboardQuickAction = {
+  key: string;
+  label: string;
+  icon: IconName;
+  color: string;
+  onPress: () => void;
+};
+
+export function QuickActionGrid({ actions }: { actions: DashboardQuickAction[] }) {
+  const theme = useObiTheme();
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: theme.spacing.sm }}>
+      {actions.map(action => (
+        <Pressable
+          key={action.key}
+          accessibilityRole="button"
+          accessibilityLabel={action.label}
+          onPress={action.onPress}
+          style={({ pressed }) => ({
+            width: '31%',
+            minWidth: 96,
+            flexGrow: 1,
+            minHeight: 92,
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: theme.spacing.sm,
+            padding: theme.spacing.md,
+            borderRadius: theme.radius.lg,
+            backgroundColor: theme.glass.surface,
+            borderWidth: 1,
+            borderColor: theme.glass.border,
+            opacity: pressed ? 0.74 : 1,
+            ...shadow.glassSm,
+          })}
+        >
+          <View
+            style={{
+              width: 42,
+              height: 42,
+              borderRadius: theme.radius.md,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: `${action.color}18`,
+            }}
+          >
+            <Icon name={action.icon} size={22} color={action.color} />
+          </View>
+          <ObiText variant="caption" weight="800" style={{ textAlign: 'center' }} numberOfLines={2}>
+            {action.label}
+          </ObiText>
+        </Pressable>
+      ))}
+    </View>
+  );
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { DashboardSection } from './dashboard/DashboardSection';
+export { QuickActionGrid, type DashboardQuickAction } from './dashboard/QuickActionGrid';
+export { ActivityList, type DashboardActivityItem } from './dashboard/ActivityList';
+export { CompanyStatusGrid, type CompanyStatusItem } from './dashboard/CompanyStatusGrid';
+export { DashboardHeader } from './dashboard/DashboardHeader';
+
+export * from './pos';
+export * from './checkout';
+export * from './chrome';
+export { useVentasStyles } from './styles/useVentasStyles';

package/src/pos/PosCategoryChips.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Pressable, ScrollView } from 'react-native';
+import { AppText, Icon, type IconName, shadow, useObiTheme } from '@obisoft/ui';
+
+export type PosCategoryChip = {
+  key: string;
+  label: string;
+  icon?: IconName;
+};
+
+export function PosCategoryChips({
+  items,
+  selectedKey,
+  onSelect,
+}: {
+  items: PosCategoryChip[];
+  selectedKey: string;
+  onSelect: (key: string) => void;
+}) {
+  const theme = useObiTheme();
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      style={{ flexGrow: 0, flexShrink: 0 }}
+      contentContainerStyle={{ gap: 6, alignItems: 'center' }}
+    >
+      {items.map(item => {
+        const selected = item.key === selectedKey;
+        return (
+          <Pressable
+            key={item.key}
+            accessibilityRole="button"
+            accessibilityState={{ selected }}
+            onPress={() => onSelect(item.key)}
+            style={({ pressed }) => [
+              {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+                paddingHorizontal: 10,
+                paddingVertical: 5,
+                borderRadius: theme.radius.pill,
+                backgroundColor: selected ? theme.colors.primary : theme.glass.surface,
+                borderWidth: 1,
+                borderColor: selected ? theme.colors.primary : theme.glass.border,
+                maxWidth: 180,
+                opacity: pressed ? 0.74 : 1,
+              },
+              selected ? null : shadow.glassSm,
+            ]}
+          >
+            {item.icon ? (
+              <Icon
+                name={item.icon}
+                size={14}
+                color={selected ? theme.colors.onPrimary : theme.colors.textMuted}
+              />
+            ) : null}
+            <AppText
+              numberOfLines={1}
+              weight="700"
+              style={{
+                fontSize: 12,
+                color: selected ? theme.colors.onPrimary : theme.colors.textMuted,
+              }}
+            >
+              {item.label}
+            </AppText>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}

package/src/pos/PosCategoryTile.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { AppText, useObiTheme } from '@obisoft/ui';
+
+export function PosCategoryTile({
+  name,
+  backgroundColor,
+  foregroundColor,
+  selected,
+  onPress,
+}: {
+  name: string;
+  backgroundColor: string;
+  foregroundColor: string;
+  selected?: boolean;
+  onPress: () => void;
+}) {
+  const theme = useObiTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: Boolean(selected) }}
+      onPress={onPress}
+      style={({ pressed }) => ({
+        flex: 1,
+        minHeight: 72,
+        borderRadius: 8,
+        padding: theme.spacing.sm,
+        justifyContent: 'center',
+        overflow: 'hidden',
+        backgroundColor,
+        borderWidth: selected ? 2 : 0,
+        borderColor: selected ? theme.colors.primary : 'transparent',
+        opacity: pressed ? 0.74 : 1,
+      })}
+    >
+      <AppText numberOfLines={3} style={{ fontSize: 16, fontWeight: '700', textAlign: 'center', color: foregroundColor }}>
+        {name}
+      </AppText>
+    </Pressable>
+  );
+}

package/src/pos/PosDock.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import { GlassSurface, shadow, useObiTheme } from '@obisoft/ui';
+
+export function PosDock({ children }: { children: React.ReactNode }) {
+  const theme = useObiTheme();
+  return (
+    <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,
+        ...shadow.top,
+      }}
+    >
+      <View style={{ flexDirection: 'row', width: '100%', gap: theme.spacing.sm }} collapsable={false}>
+        {children}
+      </View>
+    </GlassSurface>
+  );
+}

package/src/pos/PosProductTile.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Image, Pressable, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { AppText, useObiTheme } from '@obisoft/ui';
+
+export type PosProductTileProps = {
+  name: string;
+  priceLabel: string;
+  stockLabel: string;
+  backgroundColor: string;
+  foregroundColor: string;
+  mutedForegroundColor: string;
+  imageUri?: string | null;
+  initial?: string;
+  available?: boolean;
+  selected?: boolean;
+  onPress: () => void;
+  onImageError?: () => void;
+};
+
+export function PosProductTile({
+  name,
+  priceLabel,
+  stockLabel,
+  backgroundColor,
+  foregroundColor,
+  mutedForegroundColor,
+  imageUri,
+  initial = 'P',
+  available = true,
+  selected,
+  onPress,
+  onImageError,
+}: PosProductTileProps) {
+  const theme = useObiTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !available, selected: Boolean(selected) }}
+      disabled={!available}
+      onPress={onPress}
+      style={({ pressed }) => ({
+        flex: 1,
+        minHeight: 72,
+        borderRadius: 8,
+        overflow: 'hidden',
+        justifyContent: 'flex-end',
+        backgroundColor,
+        borderWidth: selected ? 2 : 0,
+        borderColor: selected ? theme.colors.primary : 'transparent',
+        opacity: !available ? 0.42 : pressed ? 0.76 : 1,
+      })}
+    >
+      {imageUri ? (
+        <>
+          <Image
+            source={{ uri: imageUri }}
+            resizeMode="cover"
+            pointerEvents="none"
+            style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}
+            onError={onImageError}
+          />
+          <LinearGradient
+            pointerEvents="none"
+            colors={['rgba(15,23,42,0)', 'rgba(15,23,42,0.18)', 'rgba(15,23,42,0.72)', 'rgba(15,23,42,0.92)']}
+            locations={[0, 0.34, 0.72, 1]}
+            style={{ position: 'absolute', left: 0, right: 0, top: '24%', bottom: 0 }}
+          />
+        </>
+      ) : (
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor,
+          }}
+        >
+          <AppText style={{ fontSize: 22, fontWeight: '800', color: foregroundColor }}>{initial}</AppText>
+        </View>
+      )}
+
+      <View style={{ zIndex: 2, paddingHorizontal: 6, paddingTop: 4, paddingBottom: 5, gap: 2 }}>
+        <AppText
+          numberOfLines={1}
+          style={{
+            fontSize: 11,
+            fontWeight: '700',
+            lineHeight: 13,
+            color: foregroundColor,
+            textShadowColor: imageUri ? 'rgba(15,23,42,0.45)' : 'transparent',
+            textShadowOffset: { width: 0, height: 1 },
+            textShadowRadius: imageUri ? 2 : 0,
+          }}
+        >
+          {name}
+        </AppText>
+        <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: theme.spacing.sm }}>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <AppText style={{ fontSize: 8, fontWeight: '700', letterSpacing: 0.3, textTransform: 'uppercase', color: mutedForegroundColor }}>
+              Precio
+            </AppText>
+            <AppText numberOfLines={1} style={{ fontSize: 11, fontWeight: '800', lineHeight: 13, color: foregroundColor }}>
+              {priceLabel}
+            </AppText>
+          </View>
+          <View style={{ alignItems: 'flex-end', minWidth: 0 }}>
+            <AppText style={{ fontSize: 8, fontWeight: '700', letterSpacing: 0.3, textTransform: 'uppercase', color: mutedForegroundColor }}>
+              Existencia
+            </AppText>
+            <AppText numberOfLines={1} style={{ fontSize: 11, fontWeight: '800', lineHeight: 13, color: foregroundColor }}>
+              {stockLabel}
+            </AppText>
+          </View>
+        </View>
+      </View>
+    </Pressable>
+  );
+}

package/src/pos/PosTabBar.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { AppText, type IconName, Icon, useObiTheme } from '@obisoft/ui';
+
+export type PosTabItem = {
+  key: string;
+  label: string;
+  selected?: boolean;
+  icon?: IconName;
+  onPress: () => void;
+};
+
+export function PosTabBar({ items }: { items: PosTabItem[] }) {
+  const theme = useObiTheme();
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        backgroundColor: theme.glass.chrome,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.glass.borderSoft,
+      }}
+    >
+      {items.map(item => (
+        <Pressable
+          key={item.key}
+          accessibilityRole="tab"
+          accessibilityState={{ selected: Boolean(item.selected) }}
+          onPress={item.onPress}
+          style={({ pressed }) => ({
+            flex: 1,
+            minHeight: 44,
+            paddingVertical: theme.spacing.sm,
+            paddingHorizontal: theme.spacing.xs,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            gap: 6,
+            borderBottomWidth: 2,
+            borderBottomColor: item.selected ? theme.colors.primary : 'transparent',
+            opacity: pressed ? 0.7 : 1,
+          })}
+        >
+          {item.icon ? (
+            <Icon
+              name={item.icon}
+              size={15}
+              color={item.selected ? theme.colors.primary : theme.colors.textMuted}
+            />
+          ) : null}
+          <AppText
+            numberOfLines={1}
+            style={{
+              fontSize: 12,
+              fontWeight: '800',
+              letterSpacing: 0.7,
+              color: item.selected ? theme.colors.primary : theme.colors.textMuted,
+              textTransform: 'uppercase',
+            }}
+          >
+            {item.label}
+          </AppText>
+        </Pressable>
+      ))}
+    </View>
+  );
+}

package/src/pos/PosTicket.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { Pressable, ScrollView, Vibration, View } from 'react-native';
+import { AppText, Icon, useObiTheme } from '@obisoft/ui';
+
+export type PosTicketItem = {
+  id: string;
+  quantity: number;
+  title: string;
+};
+
+export function PosTicket({
+  items,
+  totalLabel,
+  taxLabel,
+  emptyLabel = 'Toca un producto para agregarlo',
+  onEdit,
+  onRemove,
+}: {
+  items: PosTicketItem[];
+  totalLabel: string;
+  taxLabel?: string;
+  emptyLabel?: string;
+  onEdit?: (id: string) => void;
+  onRemove?: (id: string) => void;
+}) {
+  const theme = useObiTheme();
+  const [menuId, setMenuId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (menuId && !items.some(item => item.id === menuId)) setMenuId(null);
+  }, [items, menuId]);
+
+  useEffect(() => {
+    if (!menuId) return;
+    const timer = setTimeout(() => setMenuId(null), 3500);
+    return () => clearTimeout(timer);
+  }, [menuId]);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        backgroundColor: theme.glass.chrome,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        minHeight: 116,
+        maxHeight: 164,
+        gap: theme.spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.separator,
+      }}
+    >
+      <ScrollView
+        style={{ flex: 1, maxHeight: 140 }}
+        contentContainerStyle={{ gap: theme.spacing.xs }}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        onScrollBeginDrag={() => setMenuId(null)}
+      >
+        {items.length ? items.map(item => {
+          const menuOpen = menuId === item.id;
+          return (
+            <View key={item.id} style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minHeight: 28 }}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={`${item.quantity} × ${item.title}`}
+                accessibilityHint="Toca para editar. Mantén pulsado para eliminar."
+                delayLongPress={320}
+                onPress={() => {
+                  if (menuOpen) {
+                    setMenuId(null);
+                    return;
+                  }
+                  onEdit?.(item.id);
+                }}
+                onLongPress={() => {
+                  if (!onRemove) return;
+                  Vibration.vibrate(12);
+                  setMenuId(item.id);
+                }}
+                style={({ pressed }) => ({ flex: 1, minWidth: 0, paddingVertical: 3, opacity: pressed ? 0.7 : 1 })}
+              >
+                <AppText
+                  numberOfLines={1}
+                  style={{
+                    fontSize: 16,
+                    fontWeight: '800',
+                    color: theme.colors.primary,
+                    textDecorationLine: onEdit ? 'underline' : 'none',
+                    textDecorationColor: theme.colors.primary,
+                  }}
+                >
+                  {item.quantity} × {item.title}
+                </AppText>
+              </Pressable>
+              <View style={{ width: 36, height: 36, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                {menuOpen && onRemove ? (
+                  <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={`Eliminar ${item.title}`}
+                    hitSlop={6}
+                    onPress={() => {
+                      onRemove(item.id);
+                      setMenuId(null);
+                    }}
+                    style={({ pressed }) => ({
+                      width: 36,
+                      height: 36,
+                      borderRadius: theme.radius.sm,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      backgroundColor: theme.colors.dangerSoft,
+                      borderWidth: 1,
+                      borderColor: theme.colors.dangerBorder,
+                      opacity: pressed ? 0.72 : 1,
+                    })}
+                  >
+                    <Icon name="trash-2" size={16} color={theme.colors.danger} />
+                  </Pressable>
+                ) : onEdit ? (
+                  <Icon name="pencil" size={14} color={theme.colors.textMuted} />
+                ) : null}
+              </View>
+            </View>
+          );
+        }) : (
+          <AppText muted style={{ paddingTop: theme.spacing.xs }}>{emptyLabel}</AppText>
+        )}
+      </ScrollView>
+      <View style={{ minWidth: 118, alignItems: 'flex-end', justifyContent: 'flex-start' }}>
+        <AppText
+          numberOfLines={1}
+          adjustsFontSizeToFit
+          minimumFontScale={0.7}
+          style={{
+            fontSize: 46,
+            lineHeight: 50,
+            fontWeight: '800',
+            letterSpacing: -1.4,
+            color: theme.colors.text,
+          }}
+        >
+          {totalLabel}
+        </AppText>
+        {taxLabel ? <AppText muted style={{ marginTop: 2, fontSize: 11, fontWeight: '700' }}>{taxLabel}</AppText> : null}
+      </View>
+    </View>
+  );
+}

package/src/pos/QuantityStepper.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { AppText, Icon, shadow, useObiTheme } from '@obisoft/ui';
+
+export function QuantityStepper({
+  value,
+  onDecrement,
+  onIncrement,
+  disabled,
+  decrementDisabled,
+  incrementDisabled,
+}: {
+  value: string | number;
+  onDecrement: () => void;
+  onIncrement: () => void;
+  disabled?: boolean;
+  decrementDisabled?: boolean;
+  incrementDisabled?: boolean;
+}) {
+  const theme = useObiTheme();
+  const makeButtonStyle = (buttonDisabled: boolean) => ({ pressed }: { pressed: boolean }) => ({
+    width: 36,
+    height: 36,
+    borderRadius: theme.radius.sm,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    backgroundColor: theme.colors.surfaceMuted,
+    opacity: buttonDisabled ? 0.35 : pressed ? 0.72 : 1,
+  });
+  const decDisabled = Boolean(disabled || decrementDisabled);
+  const incDisabled = Boolean(disabled || incrementDisabled);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        minHeight: 48,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: theme.radius.md,
+        backgroundColor: theme.glass.input,
+        paddingHorizontal: theme.spacing.sm,
+        opacity: disabled ? 0.55 : 1,
+        ...shadow.xs,
+      }}
+    >
+      <Pressable disabled={decDisabled} onPress={onDecrement} style={makeButtonStyle(decDisabled)} accessibilityLabel="Disminuir cantidad">
+        <Icon name="minus" size={16} color={theme.colors.text} />
+      </Pressable>
+      <AppText style={{ flex: 1, textAlign: 'center', fontSize: 18, fontWeight: '800', color: theme.colors.text }}>
+        {value}
+      </AppText>
+      <Pressable disabled={incDisabled} onPress={onIncrement} style={makeButtonStyle(incDisabled)} accessibilityLabel="Aumentar cantidad">
+        <Icon name="plus" size={16} color={theme.colors.text} />
+      </Pressable>
+    </View>
+  );
+}

package/src/pos/index.ts

@@ -0,0 +1,7 @@
+export { PosTabBar, type PosTabItem } from './PosTabBar';
+export { PosCategoryChips, type PosCategoryChip } from './PosCategoryChips';
+export { PosProductTile, type PosProductTileProps } from './PosProductTile';
+export { PosCategoryTile } from './PosCategoryTile';
+export { PosDock } from './PosDock';
+export { PosTicket, type PosTicketItem } from './PosTicket';
+export { QuantityStepper } from './QuantityStepper';

package/src/styles/useVentasStyles.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { useObiTheme } from '@obisoft/ui';
+
+export function useVentasStyles() {
+  const theme = useObiTheme();
+  return useMemo(() => StyleSheet.create({
+    cartEditorLabel: {
+      fontSize: 11,
+      fontWeight: '700',
+      color: theme.colors.textMuted,
+      letterSpacing: 0.4,
+      textTransform: 'uppercase',
+    },
+    cartEditorTotalRow: {
+      flexDirection: 'row',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
+      paddingVertical: theme.spacing.sm,
+    },
+    cartEditorTotalValue: {
+      fontSize: 22,
+      fontWeight: '800',
+      color: theme.colors.text,
+    },
+    posRoot: { flex: 1, backgroundColor: 'transparent' },
+    posCatalogHeader: {
+      paddingHorizontal: theme.spacing.sm,
+      paddingTop: theme.spacing.sm,
+      paddingBottom: 4,
+      gap: 6,
+    },
+  }), [theme]);
+}