@tallyui/components 1.0.0

package/src/product/product-card.tsx

@@ -0,0 +1,28 @@
+import { Pressable, View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { ProductImage } from './product-image';
+import { ProductTitle } from './product-title';
+import { ProductPrice } from './product-price';
+
+export interface ProductCardProps extends Omit<ViewProps, 'children'> {
+  doc: any;
+  onPress?: () => void;
+  imageSize?: number;
+  currencySymbol?: string;
+  className?: string;
+}
+
+export function ProductCard({ doc, onPress, imageSize = 80, currencySymbol, className, ...viewProps }: ProductCardProps) {
+  const content = (
+    <View className={cn('items-center gap-2 rounded-lg bg-surface p-3', className)} {...viewProps}>
+      <ProductImage doc={doc} size={imageSize} className="rounded-md" />
+      <ProductTitle doc={doc} className="text-sm" numberOfLines={2} />
+      <ProductPrice doc={doc} currencySymbol={currencySymbol} />
+    </View>
+  );
+
+  if (onPress) {
+    return <Pressable onPress={onPress}>{content}</Pressable>;
+  }
+  return content;
+}

package/src/product/product-grid.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+import { ScrollView, View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+
+export interface ProductGridProps extends Omit<ViewProps, 'children'> {
+  /** Array of product documents to render */
+  items: any[];
+  /** Render function for each product */
+  renderItem: (item: any, index: number) => ReactNode;
+  /** Number of columns in the grid (defaults to 2) */
+  numColumns?: number;
+  /** Search input slot rendered above the grid */
+  searchSlot?: ReactNode;
+  /** Filter slot rendered between search and grid */
+  filterSlot?: ReactNode;
+  /** Content shown when items is empty */
+  emptyState?: ReactNode;
+  className?: string;
+}
+
+/**
+ * A scrollable product grid with optional search and filter slots.
+ *
+ * Uses ScrollView + flexWrap for cross-platform grid layout rather than
+ * FlatList numColumns, which keeps things predictable in both native and web.
+ *
+ * ```tsx
+ * <ProductGrid
+ *   items={products}
+ *   renderItem={(doc) => <ProductCard doc={doc} />}
+ *   searchSlot={<SearchInput value={q} onChangeText={setQ} />}
+ *   numColumns={3}
+ * />
+ * ```
+ */
+export function ProductGrid({
+  items,
+  renderItem,
+  numColumns = 2,
+  searchSlot,
+  filterSlot,
+  emptyState,
+  className,
+  ...viewProps
+}: ProductGridProps) {
+  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 contentContainerClassName="flex-row flex-wrap p-1">
+          {items.map((item, index) => (
+            <View key={item.id ?? index} style={{ width: `${100 / numColumns}%` }} className="p-1">
+              {renderItem(item, index)}
+            </View>
+          ))}
+        </ScrollView>
+      ) : (
+        emptyState ?? null
+      )}
+    </View>
+  );
+}

package/src/product/product-image.tsx

