@tallyui/components 1.0.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tallyui/components",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "Universal POS UI components for Tally UI",
   "main": "./dist/index.js",
@@ -15,17 +15,39 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/__tests__/**"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TallyUI/tallyui.git",
+    "directory": "packages/components"
+  },
   "peerDependencies": {
+    "@tallyui/core": "2.0.0",
+    "@tallyui/primitives": "2.0.0",
+    "@tallyui/theme": "2.0.0",
     "react": ">=18",
     "react-native": ">=0.74",
-    "@tallyui/core": "0.2.0",
-    "@tallyui/theme": "0.2.0"
+    "react-native-svg": ">=15"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "@tallyui/pos": "2.0.0"
   },
   "devDependencies": {
-    "@types/react": ">=18"
+    "@tallyui/connector-medusa": "2.0.0",
+    "@tallyui/connector-vendure": "2.0.0",
+    "@tallyui/connector-woocommerce": "2.0.0",
+    "@tallyui/mock-api": "2.0.0",
+    "@types/react": ">=18",
+    "react": "^19.2.4",
+    "react-native-svg": "15.12.1",
+    "rxdb": "16.21.1",
+    "rxjs": "7.8.2"
   },
   "scripts": {
     "build": "tsup",

package/src/cart/cart-line-actions.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface CartAction {
+  id: string;
+  label: string;
+  onPress: () => void;
+  color?: string;
+  iconSlot?: ReactNode;
+}
+
+export interface CartLineActionsProps extends Omit<ViewProps, 'children'> {
+  children: ReactNode;
+  actions: CartAction[];
+  className?: string;
+}
+
+export function CartLineActions({ children, actions, className, ...viewProps }: CartLineActionsProps) {
+  return (
+    <View className={cn('flex-row items-center', className)} {...viewProps}>
+      <View className="flex-1">{children}</View>
+      <View className="flex-row gap-1 px-2">
+        {actions.map((action) => (
+          <Pressable
+            key={action.id}
+            onPress={action.onPress}
+            className="rounded-md px-2 py-1.5"
+          >
+            {action.iconSlot}
+            <Text className={cn('text-xs font-medium', action.color ?? 'text-destructive')}>
+              {action.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/cart/cart-line.tsx

@@ -1,20 +1,13 @@
-import { Text, View, type ViewProps } from 'react-native';
-
-import { useProductTraits } from '@tallyui/core';
+import { formatMoney, type Money } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { Text, HStack, VStack, type HStackProps } from '../ui';
 
-export interface CartLineItem {
-  /** The raw product document (connector-specific shape) */
-  doc: any;
-  /** Quantity in cart */
+export interface CartLineProps extends Omit<HStackProps, 'children'> {
+  name: string;
   quantity: number;
-}
-
-export interface CartLineProps extends Omit<ViewProps, 'children'> {
-  /** The cart line item */
-  item: CartLineItem;
-  /** Currency symbol (defaults to '$') */
-  currencySymbol?: string;
+  unitPrice: Money;
+  lineTotal: Money;
+  locale?: string;
   className?: string;
 }
 
