npm package: @simpleapps-com/augur-web
Description: Shared React UI components for Augur ecommerce sites (Radix + Tailwind)
Latest version: 2.2.29

# @simpleapps-com/augur-web

> Shared React UI components for Augur ecommerce sites (Radix + Tailwind)

> Auto-generated. Do not edit manually. Regenerate with: `pnpm run generate-exports`

Part of the **@simpleapps-com/augur-\*** platform. All packages use fixed versioning (same version number).

## Install

```bash
pnpm add @simpleapps-com/augur-web
```

### Peer Dependencies

`@radix-ui/react-accordion`, `@radix-ui/react-checkbox`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-label`, `@radix-ui/react-navigation-menu`, `@radix-ui/react-popover`, `@radix-ui/react-radio-group`, `@radix-ui/react-select`, `@radix-ui/react-separator`, `@radix-ui/react-slot`, `@radix-ui/react-tabs`, `class-variance-authority`, `cmdk`, `react`, `react-dom`, `react-icons`, `tailwindcss`

## Entry Points

| Import | Description |
|--------|-------------|
| `@simpleapps-com/augur-web/accordion` | 4 exports, 0 types |
| `@simpleapps-com/augur-web/add-to-cart-button` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/breadcrumb` | 7 exports, 0 types |
| `@simpleapps-com/augur-web/breadcrumbs` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/button` | 2 exports, 1 types |
| `@simpleapps-com/augur-web/card` | 6 exports, 0 types |
| `@simpleapps-com/augur-web/checkbox` | 1 exports, 0 types |
| `@simpleapps-com/augur-web/input` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/label` | 1 exports, 0 types |
| `@simpleapps-com/augur-web/list-view` | 1 exports, 0 types |
| `@simpleapps-com/augur-web/pagination` | 9 exports, 0 types |
| `@simpleapps-com/augur-web/price` | 3 exports, 4 types |
| `@simpleapps-com/augur-web/price-format` | 1 exports, 2 types |
| `@simpleapps-com/augur-web/radio-group` | 2 exports, 0 types |
| `@simpleapps-com/augur-web/select` | 10 exports, 0 types |
| `@simpleapps-com/augur-web/spinner` | 1 exports, 0 types |
| `@simpleapps-com/augur-web/table` | 8 exports, 0 types |
| `@simpleapps-com/augur-web/tabs` | 4 exports, 0 types |
| `@simpleapps-com/augur-web/textarea` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/command` | 9 exports, 0 types |
| `@simpleapps-com/augur-web/dialog` | 10 exports, 0 types |
| `@simpleapps-com/augur-web/dropdown-menu` | 15 exports, 0 types |
| `@simpleapps-com/augur-web/navigation-menu` | 9 exports, 0 types |
| `@simpleapps-com/augur-web/popover` | 4 exports, 0 types |
| `@simpleapps-com/augur-web/separator` | 1 exports, 0 types |
| `@simpleapps-com/augur-web/skeleton` | 1 exports, 0 types |
| `@simpleapps-com/augur-web/form-field` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/form-input` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/form-select` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/form-textarea` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/financing-widget` | 1 exports, 3 types |
| `@simpleapps-com/augur-web/gtm` | 6 exports, 14 types |
| `@simpleapps-com/augur-web/mdx-components` | 1 exports, 0 types |
| `@simpleapps-com/augur-web/payment-modal` | 2 exports, 1 types |
| `@simpleapps-com/augur-web/quantity-input` | 1 exports, 1 types |
| `@simpleapps-com/augur-web/session-replay` | 1 exports, 2 types |
| `@simpleapps-com/augur-web/stock-label` | 1 exports, 4 types |
| `@simpleapps-com/augur-web/provider` | 1 exports, 1 types |

## Exports

### Analytics

| Export | Kind | Description |
|--------|------|-------------|
| `AnalyticsNoscript` | function |  |
| `GtmNoscript` | const |  |
| `useAnalytics` | function |  |
| `useGtm` | const |  |

### Auth & Context

| Export | Kind | Description |
|--------|------|-------------|
| `AnalyticsProvider` | function |  |
| `GtmProvider` | const |  |
| `SessionReplayScript` | function | Loads a session replay script with `lazyOnload` behavior. |
| `AugurSiteProvider` | function | Unified site provider that composes AugurHooksProvider with analytics |

### Cart

| Export | Kind | Description |
|--------|------|-------------|
| `AddToCartButton` | component |  |

### Items & Categories

| Export | Kind | Description |
|--------|------|-------------|
| `AccordionItem` | component |  |
| `BreadcrumbItem` | component |  |
| `PaginationItem` | component |  |
| `RadioGroupItem` | component |  |
| `SelectItem` | component |  |
| `CommandItem` | component |  |
| `DropdownMenuCheckboxItem` | component |  |
| `DropdownMenuItem` | component |  |
| `DropdownMenuRadioItem` | component |  |
| `NavigationMenuItem` | component |  |

### Payment & Checkout

| Export | Kind | Description |
|--------|------|-------------|
| `PaymentModal` | function |  |

### Pricing

| Export | Kind | Description |
|--------|------|-------------|
| `FormatPriceOptions` | value |  |
| `PriceFormatConfig` | value |  |
| `createPrice` | function | Factory that creates a `Price` component and a `formatPrice` function |
| `createFormatPrice` | function | Create a pure price-formatting function. Server-safe (no React dependency). |

### SEO & Structured Data

| Export | Kind | Description |
|--------|------|-------------|
| `BreadcrumbEllipsis` | const |  |
| `BreadcrumbSeparator` | const |  |

### Stock

| Export | Kind | Description |
|--------|------|-------------|
| `createStockLabel` | function |  |

### UI Components

| Export | Kind | Description |
|--------|------|-------------|
| `Accordion` | component |  |
| `AccordionContent` | component |  |
| `AccordionTrigger` | component |  |
| `Breadcrumb` | component |  |
| `BreadcrumbLink` | component |  |
| `BreadcrumbList` | component |  |
| `BreadcrumbPage` | component |  |
| `BreadCrumbs` | component | Breadcrumb navigation with optional JSON-LD structured data. |
| `Button` | component | Styled button with variant/size props. Supports polymorphism via `asChild`. |
| `Card` | component |  |
| `CardContent` | component |  |
| `CardDescription` | component |  |
| `CardFooter` | component |  |
| `CardHeader` | component |  |
| `CardTitle` | component |  |
| `Checkbox` | component |  |
| `Input` | component |  |
| `Label` | component |  |
| `PaginationContent` | component |  |
| `RadioGroup` | component |  |
| `Select` | component |  |
| `SelectContent` | component |  |
| `SelectGroup` | component |  |
| `SelectLabel` | component |  |
| `SelectScrollDownButton` | component |  |
| `SelectScrollUpButton` | component |  |
| `SelectSeparator` | component |  |
| `SelectTrigger` | component |  |
| `SelectValue` | component |  |
| `Table` | component |  |
| `TableBody` | component |  |
| `TableCaption` | component |  |
| `TableCell` | component |  |
| `TableFooter` | component |  |
| `TableHead` | component |  |
| `TableHeader` | component |  |
| `TableRow` | component |  |
| `Tabs` | component |  |
| `TabsContent` | component |  |
| `TabsList` | component |  |
| `TabsTrigger` | component |  |
| `Textarea` | component |  |
| `Command` | component |  |
| `CommandEmpty` | component |  |
| `CommandGroup` | component |  |
| `CommandInput` | component |  |
| `CommandList` | component |  |
| `CommandSeparator` | component |  |
| `Dialog` | component |  |
| `DialogClose` | component |  |
| `DialogContent` | component |  |
| `DialogDescription` | component |  |
| `DialogOverlay` | component |  |
| `DialogPortal` | component |  |
| `DialogTitle` | component |  |
| `DialogTrigger` | component |  |
| `DropdownMenu` | component |  |
| `DropdownMenuContent` | component |  |
| `DropdownMenuGroup` | component |  |
| `DropdownMenuLabel` | component |  |
| `DropdownMenuPortal` | component |  |
| `DropdownMenuRadioGroup` | component |  |
| `DropdownMenuSeparator` | component |  |
| `DropdownMenuSub` | component |  |
| `DropdownMenuSubContent` | component |  |
| `DropdownMenuSubTrigger` | component |  |
| `DropdownMenuTrigger` | component |  |
| `NavigationMenu` | component |  |
| `NavigationMenuContent` | component |  |
| `NavigationMenuIndicator` | component |  |
| `NavigationMenuLink` | component |  |
| `NavigationMenuList` | component |  |
| `NavigationMenuTrigger` | component |  |
| `NavigationMenuViewport` | component |  |
| `Popover` | component |  |
| `PopoverAnchor` | component |  |
| `PopoverContent` | component |  |
| `PopoverTrigger` | component |  |
| `Separator` | component |  |
| `FormField` | component | Base form layout: label + children + optional error message. |
| `FormInput` | component | Labeled text input with error display. Composes FormField + Input. |
| `FormSelect` | component | Labeled select dropdown with error display. Composes FormField + Select. |
| `FormTextarea` | component | Labeled textarea with error display. Composes FormField + Textarea. |
| `QuantityInput` | component | Numeric input with optional +/- stepper buttons for cart quantities. |

### Other

| Export | Kind | Description |
|--------|------|-------------|
| `buttonVariants` | const | CVA variants for the Button. Variants: default, destructive, outline, |
| `ListView` | const | Generic list renderer that maps an array through a render function. |
| `ListPagination` | const |  |
| `Pagination` | const |  |
| `PaginationEllipsis` | const |  |
| `PaginationLink` | const |  |
| `PaginationNext` | const |  |
| `PaginationPrevious` | const |  |
| `getPageNumbers` | function | Build an array of page numbers and ellipsis markers for pagination UI. |
| `Spinner` | const | Animated SVG loading spinner. Sizes: `sm` (12px), `md` (16px), `lg` (24px). |
| `CommandDialog` | const |  |
| `CommandShortcut` | const |  |
| `DialogFooter` | const |  |
| `DialogHeader` | const |  |
| `DropdownMenuShortcut` | const |  |
| `navigationMenuTriggerStyle` | const |  |
| `Skeleton` | function |  |
| `FinancingWidget` | function | Loads a financing widget script on the pages where it's needed. |
| `getMDXComponents` | function | Returns a map of HTML element names to styled React components |
| `extractBin` | function | Extract a card BIN from a postMessage payload. |

## Examples

### BreadCrumbs

```tsx
import Link from "next/link";
<BreadCrumbs
  links={[{ href: "/", text: "Home" }, { href: "/shop", text: "Shop" }]}
  activeBreadcrumb="Widget"
  linkComponent={Link}
  baseUrl="https://example.com"
