@salesmind-ai/design-system 0.3.5 → 0.3.6
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/dist/{StatsSection-wgd8Vge1.d.cts → StatsSection-Dihy3zml.d.cts} +2 -0
- package/dist/{StatsSection-B8iD9L-o.d.ts → StatsSection-MfKKyqL1.d.ts} +2 -0
- package/dist/{chunk-PE2KJVRN.js → chunk-ARC5KXBC.js} +5 -3
- package/dist/chunk-ARC5KXBC.js.map +1 -0
- package/dist/{chunk-2ZNR2F2V.cjs → chunk-LSR7JYVH.cjs} +5 -3
- package/dist/chunk-LSR7JYVH.cjs.map +1 -0
- package/dist/index.cjs +5 -5
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/sections/index.cjs +5 -5
- package/dist/sections/index.d.cts +1 -1
- package/dist/sections/index.d.ts +1 -1
- package/dist/sections/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-2ZNR2F2V.cjs.map +0 -1
- package/dist/chunk-PE2KJVRN.js.map +0 -1
|
@@ -4,8 +4,10 @@ import { c as SectionShellProps } from './SectionShell-GlglHCzz.cjs';
|
|
|
4
4
|
interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {
|
|
5
5
|
variant?: 'left' | 'center' | 'split';
|
|
6
6
|
title: React__default.ReactNode;
|
|
7
|
+
titleAs?: React__default.ElementType;
|
|
7
8
|
subtitle?: React__default.ReactNode;
|
|
8
9
|
eyebrow?: React__default.ReactNode;
|
|
10
|
+
eyebrowAs?: React__default.ElementType;
|
|
9
11
|
primaryCta?: React__default.ReactNode;
|
|
10
12
|
secondaryCta?: React__default.ReactNode;
|
|
11
13
|
/** Main visual (Image, Video, or Component) */
|
|
@@ -4,8 +4,10 @@ import { c as SectionShellProps } from './SectionShell-GlglHCzz.js';
|
|
|
4
4
|
interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {
|
|
5
5
|
variant?: 'left' | 'center' | 'split';
|
|
6
6
|
title: React__default.ReactNode;
|
|
7
|
+
titleAs?: React__default.ElementType;
|
|
7
8
|
subtitle?: React__default.ReactNode;
|
|
8
9
|
eyebrow?: React__default.ReactNode;
|
|
10
|
+
eyebrowAs?: React__default.ElementType;
|
|
9
11
|
primaryCta?: React__default.ReactNode;
|
|
10
12
|
secondaryCta?: React__default.ReactNode;
|
|
11
13
|
/** Main visual (Image, Video, or Component) */
|
|
@@ -9,8 +9,10 @@ var HeroSection = forwardRef(
|
|
|
9
9
|
({
|
|
10
10
|
variant = "left",
|
|
11
11
|
title,
|
|
12
|
+
titleAs: TitleElement = "h1",
|
|
12
13
|
subtitle,
|
|
13
14
|
eyebrow,
|
|
15
|
+
eyebrowAs: EyebrowElement = "span",
|
|
14
16
|
primaryCta,
|
|
15
17
|
secondaryCta,
|
|
16
18
|
media,
|
|
@@ -28,8 +30,8 @@ var HeroSection = forwardRef(
|
|
|
28
30
|
const isCenter = variant === "center";
|
|
29
31
|
const textAlignment = align || (isCenter ? "center" : "left");
|
|
30
32
|
const ContentBlock = /* @__PURE__ */ jsxs("div", { className: clsx("ds-hero__content", `ds-hero__content--${textAlignment}`), children: [
|
|
31
|
-
eyebrow && /* @__PURE__ */ jsx(
|
|
32
|
-
/* @__PURE__ */ jsx(
|
|
33
|
+
eyebrow && /* @__PURE__ */ jsx(EyebrowElement, { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
|
|
34
|
+
/* @__PURE__ */ jsx(TitleElement, { className: "ds-hero__title", children: title }),
|
|
33
35
|
subtitle && /* @__PURE__ */ jsx("p", { className: "ds-hero__subtitle", children: subtitle }),
|
|
34
36
|
(primaryCta || secondaryCta) && /* @__PURE__ */ jsxs("div", { className: "ds-hero__actions", children: [
|
|
35
37
|
primaryCta,
|
|
@@ -182,4 +184,4 @@ StatsSection.displayName = "StatsSection";
|
|
|
182
184
|
|
|
183
185
|
export { CTASection, FeatureSection, HeroSection, StatsSection };
|
|
184
186
|
//# sourceMappingURL=out.js.map
|
|
185
|
-
//# sourceMappingURL=chunk-
|
|
187
|
+
//# sourceMappingURL=chunk-ARC5KXBC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/HeroSection/HeroSection.tsx","../src/components/FeatureSection/FeatureSection.tsx","../src/components/CTASection/CTASection.tsx","../src/components/StatsSection/StatsSection.tsx"],"names":["forwardRef","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\nimport './HeroSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'left' | 'center' | 'split';\n title: React.ReactNode;\n titleAs?: React.ElementType;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n eyebrowAs?: React.ElementType;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n\n /** Main visual (Image, Video, or Component) */\n media?: React.ReactNode;\n /** Adds a browser-like header bar to the media container */\n mediaBrowserFrame?: boolean;\n\n /** Optional floating elements (e.g. SocialProof cards) over the media */\n floatingElement?: React.ReactNode;\n floatingPosition?: 'top-right' | 'bottom-left';\n\n /** Background Visuals */\n withGrid?: boolean;\n withGlow?: boolean;\n\n align?: 'left' | 'center'; // Text alignment overrides variant default\n}\n\n/* ============================================================================\n Component\n ============================================================================ */\n\nexport const HeroSection = forwardRef<HTMLDivElement, HeroSectionProps>(\n (\n {\n variant = 'left',\n title,\n titleAs: TitleElement = 'h1',\n subtitle,\n eyebrow,\n eyebrowAs: EyebrowElement = 'span',\n primaryCta,\n secondaryCta,\n media,\n mediaBrowserFrame = false,\n floatingElement,\n floatingPosition = 'bottom-left',\n withGrid = false,\n withGlow = false,\n align,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // Determine layout based on variant\n const isSplit = variant === 'split';\n const isCenter = variant === 'center';\n\n // Default alignment\n const textAlignment = align || (isCenter ? 'center' : 'left');\n\n const ContentBlock = (\n <div className={clsx('ds-hero__content', `ds-hero__content--${textAlignment}`)}>\n {eyebrow && (\n <EyebrowElement className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n {eyebrow}\n </EyebrowElement>\n )}\n <TitleElement className=\"ds-hero__title\">{title}</TitleElement>\n {subtitle && <p className=\"ds-hero__subtitle\">{subtitle}</p>}\n\n {(primaryCta || secondaryCta) && (\n <div className=\"ds-hero__actions\">\n {primaryCta}\n {secondaryCta}\n </div>\n )}\n {children}\n </div>\n );\n\n const MediaBlock = media && (\n <div className=\"ds-hero__media-wrapper\">\n <div className={clsx('ds-hero__media', mediaBrowserFrame && 'ds-hero__media--browser')}>\n {media}\n </div>\n {floatingElement && (\n <div className={clsx('ds-hero__float', `ds-hero__float--${floatingPosition}`)}>\n {floatingElement}\n </div>\n )}\n </div>\n );\n\n return (\n <SectionShell\n ref={ref}\n className={clsx(\n 'ds-hero',\n `ds-hero--${variant}`,\n withGrid && 'ds-hero--bg-grid',\n withGlow && 'ds-hero--bg-glow',\n className,\n )}\n padding=\"lg\"\n {...props}\n >\n {isSplit ? (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',\n gap: 'var(--space-16)',\n alignItems: 'center',\n }}\n >\n <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\n style={{\n width: '100%',\n display: 'flex',\n justifyContent: isCenter ? 'center' : 'flex-start',\n }}\n >\n <div style={{ width: '100%', maxWidth: isCenter ? '1200px' : '100%' }}>\n {MediaBlock}\n </div>\n </Box>\n )}\n </Stack>\n )}\n </SectionShell>\n );\n },\n);\n\nHeroSection.displayName = 'HeroSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './FeatureSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface FeatureItem {\n title: React.ReactNode;\n description: React.ReactNode;\n icon?: React.ReactNode;\n media?: React.ReactNode; // For ZigZag\n step?: string | number; // For ZigZag steps\n cta?: React.ReactNode;\n}\n\nexport interface FeatureSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'grid' | 'zigzag';\n columns?: 2 | 3 | 4; // For grid variant\n features: FeatureItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n alignHeader?: 'left' | 'center' | 'right';\n}\n\n/* ============================================================================\n Components\n ============================================================================ */\n\nconst FeatureCard = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-card\">\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-feature-card__title\">{item.title}</h3>\n <div className=\"ds-feature-card__description\">{item.description}</div>\n {item.cta && <div className=\"ds-feature-card__cta\">{item.cta}</div>}\n </div>\n);\n\nconst FeatureRow = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-row\">\n <div className=\"ds-feature-row__content\">\n {item.step && <div className=\"ds-feature-row__step\">STEP {item.step}</div>}\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-section-header__title\" style={{ fontSize: 'var(--font-size-2xl)' }}>\n {item.title}\n </h3>\n <div className=\"ds-section-header__subtitle\" style={{ fontSize: 'var(--font-size-lg)' }}>\n {item.description}\n </div>\n {item.cta && <div className=\"ds-hero__actions\">{item.cta}</div>}\n </div>\n <div className=\"ds-feature-row__media\">\n {item.media || (\n <div style={{ paddingBottom: '56.25%', background: 'var(--glass-base-active)' }} />\n )}\n </div>\n </div>\n);\n\nexport const FeatureSection = forwardRef<HTMLDivElement, FeatureSectionProps>(\n (\n {\n variant = 'grid',\n columns = 3,\n features,\n title,\n subtitle,\n eyebrow,\n alignHeader = 'center',\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-feature-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} align={alignHeader} />\n\n {variant === 'grid' ? (\n <div className={clsx('ds-feature-grid', `ds-feature-grid--${columns}-col`)}>\n {features.map((feature, index) => (\n <FeatureCard key={index} item={feature} />\n ))}\n </div>\n ) : (\n <div className=\"ds-feature-zigzag\">\n {features.map((feature, index) => (\n <FeatureRow key={index} item={feature} />\n ))}\n </div>\n )}\n </SectionShell>\n );\n },\n);\nFeatureSection.displayName = 'FeatureSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './CTASection.css';\n\nexport interface CTASectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'center' | 'split' | 'boxed';\n title: React.ReactNode;\n description?: React.ReactNode;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n actions?: React.ReactNode; // Custom actions slot\n}\n\nexport const CTASection = forwardRef<HTMLDivElement, CTASectionProps>(\n (\n {\n variant = 'center',\n title,\n description,\n primaryCta,\n secondaryCta,\n actions,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // \"Boxed\" is just centered content inside a card-like container within the section\n const isBoxed = variant === 'boxed';\n const effectiveVariant = isBoxed ? 'center' : variant;\n\n const Content = (\n <div className={clsx('ds-cta-section', `ds-cta-section--${effectiveVariant}`)}>\n {effectiveVariant === 'split' ? (\n <div className=\"ds-cta-section--split\">\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n </div>\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n ) : (\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n )}\n {children}\n </div>\n );\n\n return (\n <SectionShell ref={ref} className={clsx(className)} {...props}>\n {isBoxed ? <div className=\"ds-cta-card\">{Content}</div> : Content}\n </SectionShell>\n );\n },\n);\nCTASection.displayName = 'CTASection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './StatsSection.css';\n\nexport interface StatItem {\n label: string;\n value: string | number;\n suffix?: string;\n prefix?: string;\n}\n\nexport interface StatsSectionProps extends Omit<SectionShellProps, 'title'> {\n stats: StatItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, title, subtitle, eyebrow, className, ...props }, ref) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-stats-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} />\n\n <div className=\"ds-stats-grid\">\n {stats.map((stat, idx) => (\n <div key={idx} className=\"ds-stat-card\">\n <div className=\"ds-stat-value\">\n {stat.prefix}\n {stat.value}\n <span className=\"ds-stat-suffix\">{stat.suffix}</span>\n </div>\n <div className=\"ds-stat-label\">{stat.label}</div>\n </div>\n ))}\n </div>\n </SectionShell>\n );\n },\n);\nStatsSection.displayName = 'StatsSection';\n"]}
|
|
@@ -15,8 +15,10 @@ var HeroSection = react.forwardRef(
|
|
|
15
15
|
({
|
|
16
16
|
variant = "left",
|
|
17
17
|
title,
|
|
18
|
+
titleAs: TitleElement = "h1",
|
|
18
19
|
subtitle,
|
|
19
20
|
eyebrow,
|
|
21
|
+
eyebrowAs: EyebrowElement = "span",
|
|
20
22
|
primaryCta,
|
|
21
23
|
secondaryCta,
|
|
22
24
|
media,
|
|
@@ -34,8 +36,8 @@ var HeroSection = react.forwardRef(
|
|
|
34
36
|
const isCenter = variant === "center";
|
|
35
37
|
const textAlignment = align || (isCenter ? "center" : "left");
|
|
36
38
|
const ContentBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("ds-hero__content", `ds-hero__content--${textAlignment}`), children: [
|
|
37
|
-
eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
|
|
38
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
39
|
+
eyebrow && /* @__PURE__ */ jsxRuntime.jsx(EyebrowElement, { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
|
|
40
|
+
/* @__PURE__ */ jsxRuntime.jsx(TitleElement, { className: "ds-hero__title", children: title }),
|
|
39
41
|
subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-hero__subtitle", children: subtitle }),
|
|
40
42
|
(primaryCta || secondaryCta) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-hero__actions", children: [
|
|
41
43
|
primaryCta,
|
|
@@ -191,4 +193,4 @@ exports.FeatureSection = FeatureSection;
|
|
|
191
193
|
exports.HeroSection = HeroSection;
|
|
192
194
|
exports.StatsSection = StatsSection;
|
|
193
195
|
//# sourceMappingURL=out.js.map
|
|
194
|
-
//# sourceMappingURL=chunk-
|
|
196
|
+
//# sourceMappingURL=chunk-LSR7JYVH.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/HeroSection/HeroSection.tsx","../src/components/FeatureSection/FeatureSection.tsx","../src/components/CTASection/CTASection.tsx","../src/components/StatsSection/StatsSection.tsx"],"names":["forwardRef","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\nimport './HeroSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'left' | 'center' | 'split';\n title: React.ReactNode;\n titleAs?: React.ElementType;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n eyebrowAs?: React.ElementType;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n\n /** Main visual (Image, Video, or Component) */\n media?: React.ReactNode;\n /** Adds a browser-like header bar to the media container */\n mediaBrowserFrame?: boolean;\n\n /** Optional floating elements (e.g. SocialProof cards) over the media */\n floatingElement?: React.ReactNode;\n floatingPosition?: 'top-right' | 'bottom-left';\n\n /** Background Visuals */\n withGrid?: boolean;\n withGlow?: boolean;\n\n align?: 'left' | 'center'; // Text alignment overrides variant default\n}\n\n/* ============================================================================\n Component\n ============================================================================ */\n\nexport const HeroSection = forwardRef<HTMLDivElement, HeroSectionProps>(\n (\n {\n variant = 'left',\n title,\n titleAs: TitleElement = 'h1',\n subtitle,\n eyebrow,\n eyebrowAs: EyebrowElement = 'span',\n primaryCta,\n secondaryCta,\n media,\n mediaBrowserFrame = false,\n floatingElement,\n floatingPosition = 'bottom-left',\n withGrid = false,\n withGlow = false,\n align,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // Determine layout based on variant\n const isSplit = variant === 'split';\n const isCenter = variant === 'center';\n\n // Default alignment\n const textAlignment = align || (isCenter ? 'center' : 'left');\n\n const ContentBlock = (\n <div className={clsx('ds-hero__content', `ds-hero__content--${textAlignment}`)}>\n {eyebrow && (\n <EyebrowElement className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n {eyebrow}\n </EyebrowElement>\n )}\n <TitleElement className=\"ds-hero__title\">{title}</TitleElement>\n {subtitle && <p className=\"ds-hero__subtitle\">{subtitle}</p>}\n\n {(primaryCta || secondaryCta) && (\n <div className=\"ds-hero__actions\">\n {primaryCta}\n {secondaryCta}\n </div>\n )}\n {children}\n </div>\n );\n\n const MediaBlock = media && (\n <div className=\"ds-hero__media-wrapper\">\n <div className={clsx('ds-hero__media', mediaBrowserFrame && 'ds-hero__media--browser')}>\n {media}\n </div>\n {floatingElement && (\n <div className={clsx('ds-hero__float', `ds-hero__float--${floatingPosition}`)}>\n {floatingElement}\n </div>\n )}\n </div>\n );\n\n return (\n <SectionShell\n ref={ref}\n className={clsx(\n 'ds-hero',\n `ds-hero--${variant}`,\n withGrid && 'ds-hero--bg-grid',\n withGlow && 'ds-hero--bg-glow',\n className,\n )}\n padding=\"lg\"\n {...props}\n >\n {isSplit ? (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',\n gap: 'var(--space-16)',\n alignItems: 'center',\n }}\n >\n <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\n style={{\n width: '100%',\n display: 'flex',\n justifyContent: isCenter ? 'center' : 'flex-start',\n }}\n >\n <div style={{ width: '100%', maxWidth: isCenter ? '1200px' : '100%' }}>\n {MediaBlock}\n </div>\n </Box>\n )}\n </Stack>\n )}\n </SectionShell>\n );\n },\n);\n\nHeroSection.displayName = 'HeroSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './FeatureSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface FeatureItem {\n title: React.ReactNode;\n description: React.ReactNode;\n icon?: React.ReactNode;\n media?: React.ReactNode; // For ZigZag\n step?: string | number; // For ZigZag steps\n cta?: React.ReactNode;\n}\n\nexport interface FeatureSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'grid' | 'zigzag';\n columns?: 2 | 3 | 4; // For grid variant\n features: FeatureItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n alignHeader?: 'left' | 'center' | 'right';\n}\n\n/* ============================================================================\n Components\n ============================================================================ */\n\nconst FeatureCard = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-card\">\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-feature-card__title\">{item.title}</h3>\n <div className=\"ds-feature-card__description\">{item.description}</div>\n {item.cta && <div className=\"ds-feature-card__cta\">{item.cta}</div>}\n </div>\n);\n\nconst FeatureRow = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-row\">\n <div className=\"ds-feature-row__content\">\n {item.step && <div className=\"ds-feature-row__step\">STEP {item.step}</div>}\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-section-header__title\" style={{ fontSize: 'var(--font-size-2xl)' }}>\n {item.title}\n </h3>\n <div className=\"ds-section-header__subtitle\" style={{ fontSize: 'var(--font-size-lg)' }}>\n {item.description}\n </div>\n {item.cta && <div className=\"ds-hero__actions\">{item.cta}</div>}\n </div>\n <div className=\"ds-feature-row__media\">\n {item.media || (\n <div style={{ paddingBottom: '56.25%', background: 'var(--glass-base-active)' }} />\n )}\n </div>\n </div>\n);\n\nexport const FeatureSection = forwardRef<HTMLDivElement, FeatureSectionProps>(\n (\n {\n variant = 'grid',\n columns = 3,\n features,\n title,\n subtitle,\n eyebrow,\n alignHeader = 'center',\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-feature-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} align={alignHeader} />\n\n {variant === 'grid' ? (\n <div className={clsx('ds-feature-grid', `ds-feature-grid--${columns}-col`)}>\n {features.map((feature, index) => (\n <FeatureCard key={index} item={feature} />\n ))}\n </div>\n ) : (\n <div className=\"ds-feature-zigzag\">\n {features.map((feature, index) => (\n <FeatureRow key={index} item={feature} />\n ))}\n </div>\n )}\n </SectionShell>\n );\n },\n);\nFeatureSection.displayName = 'FeatureSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './CTASection.css';\n\nexport interface CTASectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'center' | 'split' | 'boxed';\n title: React.ReactNode;\n description?: React.ReactNode;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n actions?: React.ReactNode; // Custom actions slot\n}\n\nexport const CTASection = forwardRef<HTMLDivElement, CTASectionProps>(\n (\n {\n variant = 'center',\n title,\n description,\n primaryCta,\n secondaryCta,\n actions,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // \"Boxed\" is just centered content inside a card-like container within the section\n const isBoxed = variant === 'boxed';\n const effectiveVariant = isBoxed ? 'center' : variant;\n\n const Content = (\n <div className={clsx('ds-cta-section', `ds-cta-section--${effectiveVariant}`)}>\n {effectiveVariant === 'split' ? (\n <div className=\"ds-cta-section--split\">\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n </div>\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n ) : (\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n )}\n {children}\n </div>\n );\n\n return (\n <SectionShell ref={ref} className={clsx(className)} {...props}>\n {isBoxed ? <div className=\"ds-cta-card\">{Content}</div> : Content}\n </SectionShell>\n );\n },\n);\nCTASection.displayName = 'CTASection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './StatsSection.css';\n\nexport interface StatItem {\n label: string;\n value: string | number;\n suffix?: string;\n prefix?: string;\n}\n\nexport interface StatsSectionProps extends Omit<SectionShellProps, 'title'> {\n stats: StatItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, title, subtitle, eyebrow, className, ...props }, ref) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-stats-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} />\n\n <div className=\"ds-stats-grid\">\n {stats.map((stat, idx) => (\n <div key={idx} className=\"ds-stat-card\">\n <div className=\"ds-stat-value\">\n {stat.prefix}\n {stat.value}\n <span className=\"ds-stat-suffix\">{stat.suffix}</span>\n </div>\n <div className=\"ds-stat-label\">{stat.label}</div>\n </div>\n ))}\n </div>\n </SectionShell>\n );\n },\n);\nStatsSection.displayName = 'StatsSection';\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -11,7 +11,7 @@ var chunkWH7PYHZY_cjs = require('./chunk-WH7PYHZY.cjs');
|
|
|
11
11
|
var chunk3TGSIILM_cjs = require('./chunk-3TGSIILM.cjs');
|
|
12
12
|
var chunkCJ2MKVAF_cjs = require('./chunk-CJ2MKVAF.cjs');
|
|
13
13
|
var chunkCH42VPWE_cjs = require('./chunk-CH42VPWE.cjs');
|
|
14
|
-
var
|
|
14
|
+
var chunkLSR7JYVH_cjs = require('./chunk-LSR7JYVH.cjs');
|
|
15
15
|
var chunkMQRB634A_cjs = require('./chunk-MQRB634A.cjs');
|
|
16
16
|
var chunkKDLH35OI_cjs = require('./chunk-KDLH35OI.cjs');
|
|
17
17
|
var chunkNT4LBP7D_cjs = require('./chunk-NT4LBP7D.cjs');
|
|
@@ -812,19 +812,19 @@ Object.defineProperty(exports, "useAppearance", {
|
|
|
812
812
|
});
|
|
813
813
|
Object.defineProperty(exports, "CTASection", {
|
|
814
814
|
enumerable: true,
|
|
815
|
-
get: function () { return
|
|
815
|
+
get: function () { return chunkLSR7JYVH_cjs.CTASection; }
|
|
816
816
|
});
|
|
817
817
|
Object.defineProperty(exports, "FeatureSection", {
|
|
818
818
|
enumerable: true,
|
|
819
|
-
get: function () { return
|
|
819
|
+
get: function () { return chunkLSR7JYVH_cjs.FeatureSection; }
|
|
820
820
|
});
|
|
821
821
|
Object.defineProperty(exports, "HeroSection", {
|
|
822
822
|
enumerable: true,
|
|
823
|
-
get: function () { return
|
|
823
|
+
get: function () { return chunkLSR7JYVH_cjs.HeroSection; }
|
|
824
824
|
});
|
|
825
825
|
Object.defineProperty(exports, "StatsSection", {
|
|
826
826
|
enumerable: true,
|
|
827
|
-
get: function () { return
|
|
827
|
+
get: function () { return chunkLSR7JYVH_cjs.StatsSection; }
|
|
828
828
|
});
|
|
829
829
|
Object.defineProperty(exports, "Stack", {
|
|
830
830
|
enumerable: true,
|
package/dist/index.d.cts
CHANGED
|
@@ -3,7 +3,7 @@ export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, Acco
|
|
|
3
3
|
export { B as Breadcrumb, a as BreadcrumbEllipsis, b as BreadcrumbEllipsisProps, c as BreadcrumbItem, d as BreadcrumbItemProps, e as BreadcrumbLink, f as BreadcrumbLinkProps, g as BreadcrumbList, h as BreadcrumbListProps, i as BreadcrumbPage, j as BreadcrumbPageProps, k as BreadcrumbProps, l as BreadcrumbSeparator, m as BreadcrumbSeparatorProps } from './Breadcrumb-RX-B_gDV.cjs';
|
|
4
4
|
export { FooterCTA, FooterLink, FooterSection, FooterTrustBadge, LocaleDropdown, LocaleDropdownProps, LocaleOption, MDXOutboundLink, NavbarMegaMenu, NavbarMegaMenuItem, NavbarMegaMenuItemProps, NavbarMegaMenuProps, NavbarMegaMenuSection, NavbarMegaMenuSectionProps, NavbarMobileActions, NavbarMobileNavItem, NavbarMobileNavItemProps, NavbarMobileSeparator, NavbarV2, NavbarV2Actions, NavbarV2Brand, NavbarV2BrandProps, NavbarV2Props, NavbarV2Tab, NavbarV2TabMenu, NavbarV2TabMenuProps, NavbarV2TabProps, NavbarV2Tabs, OutboundClickEventDetail, OutboundLink, OutboundLinkProps, SiteFooter, SiteFooterProps, appendGovernedUTMs, appendUTMs, isExemptUrl } from './nav/index.cjs';
|
|
5
5
|
export { S as SectionHeader, a as SectionHeaderProps, b as SectionShell, c as SectionShellProps } from './SectionShell-GlglHCzz.cjs';
|
|
6
|
-
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-
|
|
6
|
+
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-Dihy3zml.cjs';
|
|
7
7
|
export { Author, CardMetric, LogoItem, Media, MetricCounter, MetricCounterProps, Platform, PlatformBadge, PlatformBadgeProps, SocialProof, SocialProofCard, SocialProofCardProps, SocialProofCarousel, SocialProofCarouselProps, SocialProofFeatured, SocialProofFeaturedProps, SocialProofGrid, SocialProofGridProps, SocialProofLogos, SocialProofLogosProps, StarRating, StarRatingProps, VerticalVideoGrid, VerticalVideoGridProps, VideoLightbox, VideoLightboxProps } from './social-proof/index.cjs';
|
|
8
8
|
export { AnalysisProgress, BehavioralSignals, ChangeEmail, ChangeEmailLabels, ChangeEmailProps, DataTable, DataTableBody, DataTableCell, DataTableHead, DataTableHeader, DataTableProps, DataTableRow, EngagementTip, FloatingTabBar, FloatingTabBarProps, ForgotPassword, ForgotPasswordLabels, ForgotPasswordProps, LeadProfile, LeadProfileState, LeadProfileView, LeadProfileViewProps, Login, LoginLabels, LoginProps, MBTIScore, NavItem, Shell, ShellProps, Sidebar, SidebarItem, SidebarItemProps, SidebarProps, SidebarSection, SidebarSectionProps, Signup, SignupLabels, SignupProps, TabItem, TabItemProps } from './admin/index.cjs';
|
|
9
9
|
export { AgitationPoint, AnnouncementBar, AnnouncementBarProps, ArchitectureConnection, ArchitectureDiagram, ArchitectureDiagramProps, ArchitectureNode, ArchitectureNodeType, BeforeAfterBlock, BeforeAfterBlockProps, BeforeAfterItem, BeforeAfterSide, BookingEmbed, BookingEmbedProps, CaseStudyCard, CaseStudyCardProps, CaseStudyMetric, CaseStudySection, CaseStudySectionProps, ComparisonColumn, ComparisonRow, ComparisonTable, ComparisonTableProps, CompetitorDiff, CompetitorDiffItem, CompetitorDiffProps, ComplianceGrid, ComplianceGridProps, ComplianceItem, ComplianceStatus, EcosystemConnection, EcosystemDiagram, EcosystemDiagramProps, EcosystemLayer, EnterpriseSLA, EnterpriseSignalCategory, EnterpriseSignalItem, EnterpriseSignalStatus, EnterpriseSignaling, EnterpriseSignalingProps, EraSentiment, EvolutionEra, EvolutionTimeline, EvolutionTimelineProps, ExitIntentOverlay, ExitIntentOverlayProps, GuaranteeHighlight, GuaranteeHighlightProps, ICPFilter, ICPFilterItem, ICPFilterProps, IntegrationEntry, IntegrationShowcase, IntegrationShowcaseProps, IntelligenceBlock, IntelligenceBlockProps, IntelligenceCapability, IntelligenceMetric, IntentCTA, IntentCTAProps, IntentStage, IntentTriggerType, LeadCaptureForm, LeadCaptureFormProps, ManifestoAttribution, ManifestoBlock, ManifestoBlockProps, ObjectionFAQ, ObjectionFAQProps, ObjectionItem, PartnerBenefit, PartnerCalcInput, PartnerCalcOutput, PartnerDifferentiator, PartnerValueProp, PartnerValuePropProps, PricingCard, PricingCardProps, PricingFeature, PricingSection, PricingSectionProps, PricingToggle, PricingToggleProps, ProblemAgitation, ProblemAgitationProps, ProcessTimeline, ProcessTimelineProps, ROICalculator, ROICalculatorProps, ROIComparisonItem, SecurityBlock, SecurityBlockProps, SecurityCertification, SegmentSwitch, SegmentSwitchProps, StakeholderContent, StakeholderDefinition, StakeholderTabs, StakeholderTabsProps, StickyActionBar, StickyActionBarProps, TimelineStep, ValueAnchor, ValueAnchorInput, ValueAnchorOutput, ValueAnchorProps, VideoEmbed, VideoEmbedProps } from './marketing/index.cjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, Acco
|
|
|
3
3
|
export { B as Breadcrumb, a as BreadcrumbEllipsis, b as BreadcrumbEllipsisProps, c as BreadcrumbItem, d as BreadcrumbItemProps, e as BreadcrumbLink, f as BreadcrumbLinkProps, g as BreadcrumbList, h as BreadcrumbListProps, i as BreadcrumbPage, j as BreadcrumbPageProps, k as BreadcrumbProps, l as BreadcrumbSeparator, m as BreadcrumbSeparatorProps } from './Breadcrumb-RX-B_gDV.js';
|
|
4
4
|
export { FooterCTA, FooterLink, FooterSection, FooterTrustBadge, LocaleDropdown, LocaleDropdownProps, LocaleOption, MDXOutboundLink, NavbarMegaMenu, NavbarMegaMenuItem, NavbarMegaMenuItemProps, NavbarMegaMenuProps, NavbarMegaMenuSection, NavbarMegaMenuSectionProps, NavbarMobileActions, NavbarMobileNavItem, NavbarMobileNavItemProps, NavbarMobileSeparator, NavbarV2, NavbarV2Actions, NavbarV2Brand, NavbarV2BrandProps, NavbarV2Props, NavbarV2Tab, NavbarV2TabMenu, NavbarV2TabMenuProps, NavbarV2TabProps, NavbarV2Tabs, OutboundClickEventDetail, OutboundLink, OutboundLinkProps, SiteFooter, SiteFooterProps, appendGovernedUTMs, appendUTMs, isExemptUrl } from './nav/index.js';
|
|
5
5
|
export { S as SectionHeader, a as SectionHeaderProps, b as SectionShell, c as SectionShellProps } from './SectionShell-GlglHCzz.js';
|
|
6
|
-
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-
|
|
6
|
+
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-MfKKyqL1.js';
|
|
7
7
|
export { Author, CardMetric, LogoItem, Media, MetricCounter, MetricCounterProps, Platform, PlatformBadge, PlatformBadgeProps, SocialProof, SocialProofCard, SocialProofCardProps, SocialProofCarousel, SocialProofCarouselProps, SocialProofFeatured, SocialProofFeaturedProps, SocialProofGrid, SocialProofGridProps, SocialProofLogos, SocialProofLogosProps, StarRating, StarRatingProps, VerticalVideoGrid, VerticalVideoGridProps, VideoLightbox, VideoLightboxProps } from './social-proof/index.js';
|
|
8
8
|
export { AnalysisProgress, BehavioralSignals, ChangeEmail, ChangeEmailLabels, ChangeEmailProps, DataTable, DataTableBody, DataTableCell, DataTableHead, DataTableHeader, DataTableProps, DataTableRow, EngagementTip, FloatingTabBar, FloatingTabBarProps, ForgotPassword, ForgotPasswordLabels, ForgotPasswordProps, LeadProfile, LeadProfileState, LeadProfileView, LeadProfileViewProps, Login, LoginLabels, LoginProps, MBTIScore, NavItem, Shell, ShellProps, Sidebar, SidebarItem, SidebarItemProps, SidebarProps, SidebarSection, SidebarSectionProps, Signup, SignupLabels, SignupProps, TabItem, TabItemProps } from './admin/index.js';
|
|
9
9
|
export { AgitationPoint, AnnouncementBar, AnnouncementBarProps, ArchitectureConnection, ArchitectureDiagram, ArchitectureDiagramProps, ArchitectureNode, ArchitectureNodeType, BeforeAfterBlock, BeforeAfterBlockProps, BeforeAfterItem, BeforeAfterSide, BookingEmbed, BookingEmbedProps, CaseStudyCard, CaseStudyCardProps, CaseStudyMetric, CaseStudySection, CaseStudySectionProps, ComparisonColumn, ComparisonRow, ComparisonTable, ComparisonTableProps, CompetitorDiff, CompetitorDiffItem, CompetitorDiffProps, ComplianceGrid, ComplianceGridProps, ComplianceItem, ComplianceStatus, EcosystemConnection, EcosystemDiagram, EcosystemDiagramProps, EcosystemLayer, EnterpriseSLA, EnterpriseSignalCategory, EnterpriseSignalItem, EnterpriseSignalStatus, EnterpriseSignaling, EnterpriseSignalingProps, EraSentiment, EvolutionEra, EvolutionTimeline, EvolutionTimelineProps, ExitIntentOverlay, ExitIntentOverlayProps, GuaranteeHighlight, GuaranteeHighlightProps, ICPFilter, ICPFilterItem, ICPFilterProps, IntegrationEntry, IntegrationShowcase, IntegrationShowcaseProps, IntelligenceBlock, IntelligenceBlockProps, IntelligenceCapability, IntelligenceMetric, IntentCTA, IntentCTAProps, IntentStage, IntentTriggerType, LeadCaptureForm, LeadCaptureFormProps, ManifestoAttribution, ManifestoBlock, ManifestoBlockProps, ObjectionFAQ, ObjectionFAQProps, ObjectionItem, PartnerBenefit, PartnerCalcInput, PartnerCalcOutput, PartnerDifferentiator, PartnerValueProp, PartnerValuePropProps, PricingCard, PricingCardProps, PricingFeature, PricingSection, PricingSectionProps, PricingToggle, PricingToggleProps, ProblemAgitation, ProblemAgitationProps, ProcessTimeline, ProcessTimelineProps, ROICalculator, ROICalculatorProps, ROIComparisonItem, SecurityBlock, SecurityBlockProps, SecurityCertification, SegmentSwitch, SegmentSwitchProps, StakeholderContent, StakeholderDefinition, StakeholderTabs, StakeholderTabsProps, StickyActionBar, StickyActionBarProps, TimelineStep, ValueAnchor, ValueAnchorInput, ValueAnchorOutput, ValueAnchorProps, VideoEmbed, VideoEmbedProps } from './marketing/index.js';
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger }
|
|
|
9
9
|
export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger } from './chunk-FAFAP4L5.js';
|
|
10
10
|
export { Checkbox } from './chunk-7PX2AZ6Y.js';
|
|
11
11
|
export { AppearancePanel, AppearanceProvider, hexToRgb, initializeAppearance, prefersReducedMotion, useAppearance } from './chunk-JPJN4YBC.js';
|
|
12
|
-
export { CTASection, FeatureSection, HeroSection, StatsSection } from './chunk-
|
|
12
|
+
export { CTASection, FeatureSection, HeroSection, StatsSection } from './chunk-ARC5KXBC.js';
|
|
13
13
|
export { Stack } from './chunk-NN3TUHIH.js';
|
|
14
14
|
export { LocaleDropdown, MDXOutboundLink, NavbarMegaMenu, NavbarMegaMenuItem, NavbarMegaMenuSection, NavbarMobileActions, NavbarMobileNavItem, NavbarMobileSeparator, NavbarV2, NavbarV2Actions, NavbarV2Brand, NavbarV2Tab, NavbarV2TabMenu, NavbarV2Tabs, SiteFooter } from './chunk-JNASH4OQ.js';
|
|
15
15
|
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './chunk-XU3OMQ7V.js';
|
package/dist/sections/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkLSR7JYVH_cjs = require('../chunk-LSR7JYVH.cjs');
|
|
4
4
|
require('../chunk-MQRB634A.cjs');
|
|
5
5
|
var chunkEM7JHRYW_cjs = require('../chunk-EM7JHRYW.cjs');
|
|
6
6
|
require('../chunk-MDB2WCRQ.cjs');
|
|
@@ -14,19 +14,19 @@ SectionHeader2.displayName = "SectionHeader";
|
|
|
14
14
|
|
|
15
15
|
Object.defineProperty(exports, "CTASection", {
|
|
16
16
|
enumerable: true,
|
|
17
|
-
get: function () { return
|
|
17
|
+
get: function () { return chunkLSR7JYVH_cjs.CTASection; }
|
|
18
18
|
});
|
|
19
19
|
Object.defineProperty(exports, "FeatureSection", {
|
|
20
20
|
enumerable: true,
|
|
21
|
-
get: function () { return
|
|
21
|
+
get: function () { return chunkLSR7JYVH_cjs.FeatureSection; }
|
|
22
22
|
});
|
|
23
23
|
Object.defineProperty(exports, "HeroSection", {
|
|
24
24
|
enumerable: true,
|
|
25
|
-
get: function () { return
|
|
25
|
+
get: function () { return chunkLSR7JYVH_cjs.HeroSection; }
|
|
26
26
|
});
|
|
27
27
|
Object.defineProperty(exports, "StatsSection", {
|
|
28
28
|
enumerable: true,
|
|
29
|
-
get: function () { return
|
|
29
|
+
get: function () { return chunkLSR7JYVH_cjs.StatsSection; }
|
|
30
30
|
});
|
|
31
31
|
exports.SectionHeader = SectionHeader2;
|
|
32
32
|
exports.SectionShell = SectionShell2;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { a as SectionHeaderProps, c as SectionShellProps } from '../SectionShell-GlglHCzz.cjs';
|
|
3
|
-
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-
|
|
3
|
+
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-Dihy3zml.cjs';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Stable public wrapper for the sections entry.
|
package/dist/sections/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { a as SectionHeaderProps, c as SectionShellProps } from '../SectionShell-GlglHCzz.js';
|
|
3
|
-
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-
|
|
3
|
+
export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-MfKKyqL1.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Stable public wrapper for the sections entry.
|
package/dist/sections/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { CTASection, FeatureSection, HeroSection, StatsSection } from '../chunk-
|
|
1
|
+
export { CTASection, FeatureSection, HeroSection, StatsSection } from '../chunk-ARC5KXBC.js';
|
|
2
2
|
import '../chunk-NN3TUHIH.js';
|
|
3
3
|
import { SectionShell, SectionHeader } from '../chunk-UFAJY2DM.js';
|
|
4
4
|
import '../chunk-HN4PHABT.js';
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/HeroSection/HeroSection.tsx","../src/components/FeatureSection/FeatureSection.tsx","../src/components/CTASection/CTASection.tsx","../src/components/StatsSection/StatsSection.tsx"],"names":["forwardRef","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\nimport './HeroSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'left' | 'center' | 'split';\n title: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n\n /** Main visual (Image, Video, or Component) */\n media?: React.ReactNode;\n /** Adds a browser-like header bar to the media container */\n mediaBrowserFrame?: boolean;\n\n /** Optional floating elements (e.g. SocialProof cards) over the media */\n floatingElement?: React.ReactNode;\n floatingPosition?: 'top-right' | 'bottom-left';\n\n /** Background Visuals */\n withGrid?: boolean;\n withGlow?: boolean;\n\n align?: 'left' | 'center'; // Text alignment overrides variant default\n}\n\n/* ============================================================================\n Component\n ============================================================================ */\n\nexport const HeroSection = forwardRef<HTMLDivElement, HeroSectionProps>(\n (\n {\n variant = 'left',\n title,\n subtitle,\n eyebrow,\n primaryCta,\n secondaryCta,\n media,\n mediaBrowserFrame = false,\n floatingElement,\n floatingPosition = 'bottom-left',\n withGrid = false,\n withGlow = false,\n align,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // Determine layout based on variant\n const isSplit = variant === 'split';\n const isCenter = variant === 'center';\n\n // Default alignment\n const textAlignment = align || (isCenter ? 'center' : 'left');\n\n const ContentBlock = (\n <div className={clsx('ds-hero__content', `ds-hero__content--${textAlignment}`)}>\n {eyebrow && (\n <span className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n {eyebrow}\n </span>\n )}\n <h1 className=\"ds-hero__title\">{title}</h1>\n {subtitle && <p className=\"ds-hero__subtitle\">{subtitle}</p>}\n\n {(primaryCta || secondaryCta) && (\n <div className=\"ds-hero__actions\">\n {primaryCta}\n {secondaryCta}\n </div>\n )}\n {children}\n </div>\n );\n\n const MediaBlock = media && (\n <div className=\"ds-hero__media-wrapper\">\n <div className={clsx('ds-hero__media', mediaBrowserFrame && 'ds-hero__media--browser')}>\n {media}\n </div>\n {floatingElement && (\n <div className={clsx('ds-hero__float', `ds-hero__float--${floatingPosition}`)}>\n {floatingElement}\n </div>\n )}\n </div>\n );\n\n return (\n <SectionShell\n ref={ref}\n className={clsx(\n 'ds-hero',\n `ds-hero--${variant}`,\n withGrid && 'ds-hero--bg-grid',\n withGlow && 'ds-hero--bg-glow',\n className,\n )}\n padding=\"lg\"\n {...props}\n >\n {isSplit ? (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',\n gap: 'var(--space-16)',\n alignItems: 'center',\n }}\n >\n <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\n style={{\n width: '100%',\n display: 'flex',\n justifyContent: isCenter ? 'center' : 'flex-start',\n }}\n >\n <div style={{ width: '100%', maxWidth: isCenter ? '1200px' : '100%' }}>\n {MediaBlock}\n </div>\n </Box>\n )}\n </Stack>\n )}\n </SectionShell>\n );\n },\n);\n\nHeroSection.displayName = 'HeroSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './FeatureSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface FeatureItem {\n title: React.ReactNode;\n description: React.ReactNode;\n icon?: React.ReactNode;\n media?: React.ReactNode; // For ZigZag\n step?: string | number; // For ZigZag steps\n cta?: React.ReactNode;\n}\n\nexport interface FeatureSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'grid' | 'zigzag';\n columns?: 2 | 3 | 4; // For grid variant\n features: FeatureItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n alignHeader?: 'left' | 'center' | 'right';\n}\n\n/* ============================================================================\n Components\n ============================================================================ */\n\nconst FeatureCard = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-card\">\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-feature-card__title\">{item.title}</h3>\n <div className=\"ds-feature-card__description\">{item.description}</div>\n {item.cta && <div className=\"ds-feature-card__cta\">{item.cta}</div>}\n </div>\n);\n\nconst FeatureRow = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-row\">\n <div className=\"ds-feature-row__content\">\n {item.step && <div className=\"ds-feature-row__step\">STEP {item.step}</div>}\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-section-header__title\" style={{ fontSize: 'var(--font-size-2xl)' }}>\n {item.title}\n </h3>\n <div className=\"ds-section-header__subtitle\" style={{ fontSize: 'var(--font-size-lg)' }}>\n {item.description}\n </div>\n {item.cta && <div className=\"ds-hero__actions\">{item.cta}</div>}\n </div>\n <div className=\"ds-feature-row__media\">\n {item.media || (\n <div style={{ paddingBottom: '56.25%', background: 'var(--glass-base-active)' }} />\n )}\n </div>\n </div>\n);\n\nexport const FeatureSection = forwardRef<HTMLDivElement, FeatureSectionProps>(\n (\n {\n variant = 'grid',\n columns = 3,\n features,\n title,\n subtitle,\n eyebrow,\n alignHeader = 'center',\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-feature-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} align={alignHeader} />\n\n {variant === 'grid' ? (\n <div className={clsx('ds-feature-grid', `ds-feature-grid--${columns}-col`)}>\n {features.map((feature, index) => (\n <FeatureCard key={index} item={feature} />\n ))}\n </div>\n ) : (\n <div className=\"ds-feature-zigzag\">\n {features.map((feature, index) => (\n <FeatureRow key={index} item={feature} />\n ))}\n </div>\n )}\n </SectionShell>\n );\n },\n);\nFeatureSection.displayName = 'FeatureSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './CTASection.css';\n\nexport interface CTASectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'center' | 'split' | 'boxed';\n title: React.ReactNode;\n description?: React.ReactNode;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n actions?: React.ReactNode; // Custom actions slot\n}\n\nexport const CTASection = forwardRef<HTMLDivElement, CTASectionProps>(\n (\n {\n variant = 'center',\n title,\n description,\n primaryCta,\n secondaryCta,\n actions,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // \"Boxed\" is just centered content inside a card-like container within the section\n const isBoxed = variant === 'boxed';\n const effectiveVariant = isBoxed ? 'center' : variant;\n\n const Content = (\n <div className={clsx('ds-cta-section', `ds-cta-section--${effectiveVariant}`)}>\n {effectiveVariant === 'split' ? (\n <div className=\"ds-cta-section--split\">\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n </div>\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n ) : (\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n )}\n {children}\n </div>\n );\n\n return (\n <SectionShell ref={ref} className={clsx(className)} {...props}>\n {isBoxed ? <div className=\"ds-cta-card\">{Content}</div> : Content}\n </SectionShell>\n );\n },\n);\nCTASection.displayName = 'CTASection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './StatsSection.css';\n\nexport interface StatItem {\n label: string;\n value: string | number;\n suffix?: string;\n prefix?: string;\n}\n\nexport interface StatsSectionProps extends Omit<SectionShellProps, 'title'> {\n stats: StatItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, title, subtitle, eyebrow, className, ...props }, ref) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-stats-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} />\n\n <div className=\"ds-stats-grid\">\n {stats.map((stat, idx) => (\n <div key={idx} className=\"ds-stat-card\">\n <div className=\"ds-stat-value\">\n {stat.prefix}\n {stat.value}\n <span className=\"ds-stat-suffix\">{stat.suffix}</span>\n </div>\n <div className=\"ds-stat-label\">{stat.label}</div>\n </div>\n ))}\n </div>\n </SectionShell>\n );\n },\n);\nStatsSection.displayName = 'StatsSection';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/HeroSection/HeroSection.tsx","../src/components/FeatureSection/FeatureSection.tsx","../src/components/CTASection/CTASection.tsx","../src/components/StatsSection/StatsSection.tsx"],"names":["forwardRef","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\nimport './HeroSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'left' | 'center' | 'split';\n title: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n\n /** Main visual (Image, Video, or Component) */\n media?: React.ReactNode;\n /** Adds a browser-like header bar to the media container */\n mediaBrowserFrame?: boolean;\n\n /** Optional floating elements (e.g. SocialProof cards) over the media */\n floatingElement?: React.ReactNode;\n floatingPosition?: 'top-right' | 'bottom-left';\n\n /** Background Visuals */\n withGrid?: boolean;\n withGlow?: boolean;\n\n align?: 'left' | 'center'; // Text alignment overrides variant default\n}\n\n/* ============================================================================\n Component\n ============================================================================ */\n\nexport const HeroSection = forwardRef<HTMLDivElement, HeroSectionProps>(\n (\n {\n variant = 'left',\n title,\n subtitle,\n eyebrow,\n primaryCta,\n secondaryCta,\n media,\n mediaBrowserFrame = false,\n floatingElement,\n floatingPosition = 'bottom-left',\n withGrid = false,\n withGlow = false,\n align,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // Determine layout based on variant\n const isSplit = variant === 'split';\n const isCenter = variant === 'center';\n\n // Default alignment\n const textAlignment = align || (isCenter ? 'center' : 'left');\n\n const ContentBlock = (\n <div className={clsx('ds-hero__content', `ds-hero__content--${textAlignment}`)}>\n {eyebrow && (\n <span className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n {eyebrow}\n </span>\n )}\n <h1 className=\"ds-hero__title\">{title}</h1>\n {subtitle && <p className=\"ds-hero__subtitle\">{subtitle}</p>}\n\n {(primaryCta || secondaryCta) && (\n <div className=\"ds-hero__actions\">\n {primaryCta}\n {secondaryCta}\n </div>\n )}\n {children}\n </div>\n );\n\n const MediaBlock = media && (\n <div className=\"ds-hero__media-wrapper\">\n <div className={clsx('ds-hero__media', mediaBrowserFrame && 'ds-hero__media--browser')}>\n {media}\n </div>\n {floatingElement && (\n <div className={clsx('ds-hero__float', `ds-hero__float--${floatingPosition}`)}>\n {floatingElement}\n </div>\n )}\n </div>\n );\n\n return (\n <SectionShell\n ref={ref}\n className={clsx(\n 'ds-hero',\n `ds-hero--${variant}`,\n withGrid && 'ds-hero--bg-grid',\n withGlow && 'ds-hero--bg-glow',\n className,\n )}\n padding=\"lg\"\n {...props}\n >\n {isSplit ? (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',\n gap: 'var(--space-16)',\n alignItems: 'center',\n }}\n >\n <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\n style={{\n width: '100%',\n display: 'flex',\n justifyContent: isCenter ? 'center' : 'flex-start',\n }}\n >\n <div style={{ width: '100%', maxWidth: isCenter ? '1200px' : '100%' }}>\n {MediaBlock}\n </div>\n </Box>\n )}\n </Stack>\n )}\n </SectionShell>\n );\n },\n);\n\nHeroSection.displayName = 'HeroSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './FeatureSection.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface FeatureItem {\n title: React.ReactNode;\n description: React.ReactNode;\n icon?: React.ReactNode;\n media?: React.ReactNode; // For ZigZag\n step?: string | number; // For ZigZag steps\n cta?: React.ReactNode;\n}\n\nexport interface FeatureSectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'grid' | 'zigzag';\n columns?: 2 | 3 | 4; // For grid variant\n features: FeatureItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n alignHeader?: 'left' | 'center' | 'right';\n}\n\n/* ============================================================================\n Components\n ============================================================================ */\n\nconst FeatureCard = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-card\">\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-feature-card__title\">{item.title}</h3>\n <div className=\"ds-feature-card__description\">{item.description}</div>\n {item.cta && <div className=\"ds-feature-card__cta\">{item.cta}</div>}\n </div>\n);\n\nconst FeatureRow = ({ item }: { item: FeatureItem }) => (\n <div className=\"ds-feature-row\">\n <div className=\"ds-feature-row__content\">\n {item.step && <div className=\"ds-feature-row__step\">STEP {item.step}</div>}\n {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n <h3 className=\"ds-section-header__title\" style={{ fontSize: 'var(--font-size-2xl)' }}>\n {item.title}\n </h3>\n <div className=\"ds-section-header__subtitle\" style={{ fontSize: 'var(--font-size-lg)' }}>\n {item.description}\n </div>\n {item.cta && <div className=\"ds-hero__actions\">{item.cta}</div>}\n </div>\n <div className=\"ds-feature-row__media\">\n {item.media || (\n <div style={{ paddingBottom: '56.25%', background: 'var(--glass-base-active)' }} />\n )}\n </div>\n </div>\n);\n\nexport const FeatureSection = forwardRef<HTMLDivElement, FeatureSectionProps>(\n (\n {\n variant = 'grid',\n columns = 3,\n features,\n title,\n subtitle,\n eyebrow,\n alignHeader = 'center',\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-feature-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} align={alignHeader} />\n\n {variant === 'grid' ? (\n <div className={clsx('ds-feature-grid', `ds-feature-grid--${columns}-col`)}>\n {features.map((feature, index) => (\n <FeatureCard key={index} item={feature} />\n ))}\n </div>\n ) : (\n <div className=\"ds-feature-zigzag\">\n {features.map((feature, index) => (\n <FeatureRow key={index} item={feature} />\n ))}\n </div>\n )}\n </SectionShell>\n );\n },\n);\nFeatureSection.displayName = 'FeatureSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './CTASection.css';\n\nexport interface CTASectionProps extends Omit<SectionShellProps, 'title'> {\n variant?: 'center' | 'split' | 'boxed';\n title: React.ReactNode;\n description?: React.ReactNode;\n primaryCta?: React.ReactNode;\n secondaryCta?: React.ReactNode;\n actions?: React.ReactNode; // Custom actions slot\n}\n\nexport const CTASection = forwardRef<HTMLDivElement, CTASectionProps>(\n (\n {\n variant = 'center',\n title,\n description,\n primaryCta,\n secondaryCta,\n actions,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n // \"Boxed\" is just centered content inside a card-like container within the section\n const isBoxed = variant === 'boxed';\n const effectiveVariant = isBoxed ? 'center' : variant;\n\n const Content = (\n <div className={clsx('ds-cta-section', `ds-cta-section--${effectiveVariant}`)}>\n {effectiveVariant === 'split' ? (\n <div className=\"ds-cta-section--split\">\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n </div>\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n ) : (\n <div className=\"ds-cta-content\">\n <h2 className=\"ds-cta-title\">{title}</h2>\n {description && <p className=\"ds-cta-description\">{description}</p>}\n <div className=\"ds-cta-actions\">\n {actions || (\n <>\n {primaryCta}\n {secondaryCta}\n </>\n )}\n </div>\n </div>\n )}\n {children}\n </div>\n );\n\n return (\n <SectionShell ref={ref} className={clsx(className)} {...props}>\n {isBoxed ? <div className=\"ds-cta-card\">{Content}</div> : Content}\n </SectionShell>\n );\n },\n);\nCTASection.displayName = 'CTASection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './StatsSection.css';\n\nexport interface StatItem {\n label: string;\n value: string | number;\n suffix?: string;\n prefix?: string;\n}\n\nexport interface StatsSectionProps extends Omit<SectionShellProps, 'title'> {\n stats: StatItem[];\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, title, subtitle, eyebrow, className, ...props }, ref) => {\n return (\n <SectionShell ref={ref} className={clsx('ds-stats-section', className)} {...props}>\n <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} />\n\n <div className=\"ds-stats-grid\">\n {stats.map((stat, idx) => (\n <div key={idx} className=\"ds-stat-card\">\n <div className=\"ds-stat-value\">\n {stat.prefix}\n {stat.value}\n <span className=\"ds-stat-suffix\">{stat.suffix}</span>\n </div>\n <div className=\"ds-stat-label\">{stat.label}</div>\n </div>\n ))}\n </div>\n </SectionShell>\n );\n },\n);\nStatsSection.displayName = 'StatsSection';\n"]}
|