@sakaniui/react 0.1.0 → 0.3.1
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/README.md +64 -17
- package/dist/TopBar-B88BmNES.js +3777 -0
- package/dist/TopBar-CM5noziF.cjs +1 -0
- package/dist/blocks/AccountOverviewBlock/AccountOverviewBlock.d.ts +8 -0
- package/dist/blocks/AccountOverviewBlock/index.d.ts +2 -0
- package/dist/blocks/ActivityLogBlock/ActivityLogBlock.d.ts +8 -0
- package/dist/blocks/ActivityLogBlock/index.d.ts +2 -0
- package/dist/blocks/AppHeaderBlock/AppHeaderBlock.d.ts +19 -0
- package/dist/blocks/AppHeaderBlock/index.d.ts +2 -0
- package/dist/blocks/Billing/AddCardFormBlock/AddCardFormBlock.d.ts +20 -0
- package/dist/blocks/Billing/AddCardFormBlock/index.d.ts +2 -0
- package/dist/blocks/Billing/BillingAddressBlock/BillingAddressBlock.d.ts +24 -0
- package/dist/blocks/Billing/BillingAddressBlock/index.d.ts +2 -0
- package/dist/blocks/Billing/BillingHistoryBlock/BillingHistoryBlock.d.ts +24 -0
- package/dist/blocks/Billing/BillingHistoryBlock/index.d.ts +2 -0
- package/dist/blocks/Billing/CurrentPlanBlock/CurrentPlanBlock.d.ts +29 -0
- package/dist/blocks/Billing/CurrentPlanBlock/index.d.ts +2 -0
- package/dist/blocks/Billing/PaymentMethodBlock/PaymentMethodBlock.d.ts +23 -0
- package/dist/blocks/Billing/PaymentMethodBlock/cardBrandIcons.d.ts +3 -0
- package/dist/blocks/Billing/PaymentMethodBlock/index.d.ts +3 -0
- package/dist/blocks/BlogListingBlock/BlogListingBlock.d.ts +33 -0
- package/dist/blocks/BlogListingBlock/index.d.ts +2 -0
- package/dist/blocks/CRMDashboardBlock/CRMDashboardBlock.d.ts +6 -0
- package/dist/blocks/CRMDashboardBlock/index.d.ts +2 -0
- package/dist/blocks/CareersBlock/CareersBlock.d.ts +16 -0
- package/dist/blocks/CareersBlock/index.d.ts +2 -0
- package/dist/blocks/ChatInterfaceBlock/ChatInterfaceBlock.d.ts +8 -0
- package/dist/blocks/ChatInterfaceBlock/index.d.ts +2 -0
- package/dist/blocks/CheckoutFlowBlock/CheckoutFlowBlock.d.ts +33 -0
- package/dist/blocks/CheckoutFlowBlock/index.d.ts +2 -0
- package/dist/blocks/CtaBannerBlock/CtaBannerBlock.d.ts +19 -0
- package/dist/blocks/CtaBannerBlock/index.d.ts +2 -0
- package/dist/blocks/DataTableBlock/DataTableBlock.d.ts +8 -0
- package/dist/blocks/DataTableBlock/index.d.ts +2 -0
- package/dist/blocks/EmailVerificationBlock/EmailVerificationBlock.d.ts +13 -0
- package/dist/blocks/EmailVerificationBlock/index.d.ts +2 -0
- package/dist/blocks/FaqBlock/FaqBlock.d.ts +17 -0
- package/dist/blocks/FaqBlock/index.d.ts +2 -0
- package/dist/blocks/FeatureGridBlock/FeatureGridBlock.d.ts +15 -0
- package/dist/blocks/FeatureGridBlock/index.d.ts +2 -0
- package/dist/blocks/FileUploadPanelBlock/FileUploadPanelBlock.d.ts +9 -0
- package/dist/blocks/FileUploadPanelBlock/index.d.ts +2 -0
- package/dist/blocks/ForgotPasswordBlock/ForgotPasswordBlock.d.ts +12 -0
- package/dist/blocks/ForgotPasswordBlock/index.d.ts +2 -0
- package/dist/blocks/FormModalBlock/FormModalBlock.d.ts +8 -0
- package/dist/blocks/FormModalBlock/index.d.ts +2 -0
- package/dist/blocks/HeroBlock/HeroBlock.d.ts +27 -0
- package/dist/blocks/HeroBlock/ScratchRevealImage.d.ts +11 -0
- package/dist/blocks/HeroBlock/index.d.ts +2 -0
- package/dist/blocks/InlineCtaBlock/InlineCtaBlock.d.ts +13 -0
- package/dist/blocks/InlineCtaBlock/index.d.ts +2 -0
- package/dist/blocks/KanbanBoardBlock/KanbanBoardBlock.d.ts +8 -0
- package/dist/blocks/KanbanBoardBlock/index.d.ts +2 -0
- package/dist/blocks/LoginBlock/LoginBlock.d.ts +18 -0
- package/dist/blocks/LoginBlock/index.d.ts +2 -0
- package/dist/blocks/LogoCloudBlock/LogoCloudBlock.d.ts +12 -0
- package/dist/blocks/LogoCloudBlock/brandLogos.d.ts +10 -0
- package/dist/blocks/LogoCloudBlock/index.d.ts +3 -0
- package/dist/blocks/MultistepModalBlock/MultistepModalBlock.d.ts +10 -0
- package/dist/blocks/MultistepModalBlock/index.d.ts +2 -0
- package/dist/blocks/NotificationPanelBlock/NotificationPanelBlock.d.ts +15 -0
- package/dist/blocks/NotificationPanelBlock/index.d.ts +2 -0
- package/dist/blocks/OnboardingProgressBlock/OnboardingProgressBlock.d.ts +15 -0
- package/dist/blocks/OnboardingProgressBlock/index.d.ts +2 -0
- package/dist/blocks/OrderConfirmationBlock/OrderConfirmationBlock.d.ts +25 -0
- package/dist/blocks/OrderConfirmationBlock/index.d.ts +2 -0
- package/dist/blocks/PricingTableBlock/PricingTableBlock.d.ts +26 -0
- package/dist/blocks/PricingTableBlock/index.d.ts +2 -0
- package/dist/blocks/ProductDetailBlock/ProductDetailBlock.d.ts +39 -0
- package/dist/blocks/ProductDetailBlock/index.d.ts +2 -0
- package/dist/blocks/ProductGridBlock/ProductGridBlock.d.ts +24 -0
- package/dist/blocks/ProductGridBlock/index.d.ts +2 -0
- package/dist/blocks/ProfileSettingsBlock/ProfileSettingsBlock.d.ts +13 -0
- package/dist/blocks/ProfileSettingsBlock/index.d.ts +2 -0
- package/dist/blocks/ResetPasswordBlock/ResetPasswordBlock.d.ts +11 -0
- package/dist/blocks/ResetPasswordBlock/index.d.ts +2 -0
- package/dist/blocks/SectionFooterBlock/SectionFooterBlock.d.ts +14 -0
- package/dist/blocks/SectionFooterBlock/index.d.ts +2 -0
- package/dist/blocks/ShoppingCartBlock/ShoppingCartBlock.d.ts +23 -0
- package/dist/blocks/ShoppingCartBlock/index.d.ts +2 -0
- package/dist/blocks/SignUpBlock/SignUpBlock.d.ts +20 -0
- package/dist/blocks/SignUpBlock/index.d.ts +2 -0
- package/dist/blocks/TeamSectionBlock/TeamSectionBlock.d.ts +16 -0
- package/dist/blocks/TeamSectionBlock/index.d.ts +2 -0
- package/dist/blocks/TestimonialBlock/TestimonialBlock.d.ts +13 -0
- package/dist/blocks/TestimonialBlock/index.d.ts +2 -0
- package/dist/blocks/TwoFactorAuthBlock/TwoFactorAuthBlock.d.ts +12 -0
- package/dist/blocks/TwoFactorAuthBlock/index.d.ts +2 -0
- package/dist/blocks/index.d.ts +90 -0
- package/dist/blocks.cjs +1 -0
- package/dist/blocks.d.ts +2 -0
- package/dist/blocks.mjs +5935 -0
- package/dist/components/Combobox/Combobox.d.ts +2 -2
- package/dist/components/ECommerceComponents/CartItem/CartItem.d.ts +21 -0
- package/dist/components/ECommerceComponents/CartItem/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/CheckoutSteps/CheckoutSteps.d.ts +11 -0
- package/dist/components/ECommerceComponents/CheckoutSteps/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/ColorSwatch/ColorSwatch.d.ts +14 -0
- package/dist/components/ECommerceComponents/ColorSwatch/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/PriceDisplay/PriceDisplay.d.ts +12 -0
- package/dist/components/ECommerceComponents/PriceDisplay/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/ProductCard/ProductCard.d.ts +28 -0
- package/dist/components/ECommerceComponents/ProductCard/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/ProductGallery/ProductGallery.d.ts +17 -0
- package/dist/components/ECommerceComponents/ProductGallery/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/QuantitySelector/QuantitySelector.d.ts +12 -0
- package/dist/components/ECommerceComponents/QuantitySelector/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/SizeSelector/SizeSelector.d.ts +12 -0
- package/dist/components/ECommerceComponents/SizeSelector/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/StarRating/StarRating.d.ts +15 -0
- package/dist/components/ECommerceComponents/StarRating/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/StockStatus/StockStatus.d.ts +11 -0
- package/dist/components/ECommerceComponents/StockStatus/index.d.ts +2 -0
- package/dist/components/ECommerceComponents/WishlistButton/WishlistButton.d.ts +10 -0
- package/dist/components/ECommerceComponents/WishlistButton/index.d.ts +2 -0
- package/dist/components/MarketingComponents/BlogBlockquote/BlogBlockquote.d.ts +16 -0
- package/dist/components/MarketingComponents/BlogBlockquote/index.d.ts +2 -0
- package/dist/components/MarketingComponents/BlogFeatureText/BlogFeatureText.d.ts +10 -0
- package/dist/components/MarketingComponents/BlogFeatureText/index.d.ts +2 -0
- package/dist/components/MarketingComponents/BlogImage/BlogImage.d.ts +13 -0
- package/dist/components/MarketingComponents/BlogImage/index.d.ts +2 -0
- package/dist/components/MarketingComponents/BlogListingCard/BlogListingCard.d.ts +24 -0
- package/dist/components/MarketingComponents/BlogListingCard/index.d.ts +2 -0
- package/dist/components/MarketingComponents/BlogListingFeaturedCard/BlogListingFeaturedCard.d.ts +27 -0
- package/dist/components/MarketingComponents/BlogListingFeaturedCard/index.d.ts +2 -0
- package/dist/components/MarketingComponents/FeaturedIcon/FeaturedIcon.d.ts +13 -0
- package/dist/components/MarketingComponents/FeaturedIcon/index.d.ts +2 -0
- package/dist/components/MarketingComponents/FirstPageHeading/FirstPageHeading.d.ts +24 -0
- package/dist/components/MarketingComponents/FirstPageHeading/index.d.ts +2 -0
- package/dist/components/MarketingComponents/JobListing/JobListing.d.ts +19 -0
- package/dist/components/MarketingComponents/JobListing/index.d.ts +2 -0
- package/dist/components/MarketingComponents/List/List.d.ts +10 -0
- package/dist/components/MarketingComponents/List/index.d.ts +2 -0
- package/dist/components/MarketingComponents/LocationDot/LocationDot.d.ts +10 -0
- package/dist/components/MarketingComponents/LocationDot/index.d.ts +2 -0
- package/dist/components/MarketingComponents/Marquee/Marquee.d.ts +11 -0
- package/dist/components/MarketingComponents/Marquee/index.d.ts +2 -0
- package/dist/components/MarketingComponents/Metric/Metric.d.ts +10 -0
- package/dist/components/MarketingComponents/Metric/index.d.ts +2 -0
- package/dist/components/MarketingComponents/MobileNavigationMenu/MobileNavigationMenu.d.ts +19 -0
- package/dist/components/MarketingComponents/MobileNavigationMenu/index.d.ts +2 -0
- package/dist/components/MarketingComponents/PlaceholderLogo/PlaceholderLogo.d.ts +13 -0
- package/dist/components/MarketingComponents/PlaceholderLogo/index.d.ts +2 -0
- package/dist/components/MarketingComponents/ProfileCard/ProfileCard.d.ts +20 -0
- package/dist/components/MarketingComponents/ProfileCard/SocialIcons.d.ts +7 -0
- package/dist/components/MarketingComponents/ProfileCard/index.d.ts +2 -0
- package/dist/components/MarketingComponents/RichTextHeading/RichTextHeading.d.ts +10 -0
- package/dist/components/MarketingComponents/RichTextHeading/index.d.ts +2 -0
- package/dist/components/MarketingComponents/RichTextParagraph/RichTextParagraph.d.ts +7 -0
- package/dist/components/MarketingComponents/RichTextParagraph/index.d.ts +2 -0
- package/dist/components/MarketingComponents/SectionHeading/SectionHeading.d.ts +15 -0
- package/dist/components/MarketingComponents/SectionHeading/index.d.ts +2 -0
- package/dist/components/MarketingComponents/SubFeature/SubFeature.d.ts +14 -0
- package/dist/components/MarketingComponents/SubFeature/index.d.ts +2 -0
- package/dist/components/MarketingComponents/TeamCard/TeamCard.d.ts +23 -0
- package/dist/components/MarketingComponents/TeamCard/TeamSocialIcons.d.ts +10 -0
- package/dist/components/MarketingComponents/TeamCard/index.d.ts +2 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +37 -0
- package/dist/index.mjs +2051 -4361
- package/dist/style.css +1 -1
- package/package.json +6 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface FaqItem {
|
|
3
|
+
question: string;
|
|
4
|
+
answer: string;
|
|
5
|
+
/** Uncontrolled initial open state for this item. */
|
|
6
|
+
defaultOpen?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface FaqBlockProps {
|
|
9
|
+
eyebrow?: string;
|
|
10
|
+
title: string;
|
|
11
|
+
items: FaqItem[];
|
|
12
|
+
/** Figma Layout axis: 1 = Single, 2 = Two-Column. Defaults to 1. */
|
|
13
|
+
columns?: 1 | 2;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const FaqBlock: React.FC<FaqBlockProps>;
|
|
17
|
+
export default FaqBlock;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface FeatureGridItem {
|
|
3
|
+
id?: string;
|
|
4
|
+
icon: React.ReactNode;
|
|
5
|
+
title: string;
|
|
6
|
+
description: string;
|
|
7
|
+
}
|
|
8
|
+
export interface FeatureGridBlockProps {
|
|
9
|
+
features: FeatureGridItem[];
|
|
10
|
+
/** Number of columns. Defaults to `features.length` (Figma's own examples never wrap). */
|
|
11
|
+
columns?: number;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const FeatureGridBlock: React.FC<FeatureGridBlockProps>;
|
|
15
|
+
export default FeatureGridBlock;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type FileUploadPanelBlockState = 'empty' | 'with-files';
|
|
3
|
+
export interface FileUploadPanelBlockProps {
|
|
4
|
+
/** Seeds the demo file list. Real usage would drive `files` from actual upload state instead. */
|
|
5
|
+
state?: FileUploadPanelBlockState;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const FileUploadPanelBlock: React.FC<FileUploadPanelBlockProps>;
|
|
9
|
+
export default FileUploadPanelBlock;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ForgotPasswordStatus = 'idle' | 'invalid-email' | 'server-error' | 'loading' | 'sent' | 'skeleton';
|
|
3
|
+
export interface ForgotPasswordBlockProps {
|
|
4
|
+
initialStatus?: ForgotPasswordStatus;
|
|
5
|
+
initialEmail?: string;
|
|
6
|
+
onSubmit?: (email: string) => void;
|
|
7
|
+
onResend?: () => void;
|
|
8
|
+
onLogIn?: () => void;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const ForgotPasswordBlock: React.FC<ForgotPasswordBlockProps>;
|
|
12
|
+
export default ForgotPasswordBlock;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type HeroLayout = 'centered' | 'split';
|
|
3
|
+
export interface HeroAction {
|
|
4
|
+
label: string;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
}
|
|
7
|
+
export interface HeroBlockProps {
|
|
8
|
+
/** Small pill above the title. Omit to hide it. */
|
|
9
|
+
eyebrow?: string;
|
|
10
|
+
title: string;
|
|
11
|
+
description: string;
|
|
12
|
+
primaryAction: HeroAction;
|
|
13
|
+
secondaryAction?: HeroAction;
|
|
14
|
+
/** Shows the GitHub icon before the secondary action's label. */
|
|
15
|
+
secondaryActionIcon?: boolean;
|
|
16
|
+
image: string;
|
|
17
|
+
imageAlt?: string;
|
|
18
|
+
/** Presence turns the image into a scratch-reveal: swiping over `image` erases it to expose this underneath. */
|
|
19
|
+
revealImage?: string;
|
|
20
|
+
/** Centered layout only -- e.g. "Free and open source · MIT licensed". */
|
|
21
|
+
caption?: string;
|
|
22
|
+
/** Figma Layout axis. Defaults to "centered". */
|
|
23
|
+
layout?: HeroLayout;
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare const HeroBlock: React.FC<HeroBlockProps>;
|
|
27
|
+
export default HeroBlock;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface ScratchRevealImageProps {
|
|
3
|
+
frontSrc: string;
|
|
4
|
+
backSrc: string;
|
|
5
|
+
alt?: string;
|
|
6
|
+
/** Radius, in px, of the eraser brush. Defaults to 36. */
|
|
7
|
+
brushSize?: number;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const ScratchRevealImage: React.FC<ScratchRevealImageProps>;
|
|
11
|
+
export default ScratchRevealImage;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type InlineCtaVariant = 'default' | 'accent';
|
|
3
|
+
export interface InlineCtaBlockProps {
|
|
4
|
+
variant?: InlineCtaVariant;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
title: string;
|
|
7
|
+
description: string;
|
|
8
|
+
actionLabel: string;
|
|
9
|
+
onAction?: () => void;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const InlineCtaBlock: React.FC<InlineCtaBlockProps>;
|
|
13
|
+
export default InlineCtaBlock;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type KanbanBoardBlockState = 'default' | 'loading' | 'empty-column' | 'dragging';
|
|
3
|
+
export interface KanbanBoardBlockProps {
|
|
4
|
+
state?: KanbanBoardBlockState;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const KanbanBoardBlock: React.FC<KanbanBoardBlockProps>;
|
|
8
|
+
export default KanbanBoardBlock;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type LoginStatus = 'idle' | 'validation-error' | 'server-error' | 'loading' | 'skeleton';
|
|
3
|
+
export interface LoginSocialProvider {
|
|
4
|
+
icon: React.ReactNode;
|
|
5
|
+
label: string;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
}
|
|
8
|
+
export interface LoginBlockProps {
|
|
9
|
+
initialStatus?: LoginStatus;
|
|
10
|
+
initialEmail?: string;
|
|
11
|
+
socialProviders?: LoginSocialProvider[];
|
|
12
|
+
onSubmit?: (email: string, password: string, rememberMe: boolean) => void;
|
|
13
|
+
onForgotPassword?: () => void;
|
|
14
|
+
onSignUp?: () => void;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const LoginBlock: React.FC<LoginBlockProps>;
|
|
18
|
+
export default LoginBlock;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { LogoCloudBrand } from './brandLogos';
|
|
3
|
+
export type LogoCloudVariant = 'monochrome' | 'color';
|
|
4
|
+
export interface LogoCloudBlockProps {
|
|
5
|
+
label?: string;
|
|
6
|
+
brands?: LogoCloudBrand[];
|
|
7
|
+
/** Figma Style axis (renamed to avoid colliding with the DOM `style` prop). Defaults to "monochrome". */
|
|
8
|
+
variant?: LogoCloudVariant;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const LogoCloudBlock: React.FC<LogoCloudBlockProps>;
|
|
12
|
+
export default LogoCloudBlock;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type LogoCloudBrand = 'vercel' | 'netlify' | 'github' | 'figma' | 'notion' | 'linear' | 'stripe';
|
|
3
|
+
interface LogoProps {
|
|
4
|
+
color: string;
|
|
5
|
+
}
|
|
6
|
+
/** Each brand's own authentic color, used for LogoCloudBlock's "color" variant. */
|
|
7
|
+
export declare const brandColors: Record<LogoCloudBrand, string>;
|
|
8
|
+
export declare const brandLabels: Record<LogoCloudBrand, string>;
|
|
9
|
+
export declare const brandLogoComponents: Record<LogoCloudBrand, React.FC<LogoProps>>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface MultistepModalBlockProps {
|
|
3
|
+
open: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
/** Which step to open on — for demoing a mid-flow state. Defaults to the first step. */
|
|
6
|
+
initialStep?: number;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const MultistepModalBlock: React.FC<MultistepModalBlockProps>;
|
|
10
|
+
export default MultistepModalBlock;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface NotificationPanelItem {
|
|
3
|
+
id: string;
|
|
4
|
+
icon?: React.ReactNode;
|
|
5
|
+
title: string;
|
|
6
|
+
timestamp: string;
|
|
7
|
+
read?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface NotificationPanelBlockProps {
|
|
10
|
+
items: NotificationPanelItem[];
|
|
11
|
+
onMarkAllRead?: () => void;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const NotificationPanelBlock: React.FC<NotificationPanelBlockProps>;
|
|
15
|
+
export default NotificationPanelBlock;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface OnboardingProgressItem {
|
|
3
|
+
label: string;
|
|
4
|
+
/** 0-100. */
|
|
5
|
+
progress: number;
|
|
6
|
+
}
|
|
7
|
+
export type OnboardingProgressVariant = 'default' | 'compact';
|
|
8
|
+
export interface OnboardingProgressBlockProps {
|
|
9
|
+
title?: string;
|
|
10
|
+
items: OnboardingProgressItem[];
|
|
11
|
+
variant?: OnboardingProgressVariant;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const OnboardingProgressBlock: React.FC<OnboardingProgressBlockProps>;
|
|
15
|
+
export default OnboardingProgressBlock;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface OrderConfirmationItem {
|
|
3
|
+
id?: string;
|
|
4
|
+
image: string;
|
|
5
|
+
imageAlt?: string;
|
|
6
|
+
name: string;
|
|
7
|
+
variant?: string;
|
|
8
|
+
price: number;
|
|
9
|
+
}
|
|
10
|
+
export interface OrderConfirmationBlockProps {
|
|
11
|
+
orderNumber: string;
|
|
12
|
+
items: OrderConfirmationItem[];
|
|
13
|
+
total: number;
|
|
14
|
+
/** Presence renders the "With Tracking" style: an estimated-delivery row
|
|
15
|
+
* plus a "Track order" button above "Continue shopping". Absence renders
|
|
16
|
+
* the plain Default style -- see the file doc for why this isn't a
|
|
17
|
+
* separate style prop. */
|
|
18
|
+
estimatedDelivery?: string;
|
|
19
|
+
onTrackOrder?: () => void;
|
|
20
|
+
onContinueShopping?: () => void;
|
|
21
|
+
formatPrice?: (amount: number) => string;
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const OrderConfirmationBlock: React.FC<OrderConfirmationBlockProps>;
|
|
25
|
+
export default OrderConfirmationBlock;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface PricingPlan {
|
|
3
|
+
id?: string;
|
|
4
|
+
name: string;
|
|
5
|
+
price: string;
|
|
6
|
+
/** Omit for a plan with no numeric period, e.g. "Custom". */
|
|
7
|
+
period?: string;
|
|
8
|
+
description: string;
|
|
9
|
+
ctaLabel: string;
|
|
10
|
+
onCtaClick?: () => void;
|
|
11
|
+
features: string[];
|
|
12
|
+
/** Drives the "Most popular" badge, accent border/shadow, and primary CTA. */
|
|
13
|
+
highlighted?: boolean;
|
|
14
|
+
/** Defaults to "Most popular" when highlighted. */
|
|
15
|
+
badgeLabel?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface PricingTableBlockProps {
|
|
18
|
+
/** Small pill above the title, e.g. "Pricing". Omit to hide it. */
|
|
19
|
+
eyebrow?: string;
|
|
20
|
+
title: string;
|
|
21
|
+
subtitle?: string;
|
|
22
|
+
plans: PricingPlan[];
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare const PricingTableBlock: React.FC<PricingTableBlockProps>;
|
|
26
|
+
export default PricingTableBlock;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ProductGalleryImage } from '../../components/ECommerceComponents/ProductGallery';
|
|
3
|
+
export interface ProductDetailColorOption {
|
|
4
|
+
label: string;
|
|
5
|
+
color: string;
|
|
6
|
+
available?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface ProductDetailSizeOption {
|
|
9
|
+
size: string;
|
|
10
|
+
available?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface ProductDetailBlockProps {
|
|
13
|
+
name: string;
|
|
14
|
+
images: ProductGalleryImage[];
|
|
15
|
+
rating: number;
|
|
16
|
+
reviewCount?: number;
|
|
17
|
+
/** Drives StockStatus's derived badge color + label -- see that component. */
|
|
18
|
+
stockQuantity: number;
|
|
19
|
+
price: number;
|
|
20
|
+
compareAtPrice?: number;
|
|
21
|
+
description: string;
|
|
22
|
+
colors?: ProductDetailColorOption[];
|
|
23
|
+
sizes?: ProductDetailSizeOption[];
|
|
24
|
+
/** Defaults to the first available option in each list. */
|
|
25
|
+
defaultColor?: string;
|
|
26
|
+
defaultSize?: string;
|
|
27
|
+
minQuantity?: number;
|
|
28
|
+
maxQuantity?: number;
|
|
29
|
+
defaultSaved?: boolean;
|
|
30
|
+
onAddToCart?: (selection: {
|
|
31
|
+
color?: string;
|
|
32
|
+
size?: string;
|
|
33
|
+
quantity: number;
|
|
34
|
+
}) => void;
|
|
35
|
+
formatPrice?: (amount: number) => string;
|
|
36
|
+
className?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare const ProductDetailBlock: React.FC<ProductDetailBlockProps>;
|
|
39
|
+
export default ProductDetailBlock;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ProductCardProps } from '../../components/ECommerceComponents/ProductCard';
|
|
3
|
+
export interface ProductGridItem extends ProductCardProps {
|
|
4
|
+
/** Unique key for the grid -- defaults to `name` if omitted. */
|
|
5
|
+
id?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ProductGridBlockProps {
|
|
8
|
+
/** Small pill above the title, e.g. "Shop". Omit to hide it. */
|
|
9
|
+
eyebrow?: string;
|
|
10
|
+
title: string;
|
|
11
|
+
subtitle?: string;
|
|
12
|
+
products: ProductGridItem[];
|
|
13
|
+
/** Adds the "N products" count + Sort button row above the grid --
|
|
14
|
+
* see the file doc for why this stays a real prop rather than being
|
|
15
|
+
* derived. */
|
|
16
|
+
showFilterBar?: boolean;
|
|
17
|
+
sortLabel?: string;
|
|
18
|
+
onSortClick?: () => void;
|
|
19
|
+
/** Number of columns at full width. Defaults to 4, matching Figma. */
|
|
20
|
+
columns?: number;
|
|
21
|
+
className?: string;
|
|
22
|
+
}
|
|
23
|
+
export declare const ProductGridBlock: React.FC<ProductGridBlockProps>;
|
|
24
|
+
export default ProductGridBlock;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface ProfileSettingsBlockProps {
|
|
3
|
+
name?: string;
|
|
4
|
+
email?: string;
|
|
5
|
+
avatarSrc?: string;
|
|
6
|
+
onSave?: (data: {
|
|
7
|
+
name: string;
|
|
8
|
+
email: string;
|
|
9
|
+
}) => void;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const ProfileSettingsBlock: React.FC<ProfileSettingsBlockProps>;
|
|
13
|
+
export default ProfileSettingsBlock;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ResetPasswordStatus = 'idle' | 'mismatch' | 'loading' | 'expired' | 'success' | 'skeleton';
|
|
3
|
+
export interface ResetPasswordBlockProps {
|
|
4
|
+
initialStatus?: ResetPasswordStatus;
|
|
5
|
+
onSubmit?: (newPassword: string) => void;
|
|
6
|
+
onRequestNewLink?: () => void;
|
|
7
|
+
onLogIn?: () => void;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const ResetPasswordBlock: React.FC<ResetPasswordBlockProps>;
|
|
11
|
+
export default ResetPasswordBlock;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface SectionFooterLink {
|
|
3
|
+
label: string;
|
|
4
|
+
href: string;
|
|
5
|
+
}
|
|
6
|
+
export type SectionFooterVariant = 'default' | 'centered';
|
|
7
|
+
export interface SectionFooterBlockProps {
|
|
8
|
+
text?: string;
|
|
9
|
+
links?: SectionFooterLink[];
|
|
10
|
+
variant?: SectionFooterVariant;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const SectionFooterBlock: React.FC<SectionFooterBlockProps>;
|
|
14
|
+
export default SectionFooterBlock;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface ShoppingCartItemData {
|
|
3
|
+
id?: string;
|
|
4
|
+
image: string;
|
|
5
|
+
imageAlt?: string;
|
|
6
|
+
name: string;
|
|
7
|
+
variant?: string;
|
|
8
|
+
price: number;
|
|
9
|
+
/** Presence switches that row to CartItem's own struck-original + danger-current sale treatment. */
|
|
10
|
+
compareAtPrice?: number;
|
|
11
|
+
quantity: number;
|
|
12
|
+
}
|
|
13
|
+
export interface ShoppingCartBlockProps {
|
|
14
|
+
items: ShoppingCartItemData[];
|
|
15
|
+
/** 0 (default) renders "Free" in the summary, matching Figma. */
|
|
16
|
+
shippingCost?: number;
|
|
17
|
+
onCheckout?: (items: ShoppingCartItemData[]) => void;
|
|
18
|
+
onContinueShopping?: () => void;
|
|
19
|
+
formatPrice?: (amount: number) => string;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare const ShoppingCartBlock: React.FC<ShoppingCartBlockProps>;
|
|
23
|
+
export default ShoppingCartBlock;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type SignUpStatus = 'idle' | 'validation-error' | 'server-error' | 'loading' | 'skeleton';
|
|
3
|
+
export interface SignUpSocialProvider {
|
|
4
|
+
icon: React.ReactNode;
|
|
5
|
+
label: string;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
}
|
|
8
|
+
export interface SignUpBlockProps {
|
|
9
|
+
initialStatus?: SignUpStatus;
|
|
10
|
+
socialProviders?: SignUpSocialProvider[];
|
|
11
|
+
onSubmit?: (data: {
|
|
12
|
+
fullName: string;
|
|
13
|
+
email: string;
|
|
14
|
+
password: string;
|
|
15
|
+
}) => void;
|
|
16
|
+
onLogIn?: () => void;
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
export declare const SignUpBlock: React.FC<SignUpBlockProps>;
|
|
20
|
+
export default SignUpBlock;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TeamCardProps } from '../../components/MarketingComponents/TeamCard';
|
|
3
|
+
export interface TeamSectionMember extends Omit<TeamCardProps, 'className'> {
|
|
4
|
+
/** Unique key for the grid -- defaults to `name` if omitted. */
|
|
5
|
+
id?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface TeamSectionBlockProps {
|
|
8
|
+
/** Small pill above the title, e.g. "Team". Omit to hide it. */
|
|
9
|
+
eyebrow?: string;
|
|
10
|
+
title: string;
|
|
11
|
+
subtitle?: string;
|
|
12
|
+
members: TeamSectionMember[];
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
export declare const TeamSectionBlock: React.FC<TeamSectionBlockProps>;
|
|
16
|
+
export default TeamSectionBlock;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface Testimonial {
|
|
3
|
+
quote: string;
|
|
4
|
+
authorName: string;
|
|
5
|
+
authorRole: string;
|
|
6
|
+
authorAvatar?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface TestimonialBlockProps {
|
|
9
|
+
testimonials: Testimonial[];
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const TestimonialBlock: React.FC<TestimonialBlockProps>;
|
|
13
|
+
export default TestimonialBlock;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type TwoFactorAuthStatus = 'idle' | 'incomplete' | 'server-error' | 'loading' | 'success' | 'skeleton';
|
|
3
|
+
export interface TwoFactorAuthBlockProps {
|
|
4
|
+
/** Seeds the demo -- for a real app, status is driven entirely by your
|
|
5
|
+
* own onVerify/onUseBackupCode handlers instead. */
|
|
6
|
+
initialStatus?: TwoFactorAuthStatus;
|
|
7
|
+
onVerify?: (code: string, trustDevice: boolean) => void;
|
|
8
|
+
onUseBackupCode?: () => void;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const TwoFactorAuthBlock: React.FC<TwoFactorAuthBlockProps>;
|
|
12
|
+
export default TwoFactorAuthBlock;
|