@tallyui/components 1.0.0 → 3.0.0-next.0

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

@@ -1,9 +1,10 @@
-import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { Pressable, View, type PressableProps } from 'react-native';
 import type { ReactNode } from 'react';
 
 import { cn } from '@tallyui/theme';
+import { Text, HStack } from '../ui';
 
-export interface PaymentMethodCardProps extends Omit<ViewProps, 'children'> {
+export interface PaymentMethodCardProps extends Omit<PressableProps, 'children'> {
   label: string;
   selected: boolean;
   onPress: () => void;
@@ -11,18 +12,18 @@ export interface PaymentMethodCardProps extends Omit<ViewProps, 'children'> {
   className?: string;
 }
 
-export function PaymentMethodCard({ label, selected, onPress, icon, className, ...viewProps }: PaymentMethodCardProps) {
+export function PaymentMethodCard({ label, selected, onPress, icon, className, ...props }: PaymentMethodCardProps) {
   return (
-    <Pressable onPress={onPress} {...viewProps}>
-      <View
+    <Pressable onPress={onPress} {...props}>
+      <HStack
         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',
+          'rounded-lg border px-4 py-3',
+          selected ? 'border-primary bg-primary/5' : 'border-border bg-card',
           className,
         )}
       >
         {icon && <View>{icon}</View>}
-        <Text className={cn('flex-1 text-sm font-medium', selected ? 'text-primary' : 'text-foreground')}>
+        <Text className={cn('flex-1 text-sm font-medium', selected ? 'text-primary' : '')}>
           {label}
         </Text>
         {selected && (
@@ -30,7 +31,7 @@ export function PaymentMethodCard({ label, selected, onPress, icon, className, .
             <Text className="text-xs text-primary-foreground">{'\u2713'}</Text>
           </View>
         )}
-      </View>
+      </HStack>
     </Pressable>
   );
 }

package/src/checkout/payment-selector.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import { View, type ViewProps } from 'react-native';
 import { cn } from '@tallyui/theme';
+import { VStack, type VStackProps } from '../ui';
 import { PaymentMethodCard } from './payment-method-card';
 
 export interface PaymentMethod {
@@ -9,7 +9,7 @@ export interface PaymentMethod {
   icon?: ReactNode;
 }
 
-export interface PaymentSelectorProps extends Omit<ViewProps, 'children'> {
+export interface PaymentSelectorProps extends Omit<VStackProps, 'children'> {
   /** Available payment methods */
   methods: PaymentMethod[];
   /** ID of the currently selected method */
@@ -37,10 +37,10 @@ export function PaymentSelector({
   selected,
   onSelect,
   className,
-  ...viewProps
+  ...props
 }: PaymentSelectorProps) {
   return (
-    <View className={cn('gap-2', className)} {...viewProps}>
+    <VStack space="sm" className={cn(className)} {...props}>
       {methods.map((method) => (
         <PaymentMethodCard
           key={method.id}
@@ -50,6 +50,6 @@ export function PaymentSelector({
           icon={method.icon}
         />
       ))}
-    </View>
+    </VStack>
   );
 }

package/src/checkout/receipt-preview.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface ReceiptItem {
+  name: string;
+  quantity: number;
+  total: string;
+}
+
+export interface ReceiptPreviewProps extends Omit<ViewProps, 'children'> {
+  items: ReceiptItem[];
+  subtotal: string;
+  tax: string;
+  total: string;
+  payments?: Array<{ method: string; amount: string }>;
+  headerSlot?: ReactNode;
+  footerSlot?: ReactNode;
+  className?: string;
+}
+
+export function ReceiptPreview({
+  items,
+  subtotal,
+  tax,
+  total,
+  payments,
+  headerSlot,
+  footerSlot,
+  className,
+  ...viewProps
+}: ReceiptPreviewProps) {
+  return (
+    <View className={cn('rounded-lg border border-border bg-card p-4', className)} {...viewProps}>
+      {headerSlot && <View className="mb-3 items-center border-b border-dashed border-border pb-3">{headerSlot}</View>}
+
+      <View className="gap-1">
+        {items.map((item, i) => (
+          <View key={i} className="flex-row justify-between">
+            <Text className="flex-1 text-sm text-foreground">
+              {item.name} x{item.quantity}
+            </Text>
+            <Text className="text-sm text-foreground">{item.total}</Text>
+          </View>
+        ))}
+      </View>
+
+      <View className="mt-3 gap-1 border-t border-dashed border-border pt-3">
+        <View className="flex-row justify-between">
+          <Text className="text-sm text-muted-foreground">Subtotal</Text>
+          <Text className="text-sm text-foreground">{subtotal}</Text>
+        </View>
+        <View className="flex-row justify-between">
+          <Text className="text-sm text-muted-foreground">Tax</Text>
+          <Text className="text-sm text-foreground">{tax}</Text>
+        </View>
+        <View className="flex-row justify-between border-t border-border pt-1">
+          <Text className="text-sm font-bold text-foreground">Total</Text>
+          <Text className="text-sm font-bold text-foreground">{total}</Text>
+        </View>
+      </View>
+
+      {payments && payments.length > 0 && (
+        <View className="mt-3 gap-1 border-t border-dashed border-border pt-3">
+          {payments.map((p, i) => (
+            <View key={i} className="flex-row justify-between">
+              <Text className="text-sm text-muted-foreground">{p.method}</Text>
+              <Text className="text-sm text-foreground">{p.amount}</Text>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {footerSlot && <View className="mt-3 items-center border-t border-dashed border-border pt-3">{footerSlot}</View>}
+    </View>
+  );
+}

package/src/customer/customer-card.tsx

@@ -1,26 +1,30 @@
-import { Text, View, type ViewProps } from 'react-native';
-
-import { useCustomerTraits } from '@tallyui/core';
+import { useCustomerTraits, type CustomerTraits } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { Text, VStack, type VStackProps } from '../ui';
 
-export interface CustomerCardProps extends Omit<ViewProps, 'children'> {
-  doc: any;
+export interface CustomerCardProps<Doc = any> extends Omit<VStackProps, 'children'> {
+  doc: Doc;
+  traits?: CustomerTraits<Doc>;
   className?: string;
 }
 
-export function CustomerCard({ doc, className, ...viewProps }: CustomerCardProps) {
+function CustomerCardFromContext<Doc>(props: CustomerCardProps<Doc>) {
   const traits = useCustomerTraits();
-  if (!traits) return null;
+  return traits ? <CustomerCard {...props} traits={traits} /> : null;
+}
+
+export function CustomerCard<Doc>({ doc, traits, className, ...props }: CustomerCardProps<Doc>) {
+  if (!traits) return <CustomerCardFromContext doc={doc} className={className} {...props} />;
 
   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>
+    <VStack space="none" className={cn('gap-0.5', className)} {...props}>
+      <Text className="text-sm font-semibold">{name}</Text>
+      {email && <Text className="text-xs text-muted-foreground">{email}</Text>}
+      {address && <Text className="text-xs text-muted-foreground">{address}</Text>}
+    </VStack>
   );
 }

package/src/customer/customer-form.tsx

@@ -0,0 +1,72 @@
+import { Pressable, Text, TextInput, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface CustomerFormValues {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  address: string;
+}
+
+export interface CustomerFormProps extends Omit<ViewProps, 'children'> {
+  values: CustomerFormValues;
+  onChangeField: (field: keyof CustomerFormValues, value: string) => void;
+  onSubmit?: () => void;
+  submitLabel?: string;
+  showAddress?: boolean;
+  className?: string;
+}
+
+function FormField({
+  label,
+  value,
+  onChangeText,
+  ...props
+}: { label: string; value: string; onChangeText: (t: string) => void } & Record<string, any>) {
+  return (
+    <View className="gap-1">
+      <Text className="text-xs font-medium text-muted-foreground">{label}</Text>
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholderTextColorClassName="accent-muted-foreground"
+        className="rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground"
+        {...props}
+      />
+    </View>
+  );
+}
+
+export function CustomerForm({
+  values,
+  onChangeField,
+  onSubmit,
+  submitLabel = 'Save Customer',
+  showAddress = true,
+  className,
+  ...viewProps
+}: CustomerFormProps) {
+  return (
+    <View className={cn('gap-3 p-4', className)} {...viewProps}>
+      <View className="flex-row gap-3">
+        <View className="flex-1">
+          <FormField label="First Name" value={values.firstName} onChangeText={(v) => onChangeField('firstName', v)} placeholder="First name" />
+        </View>
+        <View className="flex-1">
+          <FormField label="Last Name" value={values.lastName} onChangeText={(v) => onChangeField('lastName', v)} placeholder="Last name" />
+        </View>
+      </View>
+      <FormField label="Email" value={values.email} onChangeText={(v) => onChangeField('email', v)} placeholder="email@example.com" keyboardType="email-address" />
+      <FormField label="Phone" value={values.phone} onChangeText={(v) => onChangeField('phone', v)} placeholder="Phone number" keyboardType="phone-pad" />
+      {showAddress && <FormField label="Address" value={values.address} onChangeText={(v) => onChangeField('address', v)} placeholder="Street address" multiline />}
+
+      {onSubmit && (
+        <Pressable onPress={onSubmit} className="items-center rounded-lg bg-primary px-4 py-3">
+          <Text className="text-sm font-semibold text-primary-foreground">{submitLabel}</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}

package/src/customer/customer-order-history.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { ScrollView, Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface CustomerOrderHistoryProps extends Omit<ViewProps, 'children'> {
+  orders: any[];
+  renderItem: (order: any, index: number) => ReactNode;
+  emptyState?: ReactNode;
+  className?: string;
+}
+
+export function CustomerOrderHistory({
+  orders,
+  renderItem,
+  emptyState,
+  className,
+  ...viewProps
+}: CustomerOrderHistoryProps) {
+  return (
+    <View className={cn('flex-1', className)} {...viewProps}>
+      <Text className="px-3 py-2 text-xs font-semibold text-muted-foreground">Order History</Text>
+      {orders.length > 0 ? (
+        <ScrollView contentContainerClassName="gap-2 px-3 pb-3">
+          {orders.map((order, index) => (
+            <View key={order.id ?? index}>{renderItem(order, index)}</View>
+          ))}
+        </ScrollView>
+      ) : (
+        emptyState ?? null
+      )}
+    </View>
+  );
+}

package/src/customer/customer-picker.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { customerTraits, CustomerServiceError, ConnectorUnauthorizedError, type Customer, type CustomerInput } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+import { CustomerCard } from './customer-card';
+import { CustomerSelect } from './customer-select';
+import { CustomerForm, type CustomerFormValues } from './customer-form';
+
+export interface CustomerPickerProps {
+  /** The connector's searchCustomers, bound to its context by the app. */
+  search: (query: string) => Promise<Customer[]>;
+  /** The connector's createCustomer, bound; absent hides "New customer". */
+  create?: (input: CustomerInput) => Promise<Customer>;
+  selected: Customer | null;
+  onSelect: (customer: Customer | null) => void;
+  /** Called for errors the picker can't explain to the cashier, including ConnectorUnauthorizedError, which means the app should sign in again. */
+  onError?: (error: unknown) => void;
+  /** false disables search and create (online only in v1). */
+  online: boolean;
+  /** Debounce before a search, ms. */
+  debounceMs?: number;
+  className?: string;
+}
+
+/** `@tallyui/core/server`'s `payloadBoundErrors` bound on `customer.email`, in UTF-16 code units. */
+const EMAIL_MAX = 254;
+/** A simple shape, not RFC 5322: one `@`, a non-empty local part, a domain with text either side of a dot, no whitespace or NUL. */
+const EMAIL_SHAPE = /^[^\s@\u0000]+@[^\s@\u0000]+\.[^\s@\u0000]+$/u;
+
+export function CustomerPicker({ search, create, selected, onSelect, onError, online, debounceMs = 250, className }: CustomerPickerProps) {
+  const [query, setQuery] = useState('');
+  const [customers, setCustomers] = useState<Customer[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [values, setValues] = useState<CustomerFormValues>({ firstName: '', lastName: '', email: '', phone: '', address: '' });
+  const sequence = useRef(0);
+  const searchRef = useRef(search);
+  searchRef.current = search;
+  const [noResults, setNoResults] = useState(false);
+
+  function handleError(error: unknown) {
+    if (error instanceof CustomerServiceError) {
+      setError(error.code === 'network' ? "Couldn't reach the store. Try again."
+        : error.code === 'server' ? "The store couldn't do that. Try again." : error.message);
+    } else {
+      setError(error instanceof ConnectorUnauthorizedError ? 'Sign in again to continue.' : 'Something went wrong. Try again.');
+      onError?.(error);
+    }
+  }
+
+  useEffect(() => {
+    const current = ++sequence.current;
+    setNoResults(false);
+    setError(null);
+    if (!online || !query.trim()) { setCustomers([]); return; }
+    const timer = setTimeout(async () => {
+      try {
+        const results = await searchRef.current(query);
+        if (current === sequence.current) { setCustomers(results); setNoResults(results.length === 0); }
+      } catch (error) {
+        if (current === sequence.current) handleError(error);
+      }
+    }, debounceMs);
+    return () => { clearTimeout(timer); sequence.current++; };
+  }, [query, online, debounceMs]);
+
+  async function submit() {
+    const email = values.email.trim();
+    if (!online || !create || creating || !email) return;
+    // The till sends this email in order.create, whose shape check refuses one over 254 characters: refuse it here instead.
+    if (email.length > EMAIL_MAX || !EMAIL_SHAPE.test(email)) return setError(`Enter a valid email address (up to ${EMAIL_MAX} characters)`);
+    setCreating(true);
+    setError(null);
+    try {
+      const created = await create({ email,
+        ...(values.firstName.trim() ? { firstName: values.firstName.trim() } : {}),
+        ...(values.lastName.trim() ? { lastName: values.lastName.trim() } : {}),
+        ...(values.phone.trim() ? { phone: values.phone.trim() } : {}),
+      });
+      onSelect(created);
+      setValues({ firstName: '', lastName: '', email: '', phone: '', address: '' });
+      setShowForm(false);
+    } catch (error) {
+      handleError(error);
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  return <View className={cn('gap-3', className)}>
+    {selected && <View>
+      <CustomerCard doc={selected} traits={customerTraits} />
+      <Pressable accessibilityRole="button" className="items-center rounded-lg border border-border px-4 py-3" onPress={() => onSelect(null)}><Text className="text-sm font-semibold text-foreground">Remove customer</Text></Pressable>
+    </View>}
+    <Text className="text-xs font-medium text-muted-foreground">Search customers</Text>
+    <TextInput accessibilityLabel="Search customers" value={query} onChangeText={setQuery} editable={online}
+      className="rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground"
+      placeholderTextColorClassName="accent-muted-foreground" placeholder="Name or email" />
+    {!online && <Text className="text-sm text-muted-foreground">Connect to search or add customers.</Text>}
+    {noResults && <Text className="text-sm text-muted-foreground">No customers found.</Text>}
+    {error && <Text accessibilityRole="alert" className="text-sm text-destructive">{error}</Text>}
+    <CustomerSelect customers={customers} traits={customerTraits} onSearch={setQuery}
+      onSelect={(customer) => { onSelect(customer); setQuery(''); }} />
+    {create && <Pressable accessibilityRole="button" disabled={!online || creating} onPress={() => setShowForm(true)}
+      className={cn('items-center rounded-lg border border-border px-4 py-3', (!online || creating) && 'opacity-50')}>
+      <Text className="text-sm font-semibold text-foreground">New customer</Text>
+    </Pressable>}
+    {showForm && <View>
+      <CustomerForm values={values} showAddress={false}
+        onChangeField={(field, value) => setValues((current) => ({ ...current, [field]: value }))} />
+      <View className="flex-row gap-3">
+        <Pressable accessibilityRole="button" disabled={!online || creating || !values.email.trim()} onPress={submit}
+          className={cn('items-center rounded-lg bg-primary px-4 py-3', (!online || creating || !values.email.trim()) && 'opacity-50')}>
+          <Text className="text-sm font-semibold text-primary-foreground">Save Customer</Text>
+        </Pressable>
+        <Pressable accessibilityRole="button" className="items-center rounded-lg border border-border px-4 py-3"
+          onPress={() => { setShowForm(false); setValues({ firstName: '', lastName: '', email: '', phone: '', address: '' }); }}>
+          <Text className="text-sm font-semibold text-foreground">Cancel</Text>
+        </Pressable>
+      </View>
+    </View>}
+  </View>;
+}

package/src/customer/customer-select.tsx

@@ -1,15 +1,18 @@
-import { Pressable, ScrollView, Text, View, type ViewProps } from 'react-native';
-import { useCustomerTraits } from '@tallyui/core';
+import { Pressable, ScrollView, View } from 'react-native';
+import { Select } from '@tallyui/primitives';
+import { useCustomerTraits, type CustomerTraits } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { VStack, type VStackProps } from '../ui';
 import { CustomerCard } from './customer-card';
 
-export interface CustomerSelectProps extends Omit<ViewProps, 'children'> {
+export interface CustomerSelectProps<Doc = any> extends Omit<VStackProps, 'children'> {
   /** Customer documents to display as options */
-  customers: any[];
+  customers: Doc[];
   /** Currently selected customer (if any) */
-  selected?: any;
+  selected?: Doc | null;
   /** Called when a customer is selected */
-  onSelect: (customer: any) => void;
+  onSelect: (customer: Doc) => void;
+  traits?: CustomerTraits<Doc>;
   /** Called when the search text changes */
   onSearch: (query: string) => void;
   /** Placeholder text for the search input */
@@ -25,6 +28,9 @@ export interface CustomerSelectProps extends Omit<ViewProps, 'children'> {
  * calls onSearch with the query text and renders whatever customers
  * are passed in.
  *
+ * Built on top of the Select primitive for proper accessibility
+ * semantics (combobox role, option roles, aria-expanded, aria-checked).
+ *
  * ```tsx
  * <CustomerSelect
  *   customers={filteredCustomers}
@@ -34,39 +40,82 @@ export interface CustomerSelectProps extends Omit<ViewProps, 'children'> {
  * />
  * ```
  */
-export function CustomerSelect({
+export function CustomerSelect<Doc>(props: CustomerSelectProps<Doc>) {
+  return props.traits ? <CustomerSelectView {...props} /> : <CustomerSelectFromContext {...props} />;
+}
+
+function CustomerSelectFromContext<Doc>(props: CustomerSelectProps<Doc>) {
+  return <CustomerSelectView {...props} traits={useCustomerTraits()} />;
+}
+
+function CustomerSelectView<Doc>({
   customers,
   selected,
   onSelect,
   onSearch,
   placeholder = 'Search customers...',
   className,
-  ...viewProps
-}: CustomerSelectProps) {
-  const traits = useCustomerTraits();
+  traits,
+  ...props
+}: CustomerSelectProps<Doc>) {
+
+  // Map selected customer to Select primitive's Option format
+  const selectedOption = selected && traits
+    ? { value: traits.getId(selected), label: traits.getName(selected) }
+    : undefined;
+
+  // Build a lookup so we can resolve the original customer doc on selection
+  const customerById = new Map<string, Doc>();
+  if (traits) {
+    for (const customer of customers) {
+      customerById.set(traits.getId(customer), customer);
+    }
+  }
+
+  function handleValueChange(option: { value: string; label: string }) {
+    const doc = customerById.get(option.value);
+    if (doc) onSelect(doc);
+  }
 
   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>
-      )}
+    <Select.Root
+      value={selectedOption}
+      onValueChange={handleValueChange}
+      defaultOpen={true}
+    >
+      <VStack space="sm" className={cn(className)} {...props}>
+        {selected && traits && (
+          <Select.Trigger asChild>
+            <View className="rounded-lg border border-primary bg-primary/5 px-3 py-2">
+              <CustomerCard doc={selected} traits={traits} />
+            </View>
+          </Select.Trigger>
+        )}
 
-      {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>
+        {customers.length > 0 && (
+          <Select.Content asChild forceMount disablePositioningStyle>
+            <ScrollView className="max-h-60">
+              {customers.map((customer, index) => {
+                const id = traits?.getId(customer) ?? String(index);
+                const label = traits?.getName(customer) ?? '';
+                const email = traits?.getEmail(customer);
+                return (
+                  <Select.Item
+                    key={id}
+                    value={id}
+                    label={label}
+                    asChild
+                  >
+                    <Pressable accessibilityLabel={email ? `${label}, ${email}` : label} className="border-b border-border px-3 py-2">
+                      <CustomerCard doc={customer} traits={traits} />
+                    </Pressable>
+                  </Select.Item>
+                );
+              })}
+            </ScrollView>
+          </Select.Content>
+        )}
+      </VStack>
+    </Select.Root>
   );
 }

package/src/customer/index.ts

@@ -1,2 +1,5 @@
 export { CustomerCard, type CustomerCardProps } from './customer-card';
 export { CustomerSelect, type CustomerSelectProps } from './customer-select';
+export { CustomerForm, type CustomerFormProps, type CustomerFormValues } from './customer-form';
+export { CustomerOrderHistory, type CustomerOrderHistoryProps } from './customer-order-history';
+export { CustomerPicker, type CustomerPickerProps } from './customer-picker';