@opensite/ui 3.3.1 → 3.3.2

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.
Files changed (19) hide show
  1. package/dist/badge.d.cts +1 -1
  2. package/dist/badge.d.ts +1 -1
  3. package/dist/feature-capabilities-grid.cjs +10 -43
  4. package/dist/feature-capabilities-grid.d.cts +0 -4
  5. package/dist/feature-capabilities-grid.d.ts +0 -4
  6. package/dist/feature-capabilities-grid.js +10 -43
  7. package/dist/hero-conversation-intelligence.cjs +1 -1
  8. package/dist/hero-conversation-intelligence.js +1 -1
  9. package/dist/navbar-mega-menu.cjs +14 -5
  10. package/dist/navbar-mega-menu.js +14 -5
  11. package/dist/registry.cjs +48 -83
  12. package/dist/registry.js +48 -83
  13. package/dist/social-link-icon.d.cts +1 -1
  14. package/dist/social-link-icon.d.ts +1 -1
  15. package/dist/stats-growth-timeline.cjs +87 -64
  16. package/dist/stats-growth-timeline.d.cts +5 -1
  17. package/dist/stats-growth-timeline.d.ts +5 -1
  18. package/dist/stats-growth-timeline.js +88 -65
  19. package/package.json +1 -1
package/dist/badge.d.cts CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
7
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
10
10
  asChild?: boolean;
package/dist/badge.d.ts CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
7
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
10
10
  asChild?: boolean;
package/dist/feature-capabilities-grid.cjs CHANGED
@@ -501,7 +501,7 @@ function FeatureCapabilitiesGrid({
501
501
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
502
502
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
503
503
  ] }),
504
- /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
504
+ /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 pt-6 px-6 pb-0", children: [
505
505
  iconContent && /* @__PURE__ */ jsxRuntime.jsx(
506
506
  "div",
507
507
  {
@@ -517,31 +517,13 @@ function FeatureCapabilitiesGrid({
517
517
  {
518
518
  href: item.href,
519
519
  className: "flex-1 h-full flex items-center",
520
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
521
- item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
522
- "h3",
523
- {
524
- className: cn("text-lg font-medium", item.titleClassName),
525
- children: item.title
526
- }
527
- ) : /* @__PURE__ */ jsxRuntime.jsx(
528
- "div",
529
- {
530
- className: cn("text-lg font-medium", item.titleClassName),
531
- children: item.title
532
- }
533
- )),
534
- item.badge && /* @__PURE__ */ jsxRuntime.jsx(
535
- "span",
536
- {
537
- className: cn(
538
- "rounded-full border px-2 py-0.5 text-[10px] leading-none",
539
- item.badgeClassName
540
- ),
541
- children: item.badge
542
- }
543
- )
544
- ] })
520
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
521
+ "h3",
522
+ {
523
+ className: cn("text-lg font-medium", item.titleClassName),
524
+ children: item.title
525
+ }
526
+ ) : item.title) })
545
527
  }
546
528
  )
547
529
  ] }),
@@ -583,13 +565,7 @@ function FeatureCapabilitiesGrid({
583
565
  containerClassName,
584
566
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
585
567
  eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
586
- eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(
587
- "div",
588
- {
589
- className: cn("text-sm tracking-widest", eyebrowClassName),
590
- children: eyebrow
591
- }
592
- )),
568
+ eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : eyebrow),
593
569
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
594
570
  "h2",
595
571
  {
@@ -599,16 +575,7 @@ function FeatureCapabilitiesGrid({
599
575
  ),
600
576
  children: heading
601
577
  }
602
- ) : /* @__PURE__ */ jsxRuntime.jsx(
603
- "div",
604
- {
605
- className: cn(
606
- "text-4xl font-semibold sm:text-5xl",
607
- headingClassName
608
- ),
609
- children: heading
610
- }
611
- ))
578
+ ) : heading)
612
579
  ] }) : null,
613
580
  /* @__PURE__ */ jsxRuntime.jsx(
614
581
  "div",
package/dist/feature-capabilities-grid.d.cts CHANGED
@@ -23,10 +23,6 @@ interface FeatureCapabilitiesGridItem {
23
23
  * Icon name in format: prefix/name (e.g., "lucide/brain")
24
24
  */
25
25
  iconName?: string;
26
- /**
27
- * Optional badge label content
28
- */
29
- badge?: React.ReactNode;
30
26
  /**
31
27
  * Additional CSS classes for the item
32
28
  */
package/dist/feature-capabilities-grid.d.ts CHANGED
@@ -23,10 +23,6 @@ interface FeatureCapabilitiesGridItem {
23
23
  * Icon name in format: prefix/name (e.g., "lucide/brain")
24
24
  */
25
25
  iconName?: string;
26
- /**
27
- * Optional badge label content
28
- */
29
- badge?: React.ReactNode;
30
26
  /**
31
27
  * Additional CSS classes for the item
32
28
  */
package/dist/feature-capabilities-grid.js CHANGED
@@ -480,7 +480,7 @@ function FeatureCapabilitiesGrid({
480
480
  /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
481
481
  /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
482
482
  ] }),
483
- /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
483
+ /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 pt-6 px-6 pb-0", children: [
484
484
  iconContent && /* @__PURE__ */ jsx(
485
485
  "div",
486
486
  {
@@ -496,31 +496,13 @@ function FeatureCapabilitiesGrid({
496
496
  {
497
497
  href: item.href,
498
498
  className: "flex-1 h-full flex items-center",
499
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
500
- item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
501
- "h3",
502
- {
503
- className: cn("text-lg font-medium", item.titleClassName),
504
- children: item.title
505
- }
506
- ) : /* @__PURE__ */ jsx(
507
- "div",
508
- {
509
- className: cn("text-lg font-medium", item.titleClassName),
510
- children: item.title
511
- }
512
- )),
513
- item.badge && /* @__PURE__ */ jsx(
514
- "span",
515
- {
516
- className: cn(
517
- "rounded-full border px-2 py-0.5 text-[10px] leading-none",
518
- item.badgeClassName
519
- ),
520
- children: item.badge
521
- }
522
- )
523
- ] })
499
+ children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
500
+ "h3",
501
+ {
502
+ className: cn("text-lg font-medium", item.titleClassName),
503
+ children: item.title
504
+ }
505
+ ) : item.title) })
524
506
  }
