@tallyui/components 1.0.0

package/src/__tests__/search-input.test.tsx

@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { SearchInput } from '../input/search-input';
+
+describe('SearchInput', () => {
+  it('renders with placeholder text', () => {
+    render(<SearchInput value="" onChangeText={() => {}} placeholder="Search products..." />);
+    expect(screen.getByPlaceholderText('Search products...')).toBeDefined();
+  });
+
+  it('displays the current value', () => {
+    render(<SearchInput value="espresso" onChangeText={() => {}} />);
+    expect(screen.getByDisplayValue('espresso')).toBeDefined();
+  });
+
+  it('calls onChangeText when text changes', () => {
+    const onChangeText = vi.fn();
+    render(<SearchInput value="" onChangeText={onChangeText} />);
+    fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'latte' } });
+    expect(onChangeText).toHaveBeenCalledWith('latte');
+  });
+});

package/src/cart/cart-line.tsx

@@ -0,0 +1,49 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { useProductTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface CartLineItem {
+  /** The raw product document (connector-specific shape) */
+  doc: any;
+  /** Quantity in cart */
+  quantity: number;
+}
+
+export interface CartLineProps extends Omit<ViewProps, 'children'> {
+  /** The cart line item */
+  item: CartLineItem;
+  /** Currency symbol (defaults to '$') */
+  currencySymbol?: string;
+  className?: string;
+}
+
+/**
+ * Displays a single cart line item: product name, quantity, and line total.
+ *
+ * ```tsx
+ * <CartLine item={{ doc: productDocument, quantity: 2 }} />
+ * ```
+ */
+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;
+
+  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}`}
+        </Text>
+      </View>
+      <Text className="text-sm font-semibold text-foreground">
+        {lineTotal ? `${currencySymbol}${lineTotal}` : '—'}
+      </Text>
+    </View>
+  );
+}

package/src/cart/cart-panel.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import { ScrollView, View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import type { CartLineItem } from './cart-line';
+
+export interface CartPanelProps extends Omit<ViewProps, 'children'> {
+  /** Cart line items to render */
+  items: CartLineItem[];
+  /** Render function for each cart line */
+  renderItem: (item: CartLineItem, index: number) => ReactNode;
+  /** Header slot (e.g. customer info) */
+  header?: ReactNode;
+  /** Footer slot (e.g. totals, checkout button) */
+  footer?: ReactNode;
+  /** Content shown when items is empty */
+  emptyState?: ReactNode;
+  className?: string;
+}
+
+/**
+ * A scrollable cart panel with header/footer slots.
+ *
+ * Composes CartLine (or custom renderItem) into a scrollable list
+ * with optional header, footer, and empty state.
+ *
+ * ```tsx
+ * <CartPanel
+ *   items={cartItems}
+ *   renderItem={(item) => <CartLine item={item} />}
+ *   header={<CustomerCard doc={customer} />}
+ *   footer={<CartTotal items={cartItems} />}
+ * />
+ * ```
+ */
+export function CartPanel({
+  items,
+  renderItem,
+  header,
+  footer,
+  emptyState,
+  className,
+  ...viewProps
+}: CartPanelProps) {
+  const hasItems = items.length > 0;
+
+  return (
+    <View className={cn('flex-1', className)} {...viewProps}>
+      {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
+      )}
+
+      {footer && <View className="border-t border-border px-3 py-2">{footer}</View>}
+    </View>
+  );
+}

package/src/cart/cart-total.tsx

@@ -0,0 +1,64 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { useProductTraits } 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;
+  className?: string;
+}
+
+/**
+ * Displays a cart summary with subtotal, optional tax, and total.
+ *
+ * ```tsx
+ * <CartTotal items={cartItems} taxRate={0.1} />
+ * ```
+ */
+export function CartTotal({
+  items,
+  currencySymbol = '$',
+  taxRate = 0,
+  taxLabel = 'Tax',
+  className,
+  ...viewProps
+}: 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>
+      )}
+
+      <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>
+  );
+}

package/src/cart/index.ts

@@ -0,0 +1,3 @@
+export { CartLine, type CartLineProps, type CartLineItem } from './cart-line';
+export { CartTotal, type CartTotalProps } from './cart-total';
+export { CartPanel, type CartPanelProps } from './cart-panel';

package/src/checkout/index.ts

@@ -0,0 +1,4 @@
+export { PaymentMethodCard, type PaymentMethodCardProps } from './payment-method-card';
+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';

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

@@ -0,0 +1,23 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface OrderSummaryLineProps extends Omit<ViewProps, 'children'> {
+  label: string;
+  amount: string;
+  bold?: boolean;
+  className?: string;
+}
+
+export function OrderSummaryLine({ label, amount, bold = false, className, ...viewProps }: 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')}>
+        {label}
+      </Text>
+      <Text className={cn('text-sm', bold ? 'font-bold text-foreground' : 'text-foreground')}>
+        {amount}
+      </Text>
+    </View>
+  );
+}

package/src/checkout/order-summary.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { OrderSummaryLine } from './order-summary-line';
+
+export interface OrderSummaryPayment {
+  label: string;
+  amount: string;
+}
+
+export interface OrderSummaryProps extends Omit<ViewProps, 'children'> {
+  /** Formatted subtotal string (e.g. "$1199.98") */
+  subtotal: string;
+  /** Formatted tax amount (optional) */
+  tax?: string;
+  /** Label for the tax line (defaults to "Tax") */
+  taxLabel?: string;
+  /** Formatted total string */
+  total: string;
+  /** Payment lines to display (e.g. cash tendered, change due) */
+  payments?: OrderSummaryPayment[];
+  /** Header slot (e.g. customer info, order number) */
+  header?: ReactNode;
+  /** Footer slot (e.g. action buttons) */
+  footer?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Displays an order summary with subtotal, tax, total, and optional
+ * payment breakdown.
+ *
+ * Uses OrderSummaryLine internally for each row. Accepts header and
+ * footer slots for additional context like customer info or action buttons.
+ *
+ * ```tsx
+ * <OrderSummary
+ *   subtotal="$1199.98"
+ *   tax="$120.00"
+ *   taxLabel="GST"
+ *   total="$1319.98"
+ *   payments={[{ label: 'Cash', amount: '$1400.00' }, { label: 'Change', amount: '$80.02' }]}
+ *   header={<CustomerCard doc={customer} />}
+ * />
+ * ```
+ */
+export function OrderSummary({
+  subtotal,
+  tax,
+  taxLabel = 'Tax',
+  total,
+  payments,
+  header,
+  footer,
+  className,
+  ...viewProps
+}: OrderSummaryProps) {
+  return (
+    <View className={cn('gap-1.5 px-3 py-3', className)} {...viewProps}>
+      {header && <View className="mb-2">{header}</View>}
+
+      <OrderSummaryLine label="Subtotal" amount={subtotal} />
+      {tax && <OrderSummaryLine label={taxLabel} amount={tax} />}
+      <OrderSummaryLine label="Total" amount={total} bold />
+
+      {payments && payments.length > 0 && (
+        <View 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>
+      )}
+
+      {footer && <View className="mt-2">{footer}</View>}
+    </View>
+  );
+}

package/src/checkout/payment-method-card.tsx

@@ -0,0 +1,36 @@
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+
+import { cn } from '@tallyui/theme';
+
+export interface PaymentMethodCardProps extends Omit<ViewProps, 'children'> {
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export function PaymentMethodCard({ label, selected, onPress, icon, className, ...viewProps }: PaymentMethodCardProps) {
+  return (
+    <Pressable onPress={onPress} {...viewProps}>
+      <View
+        className={cn(
+          'flex-row items-center gap-3 rounded-lg border px-4 py-3',
+          selected ? 'border-primary bg-primary/5' : 'border-border bg-surface',
+          className,
+        )}
+      >
+        {icon && <View>{icon}</View>}
+        <Text className={cn('flex-1 text-sm font-medium', selected ? 'text-primary' : 'text-foreground')}>
+          {label}
+        </Text>
+        {selected && (
+          <View className="h-5 w-5 items-center justify-center rounded-full bg-primary">
+            <Text className="text-xs text-primary-foreground">{'\u2713'}</Text>
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+}

package/src/checkout/payment-selector.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { PaymentMethodCard } from './payment-method-card';
+
+export interface PaymentMethod {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface PaymentSelectorProps extends Omit<ViewProps, 'children'> {
+  /** Available payment methods */
+  methods: PaymentMethod[];
+  /** ID of the currently selected method */
+  selected: string;
+  /** Called when a method is selected */
+  onSelect: (id: string) => void;
+  className?: string;
+}
+
+/**
+ * A list of payment method cards where one can be selected at a time.
+ *
+ * Wraps PaymentMethodCard for each method and manages the selected state.
+ *
+ * ```tsx
+ * <PaymentSelector
+ *   methods={[{ id: 'cash', label: 'Cash' }, { id: 'card', label: 'Credit Card' }]}
+ *   selected={selectedMethod}
+ *   onSelect={setSelectedMethod}
+ * />
+ * ```
+ */
+export function PaymentSelector({
+  methods,
+  selected,
+  onSelect,
+  className,
+  ...viewProps
+}: PaymentSelectorProps) {
+  return (
+    <View className={cn('gap-2', className)} {...viewProps}>
+      {methods.map((method) => (
+        <PaymentMethodCard
+          key={method.id}
+          label={method.label}
+          selected={method.id === selected}
+          onPress={() => onSelect(method.id)}
+          icon={method.icon}
+        />
+      ))}
+    </View>
+  );
+}

package/src/customer/customer-card.tsx

@@ -0,0 +1,26 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { useCustomerTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface CustomerCardProps extends Omit<ViewProps, 'children'> {
+  doc: any;
+  className?: string;
+}
+
+export function CustomerCard({ doc, className, ...viewProps }: CustomerCardProps) {
+  const traits = useCustomerTraits();
+  if (!traits) return null;
+
+  const name = traits.getName(doc);
+  const email = traits.getEmail(doc);
+  const address = traits.getAddressSummary(doc);
+
+  return (
+    <View className={cn('gap-0.5', className)} {...viewProps}>
+      <Text className="text-sm font-semibold text-foreground">{name}</Text>
+      {email && <Text className="text-xs text-muted">{email}</Text>}
+      {address && <Text className="text-xs text-muted">{address}</Text>}
+    </View>
+  );
+}

package/src/customer/customer-select.tsx

@@ -0,0 +1,72 @@
+import { Pressable, ScrollView, Text, View, type ViewProps } from 'react-native';
+import { useCustomerTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+import { CustomerCard } from './customer-card';
+
+export interface CustomerSelectProps extends Omit<ViewProps, 'children'> {
+  /** Customer documents to display as options */
+  customers: any[];
+  /** Currently selected customer (if any) */
+  selected?: any;
+  /** Called when a customer is selected */
+  onSelect: (customer: any) => void;
+  /** Called when the search text changes */
+  onSearch: (query: string) => void;
+  /** Placeholder text for the search input */
+  placeholder?: string;
+  className?: string;
+}
+
+/**
+ * A customer picker that displays a list of customer cards.
+ *
+ * When a customer is selected, their name is shown as a summary.
+ * The parent is responsible for filtering — this component just
+ * calls onSearch with the query text and renders whatever customers
+ * are passed in.
+ *
+ * ```tsx
+ * <CustomerSelect
+ *   customers={filteredCustomers}
+ *   selected={selectedCustomer}
+ *   onSelect={setSelectedCustomer}
+ *   onSearch={setSearchQuery}
+ * />
+ * ```
+ */
+export function CustomerSelect({
+  customers,
+  selected,
+  onSelect,
+  onSearch,
+  placeholder = 'Search customers...',
+  className,
+  ...viewProps
+}: CustomerSelectProps) {
+  const traits = useCustomerTraits();
+
+  return (
+    <View className={cn('gap-2', className)} {...viewProps}>
+      {selected && traits && (
+        <View className="rounded-lg border border-primary bg-primary/5 px-3 py-2">
+          <CustomerCard doc={selected} />
+        </View>
+      )}
+
+      {customers.length > 0 && (
+        <ScrollView className="max-h-60">
+          {customers.map((customer, index) => {
+            const id = traits?.getId(customer) ?? index;
+            return (
+              <Pressable key={id} onPress={() => onSelect(customer)}>
+                <View className="border-b border-border px-3 py-2">
+                  <CustomerCard doc={customer} />
+                </View>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      )}
+    </View>
+  );
+}

package/src/customer/index.ts

@@ -0,0 +1,2 @@
+export { CustomerCard, type CustomerCardProps } from './customer-card';
+export { CustomerSelect, type CustomerSelectProps } from './customer-select';

package/src/index.ts

@@ -0,0 +1,61 @@
+// Product components
+export {
+  ProductTitle,
+  ProductPrice,
+  ProductImage,
+  ProductSku,
+  ProductStockBadge,
+  ProductCard,
+  ProductGrid,
+  type ProductTitleProps,
+  type ProductPriceProps,
+  type ProductImageProps,
+  type ProductSkuProps,
+  type ProductStockBadgeProps,
+  type ProductCardProps,
+  type ProductGridProps,
+} from './product';
+
+// Cart components
+export {
+  CartLine,
+  CartTotal,
+  CartPanel,
+  type CartLineProps,
+  type CartLineItem,
+  type CartTotalProps,
+  type CartPanelProps,
+} from './cart';
+
+// Input components
+export {
+  SearchInput,
+  type SearchInputProps,
+  FilterChip,
+  FilterChipGroup,
+  type FilterChipProps,
+  type FilterChipGroupProps,
+  type ChipItem,
+} from './input';
+
+// Customer components
+export {
+  CustomerCard,
+  CustomerSelect,
+  type CustomerCardProps,
+  type CustomerSelectProps,
+} from './customer';
+
+// Checkout components
+export {
+  PaymentMethodCard,
+  PaymentSelector,
+  type PaymentMethodCardProps,
+  type PaymentSelectorProps,
+  type PaymentMethod,
+  OrderSummaryLine,
+  OrderSummary,
+  type OrderSummaryLineProps,
+  type OrderSummaryProps,
+  type OrderSummaryPayment,
+} from './checkout';

package/src/input/filter-chip.tsx

@@ -0,0 +1,58 @@
+import { Pressable, ScrollView, Text, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface FilterChipProps {
+  label: string;
+  active: boolean;
+  onPress: () => void;
+  className?: string;
+}
+
+export function FilterChip({ label, active, onPress, className }: FilterChipProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      className={cn(
+        'rounded-full px-3 py-1.5',
+        active ? 'bg-primary' : 'bg-surface-alt',
+        className,
+      )}
+    >
+      <Text className={cn('text-xs font-semibold', active ? 'text-primary-foreground' : 'text-muted')}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+export interface ChipItem {
+  label: string;
+  active: boolean;
+}
+
+export interface FilterChipGroupProps extends Omit<ViewProps, 'children'> {
+  chips: ChipItem[];
+  onChipPress: (index: number) => void;
+  className?: string;
+}
+
+export function FilterChipGroup({ chips, onChipPress, className, ...viewProps }: FilterChipGroupProps) {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerClassName={cn('flex-row gap-2', className)}
+      {...viewProps}
+    >
+      {chips.map((chip, index) => (
+        <FilterChip
+          key={chip.label}
+          label={chip.label}
+          active={chip.active}
+          onPress={() => onChipPress(index)}
+        />
+      ))}
+    </ScrollView>
+  );
+}

package/src/input/index.ts

@@ -0,0 +1,2 @@
+export { SearchInput, type SearchInputProps } from './search-input';
+export { FilterChip, FilterChipGroup, type FilterChipProps, type FilterChipGroupProps, type ChipItem } from './filter-chip';

package/src/input/search-input.tsx

@@ -0,0 +1,26 @@
+import { TextInput, View, Text, type TextInputProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface SearchInputProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+  value: string;
+  onChangeText: (text: string) => void;
+  className?: string;
+}
+
+export function SearchInput({ value, onChangeText, className, placeholder = 'Search...', ...props }: SearchInputProps) {
+  return (
+    <View className={cn('flex-row items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2', className)}>
+      <Text className="text-muted">{'\u2315'}</Text>
+      <TextInput
+        role="searchbox"
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor="#9ca3af"
+        className="flex-1 text-sm text-foreground"
+        {...props}
+      />
+    </View>
+  );
+}

package/src/product/index.ts

@@ -0,0 +1,7 @@
+export { ProductTitle, type ProductTitleProps } from './product-title';
+export { ProductPrice, type ProductPriceProps } from './product-price';
+export { ProductImage, type ProductImageProps } from './product-image';
+export { ProductSku, type ProductSkuProps } from './product-sku';
+export { ProductStockBadge, type ProductStockBadgeProps } from './product-stock-badge';
+export { ProductCard, type ProductCardProps } from './product-card';
+export { ProductGrid, type ProductGridProps } from './product-grid';