@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

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, @tanstack/react-table, 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/resource-tabs | 1 exports, 2 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/confirm-dialog | 1 exports, 1 types | | @simpleapps-com/augur-web/data-table | 4 exports, 3 types | | @simpleapps-com/augur-web/detail-panel | 1 exports, 2 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 | 3 exports, 7 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 | | | useAnalytics | function | |

Auth & Context

| Export | Kind | Description | |--------|------|-------------| | AnalyticsProvider | function | | | 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. | | ResourceTabs | function | Standardized sub-resource tab layout for detail pages. | | Spinner | const | Animated SVG loading spinner. Sizes: sm (12px), md (16px), lg (24px). | | CommandDialog | const | | | CommandShortcut | const | | | ConfirmDialog | function | Pre-composed confirmation dialog for delete/action confirmations. | | DataTable | function | | | RowSelectionState | value | | | SortingState | value | | | VisibilityState | value | | | DetailPanel | function | Read/edit toggle panel for a single record. Renders field values in read | | 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

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

Button

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

createPrice

// 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} />

ResourceTabs

<ResourceTabs
  tabs={[
    { value: "attributes", label: "Attributes", content: <AttributesList /> },
    { value: "items", label: "Items", content: <ItemsList /> },
  ]}
/>

ConfirmDialog

<ConfirmDialog
  open={showDelete}
  onOpenChange={setShowDelete}
  title="Delete brand?"
  description="This action cannot be undone."
  variant="destructive"
  onConfirm={() => deleteBrand.mutate(uid)}
  loading={deleteBrand.isPending}
/>

DetailPanel

const fields: FieldDef<Brand>[] = [
  { key: "brandsName", label: "Name", type: "text", required: true },
  { key: "brandsDesc", label: "Description", type: "textarea" },
  { key: "brandsUid", label: "UID", type: "readonly" },
];

<DetailPanel fields={fields} data={brand} onSave={handleSave} />

FormInput

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

FormSelect

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

FinancingWidget

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

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

QuantityInput

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

Types

AddToCartButtonProps, BreadCrumbsProps, ButtonProps, InputProps, CreatePriceResult, PriceClassNames, PriceConfig, PriceProps, FormatPriceOptions, PriceFormatConfig, ResourceTabsProps, TabDef, TextareaProps, ConfirmDialogProps, ColumnDef, DataTablePagination, DataTableProps, DetailPanelProps, FieldDef, FormFieldProps, FormInputProps, FormSelectProps, FormTextareaProps, FinancingProvider, FinancingWidgetProps, UseFinancingResult, AnalyticsContextValue, AnalyticsNoscriptProps, AnalyticsProviderProps, AnalyticsStrategy, EcommerceEvent, EcommerceItem, EcommerceParams, 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 |