@tallyui/components 1.0.0

package/dist/index.js

@@ -0,0 +1,451 @@
+// src/product/product-title.tsx
+import { Text } from "react-native";
+import { useProductTraits } from "@tallyui/core";
+import { cn } from "@tallyui/theme";
+import { jsx } from "react/jsx-runtime";
+function ProductTitle({ doc, className, ...textProps }) {
+  const { getName } = useProductTraits();
+  return /* @__PURE__ */ jsx(Text, { className: cn("text-base font-semibold text-foreground", className), ...textProps, children: getName(doc) });
+}
+
+// src/product/product-price.tsx
+import { Text as Text2 } from "react-native";
+import { useProductTraits as useProductTraits2 } from "@tallyui/core";
+import { cn as cn2 } from "@tallyui/theme";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ProductPrice({ doc, currencySymbol = "$", className, ...textProps }) {
+  const { getPrice, isOnSale, getSalePrice, getRegularPrice } = useProductTraits2();
+  const price = getPrice(doc);
+  if (!price) {
+    return /* @__PURE__ */ jsx2(Text2, { className: cn2("text-sm text-muted", className), ...textProps, children: "-" });
+  }
+  if (isOnSale(doc)) {
+    const salePrice = getSalePrice(doc);
+    const regularPrice = getRegularPrice(doc);
+    return /* @__PURE__ */ jsxs(Text2, { className: cn2("text-sm font-medium text-sale", className), ...textProps, children: [
+      currencySymbol,
+      salePrice ?? price,
+      regularPrice ? ` (was ${currencySymbol}${regularPrice})` : ""
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Text2, { className: cn2("text-sm font-medium text-price", className), ...textProps, children: [
+    currencySymbol,
+    price
+  ] });
+}
+
+// src/product/product-image.tsx
+import { Image } from "react-native";
+import { useProductTraits as useProductTraits3 } from "@tallyui/core";
+import { cn as cn3 } from "@tallyui/theme";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ProductImage({ doc, size = 60, style, className, ...imageProps }) {
+  const { getImageUrl } = useProductTraits3();
+  const imageUrl = getImageUrl(doc);
+  if (!imageUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    Image,
+    {
+      source: { uri: imageUrl },
+      className: cn3("rounded", className),
+      style: [{ width: size, height: size }, style],
+      ...imageProps
+    }
+  );
+}
+
+// src/product/product-sku.tsx
+import { Text as Text3 } from "react-native";
+import { useProductTraits as useProductTraits4 } from "@tallyui/core";
+import { cn as cn4 } from "@tallyui/theme";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ProductSku({ doc, fallback = "\u2014", className, ...textProps }) {
+  const { getSku } = useProductTraits4();
+  const sku = getSku(doc);
+  return /* @__PURE__ */ jsx4(Text3, { className: cn4("text-xs text-muted", className), ...textProps, children: sku ?? fallback });
+}
+
+// src/product/product-stock-badge.tsx
+import { Text as Text4, View } from "react-native";
+import { useProductTraits as useProductTraits5 } from "@tallyui/core";
+import { cn as cn5 } from "@tallyui/theme";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var statusLabels = {
+  instock: "In Stock",
+  outofstock: "Out of Stock",
+  onbackorder: "On Backorder",
+  unknown: "Unknown"
+};
+var STATUS_STYLES = {
+  instock: {
+    badge: "bg-success/15",
+    dot: "bg-success",
+    text: "text-success"
+  },
+  outofstock: {
+    badge: "bg-danger/15",
+    dot: "bg-danger",
+    text: "text-danger"
+  },
+  onbackorder: {
+    badge: "bg-warning/15",
+    dot: "bg-warning",
+    text: "text-warning"
+  },
+  unknown: {
+    badge: "bg-muted/15",
+    dot: "bg-muted",
+    text: "text-muted"
+  }
+};
+function ProductStockBadge({ doc, showQuantity = false, className, ...viewProps }) {
+  const { getStockStatus, getStockQuantity } = useProductTraits5();
+  const status = getStockStatus(doc);
+  const quantity = getStockQuantity(doc);
+  const label = statusLabels[status] ?? statusLabels.unknown;
+  const styles = STATUS_STYLES[status] ?? STATUS_STYLES.unknown;
+  return /* @__PURE__ */ jsxs2(
+    View,
+    {
+      className: cn5("flex-row items-center self-start gap-1.5 rounded-xl px-2 py-1", styles.badge, className),
+      ...viewProps,
+      children: [
+        /* @__PURE__ */ jsx5(View, { className: cn5("h-1.5 w-1.5 rounded-full", styles.dot) }),
+        /* @__PURE__ */ jsxs2(Text4, { className: cn5("text-xs font-semibold", styles.text), children: [
+          label,
+          showQuantity && quantity != null ? ` (${quantity})` : ""
+        ] })
+      ]
+    }
+  );
+}
+
+// src/product/product-card.tsx
+import { Pressable, View as View2 } from "react-native";
+import { cn as cn6 } from "@tallyui/theme";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function ProductCard({ doc, onPress, imageSize = 80, currencySymbol, className, ...viewProps }) {
+  const content = /* @__PURE__ */ jsxs3(View2, { className: cn6("items-center gap-2 rounded-lg bg-surface p-3", className), ...viewProps, children: [
+    /* @__PURE__ */ jsx6(ProductImage, { doc, size: imageSize, className: "rounded-md" }),
+    /* @__PURE__ */ jsx6(ProductTitle, { doc, className: "text-sm", numberOfLines: 2 }),
+    /* @__PURE__ */ jsx6(ProductPrice, { doc, currencySymbol })
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx6(Pressable, { onPress, children: content });
+  }
+  return content;
+}
+
+// src/product/product-grid.tsx
+import { ScrollView, View as View3 } from "react-native";
+import { cn as cn7 } from "@tallyui/theme";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function ProductGrid({
+  items,
+  renderItem,
+  numColumns = 2,
+  searchSlot,
+  filterSlot,
+  emptyState,
+  className,
+  ...viewProps
+}) {
+  const hasItems = items.length > 0;
+  return /* @__PURE__ */ jsxs4(View3, { className: cn7("flex-1", className), ...viewProps, children: [
+    searchSlot && /* @__PURE__ */ jsx7(View3, { className: "px-3 py-2", children: searchSlot }),
+    filterSlot && /* @__PURE__ */ jsx7(View3, { className: "px-3 pb-2", children: filterSlot }),
+    hasItems ? /* @__PURE__ */ jsx7(ScrollView, { contentContainerClassName: "flex-row flex-wrap p-1", children: items.map((item, index) => /* @__PURE__ */ jsx7(View3, { style: { width: `${100 / numColumns}%` }, className: "p-1", children: renderItem(item, index) }, item.id ?? index)) }) : emptyState ?? null
+  ] });
+}
+
+// src/cart/cart-line.tsx
+import { Text as Text5, View as View4 } from "react-native";
+import { useProductTraits as useProductTraits6 } from "@tallyui/core";
+import { cn as cn8 } from "@tallyui/theme";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function CartLine({ item, currencySymbol = "$", className, ...viewProps }) {
+  const { getName, getPrice } = useProductTraits6();
+  const name = getName(item.doc);
+  const unitPrice = getPrice(item.doc);
+  const lineTotal = unitPrice ? (parseFloat(unitPrice) * item.quantity).toFixed(2) : null;
+  return /* @__PURE__ */ jsxs5(View4, { className: cn8("flex-row items-center gap-3 px-3 py-2.5", className), ...viewProps, children: [
+    /* @__PURE__ */ jsxs5(View4, { className: "flex-1 gap-0.5", children: [
+      /* @__PURE__ */ jsx8(Text5, { className: "text-sm font-medium text-foreground", numberOfLines: 1, children: name }),
+      /* @__PURE__ */ jsx8(Text5, { className: "text-xs text-muted", children: unitPrice ? `${currencySymbol}${unitPrice} \xD7 ${item.quantity}` : `\xD7 ${item.quantity}` })
+    ] }),
+    /* @__PURE__ */ jsx8(Text5, { className: "text-sm font-semibold text-foreground", children: lineTotal ? `${currencySymbol}${lineTotal}` : "\u2014" })
+  ] });
+}
+
+// src/cart/cart-total.tsx
+import { Text as Text6, View as View5 } from "react-native";
+import { useProductTraits as useProductTraits7 } from "@tallyui/core";
+import { cn as cn9 } from "@tallyui/theme";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function CartTotal({
+  items,
+  currencySymbol = "$",
+  taxRate = 0,
+  taxLabel = "Tax",
+  className,
+  ...viewProps
+}) {
+  const { getPrice } = useProductTraits7();
+  const subtotal = items.reduce((sum, item) => {
+    const price = getPrice(item.doc);
+    return sum + (price ? parseFloat(price) * item.quantity : 0);
+  }, 0);
+  const tax = subtotal * taxRate;
+  const total = subtotal + tax;
+  return /* @__PURE__ */ jsxs6(View5, { className: cn9("gap-1.5 px-3 py-3", className), ...viewProps, children: [
+    /* @__PURE__ */ jsxs6(View5, { className: "flex-row items-center justify-between", children: [
+      /* @__PURE__ */ jsx9(Text6, { className: "text-sm text-muted", children: "Subtotal" }),
+      /* @__PURE__ */ jsxs6(Text6, { className: "text-sm text-foreground", children: [
+        currencySymbol,
+        subtotal.toFixed(2)
+      ] })
+    ] }),
+    taxRate > 0 && /* @__PURE__ */ jsxs6(View5, { className: "flex-row items-center justify-between", children: [
+      /* @__PURE__ */ jsx9(Text6, { className: "text-sm text-muted", children: taxLabel }),
+      /* @__PURE__ */ jsxs6(Text6, { className: "text-sm text-foreground", children: [
+        currencySymbol,
+        tax.toFixed(2)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6(View5, { className: "mt-1.5 flex-row items-center justify-between border-t border-border pt-2", children: [
+      /* @__PURE__ */ jsx9(Text6, { className: "text-base font-bold text-foreground", children: "Total" }),
+      /* @__PURE__ */ jsxs6(Text6, { className: "text-base font-bold text-foreground", children: [
+        currencySymbol,
+        total.toFixed(2)
+      ] })
+    ] })
+  ] });
+}
+
+// src/cart/cart-panel.tsx
+import { ScrollView as ScrollView2, View as View6 } from "react-native";
+import { cn as cn10 } from "@tallyui/theme";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function CartPanel({
+  items,
+  renderItem,
+  header,
+  footer,
+  emptyState,
+  className,
+  ...viewProps
+}) {
+  const hasItems = items.length > 0;
+  return /* @__PURE__ */ jsxs7(View6, { className: cn10("flex-1", className), ...viewProps, children: [
+    header && /* @__PURE__ */ jsx10(View6, { className: "border-b border-border px-3 py-2", children: header }),
+    hasItems ? /* @__PURE__ */ jsx10(ScrollView2, { className: "flex-1", children: items.map((item, index) => /* @__PURE__ */ jsx10(View6, { children: renderItem(item, index) }, item.doc?.id ?? index)) }) : emptyState ?? null,
+    footer && /* @__PURE__ */ jsx10(View6, { className: "border-t border-border px-3 py-2", children: footer })
+  ] });
+}
+
+// src/input/search-input.tsx
+import { TextInput, View as View7, Text as Text7 } from "react-native";
+import { cn as cn11 } from "@tallyui/theme";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function SearchInput({ value, onChangeText, className, placeholder = "Search...", ...props }) {
+  return /* @__PURE__ */ jsxs8(View7, { className: cn11("flex-row items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2", className), children: [
+    /* @__PURE__ */ jsx11(Text7, { className: "text-muted", children: "\u2315" }),
+    /* @__PURE__ */ jsx11(
+      TextInput,
+      {
+        role: "searchbox",
+        value,
+        onChangeText,
+        placeholder,
+        placeholderTextColor: "#9ca3af",
+        className: "flex-1 text-sm text-foreground",
+        ...props
+      }
+    )
+  ] });
+}
+
+// src/input/filter-chip.tsx
+import { Pressable as Pressable2, ScrollView as ScrollView3, Text as Text8 } from "react-native";
+import { cn as cn12 } from "@tallyui/theme";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function FilterChip({ label, active, onPress, className }) {
+  return /* @__PURE__ */ jsx12(
+    Pressable2,
+    {
+      onPress,
+      className: cn12(
+        "rounded-full px-3 py-1.5",
+        active ? "bg-primary" : "bg-surface-alt",
+        className
+      ),
+      children: /* @__PURE__ */ jsx12(Text8, { className: cn12("text-xs font-semibold", active ? "text-primary-foreground" : "text-muted"), children: label })
+    }
+  );
+}
+function FilterChipGroup({ chips, onChipPress, className, ...viewProps }) {
+  return /* @__PURE__ */ jsx12(
+    ScrollView3,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerClassName: cn12("flex-row gap-2", className),
+      ...viewProps,
+      children: chips.map((chip, index) => /* @__PURE__ */ jsx12(
+        FilterChip,
+        {
+          label: chip.label,
+          active: chip.active,
+          onPress: () => onChipPress(index)
+        },
+        chip.label
+      ))
+    }
+  );
+}
+
+// src/customer/customer-card.tsx
+import { Text as Text9, View as View8 } from "react-native";
+import { useCustomerTraits } from "@tallyui/core";
+import { cn as cn13 } from "@tallyui/theme";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function CustomerCard({ doc, className, ...viewProps }) {
+  const traits = useCustomerTraits();
+  if (!traits) return null;
+  const name = traits.getName(doc);
+  const email = traits.getEmail(doc);
+  const address = traits.getAddressSummary(doc);
+  return /* @__PURE__ */ jsxs9(View8, { className: cn13("gap-0.5", className), ...viewProps, children: [
+    /* @__PURE__ */ jsx13(Text9, { className: "text-sm font-semibold text-foreground", children: name }),
+    email && /* @__PURE__ */ jsx13(Text9, { className: "text-xs text-muted", children: email }),
+    address && /* @__PURE__ */ jsx13(Text9, { className: "text-xs text-muted", children: address })
+  ] });
+}
+
+// src/customer/customer-select.tsx
+import { Pressable as Pressable3, ScrollView as ScrollView4, View as View9 } from "react-native";
+import { useCustomerTraits as useCustomerTraits2 } from "@tallyui/core";
+import { cn as cn14 } from "@tallyui/theme";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function CustomerSelect({
+  customers,
+  selected,
+  onSelect,
+  onSearch,
+  placeholder = "Search customers...",
+  className,
+  ...viewProps
+}) {
+  const traits = useCustomerTraits2();
+  return /* @__PURE__ */ jsxs10(View9, { className: cn14("gap-2", className), ...viewProps, children: [
+    selected && traits && /* @__PURE__ */ jsx14(View9, { className: "rounded-lg border border-primary bg-primary/5 px-3 py-2", children: /* @__PURE__ */ jsx14(CustomerCard, { doc: selected }) }),
+    customers.length > 0 && /* @__PURE__ */ jsx14(ScrollView4, { className: "max-h-60", children: customers.map((customer, index) => {
+      const id = traits?.getId(customer) ?? index;
+      return /* @__PURE__ */ jsx14(Pressable3, { onPress: () => onSelect(customer), children: /* @__PURE__ */ jsx14(View9, { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsx14(CustomerCard, { doc: customer }) }) }, id);
+    }) })
+  ] });
+}
+
+// src/checkout/payment-method-card.tsx
+import { Pressable as Pressable4, Text as Text11, View as View10 } from "react-native";
+import { cn as cn15 } from "@tallyui/theme";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function PaymentMethodCard({ label, selected, onPress, icon, className, ...viewProps }) {
+  return /* @__PURE__ */ jsx15(Pressable4, { onPress, ...viewProps, children: /* @__PURE__ */ jsxs11(
+    View10,
+    {
+      className: cn15(
+        "flex-row items-center gap-3 rounded-lg border px-4 py-3",
+        selected ? "border-primary bg-primary/5" : "border-border bg-surface",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx15(View10, { children: icon }),
+        /* @__PURE__ */ jsx15(Text11, { className: cn15("flex-1 text-sm font-medium", selected ? "text-primary" : "text-foreground"), children: label }),
+        selected && /* @__PURE__ */ jsx15(View10, { className: "h-5 w-5 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx15(Text11, { className: "text-xs text-primary-foreground", children: "\u2713" }) })
+      ]
+    }
+  ) });
+}
+
+// src/checkout/order-summary-line.tsx
+import { Text as Text12, View as View11 } from "react-native";
+import { cn as cn16 } from "@tallyui/theme";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function OrderSummaryLine({ label, amount, bold = false, className, ...viewProps }) {
+  return /* @__PURE__ */ jsxs12(View11, { className: cn16("flex-row items-center justify-between", className), ...viewProps, children: [
+    /* @__PURE__ */ jsx16(Text12, { className: cn16("text-sm", bold ? "font-bold text-foreground" : "text-muted"), children: label }),
+    /* @__PURE__ */ jsx16(Text12, { className: cn16("text-sm", bold ? "font-bold text-foreground" : "text-foreground"), children: amount })
+  ] });
+}
+
+// src/checkout/payment-selector.tsx
+import { View as View12 } from "react-native";
+import { cn as cn17 } from "@tallyui/theme";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function PaymentSelector({
+  methods,
+  selected,
+  onSelect,
+  className,
+  ...viewProps
+}) {
+  return /* @__PURE__ */ jsx17(View12, { className: cn17("gap-2", className), ...viewProps, children: methods.map((method) => /* @__PURE__ */ jsx17(
+    PaymentMethodCard,
+    {
+      label: method.label,
+      selected: method.id === selected,
+      onPress: () => onSelect(method.id),
+      icon: method.icon
+    },
+    method.id
+  )) });
+}
+
+// src/checkout/order-summary.tsx
+import { View as View13 } from "react-native";
+import { cn as cn18 } from "@tallyui/theme";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function OrderSummary({
+  subtotal,
+  tax,
+  taxLabel = "Tax",
+  total,
+  payments,
+  header,
+  footer,
+  className,
+  ...viewProps
+}) {
+  return /* @__PURE__ */ jsxs13(View13, { className: cn18("gap-1.5 px-3 py-3", className), ...viewProps, children: [
+    header && /* @__PURE__ */ jsx18(View13, { className: "mb-2", children: header }),
+    /* @__PURE__ */ jsx18(OrderSummaryLine, { label: "Subtotal", amount: subtotal }),
+    tax && /* @__PURE__ */ jsx18(OrderSummaryLine, { label: taxLabel, amount: tax }),
+    /* @__PURE__ */ jsx18(OrderSummaryLine, { label: "Total", amount: total, bold: true }),
+    payments && payments.length > 0 && /* @__PURE__ */ jsx18(View13, { className: "mt-2 gap-1.5 border-t border-border pt-2", children: payments.map((payment) => /* @__PURE__ */ jsx18(OrderSummaryLine, { label: payment.label, amount: payment.amount }, payment.label)) }),
+    footer && /* @__PURE__ */ jsx18(View13, { className: "mt-2", children: footer })
+  ] });
+}
+export {
+  CartLine,
+  CartPanel,
+  CartTotal,
+  CustomerCard,
+  CustomerSelect,
+  FilterChip,
+  FilterChipGroup,
+  OrderSummary,
+  OrderSummaryLine,
+  PaymentMethodCard,
+  PaymentSelector,
+  ProductCard,
+  ProductGrid,
+  ProductImage,
+  ProductPrice,
+  ProductSku,
+  ProductStockBadge,
+  ProductTitle,
+  SearchInput
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@tallyui/components",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Universal POS UI components for Tally UI",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "source": "./src/index.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "@tallyui/core": "0.2.0",
+    "@tallyui/theme": "0.2.0"
+  },
+  "devDependencies": {
+    "@types/react": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "echo \"no tests yet\""
+  }
+}

package/src/__tests__/cart-line.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ConnectorProvider } from '@tallyui/core';
+import { CartLine } from '../cart/cart-line';
+import { createTestConnector, wooDoc, medusaDoc } from './helpers';
+
+describe('CartLine', () => {
+  it('renders product name and line total for WooCommerce', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartLine item={{ doc: wooDoc, quantity: 2 }} />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
+    expect(screen.getByText('$1299.00 × 2')).toBeDefined();
+    expect(screen.getByText('$2598.00')).toBeDefined();
+  });
+
+  it('renders product name and line total for Medusa', () => {
+    const connector = createTestConnector('medusa');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartLine item={{ doc: medusaDoc, quantity: 1 }} />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
+    expect(screen.getByText('$1299.00 × 1')).toBeDefined();
+    expect(screen.getByText('$1299.00')).toBeDefined();
+  });
+
+  it('renders custom currency symbol', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartLine item={{ doc: wooDoc, quantity: 1 }} currencySymbol="€" />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('€1299.00 × 1')).toBeDefined();
+    expect(screen.getByText('€1299.00')).toBeDefined();
+  });
+
+  it('handles missing price gracefully', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartLine item={{ doc: {}, quantity: 3 }} />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('× 3')).toBeDefined();
+    expect(screen.getByText('—')).toBeDefined();
+  });
+});

package/src/__tests__/cart-panel.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Text } from 'react-native';
+import { ConnectorProvider } from '@tallyui/core';
+import { CartPanel } from '../cart/cart-panel';
+import { CartLine } from '../cart/cart-line';
+import { createTestConnector, wooDoc } from './helpers';
+
+describe('CartPanel', () => {
+  const items = [
+    { doc: wooDoc, quantity: 2 },
+    { doc: { ...wooDoc, id: 2, name: 'Grinder', price: '199.99' }, quantity: 1 },
+  ];
+
+  it('renders cart line items', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartPanel items={items} renderItem={(item) => <CartLine item={item} />} />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
+    expect(screen.getByText('Grinder')).toBeDefined();
+  });
+
+  it('renders header and footer slots', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartPanel
+          items={items}
+          renderItem={(item) => <CartLine item={item} />}
+          header={<Text>Customer: Jane</Text>}
+          footer={<Text>Total: $1399.97</Text>}
+        />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('Customer: Jane')).toBeDefined();
+    expect(screen.getByText('Total: $1399.97')).toBeDefined();
+  });
+
+  it('renders emptyState when no items', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartPanel
+          items={[]}
+          renderItem={() => null}
+          emptyState={<Text>Cart is empty</Text>}
+        />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('Cart is empty')).toBeDefined();
+  });
+});

