@thorprovider/blocks 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +24 -0
- package/.turbo/turbo-test.log +10 -0
- package/.turbo/turbo-type-check.log +0 -0
- package/AGENTS.md +1 -0
- package/README.md +161 -0
- package/components.json +33 -0
- package/dist/.tsbuildinfo +1 -0
- package/dist/contracts.d.mts +563 -0
- package/dist/contracts.d.ts +563 -0
- package/dist/contracts.js +207 -0
- package/dist/contracts.js.map +1 -0
- package/dist/contracts.mjs +168 -0
- package/dist/contracts.mjs.map +1 -0
- package/dist/index.d.mts +2408 -0
- package/dist/index.d.ts +2408 -0
- package/dist/index.js +16422 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +16352 -0
- package/dist/index.mjs.map +1 -0
- package/docs/standards/data-contracts.md +70 -0
- package/docs/standards/theming.md +85 -0
- package/package.json +62 -0
- package/src/blocks/application/app-shells/app-shell-1-sidebar.tsx +198 -0
- package/src/blocks/application/app-shells/app-shell-1.tsx +196 -0
- package/src/blocks/application/login-forms/login-page-1.tsx +246 -0
- package/src/blocks/application/login-forms/login-page-2.tsx +207 -0
- package/src/blocks/application/password-recovery/forgot-password-page-1-brand-mark.tsx +38 -0
- package/src/blocks/application/password-recovery/forgot-password-page-1.tsx +320 -0
- package/src/blocks/application/signup-forms/signup-page-1.tsx +231 -0
- package/src/blocks/application/verification/verify-1.tsx +307 -0
- package/src/blocks/application/verification/verify-confetti.tsx +192 -0
- package/src/blocks/e-commerce/category-filters/category-filter-1.tsx +260 -0
- package/src/blocks/e-commerce/category-filters/category-filter-2-filter-panel.tsx +179 -0
- package/src/blocks/e-commerce/category-filters/category-filter-2.tsx +341 -0
- package/src/blocks/e-commerce/category-filters/category-filter-4-chip-rail.tsx +57 -0
- package/src/blocks/e-commerce/category-filters/category-filter-4-drawer.tsx +124 -0
- package/src/blocks/e-commerce/category-filters/category-filter-4-fields.tsx +170 -0
- package/src/blocks/e-commerce/category-filters/category-filter-4-sidebar.tsx +52 -0
- package/src/blocks/e-commerce/category-filters/category-filter-4-sort-sheet.tsx +57 -0
- package/src/blocks/e-commerce/category-filters/category-filter-4-state.ts +68 -0
- package/src/blocks/e-commerce/category-filters/category-filter-4.tsx +298 -0
- package/src/blocks/e-commerce/checkout-forms/card-formatting.test.ts +47 -0
- package/src/blocks/e-commerce/checkout-forms/card-formatting.ts +9 -0
- package/src/blocks/e-commerce/checkout-forms/checkbox-check.tsx +74 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.tsx +189 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-confirmation.tsx +283 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-field-feedback.tsx +29 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-1-contact-step.tsx +96 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-1-country-field.tsx +51 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-1-order-summary.tsx +139 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-1-payment-step.tsx +184 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-1-progress.tsx +36 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-1-shipping-step.tsx +107 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-1.tsx +235 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-2-order-summary.tsx +130 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-2-payment-card.tsx +175 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-2-shipping-card.tsx +190 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-2.tsx +312 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-3-information-step.tsx +91 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-3-order-summary.tsx +110 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-3-payment-step.tsx +137 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-3-progress.tsx +68 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-3-review-step.tsx +79 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-3-shipping-step.tsx +172 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-3.tsx +392 -0
- package/src/blocks/e-commerce/checkout-forms/checkout-form-types.ts +7 -0
- package/src/blocks/e-commerce/navigation/category-icon.test.tsx +54 -0
- package/src/blocks/e-commerce/navigation/category-icon.tsx +94 -0
- package/src/blocks/e-commerce/navigation/mega-menu.test.tsx +139 -0
- package/src/blocks/e-commerce/navigation/mega-menu.tsx +271 -0
- package/src/blocks/e-commerce/navigation/mobile-category-drawer.test.tsx +152 -0
- package/src/blocks/e-commerce/navigation/mobile-category-drawer.tsx +276 -0
- package/src/blocks/e-commerce/order-history/order-history-1.tsx +159 -0
- package/src/blocks/e-commerce/order-history/order-history-2.tsx +222 -0
- package/src/blocks/e-commerce/product-categories/avatar-group.tsx +86 -0
- package/src/blocks/e-commerce/product-categories/product-category-1.tsx +126 -0
- package/src/blocks/e-commerce/product-categories/product-category-2.tsx +100 -0
- package/src/blocks/e-commerce/product-categories/product-category-4.tsx +129 -0
- package/src/blocks/e-commerce/product-categories/product-category-5.tsx +218 -0
- package/src/blocks/e-commerce/product-list/product-card-1.tsx +131 -0
- package/src/blocks/e-commerce/product-list/product-card-2.tsx +71 -0
- package/src/blocks/e-commerce/product-list/product-card-3-reaction-toggle.tsx +166 -0
- package/src/blocks/e-commerce/product-list/product-card-3.tsx +215 -0
- package/src/blocks/e-commerce/product-list/product-card-5-checkbox-check.tsx +98 -0
- package/src/blocks/e-commerce/product-list/product-card-5-reaction-toggle.tsx +171 -0
- package/src/blocks/e-commerce/product-list/product-card-5.tsx +367 -0
- package/src/blocks/e-commerce/product-overview/product-overview-1.tsx +201 -0
- package/src/blocks/e-commerce/product-overview/product-overview-2.tsx +272 -0
- package/src/blocks/e-commerce/product-overview/product-overview-5-gallery.tsx +59 -0
- package/src/blocks/e-commerce/product-overview/product-overview-5-lightbox-tab.tsx +104 -0
- package/src/blocks/e-commerce/product-overview/product-overview-5-reviews-tab.tsx +82 -0
- package/src/blocks/e-commerce/product-overview/product-overview-5-tabs.tsx +69 -0
- package/src/blocks/e-commerce/product-overview/product-overview-5.tsx +274 -0
- package/src/blocks/e-commerce/product-overview/product-quick-view-card.tsx +135 -0
- package/src/blocks/e-commerce/product-overview/product-quick-view-dialog.tsx +393 -0
- package/src/blocks/e-commerce/product-overview/product-quick-view.tsx +136 -0
- package/src/blocks/e-commerce/reviews/review-rating-1-review-form.tsx +133 -0
- package/src/blocks/e-commerce/reviews/review-rating-1.tsx +178 -0
- package/src/blocks/e-commerce/reviews/review-rating-2.tsx +246 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-1-spinning-counter.tsx +142 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-1.tsx +291 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-2-item-row.tsx +110 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-2-recommendations.tsx +51 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-2-spinning-counter.tsx +146 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-2.tsx +295 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-3-spinning-counter.tsx +142 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-3.tsx +342 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-4-spinning-counter.tsx +146 -0
- package/src/blocks/e-commerce/shopping-carts/shopping-cart-4.tsx +391 -0
- package/src/blocks/e-commerce/store-containers/store-container-1.tsx +29 -0
- package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.tsx +244 -0
- package/src/blocks/e-commerce/storefront-hero/storefront-hero-2.tsx +283 -0
- package/src/blocks/e-commerce/storefront-hero/storefront-hero-5.tsx +318 -0
- package/src/blocks/e-commerce/storefront-hero/storefront-hero-6.tsx +205 -0
- package/src/blocks/marketing/banners/avatar-group.tsx +69 -0
- package/src/blocks/marketing/banners/banner-1.tsx +188 -0
- package/src/blocks/marketing/cta/cta-section-1.tsx +112 -0
- package/src/blocks/marketing/faq/faq-block-1.tsx +45 -0
- package/src/blocks/marketing/features/feature-1.tsx +97 -0
- package/src/blocks/marketing/features/feature-2.tsx +82 -0
- package/src/blocks/marketing/footers/footer-section-1.tsx +141 -0
- package/src/blocks/marketing/footers/footer-section-3.tsx +192 -0
- package/src/blocks/marketing/footers/footer-section-4.tsx +355 -0
- package/src/blocks/marketing/hero-sections/avatar-group.tsx +86 -0
- package/src/blocks/marketing/hero-sections/hero-section-1.tsx +135 -0
- package/src/blocks/marketing/logo-clouds/logo-cloud-1-logo-icon.tsx +52 -0
- package/src/blocks/marketing/logo-clouds/logo-cloud-1.tsx +56 -0
- package/src/blocks/marketing/navbars/navbar-1.tsx +267 -0
- package/src/blocks/marketing/navbars/navbar-2.tsx +351 -0
- package/src/blocks/marketing/navbars/navbar-3.tsx +303 -0
- package/src/blocks/marketing/navbars/navbar-4-account-menu.tsx +118 -0
- package/src/blocks/marketing/navbars/navbar-4-cart-sheet.tsx +248 -0
- package/src/blocks/marketing/navbars/navbar-4-like-button.tsx +177 -0
- package/src/blocks/marketing/navbars/navbar-4-mobile-nav.tsx +104 -0
- package/src/blocks/marketing/navbars/navbar-4-product-grid.tsx +219 -0
- package/src/blocks/marketing/navbars/navbar-4-search-bar.tsx +52 -0
- package/src/blocks/marketing/navbars/navbar-4.tsx +411 -0
- package/src/blocks/marketing/pricing/pricing-section-1.tsx +94 -0
- package/src/blocks/marketing/statistics/statistic-1.tsx +93 -0
- package/src/blocks/marketing/testimonials/testimonial-1.tsx +141 -0
- package/src/blocks/marketing/testimonials/testimonial-2.tsx +108 -0
- package/src/blocks/shared/reaction-toggle.tsx +145 -0
- package/src/hooks/use-mobile.ts +19 -0
- package/src/index.ts +200 -0
- package/src/lib/contracts.test.ts +32 -0
- package/src/lib/contracts.ts +235 -0
- package/src/lib/types/menu.ts +43 -0
- package/src/lib/types.ts +4 -0
- package/src/lib/utils.ts +10 -0
- package/src/ui/accordion.tsx +65 -0
- package/src/ui/avatar.tsx +108 -0
- package/src/ui/badge.tsx +47 -0
- package/src/ui/breadcrumb.tsx +108 -0
- package/src/ui/button-group.tsx +83 -0
- package/src/ui/button.tsx +63 -0
- package/src/ui/card.tsx +91 -0
- package/src/ui/carousel.tsx +241 -0
- package/src/ui/dialog.tsx +158 -0
- package/src/ui/drawer.tsx +134 -0
- package/src/ui/dropdown-menu.tsx +256 -0
- package/src/ui/empty.tsx +103 -0
- package/src/ui/field.tsx +248 -0
- package/src/ui/input-group.tsx +170 -0
- package/src/ui/input-otp.tsx +76 -0
- package/src/ui/input.tsx +20 -0
- package/src/ui/label.tsx +23 -0
- package/src/ui/navigation-menu.tsx +167 -0
- package/src/ui/pagination.tsx +127 -0
- package/src/ui/progress.tsx +30 -0
- package/src/ui/radio-group.tsx +44 -0
- package/src/ui/select.tsx +189 -0
- package/src/ui/separator.tsx +27 -0
- package/src/ui/sheet.tsx +142 -0
- package/src/ui/sidebar.tsx +726 -0
- package/src/ui/skeleton.tsx +13 -0
- package/src/ui/table.tsx +115 -0
- package/src/ui/tabs.tsx +90 -0
- package/src/ui/textarea.tsx +17 -0
- package/src/ui/toggle-group.tsx +83 -0
- package/src/ui/toggle.tsx +46 -0
- package/src/ui/tooltip.tsx +56 -0
- package/tsconfig.json +20 -0
- package/tsup.config.ts +16 -0
- package/vitest.config.ts +9 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,2408 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import * as react from 'react';
|
|
4
|
+
import { ReactNode, JSX } from 'react';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
import { Avatar as Avatar$1 } from 'radix-ui';
|
|
7
|
+
import { LucideIcon } from 'lucide-react';
|
|
8
|
+
import { StoreCategory } from './contracts.js';
|
|
9
|
+
export { AccountMenuItem, ButtonSpecProps, CanonMoney, CanonProduct, CardProduct, CartItem, NavCartItem, Navbar4SpecProps, PRODUCT_IMAGE_FALLBACK, ProductCard1SpecProps, Promotion, ShoppingCart4SpecProps, StoreContainer1SpecProps, StoreUser, UtilityLink, accountMenuItemSchema, buttonPropsSchema, cardProductSchema, cartItemSchema, navCartItemSchema, navbar4PropsSchema, paymentMethodSchema, productCard1PropsSchema, promotionSchema, shoppingCart4PropsSchema, storeCategorySchema, storeContainer1PropsSchema, storeUserSchema, utilityLinkSchema } from './contracts.js';
|
|
10
|
+
import { z } from 'zod';
|
|
11
|
+
import { PaymentMethod } from '@thorprovider/types';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Merge Tailwind CSS class names safely.
|
|
15
|
+
* Deduplicates conflicting utilities (e.g. `p-4` vs `p-2` → keeps last).
|
|
16
|
+
*/
|
|
17
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
18
|
+
|
|
19
|
+
interface CTA {
|
|
20
|
+
label: string;
|
|
21
|
+
href?: string;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
declare const badgeVariants: (props?: ({
|
|
25
|
+
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
|
|
26
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
27
|
+
declare function Badge({ className, variant, asChild, ...props }: react.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
28
|
+
asChild?: boolean;
|
|
29
|
+
}): react.JSX.Element;
|
|
30
|
+
|
|
31
|
+
declare const buttonVariants: (props?: ({
|
|
32
|
+
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
|
|
33
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
34
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
35
|
+
declare function Button({ className, variant, size, asChild, ...props }: react.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
36
|
+
asChild?: boolean;
|
|
37
|
+
}): react.JSX.Element;
|
|
38
|
+
|
|
39
|
+
declare function Avatar({ className, size, ...props }: react.ComponentProps<typeof Avatar$1.Root> & {
|
|
40
|
+
size?: "default" | "sm" | "lg";
|
|
41
|
+
}): react.JSX.Element;
|
|
42
|
+
declare function AvatarImage({ className, ...props }: react.ComponentProps<typeof Avatar$1.Image>): react.JSX.Element;
|
|
43
|
+
declare function AvatarFallback({ className, ...props }: react.ComponentProps<typeof Avatar$1.Fallback>): react.JSX.Element;
|
|
44
|
+
|
|
45
|
+
declare function Card({ className, ...props }: react.ComponentProps<"div">): react.JSX.Element;
|
|
46
|
+
declare function CardHeader({ className, ...props }: react.ComponentProps<"div">): react.JSX.Element;
|
|
47
|
+
declare function CardTitle({ className, ...props }: react.ComponentProps<"div">): react.JSX.Element;
|
|
48
|
+
declare function CardDescription({ className, ...props }: react.ComponentProps<"div">): react.JSX.Element;
|
|
49
|
+
declare function CardAction({ className, ...props }: react.ComponentProps<"div">): react.JSX.Element;
|
|
50
|
+
declare function CardContent({ className, ...props }: react.ComponentProps<"div">): react.JSX.Element;
|
|
51
|
+
declare function CardFooter({ className, ...props }: react.ComponentProps<"div">): react.JSX.Element;
|
|
52
|
+
|
|
53
|
+
interface NavLink$2 {
|
|
54
|
+
label: string;
|
|
55
|
+
href?: string;
|
|
56
|
+
}
|
|
57
|
+
interface Navbar1Props {
|
|
58
|
+
navLinks: NavLink$2[];
|
|
59
|
+
logoText: string;
|
|
60
|
+
logoHref?: string;
|
|
61
|
+
currentPath?: string;
|
|
62
|
+
signIn?: CTA;
|
|
63
|
+
cta?: CTA;
|
|
64
|
+
/** Number of items in the cart. When provided, a cart button with badge is shown. */
|
|
65
|
+
cartCount?: number;
|
|
66
|
+
/** Fired when the user opens the cart. */
|
|
67
|
+
onOpenCart?: () => void;
|
|
68
|
+
}
|
|
69
|
+
declare function Navbar1({ navLinks, logoText, logoHref, currentPath, signIn, cta, cartCount, onOpenCart, }: Navbar1Props): react.JSX.Element;
|
|
70
|
+
|
|
71
|
+
interface MenuItem$1 {
|
|
72
|
+
/** Icon rendered inside the item tile. */
|
|
73
|
+
icon: LucideIcon;
|
|
74
|
+
label: string;
|
|
75
|
+
description: string;
|
|
76
|
+
href: string;
|
|
77
|
+
}
|
|
78
|
+
interface MenuGroup {
|
|
79
|
+
trigger: string;
|
|
80
|
+
/** Two columns at `lg` when `items.length > 4`, single column otherwise. */
|
|
81
|
+
items: MenuItem$1[];
|
|
82
|
+
}
|
|
83
|
+
interface FeaturedLink {
|
|
84
|
+
eyebrow: string;
|
|
85
|
+
title: string;
|
|
86
|
+
description: string;
|
|
87
|
+
href: string;
|
|
88
|
+
linkLabel: string;
|
|
89
|
+
/** Featured image URL. */
|
|
90
|
+
image: string;
|
|
91
|
+
imageAlt: string;
|
|
92
|
+
}
|
|
93
|
+
interface NavLink$1 {
|
|
94
|
+
label: string;
|
|
95
|
+
href: string;
|
|
96
|
+
}
|
|
97
|
+
interface Navbar2Props {
|
|
98
|
+
/** Grouped menu entries rendered as flyout panels on desktop and accordions on mobile. */
|
|
99
|
+
menuGroups: MenuGroup[];
|
|
100
|
+
logoText: string;
|
|
101
|
+
logoHref?: string;
|
|
102
|
+
/** Simple top-level links rendered after the menu groups. */
|
|
103
|
+
plainLinks?: NavLink$1[];
|
|
104
|
+
/** Optional sign-in entry. Rendered as a link when `href` is set, otherwise as a button. */
|
|
105
|
+
signIn?: CTA;
|
|
106
|
+
/** Optional primary call to action. Rendered as a link when `href` is set, otherwise as a button. */
|
|
107
|
+
cta?: CTA;
|
|
108
|
+
/** Promo card shown on the right of wide flyout panels (groups with more than four items). */
|
|
109
|
+
featured?: FeaturedLink;
|
|
110
|
+
}
|
|
111
|
+
declare function Navbar2({ menuGroups, logoText, logoHref, plainLinks, signIn, cta, featured, }: Navbar2Props): react.JSX.Element;
|
|
112
|
+
|
|
113
|
+
interface NavLink {
|
|
114
|
+
label: string;
|
|
115
|
+
href?: string;
|
|
116
|
+
}
|
|
117
|
+
interface Navbar3Props {
|
|
118
|
+
navLinks: NavLink[];
|
|
119
|
+
/** Brand text shown next to the logo mark. */
|
|
120
|
+
logoText: string;
|
|
121
|
+
logoHref?: string;
|
|
122
|
+
/** Current path used to highlight the active nav link. */
|
|
123
|
+
currentPath?: string;
|
|
124
|
+
/** Sign-in action. Rendered as a link when `href` is set, otherwise as a button. */
|
|
125
|
+
signIn?: CTA;
|
|
126
|
+
/** Primary call-to-action. Rendered as a link when `href` is set, otherwise as a button. */
|
|
127
|
+
cta?: CTA;
|
|
128
|
+
/**
|
|
129
|
+
* When `true` (default), the header condenses into a floating rounded pill once scrolled.
|
|
130
|
+
* Set to `false` for a plain solid bar instead of the condensing pill.
|
|
131
|
+
*/
|
|
132
|
+
floatingPill?: boolean;
|
|
133
|
+
/** Fired when the sign-in button (no `href`) is clicked. */
|
|
134
|
+
onSignIn?: () => void;
|
|
135
|
+
/** Fired when the CTA button (no `href`) is clicked. */
|
|
136
|
+
onCtaClick?: () => void;
|
|
137
|
+
}
|
|
138
|
+
declare function Navbar3({ navLinks, logoText, logoHref, currentPath, signIn, cta, floatingPill, onSignIn, onCtaClick, }: Navbar3Props): react.JSX.Element;
|
|
139
|
+
|
|
140
|
+
interface StoreUser {
|
|
141
|
+
name: string;
|
|
142
|
+
email: string;
|
|
143
|
+
avatar: string;
|
|
144
|
+
initials: string;
|
|
145
|
+
}
|
|
146
|
+
interface AccountMenuItem {
|
|
147
|
+
label: string;
|
|
148
|
+
href: string;
|
|
149
|
+
description?: string;
|
|
150
|
+
icon?: 'orders' | 'wishlist' | 'addresses' | 'settings';
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
interface CartItem {
|
|
154
|
+
id: string;
|
|
155
|
+
name: string;
|
|
156
|
+
variant: string;
|
|
157
|
+
price: number;
|
|
158
|
+
qty: number;
|
|
159
|
+
image: string;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
interface UtilityLink {
|
|
163
|
+
label: string;
|
|
164
|
+
href: string;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
interface Navbar4Props {
|
|
168
|
+
storeCategories: StoreCategory[];
|
|
169
|
+
shippingNote: string;
|
|
170
|
+
utilityLinks: UtilityLink[];
|
|
171
|
+
logoText: string;
|
|
172
|
+
logoHref?: string;
|
|
173
|
+
/** When provided, a mobile-only "Account" link is appended to the utility links. */
|
|
174
|
+
accountHref?: string;
|
|
175
|
+
searchQuery?: string;
|
|
176
|
+
onSearchChange?: (value: string) => void;
|
|
177
|
+
items?: CartItem[];
|
|
178
|
+
onQtyChange?: (id: string, delta: number) => void;
|
|
179
|
+
onRemove?: (id: string) => void;
|
|
180
|
+
user?: StoreUser;
|
|
181
|
+
accountMenuItems?: AccountMenuItem[];
|
|
182
|
+
onHelp?: () => void;
|
|
183
|
+
onSignOut?: () => void;
|
|
184
|
+
onCheckout?: () => void;
|
|
185
|
+
onViewCart?: () => void;
|
|
186
|
+
}
|
|
187
|
+
declare function Navbar4({ storeCategories, shippingNote, utilityLinks, logoText, logoHref, accountHref, searchQuery: searchQueryProp, onSearchChange, items: itemsProp, onQtyChange: onQtyChangeProp, onRemove: onRemoveProp, user, accountMenuItems, onHelp, onSignOut, onCheckout, onViewCart, }: Navbar4Props): react.JSX.Element;
|
|
188
|
+
|
|
189
|
+
type Banner1Shape = 'bar' | 'pill';
|
|
190
|
+
interface Banner1Props {
|
|
191
|
+
/**
|
|
192
|
+
* 'bar' — full-width strip above the header (the default).
|
|
193
|
+
* 'pill' — floating rounded card pinned to the bottom of the viewport, with an avatar stack.
|
|
194
|
+
*/
|
|
195
|
+
shape?: Banner1Shape;
|
|
196
|
+
badge?: string;
|
|
197
|
+
message: string;
|
|
198
|
+
href: string;
|
|
199
|
+
linkLabel: string;
|
|
200
|
+
/** Used by the 'pill' shape only; decorative avatars of the announcement's authors. */
|
|
201
|
+
avatars?: string[];
|
|
202
|
+
/**
|
|
203
|
+
* 'bar' only. When true, the inner content spans the full width of its parent
|
|
204
|
+
* (skips the centered `max-w-7xl` container) so badge/message/CTA reach the edges.
|
|
205
|
+
*/
|
|
206
|
+
fullWidth?: boolean;
|
|
207
|
+
/** Fired when the user clicks the banner CTA. When provided, the CTA renders as a button instead of a link. */
|
|
208
|
+
onCtaClick?: () => void;
|
|
209
|
+
/** Fired when the user dismisses the banner. */
|
|
210
|
+
onDismiss?: () => void;
|
|
211
|
+
}
|
|
212
|
+
declare function Banner1({ shape, badge, message, href, linkLabel, avatars, fullWidth, onCtaClick, onDismiss, }: Banner1Props): react.JSX.Element | null;
|
|
213
|
+
|
|
214
|
+
interface AvatarItem {
|
|
215
|
+
id: string | number;
|
|
216
|
+
avatarUrl: string;
|
|
217
|
+
fallback: string;
|
|
218
|
+
alt?: string;
|
|
219
|
+
}
|
|
220
|
+
interface Rating {
|
|
221
|
+
value: number;
|
|
222
|
+
count: number;
|
|
223
|
+
}
|
|
224
|
+
interface HeroSection1Props {
|
|
225
|
+
title: string;
|
|
226
|
+
description: string;
|
|
227
|
+
badge?: string;
|
|
228
|
+
cta?: CTA;
|
|
229
|
+
reviewers?: AvatarItem[];
|
|
230
|
+
rating?: Rating;
|
|
231
|
+
trustedBy?: string;
|
|
232
|
+
image?: {
|
|
233
|
+
src: string;
|
|
234
|
+
alt: string;
|
|
235
|
+
};
|
|
236
|
+
}
|
|
237
|
+
declare function HeroSection1({ title, description, badge, cta, reviewers, rating, trustedBy, image, }: HeroSection1Props): react.JSX.Element;
|
|
238
|
+
|
|
239
|
+
interface CtaSection1Props {
|
|
240
|
+
badgeText?: string;
|
|
241
|
+
title?: string;
|
|
242
|
+
description?: string;
|
|
243
|
+
primaryCta?: CTA;
|
|
244
|
+
secondaryCta?: CTA;
|
|
245
|
+
onPrimaryClick?: () => void;
|
|
246
|
+
onSecondaryClick?: () => void;
|
|
247
|
+
}
|
|
248
|
+
declare function CtaSection1({ badgeText, title, description, primaryCta, secondaryCta, onPrimaryClick, onSecondaryClick, }: CtaSection1Props): react.JSX.Element;
|
|
249
|
+
|
|
250
|
+
interface Feature1Item {
|
|
251
|
+
id: string;
|
|
252
|
+
title: string;
|
|
253
|
+
description: string;
|
|
254
|
+
icon: LucideIcon;
|
|
255
|
+
}
|
|
256
|
+
interface Feature1Props {
|
|
257
|
+
items: Feature1Item[];
|
|
258
|
+
badge?: string;
|
|
259
|
+
title?: string;
|
|
260
|
+
description?: string;
|
|
261
|
+
learnMoreLabel?: string;
|
|
262
|
+
ctaLabel?: string;
|
|
263
|
+
onCtaClick?: () => void;
|
|
264
|
+
onLearnMore?: (item: Feature1Item) => void;
|
|
265
|
+
}
|
|
266
|
+
declare function Feature1({ items, badge, title, description, learnMoreLabel, ctaLabel, onCtaClick, onLearnMore, }: Feature1Props): react.JSX.Element;
|
|
267
|
+
|
|
268
|
+
interface Feature2Item {
|
|
269
|
+
id: string;
|
|
270
|
+
title: string;
|
|
271
|
+
description: string;
|
|
272
|
+
icon: LucideIcon;
|
|
273
|
+
}
|
|
274
|
+
interface Feature2Props {
|
|
275
|
+
items: Feature2Item[];
|
|
276
|
+
title?: string;
|
|
277
|
+
description?: string;
|
|
278
|
+
image?: {
|
|
279
|
+
src: string;
|
|
280
|
+
alt: string;
|
|
281
|
+
};
|
|
282
|
+
className?: string;
|
|
283
|
+
}
|
|
284
|
+
declare function Feature2({ items, title, description, image, className, }: Feature2Props): react.JSX.Element;
|
|
285
|
+
|
|
286
|
+
interface Testimonial1Item {
|
|
287
|
+
id: string;
|
|
288
|
+
name: string;
|
|
289
|
+
role: string;
|
|
290
|
+
avatar: string;
|
|
291
|
+
content: string;
|
|
292
|
+
rating: number;
|
|
293
|
+
}
|
|
294
|
+
interface Testimonial1Props {
|
|
295
|
+
items: Testimonial1Item[];
|
|
296
|
+
title?: string;
|
|
297
|
+
prevLabel?: string;
|
|
298
|
+
nextLabel?: string;
|
|
299
|
+
slideAriaLabel?: string;
|
|
300
|
+
}
|
|
301
|
+
declare function Testimonial1({ items, title, prevLabel, nextLabel, slideAriaLabel, }: Testimonial1Props): react.JSX.Element;
|
|
302
|
+
|
|
303
|
+
interface Testimonial2Item {
|
|
304
|
+
id: string;
|
|
305
|
+
name: string;
|
|
306
|
+
role: string;
|
|
307
|
+
avatar: string;
|
|
308
|
+
content: string;
|
|
309
|
+
}
|
|
310
|
+
interface Testimonial2Props {
|
|
311
|
+
items: Testimonial2Item[];
|
|
312
|
+
title?: string;
|
|
313
|
+
description?: string;
|
|
314
|
+
}
|
|
315
|
+
declare function Testimonial2({ items, title, description, }: Testimonial2Props): react.JSX.Element;
|
|
316
|
+
|
|
317
|
+
interface FaqItem {
|
|
318
|
+
value: string;
|
|
319
|
+
question: string;
|
|
320
|
+
answer: string;
|
|
321
|
+
}
|
|
322
|
+
interface FaqBlock1Props {
|
|
323
|
+
/** Preguntas y respuestas del bloque. Cada item necesita un `value` único. */
|
|
324
|
+
items: FaqItem[];
|
|
325
|
+
title?: string;
|
|
326
|
+
description?: string;
|
|
327
|
+
/** Permite abrir varios items a la vez (`'multiple'`) o solo uno (`'single'`). */
|
|
328
|
+
accordionType?: 'single' | 'multiple';
|
|
329
|
+
}
|
|
330
|
+
declare function FaqBlock1({ items, title, description, accordionType, }: FaqBlock1Props): react.JSX.Element;
|
|
331
|
+
|
|
332
|
+
interface PricingTier {
|
|
333
|
+
id: string;
|
|
334
|
+
name: string;
|
|
335
|
+
description: string;
|
|
336
|
+
/** Precio sin símbolo de moneda; el símbolo se pasa aparte en `currencySymbol`. */
|
|
337
|
+
price: string;
|
|
338
|
+
/** Frecuencia de facturación, p. ej. '/mes'. */
|
|
339
|
+
frequency: string;
|
|
340
|
+
features: string[];
|
|
341
|
+
popular?: boolean;
|
|
342
|
+
}
|
|
343
|
+
interface PricingSection1Props {
|
|
344
|
+
tiers: PricingTier[];
|
|
345
|
+
currencySymbol?: string;
|
|
346
|
+
sectionTitle?: string;
|
|
347
|
+
sectionLabel?: string;
|
|
348
|
+
popularBadgeLabel?: string;
|
|
349
|
+
getStartedLabel?: string;
|
|
350
|
+
onSelectTier?: (tier: PricingTier) => void;
|
|
351
|
+
}
|
|
352
|
+
declare function PricingSection1({ tiers, currencySymbol, sectionTitle, sectionLabel, popularBadgeLabel, getStartedLabel, onSelectTier, }: PricingSection1Props): react.JSX.Element;
|
|
353
|
+
|
|
354
|
+
interface LogoCloud1Platform {
|
|
355
|
+
name: string;
|
|
356
|
+
id: string;
|
|
357
|
+
}
|
|
358
|
+
interface LogoCloud1Props {
|
|
359
|
+
platforms: LogoCloud1Platform[];
|
|
360
|
+
title?: string;
|
|
361
|
+
description?: string;
|
|
362
|
+
moreLabel?: string;
|
|
363
|
+
}
|
|
364
|
+
declare function LogoCloud1({ platforms, title, description, moreLabel }: LogoCloud1Props): react.JSX.Element;
|
|
365
|
+
|
|
366
|
+
interface StatisticItem {
|
|
367
|
+
id: string;
|
|
368
|
+
title: string;
|
|
369
|
+
value: string;
|
|
370
|
+
description: string;
|
|
371
|
+
progress: number;
|
|
372
|
+
progressLabel: string;
|
|
373
|
+
icon: LucideIcon;
|
|
374
|
+
}
|
|
375
|
+
interface Statistic1Props {
|
|
376
|
+
items: StatisticItem[];
|
|
377
|
+
badge?: string;
|
|
378
|
+
title?: string;
|
|
379
|
+
description?: string;
|
|
380
|
+
}
|
|
381
|
+
declare function Statistic1({ items, badge, title, description }: Statistic1Props): react.JSX.Element;
|
|
382
|
+
|
|
383
|
+
interface FooterLink$1 {
|
|
384
|
+
label: string;
|
|
385
|
+
href?: string;
|
|
386
|
+
}
|
|
387
|
+
interface FooterLinkColumn$1 {
|
|
388
|
+
title: string;
|
|
389
|
+
links: FooterLink$1[];
|
|
390
|
+
}
|
|
391
|
+
interface FooterNewsletter {
|
|
392
|
+
placeholder?: string;
|
|
393
|
+
buttonLabel: string;
|
|
394
|
+
onSubmit?: (email: string) => void;
|
|
395
|
+
}
|
|
396
|
+
interface FooterSection1Props {
|
|
397
|
+
brandName: string;
|
|
398
|
+
brandDescription?: string;
|
|
399
|
+
linkColumns: FooterLinkColumn$1[];
|
|
400
|
+
newsletter?: FooterNewsletter;
|
|
401
|
+
}
|
|
402
|
+
declare function FooterSection1({ brandName, brandDescription, linkColumns, newsletter, }: FooterSection1Props): react.JSX.Element;
|
|
403
|
+
|
|
404
|
+
interface FooterLink {
|
|
405
|
+
label: string;
|
|
406
|
+
href?: string;
|
|
407
|
+
}
|
|
408
|
+
interface FooterLinkColumn {
|
|
409
|
+
title: string;
|
|
410
|
+
links: FooterLink[];
|
|
411
|
+
}
|
|
412
|
+
interface SocialLink {
|
|
413
|
+
label: string;
|
|
414
|
+
href?: string;
|
|
415
|
+
icon: LucideIcon;
|
|
416
|
+
}
|
|
417
|
+
interface FooterSection3Props {
|
|
418
|
+
/** Texto del logo (identidad del bloque). Requerido. */
|
|
419
|
+
logoText: string;
|
|
420
|
+
/** Descripción corta de la marca. Requerida. */
|
|
421
|
+
description: string;
|
|
422
|
+
/** Columnas de enlaces (máximo recomendado 4). Requerido. */
|
|
423
|
+
linkColumns: FooterLinkColumn[];
|
|
424
|
+
/** Enlaces legales de la barra inferior. Por defecto []. */
|
|
425
|
+
legalLinks?: FooterLink[];
|
|
426
|
+
/** Redes sociales (cada una con su icono lucide). Por defecto []. */
|
|
427
|
+
socialLinks?: SocialLink[];
|
|
428
|
+
/** Título del bloque newsletter. Por defecto 'Suscríbete a nuestro boletín'. */
|
|
429
|
+
newsletterTitle?: string;
|
|
430
|
+
/** Placeholder del input de email. Por defecto 'Tu correo electrónico'. */
|
|
431
|
+
newsletterPlaceholder?: string;
|
|
432
|
+
/** aria-label del botón de envío (icon-only). Por defecto 'Suscribirse'. */
|
|
433
|
+
newsletterLabel?: string;
|
|
434
|
+
/** Callback al enviar el formulario newsletter. Recibe el email. */
|
|
435
|
+
onSubscribe?: (email: string) => void;
|
|
436
|
+
}
|
|
437
|
+
declare function FooterSection3({ logoText, description, linkColumns, legalLinks, socialLinks, newsletterTitle, newsletterPlaceholder, newsletterLabel, onSubscribe, }: FooterSection3Props): react.JSX.Element;
|
|
438
|
+
|
|
439
|
+
type FooterSection4SocialIcon = 'facebook' | 'twitter' | 'instagram';
|
|
440
|
+
interface FooterSection4Link {
|
|
441
|
+
label: string;
|
|
442
|
+
href?: string;
|
|
443
|
+
}
|
|
444
|
+
interface FooterSection4LinkColumn {
|
|
445
|
+
title: string;
|
|
446
|
+
links: FooterSection4Link[];
|
|
447
|
+
}
|
|
448
|
+
interface FooterSection4Contact {
|
|
449
|
+
/** Título de la columna de contacto. Requerido. */
|
|
450
|
+
heading: string;
|
|
451
|
+
/** Dirección del negocio. Por defecto undefined. */
|
|
452
|
+
address?: string;
|
|
453
|
+
/** href del enlace de dirección. Por defecto undefined. */
|
|
454
|
+
addressHref?: string;
|
|
455
|
+
/** Teléfono de contacto. Por defecto undefined. */
|
|
456
|
+
phone?: string;
|
|
457
|
+
/** href del enlace de teléfono (p. ej. tel:). Por defecto undefined. */
|
|
458
|
+
phoneHref?: string;
|
|
459
|
+
/** Email de contacto. Por defecto undefined. */
|
|
460
|
+
email?: string;
|
|
461
|
+
/** href del enlace de email (p. ej. mailto:). Por defecto undefined. */
|
|
462
|
+
emailHref?: string;
|
|
463
|
+
}
|
|
464
|
+
interface FooterSection4SocialLink {
|
|
465
|
+
label: string;
|
|
466
|
+
href?: string;
|
|
467
|
+
icon: FooterSection4SocialIcon;
|
|
468
|
+
}
|
|
469
|
+
interface FooterSection4Props {
|
|
470
|
+
/** Nombre de la marca mostrado junto al logo. Requerido. */
|
|
471
|
+
brandName: string;
|
|
472
|
+
/** Descripción corta de la marca bajo el logo. Requerida. */
|
|
473
|
+
tagline: string;
|
|
474
|
+
/** Placeholder del input de email del newsletter. Por defecto 'Tu correo electrónico'. */
|
|
475
|
+
newsletterPlaceholder?: string;
|
|
476
|
+
/** Texto del botón de suscripción. Por defecto 'Suscribirse'. */
|
|
477
|
+
newsletterSubmitLabel?: string;
|
|
478
|
+
/** Datos de la columna de contacto (dirección, teléfono, email). Requerido. */
|
|
479
|
+
contact: FooterSection4Contact;
|
|
480
|
+
/** Columnas de enlaces (Quick Links, Resources, Legal...). Requerido. */
|
|
481
|
+
linkColumns: FooterSection4LinkColumn[];
|
|
482
|
+
/** Texto de copyright de la barra inferior (incluye año). Requerido. */
|
|
483
|
+
copyright: string;
|
|
484
|
+
/** Redes sociales con su icono serializable por nombre. Por defecto []. */
|
|
485
|
+
socialLinks?: FooterSection4SocialLink[];
|
|
486
|
+
/** Logo personalizado; si se omite se usa el SVG interno del bloque. Por defecto undefined. */
|
|
487
|
+
logo?: ReactNode;
|
|
488
|
+
/** Callback al enviar el formulario newsletter. Recibe el email. */
|
|
489
|
+
onNewsletterSubmit?: (email: string) => void;
|
|
490
|
+
/** Callback al hacer clic en un enlace de columna o contacto. Recibe el enlace. */
|
|
491
|
+
onLinkClick?: (link: FooterSection4Link) => void;
|
|
492
|
+
/** Callback al hacer clic en una red social. Recibe el label. */
|
|
493
|
+
onSocialClick?: (label: string) => void;
|
|
494
|
+
}
|
|
495
|
+
declare function FooterSection4({ brandName, tagline, newsletterPlaceholder, newsletterSubmitLabel, contact, linkColumns, copyright, socialLinks, logo, onNewsletterSubmit, onLinkClick, onSocialClick, }: FooterSection4Props): react.JSX.Element;
|
|
496
|
+
|
|
497
|
+
interface Product {
|
|
498
|
+
id: string | number;
|
|
499
|
+
title: string;
|
|
500
|
+
price: number;
|
|
501
|
+
originalPrice?: number;
|
|
502
|
+
image: string;
|
|
503
|
+
badge?: string;
|
|
504
|
+
}
|
|
505
|
+
interface ProductCard1Props {
|
|
506
|
+
products: Product[];
|
|
507
|
+
heading?: string;
|
|
508
|
+
maxItems?: number;
|
|
509
|
+
onAddToCart?: (product: Product) => void;
|
|
510
|
+
onProductClick?: (product: Product) => void;
|
|
511
|
+
addToCartLabel?: string;
|
|
512
|
+
}
|
|
513
|
+
declare function ProductCard1({ products, heading, maxItems, onAddToCart, onProductClick, addToCartLabel, }: ProductCard1Props): react.JSX.Element;
|
|
514
|
+
|
|
515
|
+
interface ProductCard2Product {
|
|
516
|
+
id: string | number;
|
|
517
|
+
title: string;
|
|
518
|
+
image: string;
|
|
519
|
+
price: number;
|
|
520
|
+
rating: number;
|
|
521
|
+
}
|
|
522
|
+
interface ProductCard2Props {
|
|
523
|
+
products: ProductCard2Product[];
|
|
524
|
+
heading?: string;
|
|
525
|
+
description?: string;
|
|
526
|
+
}
|
|
527
|
+
declare function ProductCard2({ products, heading, description }: ProductCard2Props): react.JSX.Element;
|
|
528
|
+
|
|
529
|
+
interface ProductCard3Product {
|
|
530
|
+
id: string | number;
|
|
531
|
+
title: string;
|
|
532
|
+
subtitle: string;
|
|
533
|
+
image: string;
|
|
534
|
+
price: number;
|
|
535
|
+
originalPrice: number;
|
|
536
|
+
rating: number;
|
|
537
|
+
reviewCount: number;
|
|
538
|
+
discountPercentage: number;
|
|
539
|
+
isLowStock?: boolean;
|
|
540
|
+
badge?: {
|
|
541
|
+
text: string;
|
|
542
|
+
variant: 'trending' | 'bestseller' | 'new';
|
|
543
|
+
};
|
|
544
|
+
}
|
|
545
|
+
interface ProductCard3Props {
|
|
546
|
+
products: ProductCard3Product[];
|
|
547
|
+
currencySymbol?: string;
|
|
548
|
+
onViewSimilar?: (product: ProductCard3Product) => void;
|
|
549
|
+
onToggleWishlist?: (product: ProductCard3Product) => void;
|
|
550
|
+
onProductClick?: (product: ProductCard3Product) => void;
|
|
551
|
+
}
|
|
552
|
+
declare function ProductCard3({ products, currencySymbol, onViewSimilar, onToggleWishlist, onProductClick, }: ProductCard3Props): JSX.Element;
|
|
553
|
+
|
|
554
|
+
interface ProductCard5Product {
|
|
555
|
+
id: string;
|
|
556
|
+
name: string;
|
|
557
|
+
category: string;
|
|
558
|
+
price: number;
|
|
559
|
+
rating: number;
|
|
560
|
+
reviews: number;
|
|
561
|
+
image: string;
|
|
562
|
+
stock: string;
|
|
563
|
+
specifications: string;
|
|
564
|
+
brand: string;
|
|
565
|
+
}
|
|
566
|
+
interface ProductCard5Props {
|
|
567
|
+
products: ProductCard5Product[];
|
|
568
|
+
onToggleWishlist?: (product: ProductCard5Product) => void;
|
|
569
|
+
onAddToCart?: (product: ProductCard5Product) => void;
|
|
570
|
+
onQuickView?: (product: ProductCard5Product) => void;
|
|
571
|
+
onCompare?: (products: ProductCard5Product[]) => void;
|
|
572
|
+
onExport?: (products: ProductCard5Product[]) => void;
|
|
573
|
+
}
|
|
574
|
+
declare function ProductCard5({ products, onToggleWishlist, onAddToCart, onQuickView, onCompare, onExport, }: ProductCard5Props): react.JSX.Element;
|
|
575
|
+
|
|
576
|
+
interface ProductOverview1ProductImage {
|
|
577
|
+
id: number;
|
|
578
|
+
src: string;
|
|
579
|
+
alt: string;
|
|
580
|
+
}
|
|
581
|
+
interface ProductOverview1ProductColor {
|
|
582
|
+
name: string;
|
|
583
|
+
value: string;
|
|
584
|
+
}
|
|
585
|
+
interface ProductOverview1Product {
|
|
586
|
+
id: string;
|
|
587
|
+
brand: string;
|
|
588
|
+
name: string;
|
|
589
|
+
description: string;
|
|
590
|
+
price: number;
|
|
591
|
+
currency: string;
|
|
592
|
+
rating: number;
|
|
593
|
+
images: ProductOverview1ProductImage[];
|
|
594
|
+
sizes: number[];
|
|
595
|
+
colors: ProductOverview1ProductColor[];
|
|
596
|
+
}
|
|
597
|
+
interface ProductOverview1Props {
|
|
598
|
+
product: ProductOverview1Product;
|
|
599
|
+
sizesLabel?: string;
|
|
600
|
+
colorLabel?: string;
|
|
601
|
+
reviewsLabel?: string;
|
|
602
|
+
addToCartLabel?: string;
|
|
603
|
+
removeFromWishlistLabel?: string;
|
|
604
|
+
addToWishlistLabel?: string;
|
|
605
|
+
onAddToCart?: (product: ProductOverview1Product) => void;
|
|
606
|
+
onToggleWishlist?: (product: ProductOverview1Product, isWishlisted: boolean) => void;
|
|
607
|
+
}
|
|
608
|
+
declare function ProductOverview1({ product, sizesLabel, colorLabel, reviewsLabel, addToCartLabel, removeFromWishlistLabel, addToWishlistLabel, onAddToCart, onToggleWishlist, }: ProductOverview1Props): react.JSX.Element;
|
|
609
|
+
|
|
610
|
+
interface ProductOverview2ProductImage {
|
|
611
|
+
src: string;
|
|
612
|
+
alt: string;
|
|
613
|
+
}
|
|
614
|
+
interface ProductOverview2ProductColor {
|
|
615
|
+
name: string;
|
|
616
|
+
value: string;
|
|
617
|
+
}
|
|
618
|
+
interface ProductOverview2ProductSize {
|
|
619
|
+
eu: number;
|
|
620
|
+
uk: number;
|
|
621
|
+
us: number;
|
|
622
|
+
}
|
|
623
|
+
interface ProductOverview2Product {
|
|
624
|
+
id: string;
|
|
625
|
+
brand: string;
|
|
626
|
+
name: string;
|
|
627
|
+
sku: string;
|
|
628
|
+
price: number;
|
|
629
|
+
currency: string;
|
|
630
|
+
rating: number;
|
|
631
|
+
reviews: number;
|
|
632
|
+
images: ProductOverview2ProductImage[];
|
|
633
|
+
sizes: ProductOverview2ProductSize[];
|
|
634
|
+
colors: ProductOverview2ProductColor[];
|
|
635
|
+
}
|
|
636
|
+
interface ProductOverview2Props {
|
|
637
|
+
product: ProductOverview2Product;
|
|
638
|
+
sizesLabel?: string;
|
|
639
|
+
colorLabel?: string;
|
|
640
|
+
reviewsLabel?: string;
|
|
641
|
+
addToCartLabel?: string;
|
|
642
|
+
removeFromWishlistLabel?: string;
|
|
643
|
+
addToWishlistLabel?: string;
|
|
644
|
+
sizeGuideLabel?: string;
|
|
645
|
+
freeDeliveryLabel?: string;
|
|
646
|
+
onAddToCart?: (product: ProductOverview2Product) => void;
|
|
647
|
+
onToggleWishlist?: (product: ProductOverview2Product, isWishlisted: boolean) => void;
|
|
648
|
+
}
|
|
649
|
+
declare function ProductOverview2({ product, sizesLabel, colorLabel, reviewsLabel, addToCartLabel, removeFromWishlistLabel, addToWishlistLabel, sizeGuideLabel, freeDeliveryLabel, onAddToCart, onToggleWishlist, }: ProductOverview2Props): react.JSX.Element;
|
|
650
|
+
|
|
651
|
+
interface ProductOverview5Review {
|
|
652
|
+
id: number;
|
|
653
|
+
author: string;
|
|
654
|
+
rating: number;
|
|
655
|
+
comment: string;
|
|
656
|
+
date: string;
|
|
657
|
+
helpful: number;
|
|
658
|
+
}
|
|
659
|
+
interface ProductOverview5Product {
|
|
660
|
+
name: string;
|
|
661
|
+
price: number;
|
|
662
|
+
originalPrice: null | number;
|
|
663
|
+
rating: number;
|
|
664
|
+
reviewCount: number;
|
|
665
|
+
sku: string;
|
|
666
|
+
mainImages: string[];
|
|
667
|
+
galleryImages: string[];
|
|
668
|
+
description: string;
|
|
669
|
+
features: string[];
|
|
670
|
+
specifications: Record<string, string>;
|
|
671
|
+
userReviews: ProductOverview5Review[];
|
|
672
|
+
}
|
|
673
|
+
interface ProductOverview5Props {
|
|
674
|
+
product: ProductOverview5Product;
|
|
675
|
+
badgeLabel?: string;
|
|
676
|
+
availabilityLabel?: string;
|
|
677
|
+
currencySymbol?: string;
|
|
678
|
+
skuLabel?: string;
|
|
679
|
+
overviewLabel?: string;
|
|
680
|
+
specsLabel?: string;
|
|
681
|
+
featuresLabel?: string;
|
|
682
|
+
specificationsLabel?: string;
|
|
683
|
+
reviewsLabel?: string;
|
|
684
|
+
galleryLabel?: string;
|
|
685
|
+
saveLabel?: string;
|
|
686
|
+
savedLabel?: string;
|
|
687
|
+
shareLabel?: string;
|
|
688
|
+
addToCartLabel?: string;
|
|
689
|
+
basedOnReviewsLabel?: string;
|
|
690
|
+
foundHelpfulLabel?: string;
|
|
691
|
+
ofCounterLabel?: string;
|
|
692
|
+
photosLabel?: string;
|
|
693
|
+
onAddToCart?: (product: ProductOverview5Product) => void;
|
|
694
|
+
onToggleWishlist?: (product: ProductOverview5Product, isWishlisted: boolean) => void;
|
|
695
|
+
onShare?: (product: ProductOverview5Product) => void;
|
|
696
|
+
}
|
|
697
|
+
declare function ProductOverview5({ product, badgeLabel, availabilityLabel, currencySymbol, skuLabel, overviewLabel, specsLabel, featuresLabel, specificationsLabel, reviewsLabel, galleryLabel, saveLabel, savedLabel, shareLabel, addToCartLabel, basedOnReviewsLabel, foundHelpfulLabel, ofCounterLabel, photosLabel, onAddToCart, onToggleWishlist, onShare, }: ProductOverview5Props): react.JSX.Element;
|
|
698
|
+
|
|
699
|
+
interface QuickViewOption {
|
|
700
|
+
value: string;
|
|
701
|
+
label: string;
|
|
702
|
+
available: boolean;
|
|
703
|
+
/**
|
|
704
|
+
* A literal colour for a swatch, when the option is one.
|
|
705
|
+
*
|
|
706
|
+
* Finish colours are product data, not theme data: brass has to stay brass whatever preset the
|
|
707
|
+
* customizer is on. It is the one place in the block that is not a token, and the option's
|
|
708
|
+
* label always carries the same information in words.
|
|
709
|
+
*/
|
|
710
|
+
swatch?: string;
|
|
711
|
+
}
|
|
712
|
+
interface QuickViewVariant {
|
|
713
|
+
key: string;
|
|
714
|
+
label: string;
|
|
715
|
+
/**
|
|
716
|
+
* Which option a product opens on.
|
|
717
|
+
*
|
|
718
|
+
* Not simply the first available one: sizes are listed smallest first, and the sofa is sold as
|
|
719
|
+
* the size its name promises, so the panel would otherwise open on an option that disagrees
|
|
720
|
+
* with the card the reader just pressed.
|
|
721
|
+
*/
|
|
722
|
+
defaultValue?: string;
|
|
723
|
+
options: QuickViewOption[];
|
|
724
|
+
}
|
|
725
|
+
interface QuickViewProduct {
|
|
726
|
+
id: string;
|
|
727
|
+
name: string;
|
|
728
|
+
/** The one line that says what it is, under the name on the card and in the panel. */
|
|
729
|
+
tagline: string;
|
|
730
|
+
category: string;
|
|
731
|
+
price: number;
|
|
732
|
+
compareAt?: number;
|
|
733
|
+
rating: number;
|
|
734
|
+
reviewCount: number;
|
|
735
|
+
/** In stock, and low enough to be worth saying. Omitted when there is plenty. */
|
|
736
|
+
unitsLeft?: number;
|
|
737
|
+
image: string;
|
|
738
|
+
imageAlt: string;
|
|
739
|
+
description: string;
|
|
740
|
+
/** The panel shows these as a list, not as a specification table. */
|
|
741
|
+
details: string[];
|
|
742
|
+
variants: QuickViewVariant[];
|
|
743
|
+
/** Where the full product page lives. The panel only links to it when set. */
|
|
744
|
+
href?: string;
|
|
745
|
+
}
|
|
746
|
+
interface ProductQuickViewProps {
|
|
747
|
+
products: QuickViewProduct[];
|
|
748
|
+
eyebrow?: string;
|
|
749
|
+
heading?: string;
|
|
750
|
+
lede?: string;
|
|
751
|
+
/**
|
|
752
|
+
* Called with the chosen options when the reader adds to cart. When absent the button still
|
|
753
|
+
* shows and keeps its added-to-cart confirmation; it just has nowhere to report to.
|
|
754
|
+
*/
|
|
755
|
+
onAddToCart?: (product: QuickViewProduct, quantity: number, selection: Record<string, string>) => void;
|
|
756
|
+
}
|
|
757
|
+
/**
|
|
758
|
+
* A product grid whose point is the panel that opens over it.
|
|
759
|
+
*
|
|
760
|
+
* One dialog serves the whole catalogue rather than one per card: the panel steps between
|
|
761
|
+
* products from inside, the card it is showing stays lit underneath, and closing puts the reader
|
|
762
|
+
* back exactly where the grid says they are.
|
|
763
|
+
*/
|
|
764
|
+
declare function ProductQuickView({ products, eyebrow, heading, lede, onAddToCart, }: ProductQuickViewProps): react.JSX.Element;
|
|
765
|
+
|
|
766
|
+
interface ReviewRating1ReviewFormProps {
|
|
767
|
+
title: string;
|
|
768
|
+
description?: string;
|
|
769
|
+
nameLabel: string;
|
|
770
|
+
emailLabel: string;
|
|
771
|
+
reviewLabel: string;
|
|
772
|
+
namePlaceholder: string;
|
|
773
|
+
emailPlaceholder: string;
|
|
774
|
+
reviewPlaceholder: string;
|
|
775
|
+
submitButtonText: string;
|
|
776
|
+
submittingButtonText: string;
|
|
777
|
+
}
|
|
778
|
+
interface ReviewRating1ReviewFormData {
|
|
779
|
+
name: string;
|
|
780
|
+
email: string;
|
|
781
|
+
review: string;
|
|
782
|
+
rating: number;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
interface ReviewRating1Review {
|
|
786
|
+
id: number;
|
|
787
|
+
userName: string;
|
|
788
|
+
userAvatar?: string;
|
|
789
|
+
date: string;
|
|
790
|
+
rating: number;
|
|
791
|
+
content: string;
|
|
792
|
+
likes?: number;
|
|
793
|
+
comments?: number;
|
|
794
|
+
}
|
|
795
|
+
interface ReviewRating1Props {
|
|
796
|
+
pageTitle: string;
|
|
797
|
+
pageDescription?: string;
|
|
798
|
+
reviews: ReviewRating1Review[];
|
|
799
|
+
form?: ReviewRating1ReviewFormProps;
|
|
800
|
+
reviewsPerPage?: number;
|
|
801
|
+
onToggleReviewLike?: (review: ReviewRating1Review, liked: boolean) => void;
|
|
802
|
+
onSubmitReview?: (data: ReviewRating1ReviewFormData) => void;
|
|
803
|
+
}
|
|
804
|
+
declare function ReviewRating1({ pageTitle, pageDescription, reviews, form, reviewsPerPage, onToggleReviewLike, onSubmitReview, }: ReviewRating1Props): react.JSX.Element;
|
|
805
|
+
|
|
806
|
+
interface Review {
|
|
807
|
+
id: string;
|
|
808
|
+
userName: string;
|
|
809
|
+
userAvatar?: string;
|
|
810
|
+
date: string;
|
|
811
|
+
rating: number;
|
|
812
|
+
content: string;
|
|
813
|
+
likes?: number;
|
|
814
|
+
comments?: number;
|
|
815
|
+
}
|
|
816
|
+
interface ReviewRating2Props {
|
|
817
|
+
reviews: Review[];
|
|
818
|
+
pageTitle?: string;
|
|
819
|
+
pageDescription?: string;
|
|
820
|
+
averageRating?: number;
|
|
821
|
+
totalReviews?: number;
|
|
822
|
+
ratingDistribution?: Record<string, number>;
|
|
823
|
+
basedOnLabel?: string;
|
|
824
|
+
likesLabel?: string;
|
|
825
|
+
commentsLabel?: string;
|
|
826
|
+
onLike?: (review: Review) => void;
|
|
827
|
+
onComment?: (review: Review) => void;
|
|
828
|
+
}
|
|
829
|
+
/**
|
|
830
|
+
* ReviewRating2 — resumen de valoración (media, estrellas y distribución de
|
|
831
|
+
* notas) junto a un carrusel de reseñas con acciones de "me gusta" y
|
|
832
|
+
* comentarios. 100% prop-driven: ningún contenido demo embebido.
|
|
833
|
+
*/
|
|
834
|
+
declare function ReviewRating2({ reviews, pageTitle, pageDescription, averageRating, totalReviews, ratingDistribution, basedOnLabel, likesLabel, commentsLabel, onLike, onComment, }: ReviewRating2Props): react.JSX.Element;
|
|
835
|
+
|
|
836
|
+
type ProductCategory1CategoryIcon = 'Smartphone' | 'BatteryCharging' | 'Wrench' | 'Camera' | 'Cable' | 'ShieldCheck' | 'Sparkles' | 'Lightbulb';
|
|
837
|
+
interface ProductCategory1Category {
|
|
838
|
+
id: string;
|
|
839
|
+
name: string;
|
|
840
|
+
subtitle: string;
|
|
841
|
+
icon: ProductCategory1CategoryIcon;
|
|
842
|
+
}
|
|
843
|
+
interface ProductCategory1Props {
|
|
844
|
+
badge?: string;
|
|
845
|
+
title: string;
|
|
846
|
+
description?: string;
|
|
847
|
+
cta?: CTA;
|
|
848
|
+
categories: ProductCategory1Category[];
|
|
849
|
+
className?: string;
|
|
850
|
+
}
|
|
851
|
+
declare function ProductCategory1({ badge, title, description, cta, categories, className, }: ProductCategory1Props): react.JSX.Element;
|
|
852
|
+
|
|
853
|
+
interface ProductCategory2Category {
|
|
854
|
+
id: string;
|
|
855
|
+
handle?: string;
|
|
856
|
+
name: string;
|
|
857
|
+
description: string;
|
|
858
|
+
itemCount: number;
|
|
859
|
+
image: string;
|
|
860
|
+
trending: boolean;
|
|
861
|
+
}
|
|
862
|
+
interface ProductCategory2Props {
|
|
863
|
+
title?: string;
|
|
864
|
+
description?: string;
|
|
865
|
+
categories: ProductCategory2Category[];
|
|
866
|
+
cta?: CTA;
|
|
867
|
+
onBrowse?: (category: ProductCategory2Category) => void;
|
|
868
|
+
}
|
|
869
|
+
declare function ProductCategory2({ title, description, categories, cta, onBrowse, }: ProductCategory2Props): react.JSX.Element;
|
|
870
|
+
|
|
871
|
+
interface ProductCategory4Category {
|
|
872
|
+
id: string;
|
|
873
|
+
title: string;
|
|
874
|
+
description: string;
|
|
875
|
+
icon: LucideIcon;
|
|
876
|
+
customers: string;
|
|
877
|
+
products: number;
|
|
878
|
+
avatarImages?: string[];
|
|
879
|
+
}
|
|
880
|
+
interface ProductCategory4Props {
|
|
881
|
+
title?: string;
|
|
882
|
+
description?: string;
|
|
883
|
+
categories: ProductCategory4Category[];
|
|
884
|
+
productsLabel?: string;
|
|
885
|
+
customersLabel?: string;
|
|
886
|
+
onCategoryClick?: (category: ProductCategory4Category) => void;
|
|
887
|
+
}
|
|
888
|
+
declare function ProductCategory4({ title, description, categories, productsLabel, customersLabel, onCategoryClick, }: ProductCategory4Props): react.JSX.Element;
|
|
889
|
+
|
|
890
|
+
type CategoryIcon$1 = 'electronics' | 'fashion' | 'home' | 'sports' | 'books' | 'beauty' | 'automotive' | 'food' | 'gaming' | 'baby' | 'gifts' | 'tools';
|
|
891
|
+
interface ProductCategory5Category {
|
|
892
|
+
id: string;
|
|
893
|
+
name: string;
|
|
894
|
+
icon: CategoryIcon$1;
|
|
895
|
+
description: string;
|
|
896
|
+
itemCount: number;
|
|
897
|
+
subcategories: string[];
|
|
898
|
+
featured?: boolean;
|
|
899
|
+
}
|
|
900
|
+
interface ProductCategory5Props {
|
|
901
|
+
title?: string;
|
|
902
|
+
description?: string;
|
|
903
|
+
categories: ProductCategory5Category[];
|
|
904
|
+
searchPlaceholder?: string;
|
|
905
|
+
productsLabel?: string;
|
|
906
|
+
featuredLabel?: string;
|
|
907
|
+
browseLabel?: string;
|
|
908
|
+
viewAllLabel?: string;
|
|
909
|
+
notFoundLabel?: string;
|
|
910
|
+
onBrowse?: (category: ProductCategory5Category) => void;
|
|
911
|
+
onViewAll?: () => void;
|
|
912
|
+
}
|
|
913
|
+
declare function ProductCategory5({ title, description, categories, searchPlaceholder, productsLabel, featuredLabel, browseLabel, viewAllLabel, notFoundLabel, onBrowse, onViewAll, }: ProductCategory5Props): react.JSX.Element;
|
|
914
|
+
|
|
915
|
+
/**
|
|
916
|
+
* Canonical navigation types: recursive menu item and collection item.
|
|
917
|
+
*
|
|
918
|
+
* Ported from the legacy `@thorprovider/components` navigation library
|
|
919
|
+
* (source: branch `feat/storefronts`) into the blocks catalog so any
|
|
920
|
+
* consumer can feed a multi-level category tree to the navigation blocks.
|
|
921
|
+
*/
|
|
922
|
+
declare const menuItemSchema: z.ZodType<{
|
|
923
|
+
id: string;
|
|
924
|
+
label: string;
|
|
925
|
+
icon?: string;
|
|
926
|
+
image?: string;
|
|
927
|
+
href?: string;
|
|
928
|
+
badge?: string;
|
|
929
|
+
featured?: boolean;
|
|
930
|
+
children?: MenuItem[];
|
|
931
|
+
}>;
|
|
932
|
+
type MenuItem = z.infer<typeof menuItemSchema>;
|
|
933
|
+
declare const collectionItemSchema: z.ZodObject<{
|
|
934
|
+
id: z.ZodString;
|
|
935
|
+
label: z.ZodString;
|
|
936
|
+
description: z.ZodOptional<z.ZodString>;
|
|
937
|
+
image: z.ZodOptional<z.ZodString>;
|
|
938
|
+
href: z.ZodOptional<z.ZodString>;
|
|
939
|
+
}, "strip", z.ZodTypeAny, {
|
|
940
|
+
label: string;
|
|
941
|
+
id: string;
|
|
942
|
+
image?: string | undefined;
|
|
943
|
+
href?: string | undefined;
|
|
944
|
+
description?: string | undefined;
|
|
945
|
+
}, {
|
|
946
|
+
label: string;
|
|
947
|
+
id: string;
|
|
948
|
+
image?: string | undefined;
|
|
949
|
+
href?: string | undefined;
|
|
950
|
+
description?: string | undefined;
|
|
951
|
+
}>;
|
|
952
|
+
type CollectionItem = z.infer<typeof collectionItemSchema>;
|
|
953
|
+
|
|
954
|
+
/**
|
|
955
|
+
* Three-level category flyout: L1 categories, L2 subcategories, L3 sub-sub
|
|
956
|
+
* categories, plus a right panel with a featured image and collection links.
|
|
957
|
+
*
|
|
958
|
+
* Framework-agnostic and prop-driven: plain anchors replace router links,
|
|
959
|
+
* `loading="lazy"` images replace next/image, and Spanish copy/hrefs are
|
|
960
|
+
* optional props with ES defaults. `onNavigate` lets the tenant close the
|
|
961
|
+
* flyout on navigation; `collectionsHref` controls the "view all" link
|
|
962
|
+
* (pass `''` to hide it).
|
|
963
|
+
*
|
|
964
|
+
* Ported from the legacy `@thorprovider/components` navigation library
|
|
965
|
+
* (source: branch `feat/storefronts`).
|
|
966
|
+
*/
|
|
967
|
+
declare const megaMenuPropsSchema: z.ZodObject<{
|
|
968
|
+
categories: z.ZodArray<z.ZodType<{
|
|
969
|
+
id: string;
|
|
970
|
+
label: string;
|
|
971
|
+
icon?: string;
|
|
972
|
+
image?: string;
|
|
973
|
+
href?: string;
|
|
974
|
+
badge?: string;
|
|
975
|
+
featured?: boolean;
|
|
976
|
+
children?: MenuItem[];
|
|
977
|
+
}, z.ZodTypeDef, {
|
|
978
|
+
id: string;
|
|
979
|
+
label: string;
|
|
980
|
+
icon?: string;
|
|
981
|
+
image?: string;
|
|
982
|
+
href?: string;
|
|
983
|
+
badge?: string;
|
|
984
|
+
featured?: boolean;
|
|
985
|
+
children?: MenuItem[];
|
|
986
|
+
}>, "many">;
|
|
987
|
+
collections: z.ZodArray<z.ZodObject<{
|
|
988
|
+
id: z.ZodString;
|
|
989
|
+
label: z.ZodString;
|
|
990
|
+
description: z.ZodOptional<z.ZodString>;
|
|
991
|
+
image: z.ZodOptional<z.ZodString>;
|
|
992
|
+
href: z.ZodOptional<z.ZodString>;
|
|
993
|
+
}, "strip", z.ZodTypeAny, {
|
|
994
|
+
label: string;
|
|
995
|
+
id: string;
|
|
996
|
+
image?: string | undefined;
|
|
997
|
+
href?: string | undefined;
|
|
998
|
+
description?: string | undefined;
|
|
999
|
+
}, {
|
|
1000
|
+
label: string;
|
|
1001
|
+
id: string;
|
|
1002
|
+
image?: string | undefined;
|
|
1003
|
+
href?: string | undefined;
|
|
1004
|
+
description?: string | undefined;
|
|
1005
|
+
}>, "many">;
|
|
1006
|
+
onNavigate: z.ZodOptional<z.ZodType<() => void, z.ZodTypeDef, () => void>>;
|
|
1007
|
+
categoryColumnTitle: z.ZodOptional<z.ZodString>;
|
|
1008
|
+
collectionsTitle: z.ZodOptional<z.ZodString>;
|
|
1009
|
+
viewAllLabel: z.ZodOptional<z.ZodString>;
|
|
1010
|
+
collectionsHref: z.ZodOptional<z.ZodString>;
|
|
1011
|
+
ariaLabel: z.ZodOptional<z.ZodString>;
|
|
1012
|
+
}, "strip", z.ZodTypeAny, {
|
|
1013
|
+
categories: {
|
|
1014
|
+
id: string;
|
|
1015
|
+
label: string;
|
|
1016
|
+
icon?: string;
|
|
1017
|
+
image?: string;
|
|
1018
|
+
href?: string;
|
|
1019
|
+
badge?: string;
|
|
1020
|
+
featured?: boolean;
|
|
1021
|
+
children?: MenuItem[];
|
|
1022
|
+
}[];
|
|
1023
|
+
collections: {
|
|
1024
|
+
label: string;
|
|
1025
|
+
id: string;
|
|
1026
|
+
image?: string | undefined;
|
|
1027
|
+
href?: string | undefined;
|
|
1028
|
+
description?: string | undefined;
|
|
1029
|
+
}[];
|
|
1030
|
+
onNavigate?: (() => void) | undefined;
|
|
1031
|
+
categoryColumnTitle?: string | undefined;
|
|
1032
|
+
collectionsTitle?: string | undefined;
|
|
1033
|
+
viewAllLabel?: string | undefined;
|
|
1034
|
+
collectionsHref?: string | undefined;
|
|
1035
|
+
ariaLabel?: string | undefined;
|
|
1036
|
+
}, {
|
|
1037
|
+
categories: {
|
|
1038
|
+
id: string;
|
|
1039
|
+
label: string;
|
|
1040
|
+
icon?: string;
|
|
1041
|
+
image?: string;
|
|
1042
|
+
href?: string;
|
|
1043
|
+
badge?: string;
|
|
1044
|
+
featured?: boolean;
|
|
1045
|
+
children?: MenuItem[];
|
|
1046
|
+
}[];
|
|
1047
|
+
collections: {
|
|
1048
|
+
label: string;
|
|
1049
|
+
id: string;
|
|
1050
|
+
image?: string | undefined;
|
|
1051
|
+
href?: string | undefined;
|
|
1052
|
+
description?: string | undefined;
|
|
1053
|
+
}[];
|
|
1054
|
+
onNavigate?: (() => void) | undefined;
|
|
1055
|
+
categoryColumnTitle?: string | undefined;
|
|
1056
|
+
collectionsTitle?: string | undefined;
|
|
1057
|
+
viewAllLabel?: string | undefined;
|
|
1058
|
+
collectionsHref?: string | undefined;
|
|
1059
|
+
ariaLabel?: string | undefined;
|
|
1060
|
+
}>;
|
|
1061
|
+
type MegaMenuProps = z.infer<typeof megaMenuPropsSchema>;
|
|
1062
|
+
declare function MegaMenu({ categories, collections, onNavigate, categoryColumnTitle, collectionsTitle, viewAllLabel, collectionsHref, ariaLabel, }: MegaMenuProps): react.JSX.Element;
|
|
1063
|
+
|
|
1064
|
+
/**
|
|
1065
|
+
* Slide-in drill-down category drawer: a stack-based menu where selecting a
|
|
1066
|
+
* category with children pushes a new level, and a back control pops it.
|
|
1067
|
+
*
|
|
1068
|
+
* Framework-agnostic: plain anchors (no router), `<img>` (no image
|
|
1069
|
+
* optimization), copy + hrefs as optional props with ES defaults. The drawer
|
|
1070
|
+
* stays MOUNTED while closed and slides in/out with a 200ms transform
|
|
1071
|
+
* (reproducing the original behavior); the backdrop renders only while open.
|
|
1072
|
+
* Locks body scroll while open. No focus trap (out of scope).
|
|
1073
|
+
*
|
|
1074
|
+
* Ported from the legacy `@thorprovider/components` navigation library
|
|
1075
|
+
* (source: branch `feat/storefronts`).
|
|
1076
|
+
*/
|
|
1077
|
+
declare const mobileCategoryDrawerPropsSchema: z.ZodObject<{
|
|
1078
|
+
categories: z.ZodArray<z.ZodType<{
|
|
1079
|
+
id: string;
|
|
1080
|
+
label: string;
|
|
1081
|
+
icon?: string;
|
|
1082
|
+
image?: string;
|
|
1083
|
+
href?: string;
|
|
1084
|
+
badge?: string;
|
|
1085
|
+
featured?: boolean;
|
|
1086
|
+
children?: MenuItem[];
|
|
1087
|
+
}, z.ZodTypeDef, {
|
|
1088
|
+
id: string;
|
|
1089
|
+
label: string;
|
|
1090
|
+
icon?: string;
|
|
1091
|
+
image?: string;
|
|
1092
|
+
href?: string;
|
|
1093
|
+
badge?: string;
|
|
1094
|
+
featured?: boolean;
|
|
1095
|
+
children?: MenuItem[];
|
|
1096
|
+
}>, "many">;
|
|
1097
|
+
collections: z.ZodArray<z.ZodObject<{
|
|
1098
|
+
id: z.ZodString;
|
|
1099
|
+
label: z.ZodString;
|
|
1100
|
+
description: z.ZodOptional<z.ZodString>;
|
|
1101
|
+
image: z.ZodOptional<z.ZodString>;
|
|
1102
|
+
href: z.ZodOptional<z.ZodString>;
|
|
1103
|
+
}, "strip", z.ZodTypeAny, {
|
|
1104
|
+
label: string;
|
|
1105
|
+
id: string;
|
|
1106
|
+
image?: string | undefined;
|
|
1107
|
+
href?: string | undefined;
|
|
1108
|
+
description?: string | undefined;
|
|
1109
|
+
}, {
|
|
1110
|
+
label: string;
|
|
1111
|
+
id: string;
|
|
1112
|
+
image?: string | undefined;
|
|
1113
|
+
href?: string | undefined;
|
|
1114
|
+
description?: string | undefined;
|
|
1115
|
+
}>, "many">;
|
|
1116
|
+
open: z.ZodBoolean;
|
|
1117
|
+
onClose: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodVoid>;
|
|
1118
|
+
rootTitle: z.ZodOptional<z.ZodString>;
|
|
1119
|
+
collectionsTitle: z.ZodOptional<z.ZodString>;
|
|
1120
|
+
viewAllLabel: z.ZodOptional<z.ZodString>;
|
|
1121
|
+
viewAllHref: z.ZodOptional<z.ZodString>;
|
|
1122
|
+
closeAriaLabel: z.ZodOptional<z.ZodString>;
|
|
1123
|
+
backAriaLabel: z.ZodOptional<z.ZodString>;
|
|
1124
|
+
menuAriaLabel: z.ZodOptional<z.ZodString>;
|
|
1125
|
+
}, "strip", z.ZodTypeAny, {
|
|
1126
|
+
open: boolean;
|
|
1127
|
+
categories: {
|
|
1128
|
+
id: string;
|
|
1129
|
+
label: string;
|
|
1130
|
+
icon?: string;
|
|
1131
|
+
image?: string;
|
|
1132
|
+
href?: string;
|
|
1133
|
+
badge?: string;
|
|
1134
|
+
featured?: boolean;
|
|
1135
|
+
children?: MenuItem[];
|
|
1136
|
+
}[];
|
|
1137
|
+
collections: {
|
|
1138
|
+
label: string;
|
|
1139
|
+
id: string;
|
|
1140
|
+
image?: string | undefined;
|
|
1141
|
+
href?: string | undefined;
|
|
1142
|
+
description?: string | undefined;
|
|
1143
|
+
}[];
|
|
1144
|
+
onClose: (...args: unknown[]) => void;
|
|
1145
|
+
collectionsTitle?: string | undefined;
|
|
1146
|
+
viewAllLabel?: string | undefined;
|
|
1147
|
+
rootTitle?: string | undefined;
|
|
1148
|
+
viewAllHref?: string | undefined;
|
|
1149
|
+
closeAriaLabel?: string | undefined;
|
|
1150
|
+
backAriaLabel?: string | undefined;
|
|
1151
|
+
menuAriaLabel?: string | undefined;
|
|
1152
|
+
}, {
|
|
1153
|
+
open: boolean;
|
|
1154
|
+
categories: {
|
|
1155
|
+
id: string;
|
|
1156
|
+
label: string;
|
|
1157
|
+
icon?: string;
|
|
1158
|
+
image?: string;
|
|
1159
|
+
href?: string;
|
|
1160
|
+
badge?: string;
|
|
1161
|
+
featured?: boolean;
|
|
1162
|
+
children?: MenuItem[];
|
|
1163
|
+
}[];
|
|
1164
|
+
collections: {
|
|
1165
|
+
label: string;
|
|
1166
|
+
id: string;
|
|
1167
|
+
image?: string | undefined;
|
|
1168
|
+
href?: string | undefined;
|
|
1169
|
+
description?: string | undefined;
|
|
1170
|
+
}[];
|
|
1171
|
+
onClose: (...args: unknown[]) => void;
|
|
1172
|
+
collectionsTitle?: string | undefined;
|
|
1173
|
+
viewAllLabel?: string | undefined;
|
|
1174
|
+
rootTitle?: string | undefined;
|
|
1175
|
+
viewAllHref?: string | undefined;
|
|
1176
|
+
closeAriaLabel?: string | undefined;
|
|
1177
|
+
backAriaLabel?: string | undefined;
|
|
1178
|
+
menuAriaLabel?: string | undefined;
|
|
1179
|
+
}>;
|
|
1180
|
+
type MobileCategoryDrawerProps = z.infer<typeof mobileCategoryDrawerPropsSchema>;
|
|
1181
|
+
declare function MobileCategoryDrawer({ categories, collections, open, onClose, rootTitle, collectionsTitle, viewAllLabel, viewAllHref, closeAriaLabel, backAriaLabel, menuAriaLabel, }: MobileCategoryDrawerProps): react.JSX.Element;
|
|
1182
|
+
|
|
1183
|
+
/**
|
|
1184
|
+
* The explicit vocabulary of known category icon names. Kept as a Zod enum so
|
|
1185
|
+
* the union type derives from the schema and never drifts.
|
|
1186
|
+
*/
|
|
1187
|
+
declare const categoryIconNameSchema: z.ZodEnum<["wrench", "bolt", "tree", "refrigerator", "wind", "droplet", "zap", "hard-hat", "car", "utensils", "boxes", "sofa", "shield", "sun", "chef-hat", "tractor", "store", "home"]>;
|
|
1188
|
+
type CategoryIconName = z.infer<typeof categoryIconNameSchema>;
|
|
1189
|
+
declare const categoryIconPropsSchema: z.ZodObject<{
|
|
1190
|
+
name: z.ZodOptional<z.ZodEnum<["wrench", "bolt", "tree", "refrigerator", "wind", "droplet", "zap", "hard-hat", "car", "utensils", "boxes", "sofa", "shield", "sun", "chef-hat", "tractor", "store", "home"]>>;
|
|
1191
|
+
className: z.ZodOptional<z.ZodString>;
|
|
1192
|
+
}, "strip", z.ZodTypeAny, {
|
|
1193
|
+
className?: string | undefined;
|
|
1194
|
+
name?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
|
|
1195
|
+
}, {
|
|
1196
|
+
className?: string | undefined;
|
|
1197
|
+
name?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
|
|
1198
|
+
}>;
|
|
1199
|
+
type CategoryIconProps = z.infer<typeof categoryIconPropsSchema>;
|
|
1200
|
+
/**
|
|
1201
|
+
* Category icon by name: maps a string icon-name to a Lucide icon.
|
|
1202
|
+
*
|
|
1203
|
+
* Framework-agnostic and prop-driven. Unknown or absent names render null
|
|
1204
|
+
* (graceful fallback); the schema validates names at the boundary, so a
|
|
1205
|
+
* non-vocabulary value fails `parse` but the component still renders null
|
|
1206
|
+
* instead of throwing.
|
|
1207
|
+
*/
|
|
1208
|
+
declare function CategoryIcon({ name, className }: CategoryIconProps): react.JSX.Element | null;
|
|
1209
|
+
|
|
1210
|
+
interface CategoryFilter1Category {
|
|
1211
|
+
id: string;
|
|
1212
|
+
name: string;
|
|
1213
|
+
count: number;
|
|
1214
|
+
}
|
|
1215
|
+
interface CategoryFilter1PriceRange {
|
|
1216
|
+
id: string;
|
|
1217
|
+
label: string;
|
|
1218
|
+
min: number;
|
|
1219
|
+
max: number | null;
|
|
1220
|
+
}
|
|
1221
|
+
interface CategoryFilter1SortOption {
|
|
1222
|
+
id: string;
|
|
1223
|
+
label: string;
|
|
1224
|
+
}
|
|
1225
|
+
interface CategoryFilter1Filters {
|
|
1226
|
+
category: string;
|
|
1227
|
+
priceRange: string;
|
|
1228
|
+
sort: string;
|
|
1229
|
+
search: string;
|
|
1230
|
+
}
|
|
1231
|
+
interface CategoryFilter1Props {
|
|
1232
|
+
title?: string;
|
|
1233
|
+
description?: string;
|
|
1234
|
+
categories: CategoryFilter1Category[];
|
|
1235
|
+
priceRanges: CategoryFilter1PriceRange[];
|
|
1236
|
+
sortOptions: CategoryFilter1SortOption[];
|
|
1237
|
+
onFilterChange?: (filters: CategoryFilter1Filters) => void;
|
|
1238
|
+
}
|
|
1239
|
+
declare function CategoryFilter1({ title, description, categories, priceRanges, sortOptions, onFilterChange, }: CategoryFilter1Props): react.JSX.Element;
|
|
1240
|
+
|
|
1241
|
+
interface FilterProduct {
|
|
1242
|
+
id: string;
|
|
1243
|
+
name: string;
|
|
1244
|
+
price: string;
|
|
1245
|
+
image: string;
|
|
1246
|
+
}
|
|
1247
|
+
interface CategoryFilter2Category {
|
|
1248
|
+
id: string;
|
|
1249
|
+
label: string;
|
|
1250
|
+
}
|
|
1251
|
+
interface CategoryFilter2Color {
|
|
1252
|
+
id: string;
|
|
1253
|
+
color: string;
|
|
1254
|
+
}
|
|
1255
|
+
interface CategoryFilter2PriceRange {
|
|
1256
|
+
min: number;
|
|
1257
|
+
max: number;
|
|
1258
|
+
step: number;
|
|
1259
|
+
}
|
|
1260
|
+
interface CategoryFilter2SortOption {
|
|
1261
|
+
value: string;
|
|
1262
|
+
label: string;
|
|
1263
|
+
}
|
|
1264
|
+
interface CategoryFilter2Filters {
|
|
1265
|
+
categories: string[];
|
|
1266
|
+
priceRange: number[];
|
|
1267
|
+
size: string | null;
|
|
1268
|
+
color: string | null;
|
|
1269
|
+
}
|
|
1270
|
+
interface CategoryFilter2Props {
|
|
1271
|
+
products: FilterProduct[];
|
|
1272
|
+
categories?: CategoryFilter2Category[];
|
|
1273
|
+
sizes?: string[];
|
|
1274
|
+
colors?: CategoryFilter2Color[];
|
|
1275
|
+
priceRange?: CategoryFilter2PriceRange;
|
|
1276
|
+
viewOptions?: (number | string)[];
|
|
1277
|
+
sortOptions?: CategoryFilter2SortOption[];
|
|
1278
|
+
pagination?: (number | string)[];
|
|
1279
|
+
filtersTitle?: string;
|
|
1280
|
+
selectedText?: string;
|
|
1281
|
+
clearAllLabel?: string;
|
|
1282
|
+
priceRangeTitle?: string;
|
|
1283
|
+
minLabel?: string;
|
|
1284
|
+
maxLabel?: string;
|
|
1285
|
+
categoriesTitle?: string;
|
|
1286
|
+
sizesTitle?: string;
|
|
1287
|
+
colorsTitle?: string;
|
|
1288
|
+
viewLabel?: string;
|
|
1289
|
+
viewPlaceholder?: string;
|
|
1290
|
+
sortPlaceholder?: string;
|
|
1291
|
+
productsTitle?: string;
|
|
1292
|
+
currentLabel?: string;
|
|
1293
|
+
onProductClick?: (product: FilterProduct) => void;
|
|
1294
|
+
onPageChange?: (page: number | string) => void;
|
|
1295
|
+
onViewChange?: (view: number | string) => void;
|
|
1296
|
+
onSortChange?: (sort: string) => void;
|
|
1297
|
+
onFilterChange?: (filters: CategoryFilter2Filters) => void;
|
|
1298
|
+
}
|
|
1299
|
+
declare function CategoryFilter2({ products, categories, sizes, colors, priceRange: priceRangeConfig, viewOptions, sortOptions, pagination, filtersTitle, selectedText, clearAllLabel, priceRangeTitle, minLabel, maxLabel, categoriesTitle, sizesTitle, colorsTitle, viewLabel, viewPlaceholder, sortPlaceholder, productsTitle, currentLabel, onProductClick, onPageChange, onViewChange, onSortChange, onFilterChange, }: CategoryFilter2Props): react.JSX.Element;
|
|
1300
|
+
|
|
1301
|
+
interface CategoryFilter4SortOption {
|
|
1302
|
+
value: string;
|
|
1303
|
+
label: string;
|
|
1304
|
+
}
|
|
1305
|
+
interface CategoryFilter4FacetOption {
|
|
1306
|
+
value: string;
|
|
1307
|
+
label: string;
|
|
1308
|
+
}
|
|
1309
|
+
interface CategoryFilter4RangeBand {
|
|
1310
|
+
value: string;
|
|
1311
|
+
label: string;
|
|
1312
|
+
min: number;
|
|
1313
|
+
max: number;
|
|
1314
|
+
}
|
|
1315
|
+
interface CategoryFilter4Facets {
|
|
1316
|
+
sortOptions: CategoryFilter4SortOption[];
|
|
1317
|
+
frameSizes: string[];
|
|
1318
|
+
modelTypes: CategoryFilter4FacetOption[];
|
|
1319
|
+
rangeBands: CategoryFilter4RangeBand[];
|
|
1320
|
+
featureOptions: CategoryFilter4FacetOption[];
|
|
1321
|
+
}
|
|
1322
|
+
interface CategoryFilter4FilterState {
|
|
1323
|
+
modelTypes: string[];
|
|
1324
|
+
priceMax: number;
|
|
1325
|
+
rangeBands: string[];
|
|
1326
|
+
frameSizes: string[];
|
|
1327
|
+
colourways: string[];
|
|
1328
|
+
features: string[];
|
|
1329
|
+
}
|
|
1330
|
+
interface CategoryFilter4Product {
|
|
1331
|
+
id: string;
|
|
1332
|
+
name: string;
|
|
1333
|
+
modelType: string;
|
|
1334
|
+
price: number;
|
|
1335
|
+
rangeKm: number;
|
|
1336
|
+
frameSize: string;
|
|
1337
|
+
colourway: string;
|
|
1338
|
+
features: string[];
|
|
1339
|
+
rating: number;
|
|
1340
|
+
}
|
|
1341
|
+
interface CategoryFilter4Props {
|
|
1342
|
+
products: CategoryFilter4Product[];
|
|
1343
|
+
facets: CategoryFilter4Facets;
|
|
1344
|
+
colourNames: Record<string, string>;
|
|
1345
|
+
fallbackImage: string;
|
|
1346
|
+
maxPrice: number;
|
|
1347
|
+
filtersLabel?: string;
|
|
1348
|
+
sortLabel?: string;
|
|
1349
|
+
sortByLabel?: string;
|
|
1350
|
+
modelTypeLabel?: string;
|
|
1351
|
+
rangeLabel?: string;
|
|
1352
|
+
frameSizeLabel?: string;
|
|
1353
|
+
colourLabel?: string;
|
|
1354
|
+
featuresLabel?: string;
|
|
1355
|
+
resultsCountLabel?: (count: number) => string;
|
|
1356
|
+
clearAllLabel?: string;
|
|
1357
|
+
showResultsLabel?: (count: number) => string;
|
|
1358
|
+
noResultsLabel?: string;
|
|
1359
|
+
noResultsTitle?: string;
|
|
1360
|
+
noResultsDescription?: string;
|
|
1361
|
+
noResultsCtaLabel?: string;
|
|
1362
|
+
onFiltersChange?: (filters: CategoryFilter4FilterState) => void;
|
|
1363
|
+
onSortChange?: (sort: string) => void;
|
|
1364
|
+
onProductSelect?: (product: CategoryFilter4Product) => void;
|
|
1365
|
+
}
|
|
1366
|
+
declare function CategoryFilter4({ products, facets, colourNames, fallbackImage, maxPrice, filtersLabel, sortLabel, sortByLabel, modelTypeLabel, rangeLabel, frameSizeLabel, colourLabel, featuresLabel, resultsCountLabel, clearAllLabel, showResultsLabel, noResultsLabel, noResultsTitle, noResultsDescription, noResultsCtaLabel, onFiltersChange, onSortChange, onProductSelect, }: CategoryFilter4Props): react.JSX.Element;
|
|
1367
|
+
|
|
1368
|
+
interface ShoppingCart1CartItem {
|
|
1369
|
+
id: string;
|
|
1370
|
+
name: string;
|
|
1371
|
+
color: string;
|
|
1372
|
+
size: string;
|
|
1373
|
+
price: number;
|
|
1374
|
+
originalPrice: number;
|
|
1375
|
+
quantity: number;
|
|
1376
|
+
image: string;
|
|
1377
|
+
estimatedDelivery: string;
|
|
1378
|
+
}
|
|
1379
|
+
interface ShoppingCart1Shipping {
|
|
1380
|
+
freeThreshold?: number;
|
|
1381
|
+
cost?: number;
|
|
1382
|
+
}
|
|
1383
|
+
interface ShoppingCart1Props {
|
|
1384
|
+
items: ShoppingCart1CartItem[];
|
|
1385
|
+
shipping?: ShoppingCart1Shipping;
|
|
1386
|
+
title?: string;
|
|
1387
|
+
itemCountLabel?: (count: number) => string;
|
|
1388
|
+
emptyTitle?: string;
|
|
1389
|
+
emptyDescription?: string;
|
|
1390
|
+
continueShoppingLabel?: string;
|
|
1391
|
+
removeItemLabel?: (name: string) => string;
|
|
1392
|
+
decreaseQuantityLabel?: (name: string) => string;
|
|
1393
|
+
increaseQuantityLabel?: (name: string) => string;
|
|
1394
|
+
estimatedDeliveryLabel?: string;
|
|
1395
|
+
orderSummaryLabel?: string;
|
|
1396
|
+
subtotalLabel?: string;
|
|
1397
|
+
shippingLabel?: string;
|
|
1398
|
+
freeShippingLabel?: string;
|
|
1399
|
+
youSaveLabel?: string;
|
|
1400
|
+
totalLabel?: string;
|
|
1401
|
+
taxNoteLabel?: string;
|
|
1402
|
+
checkoutLabel?: string;
|
|
1403
|
+
securePaymentLabel?: string;
|
|
1404
|
+
secureCheckoutLabel?: string;
|
|
1405
|
+
secureCheckoutDescription?: string;
|
|
1406
|
+
onUpdateQuantity?: (id: string, quantity: number) => void;
|
|
1407
|
+
onRemoveItem?: (id: string) => void;
|
|
1408
|
+
onCheckout?: () => void;
|
|
1409
|
+
onContinueShopping?: () => void;
|
|
1410
|
+
}
|
|
1411
|
+
declare function ShoppingCart1({ items, shipping, title, itemCountLabel, emptyTitle, emptyDescription, continueShoppingLabel, removeItemLabel, decreaseQuantityLabel, increaseQuantityLabel, estimatedDeliveryLabel, orderSummaryLabel, subtotalLabel, shippingLabel, freeShippingLabel, youSaveLabel, totalLabel, taxNoteLabel, checkoutLabel, securePaymentLabel, secureCheckoutLabel, secureCheckoutDescription, onUpdateQuantity, onRemoveItem, onCheckout, onContinueShopping, }: ShoppingCart1Props): react.JSX.Element;
|
|
1412
|
+
|
|
1413
|
+
interface ShoppingCart2Item {
|
|
1414
|
+
id: string;
|
|
1415
|
+
name: string;
|
|
1416
|
+
brand?: string;
|
|
1417
|
+
price: number;
|
|
1418
|
+
originalPrice?: number;
|
|
1419
|
+
quantity: number;
|
|
1420
|
+
image: string;
|
|
1421
|
+
color?: string;
|
|
1422
|
+
size?: string;
|
|
1423
|
+
}
|
|
1424
|
+
interface ShoppingCart2Recommendation {
|
|
1425
|
+
id: string;
|
|
1426
|
+
name: string;
|
|
1427
|
+
price: number;
|
|
1428
|
+
image: string;
|
|
1429
|
+
}
|
|
1430
|
+
interface ShoppingCart2Props {
|
|
1431
|
+
items: ShoppingCart2Item[];
|
|
1432
|
+
recommendations?: ShoppingCart2Recommendation[];
|
|
1433
|
+
taxRate?: number;
|
|
1434
|
+
shippingCost?: number;
|
|
1435
|
+
freeShippingThreshold?: number;
|
|
1436
|
+
validatePromo?: (code: string) => number | null;
|
|
1437
|
+
titleLabel?: string;
|
|
1438
|
+
itemsCountLabel?: string;
|
|
1439
|
+
cartItemsLabel?: string;
|
|
1440
|
+
orderSummaryLabel?: string;
|
|
1441
|
+
subtotalLabel?: string;
|
|
1442
|
+
savingsLabel?: string;
|
|
1443
|
+
shippingLabel?: string;
|
|
1444
|
+
freeShippingLabel?: string;
|
|
1445
|
+
taxLabel?: string;
|
|
1446
|
+
totalLabel?: string;
|
|
1447
|
+
promoPlaceholder?: string;
|
|
1448
|
+
applyPromoLabel?: string;
|
|
1449
|
+
promoAppliedLabel?: string;
|
|
1450
|
+
continueShoppingLabel?: string;
|
|
1451
|
+
emptyCartTitleLabel?: string;
|
|
1452
|
+
emptyCartDescriptionLabel?: string;
|
|
1453
|
+
checkoutLabel?: string;
|
|
1454
|
+
freeShippingNoteLabel?: string;
|
|
1455
|
+
freeShippingThresholdNoteLabel?: string;
|
|
1456
|
+
secureCheckoutLabel?: string;
|
|
1457
|
+
recommendationsLabel?: string;
|
|
1458
|
+
onQuantityChange?: (id: string, quantity: number) => void;
|
|
1459
|
+
onRemove?: (id: string) => void;
|
|
1460
|
+
onAddToWishlist?: (item: ShoppingCart2Item) => void;
|
|
1461
|
+
onCheckout?: () => void;
|
|
1462
|
+
onContinueShopping?: () => void;
|
|
1463
|
+
onRecommendationClick?: (product: ShoppingCart2Recommendation) => void;
|
|
1464
|
+
}
|
|
1465
|
+
declare function ShoppingCart2({ items, recommendations, taxRate, shippingCost, freeShippingThreshold, validatePromo, titleLabel, itemsCountLabel, cartItemsLabel, orderSummaryLabel, subtotalLabel, savingsLabel, shippingLabel, freeShippingLabel, taxLabel, totalLabel, promoPlaceholder, applyPromoLabel, promoAppliedLabel, continueShoppingLabel, emptyCartTitleLabel, emptyCartDescriptionLabel, checkoutLabel, freeShippingNoteLabel, freeShippingThresholdNoteLabel, secureCheckoutLabel, recommendationsLabel, onQuantityChange, onRemove, onAddToWishlist, onCheckout, onContinueShopping, onRecommendationClick, }: ShoppingCart2Props): react.JSX.Element;
|
|
1466
|
+
|
|
1467
|
+
interface ShoppingCart4Item {
|
|
1468
|
+
id: string;
|
|
1469
|
+
name: string;
|
|
1470
|
+
price: number;
|
|
1471
|
+
quantity: number;
|
|
1472
|
+
image: string;
|
|
1473
|
+
variant?: string;
|
|
1474
|
+
}
|
|
1475
|
+
interface ShoppingCart4Promotion {
|
|
1476
|
+
threshold: number;
|
|
1477
|
+
reward: string;
|
|
1478
|
+
icon: LucideIcon;
|
|
1479
|
+
}
|
|
1480
|
+
interface ShoppingCart4RecentlyViewed {
|
|
1481
|
+
id: string;
|
|
1482
|
+
name: string;
|
|
1483
|
+
price: number;
|
|
1484
|
+
image: string;
|
|
1485
|
+
}
|
|
1486
|
+
interface ShoppingCart4Props {
|
|
1487
|
+
items: ShoppingCart4Item[];
|
|
1488
|
+
promotions: ShoppingCart4Promotion[];
|
|
1489
|
+
recentlyViewed?: ShoppingCart4RecentlyViewed[];
|
|
1490
|
+
taxRate?: number;
|
|
1491
|
+
titleLabel?: string;
|
|
1492
|
+
subtotalLabel?: string;
|
|
1493
|
+
taxLabel?: string;
|
|
1494
|
+
shippingLabel?: string;
|
|
1495
|
+
shippingFreeLabel?: string;
|
|
1496
|
+
totalLabel?: string;
|
|
1497
|
+
awayFromLabel?: string;
|
|
1498
|
+
activatedLabel?: string;
|
|
1499
|
+
itemsLabel?: string;
|
|
1500
|
+
expressCheckoutLabel?: string;
|
|
1501
|
+
expressLabel?: string;
|
|
1502
|
+
standardLabel?: string;
|
|
1503
|
+
estimatedDeliveryLabel?: string;
|
|
1504
|
+
secureCheckoutLabel?: string;
|
|
1505
|
+
recentlyViewedLabel?: string;
|
|
1506
|
+
collapseLabel?: string;
|
|
1507
|
+
expandLabel?: string;
|
|
1508
|
+
checkoutLabel?: string;
|
|
1509
|
+
quickCheckoutLabel?: string;
|
|
1510
|
+
checkoutNowLabel?: string;
|
|
1511
|
+
onQuantityChange?: (id: string, quantity: number) => void;
|
|
1512
|
+
onRemove?: (id: string) => void;
|
|
1513
|
+
onCheckout?: () => void;
|
|
1514
|
+
onQuickCheckout?: () => void;
|
|
1515
|
+
onPayWithApple?: () => void;
|
|
1516
|
+
onPayWithGoogle?: () => void;
|
|
1517
|
+
onRecentlyViewedClick?: (id: string) => void;
|
|
1518
|
+
}
|
|
1519
|
+
declare function ShoppingCart4({ items, promotions, recentlyViewed, taxRate, titleLabel, subtotalLabel, taxLabel, shippingLabel, shippingFreeLabel, totalLabel, awayFromLabel, activatedLabel, itemsLabel, expressCheckoutLabel, expressLabel, standardLabel, estimatedDeliveryLabel, secureCheckoutLabel, recentlyViewedLabel, collapseLabel, expandLabel, checkoutLabel, quickCheckoutLabel, checkoutNowLabel, onQuantityChange, onRemove, onCheckout, onQuickCheckout, onPayWithApple, onPayWithGoogle, onRecentlyViewedClick, }: ShoppingCart4Props): react.JSX.Element;
|
|
1520
|
+
|
|
1521
|
+
type ShoppingCart3Tag = 'Limited Edition' | 'Best Seller' | 'New Arrival';
|
|
1522
|
+
interface ShoppingCart3CartItem {
|
|
1523
|
+
id: string;
|
|
1524
|
+
name: string;
|
|
1525
|
+
color: string;
|
|
1526
|
+
size: string;
|
|
1527
|
+
price: number;
|
|
1528
|
+
originalPrice: number;
|
|
1529
|
+
quantity: number;
|
|
1530
|
+
image: string;
|
|
1531
|
+
selected: boolean;
|
|
1532
|
+
tag: ShoppingCart3Tag;
|
|
1533
|
+
estimatedDelivery: string;
|
|
1534
|
+
}
|
|
1535
|
+
interface ShoppingCart3Feature {
|
|
1536
|
+
icon: LucideIcon;
|
|
1537
|
+
title: string;
|
|
1538
|
+
description: string;
|
|
1539
|
+
}
|
|
1540
|
+
interface ShoppingCart3Props {
|
|
1541
|
+
items: ShoppingCart3CartItem[];
|
|
1542
|
+
freeShippingThreshold?: number;
|
|
1543
|
+
features?: ShoppingCart3Feature[];
|
|
1544
|
+
title?: string;
|
|
1545
|
+
itemCountLabel?: (count: number) => string;
|
|
1546
|
+
selectAllLabel?: string;
|
|
1547
|
+
saveForLaterLabel?: string;
|
|
1548
|
+
removeItemLabel?: (name: string) => string;
|
|
1549
|
+
decreaseQuantityLabel?: (name: string) => string;
|
|
1550
|
+
increaseQuantityLabel?: (name: string) => string;
|
|
1551
|
+
estimatedDeliveryLabel?: string;
|
|
1552
|
+
orderSummaryLabel?: string;
|
|
1553
|
+
subtotalLabel?: string;
|
|
1554
|
+
shippingLabel?: string;
|
|
1555
|
+
freeShippingLabel?: string;
|
|
1556
|
+
youSaveLabel?: string;
|
|
1557
|
+
totalLabel?: string;
|
|
1558
|
+
taxNoteLabel?: string;
|
|
1559
|
+
checkoutLabel?: string;
|
|
1560
|
+
securePaymentLabel?: string;
|
|
1561
|
+
freeShippingProgressLabel?: (remaining: number) => string;
|
|
1562
|
+
freeShippingReachedLabel?: string;
|
|
1563
|
+
tagLabels?: Partial<Record<ShoppingCart3Tag, string>>;
|
|
1564
|
+
onUpdateQuantity?: (id: string, quantity: number) => void;
|
|
1565
|
+
onRemoveItem?: (id: string) => void;
|
|
1566
|
+
onCheckout?: () => void;
|
|
1567
|
+
onSaveForLater?: (ids: string[]) => void;
|
|
1568
|
+
onToggleSelect?: (id: string, selected: boolean) => void;
|
|
1569
|
+
}
|
|
1570
|
+
declare function ShoppingCart3({ items, freeShippingThreshold, features, title, itemCountLabel, selectAllLabel, saveForLaterLabel, removeItemLabel, decreaseQuantityLabel, increaseQuantityLabel, estimatedDeliveryLabel, orderSummaryLabel, subtotalLabel, shippingLabel, freeShippingLabel, youSaveLabel, totalLabel, taxNoteLabel, checkoutLabel, securePaymentLabel, freeShippingProgressLabel, freeShippingReachedLabel, tagLabels, onUpdateQuantity, onRemoveItem, onCheckout, onSaveForLater, onToggleSelect, }: ShoppingCart3Props): react.JSX.Element;
|
|
1571
|
+
|
|
1572
|
+
interface StoreContainer1Props {
|
|
1573
|
+
size?: 'default' | 'narrow' | 'wide' | 'full';
|
|
1574
|
+
className?: string;
|
|
1575
|
+
children?: ReactNode;
|
|
1576
|
+
}
|
|
1577
|
+
/**
|
|
1578
|
+
* Trivial presentational layout container used as the root of spec-driven
|
|
1579
|
+
* storefront pages. Constrains content width; children render as-is.
|
|
1580
|
+
*/
|
|
1581
|
+
declare function StoreContainer1({ size, className, children, }: StoreContainer1Props): react.JSX.Element;
|
|
1582
|
+
|
|
1583
|
+
interface CheckoutFieldError {
|
|
1584
|
+
message?: string;
|
|
1585
|
+
}
|
|
1586
|
+
type CheckoutFieldErrors<T extends string> = Partial<Record<T, CheckoutFieldError[]>>;
|
|
1587
|
+
|
|
1588
|
+
interface CheckoutForm1FormData {
|
|
1589
|
+
email: string;
|
|
1590
|
+
firstName: string;
|
|
1591
|
+
lastName: string;
|
|
1592
|
+
phone: string;
|
|
1593
|
+
address: string;
|
|
1594
|
+
city: string;
|
|
1595
|
+
state: string;
|
|
1596
|
+
zipCode: string;
|
|
1597
|
+
country: string;
|
|
1598
|
+
paymentMethod: string;
|
|
1599
|
+
cardNumber: string;
|
|
1600
|
+
expiryDate: string;
|
|
1601
|
+
cvv: string;
|
|
1602
|
+
cardName: string;
|
|
1603
|
+
saveInfo: boolean;
|
|
1604
|
+
sameAsBilling: boolean;
|
|
1605
|
+
newsletter: boolean;
|
|
1606
|
+
promoCode: string;
|
|
1607
|
+
}
|
|
1608
|
+
type CheckoutForm1FieldErrors = CheckoutFieldErrors<keyof CheckoutForm1FormData>;
|
|
1609
|
+
type CheckoutForm1FieldDescriptions = Partial<Record<keyof CheckoutForm1FormData, string>>;
|
|
1610
|
+
interface CheckoutForm1OrderSummaryItem {
|
|
1611
|
+
id: string | number;
|
|
1612
|
+
name: string;
|
|
1613
|
+
variant: string;
|
|
1614
|
+
price: number;
|
|
1615
|
+
quantity: number;
|
|
1616
|
+
image: string;
|
|
1617
|
+
}
|
|
1618
|
+
interface CheckoutForm1OrderSummary {
|
|
1619
|
+
items: CheckoutForm1OrderSummaryItem[];
|
|
1620
|
+
shipping: number;
|
|
1621
|
+
tax: number;
|
|
1622
|
+
discount?: number;
|
|
1623
|
+
promoDiscount?: number;
|
|
1624
|
+
}
|
|
1625
|
+
interface CheckoutForm1CountryOption {
|
|
1626
|
+
value: string;
|
|
1627
|
+
label: string;
|
|
1628
|
+
}
|
|
1629
|
+
type CheckoutForm1ChangeHandler = (field: keyof CheckoutForm1FormData, value: string | boolean) => void;
|
|
1630
|
+
interface CheckoutForm1Props {
|
|
1631
|
+
title?: string;
|
|
1632
|
+
description?: string;
|
|
1633
|
+
orderSummary?: CheckoutForm1OrderSummary;
|
|
1634
|
+
countries?: CheckoutForm1CountryOption[];
|
|
1635
|
+
paymentMethods?: PaymentMethod[];
|
|
1636
|
+
noPaymentMethodsLabel?: string;
|
|
1637
|
+
backLabel?: string;
|
|
1638
|
+
completeOrderLabel?: string;
|
|
1639
|
+
continueLabel?: string;
|
|
1640
|
+
values: CheckoutForm1FormData;
|
|
1641
|
+
onChange: CheckoutForm1ChangeHandler;
|
|
1642
|
+
fieldErrors?: CheckoutForm1FieldErrors;
|
|
1643
|
+
fieldDescriptions?: CheckoutForm1FieldDescriptions;
|
|
1644
|
+
validateStep?: (step: number) => boolean;
|
|
1645
|
+
onSubmit?: (data: CheckoutForm1FormData) => void;
|
|
1646
|
+
/** Disables the submit button while the order is being placed. */
|
|
1647
|
+
submitting?: boolean;
|
|
1648
|
+
/** Order-level error surfaced above the footer actions. */
|
|
1649
|
+
submitError?: string;
|
|
1650
|
+
}
|
|
1651
|
+
declare function CheckoutForm1({ title, description, orderSummary, countries, paymentMethods, noPaymentMethodsLabel, backLabel, completeOrderLabel, continueLabel, values, onChange, fieldErrors, fieldDescriptions, validateStep, onSubmit, submitting, submitError, }: CheckoutForm1Props): react.JSX.Element;
|
|
1652
|
+
|
|
1653
|
+
interface CheckoutForm2Item {
|
|
1654
|
+
id: string;
|
|
1655
|
+
name: string;
|
|
1656
|
+
price: number;
|
|
1657
|
+
quantity: number;
|
|
1658
|
+
image: string;
|
|
1659
|
+
}
|
|
1660
|
+
interface CheckoutForm2CountryOption {
|
|
1661
|
+
value: string;
|
|
1662
|
+
label: string;
|
|
1663
|
+
}
|
|
1664
|
+
interface CheckoutForm2Data {
|
|
1665
|
+
email: string;
|
|
1666
|
+
firstName: string;
|
|
1667
|
+
lastName: string;
|
|
1668
|
+
address: string;
|
|
1669
|
+
city: string;
|
|
1670
|
+
zipCode: string;
|
|
1671
|
+
country: string;
|
|
1672
|
+
saveInfo: boolean;
|
|
1673
|
+
newsletter: boolean;
|
|
1674
|
+
cardNumber: string;
|
|
1675
|
+
expiryDate: string;
|
|
1676
|
+
cvv: string;
|
|
1677
|
+
cardName: string;
|
|
1678
|
+
}
|
|
1679
|
+
type CheckoutForm2FieldErrors = CheckoutFieldErrors<keyof CheckoutForm2Data>;
|
|
1680
|
+
type CheckoutForm2FieldDescriptions = Partial<Record<keyof CheckoutForm2Data, string>>;
|
|
1681
|
+
interface CheckoutForm2Totals {
|
|
1682
|
+
subtotal: number;
|
|
1683
|
+
shipping: number;
|
|
1684
|
+
tax: number;
|
|
1685
|
+
total: number;
|
|
1686
|
+
}
|
|
1687
|
+
interface CheckoutForm2Props {
|
|
1688
|
+
items: CheckoutForm2Item[];
|
|
1689
|
+
countryOptions?: CheckoutForm2CountryOption[];
|
|
1690
|
+
paymentMethods?: PaymentMethod[];
|
|
1691
|
+
noMethodsLabel?: string;
|
|
1692
|
+
taxRate?: number;
|
|
1693
|
+
shippingCost?: number;
|
|
1694
|
+
freeShippingThreshold?: number;
|
|
1695
|
+
currencySymbol?: string;
|
|
1696
|
+
titleLabel?: string;
|
|
1697
|
+
descriptionLabel?: string;
|
|
1698
|
+
backToCartLabel?: string;
|
|
1699
|
+
completeOrderLabel?: string;
|
|
1700
|
+
contactLabel?: string;
|
|
1701
|
+
emailLabel?: string;
|
|
1702
|
+
emailPlaceholder?: string;
|
|
1703
|
+
newsletterLabel?: string;
|
|
1704
|
+
shippingAddressLabel?: string;
|
|
1705
|
+
firstNameLabel?: string;
|
|
1706
|
+
lastNameLabel?: string;
|
|
1707
|
+
addressLabel?: string;
|
|
1708
|
+
cityLabel?: string;
|
|
1709
|
+
zipCodeLabel?: string;
|
|
1710
|
+
countryLabel?: string;
|
|
1711
|
+
saveInfoLabel?: string;
|
|
1712
|
+
paymentLabel?: string;
|
|
1713
|
+
cardNumberLabel?: string;
|
|
1714
|
+
expiryLabel?: string;
|
|
1715
|
+
cvvLabel?: string;
|
|
1716
|
+
cardNameLabel?: string;
|
|
1717
|
+
encryptedNoteLabel?: string;
|
|
1718
|
+
orderSummaryLabel?: string;
|
|
1719
|
+
subtotalLabel?: string;
|
|
1720
|
+
shippingLineLabel?: string;
|
|
1721
|
+
freeShippingLineLabel?: string;
|
|
1722
|
+
taxLabel?: string;
|
|
1723
|
+
totalLabel?: string;
|
|
1724
|
+
freeShippingNoteLabel?: string;
|
|
1725
|
+
estimatedDeliveryLabel?: string;
|
|
1726
|
+
values: CheckoutForm2Data;
|
|
1727
|
+
onChange: (field: keyof CheckoutForm2Data, value: string | boolean) => void;
|
|
1728
|
+
fieldErrors?: CheckoutForm2FieldErrors;
|
|
1729
|
+
fieldDescriptions?: CheckoutForm2FieldDescriptions;
|
|
1730
|
+
onBackToCart?: () => void;
|
|
1731
|
+
onCompleteOrder?: (data: CheckoutForm2Data, totals: CheckoutForm2Totals) => void;
|
|
1732
|
+
}
|
|
1733
|
+
declare function CheckoutForm2({ items, countryOptions, paymentMethods, noMethodsLabel, taxRate, shippingCost, freeShippingThreshold, currencySymbol, titleLabel, descriptionLabel, backToCartLabel, completeOrderLabel, contactLabel, emailLabel, emailPlaceholder, newsletterLabel, shippingAddressLabel, firstNameLabel, lastNameLabel, addressLabel, cityLabel, zipCodeLabel, countryLabel, saveInfoLabel, paymentLabel, cardNumberLabel, expiryLabel, cvvLabel, cardNameLabel, encryptedNoteLabel, orderSummaryLabel, subtotalLabel, shippingLineLabel, freeShippingLineLabel, taxLabel, totalLabel, freeShippingNoteLabel, estimatedDeliveryLabel, values, onChange, fieldErrors, fieldDescriptions, onBackToCart, onCompleteOrder, }: CheckoutForm2Props): react.JSX.Element;
|
|
1734
|
+
|
|
1735
|
+
interface CheckoutForm3CartItem {
|
|
1736
|
+
id: number;
|
|
1737
|
+
name: string;
|
|
1738
|
+
price: number;
|
|
1739
|
+
quantity: number;
|
|
1740
|
+
image: string;
|
|
1741
|
+
}
|
|
1742
|
+
interface CheckoutForm3ShippingMethod {
|
|
1743
|
+
id: string;
|
|
1744
|
+
name: string;
|
|
1745
|
+
description: string;
|
|
1746
|
+
cost: number;
|
|
1747
|
+
}
|
|
1748
|
+
interface CheckoutForm3CountryOption {
|
|
1749
|
+
value: string;
|
|
1750
|
+
label: string;
|
|
1751
|
+
}
|
|
1752
|
+
interface CheckoutForm3Step {
|
|
1753
|
+
id: number;
|
|
1754
|
+
name: string;
|
|
1755
|
+
}
|
|
1756
|
+
interface CheckoutForm3FormData {
|
|
1757
|
+
email: string;
|
|
1758
|
+
firstName: string;
|
|
1759
|
+
lastName: string;
|
|
1760
|
+
phone: string;
|
|
1761
|
+
address: string;
|
|
1762
|
+
apartment: string;
|
|
1763
|
+
city: string;
|
|
1764
|
+
state: string;
|
|
1765
|
+
zipCode: string;
|
|
1766
|
+
country: string;
|
|
1767
|
+
shippingMethod: string;
|
|
1768
|
+
paymentMethod: string;
|
|
1769
|
+
cardNumber: string;
|
|
1770
|
+
expiryDate: string;
|
|
1771
|
+
cvv: string;
|
|
1772
|
+
cardName: string;
|
|
1773
|
+
billingAddress: string;
|
|
1774
|
+
newsletter: boolean;
|
|
1775
|
+
saveInfo: boolean;
|
|
1776
|
+
}
|
|
1777
|
+
type CheckoutForm3ChangeHandler = (field: keyof CheckoutForm3FormData, value: string | boolean) => void;
|
|
1778
|
+
interface CheckoutForm3Props {
|
|
1779
|
+
cartItems: CheckoutForm3CartItem[];
|
|
1780
|
+
shippingMethods: CheckoutForm3ShippingMethod[];
|
|
1781
|
+
paymentMethods?: PaymentMethod[];
|
|
1782
|
+
taxRate?: number;
|
|
1783
|
+
countryOptions?: CheckoutForm3CountryOption[];
|
|
1784
|
+
steps?: CheckoutForm3Step[];
|
|
1785
|
+
currencySymbol?: string;
|
|
1786
|
+
titleLabel?: string;
|
|
1787
|
+
subtitleLabel?: string;
|
|
1788
|
+
backLabel?: string;
|
|
1789
|
+
continueLabel?: string;
|
|
1790
|
+
placeOrderLabel?: string;
|
|
1791
|
+
shippingAddressLabel?: string;
|
|
1792
|
+
shippingMethodLabel?: string;
|
|
1793
|
+
paymentLabel?: string;
|
|
1794
|
+
noMethodsLabel?: string;
|
|
1795
|
+
securePaymentLabel?: string;
|
|
1796
|
+
emailLabel?: string;
|
|
1797
|
+
firstNameLabel?: string;
|
|
1798
|
+
lastNameLabel?: string;
|
|
1799
|
+
phoneLabel?: string;
|
|
1800
|
+
addressLabel?: string;
|
|
1801
|
+
apartmentLabel?: string;
|
|
1802
|
+
cityLabel?: string;
|
|
1803
|
+
stateLabel?: string;
|
|
1804
|
+
zipCodeLabel?: string;
|
|
1805
|
+
countryLabel?: string;
|
|
1806
|
+
cardNumberLabel?: string;
|
|
1807
|
+
expiryLabel?: string;
|
|
1808
|
+
cvvLabel?: string;
|
|
1809
|
+
cardNameLabel?: string;
|
|
1810
|
+
newsletterLabel?: string;
|
|
1811
|
+
saveInfoLabel?: string;
|
|
1812
|
+
orderSummaryLabel?: string;
|
|
1813
|
+
subtotalLabel?: string;
|
|
1814
|
+
shippingLabel?: string;
|
|
1815
|
+
taxLabel?: string;
|
|
1816
|
+
totalLabel?: string;
|
|
1817
|
+
freeLabel?: string;
|
|
1818
|
+
orderReviewLabel?: string;
|
|
1819
|
+
contactReviewLabel?: string;
|
|
1820
|
+
shipToReviewLabel?: string;
|
|
1821
|
+
paymentReviewLabel?: string;
|
|
1822
|
+
shippingReviewLabel?: string;
|
|
1823
|
+
onComplete?: (data: CheckoutForm3FormData) => void;
|
|
1824
|
+
onNextStep?: (step: number) => void;
|
|
1825
|
+
onPreviousStep?: (step: number) => void;
|
|
1826
|
+
onFieldChange?: CheckoutForm3ChangeHandler;
|
|
1827
|
+
}
|
|
1828
|
+
declare function CheckoutForm3({ cartItems, shippingMethods, paymentMethods, taxRate, countryOptions, steps, currencySymbol, titleLabel, subtitleLabel, backLabel, continueLabel, placeOrderLabel, shippingAddressLabel, shippingMethodLabel, paymentLabel, noMethodsLabel, securePaymentLabel, emailLabel, firstNameLabel, lastNameLabel, phoneLabel, addressLabel, apartmentLabel, cityLabel, stateLabel, zipCodeLabel, countryLabel, cardNumberLabel, expiryLabel, cvvLabel, cardNameLabel, newsletterLabel, saveInfoLabel, orderSummaryLabel, subtotalLabel, shippingLabel, taxLabel, totalLabel, freeLabel, orderReviewLabel, contactReviewLabel, shipToReviewLabel, paymentReviewLabel, shippingReviewLabel, onComplete, onNextStep, onPreviousStep, onFieldChange, }: CheckoutForm3Props): react.JSX.Element;
|
|
1829
|
+
|
|
1830
|
+
type FulfilmentStage = 'Confirmed' | 'Packed' | 'Shipped' | 'Delivered';
|
|
1831
|
+
interface OrderLine {
|
|
1832
|
+
id: string;
|
|
1833
|
+
name: string;
|
|
1834
|
+
variant: string;
|
|
1835
|
+
quantity: number;
|
|
1836
|
+
price: number;
|
|
1837
|
+
image: string;
|
|
1838
|
+
}
|
|
1839
|
+
interface FulfilmentStageDetail {
|
|
1840
|
+
stage: FulfilmentStage;
|
|
1841
|
+
/** What happened, in a sentence. Present tense for a stage that has not arrived yet. */
|
|
1842
|
+
summary: string;
|
|
1843
|
+
/** Where it happened, or where it will. */
|
|
1844
|
+
location: string;
|
|
1845
|
+
/**
|
|
1846
|
+
* When it happened. `null` for a stage still ahead, which the panel renders as an
|
|
1847
|
+
* expectation rather than as a fact — a date with no event behind it is a promise, and
|
|
1848
|
+
* printing it in the same voice as a completed step is how a tracker starts lying.
|
|
1849
|
+
*/
|
|
1850
|
+
at: string | null;
|
|
1851
|
+
}
|
|
1852
|
+
interface OrderAddress {
|
|
1853
|
+
name: string;
|
|
1854
|
+
lines: string[];
|
|
1855
|
+
method: string;
|
|
1856
|
+
}
|
|
1857
|
+
interface OrderTotals {
|
|
1858
|
+
subtotal: number;
|
|
1859
|
+
shipping: number;
|
|
1860
|
+
tax: number;
|
|
1861
|
+
}
|
|
1862
|
+
interface Order$1 {
|
|
1863
|
+
number: string;
|
|
1864
|
+
/** ISO date */
|
|
1865
|
+
placedAt: string;
|
|
1866
|
+
email: string;
|
|
1867
|
+
currentStage: FulfilmentStage;
|
|
1868
|
+
/** ISO date */
|
|
1869
|
+
estimatedDelivery: string;
|
|
1870
|
+
trackingHref?: string;
|
|
1871
|
+
shipping: OrderAddress;
|
|
1872
|
+
billing: OrderAddress;
|
|
1873
|
+
totals: OrderTotals;
|
|
1874
|
+
}
|
|
1875
|
+
interface CheckoutConfirmationProps {
|
|
1876
|
+
order: Order$1;
|
|
1877
|
+
orderLines: OrderLine[];
|
|
1878
|
+
/**
|
|
1879
|
+
* Keyed by `FulfilmentStage`. The stage strip is ordered by `Object.keys`,
|
|
1880
|
+
* so define the record in the canonical `Confirmed → Packed → Shipped → Delivered` order.
|
|
1881
|
+
*/
|
|
1882
|
+
fulfilmentDetails: Record<FulfilmentStage, FulfilmentStageDetail>;
|
|
1883
|
+
/** Override price formatting (locale, currency). Defaults to USD. */
|
|
1884
|
+
formatPrice?: (value: number) => string;
|
|
1885
|
+
titleLabel?: string;
|
|
1886
|
+
/** Template with `{number}`/`{date}`/`{email}` placeholders, resolved internally. */
|
|
1887
|
+
orderPlacedLabel?: string;
|
|
1888
|
+
itemsLabel?: string;
|
|
1889
|
+
quantityLabel?: string;
|
|
1890
|
+
subtotalLabel?: string;
|
|
1891
|
+
shippingLabel?: string;
|
|
1892
|
+
taxLabel?: string;
|
|
1893
|
+
totalLabel?: string;
|
|
1894
|
+
freeLabel?: string;
|
|
1895
|
+
shippingAddressLabel?: string;
|
|
1896
|
+
billingAddressLabel?: string;
|
|
1897
|
+
continueShoppingLabel?: string;
|
|
1898
|
+
/** Prefix of the support line; the `supportLabel` link renders right after it. */
|
|
1899
|
+
contactSupportLabel?: string;
|
|
1900
|
+
supportLabel?: string;
|
|
1901
|
+
progressLabel?: string;
|
|
1902
|
+
estimatedDeliveryLabel?: string;
|
|
1903
|
+
currentStageLabel?: string;
|
|
1904
|
+
inProgressLabel?: string;
|
|
1905
|
+
expectedByLabel?: string;
|
|
1906
|
+
completedLabel?: string;
|
|
1907
|
+
statusLabel?: string;
|
|
1908
|
+
locationLabel?: string;
|
|
1909
|
+
trackOrderLabel?: string;
|
|
1910
|
+
continueShoppingHref?: string;
|
|
1911
|
+
supportHref?: string;
|
|
1912
|
+
onContinueShopping?: () => void;
|
|
1913
|
+
}
|
|
1914
|
+
/**
|
|
1915
|
+
* The screen that closes the purchase journey the checkout blocks open.
|
|
1916
|
+
*
|
|
1917
|
+
* This file has no hooks or handlers, so it still renders as a server component straight from
|
|
1918
|
+
* your order record. Only the progress tabs are interactive, and they carry their own
|
|
1919
|
+
* `'use client'` — the boundary is one child rather than the whole page.
|
|
1920
|
+
*/
|
|
1921
|
+
declare function CheckoutConfirmation({ order, orderLines, fulfilmentDetails, formatPrice, titleLabel, orderPlacedLabel, itemsLabel, quantityLabel, subtotalLabel, shippingLabel, taxLabel, totalLabel, freeLabel, shippingAddressLabel, billingAddressLabel, continueShoppingLabel, contactSupportLabel, supportLabel, progressLabel, estimatedDeliveryLabel, currentStageLabel, inProgressLabel, expectedByLabel, completedLabel, statusLabel, locationLabel, trackOrderLabel, continueShoppingHref, supportHref, onContinueShopping, }: CheckoutConfirmationProps): react.JSX.Element;
|
|
1922
|
+
|
|
1923
|
+
interface OrderHistory1Order {
|
|
1924
|
+
name: string;
|
|
1925
|
+
image: string;
|
|
1926
|
+
color: string;
|
|
1927
|
+
size: string;
|
|
1928
|
+
quantity: number;
|
|
1929
|
+
price: number;
|
|
1930
|
+
orderDate: string;
|
|
1931
|
+
}
|
|
1932
|
+
interface OrderHistory1Props {
|
|
1933
|
+
orders: OrderHistory1Order[];
|
|
1934
|
+
title?: string;
|
|
1935
|
+
description?: string;
|
|
1936
|
+
totalOrdersLabel?: string;
|
|
1937
|
+
lastOrderLabel?: string;
|
|
1938
|
+
itemLabel?: string;
|
|
1939
|
+
orderDateLabel?: string;
|
|
1940
|
+
quantityLabel?: string;
|
|
1941
|
+
priceLabel?: string;
|
|
1942
|
+
colorLabel?: string;
|
|
1943
|
+
sizeLabel?: string;
|
|
1944
|
+
viewDetailsLabel?: string;
|
|
1945
|
+
downloadInvoiceLabel?: string;
|
|
1946
|
+
onViewDetails?: () => void;
|
|
1947
|
+
onDownloadInvoice?: () => void;
|
|
1948
|
+
}
|
|
1949
|
+
declare function OrderHistory1({ orders, title, description, totalOrdersLabel, lastOrderLabel, itemLabel, orderDateLabel, quantityLabel, priceLabel, colorLabel, sizeLabel, viewDetailsLabel, downloadInvoiceLabel, onViewDetails, onDownloadInvoice, }: OrderHistory1Props): react.JSX.Element;
|
|
1950
|
+
|
|
1951
|
+
interface OrderItem {
|
|
1952
|
+
id: string;
|
|
1953
|
+
name: string;
|
|
1954
|
+
image: string;
|
|
1955
|
+
details: string;
|
|
1956
|
+
price: string;
|
|
1957
|
+
quantity: number;
|
|
1958
|
+
}
|
|
1959
|
+
interface Order {
|
|
1960
|
+
id: string;
|
|
1961
|
+
date: string;
|
|
1962
|
+
status: string;
|
|
1963
|
+
total: string;
|
|
1964
|
+
items: OrderItem[];
|
|
1965
|
+
}
|
|
1966
|
+
interface OrderHistory2Props {
|
|
1967
|
+
orders: Order[];
|
|
1968
|
+
titleLabel?: string;
|
|
1969
|
+
descriptionLabel?: string;
|
|
1970
|
+
totalOrdersLabel?: string;
|
|
1971
|
+
lastOrderLabel?: string;
|
|
1972
|
+
orderLabel?: string;
|
|
1973
|
+
placedOnLabel?: string;
|
|
1974
|
+
trackOrderLabel?: string;
|
|
1975
|
+
viewDetailsLabel?: string;
|
|
1976
|
+
qtyLabel?: string;
|
|
1977
|
+
orderTotalLabel?: string;
|
|
1978
|
+
onTrackOrder?: (order: Order) => void;
|
|
1979
|
+
onViewDetails?: (order: Order) => void;
|
|
1980
|
+
}
|
|
1981
|
+
declare function OrderHistory2({ orders, titleLabel, descriptionLabel, totalOrdersLabel, lastOrderLabel, orderLabel, placedOnLabel, trackOrderLabel, viewDetailsLabel, qtyLabel, orderTotalLabel, onTrackOrder, onViewDetails, }: OrderHistory2Props): react.JSX.Element;
|
|
1982
|
+
|
|
1983
|
+
interface FeaturedProduct$1 {
|
|
1984
|
+
id: string;
|
|
1985
|
+
name: string;
|
|
1986
|
+
brand: string;
|
|
1987
|
+
price: number;
|
|
1988
|
+
originalPrice: number;
|
|
1989
|
+
rating: number;
|
|
1990
|
+
reviewCount: number;
|
|
1991
|
+
inStock: boolean;
|
|
1992
|
+
isNew: boolean;
|
|
1993
|
+
isOnSale: boolean;
|
|
1994
|
+
image: string;
|
|
1995
|
+
colors: string[];
|
|
1996
|
+
}
|
|
1997
|
+
interface StorefrontHero1Props {
|
|
1998
|
+
title: string;
|
|
1999
|
+
description: string;
|
|
2000
|
+
products: FeaturedProduct$1[];
|
|
2001
|
+
titleAccent?: string;
|
|
2002
|
+
badge?: string;
|
|
2003
|
+
primaryCta?: CTA;
|
|
2004
|
+
secondaryCta?: CTA;
|
|
2005
|
+
onAddToCart?: (product: FeaturedProduct$1) => void;
|
|
2006
|
+
onBuyNow?: (product: FeaturedProduct$1) => void;
|
|
2007
|
+
onSelectColor?: (product: FeaturedProduct$1, index: number, color: string) => void;
|
|
2008
|
+
addToCartLabel?: string;
|
|
2009
|
+
buyNowLabel?: string;
|
|
2010
|
+
newLabel?: string;
|
|
2011
|
+
outOfStockLabel?: string;
|
|
2012
|
+
colorsLabel?: string;
|
|
2013
|
+
}
|
|
2014
|
+
declare function StorefrontHero1({ title, description, products, titleAccent, badge, primaryCta, secondaryCta, onAddToCart, onBuyNow, onSelectColor, addToCartLabel, buyNowLabel, newLabel, outOfStockLabel, colorsLabel, }: StorefrontHero1Props): react.JSX.Element;
|
|
2015
|
+
|
|
2016
|
+
interface FeaturedProduct {
|
|
2017
|
+
/** Unique identifier for the product. */
|
|
2018
|
+
id: string;
|
|
2019
|
+
/** Product display name. */
|
|
2020
|
+
name: string;
|
|
2021
|
+
/** Image URL or path for the product. */
|
|
2022
|
+
image: string;
|
|
2023
|
+
/** Current selling price in the store currency. */
|
|
2024
|
+
price: number;
|
|
2025
|
+
/** Average rating from 0 to 5. */
|
|
2026
|
+
rating: number;
|
|
2027
|
+
/** Number of reviews the product has received. */
|
|
2028
|
+
reviews: number;
|
|
2029
|
+
/** Whether the product is flagged as trending. */
|
|
2030
|
+
trending: boolean;
|
|
2031
|
+
/** Badge label shown on the slide, e.g. "Best Seller". */
|
|
2032
|
+
tag: string;
|
|
2033
|
+
}
|
|
2034
|
+
interface StorefrontHero2Props {
|
|
2035
|
+
/** Main heading displayed in the hero. */
|
|
2036
|
+
title: string;
|
|
2037
|
+
/** Supporting description under the heading. */
|
|
2038
|
+
description: string;
|
|
2039
|
+
/** Products rendered in the auto-rotating carousel. */
|
|
2040
|
+
products: FeaturedProduct[];
|
|
2041
|
+
/** Small pill badge above the heading. */
|
|
2042
|
+
badge?: string;
|
|
2043
|
+
/** Placeholder text for the search input. */
|
|
2044
|
+
searchPlaceholder?: string;
|
|
2045
|
+
/** Label of the search submit button. */
|
|
2046
|
+
searchLabel?: string;
|
|
2047
|
+
/** Primary call to action; rendered as a link when it has an href. */
|
|
2048
|
+
primaryCta?: CTA;
|
|
2049
|
+
/** Secondary call to action; rendered as a link when it has an href. */
|
|
2050
|
+
secondaryCta?: CTA;
|
|
2051
|
+
/** Copy shown inside each product slide below the product name. */
|
|
2052
|
+
featuredDescription?: string;
|
|
2053
|
+
/** Label of the call to action inside each product slide. */
|
|
2054
|
+
productCtaLabel?: string;
|
|
2055
|
+
/** Label shown next to the review count. */
|
|
2056
|
+
reviewsLabel?: string;
|
|
2057
|
+
/** Label of the trending badge on product slides. */
|
|
2058
|
+
trendingLabel?: string;
|
|
2059
|
+
/** Called with the current query when the search is submitted. */
|
|
2060
|
+
onSearch?: (query: string) => void;
|
|
2061
|
+
/** Called when a product slide call to action is clicked. */
|
|
2062
|
+
onProductClick?: (product: FeaturedProduct) => void;
|
|
2063
|
+
}
|
|
2064
|
+
declare function StorefrontHero2({ title, description, products, badge, searchPlaceholder, searchLabel, primaryCta, secondaryCta, featuredDescription, productCtaLabel, reviewsLabel, trendingLabel, onSearch, onProductClick, }: StorefrontHero2Props): react.JSX.Element;
|
|
2065
|
+
|
|
2066
|
+
interface Department {
|
|
2067
|
+
/** Unique identifier */
|
|
2068
|
+
id: string;
|
|
2069
|
+
/** Department name */
|
|
2070
|
+
name: string;
|
|
2071
|
+
/** Image URL for the department chip */
|
|
2072
|
+
image: string;
|
|
2073
|
+
/** Accessible image description (falls back to `name`) */
|
|
2074
|
+
imageAlt?: string;
|
|
2075
|
+
/** Product count label shown under the name */
|
|
2076
|
+
count?: string;
|
|
2077
|
+
/** Link destination when the department is a link */
|
|
2078
|
+
href?: string;
|
|
2079
|
+
}
|
|
2080
|
+
interface FeaturedDeal {
|
|
2081
|
+
/** Unique identifier */
|
|
2082
|
+
id: string;
|
|
2083
|
+
/** Deal title */
|
|
2084
|
+
name: string;
|
|
2085
|
+
/** Short supporting description */
|
|
2086
|
+
description: string;
|
|
2087
|
+
/** Image URL */
|
|
2088
|
+
image: string;
|
|
2089
|
+
/** Accessible image description (falls back to `name`) */
|
|
2090
|
+
imageAlt?: string;
|
|
2091
|
+
/** Current price */
|
|
2092
|
+
price: number;
|
|
2093
|
+
/** Original price, rendered struck-through when present */
|
|
2094
|
+
originalPrice?: number;
|
|
2095
|
+
/** Optional call to action shown on the card */
|
|
2096
|
+
cta?: CTA;
|
|
2097
|
+
}
|
|
2098
|
+
interface StoreLocator {
|
|
2099
|
+
/** Locator section title */
|
|
2100
|
+
title: string;
|
|
2101
|
+
/** Locator section description */
|
|
2102
|
+
description: string;
|
|
2103
|
+
/** Locator button label */
|
|
2104
|
+
ctaLabel: string;
|
|
2105
|
+
/** Optional link destination for the locator button */
|
|
2106
|
+
ctaHref?: string;
|
|
2107
|
+
}
|
|
2108
|
+
interface StorefrontHero5Props {
|
|
2109
|
+
/** Small pill shown above the title */
|
|
2110
|
+
badge?: string;
|
|
2111
|
+
/** Main headline */
|
|
2112
|
+
title: string;
|
|
2113
|
+
/** Accent text appended to the headline */
|
|
2114
|
+
titleAccent?: string;
|
|
2115
|
+
/** Supporting paragraph under the headline */
|
|
2116
|
+
description: string;
|
|
2117
|
+
/** Primary call to action */
|
|
2118
|
+
primaryCta?: CTA;
|
|
2119
|
+
/** Secondary call to action */
|
|
2120
|
+
secondaryCta?: CTA;
|
|
2121
|
+
/** Shipping banner text shown under the CTAs */
|
|
2122
|
+
shippingInfo?: string;
|
|
2123
|
+
/** Department categories rendered as a grid */
|
|
2124
|
+
departments: Department[];
|
|
2125
|
+
/** Featured deals rendered as cards */
|
|
2126
|
+
featuredDeals: FeaturedDeal[];
|
|
2127
|
+
/** Store locator strip rendered at the bottom */
|
|
2128
|
+
storeLocator?: StoreLocator;
|
|
2129
|
+
/** Invoked when a department is clicked (departments without `href`) */
|
|
2130
|
+
onDepartmentClick?: (department: Department) => void;
|
|
2131
|
+
/** Invoked when a deal CTA is clicked (deals whose `cta` has no `href`) */
|
|
2132
|
+
onShopNow?: (deal: FeaturedDeal) => void;
|
|
2133
|
+
/** Invoked when the locator button is clicked (when `ctaHref` is absent) */
|
|
2134
|
+
onLocateStores?: () => void;
|
|
2135
|
+
/** Label for the deal call-to-action button */
|
|
2136
|
+
shopNowLabel?: string;
|
|
2137
|
+
}
|
|
2138
|
+
declare function StorefrontHero5({ badge, title, titleAccent, description, primaryCta, secondaryCta, shippingInfo, departments, featuredDeals, storeLocator, onDepartmentClick, onShopNow, onLocateStores, shopNowLabel, }: StorefrontHero5Props): react.JSX.Element;
|
|
2139
|
+
|
|
2140
|
+
interface HeroDeal {
|
|
2141
|
+
/** Unique identifier for the deal. */
|
|
2142
|
+
id: string;
|
|
2143
|
+
/** Deal name shown in the badge, e.g. "Summer Sale". */
|
|
2144
|
+
title: string;
|
|
2145
|
+
/** Discount label, e.g. "50% OFF". */
|
|
2146
|
+
discount: string;
|
|
2147
|
+
/** Countdown text, e.g. "2d : 15h : 30m". */
|
|
2148
|
+
endTime: string;
|
|
2149
|
+
}
|
|
2150
|
+
interface HeroCategory {
|
|
2151
|
+
/** Unique identifier for the category. */
|
|
2152
|
+
id: string;
|
|
2153
|
+
/** Category name. */
|
|
2154
|
+
name: string;
|
|
2155
|
+
/** Product count label, e.g. "2.5k+". */
|
|
2156
|
+
count: string;
|
|
2157
|
+
/** Image URL for the category card. */
|
|
2158
|
+
image: string;
|
|
2159
|
+
/** Accessible image description (falls back to `name`). */
|
|
2160
|
+
imageAlt?: string;
|
|
2161
|
+
/** Optional link destination; renders the card arrow as a link when present. */
|
|
2162
|
+
href?: string;
|
|
2163
|
+
}
|
|
2164
|
+
interface StorefrontHero6Props {
|
|
2165
|
+
/** Small pill shown above the headline. */
|
|
2166
|
+
badge?: string;
|
|
2167
|
+
/** Main headline. */
|
|
2168
|
+
title: string;
|
|
2169
|
+
/** Accent line rendered on a new line after the headline. */
|
|
2170
|
+
subtitle?: string;
|
|
2171
|
+
/** Supporting paragraph under the headline. */
|
|
2172
|
+
description: string;
|
|
2173
|
+
/** Deals rendered in the sticky auto-rotating top bar. */
|
|
2174
|
+
deals: HeroDeal[];
|
|
2175
|
+
/** Product categories rendered as a card grid. */
|
|
2176
|
+
categories: HeroCategory[];
|
|
2177
|
+
/** Milliseconds between auto-rotating deals (default 3000). */
|
|
2178
|
+
rotationInterval?: number;
|
|
2179
|
+
/** Label shown before the deal countdown, e.g. "Ends in". */
|
|
2180
|
+
endsInLabel?: string;
|
|
2181
|
+
/** Label of the shop-now button in the deals bar. */
|
|
2182
|
+
shopNowLabel?: string;
|
|
2183
|
+
/** Unit appended to each category product count. */
|
|
2184
|
+
productsLabel?: string;
|
|
2185
|
+
/** Prefix for the category arrow accessible label. */
|
|
2186
|
+
viewLabel?: string;
|
|
2187
|
+
/** Called when the shop-now button in the deals bar is clicked. */
|
|
2188
|
+
onShopNow?: (deal: HeroDeal) => void;
|
|
2189
|
+
/** Called when a category arrow is clicked (categories without `href`). */
|
|
2190
|
+
onCategoryClick?: (category: HeroCategory) => void;
|
|
2191
|
+
}
|
|
2192
|
+
declare function StorefrontHero6({ badge, title, subtitle, description, deals, categories, rotationInterval, endsInLabel, shopNowLabel, productsLabel, viewLabel, onShopNow, onCategoryClick, }: StorefrontHero6Props): react.JSX.Element;
|
|
2193
|
+
|
|
2194
|
+
type AppShell1NavIcon = 'layout-dashboard' | 'package' | 'user' | 'settings' | 'home' | 'shopping-cart' | 'bar-chart-3' | 'users' | 'folder-kanban';
|
|
2195
|
+
interface AppShell1NavItem {
|
|
2196
|
+
label: string;
|
|
2197
|
+
href: string;
|
|
2198
|
+
icon: AppShell1NavIcon;
|
|
2199
|
+
active?: boolean;
|
|
2200
|
+
}
|
|
2201
|
+
interface AppShell1User {
|
|
2202
|
+
name: string;
|
|
2203
|
+
email: string;
|
|
2204
|
+
initials: string;
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
interface AppShell1BreadcrumbItem {
|
|
2208
|
+
label: string;
|
|
2209
|
+
href?: string;
|
|
2210
|
+
}
|
|
2211
|
+
interface AppShell1Stat {
|
|
2212
|
+
label: string;
|
|
2213
|
+
value: string;
|
|
2214
|
+
}
|
|
2215
|
+
interface AppShell1Props {
|
|
2216
|
+
brandName?: string;
|
|
2217
|
+
navGroupLabel?: string;
|
|
2218
|
+
navItems?: AppShell1NavItem[];
|
|
2219
|
+
user?: AppShell1User;
|
|
2220
|
+
breadcrumb?: AppShell1BreadcrumbItem[];
|
|
2221
|
+
pageTitle?: string;
|
|
2222
|
+
pageDescription?: string;
|
|
2223
|
+
action?: CTA;
|
|
2224
|
+
stats?: AppShell1Stat[];
|
|
2225
|
+
children?: ReactNode;
|
|
2226
|
+
className?: string;
|
|
2227
|
+
}
|
|
2228
|
+
declare function AppShell1({ brandName, navGroupLabel, navItems, user, breadcrumb, pageTitle, pageDescription, action, stats, children, className, }: AppShell1Props): react.JSX.Element;
|
|
2229
|
+
|
|
2230
|
+
interface LoginPage1SocialButton {
|
|
2231
|
+
name: string;
|
|
2232
|
+
icon: LucideIcon;
|
|
2233
|
+
}
|
|
2234
|
+
interface LoginPage1FormData {
|
|
2235
|
+
email: string;
|
|
2236
|
+
password: string;
|
|
2237
|
+
remember: boolean;
|
|
2238
|
+
}
|
|
2239
|
+
interface LoginPage1Props {
|
|
2240
|
+
logoText?: string;
|
|
2241
|
+
welcomeTitleLabel?: string;
|
|
2242
|
+
welcomeDescriptionLabel?: string;
|
|
2243
|
+
emailLabel?: string;
|
|
2244
|
+
emailPlaceholder?: string;
|
|
2245
|
+
passwordLabel?: string;
|
|
2246
|
+
passwordPlaceholder?: string;
|
|
2247
|
+
rememberMeLabel?: string;
|
|
2248
|
+
forgotPasswordLabel?: string;
|
|
2249
|
+
signInLabel?: string;
|
|
2250
|
+
orContinueWithLabel?: string;
|
|
2251
|
+
dontHaveAccountLabel?: string;
|
|
2252
|
+
createAccountLabel?: string;
|
|
2253
|
+
/** Template with a `{provider}` placeholder for the social login buttons' aria-labels. */
|
|
2254
|
+
socialAriaLabelTemplate?: string;
|
|
2255
|
+
showPasswordAriaLabel?: string;
|
|
2256
|
+
hidePasswordAriaLabel?: string;
|
|
2257
|
+
socialButtons?: LoginPage1SocialButton[];
|
|
2258
|
+
onSubmit?: (data: LoginPage1FormData) => void;
|
|
2259
|
+
onForgotPassword?: () => void;
|
|
2260
|
+
onCreateAccount?: () => void;
|
|
2261
|
+
onSocialLogin?: (providerName: string) => void;
|
|
2262
|
+
}
|
|
2263
|
+
declare function LoginPage1({ logoText, welcomeTitleLabel, welcomeDescriptionLabel, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, rememberMeLabel, forgotPasswordLabel, signInLabel, orContinueWithLabel, dontHaveAccountLabel, createAccountLabel, socialAriaLabelTemplate, showPasswordAriaLabel, hidePasswordAriaLabel, socialButtons, onSubmit, onForgotPassword, onCreateAccount, onSocialLogin, }: LoginPage1Props): react.JSX.Element;
|
|
2264
|
+
|
|
2265
|
+
interface LoginPage2SocialButton {
|
|
2266
|
+
name: string;
|
|
2267
|
+
icon: LucideIcon;
|
|
2268
|
+
}
|
|
2269
|
+
interface LoginPage2Props {
|
|
2270
|
+
/** Brand text rendered next to the block logo. Omit to hide the logo. */
|
|
2271
|
+
logoText?: string;
|
|
2272
|
+
welcomeTitleLabel?: string;
|
|
2273
|
+
welcomeDescriptionLabel?: string;
|
|
2274
|
+
emailLabel?: string;
|
|
2275
|
+
emailPlaceholder?: string;
|
|
2276
|
+
passwordLabel?: string;
|
|
2277
|
+
passwordPlaceholder?: string;
|
|
2278
|
+
rememberMeLabel?: string;
|
|
2279
|
+
forgotPasswordLabel?: string;
|
|
2280
|
+
signInLabel?: string;
|
|
2281
|
+
orContinueWithLabel?: string;
|
|
2282
|
+
/** Social login buttons rendered in a 2-column grid. Pass an empty array to hide. */
|
|
2283
|
+
socialButtons?: LoginPage2SocialButton[];
|
|
2284
|
+
dontHaveAccountLabel?: string;
|
|
2285
|
+
signUpLabel?: string;
|
|
2286
|
+
showPasswordLabel?: string;
|
|
2287
|
+
hidePasswordLabel?: string;
|
|
2288
|
+
onSubmit?: (email: string, password: string) => void;
|
|
2289
|
+
onForgotPassword?: () => void;
|
|
2290
|
+
onSignUp?: () => void;
|
|
2291
|
+
}
|
|
2292
|
+
declare function LoginPage2({ logoText, welcomeTitleLabel, welcomeDescriptionLabel, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, rememberMeLabel, forgotPasswordLabel, signInLabel, orContinueWithLabel, socialButtons, dontHaveAccountLabel, signUpLabel, showPasswordLabel, hidePasswordLabel, onSubmit, onForgotPassword, onSignUp, }: LoginPage2Props): react.JSX.Element;
|
|
2293
|
+
|
|
2294
|
+
interface SignUpPage1SocialButton {
|
|
2295
|
+
name: string;
|
|
2296
|
+
icon: LucideIcon;
|
|
2297
|
+
}
|
|
2298
|
+
interface SignUpPage1Data {
|
|
2299
|
+
fullName: string;
|
|
2300
|
+
email: string;
|
|
2301
|
+
password: string;
|
|
2302
|
+
}
|
|
2303
|
+
interface SignUpPage1Props {
|
|
2304
|
+
/** Brand text shown under the logo mark. Omit to hide it. */
|
|
2305
|
+
logoText?: string;
|
|
2306
|
+
createAccountTitleLabel?: string;
|
|
2307
|
+
createAccountDescriptionLabel?: string;
|
|
2308
|
+
fullNameLabel?: string;
|
|
2309
|
+
fullNamePlaceholder?: string;
|
|
2310
|
+
emailLabel?: string;
|
|
2311
|
+
emailPlaceholder?: string;
|
|
2312
|
+
passwordLabel?: string;
|
|
2313
|
+
passwordPlaceholder?: string;
|
|
2314
|
+
createAccountLabel?: string;
|
|
2315
|
+
orSignUpWithLabel?: string;
|
|
2316
|
+
/** aria-label template for each social button. Use `{name}` as the button name placeholder. */
|
|
2317
|
+
socialAriaLabel?: string;
|
|
2318
|
+
/** Social sign-up buttons rendered in a 3-column grid. Pass an empty array to hide. */
|
|
2319
|
+
socialButtons?: SignUpPage1SocialButton[];
|
|
2320
|
+
alreadyHaveAccountLabel?: string;
|
|
2321
|
+
signInLabel?: string;
|
|
2322
|
+
termsLabel?: string;
|
|
2323
|
+
termsLinkLabel?: string;
|
|
2324
|
+
termsHref?: string;
|
|
2325
|
+
termsAndLabel?: string;
|
|
2326
|
+
privacyLinkLabel?: string;
|
|
2327
|
+
privacyHref?: string;
|
|
2328
|
+
onSubmit?: (data: SignUpPage1Data) => void;
|
|
2329
|
+
onSignIn?: () => void;
|
|
2330
|
+
}
|
|
2331
|
+
declare function SignUpPage1({ logoText, createAccountTitleLabel, createAccountDescriptionLabel, fullNameLabel, fullNamePlaceholder, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, createAccountLabel, orSignUpWithLabel, socialAriaLabel, socialButtons, alreadyHaveAccountLabel, signInLabel, termsLabel, termsLinkLabel, termsHref, termsAndLabel, privacyLinkLabel, privacyHref, onSubmit, onSignIn, }: SignUpPage1Props): react.JSX.Element;
|
|
2332
|
+
|
|
2333
|
+
interface ForgotPasswordPage1Props {
|
|
2334
|
+
/** Callback fired with the email when the user submits the reset-code step. */
|
|
2335
|
+
onSendResetCode?: (email: string) => void;
|
|
2336
|
+
/** Callback fired with the 6-digit code when the user verifies it. */
|
|
2337
|
+
onVerifyCode?: (code: string) => void;
|
|
2338
|
+
/** Callback fired when the user requests a new code. */
|
|
2339
|
+
onResendCode?: () => void;
|
|
2340
|
+
/** Callback fired with the new password when the user sets it. */
|
|
2341
|
+
onSetNewPassword?: (password: string) => void;
|
|
2342
|
+
/** Callback fired when the user goes back to login from the success step. */
|
|
2343
|
+
onBackToLogin?: () => void;
|
|
2344
|
+
step1TitleLabel?: string;
|
|
2345
|
+
step1DescriptionLabel?: string;
|
|
2346
|
+
emailLabel?: string;
|
|
2347
|
+
emailPlaceholder?: string;
|
|
2348
|
+
sendResetCodeLabel?: string;
|
|
2349
|
+
step2TitleLabel?: string;
|
|
2350
|
+
step2DescriptionLabel?: string;
|
|
2351
|
+
codeLabel?: string;
|
|
2352
|
+
verifyCodeLabel?: string;
|
|
2353
|
+
resendCodeLabel?: string;
|
|
2354
|
+
resendCodeCooldownLabel?: string;
|
|
2355
|
+
didNotReceiveLabel?: string;
|
|
2356
|
+
step3TitleLabel?: string;
|
|
2357
|
+
step3DescriptionLabel?: string;
|
|
2358
|
+
newPasswordLabel?: string;
|
|
2359
|
+
setNewPasswordLabel?: string;
|
|
2360
|
+
strengthWeakLabel?: string;
|
|
2361
|
+
strengthMediumLabel?: string;
|
|
2362
|
+
strengthStrongLabel?: string;
|
|
2363
|
+
strengthIndicatorLabel?: string;
|
|
2364
|
+
step4TitleLabel?: string;
|
|
2365
|
+
step4DescriptionLabel?: string;
|
|
2366
|
+
backToLoginLabel?: string;
|
|
2367
|
+
dontHaveAccountLabel?: string;
|
|
2368
|
+
signUpLabel?: string;
|
|
2369
|
+
showPasswordLabel?: string;
|
|
2370
|
+
hidePasswordLabel?: string;
|
|
2371
|
+
}
|
|
2372
|
+
declare function ForgotPasswordPage1({ onSendResetCode, onVerifyCode, onResendCode, onSetNewPassword, onBackToLogin, step1TitleLabel, step1DescriptionLabel, emailLabel, emailPlaceholder, sendResetCodeLabel, step2TitleLabel, step2DescriptionLabel, codeLabel, verifyCodeLabel, resendCodeLabel, resendCodeCooldownLabel, didNotReceiveLabel, step3TitleLabel, step3DescriptionLabel, newPasswordLabel, setNewPasswordLabel, strengthWeakLabel, strengthMediumLabel, strengthStrongLabel, strengthIndicatorLabel, step4TitleLabel, step4DescriptionLabel, backToLoginLabel, dontHaveAccountLabel, signUpLabel, showPasswordLabel, hidePasswordLabel, }: ForgotPasswordPage1Props): react.JSX.Element;
|
|
2373
|
+
|
|
2374
|
+
interface Verify1Props {
|
|
2375
|
+
verifyTitleLabel?: string;
|
|
2376
|
+
verifyDescriptionLabel?: string;
|
|
2377
|
+
backupCodeTitleLabel?: string;
|
|
2378
|
+
backupCodeDescriptionLabel?: string;
|
|
2379
|
+
backupCodeLabel?: string;
|
|
2380
|
+
backupCodePlaceholder?: string;
|
|
2381
|
+
otpAriaLabel?: string;
|
|
2382
|
+
verifyLabel?: string;
|
|
2383
|
+
resendCodeLabel?: string;
|
|
2384
|
+
/** Plantilla con {n} sustituido por los segundos restantes. */
|
|
2385
|
+
resendCooldownLabel?: string;
|
|
2386
|
+
useBackupCodeLabel?: string;
|
|
2387
|
+
useAuthenticatorLabel?: string;
|
|
2388
|
+
tooManyAttemptsLabel?: string;
|
|
2389
|
+
/** Plantilla con {n} sustituido por los intentos restantes. */
|
|
2390
|
+
attemptsLeftLabel?: string;
|
|
2391
|
+
verifiedTitleLabel?: string;
|
|
2392
|
+
verifiedDescriptionLabel?: string;
|
|
2393
|
+
continueLabel?: string;
|
|
2394
|
+
demoOtpHintLabel?: string;
|
|
2395
|
+
/** Plantilla con {code} sustituido por el código de respaldo de la demo. */
|
|
2396
|
+
demoBackupHintLabel?: string;
|
|
2397
|
+
/** Verificación real del código OTP. Devuelve true si es correcto. */
|
|
2398
|
+
onVerify?: (code: string) => Promise<boolean>;
|
|
2399
|
+
/** Verificación real del código de respaldo. Devuelve true si es correcto. */
|
|
2400
|
+
onVerifyBackup?: (code: string) => Promise<boolean>;
|
|
2401
|
+
/** Se dispara al pedir reenviar el código. */
|
|
2402
|
+
onResend?: () => void;
|
|
2403
|
+
/** Se dispara al continuar tras la verificación. */
|
|
2404
|
+
onContinue?: () => void;
|
|
2405
|
+
}
|
|
2406
|
+
declare function Verify1({ verifyTitleLabel, verifyDescriptionLabel, backupCodeTitleLabel, backupCodeDescriptionLabel, backupCodeLabel, backupCodePlaceholder, otpAriaLabel, verifyLabel, resendCodeLabel, resendCooldownLabel, useBackupCodeLabel, useAuthenticatorLabel, tooManyAttemptsLabel, attemptsLeftLabel, verifiedTitleLabel, verifiedDescriptionLabel, continueLabel, demoOtpHintLabel, demoBackupHintLabel, onVerify, onVerifyBackup, onResend, onContinue, }: Verify1Props): react.JSX.Element;
|
|
2407
|
+
|
|
2408
|
+
export { AppShell1, Avatar, AvatarFallback, AvatarImage, Badge, Banner1, Button, type CTA, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryFilter1, CategoryFilter2, type CategoryFilter2Category, type CategoryFilter2Color, type CategoryFilter2Filters, type CategoryFilter2PriceRange, type CategoryFilter2Props, type CategoryFilter2SortOption, CategoryFilter4, type CategoryFilter4Facets, type CategoryFilter4Product, type CategoryFilter4Props, CategoryIcon, type CategoryIconName, type CategoryIconProps, CheckoutConfirmation, type CheckoutConfirmationProps, type CheckoutFieldError, type CheckoutFieldErrors, CheckoutForm1, type CheckoutForm1ChangeHandler, type CheckoutForm1CountryOption, type CheckoutForm1FieldDescriptions, type CheckoutForm1FieldErrors, type CheckoutForm1FormData, type CheckoutForm1OrderSummary, type CheckoutForm1OrderSummaryItem, type CheckoutForm1Props, CheckoutForm2, type CheckoutForm2Data, type CheckoutForm2FieldDescriptions, type CheckoutForm2FieldErrors, type CheckoutForm2Item, type CheckoutForm2Props, type CheckoutForm2Totals, CheckoutForm3, type CheckoutForm3CartItem, type CheckoutForm3CountryOption, type CheckoutForm3FormData, type CheckoutForm3Props, type CheckoutForm3ShippingMethod, type CollectionItem, CtaSection1, type CtaSection1Props, FaqBlock1, type FaqBlock1Props, type FaqItem, Feature1, type Feature1Item, type Feature1Props, Feature2, type Feature2Item, type Feature2Props, type FeaturedProduct$1 as FeaturedProduct, type FilterProduct, type FooterLink, type FooterLinkColumn, FooterSection1, FooterSection3, type FooterSection3Props, FooterSection4, type FooterSection4Contact, type FooterSection4Link, type FooterSection4LinkColumn, type FooterSection4Props, type FooterSection4SocialIcon, type FooterSection4SocialLink, ForgotPasswordPage1, type ForgotPasswordPage1Props, type FulfilmentStage, type FulfilmentStageDetail, HeroSection1, LoginPage1, type LoginPage1FormData, type LoginPage1Props, type LoginPage1SocialButton, LoginPage2, type LoginPage2Props, type LoginPage2SocialButton, LogoCloud1, type LogoCloud1Platform, type LogoCloud1Props, MegaMenu, type MegaMenuProps, type MenuItem, MobileCategoryDrawer, type MobileCategoryDrawerProps, Navbar1, Navbar2, Navbar3, Navbar4, type Order$1 as Order, type OrderAddress, OrderHistory1, OrderHistory2, type OrderLine, type OrderTotals, PricingSection1, type PricingSection1Props, type PricingTier, ProductCard1, ProductCard2, ProductCard3, ProductCard5, ProductCategory1, type ProductCategory1Category, type ProductCategory1CategoryIcon, type ProductCategory1Props, ProductCategory2, type ProductCategory2Category, type ProductCategory2Props, ProductCategory4, ProductCategory5, ProductOverview1, ProductOverview2, type ProductOverview2Product, type ProductOverview2Props, ProductOverview5, type ProductOverview5Product, type ProductOverview5Props, type ProductOverview5Review, ProductQuickView, ReviewRating1, type ReviewRating1Review, ReviewRating2, ShoppingCart1, ShoppingCart2, type ShoppingCart2Item, type ShoppingCart2Props, ShoppingCart3, type ShoppingCart3CartItem, type ShoppingCart3Props, ShoppingCart4, type ShoppingCart4Item, type ShoppingCart4Props, SignUpPage1, type SignUpPage1Data, type SignUpPage1Props, type SignUpPage1SocialButton, type SocialLink, Statistic1, type Statistic1Props, type StatisticItem, StoreCategory, StoreContainer1, type StoreContainer1Props, StorefrontHero1, type StorefrontHero1Props, StorefrontHero2, StorefrontHero5, StorefrontHero6, Testimonial1, type Testimonial1Item, type Testimonial1Props, Testimonial2, type Testimonial2Item, type Testimonial2Props, Verify1, type Verify1Props, badgeVariants, buttonVariants, categoryIconNameSchema, categoryIconPropsSchema, cn, collectionItemSchema, megaMenuPropsSchema, menuItemSchema, mobileCategoryDrawerPropsSchema };
|