525
507
  )
526
508
  ] }),
@@ -562,13 +544,7 @@ function FeatureCapabilitiesGrid({
562
544
  containerClassName,
563
545
  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
564
546
  eyebrow || heading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
565
- eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx(
566
- "div",
567
- {
568
- className: cn("text-sm tracking-widest", eyebrowClassName),
569
- children: eyebrow
570
- }
571
- )),
547
+ eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : eyebrow),
572
548
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
573
549
  "h2",
574
550
  {
@@ -578,16 +554,7 @@ function FeatureCapabilitiesGrid({
578
554
  ),
579
555
  children: heading
580
556
  }
581
- ) : /* @__PURE__ */ jsx(
582
- "div",
583
- {
584
- className: cn(
585
- "text-4xl font-semibold sm:text-5xl",
586
- headingClassName
587
- ),
588
- children: heading
589
- }
590
- ))
557
+ ) : heading)
591
558
  ] }) : null,
592
559
  /* @__PURE__ */ jsx(
593
560
  "div",
package/dist/hero-conversation-intelligence.cjs CHANGED
@@ -548,7 +548,7 @@ function HeroConversationIntelligence({
548
548
  {
549
549
  actions,
550
550
  actionsSlot,
551
- actionsClassName
551
+ actionsClassName: cn(actionsClassName, "justify-center")
552
552
  }
553
553
  )
554
554
  ]
package/dist/hero-conversation-intelligence.js CHANGED
@@ -542,7 +542,7 @@ function HeroConversationIntelligence({
542
542
  {
543
543
  actions,
544
544
  actionsSlot,
545
- actionsClassName
545
+ actionsClassName: cn(actionsClassName, "justify-center")
546
546
  }
547
547
  )
548
548
  ]
package/dist/navbar-mega-menu.cjs CHANGED
@@ -999,11 +999,20 @@ var NavbarMegaMenu = ({
999
999
  className: actionClassName,
1000
1000
  ...pressableProps
1001
1001
  } = action;
1002
- return /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1003
- icon,
1004
- label,
1005
- iconAfter
1006
- ] }) }, index);
1002
+ return /* @__PURE__ */ jsxRuntime.jsx(
1003
+ pressable.Pressable,
1004
+ {
1005
+ asButton: true,
1006
+ className: actionClassName,
1007
+ ...pressableProps,
1008
+ children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1009
+ icon,
1010
+ label,
1011
+ iconAfter
1012
+ ] })
1013
+ },
1014
+ index
1015
+ );
1007
1016
  });
1008
1017
  };
1009
1018
  const {
package/dist/navbar-mega-menu.js CHANGED
@@ -976,11 +976,20 @@ var NavbarMegaMenu = ({
976
976
  className: actionClassName,
977
977
  ...pressableProps
978
978
  } = action;
979
- return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
980
- icon,
981
- label,
982
- iconAfter
983
- ] }) }, index);
979
+ return /* @__PURE__ */ jsx(
980
+ Pressable,
981
+ {
982
+ asButton: true,
983
+ className: actionClassName,
984
+ ...pressableProps,
985
+ children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
986
+ icon,
987
+ label,
988
+ iconAfter
989
+ ] })
990
+ },
991
+ index
992
+ );
984
993
  });
985
994
  };
986
995
  const {
package/dist/registry.cjs CHANGED
@@ -27166,7 +27166,7 @@ function FeatureCapabilitiesGrid({
27166
27166
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
27167
27167
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
27168
27168
  ] }),
27169
- /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
27169
+ /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 pt-6 px-6 pb-0", children: [
27170
27170
  iconContent && /* @__PURE__ */ jsxRuntime.jsx(
27171
27171
  "div",
27172
27172
  {
@@ -27182,31 +27182,13 @@ function FeatureCapabilitiesGrid({
27182
27182
  {
27183
27183
  href: item.href,
27184
27184
  className: "flex-1 h-full flex items-center",
27185
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
27186
- item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
27187
- "h3",
27188
- {
27189
- className: cn("text-lg font-medium", item.titleClassName),
27190
- children: item.title
27191
- }
27192
- ) : /* @__PURE__ */ jsxRuntime.jsx(
27193
- "div",
27194
- {
27195
- className: cn("text-lg font-medium", item.titleClassName),
27196
- children: item.title
27197
- }
27198
- )),
27199
- item.badge && /* @__PURE__ */ jsxRuntime.jsx(
27200
- "span",
27201
- {
27202
- className: cn(
27203
- "rounded-full border px-2 py-0.5 text-[10px] leading-none",
27204
- item.badgeClassName
27205
- ),
27206
- children: item.badge
27207
- }
27208
- )
27209
- ] })
27185
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
27186
+ "h3",
27187
+ {
27188
+ className: cn("text-lg font-medium", item.titleClassName),
27189
+ children: item.title
27190
+ }
27191
+ ) : item.title) })
27210
27192
  }