@@ -0,0 +1,41 @@
+import { Image, type ImageProps, type ImageStyle, type StyleProp } from 'react-native';
+
+import { useProductTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface ProductImageProps extends Omit<ImageProps, 'source'> {
+  /** The raw RxDB product document */
+  doc: any;
+  /** Image dimensions */
+  size?: number;
+  /** Style overrides (for dynamic sizing) */
+  style?: StyleProp<ImageStyle>;
+  className?: string;
+}
+
+/**
+ * Displays a product's primary image.
+ *
+ * Falls back to null if no image is available.
+ *
+ * ```tsx
+ * <ProductImage doc={productDocument} size={80} className="rounded-lg" />
+ * ```
+ */
+export function ProductImage({ doc, size = 60, style, className, ...imageProps }: ProductImageProps) {
+  const { getImageUrl } = useProductTraits();
+  const imageUrl = getImageUrl(doc);
+
+  if (!imageUrl) {
+    return null; // TODO: placeholder image
+  }
+
+  return (
+    <Image
+      source={{ uri: imageUrl }}
+      className={cn('rounded', className)}
+      style={[{ width: size, height: size }, style]}
+      {...imageProps}
+    />
+  );
+}

package/src/product/product-price.tsx

@@ -0,0 +1,53 @@
+import { Text, type TextProps } from 'react-native';
+
+import { useProductTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface ProductPriceProps extends Omit<TextProps, 'children'> {
+  /** The raw RxDB product document (connector-specific shape) */
+  doc: any;
+  /** Currency symbol to prepend (defaults to '$') */
+  currencySymbol?: string;
+  className?: string;
+}
+
+/**
+ * Displays a product's price.
+ *
+ * Works with any connector — extracts price via traits regardless
+ * of whether it's a string field (WooCommerce) or derived from
+ * variant pricing (Medusa).
+ *
+ * ```tsx
+ * <ProductPrice doc={productDocument} currencySymbol="$" />
+ * ```
+ */
+export function ProductPrice({ doc, currencySymbol = '$', className, ...textProps }: ProductPriceProps) {
+  const { getPrice, isOnSale, getSalePrice, getRegularPrice } = useProductTraits();
+  const price = getPrice(doc);
+
+  if (!price) {
+    return (
+      <Text className={cn('text-sm text-muted', className)} {...textProps}>
+        -
+      </Text>
+    );
+  }
+
+  if (isOnSale(doc)) {
+    const salePrice = getSalePrice(doc);
+    const regularPrice = getRegularPrice(doc);
+    return (
+      <Text className={cn('text-sm font-medium text-sale', className)} {...textProps}>
+        {currencySymbol}{salePrice ?? price}
+        {regularPrice ? ` (was ${currencySymbol}${regularPrice})` : ''}
+      </Text>
+    );
+  }
+
+  return (
+    <Text className={cn('text-sm font-medium text-price', className)} {...textProps}>
+      {currencySymbol}{price}
+    </Text>
+  );
+}

package/src/product/product-sku.tsx

@@ -0,0 +1,33 @@
+import { Text, type TextProps } from 'react-native';
+
+import { useProductTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface ProductSkuProps extends Omit<TextProps, 'children'> {
+  /** The raw RxDB product document (connector-specific shape) */
+  doc: any;
+  /** Text to show when SKU is missing (defaults to '—') */
+  fallback?: string;
+  className?: string;
+}
+
+/**
+ * Displays a product's SKU.
+ *
+ * Reads the SKU from whatever field the active connector stores it in —
+ * `doc.sku` for WooCommerce, `doc.variants[0].sku` for Medusa, etc.
+ *
+ * ```tsx
+ * <ProductSku doc={productDocument} />
+ * ```
+ */
+export function ProductSku({ doc, fallback = '—', className, ...textProps }: ProductSkuProps) {
+  const { getSku } = useProductTraits();
+  const sku = getSku(doc);
+
+  return (
+    <Text className={cn('text-xs text-muted', className)} {...textProps}>
+      {sku ?? fallback}
+    </Text>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { useProductTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface ProductStockBadgeProps extends Omit<ViewProps, 'children'> {
+  /** The raw RxDB product document (connector-specific shape) */
+  doc: any;
+  /** Whether to show the quantity alongside the status */
+  showQuantity?: boolean;
+  className?: string;
+}
+
+const statusLabels: Record<string, string> = {
+  instock: 'In Stock',
+  outofstock: 'Out of Stock',
+  onbackorder: 'On Backorder',
+  unknown: 'Unknown',
+};
+
+const STATUS_STYLES: Record<string, { badge: string; dot: string; text: string }> = {
+  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',
+  },
+};
+
+/**
+ * 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.
+ *
+ * ```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);
+  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}
+    >
+      <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})` : ''}
+      </Text>
+    </View>
+  );
+}

package/src/product/product-title.tsx

@@ -0,0 +1,30 @@
+import { Text, type TextProps } from 'react-native';
+
+import { useProductTraits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+
+export interface ProductTitleProps extends Omit<TextProps, 'children'> {
+  /** The raw RxDB product document (connector-specific shape) */
+  doc: any;
+  className?: string;
+}
+
+/**
+ * Displays a product's name.
+ *
+ * Works with any connector — it uses the active connector's product traits
+ * to extract the name from the document, regardless of whether the underlying
+ * field is called `name` (WooCommerce) or `title` (Medusa).
+ *
+ * ```tsx
+ * <ProductTitle doc={productDocument} className="text-lg font-bold" />
+ * ```
+ */
+export function ProductTitle({ doc, className, ...textProps }: ProductTitleProps) {
+  const { getName } = useProductTraits();
+  return (
+    <Text className={cn('text-base font-semibold text-foreground', className)} {...textProps}>
+      {getName(doc)}
+    </Text>
+  );
+}

package/src/uniwind-env.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Type augmentations for React Native components to support className prop.
+ * Uniwind provides these at runtime — this file ensures TypeScript accepts them.
+ */
+export {};
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+
+  interface TextProps {
+    className?: string;
+  }
+
+  interface ImagePropsBase {
+    className?: string;
+  }
+
+  interface PressableProps {
+    className?: string;
+  }
+
+  interface FlatListProps<ItemT> {
+    contentContainerClassName?: string;
+  }
+
+  interface ScrollViewProps {
+    contentContainerClassName?: string;
+  }
+}