@tallyui/components 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,364 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextProps, ImageProps, StyleProp, ImageStyle, ViewProps, TextInputProps } from 'react-native';
+import { ReactNode } from 'react';
+
+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" />
+ * ```
+ */
+declare function ProductTitle({ doc, className, ...textProps }: ProductTitleProps): react_jsx_runtime.JSX.Element;
+
+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="$" />
+ * ```
+ */
+declare function ProductPrice({ doc, currencySymbol, className, ...textProps }: ProductPriceProps): react_jsx_runtime.JSX.Element;
+
+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" />
+ * ```
+ */
+declare function ProductImage({ doc, size, style, className, ...imageProps }: ProductImageProps): react_jsx_runtime.JSX.Element | null;
+
+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} />
+ * ```
+ */
+declare function ProductSku({ doc, fallback, className, ...textProps }: ProductSkuProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+/**
+ * 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 />
+ * ```
+ */
+declare function ProductStockBadge({ doc, showQuantity, className, ...viewProps }: ProductStockBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface ProductCardProps extends Omit<ViewProps, 'children'> {
+    doc: any;
+    onPress?: () => void;
+    imageSize?: number;
+    currencySymbol?: string;
+    className?: string;
+}
+declare function ProductCard({ doc, onPress, imageSize, currencySymbol, className, ...viewProps }: ProductCardProps): react_jsx_runtime.JSX.Element;
+
+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}
+ * />
+ * ```
+ */
+declare function ProductGrid({ items, renderItem, numColumns, searchSlot, filterSlot, emptyState, className, ...viewProps }: ProductGridProps): react_jsx_runtime.JSX.Element;
+
+interface CartLineItem {
+    /** The raw product document (connector-specific shape) */
+    doc: any;
+    /** Quantity in cart */
+    quantity: number;
+}
+interface CartLineProps extends Omit<ViewProps, 'children'> {
+    /** The cart line item */
+    item: CartLineItem;
+    /** Currency symbol (defaults to '$') */
+    currencySymbol?: string;
+    className?: string;
+}
+/**
+ * Displays a single cart line item: product name, quantity, and line total.
+ *
+ * ```tsx
+ * <CartLine item={{ doc: productDocument, quantity: 2 }} />
+ * ```
+ */
+declare function CartLine({ item, currencySymbol, className, ...viewProps }: CartLineProps): react_jsx_runtime.JSX.Element;
+
+interface CartTotalProps extends Omit<ViewProps, 'children'> {
+    /** All cart line items */
+    items: CartLineItem[];
+    /** Currency symbol (defaults to '$') */
+    currencySymbol?: string;
+    /** Tax rate as a decimal (e.g. 0.1 for 10%). Defaults to 0. */
+    taxRate?: number;
+    /** Label for the tax line (defaults to 'Tax') */
+    taxLabel?: string;
+    className?: string;
+}
+/**
+ * Displays a cart summary with subtotal, optional tax, and total.
+ *
+ * ```tsx
+ * <CartTotal items={cartItems} taxRate={0.1} />
+ * ```
+ */
+declare function CartTotal({ items, currencySymbol, taxRate, taxLabel, className, ...viewProps }: CartTotalProps): react_jsx_runtime.JSX.Element;
+
+interface CartPanelProps extends Omit<ViewProps, 'children'> {
+    /** Cart line items to render */
+    items: CartLineItem[];
+    /** Render function for each cart line */
+    renderItem: (item: CartLineItem, index: number) => ReactNode;
+    /** Header slot (e.g. customer info) */
+    header?: ReactNode;
+    /** Footer slot (e.g. totals, checkout button) */
+    footer?: ReactNode;
+    /** Content shown when items is empty */
+    emptyState?: ReactNode;
+    className?: string;
+}
+/**
+ * A scrollable cart panel with header/footer slots.
+ *
+ * Composes CartLine (or custom renderItem) into a scrollable list
+ * with optional header, footer, and empty state.
+ *
+ * ```tsx
+ * <CartPanel
+ *   items={cartItems}
+ *   renderItem={(item) => <CartLine item={item} />}
+ *   header={<CustomerCard doc={customer} />}
+ *   footer={<CartTotal items={cartItems} />}
+ * />
+ * ```
+ */
+declare function CartPanel({ items, renderItem, header, footer, emptyState, className, ...viewProps }: CartPanelProps): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+    value: string;
+    onChangeText: (text: string) => void;
+    className?: string;
+}
+declare function SearchInput({ value, onChangeText, className, placeholder, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
+interface FilterChipProps {
+    label: string;
+    active: boolean;
+    onPress: () => void;
+    className?: string;
+}
+declare function FilterChip({ label, active, onPress, className }: FilterChipProps): react_jsx_runtime.JSX.Element;
+interface ChipItem {
+    label: string;
+    active: boolean;
+}
+interface FilterChipGroupProps extends Omit<ViewProps, 'children'> {
+    chips: ChipItem[];
+    onChipPress: (index: number) => void;
+    className?: string;
+}
+declare function FilterChipGroup({ chips, onChipPress, className, ...viewProps }: FilterChipGroupProps): react_jsx_runtime.JSX.Element;
+
+interface CustomerCardProps extends Omit<ViewProps, 'children'> {
+    doc: any;
+    className?: string;
+}
+declare function CustomerCard({ doc, className, ...viewProps }: CustomerCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface CustomerSelectProps extends Omit<ViewProps, 'children'> {
+    /** Customer documents to display as options */
+    customers: any[];
+    /** Currently selected customer (if any) */
+    selected?: any;
+    /** Called when a customer is selected */
+    onSelect: (customer: any) => void;
+    /** Called when the search text changes */
+    onSearch: (query: string) => void;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    className?: string;
+}
+/**
+ * A customer picker that displays a list of customer cards.
+ *
+ * When a customer is selected, their name is shown as a summary.
+ * The parent is responsible for filtering — this component just
+ * calls onSearch with the query text and renders whatever customers
+ * are passed in.
+ *
+ * ```tsx
+ * <CustomerSelect
+ *   customers={filteredCustomers}
+ *   selected={selectedCustomer}
+ *   onSelect={setSelectedCustomer}
+ *   onSearch={setSearchQuery}
+ * />
+ * ```
+ */
+declare function CustomerSelect({ customers, selected, onSelect, onSearch, placeholder, className, ...viewProps }: CustomerSelectProps): react_jsx_runtime.JSX.Element;
+
+interface PaymentMethodCardProps extends Omit<ViewProps, 'children'> {
+    label: string;
+    selected: boolean;
+    onPress: () => void;
+    icon?: ReactNode;
+    className?: string;
+}
+declare function PaymentMethodCard({ label, selected, onPress, icon, className, ...viewProps }: PaymentMethodCardProps): react_jsx_runtime.JSX.Element;
+
+interface OrderSummaryLineProps extends Omit<ViewProps, 'children'> {
+    label: string;
+    amount: string;
+    bold?: boolean;
+    className?: string;
+}
+declare function OrderSummaryLine({ label, amount, bold, className, ...viewProps }: OrderSummaryLineProps): react_jsx_runtime.JSX.Element;
+
+interface PaymentMethod {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+}
+interface PaymentSelectorProps extends Omit<ViewProps, 'children'> {
+    /** Available payment methods */
+    methods: PaymentMethod[];
+    /** ID of the currently selected method */
+    selected: string;
+    /** Called when a method is selected */
+    onSelect: (id: string) => void;
+    className?: string;
+}
+/**
+ * A list of payment method cards where one can be selected at a time.
+ *
+ * Wraps PaymentMethodCard for each method and manages the selected state.
+ *
+ * ```tsx
+ * <PaymentSelector
+ *   methods={[{ id: 'cash', label: 'Cash' }, { id: 'card', label: 'Credit Card' }]}
+ *   selected={selectedMethod}
+ *   onSelect={setSelectedMethod}
+ * />
+ * ```
+ */
+declare function PaymentSelector({ methods, selected, onSelect, className, ...viewProps }: PaymentSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface OrderSummaryPayment {
+    label: string;
+    amount: string;
+}
+interface OrderSummaryProps extends Omit<ViewProps, 'children'> {
+    /** Formatted subtotal string (e.g. "$1199.98") */
+    subtotal: string;
+    /** Formatted tax amount (optional) */
+    tax?: string;
+    /** Label for the tax line (defaults to "Tax") */
+    taxLabel?: string;
+    /** Formatted total string */
+    total: string;
+    /** Payment lines to display (e.g. cash tendered, change due) */
+    payments?: OrderSummaryPayment[];
+    /** Header slot (e.g. customer info, order number) */
+    header?: ReactNode;
+    /** Footer slot (e.g. action buttons) */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * Displays an order summary with subtotal, tax, total, and optional
+ * payment breakdown.
+ *
+ * Uses OrderSummaryLine internally for each row. Accepts header and
+ * footer slots for additional context like customer info or action buttons.
+ *
+ * ```tsx
+ * <OrderSummary
+ *   subtotal="$1199.98"
+ *   tax="$120.00"
+ *   taxLabel="GST"
+ *   total="$1319.98"
+ *   payments={[{ label: 'Cash', amount: '$1400.00' }, { label: 'Change', amount: '$80.02' }]}
+ *   header={<CustomerCard doc={customer} />}
+ * />
+ * ```
+ */
+declare function OrderSummary({ subtotal, tax, taxLabel, total, payments, header, footer, className, ...viewProps }: OrderSummaryProps): react_jsx_runtime.JSX.Element;
+
+export { CartLine, type CartLineItem, type CartLineProps, CartPanel, type CartPanelProps, CartTotal, type CartTotalProps, type ChipItem, CustomerCard, type CustomerCardProps, CustomerSelect, type CustomerSelectProps, FilterChip, FilterChipGroup, type FilterChipGroupProps, type FilterChipProps, OrderSummary, OrderSummaryLine, type OrderSummaryLineProps, type OrderSummaryPayment, type OrderSummaryProps, type PaymentMethod, PaymentMethodCard, type PaymentMethodCardProps, PaymentSelector, type PaymentSelectorProps, ProductCard, type ProductCardProps, ProductGrid, type ProductGridProps, ProductImage, type ProductImageProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, ProductStockBadge, type ProductStockBadgeProps, ProductTitle, type ProductTitleProps, SearchInput, type SearchInputProps };