27211
27193
  )
27212
27194
  ] }),
@@ -27248,13 +27230,7 @@ function FeatureCapabilitiesGrid({
27248
27230
  containerClassName,
27249
27231
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
27250
27232
  eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
27251
- eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(
27252
- "div",
27253
- {
27254
- className: cn("text-sm tracking-widest", eyebrowClassName),
27255
- children: eyebrow
27256
- }
27257
- )),
27233
+ eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : eyebrow),
27258
27234
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
27259
27235
  "h2",
27260
27236
  {
@@ -27264,16 +27240,7 @@ function FeatureCapabilitiesGrid({
27264
27240
  ),
27265
27241
  children: heading
27266
27242
  }
27267
- ) : /* @__PURE__ */ jsxRuntime.jsx(
27268
- "div",
27269
- {
27270
- className: cn(
27271
- "text-4xl font-semibold sm:text-5xl",
27272
- headingClassName
27273
- ),
27274
- children: heading
27275
- }
27276
- ))
27243
+ ) : heading)
27277
27244
  ] }) : null,
27278
27245
  /* @__PURE__ */ jsxRuntime.jsx(
27279
27246
  "div",
@@ -59662,7 +59629,7 @@ function HeroConversationIntelligence({
59662
59629
  {
59663
59630
  actions,
59664
59631
  actionsSlot,
59665
- actionsClassName
59632
+ actionsClassName: cn(actionsClassName, "justify-center")
59666
59633
  }
59667
59634
  )
59668
59635
  ]
@@ -63616,11 +63583,20 @@ var NavbarMegaMenu = ({
63616
63583
  className: actionClassName,
63617
63584
  ...pressableProps
63618
63585
  } = action;
63619
- return /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
63620
- icon,
63621
- label,
63622
- iconAfter
63623
- ] }) }, index);
63586
+ return /* @__PURE__ */ jsxRuntime.jsx(
63587
+ pressable.Pressable,
63588
+ {
63589
+ asButton: true,
63590
+ className: actionClassName,
63591
+ ...pressableProps,
63592
+ children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
63593
+ icon,
63594
+ label,
63595
+ iconAfter
63596
+ ] })
63597
+ },
63598
+ index
63599
+ );
63624
63600
  });
63625
63601
  };
63626
63602
  const {
@@ -97395,6 +97371,7 @@ function StatsGrowthTimeline({
97395
97371
  futureSlot,
97396
97372
  actions,
97397
97373
  actionsSlot,
97374
+ actionsClassName,
97398
97375
  background,
97399
97376
  pattern,
97400
97377
  patternOpacity,
@@ -97441,19 +97418,18 @@ function StatsGrowthTimeline({
97441
97418
  "div",
97442
97419
  {
97443
97420
  className: cn(
97444
- "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
97445
- getNestedCardBg(background, "muted"),
97446
- getNestedCardTextColor(background)
97421
+ "bg-muted text-muted-foreground",
97422
+ "mb-4 inline-flex h-fit py-2 w-fit px-4 items-center justify-center rounded-full text-sm font-semibold"
97447
97423
  ),
97448
97424
  children: milestone.year
97449
97425
  }
97450
97426
  ),
97451
- milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: milestone.title })),
97452
- milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
97427
+ milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : milestone.title),
97428
+ milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : milestone.description),
97453
97429
  milestone.metric && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
97454
97430
  renderMilestoneIcon(milestone),
97455
97431
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
97456
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
97432
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-primary", children: milestone.metric.value }),
97457
97433
  milestone.metric.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
97458
97434
  ] })
97459
97435
  ] })
@@ -97479,16 +97455,15 @@ function StatsGrowthTimeline({
97479
97455
  "div",
97480
97456
  {
97481
97457
  className: cn(
97482
- "mt-24 rounded-lg p-8",
97483
- getNestedCardBg(background, "muted"),
97484
- getNestedCardTextColor(background),
97458
+ "p-6 md:p-12 bg-card text-card-foreground",
97459
+ "mt-24 rounded-lg border border-border shadow-md",
97485
97460
  currentStatsClassName
97486
97461
  ),
97487
97462
  children: [
97488
- currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
97463
+ currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-12 text-center text-4xl lg:text-5xl font-bold", children: currentStatsHeading }) : currentStatsHeading),
97489
97464
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", stat.className), children: [
97490
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
97491
- stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
97465
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-primary md:text-3xl xl:text-4xl", children: stat.value }),
97466
+ stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-balance text-sm", children: stat.label })
97492
97467
  ] }, index)) })
97493
97468
  ]
97494
97469
  }
@@ -97500,39 +97475,29 @@ function StatsGrowthTimeline({
97500
97475
  currentStatsHeading,
97501
97476
  currentStatsClassName
97502
97477
  ]);
97503
- const actionsContent = React30.useMemo(() => {
97504
- if (actionsSlot) return actionsSlot;
97505
- if (!actions || actions.length === 0) return null;
97506
- return actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
97507
- pressable.Pressable,
97508
- {
97509
- href: action.href,
97510
- onClick: action.onClick,
97511
- variant: action.variant,
97512
- className: "inline-flex items-center font-medium text-primary hover:underline",
97513
- children: [
97514
- action.label,
97515
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
97516
- ]
97517
- },
97518
- index
97519
- ));
97520
- }, [actionsSlot, actions]);
97521
97478
  const futureContent = React30.useMemo(() => {
97522
97479
  if (futureSlot) return futureSlot;
97523
97480
  if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
97524
97481
  return null;
97525
97482
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
97526
97483
  futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: futureHeading })),
