@tabl.io/ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -3,6 +3,49 @@ import { JSX } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 import { VariantProps } from 'class-variance-authority';
 
+/**
+ * Header padrão das aplicações Tabl
+ * Suporta título, subtítulo, botão de voltar e actions à direita
+ *
+ * @example
+ * ```tsx
+ * <AppHeader
+ *   title="Mesa 12"
+ *   showBack
+ *   onBack={() => navigate('/tables')}
+ *   actions={<CartIndicator count={3} total={45.00} />}
+ * />
+ * ```
+ */
+export declare function AppHeader({ title, subtitle, showBack, onBack, actions, className, }: AppHeaderProps): JSX.Element;
+
+export declare interface AppHeaderProps {
+    /**
+     * Título exibido no header
+     */
+    title: string;
+    /**
+     * Subtítulo opcional
+     */
+    subtitle?: string;
+    /**
+     * Mostra botão de voltar
+     */
+    showBack?: boolean;
+    /**
+     * Callback quando clicar em voltar
+     */
+    onBack?: () => void;
+    /**
+     * Elementos à direita (ex: CartIndicator)
+     */
+    actions?: React_2.ReactNode;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
 export declare function Button({ className, variant, size, asChild, ...props }: React_2.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }): JSX.Element;
@@ -12,4 +55,725 @@ export declare const buttonVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+/**
+ * Estado vazio do carrinho
+ * Exibe ícone e mensagem quando não há itens
+ *
+ * @example
+ * ```tsx
+ * {items.length === 0 && <CartEmptyState />}
+ * ```
+ */
+export declare function CartEmptyState({ className }: CartEmptyStateProps): JSX.Element;
+
+export declare interface CartEmptyStateProps {
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Indicador visual do carrinho de compras
+ * Exibe quantidade de itens e valor total com badge
+ *
+ * @example
+ * ```tsx
+ * <CartIndicator
+ *   count={3}
+ *   total={45.50}
+ *   onClick={() => setCartOpen(true)}
+ * />
+ * ```
+ */
+export declare function CartIndicator({ count, total, onClick, className, }: CartIndicatorProps): JSX.Element | null;
+
+export declare interface CartIndicatorProps {
+    /**
+     * Quantidade de itens no carrinho
+     */
+    count: number;
+    /**
+     * Valor total do carrinho
+     */
+    total: number;
+    /**
+     * Callback ao clicar no indicador
+     */
+    onClick?: () => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Item individual no carrinho
+ * Exibe produto, customizações, preço e controles
+ *
+ * @example
+ * ```tsx
+ * <CartItem
+ *   item={cartItem}
+ *   onQuantityChange={handleUpdateQuantity}
+ *   onRemove={handleRemoveItem}
+ * />
+ * ```
+ */
+export declare function CartItem({ item, onQuantityChange, onRemove, className, }: CartItemProps): JSX.Element;
+
+export declare interface CartItemData {
+    id: string;
+    productName: string;
+    quantity: number;
+    unitPrice: number;
+    additionalPrice: number;
+    removedIngredients?: string[];
+    addedExtras?: string[];
+    notes?: string;
+}
+
+export declare interface CartItemProps {
+    /**
+     * Dados do item
+     */
+    item: CartItemData;
+    /**
+     * Callback ao alterar quantidade
+     */
+    onQuantityChange: (itemId: string, quantity: number) => void;
+    /**
+     * Callback ao remover item
+     */
+    onRemove: (itemId: string) => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Sheet lateral completo do carrinho
+ * Exibe lista de itens, resumo e ações
+ *
+ * @example
+ * ```tsx
+ * <CartSheet
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   items={cartItems}
+ *   onQuantityChange={handleUpdateQuantity}
+ *   onRemoveItem={handleRemoveItem}
+ *   onConfirmOrder={handleConfirmOrder}
+ *   loading={isSubmitting}
+ * />
+ * ```
+ */
+export declare function CartSheet({ open, onOpenChange, items, onQuantityChange, onRemoveItem, onConfirmOrder, loading, className, }: CartSheetProps): JSX.Element;
+
+export declare interface CartSheetProps {
+    /**
+     * Se o sheet está aberto
+     */
+    open: boolean;
+    /**
+     * Callback para abrir/fechar
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Itens no carrinho
+     */
+    items: CartItemData[];
+    /**
+     * Callback ao alterar quantidade
+     */
+    onQuantityChange: (itemId: string, quantity: number) => void;
+    /**
+     * Callback ao remover item
+     */
+    onRemoveItem: (itemId: string) => void;
+    /**
+     * Callback ao confirmar pedido
+     */
+    onConfirmOrder: () => void;
+    /**
+     * Se está processando o pedido
+     */
+    loading?: boolean;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Resumo do carrinho com totais e botão de confirmação
+ * Usado no footer do CartSheet
+ *
+ * @example
+ * ```tsx
+ * <CartSummary
+ *   subtotal={45.50}
+ *   itemCount={3}
+ *   onConfirm={handleConfirmOrder}
+ *   loading={isSubmitting}
+ * />
+ * ```
+ */
+export declare function CartSummary({ subtotal, itemCount, onConfirm, loading, className, }: CartSummaryProps): JSX.Element;
+
+export declare interface CartSummaryProps {
+    /**
+     * Valor subtotal
+     */
+    subtotal: number;
+    /**
+     * Quantidade total de itens
+     */
+    itemCount: number;
+    /**
+     * Callback ao confirmar pedido
+     */
+    onConfirm: () => void;
+    /**
+     * Se está processando o pedido
+     */
+    loading?: boolean;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+export declare interface Category {
+    id: string;
+    name: string;
+}
+
+/**
+ * Pill de categoria individual
+ * Muda visual quando ativa
+ *
+ * @example
+ * ```tsx
+ * <CategoryPill
+ *   name="Hambúrgueres"
+ *   isActive={true}
+ *   onClick={() => setCategory('hamburgueres')}
+ * />
+ * ```
+ */
+export declare function CategoryPill({ name, isActive, onClick, className, }: CategoryPillProps): JSX.Element;
+
+export declare interface CategoryPillProps {
+    /**
+     * Nome da categoria
+     */
+    name: string;
+    /**
+     * Se está ativa
+     */
+    isActive?: boolean;
+    /**
+     * Callback ao clicar
+     */
+    onClick?: () => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Navegação horizontal de categorias com scroll
+ * Primeira opção sempre é "Todos"
+ *
+ * @example
+ * ```tsx
+ * <CategoryTabs
+ *   categories={categories}
+ *   activeCategory={activeCategoryId}
+ *   onSelectCategory={setActiveCategoryId}
+ * />
+ * ```
+ */
+export declare function CategoryTabs({ categories, activeCategory, onSelectCategory, className, }: CategoryTabsProps): JSX.Element;
+
+export declare interface CategoryTabsProps {
+    /**
+     * Lista de categorias
+     */
+    categories: Category[];
+    /**
+     * ID da categoria ativa
+     */
+    activeCategory?: string;
+    /**
+     * Callback ao selecionar categoria
+     */
+    onSelectCategory: (categoryId: string) => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+export declare interface Extra {
+    id: string;
+    name: string;
+    price: number;
+}
+
+/**
+ * Checkbox para adicionar ingredientes extras (pagos)
+ * Usado na seção "Adicionar extras?"
+ *
+ * @example
+ * ```tsx
+ * <ExtraCheckbox
+ *   extra={{ id: '1', name: 'Queijo Cheddar', price: 3.00 }}
+ *   checked={selectedExtras.includes('1')}
+ *   onCheckedChange={(checked) => handleAddExtra('1', checked)}
+ * />
+ * ```
+ */
+export declare function ExtraCheckbox({ extra, checked, onCheckedChange, className, }: ExtraCheckboxProps): JSX.Element;
+
+export declare interface ExtraCheckboxProps {
+    /**
+     * Dados do extra
+     */
+    extra: Extra;
+    /**
+     * Se está selecionado
+     */
+    checked: boolean;
+    /**
+     * Callback quando estado muda
+     */
+    onCheckedChange: (checked: boolean) => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+export declare interface Ingredient {
+    id: string;
+    name: string;
+    quantity: number;
+    unit?: string;
+}
+
+/**
+ * Checkbox para remover ingredientes da receita base
+ * Usado na seção "Remover ingredientes?"
+ *
+ * @example
+ * ```tsx
+ * <IngredientCheckbox
+ *   ingredient={{ id: '1', name: 'Cebola Roxa', quantity: 1, unit: 'fatia' }}
+ *   checked={removedIngredients.includes('1')}
+ *   onCheckedChange={(checked) => handleRemove('1', checked)}
+ * />
+ * ```
+ */
+export declare function IngredientCheckbox({ ingredient, checked, onCheckedChange, className, }: IngredientCheckboxProps): JSX.Element;
+
+export declare interface IngredientCheckboxProps {
+    /**
+     * Dados do ingrediente
+     */
+    ingredient: Ingredient;
+    /**
+     * Se está selecionado para remoção
+     */
+    checked: boolean;
+    /**
+     * Callback quando estado muda
+     */
+    onCheckedChange: (checked: boolean) => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Wrapper para listas de ingredientes
+ * Fornece título, descrição e layout consistente
+ *
+ * @example
+ * ```tsx
+ * <IngredientList
+ *   title="Remover ingredientes?"
+ *   description="Selecione os ingredientes que deseja remover"
+ * >
+ *   <IngredientCheckbox ... />
+ *   <IngredientCheckbox ... />
+ * </IngredientList>
+ * ```
+ */
+export declare function IngredientList({ title, description, children, className, }: IngredientListProps): JSX.Element;
+
+export declare interface IngredientListProps {
+    /**
+     * Título da seção (ex: "Remover ingredientes?")
+     */
+    title: string;
+    /**
+     * Descrição opcional
+     */
+    description?: string;
+    /**
+     * Elementos filhos (IngredientCheckbox ou ExtraCheckbox)
+     */
+    children: React_2.ReactNode;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Modal de confirmação após pedido enviado com sucesso
+ * Exibe ícone de sucesso, ID do pedido e valor total
+ *
+ * @example
+ * ```tsx
+ * <OrderConfirmationModal
+ *   open={showConfirmation}
+ *   onOpenChange={setShowConfirmation}
+ *   orderId={createdOrderId}
+ *   totalValue={45.50}
+ *   onClose={handleReturnToTables}
+ * />
+ * ```
+ */
+export declare function OrderConfirmationModal({ open, onOpenChange, orderId, totalValue, onClose, className, }: OrderConfirmationModalProps): JSX.Element;
+
+export declare interface OrderConfirmationModalProps {
+    /**
+     * Se o modal está aberto
+     */
+    open: boolean;
+    /**
+     * Callback para fechar
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * ID do pedido criado
+     */
+    orderId?: string;
+    /**
+     * Valor total do pedido
+     */
+    totalValue: number;
+    /**
+     * Callback ao confirmar e voltar
+     */
+    onClose: () => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Estado de loading durante envio do pedido
+ * Exibe spinner e mensagem
+ *
+ * @example
+ * ```tsx
+ * {isSubmitting && (
+ *   <OrderLoadingState message="Enviando pedido..." />
+ * )}
+ * ```
+ */
+export declare function OrderLoadingState({ message, className, }: OrderLoadingStateProps): JSX.Element;
+
+export declare interface OrderLoadingStateProps {
+    /**
+     * Mensagem customizada
+     */
+    message?: string;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+export declare interface Product {
+    id: string;
+    name: string;
+    description?: string;
+    price: number;
+    imageUrl?: string;
+    isActive: boolean;
+}
+
+/**
+ * Card de produto com imagem, nome, descrição e preço
+ * Exibe estado de indisponível quando isActive = false
+ *
+ * @example
+ * ```tsx
+ * <ProductCard
+ *   product={product}
+ *   onClick={() => handleSelectProduct(product)}
+ * />
+ * ```
+ */
+export declare function ProductCard({ product, onClick, className, }: ProductCardProps): JSX.Element;
+
+export declare interface ProductCardProps {
+    /**
+     * Dados do produto
+     */
+    product: Product;
+    /**
+     * Callback ao clicar no card
+     */
+    onClick?: () => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Modal completo de customização de produto
+ * Permite remover ingredientes, adicionar extras e escolher quantidade
+ *
+ * @example
+ * ```tsx
+ * <ProductDetailModal
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   product={selectedProduct}
+ *   removableIngredients={ingredients}
+ *   availableExtras={extras}
+ *   onAddToCart={handleAddToCart}
+ * />
+ * ```
+ */
+export declare function ProductDetailModal({ open, onOpenChange, product, removableIngredients, availableExtras, onAddToCart, className, }: ProductDetailModalProps): JSX.Element;
+
+export declare interface ProductDetailModalProps {
+    /**
+     * Se o modal está aberto
+     */
+    open: boolean;
+    /**
+     * Callback para fechar
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Dados do produto
+     */
+    product: {
+        id: string;
+        name: string;
+        description?: string;
+        price: number;
+        imageUrl?: string;
+    };
+    /**
+     * Ingredientes removíveis da receita base
+     */
+    removableIngredients?: Ingredient[];
+    /**
+     * Extras disponíveis
+     */
+    availableExtras?: Extra[];
+    /**
+     * Callback ao adicionar ao carrinho
+     */
+    onAddToCart: (data: {
+        productId: string;
+        quantity: number;
+        removedIngredients: string[];
+        addedExtras: string[];
+        notes?: string;
+    }) => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Grid responsivo para exibir cards de produtos
+ * Adapta automaticamente o número de colunas baseado no viewport
+ *
+ * @example
+ * ```tsx
+ * <ProductGrid>
+ *   <ProductCard product={product1} />
+ *   <ProductCard product={product2} />
+ * </ProductGrid>
+ * ```
+ */
+export declare function ProductGrid({ children, className, ...props }: ProductGridProps): JSX.Element;
+
+export declare interface ProductGridProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Elementos filhos (ProductCard)
+     */
+    children: React_2.ReactNode;
+}
+
+/**
+ * Exibe o cálculo de preço do produto em tempo real
+ * Mostra base + extras = total
+ *
+ * @example
+ * ```tsx
+ * <ProductPriceDisplay
+ *   basePrice={25.00}
+ *   additionalPrice={5.00}
+ * />
+ * // Exibe: R$ 25,00 + R$ 5,00 = R$ 30,00
+ * ```
+ */
+export declare function ProductPriceDisplay({ basePrice, additionalPrice, className, }: ProductPriceDisplayProps): JSX.Element;
+
+export declare interface ProductPriceDisplayProps {
+    /**
+     * Preço base do produto
+     */
+    basePrice: number;
+    /**
+     * Preço adicional dos extras
+     */
+    additionalPrice: number;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Controle de quantidade com botões - e +
+ * Respeita limites min e max
+ *
+ * @example
+ * ```tsx
+ * <QuantityStepper
+ *   value={quantity}
+ *   onChange={setQuantity}
+ *   min={1}
+ *   max={10}
+ * />
+ * ```
+ */
+export declare function QuantityStepper({ value, onChange, min, max, size, className, }: QuantityStepperProps): JSX.Element;
+
+export declare interface QuantityStepperProps {
+    /**
+     * Quantidade atual
+     */
+    value: number;
+    /**
+     * Callback quando quantidade muda
+     */
+    onChange: (value: number) => void;
+    /**
+     * Valor mínimo (padrão: 1)
+     */
+    min?: number;
+    /**
+     * Valor máximo
+     */
+    max?: number;
+    /**
+     * Tamanho do componente
+     */
+    size?: "sm" | "default" | "lg";
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Badge que indica o status de uma mesa
+ * Cores e labels automáticos baseados no status
+ *
+ * @example
+ * ```tsx
+ * <TableBadge status="occupied" />
+ * <TableBadge status="available" />
+ * ```
+ */
+export declare function TableBadge({ status, className }: TableBadgeProps): JSX.Element;
+
+export declare interface TableBadgeProps {
+    /**
+     * Status da mesa
+     */
+    status: TableStatus;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Card visual de uma mesa
+ * Exibe número grande e badge de status
+ *
+ * @example
+ * ```tsx
+ * <TableCard
+ *   number={12}
+ *   status="occupied"
+ *   onClick={() => handleSelectTable(12)}
+ * />
+ * ```
+ */
+export declare function TableCard({ number, status, onClick, className, }: TableCardProps): JSX.Element;
+
+export declare interface TableCardProps {
+    /**
+     * Número da mesa
+     */
+    number: number;
+    /**
+     * Status da mesa
+     */
+    status: TableStatus;
+    /**
+     * Callback ao clicar na mesa
+     */
+    onClick?: () => void;
+    /**
+     * Classes adicionais
+     */
+    className?: string;
+}
+
+/**
+ * Grid responsivo para exibir cards de mesas
+ * Adapta automaticamente o número de colunas baseado no viewport
+ *
+ * @example
+ * ```tsx
+ * <TableGrid>
+ *   <TableCard number={1} status="available" />
+ *   <TableCard number={2} status="occupied" />
+ * </TableGrid>
+ * ```
+ */
+export declare function TableGrid({ children, className, ...props }: TableGridProps): JSX.Element;
+
+export declare interface TableGridProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Elementos filhos (TableCard)
+     */
+    children: React_2.ReactNode;
+}
+
+export declare type TableStatus = "available" | "occupied" | "reserved";
+
 export { }