@@ -22,28 +15,21 @@ export interface CartLineProps extends Omit<ViewProps, 'children'> {
  * Displays a single cart line item: product name, quantity, and line total.
  *
  * ```tsx
- * <CartLine item={{ doc: productDocument, quantity: 2 }} />
+ * <CartLine name="Coffee" quantity={2} unitPrice={unitPrice} lineTotal={lineTotal} />
  * ```
  */
-export function CartLine({ item, currencySymbol = '$', className, ...viewProps }: CartLineProps) {
-  const { getName, getPrice } = useProductTraits();
-  const name = getName(item.doc);
-  const unitPrice = getPrice(item.doc);
-  const lineTotal = unitPrice
-    ? (parseFloat(unitPrice) * item.quantity).toFixed(2)
-    : null;
-
+export function CartLine({ name, quantity, unitPrice, lineTotal, locale, className, ...props }: CartLineProps) {
   return (
-    <View className={cn('flex-row items-center gap-3 px-3 py-2.5', className)} {...viewProps}>
-      <View className="flex-1 gap-0.5">
-        <Text className="text-sm font-medium text-foreground" numberOfLines={1}>{name}</Text>
-        <Text className="text-xs text-muted">
-          {unitPrice ? `${currencySymbol}${unitPrice} × ${item.quantity}` : `× ${item.quantity}`}
+    <HStack className={cn('px-3 py-2.5', className)} {...props}>
+      <VStack space="none" className="flex-1 gap-0.5">
+        <Text className="text-sm font-medium" numberOfLines={1}>{name}</Text>
+        <Text className="text-xs text-muted-foreground">
+          {`${formatMoney(unitPrice, locale) ?? '—'} × ${quantity}`}
         </Text>
-      </View>
-      <Text className="text-sm font-semibold text-foreground">
-        {lineTotal ? `${currencySymbol}${lineTotal}` : '—'}
+      </VStack>
+      <Text className="text-sm font-semibold">
+        {formatMoney(lineTotal, locale) ?? '—'}
       </Text>
-    </View>
+    </HStack>
   );
 }

package/src/cart/cart-note-input.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Pressable, Text, TextInput, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface CartNoteInputProps extends Omit<ViewProps, 'children'> {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function CartNoteInput({
+  value,
+  onChangeText,
+  placeholder = 'Order note...',
+  className,
+  ...viewProps
+}: CartNoteInputProps) {
+  const [expanded, setExpanded] = useState(value.length > 0);
+
+  if (!expanded) {
+    return (
+      <Pressable
+        onPress={() => setExpanded(true)}
+        className={cn('flex-row items-center gap-1.5 px-3 py-2', className)}
+        {...viewProps}
+      >
+        <Text className="text-xs text-primary">Add note</Text>
+      </Pressable>
+    );
+  }
+
+  return (
+    <View className={cn('px-3 py-2', className)} {...viewProps}>
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColorClassName="accent-muted-foreground"
+        multiline
+        className="min-h-[3rem] rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground"
+      />
+    </View>
+  );
+}

package/src/cart/cart-panel.tsx

@@ -1,15 +1,19 @@
-import type { ReactNode } from 'react';
-import { ScrollView, View, type ViewProps } from 'react-native';
+import type { JSX, ReactNode } from 'react';
+import { ScrollView, View } from 'react-native';
 import { cn } from '@tallyui/theme';
-import type { CartLineItem } from './cart-line';
+import { VStack, type VStackProps } from '../ui';
 
-export interface CartPanelProps extends Omit<ViewProps, 'children'> {
+export interface CartPanelProps<T> extends Omit<VStackProps, 'children'> {
   /** Cart line items to render */
-  items: CartLineItem[];
+  items: T[];
   /** Render function for each cart line */
-  renderItem: (item: CartLineItem, index: number) => ReactNode;
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Row key per item; defaults to the item's string/number `id`, else its index. Override for items without `id`, or to key by something else. */
+  keyExtractor?: (item: T, index: number) => string;
   /** Header slot (e.g. customer info) */
   header?: ReactNode;
+  /** Content after the lines, inside the scrolling region (e.g. discount chips); shown even with no lines, so it isn't hidden by an empty cart */
+  afterItems?: ReactNode;
   /** Footer slot (e.g. totals, checkout button) */
   footer?: ReactNode;
   /** Content shown when items is empty */
@@ -20,46 +24,55 @@ export interface CartPanelProps extends Omit<ViewProps, 'children'> {
 /**
  * A scrollable cart panel with header/footer slots.
  *
- * Composes CartLine (or custom renderItem) into a scrollable list
- * with optional header, footer, and empty state.
+ * Composes CartLine (or custom renderItem) into a scrollable list with an
+ * optional header. The footer stays pinned at the bottom at every height;
+ * afterItems renders inside the scrolling region, after the lines.
  *
  * ```tsx
  * <CartPanel
  *   items={cartItems}
- *   renderItem={(item) => <CartLine item={item} />}
+ *   renderItem={(item) => <CartLine {...item} />}
+ *   keyExtractor={(line) => line.id}
  *   header={<CustomerCard doc={customer} />}
- *   footer={<CartTotal items={cartItems} />}
+ *   afterItems={<DiscountChips discounts={discounts} />}
+ *   footer={<CartTotal subtotal={subtotal} total={total} />}
  * />
  * ```
  */
-export function CartPanel({
+function defaultKey(item: unknown, index: number): string {
+  const id = (item as { id?: unknown } | null)?.id;
+  return typeof id === 'string' || typeof id === 'number' ? String(id) : String(index);
+}
+
+export function CartPanel<T>({
   items,
   renderItem,
+  keyExtractor,
   header,
+  afterItems,
   footer,
   emptyState,
   className,
-  ...viewProps
-}: CartPanelProps) {
+  ...props
+}: CartPanelProps<T>): JSX.Element {
   const hasItems = items.length > 0;
 
   return (
-    <View className={cn('flex-1', className)} {...viewProps}>
+    <VStack space="none" className={cn('flex-1 min-h-0', className)} {...props}>
       {header && <View className="border-b border-border px-3 py-2">{header}</View>}
 
-      {hasItems ? (
-        <ScrollView className="flex-1">
-          {items.map((item, index) => (
-            <View key={item.doc?.id ?? index}>
-              {renderItem(item, index)}
-            </View>
-          ))}
-        </ScrollView>
-      ) : (
-        emptyState ?? null
-      )}
+      <ScrollView className="flex-1 min-h-0" contentContainerClassName="flex-grow">
+        {hasItems
+          ? items.map((item, index) => (
+              <View key={keyExtractor ? keyExtractor(item, index) : defaultKey(item, index)}>
+                {renderItem(item, index)}
+              </View>
+            ))
+          : (emptyState ?? null)}
+        {afterItems}
+      </ScrollView>
 
       {footer && <View className="border-t border-border px-3 py-2">{footer}</View>}
-    </View>
+    </VStack>
   );
 }

package/src/cart/cart-total.tsx

@@ -1,64 +1,60 @@
-import { Text, View, type ViewProps } from 'react-native';
-
-import { useProductTraits } from '@tallyui/core';
+import { formatMoney, type Money } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
-import type { CartLineItem } from './cart-line';
-
-export interface CartTotalProps extends Omit<ViewProps, 'children'> {
-  /** All cart line items */
-  items: CartLineItem[];
-  /** Currency symbol (defaults to '$') */
-  currencySymbol?: string;
-  /** Tax rate as a decimal (e.g. 0.1 for 10%). Defaults to 0. */
-  taxRate?: number;
-  /** Label for the tax line (defaults to 'Tax') */
-  taxLabel?: string;
+import { Text, HStack, VStack, type VStackProps } from '../ui';
+
+export interface CartTotalProps extends Omit<VStackProps, 'children'> {
+  subtotal: Money;
+  taxLines?: Array<{ label: string; amount: Money }>;
+  discount?: Money;
+  total: Money;
+  /** The tax is already in the subtotal (an inclusive display), so its rows read "incl." rather than add up. */
+  taxInclusive?: boolean;
+  locale?: string;
   className?: string;
 }
 
 /**
- * Displays a cart summary with subtotal, optional tax, and total.
+ * Displays a cart summary: subtotal, optional discount, optional tax, and total, in the receipt's order.
  *
  * ```tsx
- * <CartTotal items={cartItems} taxRate={0.1} />
+ * <CartTotal subtotal={subtotal} discount={discount} taxLines={taxLines} total={total} />
  * ```
  */
 export function CartTotal({
-  items,
-  currencySymbol = '$',
-  taxRate = 0,
-  taxLabel = 'Tax',
+  subtotal,
+  taxLines,
+  discount,
+  total,
+  taxInclusive,
+  locale,
   className,
-  ...viewProps
+  ...props
 }: CartTotalProps) {
-  const { getPrice } = useProductTraits();
-
-  const subtotal = items.reduce((sum, item) => {
-    const price = getPrice(item.doc);
-    return sum + (price ? parseFloat(price) * item.quantity : 0);
-  }, 0);
-
-  const tax = subtotal * taxRate;
-  const total = subtotal + tax;
-
   return (
-    <View className={cn('gap-1.5 px-3 py-3', className)} {...viewProps}>
-      <View className="flex-row items-center justify-between">
-        <Text className="text-sm text-muted">Subtotal</Text>
-        <Text className="text-sm text-foreground">{currencySymbol}{subtotal.toFixed(2)}</Text>
-      </View>
-
-      {taxRate > 0 && (
-        <View className="flex-row items-center justify-between">
-          <Text className="text-sm text-muted">{taxLabel}</Text>
-          <Text className="text-sm text-foreground">{currencySymbol}{tax.toFixed(2)}</Text>
-        </View>
+    <VStack space="none" className={cn('gap-1.5 px-3 py-3', className)} {...props}>
+      <HStack space="none" className="justify-between">
+        <Text className="text-sm text-muted-foreground">Subtotal</Text>
+        <Text className="text-sm">{formatMoney(subtotal, locale) ?? '—'}</Text>
+      </HStack>
+
+      {discount && discount.amount > 0 && (
+        <HStack space="none" className="justify-between">
+          <Text className="text-sm text-muted-foreground">Discount</Text>
+          <Text className="text-sm">−{formatMoney(discount, locale) ?? '—'}</Text>
+        </HStack>
       )}
 
-      <View className="mt-1.5 flex-row items-center justify-between border-t border-border pt-2">
-        <Text className="text-base font-bold text-foreground">Total</Text>
-        <Text className="text-base font-bold text-foreground">{currencySymbol}{total.toFixed(2)}</Text>
-      </View>
-    </View>
+      {taxLines?.map((line, index) => (
+        <HStack key={index} space="none" className="justify-between">
+          <Text className="text-sm text-muted-foreground">{taxInclusive ? `incl. ${line.label}` : line.label}</Text>
+          <Text className="text-sm">{formatMoney(line.amount, locale) ?? '—'}</Text>
+        </HStack>
+      ))}
+
+      <HStack space="none" className="mt-1.5 justify-between border-t border-border pt-2">
+        <Text className="font-bold">Total</Text>
+        <Text className="font-bold">{formatMoney(total, locale) ?? '—'}</Text>
+      </HStack>
+    </VStack>
   );
 }

package/src/cart/discount-badge.tsx

@@ -0,0 +1,19 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface DiscountBadgeProps extends Omit<ViewProps, 'children'> {
+  label: string;
+  className?: string;
+}
+
+export function DiscountBadge({ label, className, ...viewProps }: DiscountBadgeProps) {
+  return (
+    <View
+      className={cn('flex-row items-center self-start gap-1 rounded-md bg-sale/15 px-1.5 py-0.5', className)}
+      {...viewProps}
+    >
+      <Text className="text-xs font-semibold text-sale">{label}</Text>
+    </View>
+  );
+}

package/src/cart/index.ts

@@ -1,3 +1,6 @@
-export { CartLine, type CartLineProps, type CartLineItem } from './cart-line';
+export { CartLine, type CartLineProps } from './cart-line';
 export { CartTotal, type CartTotalProps } from './cart-total';
 export { CartPanel, type CartPanelProps } from './cart-panel';
+export { DiscountBadge, type DiscountBadgeProps } from './discount-badge';
+export { CartNoteInput, type CartNoteInputProps } from './cart-note-input';
+export { CartLineActions, type CartLineActionsProps, type CartAction } from './cart-line-actions';

package/src/checkout/cash-tendered.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from 'react';
+import { Pressable, Text, TextInput, View, type ViewProps } from 'react-native';
+
+import { formatMoney, minorUnitDigits, moneyFromDecimalString, type Money } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface CashTenderedProps extends Omit<ViewProps, 'children'> {
+  total: Money;
+  defaultAmount?: Money;
+  amount?: Money;
+  onChangeAmount?: (amount: Money) => void;
+  quickAmounts?: Money[];
+  locale?: string;
+  className?: string;
+}
+
+function defaultQuickAmounts(total: Money): Money[] {
+  const unit = 10 ** minorUnitDigits(total.currency);
+  const amounts = [
+    total.amount,
+    Math.ceil(total.amount / (5 * unit)) * 5 * unit,
+    Math.ceil(total.amount / (10 * unit)) * 10 * unit,
+    Math.ceil(total.amount / (20 * unit)) * 20 * unit,
+  ];
+  return [...new Set(amounts)].sort((a, b) => a - b).map((amount) => ({ amount, currency: total.currency }));
+}
+
+export function CashTendered({
+  total,
+  defaultAmount,
+  amount: controlledAmount,
+  onChangeAmount,
+  quickAmounts,
+  locale,
+  className,
+  ...viewProps
+}: CashTenderedProps) {
+  const [internalAmount, setInternalAmount] = useState(defaultAmount ?? total);
+  const amount = controlledAmount ?? internalAmount;
+  const buttons = quickAmounts ?? defaultQuickAmounts(total);
+  const digits = minorUnitDigits(amount.currency);
+  const amountText = String(Math.abs(amount.amount)).padStart(digits + 1, '0');
+  const decimal = (amount.amount < 0 ? '-' : '') + (digits
+    ? `${amountText.slice(0, -digits)}.${amountText.slice(-digits)}` : amountText);
+  const [text, setText] = useState(decimal);
+  const lastTextAmount = useRef(amount);
+
+  useEffect(() => {
+    if (amount.amount !== lastTextAmount.current.amount || amount.currency !== lastTextAmount.current.currency) {
+      setText(decimal);
+      lastTextAmount.current = amount;
+    }
+  }, [amount, decimal]);
+
+  const handleChange = (value: Money) => {
+    if (controlledAmount === undefined) setInternalAmount(value);
+    onChangeAmount?.(value);
+  };
+
+  return (
+    <View className={cn('gap-3', className)} {...viewProps}>
+      <Text className="text-sm font-semibold text-foreground">Cash Tendered</Text>
+      <View className="flex-row flex-wrap gap-2">
+        {buttons.map((val) => (
+          <Pressable
+            key={`${val.currency}:${val.amount}`}
+            onPress={() => handleChange(val)}
+            className={cn(
+              'rounded-lg border px-4 py-2',
+              amount.amount === val.amount && amount.currency === val.currency ? 'border-primary bg-primary' : 'border-input bg-card',
+            )}
+          >
+            <Text
+              className={cn(
+                'text-sm font-semibold',
+                amount.amount === val.amount && amount.currency === val.currency ? 'text-primary-foreground' : 'text-foreground',
+              )}
+            >
+              {formatMoney(val, locale) ?? '—'}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      <TextInput
+        value={text}
+        onChangeText={(text) => {
+          const parsed = moneyFromDecimalString(text, total.currency);
+          if (parsed) {
+            setText(text);
+            lastTextAmount.current = parsed;
+            handleChange(parsed);
+          } else if (text === '' || /^\d+\.$/.test(text)) {
+            setText(text);
+          }
+        }}
+        keyboardType="decimal-pad"
+        className="rounded-lg border border-border bg-card px-3 py-2 text-base text-foreground"
+      />
+    </View>
+  );
+}

package/src/checkout/change-display.tsx

@@ -0,0 +1,19 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { formatMoney, type Money } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface ChangeDisplayProps extends Omit<ViewProps, 'children'> {
+  change: Money;
+  locale?: string;
+  className?: string;
+}
+
+export function ChangeDisplay({ change, locale, className, ...viewProps }: ChangeDisplayProps) {
+  return (
+    <View className={cn('items-center gap-1 rounded-xl bg-muted p-4', className)} {...viewProps}>
+      <Text className="text-sm text-muted-foreground">Change Due</Text>
+      <Text className="text-3xl font-bold text-success">{formatMoney(change, locale) ?? '—'}</Text>
+    </View>
+  );
+}

package/src/checkout/index.ts

@@ -2,3 +2,6 @@ export { PaymentMethodCard, type PaymentMethodCardProps } from './payment-method
 export { OrderSummaryLine, type OrderSummaryLineProps } from './order-summary-line';
 export { PaymentSelector, type PaymentSelectorProps, type PaymentMethod } from './payment-selector';
 export { OrderSummary, type OrderSummaryProps, type OrderSummaryPayment } from './order-summary';
+export { ChangeDisplay, type ChangeDisplayProps } from './change-display';
+export { CashTendered, type CashTenderedProps } from './cash-tendered';
+export { ReceiptPreview, type ReceiptPreviewProps, type ReceiptItem } from './receipt-preview';

package/src/checkout/order-summary-line.tsx

@@ -1,23 +1,22 @@
-import { Text, View, type ViewProps } from 'react-native';
-
 import { cn } from '@tallyui/theme';
+import { Text, HStack, type HStackProps } from '../ui';
 
-export interface OrderSummaryLineProps extends Omit<ViewProps, 'children'> {
+export interface OrderSummaryLineProps extends Omit<HStackProps, 'children'> {
   label: string;
   amount: string;
   bold?: boolean;
   className?: string;
 }
 
-export function OrderSummaryLine({ label, amount, bold = false, className, ...viewProps }: OrderSummaryLineProps) {
+export function OrderSummaryLine({ label, amount, bold = false, className, ...props }: OrderSummaryLineProps) {
   return (
-    <View className={cn('flex-row items-center justify-between', className)} {...viewProps}>
-      <Text className={cn('text-sm', bold ? 'font-bold text-foreground' : 'text-muted')}>
+    <HStack space="none" className={cn('justify-between', className)} {...props}>
+      <Text className={cn('text-sm', bold ? 'font-bold' : 'text-muted-foreground')}>
         {label}
       </Text>
-      <Text className={cn('text-sm', bold ? 'font-bold text-foreground' : 'text-foreground')}>
+      <Text className={cn('text-sm', bold && 'font-bold')}>
         {amount}
       </Text>
-    </View>
+    </HStack>
   );
 }

package/src/checkout/order-summary.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { View } from 'react-native';
 import { cn } from '@tallyui/theme';
+import { VStack, type VStackProps } from '../ui';
 import { OrderSummaryLine } from './order-summary-line';
 
 export interface OrderSummaryPayment {
@@ -8,7 +9,7 @@ export interface OrderSummaryPayment {
   amount: string;
 }
 
-export interface OrderSummaryProps extends Omit<ViewProps, 'children'> {
+export interface OrderSummaryProps extends Omit<VStackProps, 'children'> {
   /** Formatted subtotal string (e.g. "$1199.98") */
   subtotal: string;
   /** Formatted tax amount (optional) */
@@ -53,10 +54,10 @@ export function OrderSummary({
   header,
   footer,
   className,
-  ...viewProps
+  ...props
 }: OrderSummaryProps) {
   return (
-    <View className={cn('gap-1.5 px-3 py-3', className)} {...viewProps}>
+    <VStack space="none" className={cn('gap-1.5 px-3 py-3', className)} {...props}>
       {header && <View className="mb-2">{header}</View>}
 
       <OrderSummaryLine label="Subtotal" amount={subtotal} />
@@ -64,14 +65,14 @@ export function OrderSummary({
       <OrderSummaryLine label="Total" amount={total} bold />
 
       {payments && payments.length > 0 && (
-        <View className="mt-2 gap-1.5 border-t border-border pt-2">
+        <VStack space="none" className="mt-2 gap-1.5 border-t border-border pt-2">
           {payments.map((payment) => (
             <OrderSummaryLine key={payment.label} label={payment.label} amount={payment.amount} />
           ))}
-        </View>
+        </VStack>
       )}
 
       {footer && <View className="mt-2">{footer}</View>}
-    </View>
+    </VStack>
   );
 }