@tallyui/components 1.0.0 → 2.0.0

package/src/product/product-sku.tsx

@@ -1,7 +1,6 @@
-import { Text, type TextProps } from 'react-native';
-
 import { useProductTraits } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { Text, type TextProps } from '../ui';
 
 export interface ProductSkuProps extends Omit<TextProps, 'children'> {
   /** The raw RxDB product document (connector-specific shape) */
@@ -22,12 +21,13 @@ export interface ProductSkuProps extends Omit<TextProps, 'children'> {
  * ```
  */
 export function ProductSku({ doc, fallback = '—', className, ...textProps }: ProductSkuProps) {
-  const { getSku } = useProductTraits();
+  const { getSku, getVariantCount } = useProductTraits();
+  const count = getVariantCount(doc);
   const sku = getSku(doc);
 
   return (
-    <Text className={cn('text-xs text-muted', className)} {...textProps}>
-      {sku ?? fallback}
+    <Text className={cn('text-xs text-muted-foreground', className)} {...textProps}>
+      {count > 1 ? `${count} variants` : sku ?? fallback}
     </Text>
   );
 }

package/src/product/product-stock-badge.tsx

@@ -1,73 +1,86 @@
-import { Text, View, type ViewProps } from 'react-native';
+import { View } from 'react-native';
 
-import { useProductTraits } from '@tallyui/core';
+import { useProductStock } from '@tallyui/core';
+import type { StockStatus } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { Text, HStack, type HStackProps } from '../ui';
 
-export interface ProductStockBadgeProps extends Omit<ViewProps, 'children'> {
+export interface ProductStockBadgeProps extends Omit<HStackProps, 'children'> {
   /** The raw RxDB product document (connector-specific shape) */
   doc: any;
   /** Whether to show the quantity alongside the status */
   showQuantity?: boolean;
+  /** Append when reconciled stock was last confirmed, if the provider gives it (default true) */
+  showAsOf?: boolean;
   className?: string;
 }
 
-const statusLabels: Record<string, string> = {
-  instock: 'In Stock',
-  outofstock: 'Out of Stock',
-  onbackorder: 'On Backorder',
+const statusLabels: Record<StockStatus, string> = {
+  in_stock: 'In Stock',
+  out_of_stock: 'Out of Stock',
+  backorder: 'On Backorder',
   unknown: 'Unknown',
 };
 
-const STATUS_STYLES: Record<string, { badge: string; dot: string; text: string }> = {
-  instock: {
+const STATUS_STYLES: Record<StockStatus, { badge: string; dot: string; text: string }> = {
+  in_stock: {
     badge: 'bg-success/15',
     dot: 'bg-success',
-    text: 'text-success',
+    text: 'text-foreground',
   },
-  outofstock: {
-    badge: 'bg-danger/15',
-    dot: 'bg-danger',
-    text: 'text-danger',
+  out_of_stock: {
+    badge: 'bg-destructive/15',
+    dot: 'bg-destructive',
+    text: 'text-foreground',
   },
-  onbackorder: {
+  backorder: {
     badge: 'bg-warning/15',
     dot: 'bg-warning',
-    text: 'text-warning',
+    text: 'text-foreground',
   },
   unknown: {
     badge: 'bg-muted/15',
     dot: 'bg-muted',
-    text: 'text-muted',
+    text: 'text-muted-foreground',
   },
 };
 
+/** Local HH:MM when `iso` is today, otherwise a short local date. */
+function formatAsOf(iso: string): string {
+  const date = new Date(iso);
+  return date.toDateString() === new Date().toDateString()
+    ? date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+    : date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
+}
+
 /**
  * Displays a visual stock status badge for a product.
  *
- * Shows a colored label (In Stock / Out of Stock / On Backorder)
- * with an optional quantity count.
+ * Shows a label (In Stock / Out of Stock / On Backorder) with a dot carrying the colour
+ * with an optional quantity count. When the ConnectorProvider is given a
+ * reconciled stock overlay, it shows that stock and when it was confirmed.
  *
  * ```tsx
  * <ProductStockBadge doc={productDocument} showQuantity />
  * ```
  */
-export function ProductStockBadge({ doc, showQuantity = false, className, ...viewProps }: ProductStockBadgeProps) {
-  const { getStockStatus, getStockQuantity } = useProductTraits();
-  const status = getStockStatus(doc);
-  const quantity = getStockQuantity(doc);
+export function ProductStockBadge({ doc, showQuantity = false, showAsOf = true, className, ...props }: ProductStockBadgeProps) {
+  const { status, quantity, asOf } = useProductStock(doc);
   const label = statusLabels[status] ?? statusLabels.unknown;
   const styles = STATUS_STYLES[status] ?? STATUS_STYLES.unknown;
 
   return (
-    <View
-      className={cn('flex-row items-center self-start gap-1.5 rounded-xl px-2 py-1', styles.badge, className)}
-      {...viewProps}
+    <HStack
+      space="none"
+      className={cn('gap-1.5 self-start rounded-xl px-2 py-1', styles.badge, className)}
+      {...props}
     >
       <View className={cn('h-1.5 w-1.5 rounded-full', styles.dot)} />
       <Text className={cn('text-xs font-semibold', styles.text)}>
         {label}
-        {showQuantity && quantity != null ? ` (${quantity})` : ''}
+        {status !== 'out_of_stock' && showQuantity && quantity != null ? ` (${quantity})` : ''}
+        {asOf && showAsOf ? <Text className="text-xs font-normal text-muted-foreground">{` · as of ${formatAsOf(asOf)}`}</Text> : null}
       </Text>
-    </View>
+    </HStack>
   );
 }

package/src/product/product-title.tsx

@@ -1,7 +1,6 @@
-import { Text, type TextProps } from 'react-native';
-
 import { useProductTraits } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { Text, type TextProps } from '../ui';
 
 export interface ProductTitleProps extends Omit<TextProps, 'children'> {
   /** The raw RxDB product document (connector-specific shape) */
@@ -23,7 +22,7 @@ export interface ProductTitleProps extends Omit<TextProps, 'children'> {
 export function ProductTitle({ doc, className, ...textProps }: ProductTitleProps) {
   const { getName } = useProductTraits();
   return (
-    <Text className={cn('text-base font-semibold text-foreground', className)} {...textProps}>
+    <Text className={cn('font-semibold', className)} {...textProps}>
       {getName(doc)}
     </Text>
   );

package/src/product/product-variant-picker.tsx

@@ -0,0 +1,61 @@
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface VariantOption {
+  name: string;
+  values: string[];
+}
+
+export interface ProductVariantPickerProps extends Omit<ViewProps, 'children'> {
+  options: VariantOption[];
+  selected?: Record<string, string>;
+  onSelect?: (selection: Record<string, string>) => void;
+  className?: string;
+}
+
+export function ProductVariantPicker({
+  options,
+  selected = {},
+  onSelect,
+  className,
+  ...viewProps
+}: ProductVariantPickerProps) {
+  const handleSelect = (optionName: string, value: string) => {
+    onSelect?.({ ...selected, [optionName]: value });
+  };
+
+  return (
+    <View className={cn('gap-3', className)} {...viewProps}>
+      {options.map((option) => (
+        <View key={option.name} className="gap-1.5">
+          <Text className="text-xs font-semibold text-muted-foreground">{option.name}</Text>
+          <View className="flex-row flex-wrap gap-2">
+            {option.values.map((value) => {
+              const active = selected[option.name] === value;
+              return (
+                <Pressable
+                  key={value}
+                  onPress={() => handleSelect(option.name, value)}
+                  className={cn(
+                    'rounded-lg border px-3 py-1.5',
+                    active ? 'border-primary bg-primary/10' : 'border-border bg-card',
+                  )}
+                >
+                  <Text
+                    className={cn(
+                      'text-sm font-medium',
+                      active ? 'text-primary' : 'text-foreground',
+                    )}
+                  >
+                    {value}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/register/cash-count-input.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+import { QuantityStepper } from '../input/quantity-stepper';
+
+export interface Denomination {
+  label: string;
+  value: number;
+}
+
+const DEFAULT_DENOMINATIONS: Denomination[] = [
+  { label: '$100', value: 100 },
+  { label: '$50', value: 50 },
+  { label: '$20', value: 20 },
+  { label: '$10', value: 10 },
+  { label: '$5', value: 5 },
+  { label: '$1', value: 1 },
+  { label: '25\u00a2', value: 0.25 },
+  { label: '10\u00a2', value: 0.10 },
+  { label: '5\u00a2', value: 0.05 },
+  { label: '1\u00a2', value: 0.01 },
+];
+
+export interface CashCountInputProps extends Omit<ViewProps, 'children'> {
+  denominations?: Denomination[];
+  defaultCounts?: Record<number, number>;
+  counts?: Record<number, number>;
+  onChangeCounts?: (counts: Record<number, number>) => void;
+  onChangeTotal?: (total: number) => void;
+  className?: string;
+}
+
+export function CashCountInput({
+  denominations = DEFAULT_DENOMINATIONS,
+  defaultCounts,
+  counts: controlledCounts,
+  onChangeCounts,
+  onChangeTotal,
+  className,
+  ...viewProps
+}: CashCountInputProps) {
+  const [internalCounts, setInternalCounts] = useState<Record<number, number>>(defaultCounts ?? {});
+  const counts = controlledCounts ?? internalCounts;
+
+  const total = denominations.reduce(
+    (sum, d) => sum + d.value * (counts[d.value] ?? 0),
+    0,
+  );
+
+  const handleCountChange = (denomination: number, quantity: number) => {
+    const next = { ...counts, [denomination]: quantity };
+    if (controlledCounts === undefined) setInternalCounts(next);
+    onChangeCounts?.(next);
+    const newTotal = denominations.reduce(
+      (sum, d) => sum + d.value * (next[d.value] ?? 0),
+      0,
+    );
+    onChangeTotal?.(newTotal);
+  };
+
+  return (
+    <View className={cn('gap-2', className)} {...viewProps}>
+      {denominations.map((d) => (
+        <View key={d.value} className="flex-row items-center justify-between px-3 py-1">
+          <Text className="w-16 text-sm font-medium text-foreground">{d.label}</Text>
+          <QuantityStepper
+            quantity={counts[d.value] ?? 0}
+            min={0}
+            onChangeQuantity={(qty) => handleCountChange(d.value, qty)}
+          />
+          <Text className="w-20 text-right text-sm text-muted-foreground">
+            {(d.value * (counts[d.value] ?? 0)).toFixed(2)}
+          </Text>
+        </View>
+      ))}
+      <View className="border-t border-border px-3 pt-2">
+        <Text className="text-right text-base font-bold text-foreground">
+          Total: {total.toFixed(2)}
+        </Text>
+      </View>
+    </View>
+  );
+}

package/src/register/closure-sheet.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, View } from 'react-native';
+import type { useRegisterSession } from '@tallyui/pos';
+import { countVariance, varianceText } from '@tallyui/pos';
+
+import { formatMoney, minorUnitDigits } from '@tallyui/core';
+import { Button } from '../ui/button';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { Text } from '../ui/text';
+import { tenderLabel, varianceWord } from './register-count';
+
+/**
+ * The completion checkmark's entrance: fades and scales in over 180ms unless the platform
+ * reports reduced motion (`AccessibilityInfo.isReduceMotionEnabled`; on web, react-native-web
+ * resolves it from `matchMedia('(prefers-reduced-motion: reduce)')`), in which case it appears
+ * at once. Plain `Animated`, not `react-native-reanimated`: no new dependency.
+ */
+function useCompletionMotion() {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0.6)).current;
+  useEffect(() => {
+    let cancelled = false;
+    AccessibilityInfo.isReduceMotionEnabled().then((reduced) => {
+      if (cancelled) return;
+      if (reduced) {
+        opacity.setValue(1);
+        scale.setValue(1);
+        return;
+      }
+      Animated.parallel([
+        Animated.timing(opacity, { toValue: 1, duration: 180, useNativeDriver: false }),
+        Animated.timing(scale, { toValue: 1, duration: 180, useNativeDriver: false }),
+      ]).start();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [opacity, scale]);
+  return { opacity, scale };
+}
+
+export interface ClosureSheetProps {
+  /** `useRegisterSession`'s return value: reads `lastClosure` and `blind`. */
+  register: ReturnType<typeof useRegisterSession>;
+  /** ISO 4217 code, for the figures. */
+  currency: string;
+  /** Renders no print button when absent — printing is a later job (registers c2). */
+  onPrint?: () => void | Promise<void>;
+  onDone: () => void;
+}
+
+/**
+ * Confirms a closed session from `register.lastClosure`: the local closure number always, and
+ * the counted figures and variance per tender unless `blind`. Port provenance (ADR-032
+ * amendment 1): WCPOS `next` `3b5331b5c` `closure-sheet.tsx` (LEDGER 54, 62). Leaves out the
+ * Z-report preview, print/reprint and the server-number adoption (registers c2) — `onPrint` is
+ * an optional hook for a host that later wires up printing; without it, no button renders.
+ * Unlike WCPOS (which still shows counted cash to a blind cashier), every figure here is hidden
+ * while blind, per the register-screens-b design, since TallyUI's closure lists every tender.
+ */
+export function ClosureSheet({ register, currency, onPrint, onDone }: ClosureSheetProps) {
+  const { lastClosure: closure, blind } = register;
+  const digits = minorUnitDigits(currency);
+  const { opacity, scale } = useCompletionMotion();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  if (!closure) return null;
+  const methods = Object.keys(closure.counted);
+  const approvedByName = closure.breakdowns.approved_by_name;
+  const approvedById = closure.breakdowns.approved_by;
+  const approvedBy =
+    typeof approvedByName === 'string' && approvedByName
+      ? approvedByName
+      : typeof approvedById === 'string' && approvedById
+        ? approvedById
+        : '';
+  const print = async () => {
+    if (!onPrint) return;
+    setBusy(true);
+    setError('');
+    try {
+      await onPrint();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onDone();
+      }}
+    >
+      <DialogContent testID="closure-sheet">
+        <Animated.View
+          testID="closure-check"
+          style={{ opacity, transform: [{ scale }] }}
+          className="bg-success/10 h-10 w-10 items-center justify-center rounded-full"
+        >
+          <Text className="text-success text-lg font-bold" accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            {'✓'}
+          </Text>
+        </Animated.View>
+        <DialogTitle testID="closure-title">Register closed</DialogTitle>
+        {/* The number stays visible, blind or not: the Z report references it (the Front desk, 2026-09-28). */}
+        <Text testID="closure-number" className="text-muted-foreground min-h-11">{`Closure #${closure.number}`}</Text>
+        {!blind && (
+          <View testID="closure-figures" className="gap-3">
+            {methods.map((method) => {
+              const countedMinor = closure.counted[method] ?? 0;
+              const expectedMinor = closure.expected[method] ?? 0;
+              const varianceMinor = closure.variance[method] ?? countVariance(countedMinor, expectedMinor);
+              return (
+                <View key={method} className="gap-1">
+                  <Text className="text-muted-foreground text-xs font-semibold">{tenderLabel(method)}</Text>
+                  <Text testID={`closure-counted-${method}`} className="min-h-11 tabular-nums">
+                    {`Counted ${formatMoney({ amount: countedMinor, currency })}`}
+                  </Text>
+                  <Text testID={`closure-expected-${method}`} className="min-h-11 tabular-nums">
+                    {`Expected ${formatMoney({ amount: expectedMinor, currency })}`}
+                  </Text>
+                  <Text testID={`closure-variance-${method}`} className="min-h-11 tabular-nums">
+                    {varianceText(
+                      varianceMinor,
+                      digits,
+                      (major) => formatMoney({ amount: Math.round(major * 10 ** digits), currency }) ?? '',
+                      varianceWord,
+                    )}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
+        )}
+        {/* Not a figure: shows who approved the close even while blind. */}
+        {!!approvedBy && <Text testID="closure-approved-by">Approved by {approvedBy}</Text>}
+        {!!error && (
+          <Text testID="closure-print-error" className="text-destructive">
+            {error}
+          </Text>
+        )}
+        {!blind && !!onPrint && (
+          <Button testID="closure-print" className="min-h-14" disabled={busy} onPress={print}>
+            <Text>{busy ? 'Printing…' : 'Print the Z report'}</Text>
+          </Button>
+        )}
+        <Button testID="closure-done" variant="outline" className="min-h-14" onPress={onDone}>
+          <Text>Done</Text>
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/register/index.ts

@@ -0,0 +1,12 @@
+export { CashCountInput, type CashCountInputProps, type Denomination } from './cash-count-input';
+export { RegisterSummary, type RegisterSummaryProps, type TransactionSummary } from './register-summary';
+export { RegisterOpenClose, type RegisterOpenCloseProps } from './register-open-close';
+export { RegisterPicker, type RegisterPickerProps, type RegisterPickerRegister } from './register-picker';
+export { OpenRegisterCard, type OpenRegisterCardProps } from './open-register-card';
+export { RegisterBar, type RegisterBarProps } from './register-bar';
+export { describeRegisterBarPill, type RegisterBarPill } from './register-bar.helpers';
+export { MovementSheet, type MovementSheetProps } from './movement-sheet';
+export { RegisterPanel, type RegisterPanelProps } from './register-panel';
+export { RegisterColumn, type RegisterColumnProps } from './register-column';
+export { RegisterCount, APPROVAL_REQUIRED_TEXT, type RegisterCountProps } from './register-count';
+export { ClosureSheet, type ClosureSheetProps } from './closure-sheet';

package/src/register/movement-sheet.tsx

@@ -0,0 +1,118 @@
+import { useRef, useState } from 'react';
+import type { MovementType, useRegisterSession } from '@tallyui/pos';
+import { movementFieldError, normalizeAmount, parseMinor } from '@tallyui/pos';
+
+import { currencySymbol, minorUnitDigits } from '@tallyui/core';
+import { Button } from '../ui/button';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Text } from '../ui/text';
+
+const LABELS: Record<MovementType, string> = {
+  paid_in: 'Paid in',
+  paid_out: 'Paid out',
+  no_sale: 'No sale',
+};
+
+const AMOUNT_LABEL_ID = 'movement-amount-label';
+const REASON_LABEL_ID = 'movement-reason-label';
+
+export interface MovementSheetProps {
+  /** `useRegisterSession`'s return value: records the movement through `register.actions.recordMovement`. */
+  register: ReturnType<typeof useRegisterSession>;
+  /** The caller mounts this only once a type is chosen, so the sheet always has one to record. */
+  type: MovementType;
+  /** ISO 4217 code, for parsing the typed amount into minor units. */
+  currency: string;
+  onDone?: (id: string, type: MovementType, amountMinor: number) => void;
+  onOpenChange: (open: boolean) => void;
+  /** A no-sale opens the drawer once recorded (LEDGER 66); there is nothing to open otherwise. */
+  onOpenDrawer?: () => void;
+}
+
+/**
+ * Records a paid-in, paid-out or no-sale cash movement. Port provenance (ADR-032 amendment 1):
+ * WCPOS `next` `3b5331b5c` `movement-sheet.tsx` (LEDGER 55, 56, 66).
+ *
+ * The cash moves the moment the cashier confirms, so validation happens before the tap, never
+ * after: a refusal afterwards would mean cash already moved with no record of it. A no-sale
+ * hides the amount field, always records zero, and opens the drawer once the row is written.
+ */
+export function MovementSheet({ register, type, currency, onDone, onOpenChange, onOpenDrawer }: MovementSheetProps) {
+  const digits = minorUnitDigits(currency);
+  const [amount, setAmount] = useState('');
+  const [reason, setReason] = useState('');
+  const [busy, setBusy] = useState(false);
+  // Two taps before a render must not mint two rows (LEDGER 56): a synchronous ref, not only
+  // the rendered busy state, claims the submission the instant the first tap runs.
+  const busyRef = useRef(false);
+  const [error, setError] = useState('');
+  const invalid = movementFieldError({ type, amount, reason });
+  const confirm = async () => {
+    if (invalid || busyRef.current) return;
+    busyRef.current = true;
+    setBusy(true);
+    setError('');
+    const normalized = type === 'no_sale' ? '0' : normalizeAmount(amount);
+    const trimmedReason = reason.trim();
+    try {
+      const amountMinor = parseMinor(normalized, digits);
+      const row = await register.actions.recordMovement({ type, amountMinor, reason: trimmedReason });
+      onDone?.(row.id, type, amountMinor);
+      if (type === 'no_sale') onOpenDrawer?.();
+      onOpenChange(false);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      busyRef.current = false;
+      setBusy(false);
+    }
+  };
+  return (
+    <Dialog open onOpenChange={onOpenChange}>
+      <DialogContent testID="movement-sheet">
+        <DialogTitle>{LABELS[type]}</DialogTitle>
+        {type !== 'no_sale' && (
+          <>
+            <Label testID="movement-amount-label" nativeID={AMOUNT_LABEL_ID}>
+              {`Amount (${currencySymbol(currency)})`}
+            </Label>
+            <Input>
+              <Input.Field
+                testID="movement-amount"
+                value={amount}
+                onChangeText={setAmount}
+                keyboardType="decimal-pad"
+                accessibilityLabel={`Amount (${currencySymbol(currency)})`}
+                accessibilityLabelledBy={AMOUNT_LABEL_ID}
+              />
+            </Input>
+          </>
+        )}
+        <Label testID="movement-reason-label" nativeID={REASON_LABEL_ID}>
+          Reason
+        </Label>
+        <Input>
+          <Input.Field
+            testID="movement-reason"
+            placeholder="Reason"
+            value={reason}
+            onChangeText={setReason}
+            accessibilityLabel="Reason"
+            accessibilityLabelledBy={REASON_LABEL_ID}
+          />
+        </Input>
+        {!!error && <Text className="text-destructive">{error}</Text>}
+        {!!invalid && (
+          <Text testID="movement-invalid" className="text-muted-foreground">
+            {invalid === 'amount' ? 'Enter a valid amount.' : 'Enter a reason.'}
+          </Text>
+        )}
+        <Button testID="movement-confirm" disabled={!!invalid || busy} onPress={confirm}>
+          <Text>{busy ? 'Recording…' : 'Record'}</Text>
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}