@tallyui/components 1.0.0 → 2.0.0

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>
+  );
+}

package/src/layout/store-settings-choice-screen.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+import type { StoreSettingsChoice, StoreSettingsChoices } from '@tallyui/core';
+
+export interface StoreSettingsChoiceScreenProps extends Omit<ViewProps, 'children'> {
+  /** From `StoreSettingsError.choices`. Only the sections present are shown. */
+  choices: StoreSettingsChoices;
+  /** A previous choice to pre-select (for example, a stale stored one); fields that aren't in `choices` are ignored. */
+  initial?: StoreSettingsChoice;
+  /** Called with the full choice when the user confirms. The app persists it per store and retries `storeSettings`. */
+  onSubmit: (choice: StoreSettingsChoice) => void;
+  /** Display name for an ISO 3166-1 alpha-2 code. Default: `Intl.DisplayNames` in `locale`, falling back to the upper-cased code. */
+  countryName?: (code: string) => string;
+  locale?: string;
+  title?: string;
+  body?: string;
+  regionLabel?: string;
+  countryLabel?: string;
+  channelLabel?: string;
+  submitLabel?: string;
+  className?: string;
+}
+
+type Option = { value: string; label: string };
+
+/** The single option if there is only one, else a matching `initial` value, else none. */
+function useSectionSelection(options: Option[], initialValue: string | undefined) {
+  const preset = options.length === 1 ? options[0].value : options.find((o) => o.value === initialValue)?.value;
+  return useState<string | undefined>(preset);
+}
+
+function defaultCountryName(code: string, locale?: string): string {
+  try {
+    return new Intl.DisplayNames([locale ?? 'en'], { type: 'region' }).of(code.toUpperCase()) ?? code.toUpperCase();
+  } catch {
+    return code.toUpperCase();
+  }
+}
+
+/**
+ * TV4: shown when `storeSettings` rejects with `choice_required`. The app
+ * persists the returned choice per store and calls `storeSettings(context,
+ * choice)` again; a stored choice that no longer resolves raises
+ * `choice_required` again, and this screen pre-selects what still matches.
+ */
+export function StoreSettingsChoiceScreen({
+  choices,
+  initial,
+  onSubmit,
+  countryName,
+  locale,
+  title = 'Set up this till',
+  body = 'This store sells in more than one place. Choose where this till is.',
+  regionLabel = 'Region',
+  countryLabel = 'Country',
+  channelLabel = 'Sales channel',
+  submitLabel = 'Continue',
+  className,
+  ...viewProps
+}: StoreSettingsChoiceScreenProps) {
+  const regionOptions: Option[] = (choices.regions ?? []).map((r) => ({ value: r.id, label: r.name }));
+  const channelOptions: Option[] = (choices.channels ?? []).map((c) => ({ value: c.id, label: c.name }));
+  const nameForCountry = countryName ?? ((code: string) => defaultCountryName(code, locale));
+  const countryOptions: Option[] = (choices.countries ?? []).map((code) => ({ value: code, label: nameForCountry(code) }));
+
+  const [region, setRegion] = useSectionSelection(regionOptions, initial?.region);
+  const [country, setCountry] = useSectionSelection(countryOptions, initial?.country);
+  const [channel, setChannel] = useSectionSelection(channelOptions, initial?.channel);
+
+  const showRegions = regionOptions.length > 0;
+  const showCountries = countryOptions.length > 0;
+  const showChannels = channelOptions.length > 0;
+  const complete =
+    (!showRegions || region !== undefined) &&
+    (!showCountries || country !== undefined) &&
+    (!showChannels || channel !== undefined);
+
+  const handleSubmit = () => {
+    if (!complete) return;
+    const choice: StoreSettingsChoice = {};
+    if (showRegions) choice.region = region;
+    else if (initial?.region !== undefined) choice.region = initial.region;
+    if (showCountries) choice.country = country?.toLowerCase();
+    else if (initial?.country !== undefined) choice.country = initial.country;
+    if (showChannels) choice.channel = channel;
+    else if (initial?.channel !== undefined) choice.channel = initial.channel;
+    onSubmit(choice);
+  };
+
+  return (
+    <View className={cn('w-full max-w-[560px] flex-1 self-center gap-6 bg-bg p-6', className)} {...viewProps}>
+      <View className="gap-2">
+        <Text className="text-lg font-bold text-foreground">{title}</Text>
+        <Text className="text-sm text-muted-foreground">{body}</Text>
+      </View>
+      {showRegions && <ChoiceSection label={regionLabel} options={regionOptions} selected={region} onSelect={setRegion} />}
+      {showCountries && <ChoiceSection label={countryLabel} options={countryOptions} selected={country} onSelect={setCountry} />}
+      {showChannels && <ChoiceSection label={channelLabel} options={channelOptions} selected={channel} onSelect={setChannel} />}
+      <Pressable
+        onPress={handleSubmit}
+        disabled={!complete}
+        // Dim the whole button when disabled, so the label keeps its contrast in both themes.
+        className={cn('items-center rounded-lg bg-primary px-4 py-3', !complete && 'opacity-50')}
+      >
+        <Text className="text-sm font-semibold text-primary-foreground">{submitLabel}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+type ChoiceSectionProps = { label: string; options: Option[]; selected: string | undefined; onSelect: (value: string) => void };
+
+function ChoiceSection({ label, options, selected, onSelect }: ChoiceSectionProps) {
+  return (
+    <View className="gap-1.5">
+      <Text className="text-xs font-semibold text-muted-foreground">{label}</Text>
+      <View className="rounded-lg border border-border">
+        {options.map((option, index) => {
+          const checked = option.value === selected;
+          return (
+            <Pressable
+              key={option.value}
+              onPress={() => onSelect(option.value)}
+              accessibilityRole="radio"
+              aria-checked={checked}
+              testID={`choice-option-${option.value}`}
+              className={cn('flex-row items-center gap-3 px-4 py-3', index > 0 && 'border-t border-border', checked && 'bg-primary/10')}
+            >
+              {/* Same radio visual as @tallyui/components/ui/radio-group: ring + dot, so the choice reads without colour. */}
+              <View className="h-4 w-4 items-center justify-center rounded-full border border-primary">
+                {checked && <View testID={`choice-option-${option.value}-dot`} className="h-2.5 w-2.5 rounded-full bg-primary" />}
+              </View>
+              <Text className={cn('text-sm', checked ? 'font-semibold text-primary' : 'text-foreground')}>{option.label}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/order/index.ts

@@ -0,0 +1,4 @@
+export { OrderStatusBadge, type OrderStatusBadgeProps, type OrderStatus } from './order-status-badge';
+export { OrderCard, type OrderCardProps } from './order-card';
+export { OrderList, type OrderListProps } from './order-list';
+export { OrderDetail, type OrderDetailProps, type OrderDetailLineItem } from './order-detail';