@tallyui/components 1.0.0 → 3.0.0-next.0

package/src/product/product-list.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import { ScrollView, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface ProductListProps extends Omit<ViewProps, 'children'> {
+  items: any[];
+  renderItem: (item: any, index: number) => ReactNode;
+  searchSlot?: ReactNode;
+  filterSlot?: ReactNode;
+  emptyState?: ReactNode;
+  className?: string;
+}
+
+export function ProductList({
+  items,
+  renderItem,
+  searchSlot,
+  filterSlot,
+  emptyState,
+  className,
+  ...viewProps
+}: ProductListProps) {
+  const hasItems = items.length > 0;
+
+  return (
+    <View className={cn('flex-1', className)} {...viewProps}>
+      {searchSlot && <View className="px-3 py-2">{searchSlot}</View>}
+      {filterSlot && <View className="px-3 pb-2">{filterSlot}</View>}
+
+      {hasItems ? (
+        <ScrollView className="flex-1">
+          {items.map((item, index) => (
+            <View key={item.id ?? index} className="border-b border-border">
+              {renderItem(item, index)}
+            </View>
+          ))}
+        </ScrollView>
+      ) : (
+        emptyState ?? null
+      )}
+    </View>
+  );
+}

package/src/product/product-price.tsx

@@ -1,53 +1,108 @@
-import { Text, type TextProps } from 'react-native';
-
-import { useProductTraits } from '@tallyui/core';
+import { formatMoney, minorUnitDigits, moneyToMajor, resolvePrice, resolvePriceRange, useProductTraits, useTraitContext } from '@tallyui/core';
+import type { Money } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
+import { Text, type TextProps } from '../ui';
 
 export interface ProductPriceProps extends Omit<TextProps, 'children'> {
   /** The raw RxDB product document (connector-specific shape) */
   doc: any;
-  /** Currency symbol to prepend (defaults to '$') */
+  /**
+   * Currency to show when the product is priced in several. Defaults to the
+   * provider's store currency, then to the first currency listed.
+   */
+  currency?: string;
+  /** BCP 47 locale for number formatting. Defaults to the runtime locale. */
+  locale?: string;
+  /** Symbol to prepend when the currency is unknown (defaults to '$') */
   currencySymbol?: string;
+  /**
+   * When the connector's variants have differing prices, show
+   * `{fromLabel} <lowest price>` instead of the default variant's price.
+   * Defaults to true.
+   */
+  showFromPrice?: boolean;
+  /**
+   * Label shown before the lowest price when variant prices differ.
+   * @deprecated Use formatFrom.
+   */
+  fromLabel?: string;
+  /**
+   * Formats the lowest price when variant prices differ, for languages
+   * whose word order puts the label after the price. Defaults to
+   * `` (price) => `from ${price}` ``. Wins over `fromLabel` when both are given.
+   */
+  formatFrom?: (price: string) => string;
   className?: string;
 }
 
 /**
- * Displays a product's price.
+ * Displays a product's price, and the price it replaces while on sale.
  *
- * Works with any connector — extracts price via traits regardless
- * of whether it's a string field (WooCommerce) or derived from
- * variant pricing (Medusa).
+ * Reads the backend-neutral price list (`getPrices`), so a WooCommerce sale
+ * price, a Medusa sale price list and a Shopify compare-at price all render
+ * the same way.
  *
  * ```tsx
- * <ProductPrice doc={productDocument} currencySymbol="$" />
+ * <ProductPrice doc={productDocument} currency="EUR" />
  * ```
  */
-export function ProductPrice({ doc, currencySymbol = '$', className, ...textProps }: ProductPriceProps) {
-  const { getPrice, isOnSale, getSalePrice, getRegularPrice } = useProductTraits();
-  const price = getPrice(doc);
+export function ProductPrice({ doc, currency, locale, currencySymbol = '$', className, showFromPrice = true, fromLabel, formatFrom, ...textProps }: ProductPriceProps) {
+  const { getPrices, getVariants } = useProductTraits();
+  const traitContext = useTraitContext();
+  const effectiveCurrency = currency ?? traitContext.currency;
+
+  // Unknown currency ('XXX'): plain decimal behind the fallback symbol.
+  const format = (money: Money) =>
+    formatMoney(money, locale)
+    ?? `${currencySymbol}${moneyToMajor(money).toFixed(minorUnitDigits(money.currency))}`;
+
+  const variants = showFromPrice ? getVariants?.(doc, traitContext) : undefined;
+  const range = variants && variants.length >= 2 ? resolvePriceRange(variants, effectiveCurrency) : undefined;
+
+  const applyFormatFrom = formatFrom ?? (fromLabel !== undefined ? (price: string) => `${fromLabel} ${price}` : (price: string) => `from ${price}`);
+
+  if (range && range.min.amount !== range.max.amount) {
+    return (
+      <Text
+        className={cn('text-sm font-medium text-price', className)}
+        {...textProps}
+        style={[{ fontVariant: ['tabular-nums'] }, textProps.style]}
+      >
+        {applyFormatFrom(format(range.min))}
+      </Text>
+    );
+  }
+
+  const resolved = resolvePrice(getPrices(doc, traitContext), effectiveCurrency);
 
-  if (!price) {
+  if (!resolved) {
     return (
-      <Text className={cn('text-sm text-muted', className)} {...textProps}>
+      <Text className={cn('text-sm text-muted-foreground', className)} {...textProps}>
         -
       </Text>
     );
   }
 
-  if (isOnSale(doc)) {
-    const salePrice = getSalePrice(doc);
-    const regularPrice = getRegularPrice(doc);
+  if (resolved.was) {
     return (
-      <Text className={cn('text-sm font-medium text-sale', className)} {...textProps}>
-        {currencySymbol}{salePrice ?? price}
-        {regularPrice ? ` (was ${currencySymbol}${regularPrice})` : ''}
+      <Text
+        className={cn('text-sm font-semibold text-sale', className)}
+        {...textProps}
+        style={[{ fontVariant: ['tabular-nums'] }, textProps.style]}
+      >
+        {format(resolved.current)}{' '}
+        <Text className="text-muted-foreground line-through" style={{ textDecorationLine: 'line-through' }}>(was {format(resolved.was)})</Text>
       </Text>
     );
   }
 
   return (
-    <Text className={cn('text-sm font-medium text-price', className)} {...textProps}>
-      {currencySymbol}{price}
+    <Text
+      className={cn('text-sm font-medium text-price', className)}
+      {...textProps}
+      style={[{ fontVariant: ['tabular-nums'] }, textProps.style]}
+    >
+      {format(resolved.current)}
     </Text>
   );
 }

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,161 @@
+import { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, View } from 'react-native';
+import type { useRegisterSession } from '@tallyui/pos';
+import { countVariance, TAX_ROUNDING_MIXED_NOTE, 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>}
+        {/* Not a figure either (#287). The wording is approved by the Front desk, 2026-09-30. */}
+        {closure.breakdowns.tax_rounding_mixed === true && (
+          <Text testID="closure-tax-rounding-mixed" className="text-muted-foreground">
+            {TAX_ROUNDING_MIXED_NOTE}
+          </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';