97527
- futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
97528
- actionsContent
97484
+ futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-full md:max-w-lg text-balance", children: futureDescription }) : futureDescription),
97485
+ /* @__PURE__ */ jsxRuntime.jsx(
97486
+ BlockActions,
97487
+ {
97488
+ actions,
97489
+ actionsSlot,
97490
+ actionsClassName
97491
+ }
97492
+ )
97529
97493
  ] });
97530
97494
  }, [
97531
97495
  futureSlot,
97532
97496
  futureHeading,
97533
97497
  futureDescription,
97534
97498
  futureClassName,
97535
- actionsContent,
97499
+ actionsSlot,
97500
+ actionsClassName,
97536
97501
  actions
97537
97502
  ]);
97538
97503
  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
@@ -97569,7 +97534,7 @@ function StatsGrowthTimeline({
97569
97534
  ),
97570
97535
  children: description
97571
97536
  }
97572
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
97537
+ ) : description)
97573
97538
  ] }),
97574
97539
  milestonesContent,
97575
97540
  currentStatsContent,
package/dist/registry.js CHANGED
@@ -27126,7 +27126,7 @@ function FeatureCapabilitiesGrid({
27126
27126
  /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
27127
27127
  /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
27128
27128
  ] }),
27129
- /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
27129
+ /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 pt-6 px-6 pb-0", children: [
27130
27130
  iconContent && /* @__PURE__ */ jsx(
27131
27131
  "div",
27132
27132
  {
@@ -27142,31 +27142,13 @@ function FeatureCapabilitiesGrid({
27142
27142
  {
27143
27143
  href: item.href,
27144
27144
  className: "flex-1 h-full flex items-center",
27145
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
27146
- item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
27147
- "h3",
27148
- {
27149
- className: cn("text-lg font-medium", item.titleClassName),
27150
- children: item.title
27151
- }
27152
- ) : /* @__PURE__ */ jsx(
27153
- "div",
27154
- {
27155
- className: cn("text-lg font-medium", item.titleClassName),
27156
- children: item.title
27157
- }
27158
- )),
27159
- item.badge && /* @__PURE__ */ jsx(
27160
- "span",
27161
- {
27162
- className: cn(
27163
- "rounded-full border px-2 py-0.5 text-[10px] leading-none",
27164
- item.badgeClassName
27165
- ),
27166
- children: item.badge
27167
- }
27168
- )
27169
- ] })
27145
+ children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
27146
+ "h3",
27147
+ {
27148
+ className: cn("text-lg font-medium", item.titleClassName),
27149
+ children: item.title
27150
+ }
27151
+ ) : item.title) })
27170
27152
  }
27171
27153
  )
27172
27154
  ] }),
@@ -27208,13 +27190,7 @@ function FeatureCapabilitiesGrid({
27208
27190
  containerClassName,
27209
27191
  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
27210
27192
  eyebrow || heading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
27211
- eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx(
27212
- "div",
27213
- {
27214
- className: cn("text-sm tracking-widest", eyebrowClassName),
27215
- children: eyebrow
27216
- }
27217
- )),
27193
+ eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : eyebrow),
27218
27194
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
27219
27195
  "h2",
27220
27196
  {
@@ -27224,16 +27200,7 @@ function FeatureCapabilitiesGrid({
27224
27200
  ),
27225
27201
  children: heading
27226
27202
  }
27227
- ) : /* @__PURE__ */ jsx(
27228
- "div",
27229
- {
27230
- className: cn(
27231
- "text-4xl font-semibold sm:text-5xl",
27232
- headingClassName
27233
- ),
27234
- children: heading
27235
- }
27236
- ))
27203
+ ) : heading)
27237
27204
  ] }) : null,
27238
27205
  /* @__PURE__ */ jsx(
27239
27206
  "div",
@@ -59622,7 +59589,7 @@ function HeroConversationIntelligence({
59622
59589
  {
59623
59590
  actions,
59624
59591
  actionsSlot,
59625
- actionsClassName
59592
+ actionsClassName: cn(actionsClassName, "justify-center")
59626
59593
  }
59627
59594
  )
59628
59595
  ]
@@ -63576,11 +63543,20 @@ var NavbarMegaMenu = ({
63576
63543
  className: actionClassName,
63577
63544
  ...pressableProps
63578
63545
  } = action;
63579
- return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
63580
- icon,
63581
- label,
63582
- iconAfter
63583
- ] }) }, index);
63546
+ return /* @__PURE__ */ jsx(
63547
+ Pressable,
63548
+ {
63549
+ asButton: true,
63550
+ className: actionClassName,
63551
+ ...pressableProps,
63552
+ children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
63553
+ icon,
63554
+ label,
63555
+ iconAfter
63556
+ ] })
63557
+ },
63558
+ index
63559
+ );
63584
63560
  });
63585
63561
  };