/>
```

### Button

```tsx
<Button variant="outline" size="sm">Cancel</Button>
<Button asChild><Link href="/shop">Browse</Link></Button>
```

### createPrice

```tsx
// lib/price.ts -- one-time site config
import { createPrice } from "@simpleapps-com/augur-web/price";
export const { Price, formatPrice } = createPrice({
  currency: "USD",
  zeroLabel: "Call for Price",
});

// components/ProductCard.tsx
<Price value={item.price1} uom={item.default_selling_unit} />
```

### FormInput

```tsx
<FormInput label="Email" name="email" type="email" required error={errors.email} />
```

### FormSelect

```tsx
<FormSelect
  label="State"
  name="state"
  options={[{ label: "Texas", value: "TX" }]}
  value={state}
  onValueChange={setState}
/>
```

### FinancingWidget

```tsx
// On a product page
<FinancingWidget provider="timepayment" vendorCode="PVD5P" />

// With load callback
<FinancingWidget
  provider="timepayment"
  vendorCode="PVD5P"
  onLoad={() => console.log("Financing ready")}
/>
```

### QuantityInput

```tsx
<QuantityInput value={qty} onChange={setQty} min={1} step={1} />
```

### SessionReplayScript

```tsx
// In layout.tsx
<SessionReplayScript provider="mouseflow" siteId="88d79cd5-..." />

