@tallyui/components 1.0.0 → 3.0.0-next.0

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,14 +55,23 @@ export {
   type FilterChipProps,
   type FilterChipGroupProps,
   type ChipItem,
+  QuantityStepper,
+  type QuantityStepperProps,
 } from './input';
 
 // Customer components
 export {
   CustomerCard,
   CustomerSelect,
+  CustomerPicker,
+  type CustomerPickerProps,
   type CustomerCardProps,
   type CustomerSelectProps,
+  CustomerForm,
+  type CustomerFormProps,
+  type CustomerFormValues,
+  CustomerOrderHistory,
+  type CustomerOrderHistoryProps,
 } from './customer';
 
 // Checkout components
@@ -58,4 +86,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';

package/src/input/filter-chip.tsx

@@ -1,6 +1,8 @@
-import { Pressable, ScrollView, Text, type ViewProps } from 'react-native';
-
+import { useMemo } from 'react';
+import { Pressable, ScrollView, type ViewProps } from 'react-native';
+import { ToggleGroup } from '@tallyui/primitives';
 import { cn } from '@tallyui/theme';
+import { Text } from '../ui';
 
 export interface FilterChipProps {
   label: string;
@@ -9,20 +11,33 @@ export interface FilterChipProps {
   className?: string;
 }
 
+/**
+ * A single toggle chip. When used standalone, renders as a simple
+ * ToggleGroup with one item.
+ */
 export function FilterChip({ label, active, onPress, className }: FilterChipProps) {
+  const value = useMemo(() => (active ? [label] : []), [active, label]);
+
   return (
-    <Pressable
-      onPress={onPress}
-      className={cn(
-        'rounded-full px-3 py-1.5',
-        active ? 'bg-primary' : 'bg-surface-alt',
-        className,
-      )}
+    <ToggleGroup.Root
+      type="multiple"
+      value={value}
+      onValueChange={() => onPress()}
     >
-      <Text className={cn('text-xs font-semibold', active ? 'text-primary-foreground' : 'text-muted')}>
-        {label}
-      </Text>
-    </Pressable>
+      <ToggleGroup.Item value={label} asChild>
+        <Pressable
+          className={cn(
+            'rounded-full px-3 py-1.5',
+            active ? 'bg-primary' : 'bg-accent',
+            className,
+          )}
+        >
+          <Text className={cn('text-xs font-semibold', active ? 'text-primary-foreground' : 'text-muted-foreground')}>
+            {label}
+          </Text>
+        </Pressable>
+      </ToggleGroup.Item>
+    </ToggleGroup.Root>
   );
 }
 
@@ -37,22 +52,65 @@ export interface FilterChipGroupProps extends Omit<ViewProps, 'children'> {
   className?: string;
 }
 
+/**
+ * A horizontal scrollable row of toggleable filter chips.
+ *
+ * Built on top of the ToggleGroup primitive for proper `aria-pressed`
+ * semantics and accessible toggle group behavior.
+ */
 export function FilterChipGroup({ chips, onChipPress, className, ...viewProps }: FilterChipGroupProps) {
+  // Derive the controlled value from which chips are active
+  const activeValues = useMemo(
+    () => chips.filter((c) => c.active).map((c) => c.label),
+    [chips],
+  );
+
+  // Build a label-to-index lookup so we can translate back to onChipPress(index)
+  const labelToIndex = useMemo(() => {
+    const map = new Map<string, number>();
+    chips.forEach((chip, i) => map.set(chip.label, i));
+    return map;
+  }, [chips]);
+
+  function handleValueChange(newValues: string[]) {
+    // Find which chip was toggled by diffing against current active set
+    const added = newValues.find((v) => !activeValues.includes(v));
+    const removed = activeValues.find((v) => !newValues.includes(v));
+    const toggledLabel = added ?? removed;
+    if (toggledLabel !== undefined) {
+      const index = labelToIndex.get(toggledLabel);
+      if (index !== undefined) onChipPress(index);
+    }
+  }
+
   return (
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerClassName={cn('flex-row gap-2', className)}
-      {...viewProps}
+    <ToggleGroup.Root
+      type="multiple"
+      value={activeValues}
+      onValueChange={handleValueChange}
+      asChild
     >
-      {chips.map((chip, index) => (
-        <FilterChip
-          key={chip.label}
-          label={chip.label}
-          active={chip.active}
-          onPress={() => onChipPress(index)}
-        />
-      ))}
-    </ScrollView>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName={cn('flex-row gap-2', className)}
+        {...viewProps}
+      >
+        {chips.map((chip) => (
+          <ToggleGroup.Item key={chip.label} value={chip.label} asChild>
+            <Pressable
+              className={cn(
+                'rounded-full px-3 py-1.5',
+                chip.active ? 'bg-primary' : 'bg-accent',
+              )}
+            >
+              <Text className={cn('text-xs font-semibold', chip.active ? 'text-primary-foreground' : 'text-muted-foreground')}>
+                {chip.label}
+              </Text>
+            </Pressable>
+          </ToggleGroup.Item>
+        ))}
+      </ScrollView>
+    </ToggleGroup.Root>
   );
 }

package/src/input/index.ts

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

package/src/input/quantity-stepper.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface QuantityStepperProps extends Omit<ViewProps, 'children'> {
+  defaultQuantity?: number;
+  quantity?: number;
+  onChangeQuantity?: (quantity: number) => void;
+  min?: number;
+  max?: number;
+  className?: string;
+}
+
+export function QuantityStepper({
+  defaultQuantity = 1,
+  quantity: controlledQuantity,
+  onChangeQuantity,
+  min = 1,
+  max = 999,
+  className,
+  ...viewProps
+}: QuantityStepperProps) {
+  const [internalQuantity, setInternalQuantity] = useState(defaultQuantity);
+  const quantity = controlledQuantity ?? internalQuantity;
+
+  const handleChange = (next: number) => {
+    if (next < min || next > max) return;
+    if (controlledQuantity === undefined) setInternalQuantity(next);
+    onChangeQuantity?.(next);
+  };
+
+  return (
+    <View className={cn('flex-row items-center gap-2', className)} {...viewProps}>
+      <Pressable
+        onPress={() => handleChange(quantity - 1)}
+        disabled={quantity <= min}
+        className={cn(
+          'h-8 w-8 items-center justify-center rounded-lg',
+          quantity <= min ? 'bg-muted/50' : 'bg-muted',
+        )}
+      >
+        <Text className={cn('text-base font-semibold', quantity <= min ? 'text-muted-foreground' : 'text-foreground')}>
+          {'\u2212'}
+        </Text>
+      </Pressable>
+      <Text className="min-w-[2rem] text-center text-base font-semibold text-foreground">
+        {quantity}
+      </Text>
+      <Pressable
+        onPress={() => handleChange(quantity + 1)}
+        disabled={quantity >= max}
+        className={cn(
+          'h-8 w-8 items-center justify-center rounded-lg',
+          quantity >= max ? 'bg-muted/50' : 'bg-muted',
+        )}
+      >
+        <Text className={cn('text-base font-semibold', quantity >= max ? 'text-muted-foreground' : 'text-foreground')}>
+          +
+        </Text>
+      </Pressable>
+    </View>
+  );
+}

package/src/input/search-input.tsx

@@ -1,6 +1,8 @@
-import { TextInput, View, Text, type TextInputProps } from 'react-native';
-
+import { useId, useState } from 'react';
+import { TextInput, View, type TextInputProps } from 'react-native';
+import { Label } from '@tallyui/primitives';
 import { cn } from '@tallyui/theme';
+import { SearchIcon, HStack } from '../ui';
 
 export interface SearchInputProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
   value: string;
@@ -8,19 +10,40 @@ export interface SearchInputProps extends Omit<TextInputProps, 'value' | 'onChan
   className?: string;
 }
 
