@instockng/storefront-ui 1.0.0

package/README.md

@@ -0,0 +1,394 @@
+# @instockng/storefront-ui
+
+Pre-built React UI components for building e-commerce storefronts with the OMS (Order Management System) API. Built with React, TypeScript, Tailwind CSS, and shadcn/ui.
+
+## Installation
+
+```bash
+npm install @instockng/storefront-ui @tanstack/react-query lucide-react
+```
+
+## Quick Start
+
+- ✅ **Drop-in Components** - Fully functional UI out of the box
+- ✅ **Fully Typed** - TypeScript support with auto-generated API types
+- ✅ **Customizable** - Override styles with className props
+- ✅ **Theme Support** - Pass custom colors, fonts, and styling
+- ✅ **Responsive** - Mobile-first design
+- ✅ **Accessible** - Built with accessibility in mind
+
+## Installation
+
+```bash
+npm install @instockng/storefront-ui
+# or
+pnpm add @instockng/storefront-ui
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom @tanstack/react-query lucide-react
+```
+
+## Usage
+
+### Setup
+
+Wrap your app with providers:
+
+```tsx
+import { ApiClientProvider } from '@instockng/storefront-ui';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ApiClientProvider baseURL="https://api.yoursite.com">
+        <YourApp />
+      </ApiClientProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+### Quick Start Examples
+
+#### ProductGrid - Product Catalog
+
+```tsx
+import { ProductGrid } from '@instockng/storefront-ui';
+
+function ProductCatalog() {
+  return (
+    <ProductGrid
+      brandId="your-brand-uuid"
+      onAddToCart={(variantId, quantity) => {
+        console.log('Adding to cart:', variantId, quantity);
+      }}
+      columns={3}
+      showStock={true}
+    />
+  );
+}
+```
+
+#### ShoppingCart - Cart Sidebar with Integrated Checkout
+
+The `ShoppingCart` component now includes an integrated `Checkout` modal - no need to handle `onCheckout` unless you want custom behavior!
+
+```tsx
+import { ShoppingCart, CartProvider } from '@instockng/storefront-ui';
+
+function MyApp() {
+  const [isCartOpen, setIsCartOpen] = useState(false);
+
+  return (
+    <CartProvider cartId="cart-uuid">
+      {/* Your app content */}
+      <button onClick={() => setIsCartOpen(true)}>Open Cart</button>
+
+      {/* Cart with integrated checkout - no onCheckout needed! */}
+      <ShoppingCart
+        isOpen={isCartOpen}
+        onClose={() => setIsCartOpen(false)}
+        onOrderSuccess={(orderId) => {
+          console.log('Order placed:', orderId);
+          // Optionally navigate or show success message
+        }}
+        showDiscountCode={true}
+      />
+    </CartProvider>
+  );
+}
+```
+
+**Custom Checkout Handler (Optional)**
+
+If you need custom behavior, you can still pass `onCheckout`:
+
+```tsx
+<ShoppingCart
+  isOpen={isCartOpen}
+  onClose={() => setIsCartOpen(false)}
+  onCheckout={() => navigate('/custom-checkout')} // Custom behavior
+  showDiscountCode={true}
+/>
+```
+
+#### CheckoutSummary - Checkout Page
+
+```tsx
+import { CheckoutSummary } from '@instockng/storefront-ui';
+
+function CheckoutPage() {
+  const navigate = useNavigate();
+
+  return (
+    <CheckoutSummary
+      cartId="cart-uuid"
+      brandId="brand-uuid"
+      onSuccess={(orderId, token) => {
+        navigate(`/order-confirmation/${orderId}/${token}`);
+      }}
+      cartSummary={{
+        subtotal: 100.00,
+        discountAmount: 10.00,
+        discountCode: 'SAVE10',
+        deliveryFee: 5.00,
+        total: 95.00
+      }}
+    />
+  );
+}
+```
+
+#### OrderConfirmation - Confirmation Page
+
+```tsx
+import { OrderConfirmation } from '@instockng/storefront-ui';
+
+function OrderPage() {
+  const { orderId, token } = useParams();
+
+  return (
+    <OrderConfirmation
+      orderId={orderId}
+      token={token}
+      onConfirm={(orderNumber) => {
+        console.log('Order confirmed:', orderNumber);
+      }}
+    />
+  );
+}
+```
+
+#### Customization
+
+```tsx
+<OrderConfirmation
+  orderId={orderId}
+  token={token}
+  // Custom styling
+  className="bg-white"
+  headerClassName="text-brand-blue"
+  buttonClassName="bg-brand-primary hover:bg-brand-primary-dark"
+  cardClassName="shadow-lg border-brand-gray"
+
+  // Custom locale & currency
+  currency="USD"
+  locale="en-US"
+
+  // Custom WhatsApp support
+  whatsappHelpLink="https://wa.me/1234567890"
+  whatsappHelpNumber="+1 (234) 567-890"
+
+  // Callbacks
+  onConfirm={(orderNumber) => {
+    // Track analytics
+    analytics.track('Order Confirmed', { orderNumber });
+    // Redirect
+    router.push('/thank-you');
+  }}
+  onError={(error) => {
+    // Show toast notification
+    toast.error('Failed to confirm order');
+  }}
+/>
+```
+
+## Available Components
+
+### Product Components
+
+- **ProductGrid** - Grid of products with add to cart, filtering, and customization
+- **ProductCard** - Individual product with variants, images, stock status, and quantity selector
+
+### Cart Components
+
+- **ShoppingCart** - Full cart display with items, discount codes, and checkout button
+- **CartItem** - Individual cart item with quantity controls and remove button
+- **DiscountCodeInput** - Standalone discount code input with validation
+
+### Checkout Components
+
+- **CheckoutSummary** - Complete checkout form with customer info, delivery, and payment
+- **DeliveryZoneSelector** - Delivery zone dropdown grouped by state
+
+### Order Components
+
+- **OrderConfirmation** - Order confirmation page for confirming prospect orders
+
+## Theming
+
+All components accept `className` props for custom styling:
+
+```tsx
+<OrderConfirmation
+  className="font-custom"              // Root container
+  headerClassName="text-brand-color"   // Header section
+  buttonClassName="bg-brand-primary"   // Buttons
+  cardClassName="border-brand-gray"    // Card components
+/>
+```
+
+### Using with Tailwind
+
+The components are built with Tailwind CSS. Make sure your `tailwind.config.js` includes the package:
+
+```js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@instockng/storefront-ui/**/*.{js,ts,jsx,tsx}',
+  ],
+  // ... your config
+}
+```
+
+## API Hooks
+
+All `@oms/api-client` hooks are re-exported for convenience:
+
+```tsx
+import {
+  useGetOrder,
+  useConfirmOrder,
+  useGetProducts,
+  useGetCart,
+  useCheckout,
+  // ... all other hooks
+} from '@instockng/storefront-ui';
+```
+
+## UI Primitives
+
+Access underlying UI components for custom layouts:
+
+```tsx
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge,
+} from '@instockng/storefront-ui';
+```
+
+## Utilities
+
+Helper functions for formatting:
+
+```tsx
+import {
+  formatCurrency,
+  formatDate,
+  formatDateTime,
+  getStatusColor,
+  cn, // Tailwind class merger
+} from '@instockng/storefront-ui';
+
+// Usage
+formatCurrency(1999.99, 'USD', 'en-US'); // "$1,999.99"
+formatDate('2024-01-15'); // "January 15, 2024"
+formatDateTime('2024-01-15T10:30:00'); // "January 15, 2024 at 10:30 AM"
+getStatusColor('shipped'); // "bg-blue-100 text-blue-800"
+cn('base-class', { 'conditional': true }); // Merges Tailwind classes
+```
+
+## TypeScript
+
+All components are fully typed with TypeScript:
+
+```tsx
+import type { OrderConfirmationProps } from '@instockng/storefront-ui';
+
+const config: OrderConfirmationProps = {
+  orderId: '123',
+  token: 'abc',
+  // TypeScript will autocomplete and validate all props
+};
+```
+
+## Examples
+
+### Simple Usage
+
+```tsx
+import { OrderConfirmation } from '@instockng/storefront-ui';
+
+export default function OrderPage({ orderId, token }) {
+  return <OrderConfirmation orderId={orderId} token={token} />;
+}
+```
+
+### With Custom Brand Colors
+
+```tsx
+import { OrderConfirmation } from '@instockng/storefront-ui';
+
+export default function BrandedOrderPage({ orderId, token }) {
+  return (
+    <OrderConfirmation
+      orderId={orderId}
+      token={token}
+      className="bg-gray-50 font-inter"
+      headerClassName="text-purple-600"
+      buttonClassName="bg-purple-600 hover:bg-purple-700"
+      cardClassName="border-purple-200"
+      currency="USD"
+      locale="en-US"
+    />
+  );
+}
+```
+
+### With Analytics Tracking
+
+```tsx
+import { OrderConfirmation } from '@instockng/storefront-ui';
+import { analytics } from './analytics';
+
+export default function TrackedOrderPage({ orderId, token }) {
+  return (
+    <OrderConfirmation
+      orderId={orderId}
+      token={token}
+      onConfirm={(orderNumber) => {
+        analytics.track('Order Confirmed', {
+          orderNumber,
+          orderId,
+        });
+
+        // Redirect to thank you page
+        window.location.href = '/thank-you';
+      }}
+      onError={(error) => {
+        analytics.track('Order Confirmation Failed', {
+          error: error.message,
+          orderId,
+        });
+      }}
+    />
+  );
+}
+```
+
+## Development
+
+This package is part of the OMS monorepo. When the backend API changes:
+
+```bash
+# Regenerate types
+cd packages/types
+pnpm run generate
+
+# The storefront-ui will automatically pick up new types
+```
+
+## License
+
+ISC

package/dist/components/CartItem.d.ts

@@ -0,0 +1,15 @@
+/**
+ * CartItem Component
+ *
+ * Displays a single item in the shopping cart with quantity controls and remove button.
+ */
+import type { CartItem as CartItemType } from '@oms/api-client';
+export interface CartItemProps {
+    item: CartItemType;
+    /** Custom class name */
+    className?: string;
+    /** Disable controls */
+    disabled?: boolean;
+}
+export declare function CartItem({ item, className, disabled, }: CartItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CartItem.d.ts.map

package/dist/components/CartItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartItem.d.ts","sourceRoot":"","sources":["../../src/components/CartItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIhE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,QAAgB,GACjB,EAAE,aAAa,2CAoHf"}

package/dist/components/Checkout.d.ts

@@ -0,0 +1,39 @@
+export type PaymentMethod = 'cod' | 'online';
+export interface CheckoutFormData {
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    address: string;
+    city: string;
+    state?: string;
+    deliveryZoneId: string;
+    paymentMethod: PaymentMethod;
+    notes?: string;
+}
+export interface CheckoutProps {
+    /** Controls modal visibility */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Initial form data */
+    initialData?: Partial<CheckoutFormData>;
+    /** Callback on successful checkout */
+    onSuccess?: (orderId: string) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Submit button text */
+    submitButtonText?: string;
+    /** States available for selection */
+    states?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Refund policy content */
+    refundPolicy?: {
+        title?: string;
+        policies?: string[];
+    };
+}
+export declare function Checkout({ isOpen, onClose, initialData, onSuccess, onError, submitButtonText, refundPolicy, }: CheckoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkout.d.ts.map

package/dist/components/Checkout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/components/Checkout.tsx"],"names":[],"mappings":"AA4FA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,sCAAsC;IACtC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,4BAA4B;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH;AAID,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,OAAO,EACP,WAAW,EACX,SAAS,EACT,OAAO,EACP,gBAAgC,EAChC,YAAY,GACb,EAAE,aAAa,2CAiyBf"}

package/dist/components/DiscountCodeInput.d.ts

@@ -0,0 +1,20 @@
+/**
+ * DiscountCodeInput Component
+ *
+ * Input field for applying/removing discount codes with validation feedback.
+ * Uses CartProvider for cart operations.
+ */
+export interface DiscountCodeInputProps {
+    /** Callback on successful apply/remove */
+    onSuccess?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Custom class name for the input */
+    inputClassName?: string;
+    /** Custom class name for the apply button */
+    buttonClassName?: string;
+}
+export declare function DiscountCodeInput({ onSuccess, className, placeholder, inputClassName, buttonClassName, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DiscountCodeInput.d.ts.map

package/dist/components/DiscountCodeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscountCodeInput.d.ts","sourceRoot":"","sources":["../../src/components/DiscountCodeInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,SAAS,EACT,WAAmC,EACnC,cAAc,EACd,eAAe,GAChB,EAAE,sBAAsB,2CA+HxB"}

package/dist/components/OrderConfirmation.d.ts

@@ -0,0 +1,30 @@
+/**
+ * OrderConfirmation Component
+ *
+ * A pre-built order confirmation page for e-commerce sites.
+ * Displays order details and allows customers to confirm prospect orders.
+ */
+export interface OrderConfirmationProps {
+    /** Order UUID */
+    orderId: string;
+    /** User action token for authentication */
+    token: string;
+    /** Custom class name for root container */
+    className?: string;
+    /** Custom class name for header section */
+    headerClassName?: string;
+    /** Custom class name for buttons */
+    buttonClassName?: string;
+    /** Custom class name for cards */
+    cardClassName?: string;
+    /** WhatsApp help link (defaults to shared constant) */
+    whatsappHelpLink?: string;
+    /** WhatsApp help number formatted (defaults to shared constant) */
+    whatsappHelpNumber?: string;
+    /** Currency code for formatting */
+    currency?: string;
+    /** Locale for date/currency formatting */
+    locale?: string;
+}
+export declare function OrderConfirmation({ orderId, token, className, headerClassName, buttonClassName, cardClassName, whatsappHelpLink, whatsappHelpNumber, currency, locale, }: OrderConfirmationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrderConfirmation.d.ts.map

package/dist/components/OrderConfirmation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderConfirmation.d.ts","sourceRoot":"","sources":["../../src/components/OrderConfirmation.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,MAAM,WAAW,sBAAsB;IACrC,iBAAiB;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IAEd,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,KAAK,EACL,SAAS,EACT,eAAe,EACf,eAAe,EACf,aAAa,EACb,gBAAqC,EACrC,kBAAmD,EACnD,QAAgB,EAChB,MAAgB,GACjB,EAAE,sBAAsB,2CAuPxB"}

package/dist/components/ProductCard.d.ts

@@ -0,0 +1,42 @@
+/**
+ * ProductCard Component
+ *
+ * Displays a product with image, name, price, and add to cart button.
+ * Handles variant selection if product has multiple variants.
+ */
+export interface ProductCardProduct {
+    id: string;
+    name: string;
+    description?: string;
+    imageUrl?: string;
+    brand?: {
+        name: string;
+        logoUrl?: string;
+    };
+    variants: Array<{
+        id: string;
+        name: string;
+        price: number;
+        sku: string;
+        stock?: number;
+    }>;
+}
+export interface ProductCardProps {
+    product: ProductCardProduct;
+    /** Callback when add to cart is clicked */
+    onAddToCart?: (variantId: string, quantity: number) => void;
+    /** Show stock information */
+    showStock?: boolean;
+    /** Custom class names */
+    className?: string;
+    /** Image class name */
+    imageClassName?: string;
+    /** Disable add to cart button */
+    disableAddToCart?: boolean;
+    /** Loading state for add to cart */
+    isAddingToCart?: boolean;
+    /** Click handler for card */
+    onClick?: () => void;
+}
+export declare function ProductCard({ product, onAddToCart, showStock, className, imageClassName, disableAddToCart, isAddingToCart, onClick, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductCard.d.ts.map

package/dist/components/ProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../src/components/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,QAAQ,EAAE,KAAK,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,kBAAkB,CAAC;IAC5B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,WAAW,EACX,SAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAwB,EACxB,cAAsB,EACtB,OAAO,GACR,EAAE,gBAAgB,2CAsIlB"}

package/dist/components/ProductGrid.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ProductGrid Component
+ *
+ * Displays a grid of products using ProductCard.
+ * Handles loading, empty states, and integrates with useGetProducts hook.
+ */
+import { type ProductCardProduct } from './ProductCard';
+export interface ProductGridProps {
+    /** Brand UUID to fetch products for */
+    brandId: string;
+    /** Callback when add to cart is clicked */
+    onAddToCart?: (variantId: string, quantity: number) => void;
+    /** Callback when product card is clicked */
+    onProductClick?: (product: ProductCardProduct) => void;
+    /** Number of columns in grid */
+    columns?: 2 | 3 | 4;
+    /** Show stock information */
+    showStock?: boolean;
+    /** Custom class name for grid container */
+    className?: string;
+    /** Custom class name for product cards */
+    cardClassName?: string;
+    /** Show loading state */
+    showLoading?: boolean;
+    /** Custom empty state message */
+    emptyMessage?: string;
+    /** Custom error message */
+    errorMessage?: string;
+    /** Loading variant ID (to show loading state on specific card) */
+    loadingVariantId?: string;
+}
+export declare function ProductGrid({ brandId, onAddToCart, onProductClick, columns, showStock, className, cardClassName, showLoading, emptyMessage, errorMessage, loadingVariantId, }: ProductGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductGrid.d.ts.map

package/dist/components/ProductGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGrid.d.ts","sourceRoot":"","sources":["../../src/components/ProductGrid.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIrE,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,4CAA4C;IAC5C,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,WAAW,EACX,cAAc,EACd,OAAW,EACX,SAAgB,EAChB,SAAS,EACT,aAAa,EACb,WAAkB,EAClB,YAAqD,EACrD,YAAiE,EACjE,gBAAgB,GACjB,EAAE,gBAAgB,2CA2FlB"}

package/dist/components/ShoppingCart.d.ts

@@ -0,0 +1,28 @@
+export interface ShoppingCartProps {
+    /** Whether the cart is open */
+    isOpen: boolean;
+    /** Callback when cart should close */
+    onClose: () => void;
+    /** Callback when checkout is clicked */
+    onCheckout?: () => void;
+    /** Callback when continue shopping is clicked */
+    onContinueShopping?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Show discount code input */
+    showDiscountCode?: boolean;
+    /** Checkout button text */
+    checkoutButtonText?: string;
+    /** Continue shopping button text */
+    continueShoppingText?: string;
+    /** Custom class for checkout button */
+    checkoutButtonClassName?: string;
+    /** Custom class for continue shopping button */
+    continueShoppingButtonClassName?: string;
+    /** Disable checkout */
+    disableCheckout?: boolean;
+    /** Empty cart message */
+    emptyMessage?: string;
+}
+export declare function ShoppingCart({ isOpen, onClose, onCheckout, onContinueShopping, className, showDiscountCode, checkoutButtonText, continueShoppingText, checkoutButtonClassName, continueShoppingButtonClassName, disableCheckout, emptyMessage, }: ShoppingCartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShoppingCart.d.ts.map

package/dist/components/ShoppingCart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShoppingCart.d.ts","sourceRoot":"","sources":["../../src/components/ShoppingCart.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uCAAuC;IACvC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gDAAgD;IAChD,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,gBAAuB,EACvB,kBAA+B,EAC/B,oBAA0C,EAC1C,uBAAuB,EACvB,+BAA+B,EAC/B,eAAuB,EACvB,YAAmC,GACpC,EAAE,iBAAiB,2CA2MnB"}

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/ui/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;mFAkBlB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAI1D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/button.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, loading, children, disabled, type, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    loading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;mFA8BnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,2CAeF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}