63586
63562
  const {
@@ -97355,6 +97331,7 @@ function StatsGrowthTimeline({
97355
97331
  futureSlot,
97356
97332
  actions,
97357
97333
  actionsSlot,
97334
+ actionsClassName,
97358
97335
  background,
97359
97336
  pattern,
97360
97337
  patternOpacity,
@@ -97401,19 +97378,18 @@ function StatsGrowthTimeline({
97401
97378
  "div",
97402
97379
  {
97403
97380
  className: cn(
97404
- "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
97405
- getNestedCardBg(background, "muted"),
97406
- getNestedCardTextColor(background)
97381
+ "bg-muted text-muted-foreground",
97382
+ "mb-4 inline-flex h-fit py-2 w-fit px-4 items-center justify-center rounded-full text-sm font-semibold"
97407
97383
  ),
97408
97384
  children: milestone.year
97409
97385
  }
97410
97386
  ),
97411
- milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
97412
- milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
97387
+ milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : milestone.title),
97388
+ milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : milestone.description),
97413
97389
  milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
97414
97390
  renderMilestoneIcon(milestone),
97415
97391
  /* @__PURE__ */ jsxs("div", { children: [
97416
- /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
97392
+ /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-primary", children: milestone.metric.value }),
97417
97393
  milestone.metric.label && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
97418
97394
  ] })
97419
97395
  ] })
@@ -97439,16 +97415,15 @@ function StatsGrowthTimeline({
97439
97415
  "div",
97440
97416
  {
97441
97417
  className: cn(
97442
- "mt-24 rounded-lg p-8",
97443
- getNestedCardBg(background, "muted"),
97444
- getNestedCardTextColor(background),
97418
+ "p-6 md:p-12 bg-card text-card-foreground",
97419
+ "mt-24 rounded-lg border border-border shadow-md",
97445
97420
  currentStatsClassName
97446
97421
  ),
97447
97422
  children: [
97448
- currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
97423
+ currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-12 text-center text-4xl lg:text-5xl font-bold", children: currentStatsHeading }) : currentStatsHeading),
97449
97424
  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
97450
- /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
97451
- stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
97425
+ /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-primary md:text-3xl xl:text-4xl", children: stat.value }),
97426
+ stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-balance text-sm", children: stat.label })
97452
97427
  ] }, index)) })
97453
97428
  ]
97454
97429
  }
@@ -97460,39 +97435,29 @@ function StatsGrowthTimeline({
97460
97435
  currentStatsHeading,
97461
97436
  currentStatsClassName
97462
97437
  ]);
97463
- const actionsContent = useMemo(() => {
97464
- if (actionsSlot) return actionsSlot;
97465
- if (!actions || actions.length === 0) return null;
97466
- return actions.map((action, index) => /* @__PURE__ */ jsxs(
97467
- Pressable,
97468
- {
97469
- href: action.href,
97470
- onClick: action.onClick,
97471
- variant: action.variant,
97472
- className: "inline-flex items-center font-medium text-primary hover:underline",
97473
- children: [
97474
- action.label,
97475
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
97476
- ]
97477
- },
97478
- index
97479
- ));
97480
- }, [actionsSlot, actions]);
97481
97438
  const futureContent = useMemo(() => {
97482
97439
  if (futureSlot) return futureSlot;
97483
97440
  if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
97484
97441
  return null;
97485
97442
  return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
97486
97443
  futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
97487
- futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
97488
- actionsContent
97444
+ futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-full md:max-w-lg text-balance", children: futureDescription }) : futureDescription),
97445
+ /* @__PURE__ */ jsx(
97446
+ BlockActions,
97447
+ {
97448
+ actions,
97449
+ actionsSlot,
97450
+ actionsClassName
97451
+ }
97452
+ )
97489
97453
  ] });
97490
97454
  }, [
97491
97455
  futureSlot,
97492
97456
  futureHeading,
97493
97457
  futureDescription,
97494
97458
  futureClassName,
97495
- actionsContent,
97459
+ actionsSlot,
97460
+ actionsClassName,
97496
97461
  actions
97497
97462
  ]);
97498
97463
  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
@@ -97529,7 +97494,7 @@ function StatsGrowthTimeline({
97529
97494
  ),
97530
97495
  children: description
97531
97496
  }
97532
- ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
97497
+ ) : description)
97533
97498
  ] }),
97534
97499
  milestonesContent,
97535
97500
  currentStatsContent,
package/dist/social-link-icon.d.cts CHANGED
@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
77
77
  * />
78
78
  * ```
79
79
  */
80
- declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
80
+ declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
81
81
 
82
82
  export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };
package/dist/social-link-icon.d.ts CHANGED
@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
77
77
  * />
78
78
  * ```
79
79
  */
80
- declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
80
+ declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
81
81
 
82
82
  export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };
package/dist/stats-growth-timeline.cjs CHANGED
@@ -34,36 +34,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
34
34
  function cn(...inputs) {
35
35
  return tailwindMerge.twMerge(clsx.clsx(inputs));
36
36
  }