package/src/__tests__/cart-total.test.tsx

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ConnectorProvider } from '@tallyui/core';
+import { CartTotal } from '../cart/cart-total';
+import { createTestConnector, wooDoc } from './helpers';
+
+const cartItems = [
+  { doc: wooDoc, quantity: 2 },
+  { doc: { ...wooDoc, name: 'Milk Frother', price: '49.99' }, quantity: 1 },
+];
+
+describe('CartTotal', () => {
+  it('renders subtotal and total labels', () => {
+    const connector = createTestConnector('woo');
+    const { container } = render(
+      <ConnectorProvider connector={connector}>
+        <CartTotal items={cartItems} />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('Subtotal')).toBeDefined();
+    expect(screen.getByText('Total')).toBeDefined();
+    // subtotal and total both $2647.99 (no tax), so 2 elements
+    expect(screen.getAllByText('$2647.99')).toHaveLength(2);
+  });
+
+  it('renders tax when taxRate is provided', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartTotal items={cartItems} taxRate={0.1} />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('Tax')).toBeDefined();
+    expect(screen.getByText('$264.80')).toBeDefined();
+    expect(screen.getByText('$2912.79')).toBeDefined();
+  });
+
+  it('uses custom currency symbol and tax label', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartTotal items={cartItems} currencySymbol="€" taxRate={0.2} taxLabel="VAT" />
+      </ConnectorProvider>
+    );
+    expect(screen.getByText('VAT')).toBeDefined();
+    // Multiple euro amounts present — just check at least one exists
+    expect(screen.getAllByText(/€/).length).toBeGreaterThan(0);
+  });
+
+  it('handles empty cart', () => {
+    const connector = createTestConnector('woo');
+    render(
+      <ConnectorProvider connector={connector}>
+        <CartTotal items={[]} />
+      </ConnectorProvider>
+    );
+    // subtotal and total both $0.00
+    expect(screen.getAllByText('$0.00')).toHaveLength(2);
+  });
+});