-export function SearchInput({ value, onChangeText, className, placeholder = 'Search...', ...props }: SearchInputProps) {
+export function SearchInput({ value, onChangeText, className, placeholder = 'Search...', style, onFocus, onBlur, ...props }: SearchInputProps) {
+  const labelId = useId();
+  const [focused, setFocused] = useState(false);
+
   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>
+    <HStack space="sm" className={cn(
+      'rounded-lg border bg-card px-3 py-2.5',
+      focused ? 'border-ring' : 'border-border',
+      className,
+    )}>
+      <Label.Root nativeID={labelId} asChild>
+        <View aria-hidden className="text-muted-foreground">
+          <SearchIcon size={16} />
+        </View>
+      </Label.Root>
       <TextInput
         role="searchbox"
+        aria-labelledby={labelId}
         value={value}
         onChangeText={onChangeText}
         placeholder={placeholder}
-        placeholderTextColor="#9ca3af"
+        placeholderTextColorClassName="accent-muted-foreground"
         className="flex-1 text-sm text-foreground"
+        style={[{ outlineStyle: 'none' } as any, style]}
+        onFocus={(event) => {
+          setFocused(true);
+          onFocus?.(event);
+        }}
+        onBlur={(event) => {
+          setFocused(false);
+          onBlur?.(event);
+        }}
         {...props}
       />
-    </View>
+    </HStack>
   );
 }