37
- function getNestedCardBg(parentBg, variant = "muted", options) {
38
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
39
- if (isDark) {
40
- switch (variant) {
41
- case "muted":
42
- return "bg-background";
43
- case "card":
44
- return "bg-card";
45
- case "accent":
46
- return "bg-accent";
47
- case "subtle":
48
- return "bg-background/50";
49
- }
50
- } else {
51
- switch (variant) {
52
- case "muted":
53
- return "bg-muted";
54
- case "card":
55
- return "bg-card";
56
- case "accent":
57
- return "bg-accent";
58
- case "subtle":
59
- return "bg-muted/50";
60
- }
61
- }
62
- }
63
- function getNestedCardTextColor(parentBg, options) {
64
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
65
- return isDark ? "text-foreground" : "";
66
- }
67
37
  var badgeVariants = classVarianceAuthority.cva(
68
38
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
69
39
  {
@@ -480,6 +450,70 @@ var Section = React__namespace.default.forwardRef(
480
450
  }
481
451
  );
482
452
  Section.displayName = "Section";
453
+ var MOBILE_CLASSES = {
454
+ "fit-left": "items-start md:items-center",
455
+ "fit-center": "items-center",
456
+ "fit-right": "items-end md:items-center",
457
+ "full-left": "items-stretch md:items-center",
458
+ "full-center": "items-stretch md:items-center",
459
+ "full-right": "items-stretch md:items-center"
460
+ };
461
+ function BlockActions({
462
+ mobileConfig,
463
+ actionsClassName,
464
+ verticalSpacing = "mt-4 md:mt-8",
465
+ actions,
466
+ actionsSlot
467
+ }) {
468
+ const width = mobileConfig?.width ?? "full";
469
+ const position = mobileConfig?.position ?? "center";
470
+ const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
471
+ if (actionsSlot) {
472
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
473
+ } else if (actions && actions?.length > 0) {
474
+ return /* @__PURE__ */ jsxRuntime.jsx(
475
+ "div",
476
+ {
477
+ className: cn(
478
+ "flex flex-col md:flex-row flex-wrap gap-4",
479
+ mobileLayoutClass,
480
+ actionsClassName,
481
+ verticalSpacing
482
+ ),
483
+ children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
484
+ }
485
+ );
486
+ } else {
487
+ return null;
488
+ }
489
+ }
490
+ function ActionComponent({ action }) {
491
+ const {
492
+ label,
493
+ icon,
494
+ iconAfter,
495
+ children,
496
+ href,
497
+ onClick,
498
+ className: actionClassName,
499
+ ...pressableProps
500
+ } = action;
501
+ return /* @__PURE__ */ jsxRuntime.jsx(
502
+ pressable.Pressable,
503
+ {
504
+ href,
505
+ onClick,
506
+ asButton: action.asButton ?? true,
507
+ className: actionClassName,
508
+ ...pressableProps,
509
+ children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
510
+ icon,
511
+ label,
512
+ iconAfter
513
+ ] })
514
+ }
515
+ );
516
+ }
483
517
  function StatsGrowthTimeline({
484
518
  sectionId = "stats-growth-timeline",
485
519
  badge,
@@ -496,6 +530,7 @@ function StatsGrowthTimeline({
496
530
  futureSlot,
497
531
  actions,
498
532
  actionsSlot,
533
+ actionsClassName,
499
534
  background,
500
535
  pattern,
501
536
  patternOpacity,
@@ -542,19 +577,18 @@ function StatsGrowthTimeline({
542
577
  "div",
543
578
  {
544
579
  className: cn(
545
- "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
546
- getNestedCardBg(background, "muted"),
547
- getNestedCardTextColor(background)
580
+ "bg-muted text-muted-foreground",
581
+ "mb-4 inline-flex h-fit py-2 w-fit px-4 items-center justify-center rounded-full text-sm font-semibold"
548
582
  ),
549
583
  children: milestone.year
550
584
  }
551
585
  ),
552
- milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: milestone.title })),
553
- milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
586
+ milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : milestone.title),
587
+ milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : milestone.description),
554
588
  milestone.metric && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
555
589
  renderMilestoneIcon(milestone),
556
590
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
557
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
591
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-primary", children: milestone.metric.value }),
558
592
  milestone.metric.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
559
593
  ] })
560
594
  ] })
@@ -580,16 +614,15 @@ function StatsGrowthTimeline({
580
614
  "div",
581
615
  {
582
616
  className: cn(
583
- "mt-24 rounded-lg p-8",
584
- getNestedCardBg(background, "muted"),
585
- getNestedCardTextColor(background),
617
+ "p-6 md:p-12 bg-card text-card-foreground",
618
+ "mt-24 rounded-lg border border-border shadow-md",
586
619
  currentStatsClassName
587
620
  ),
588
621
  children: [
589
- currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
622
+ currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-12 text-center text-4xl lg:text-5xl font-bold", children: currentStatsHeading }) : currentStatsHeading),
590
623
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", stat.className), children: [
591
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
592
- stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
624
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-primary md:text-3xl xl:text-4xl", children: stat.value }),
625
+ stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-balance text-sm", children: stat.label })
593
626
  ] }, index)) })
594
627
  ]
595
628
  }
@@ -601,39 +634,29 @@ function StatsGrowthTimeline({
601
634
  currentStatsHeading,
602
635
  currentStatsClassName
603
636
  ]);
604
- const actionsContent = React.useMemo(() => {
605
- if (actionsSlot) return actionsSlot;
606
- if (!actions || actions.length === 0) return null;
607
- return actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
608
- pressable.Pressable,
609
- {
610
- href: action.href,
611
- onClick: action.onClick,
612
- variant: action.variant,
613
- className: "inline-flex items-center font-medium text-primary hover:underline",
614
- children: [
615
- action.label,
616
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
617
- ]
618
- },
619
- index
620
- ));
621
- }, [actionsSlot, actions]);
622
637
  const futureContent = React.useMemo(() => {
623
638
  if (futureSlot) return futureSlot;
624
639
  if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
625
640
  return null;
626
641
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
627
642
  futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: futureHeading })),
628
- futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
629
- actionsContent
643
+ futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-full md:max-w-lg text-balance", children: futureDescription }) : futureDescription),
644
+ /* @__PURE__ */ jsxRuntime.jsx(
645
+ BlockActions,
646
+ {
647
+ actions,
648
+ actionsSlot,
649
+ actionsClassName
650
+ }
651
+ )
630
652
  ] });
