@tallyui/components 1.0.0 → 2.0.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,14 +1,13 @@
-import { Text, View, type ViewProps } from 'react-native';
-
 import { useCustomerTraits } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { Text, VStack, type VStackProps } from '../ui';
 
-export interface CustomerCardProps extends Omit<ViewProps, 'children'> {
+export interface CustomerCardProps extends Omit<VStackProps, 'children'> {
   doc: any;
   className?: string;
 }
 
-export function CustomerCard({ doc, className, ...viewProps }: CustomerCardProps) {
+export function CustomerCard({ doc, className, ...props }: CustomerCardProps) {
   const traits = useCustomerTraits();
   if (!traits) return null;
 
@@ -17,10 +16,10 @@ export function CustomerCard({ doc, className, ...viewProps }: CustomerCardProps
   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,70 @@
+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;
+  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',
+  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" />
+      <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-select.tsx

@@ -1,9 +1,11 @@
-import { Pressable, ScrollView, Text, View, type ViewProps } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import { Select } from '@tallyui/primitives';
 import { useCustomerTraits } 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 extends Omit<VStackProps, 'children'> {
   /** Customer documents to display as options */
   customers: any[];
   /** Currently selected customer (if any) */
@@ -25,6 +27,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}
@@ -41,32 +46,66 @@ export function CustomerSelect({
   onSearch,
   placeholder = 'Search customers...',
   className,
-  ...viewProps
+  ...props
 }: CustomerSelectProps) {
   const traits = useCustomerTraits();
 
+  // 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, any>();
+  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} />
+            </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) ?? '';
+                return (
+                  <Select.Item
+                    key={id}
+                    value={id}
+                    label={label}
+                    asChild
+                  >
+                    <View className="border-b border-border px-3 py-2">
+                      <CustomerCard doc={customer} />
+                    </View>
+                  </Select.Item>
+                );
+              })}
+            </ScrollView>
+          </Select.Content>
+        )}
+      </VStack>
+    </Select.Root>
   );
 }

package/src/customer/index.ts

@@ -1,2 +1,4 @@
 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';

package/src/index.ts

@@ -1,3 +1,8 @@
+/// <reference path="./uniwind-env.d.ts" />
+
+// Generic UI components
+export * from './ui';
+
 // Product components
 export {
   ProductTitle,
@@ -14,6 +19,14 @@ export {
   type ProductStockBadgeProps,
   type ProductCardProps,
   type ProductGridProps,
+  ProductList,
+  type ProductListProps,
+  CategoryNav,
+  type CategoryNavProps,
+  type CategoryItem,
+  ProductVariantPicker,
+  type ProductVariantPickerProps,
+  type VariantOption,
 } from './product';
 
 // Cart components
@@ -21,10 +34,16 @@ export {
   CartLine,
   CartTotal,
   CartPanel,
+  DiscountBadge,
+  CartNoteInput,
   type CartLineProps,
-  type CartLineItem,
   type CartTotalProps,
   type CartPanelProps,
+  type DiscountBadgeProps,
+  type CartNoteInputProps,
+  CartLineActions,
+  type CartLineActionsProps,
+  type CartAction,
 } from './cart';
 
 // Input components
@@ -36,6 +55,8 @@ export {
   type FilterChipProps,
   type FilterChipGroupProps,
   type ChipItem,
+  QuantityStepper,
+  type QuantityStepperProps,
 } from './input';
 
 // Customer components
@@ -44,6 +65,11 @@ export {
   CustomerSelect,
   type CustomerCardProps,
   type CustomerSelectProps,
+  CustomerForm,
+  type CustomerFormProps,
+  type CustomerFormValues,
+  CustomerOrderHistory,
+  type CustomerOrderHistoryProps,
 } from './customer';
 
 // Checkout components
@@ -58,4 +84,89 @@ export {
   type OrderSummaryLineProps,
   type OrderSummaryProps,
   type OrderSummaryPayment,
+  ChangeDisplay,
+  type ChangeDisplayProps,
+  CashTendered,
+  type CashTenderedProps,
+  ReceiptPreview,
+  type ReceiptPreviewProps,
+  type ReceiptItem,
 } from './checkout';
+
+// Order components
+export {
+  OrderStatusBadge,
+  type OrderStatusBadgeProps,
+  type OrderStatus,
+  OrderCard,
+  type OrderCardProps,
+  OrderList,
+  type OrderListProps,
+  OrderDetail,
+  type OrderDetailProps,
+  type OrderDetailLineItem,
+} from './order';
+
+// Register components
+export {
+  CashCountInput,
+  type CashCountInputProps,
+  type Denomination,
+  RegisterSummary,
+  type RegisterSummaryProps,
+  type TransactionSummary,
+  RegisterOpenClose,
+  type RegisterOpenCloseProps,
+  RegisterPicker,
+  type RegisterPickerProps,
+  type RegisterPickerRegister,
+  OpenRegisterCard,
+  type OpenRegisterCardProps,
+  RegisterBar,
+  type RegisterBarProps,
+  describeRegisterBarPill,
+  type RegisterBarPill,
+  MovementSheet,
+  type MovementSheetProps,
+  RegisterPanel,
+  type RegisterPanelProps,
+  RegisterColumn,
+  type RegisterColumnProps,
+  RegisterCount,
+  APPROVAL_REQUIRED_TEXT,
+  type RegisterCountProps,
+  ClosureSheet,
+  type ClosureSheetProps,
+} from './register';
+
+// Settings components
+export {
+  SettingsRow,
+  type SettingsRowProps,
+  SettingsGroup,
+  type SettingsGroupProps,
+  ConnectorStatus,
+  type ConnectorStatusProps,
+  type ConnectionStatus,
+} from './settings';
+
+// Sale components
+export {
+  Cart, CartBar, Tender, DiscountForm, DiscountChips, parseDiscount, discountLabel,
+  Catalogue, formatStockSyncTime, Receipt, injectPrintStyle, SyncStatus, OrdersList,
+} from './sale';
+
+// Layout components
+export {
+  POSLayout,
+  type POSLayoutProps,
+  CheckoutLayout,
+  type CheckoutLayoutProps,
+  SettingsLayout,
+  type SettingsLayoutProps,
+  LiveTabScreen,
+  type LiveTabScreenProps,
+  type LiveTabScreenState,
+  StoreSettingsChoiceScreen,
+  type StoreSettingsChoiceScreenProps,
+} from './layout';