// With 50% sampling
<SessionReplayScript provider="mouseflow" siteId="..." sampleRate={0.5} />

// Disabled in dev
<SessionReplayScript provider="hotjar" siteId="..." disabled={isDev} />
```

## Types

`AddToCartButtonProps`, `BreadCrumbsProps`, `ButtonProps`, `InputProps`, `CreatePriceResult`, `PriceClassNames`, `PriceConfig`, `PriceProps`, `FormatPriceOptions`, `PriceFormatConfig`, `TextareaProps`, `FormFieldProps`, `FormInputProps`, `FormSelectProps`, `FormTextareaProps`, `FinancingProvider`, `FinancingWidgetProps`, `UseFinancingResult`, `AnalyticsContextValue`, `AnalyticsNoscriptProps`, `AnalyticsProviderProps`, `AnalyticsStrategy`, `EcommerceEvent`, `EcommerceItem`, `EcommerceParams`, `GtmContextValue`, `GtmEcommerceEvent`, `GtmEcommerceParams`, `GtmItem`, `GtmNoscriptProps`, `GtmProviderProps`, `GtmStrategy`, `PaymentModalProps`, `QuantityInputProps`, `SessionReplayProvider`, `SessionReplayScriptProps`, `CreateStockLabelResult`, `StockLabelClassNames`, `StockLabelConfig`, `StockLabelProps`, `AugurSiteProviderProps`


## Related Packages

All packages use fixed versioning -- same version number across the platform.

| Package | Description |
|---------|-------------|
| `@simpleapps-com/augur-config` | Shared tooling configuration presets for Augur ecommerce sites |
| `@simpleapps-com/augur-core` | Universal foundation for Augur packages — proxy infrastructure, cache keys, method classification, shared types |
| `@simpleapps-com/augur-hooks` | Cross-platform React Query hooks and Zustand stores for Augur ecommerce sites |
| `@simpleapps-com/augur-mobile` | React Native/Expo adapters for Augur ecommerce apps (offline sync, biometrics, push) |
| `@simpleapps-com/augur-server` | Server-side utilities for Augur ecommerce sites (Redis caching, SDK helpers, auth) |
| `@simpleapps-com/augur-tailwind` | Shared Tailwind CSS v4 theme with HSL variables for Augur ecommerce sites |
| `@simpleapps-com/augur-utils` | Shared types, cache configuration, and utility functions for Augur ecommerce sites |