631
653
  }, [
632
654
  futureSlot,
633
655
  futureHeading,
634
656
  futureDescription,
635
657
  futureClassName,
636
- actionsContent,
658
+ actionsSlot,
659
+ actionsClassName,
637
660
  actions
638
661
  ]);
639
662
  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
@@ -670,7 +693,7 @@ function StatsGrowthTimeline({
670
693
  ),
671
694
  children: description
672
695
  }
673
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
696
+ ) : description)
674
697
  ] }),
675
698
  milestonesContent,
676
699
  currentStatsContent,
package/dist/stats-growth-timeline.d.cts CHANGED
@@ -126,6 +126,10 @@ interface StatsGrowthTimelineProps {
126
126
  * Custom slot for rendering actions (overrides actions array)
127
127
  */
128
128
  actionsSlot?: React.ReactNode;
129
+ /**
130
+ * Additional CSS classes for the actions container
131
+ */
132
+ actionsClassName?: string;
129
133
  /**
130
134
  * Background style for the section
131
135
  */
@@ -206,6 +210,6 @@ interface StatsGrowthTimelineProps {
206
210
  * />
207
211
  * ```
208
212
  */
209
- declare function StatsGrowthTimeline({ sectionId, badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, timelineClassName, milestoneClassName, currentStatsClassName, futureClassName, }: StatsGrowthTimelineProps): react_jsx_runtime.JSX.Element;
213
+ declare function StatsGrowthTimeline({ sectionId, badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, actionsClassName, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, timelineClassName, milestoneClassName, currentStatsClassName, futureClassName, }: StatsGrowthTimelineProps): react_jsx_runtime.JSX.Element;
210
214
 
211
215
  export { type CurrentStat, type Milestone, StatsGrowthTimeline, type StatsGrowthTimelineProps };
package/dist/stats-growth-timeline.d.ts CHANGED
@@ -126,6 +126,10 @@ interface StatsGrowthTimelineProps {
126
126
  * Custom slot for rendering actions (overrides actions array)
127
127
  */
128
128
  actionsSlot?: React.ReactNode;
129
+ /**
130
+ * Additional CSS classes for the actions container
131
+ */
132
+ actionsClassName?: string;
129
133
  /**
130
134
  * Background style for the section
131
135
  */
@@ -206,6 +210,6 @@ interface StatsGrowthTimelineProps {
206
210
  * />
207
211
  * ```
208
212
  */
209
- declare function StatsGrowthTimeline({ sectionId, badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, timelineClassName, milestoneClassName, currentStatsClassName, futureClassName, }: StatsGrowthTimelineProps): react_jsx_runtime.JSX.Element;
213
+ declare function StatsGrowthTimeline({ sectionId, badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, actionsClassName, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, timelineClassName, milestoneClassName, currentStatsClassName, futureClassName, }: StatsGrowthTimelineProps): react_jsx_runtime.JSX.Element;
210
214
 
211
215
  export { type CurrentStat, type Milestone, StatsGrowthTimeline, type StatsGrowthTimelineProps };
package/dist/stats-growth-timeline.js CHANGED
@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { Slot } from '@radix-ui/react-slot';
7
7
  import { cva } from 'class-variance-authority';
8
- import { jsx, jsxs } from 'react/jsx-runtime';
8
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
9
  import { Icon } from '@page-speed/icon';
10
10
  import { Pressable } from '@page-speed/pressable';
11
11
 
@@ -13,36 +13,6 @@ import { Pressable } from '@page-speed/pressable';
13
13
  function cn(...inputs) {
14
14
  return twMerge(clsx(inputs));
15
15
  }
16
- function getNestedCardBg(parentBg, variant = "muted", options) {
17
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
18
- if (isDark) {
19
- switch (variant) {
20
- case "muted":
21
- return "bg-background";
22
- case "card":
23
- return "bg-card";
24
- case "accent":
25
- return "bg-accent";
26
- case "subtle":
27
- return "bg-background/50";
28
- }
29
- } else {
30
- switch (variant) {
31
- case "muted":
32
- return "bg-muted";
33
- case "card":
34
- return "bg-card";
35
- case "accent":
36
- return "bg-accent";
37
- case "subtle":
38
- return "bg-muted/50";
39
- }
40
- }
41
- }
42
- function getNestedCardTextColor(parentBg, options) {
43
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
44
- return isDark ? "text-foreground" : "";
45
- }
46
16
  var badgeVariants = cva(
47
17
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
48
18
  {
@@ -459,6 +429,70 @@ var Section = React__default.forwardRef(
459
429
  }
460
430
  );
461
431
  Section.displayName = "Section";
432
+ var MOBILE_CLASSES = {
433
+ "fit-left": "items-start md:items-center",
434
+ "fit-center": "items-center",
435
+ "fit-right": "items-end md:items-center",
436
+ "full-left": "items-stretch md:items-center",
437
+ "full-center": "items-stretch md:items-center",
438
+ "full-right": "items-stretch md:items-center"
439
+ };
440
+ function BlockActions({
441
+ mobileConfig,
442
+ actionsClassName,
443
+ verticalSpacing = "mt-4 md:mt-8",
444
+ actions,
445
+ actionsSlot
446
+ }) {
447
+ const width = mobileConfig?.width ?? "full";
448
+ const position = mobileConfig?.position ?? "center";
449
+ const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
450
+ if (actionsSlot) {
451
+ return /* @__PURE__ */ jsx("div", { children: actionsSlot });
452
+ } else if (actions && actions?.length > 0) {
453
+ return /* @__PURE__ */ jsx(
454
+ "div",
455
+ {
456
+ className: cn(
457
+ "flex flex-col md:flex-row flex-wrap gap-4",
458
+ mobileLayoutClass,
459
+ actionsClassName,
460
+ verticalSpacing
461
+ ),
462
+ children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
463
+ }
464
+ );
465
+ } else {
466
+ return null;
467
+ }
468
+ }
469
+ function ActionComponent({ action }) {
470
+ const {
471
+ label,
472
+ icon,
473
+ iconAfter,
474
+ children,
475
+ href,
476
+ onClick,
477
+ className: actionClassName,
478
+ ...pressableProps
479
+ } = action;
480
+ return /* @__PURE__ */ jsx(
481
+ Pressable,
482
+ {
483
+ href,
484
+ onClick,
485
+ asButton: action.asButton ?? true,
486
+ className: actionClassName,
487
+ ...pressableProps,
488
+ children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
489
+ icon,
490
+ label,
491
+ iconAfter
492
+ ] })
493
+ }
494
+ );
495
+ }
462
496
  function StatsGrowthTimeline({
463
497
  sectionId = "stats-growth-timeline",
464
498
  badge,
@@ -475,6 +509,7 @@ function StatsGrowthTimeline({
475
509
  futureSlot,
476
510
  actions,
477
511
  actionsSlot,
512
+ actionsClassName,
478
513
  background,
479
514
  pattern,
480
515
  patternOpacity,
@@ -521,19 +556,18 @@ function StatsGrowthTimeline({
521
556
  "div",
522
557
  {
523
558
  className: cn(
524
- "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
525
- getNestedCardBg(background, "muted"),
526
- getNestedCardTextColor(background)
559
+ "bg-muted text-muted-foreground",
560
+ "mb-4 inline-flex h-fit py-2 w-fit px-4 items-center justify-center rounded-full text-sm font-semibold"
527
561
  ),
528
562
  children: milestone.year
529
563
  }
530
564
  ),
531
- milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
532
- milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
565
+ milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : milestone.title),
566
+ milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : milestone.description),
533
567
  milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
534
568
  renderMilestoneIcon(milestone),
535
569
  /* @__PURE__ */ jsxs("div", { children: [
536
- /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
570
+ /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-primary", children: milestone.metric.value }),
537
571
  milestone.metric.label && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
538
572
  ] })
539
573
  ] })