package/src/layout/checkout-layout.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import { ScrollView, View, useWindowDimensions, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface CheckoutLayoutProps extends Omit<ViewProps, 'children'> {
+  summarySlot: ReactNode;
+  paymentSlot: ReactNode;
+  headerSlot?: ReactNode;
+  layout?: 'split' | 'stacked';
+  breakpoint?: number;
+  className?: string;
+}
+
+export function CheckoutLayout({
+  summarySlot,
+  paymentSlot,
+  headerSlot,
+  layout: layoutProp,
+  breakpoint = 768,
+  className,
+  ...viewProps
+}: CheckoutLayoutProps) {
+  const { width } = useWindowDimensions();
+  const layout = layoutProp ?? (width >= breakpoint ? 'split' : 'stacked');
+
+  return (
+    <View className={cn('flex-1 bg-bg', className)} {...viewProps}>
+      {headerSlot && <View className="border-b border-border">{headerSlot}</View>}
+
+      {layout === 'split' ? (
+        <View className="flex-1 flex-row">
+          <View className="flex-1 border-r border-border">{summarySlot}</View>
+          <View className="flex-1">{paymentSlot}</View>
+        </View>
+      ) : (
+        <ScrollView className="flex-1">
+          <View className="gap-4 p-4">
+            {summarySlot}
+            {paymentSlot}
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+}

package/src/layout/index.ts

@@ -0,0 +1,5 @@
+export { POSLayout, type POSLayoutProps } from './pos-layout';
+export { CheckoutLayout, type CheckoutLayoutProps } from './checkout-layout';
+export { SettingsLayout, type SettingsLayoutProps } from './settings-layout';
+export { LiveTabScreen, type LiveTabScreenProps, type LiveTabScreenState } from './live-tab-screen';
+export { StoreSettingsChoiceScreen, type StoreSettingsChoiceScreenProps } from './store-settings-choice-screen';

package/src/layout/live-tab-screen.tsx

@@ -0,0 +1,54 @@
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+/** Mirrors `LiveTabState` from `@tallyui/database`, without depending on that package. */
+export type LiveTabScreenState = 'acquiring' | 'live' | 'parked' | 'blocked';
+
+export interface LiveTabScreenProps extends Omit<ViewProps, 'children'> {
+  state: LiveTabScreenState;
+  /** Called when the parked screen's "Use here" button is pressed. */
+  onUseHere: () => void;
+  /** Called when the blocked screen's "Reload" button is pressed. */
+  onReload: () => void;
+  /** Title for both the parked and the blocked screen. */
+  parkedTitle?: string;
+  parkedBody?: string;
+  useHereLabel?: string;
+  blockedBody?: string;
+  reloadLabel?: string;
+  className?: string;
+}
+
+/**
+ * ADR-061: what a tab shows once it is no longer the live one. Renders
+ * nothing for `acquiring` and `live`.
+ */
+export function LiveTabScreen({
+  state,
+  onUseHere,
+  onReload,
+  parkedTitle = 'POS is open in another tab',
+  parkedBody = 'This tab stopped so the other one can work. Use it here instead?',
+  useHereLabel = 'Use here',
+  blockedBody = 'The POS is open in another tab. Close that tab to use it here, or reload this one.',
+  reloadLabel = 'Reload',
+  className,
+  ...viewProps
+}: LiveTabScreenProps) {
+  if (state !== 'parked' && state !== 'blocked') return null;
+
+  const body = state === 'parked' ? parkedBody : blockedBody;
+  const buttonLabel = state === 'parked' ? useHereLabel : reloadLabel;
+  const onPress = state === 'parked' ? onUseHere : onReload;
+
+  return (
+    <View className={cn('flex-1 items-center justify-center gap-4 bg-bg p-6', className)} {...viewProps}>
+      <Text className="text-center text-lg font-bold text-foreground">{parkedTitle}</Text>
+      <Text className="text-center text-sm text-muted-foreground">{body}</Text>
+      <Pressable onPress={onPress} className="items-center rounded-lg bg-primary px-4 py-3">
+        <Text className="text-sm font-semibold text-primary-foreground">{buttonLabel}</Text>
+      </Pressable>
+    </View>
+  );
+}

package/src/layout/pos-layout.tsx

@@ -0,0 +1,64 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, Text, View, useWindowDimensions, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface POSLayoutProps extends Omit<ViewProps, 'children'> {
+  browseSlot: ReactNode;
+  cartSlot: ReactNode;
+  headerSlot?: ReactNode;
+  layout?: 'split' | 'stacked';
+  breakpoint?: number;
+  className?: string;
+}
+
+export function POSLayout({
+  browseSlot,
+  cartSlot,
+  headerSlot,
+  layout: layoutProp,
+  breakpoint = 768,
+  className,
+  ...viewProps
+}: POSLayoutProps) {
+  const { width } = useWindowDimensions();
+  const layout = layoutProp ?? (width >= breakpoint ? 'split' : 'stacked');
+  const [activeTab, setActiveTab] = useState<'browse' | 'cart'>('browse');
+
+  return (
+    <View className={cn('flex-1 bg-bg', className)} {...viewProps}>
+      {headerSlot && <View className="border-b border-border">{headerSlot}</View>}
+
+      {layout === 'split' ? (
+        <View className="flex-1 flex-row">
+          <View className="flex-[3]">{browseSlot}</View>
+          <View className="flex-[2] border-l border-border">{cartSlot}</View>
+        </View>
+      ) : (
+        <>
+          <View className="flex-row border-b border-border">
+            <Pressable
+              onPress={() => setActiveTab('browse')}
+              className={cn('flex-1 py-3', activeTab === 'browse' && 'border-b-2 border-primary')}
+            >
+              <Text className={cn('text-center text-sm font-semibold', activeTab === 'browse' ? 'text-primary' : 'text-muted-foreground')}>
+                Browse
+              </Text>
+            </Pressable>
+            <Pressable
+              onPress={() => setActiveTab('cart')}
+              className={cn('flex-1 py-3', activeTab === 'cart' && 'border-b-2 border-primary')}
+            >
+              <Text className={cn('text-center text-sm font-semibold', activeTab === 'cart' ? 'text-primary' : 'text-muted-foreground')}>
+                Cart
+              </Text>
+            </Pressable>
+          </View>
+          <View className="flex-1">
+            {activeTab === 'browse' ? browseSlot : cartSlot}
+          </View>
+        </>
+      )}
+    </View>
+  );
+}

package/src/layout/settings-layout.tsx

@@ -0,0 +1,58 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, Text, View, useWindowDimensions, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface SettingsLayoutProps extends Omit<ViewProps, 'children'> {
+  navSlot: ReactNode;
+  contentSlot: ReactNode;
+  headerSlot?: ReactNode;
+  layout?: 'split' | 'stacked';
+  breakpoint?: number;
+  className?: string;
+}
+
+export function SettingsLayout({
+  navSlot,
+  contentSlot,
+  headerSlot,
+  layout: layoutProp,
+  breakpoint = 768,
+  className,
+  ...viewProps
+}: SettingsLayoutProps) {
+  const { width } = useWindowDimensions();
+  const layout = layoutProp ?? (width >= breakpoint ? 'split' : 'stacked');
+  const [showNav, setShowNav] = useState(false);
+
+  return (
+    <View className={cn('flex-1 bg-bg', className)} {...viewProps}>
+      {headerSlot && <View className="border-b border-border">{headerSlot}</View>}
+
+      {layout === 'split' ? (
+        <View className="flex-1 flex-row">
+          <View className="w-64 border-r border-border">{navSlot}</View>
+          <View className="flex-1">{contentSlot}</View>
+        </View>
+      ) : (
+        <View className="flex-1">
+          {showNav ? (
+            <View className="flex-1">
+              {navSlot}
+              <Pressable onPress={() => setShowNav(false)} className="border-t border-border p-3">
+                <Text className="text-center text-sm font-medium text-primary">Done</Text>
+              </Pressable>
+            </View>
+          ) : (
+            <View className="flex-1">
+              <Pressable onPress={() => setShowNav(true)} className="border-b border-border px-4 py-2">
+                <Text className="text-sm font-medium text-primary">Menu</Text>
+              </Pressable>
+              {contentSlot}
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}