@@ -559,16 +593,15 @@ function StatsGrowthTimeline({
559
593
  "div",
560
594
  {
561
595
  className: cn(
562
- "mt-24 rounded-lg p-8",
563
- getNestedCardBg(background, "muted"),
564
- getNestedCardTextColor(background),
596
+ "p-6 md:p-12 bg-card text-card-foreground",
597
+ "mt-24 rounded-lg border border-border shadow-md",
565
598
  currentStatsClassName
566
599
  ),
567
600
  children: [
568
- currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
601
+ currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-12 text-center text-4xl lg:text-5xl font-bold", children: currentStatsHeading }) : currentStatsHeading),
569
602
  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
570
- /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
571
- stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
603
+ /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-primary md:text-3xl xl:text-4xl", children: stat.value }),
604
+ stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-balance text-sm", children: stat.label })
572
605
  ] }, index)) })
573
606
  ]
574
607
  }
@@ -580,39 +613,29 @@ function StatsGrowthTimeline({
580
613
  currentStatsHeading,
581
614
  currentStatsClassName
582
615
  ]);
583
- const actionsContent = useMemo(() => {
584
- if (actionsSlot) return actionsSlot;
585
- if (!actions || actions.length === 0) return null;
586
- return actions.map((action, index) => /* @__PURE__ */ jsxs(
587
- Pressable,
588
- {
589
- href: action.href,
590
- onClick: action.onClick,
591
- variant: action.variant,
592
- className: "inline-flex items-center font-medium text-primary hover:underline",
593
- children: [
594
- action.label,
595
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
596
- ]
597
- },
598
- index
599
- ));
600
- }, [actionsSlot, actions]);
601
616
  const futureContent = useMemo(() => {
602
617
  if (futureSlot) return futureSlot;
603
618
  if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
604
619
  return null;
605
620
  return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
606
621
  futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
607
- futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
608
- actionsContent
622
+ futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-full md:max-w-lg text-balance", children: futureDescription }) : futureDescription),
623
+ /* @__PURE__ */ jsx(
624
+ BlockActions,
625
+ {
626
+ actions,
627
+ actionsSlot,
628
+ actionsClassName
629
+ }
630
+ )
609
631
  ] });
610
632
  }, [
611
633
  futureSlot,
612
634
  futureHeading,
613
635
  futureDescription,
614
636
  futureClassName,
615
- actionsContent,
637
+ actionsSlot,
638
+ actionsClassName,
616
639
  actions
617
640
  ]);
618
641
  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
@@ -649,7 +672,7 @@ function StatsGrowthTimeline({
649
672
  ),
650
673
  children: description
651
674
  }
652
- ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
675
+ ) : description)
653
676
  ] }),
654
677
  milestonesContent,
655
678
  currentStatsContent,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "3.3.1",
3
+ "version": "3.3.2",
4
4
  "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
5
5
  "keywords": [
6
6
  "react",