@opensite/ui 3.2.8 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,11 +4,11 @@
4
4
  var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
- var pressable = require('@page-speed/pressable');
8
7
  var icon = require('@page-speed/icon');
9
8
  var jsxRuntime = require('react/jsx-runtime');
10
9
  var reactSlot = require('@radix-ui/react-slot');
11
10
  var classVarianceAuthority = require('class-variance-authority');
11
+ var pressable = require('@page-speed/pressable');
12
12
 
13
13
  function _interopNamespace(e) {
14
14
  if (e && e.__esModule) return e;
@@ -545,22 +545,6 @@ function AboutExpandableValues({
545
545
  const toggleExpand = React.useCallback((id) => {
546
546
  setExpandedValue((prev) => prev === id ? null : id);
547
547
  }, []);
548
- React.useMemo(() => {
549
- if (actionsSlot) return actionsSlot;
550
- if (!actions || actions.length === 0) return null;
551
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
552
- pressable.Pressable,
553
- {
554
- href: action.href,
555
- onClick: action.onClick,
556
- variant: action.variant || "default",
557
- size: action.size,
558
- asButton: true,
559
- children: action.label
560
- },
561
- idx
562
- )) });
563
- }, [actionsSlot, actions, actionsClassName]);
564
548
  const valuesContent = React.useMemo(() => {
565
549
  if (valuesSlot) return valuesSlot;
566
550
  if (!values || values.length === 0) return null;
@@ -674,7 +658,7 @@ function AboutExpandableValues({
674
658
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
675
659
  ctaClassName
676
660
  ),
677
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
661
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
678
662
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
679
663
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
680
664
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3,11 +3,11 @@ import * as React from 'react';
3
3
  import React__default, { useCallback, useMemo } from 'react';
4
4
  import { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
- import { Pressable } from '@page-speed/pressable';
7
6
  import { Icon } from '@page-speed/icon';
8
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
8
  import { Slot } from '@radix-ui/react-slot';
10
9
  import { cva } from 'class-variance-authority';
10
+ import { Pressable } from '@page-speed/pressable';
11
11
 
12
12
  // components/blocks/about/about-expandable-values.tsx
13
13
  function cn(...inputs) {
@@ -524,22 +524,6 @@ function AboutExpandableValues({
524
524
  const toggleExpand = useCallback((id) => {
525
525
  setExpandedValue((prev) => prev === id ? null : id);
526
526
  }, []);
527
- useMemo(() => {
528
- if (actionsSlot) return actionsSlot;
529
- if (!actions || actions.length === 0) return null;
530
- return /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsx(
531
- Pressable,
532
- {
533
- href: action.href,
534
- onClick: action.onClick,
535
- variant: action.variant || "default",
536
- size: action.size,
537
- asButton: true,
538
- children: action.label
539
- },
540
- idx
541
- )) });
542
- }, [actionsSlot, actions, actionsClassName]);
543
527
  const valuesContent = useMemo(() => {
544
528
  if (valuesSlot) return valuesSlot;
545
529
  if (!values || values.length === 0) return null;
@@ -653,7 +637,7 @@ function AboutExpandableValues({
653
637
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
654
638
  ctaClassName
655
639
  ),
656
- children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
640
+ children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
657
641
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
658
642
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
659
643
  /* @__PURE__ */ jsx(
@@ -423,15 +423,7 @@ function AboutMinimalStory({
423
423
  className: "h-16 w-16 rounded-full object-cover",
424
424
  optixFlowConfig
425
425
  }
426
- ) : /* @__PURE__ */ jsxRuntime.jsx(
427
- "div",
428
- {
429
- className: cn(
430
- "flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold"
431
- ),
432
- children: author.name.charAt(0)
433
- }
434
- ),
426
+ ) : null,
435
427
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
436
428
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: author.name }),
437
429
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: author.role })
@@ -417,15 +417,7 @@ function AboutMinimalStory({
417
417
  className: "h-16 w-16 rounded-full object-cover",
418
418
  optixFlowConfig
419
419
  }
420
- ) : /* @__PURE__ */ jsx(
421
- "div",
422
- {
423
- className: cn(
424
- "flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold"
425
- ),
426
- children: author.name.charAt(0)
427
- }
428
- ),
420
+ ) : null,
429
421
  /* @__PURE__ */ jsxs("div", { children: [
430
422
  /* @__PURE__ */ jsx("p", { className: "font-semibold", children: author.name }),
431
423
  /* @__PURE__ */ jsx("p", { className: "text-sm", children: author.role })
@@ -554,13 +554,13 @@ function AboutStartupTeam({
554
554
  if (sidebarSlot) return null;
555
555
  if (!effectiveTabs || effectiveTabs.length === 0) return null;
556
556
  if (!teamMembers || teamMembers.length === 0) return null;
557
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0 max-w-[calc(100vw-1rem)] overflow-hidden sm:max-w-[calc(100vw-2rem)] lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "-mx-2 flex gap-2 overflow-x-auto px-2 pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
557
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0 max-w-full overflow-hidden lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex w-full min-w-0 gap-2 overflow-x-auto pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
558
558
  pressable.Pressable,
559
559
  {
560
560
  componentType: "button",
561
561
  onClick: () => handleTabChange(link.value),
562
562
  className: cn(
563
- "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
563
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors",
564
564
  activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground"
565
565
  ),
566
566
  children: link.label
@@ -589,7 +589,7 @@ function AboutStartupTeam({
589
589
  children: renderTabsNav
590
590
  }
591
591
  ),
592
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-3", children: [
592
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 lg:col-span-3", children: [
593
593
  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
594
594
  "h1",
595
595
  {
@@ -533,13 +533,13 @@ function AboutStartupTeam({
533
533
  if (sidebarSlot) return null;
534
534
  if (!effectiveTabs || effectiveTabs.length === 0) return null;
535
535
  if (!teamMembers || teamMembers.length === 0) return null;
536
- return /* @__PURE__ */ jsx("div", { className: "w-full min-w-0 max-w-[calc(100vw-1rem)] overflow-hidden sm:max-w-[calc(100vw-2rem)] lg:hidden", children: /* @__PURE__ */ jsx("nav", { className: "-mx-2 flex gap-2 overflow-x-auto px-2 pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
536
+ return /* @__PURE__ */ jsx("div", { className: "w-full min-w-0 max-w-full overflow-hidden lg:hidden", children: /* @__PURE__ */ jsx("nav", { className: "flex w-full min-w-0 gap-2 overflow-x-auto pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
537
537
  Pressable,
538
538
  {
539
539
  componentType: "button",
540
540
  onClick: () => handleTabChange(link.value),
541
541
  className: cn(
542
- "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
542
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors",
543
543
  activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground"
544
544
  ),
545
545
  children: link.label
@@ -568,7 +568,7 @@ function AboutStartupTeam({
568
568
  children: renderTabsNav
569
569
  }
570
570
  ),
571
- /* @__PURE__ */ jsxs("div", { className: "lg:col-span-3", children: [
571
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 lg:col-span-3", children: [
572
572
  title && (typeof title === "string" ? /* @__PURE__ */ jsx(
573
573
  "h1",
574
574
  {
@@ -469,7 +469,7 @@ function AboutStoryHero({
469
469
  {
470
470
  className: cn(
471
471
  "rounded-2xl bg-muted text-muted-foreground",
472
- "flex flex-col items-start gap-2",
472
+ "flex flex-col items-start gap-2 p-6",
473
473
  teamInfoClassName
474
474
  ),
475
475
  children: [
@@ -448,7 +448,7 @@ function AboutStoryHero({
448
448
  {
449
449
  className: cn(
450
450
  "rounded-2xl bg-muted text-muted-foreground",
451
- "flex flex-col items-start gap-2",
451
+ "flex flex-col items-start gap-2 p-6",
452
452
  teamInfoClassName
453
453
  ),
454
454
  children: [
@@ -658,20 +658,26 @@ function CommunityInitiatives({
658
658
  children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
659
659
  }
660
660
  ) }),
661
- /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
662
- TabsTrigger,
661
+ /* @__PURE__ */ jsxRuntime.jsx(
662
+ TabsList,
663
663
  {
664
- value: category.id,
665
- className: cn(
666
- "px-3 py-2.5 cursor-pointer",
667
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
668
- "hover:bg-muted hover:text-muted-foreground",
669
- "transition-all duration-500"
670
- ),
671
- children: category.title
672
- },
673
- category.id
674
- )) })
664
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
665
+ children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
666
+ TabsTrigger,
667
+ {
668
+ value: category.id,
669
+ className: cn(
670
+ "px-3 py-2.5 cursor-pointer",
671
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
672
+ "hover:bg-muted hover:text-muted-foreground",
673
+ "transition-all duration-500"
674
+ ),
675
+ children: category.title
676
+ },
677
+ category.id
678
+ ))
679
+ }
680
+ )
675
681
  ] }),
676
682
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
677
683
  categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -748,7 +754,7 @@ function CommunityInitiatives({
748
754
  )
749
755
  }
750
756
  ),
751
- /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
757
+ /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
752
758
  ] })
753
759
  }
754
760
  )
@@ -824,29 +830,15 @@ function CommunityInitiatives({
824
830
  {
825
831
  className: cn(
826
832
  "mt-10 md:mt-24 p-6 md:p-16",
827
- "text-center flex flex-col items-center",
828
- "bg-muted text-muted-foreground",
833
+ "text-center flex flex-col items-center justify-center gap-6",
834
+ "bg-card text-card-foreground",
829
835
  "rounded-2xl shadow-lg",
830
836
  ctaClassName
831
837
  ),
832
838
  children: [
833
- ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
834
- "div",
835
- {
836
- className: cn(
837
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
838
- ),
839
- children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
840
- }
841
- ),
842
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
843
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
844
- "p",
845
- {
846
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
847
- children: ctaDescription
848
- }
849
- ) : ctaDescription),
839
+ ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
840
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
841
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
850
842
  /* @__PURE__ */ jsxRuntime.jsx(
851
843
  BlockActions,
852
844
  {
@@ -636,20 +636,26 @@ function CommunityInitiatives({
636
636
  children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
637
637
  }
638
638
  ) }),
639
- /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
640
- TabsTrigger,
639
+ /* @__PURE__ */ jsx(
640
+ TabsList,
641
641
  {
642
- value: category.id,
643
- className: cn(
644
- "px-3 py-2.5 cursor-pointer",
645
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
646
- "hover:bg-muted hover:text-muted-foreground",
647
- "transition-all duration-500"
648
- ),
649
- children: category.title
650
- },
651
- category.id
652
- )) })
642
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
643
+ children: categories.map((category) => /* @__PURE__ */ jsx(
644
+ TabsTrigger,
645
+ {
646
+ value: category.id,
647
+ className: cn(
648
+ "px-3 py-2.5 cursor-pointer",
649
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
650
+ "hover:bg-muted hover:text-muted-foreground",
651
+ "transition-all duration-500"
652
+ ),
653
+ children: category.title
654
+ },
655
+ category.id
656
+ ))
657
+ }
658
+ )
653
659
  ] }),
654
660
  /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
655
661
  categories.map((category) => /* @__PURE__ */ jsx(
@@ -726,7 +732,7 @@ function CommunityInitiatives({
726
732
  )
727
733
  }
728
734
  ),
729
- /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
735
+ /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
730
736
  ] })
731
737
  }
732
738
  )
@@ -802,29 +808,15 @@ function CommunityInitiatives({
802
808
  {
803
809
  className: cn(
804
810
  "mt-10 md:mt-24 p-6 md:p-16",
805
- "text-center flex flex-col items-center",
806
- "bg-muted text-muted-foreground",
811
+ "text-center flex flex-col items-center justify-center gap-6",
812
+ "bg-card text-card-foreground",
807
813
  "rounded-2xl shadow-lg",
808
814
  ctaClassName
809
815
  ),
810
816
  children: [
811
- ctaBadgeText && /* @__PURE__ */ jsx(
812
- "div",
813
- {
814
- className: cn(
815
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
816
- ),
817
- children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
818
- }
819
- ),
820
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
821
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
822
- "p",
823
- {
824
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
825
- children: ctaDescription
826
- }
827
- ) : ctaDescription),
817
+ ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
818
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
819
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
828
820
  /* @__PURE__ */ jsx(
829
821
  BlockActions,
830
822
  {
@@ -2008,22 +2008,6 @@ function AboutExpandableValues({
2008
2008
  const toggleExpand = React4.useCallback((id) => {
2009
2009
  setExpandedValue((prev) => prev === id ? null : id);
2010
2010
  }, []);
2011
- React4.useMemo(() => {
2012
- if (actionsSlot) return actionsSlot;
2013
- if (!actions || actions.length === 0) return null;
2014
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
2015
- pressable.Pressable,
2016
- {
2017
- href: action.href,
2018
- onClick: action.onClick,
2019
- variant: action.variant || "default",
2020
- size: action.size,
2021
- asButton: true,
2022
- children: action.label
2023
- },
2024
- idx
2025
- )) });
2026
- }, [actionsSlot, actions, actionsClassName]);
2027
2011
  const valuesContent = React4.useMemo(() => {
2028
2012
  if (valuesSlot) return valuesSlot;
2029
2013
  if (!values || values.length === 0) return null;
@@ -2137,7 +2121,7 @@ function AboutExpandableValues({
2137
2121
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
2138
2122
  ctaClassName
2139
2123
  ),
2140
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
2124
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
2141
2125
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2142
2126
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
2143
2127
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2273,20 +2257,26 @@ function CommunityInitiatives({
2273
2257
  children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
2274
2258
  }
2275
2259
  ) }),
2276
- /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2277
- TabsTrigger,
2260
+ /* @__PURE__ */ jsxRuntime.jsx(
2261
+ TabsList,
2278
2262
  {
2279
- value: category.id,
2280
- className: cn(
2281
- "px-3 py-2.5 cursor-pointer",
2282
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2283
- "hover:bg-muted hover:text-muted-foreground",
2284
- "transition-all duration-500"
2285
- ),
2286
- children: category.title
2287
- },
2288
- category.id
2289
- )) })
2263
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
2264
+ children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2265
+ TabsTrigger,
2266
+ {
2267
+ value: category.id,
2268
+ className: cn(
2269
+ "px-3 py-2.5 cursor-pointer",
2270
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2271
+ "hover:bg-muted hover:text-muted-foreground",
2272
+ "transition-all duration-500"
2273
+ ),
2274
+ children: category.title
2275
+ },
2276
+ category.id
2277
+ ))
2278
+ }
2279
+ )
2290
2280
  ] }),
2291
2281
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
2292
2282
  categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2363,7 +2353,7 @@ function CommunityInitiatives({
2363
2353
  )
2364
2354
  }
2365
2355
  ),
2366
- /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2356
+ /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
2367
2357
  ] })
2368
2358
  }
2369
2359
  )
@@ -2439,29 +2429,15 @@ function CommunityInitiatives({
2439
2429
  {
2440
2430
  className: cn(
2441
2431
  "mt-10 md:mt-24 p-6 md:p-16",
2442
- "text-center flex flex-col items-center",
2443
- "bg-muted text-muted-foreground",
2432
+ "text-center flex flex-col items-center justify-center gap-6",
2433
+ "bg-card text-card-foreground",
2444
2434
  "rounded-2xl shadow-lg",
2445
2435
  ctaClassName
2446
2436
  ),
2447
2437
  children: [
2448
- ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
2449
- "div",
2450
- {
2451
- className: cn(
2452
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2453
- ),
2454
- children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2455
- }
2456
- ),
2457
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2458
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
2459
- "p",
2460
- {
2461
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2462
- children: ctaDescription
2463
- }
2464
- ) : ctaDescription),
2438
+ ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
2439
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2440
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
2465
2441
  /* @__PURE__ */ jsxRuntime.jsx(
2466
2442
  BlockActions,
2467
2443
  {
@@ -1985,22 +1985,6 @@ function AboutExpandableValues({
1985
1985
  const toggleExpand = useCallback((id) => {
1986
1986
  setExpandedValue((prev) => prev === id ? null : id);
1987
1987
  }, []);
1988
- useMemo(() => {
1989
- if (actionsSlot) return actionsSlot;
1990
- if (!actions || actions.length === 0) return null;
1991
- return /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsx(
1992
- Pressable,
1993
- {
1994
- href: action.href,
1995
- onClick: action.onClick,
1996
- variant: action.variant || "default",
1997
- size: action.size,
1998
- asButton: true,
1999
- children: action.label
2000
- },
2001
- idx
2002
- )) });
2003
- }, [actionsSlot, actions, actionsClassName]);
2004
1988
  const valuesContent = useMemo(() => {
2005
1989
  if (valuesSlot) return valuesSlot;
2006
1990
  if (!values || values.length === 0) return null;
@@ -2114,7 +2098,7 @@ function AboutExpandableValues({
2114
2098
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
2115
2099
  ctaClassName
2116
2100
  ),
2117
- children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
2101
+ children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
2118
2102
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2119
2103
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
2120
2104
  /* @__PURE__ */ jsx(
@@ -2250,20 +2234,26 @@ function CommunityInitiatives({
2250
2234
  children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
2251
2235
  }
2252
2236
  ) }),
2253
- /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
2254
- TabsTrigger,
2237
+ /* @__PURE__ */ jsx(
2238
+ TabsList,
2255
2239
  {
2256
- value: category.id,
2257
- className: cn(
2258
- "px-3 py-2.5 cursor-pointer",
2259
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2260
- "hover:bg-muted hover:text-muted-foreground",
2261
- "transition-all duration-500"
2262
- ),
2263
- children: category.title
2264
- },
2265
- category.id
2266
- )) })
2240
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
2241
+ children: categories.map((category) => /* @__PURE__ */ jsx(
2242
+ TabsTrigger,
2243
+ {
2244
+ value: category.id,
2245
+ className: cn(
2246
+ "px-3 py-2.5 cursor-pointer",
2247
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2248
+ "hover:bg-muted hover:text-muted-foreground",
2249
+ "transition-all duration-500"
2250
+ ),
2251
+ children: category.title
2252
+ },
2253
+ category.id
2254
+ ))
2255
+ }
2256
+ )
2267
2257
  ] }),
2268
2258
  /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
2269
2259
  categories.map((category) => /* @__PURE__ */ jsx(
@@ -2340,7 +2330,7 @@ function CommunityInitiatives({
2340
2330
  )
2341
2331
  }
2342
2332
  ),
2343
- /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2333
+ /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
2344
2334
  ] })
2345
2335
  }
2346
2336
  )
@@ -2416,29 +2406,15 @@ function CommunityInitiatives({
2416
2406
  {
2417
2407
  className: cn(
2418
2408
  "mt-10 md:mt-24 p-6 md:p-16",
2419
- "text-center flex flex-col items-center",
2420
- "bg-muted text-muted-foreground",
2409
+ "text-center flex flex-col items-center justify-center gap-6",
2410
+ "bg-card text-card-foreground",
2421
2411
  "rounded-2xl shadow-lg",
2422
2412
  ctaClassName
2423
2413
  ),
2424
2414
  children: [
2425
- ctaBadgeText && /* @__PURE__ */ jsx(
2426
- "div",
2427
- {
2428
- className: cn(
2429
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2430
- ),
2431
- children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2432
- }
2433
- ),
2434
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2435
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
2436
- "p",
2437
- {
2438
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2439
- children: ctaDescription
2440
- }
2441
- ) : ctaDescription),
2415
+ ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
2416
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2417
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
2442
2418
  /* @__PURE__ */ jsx(
2443
2419
  BlockActions,
2444
2420
  {
package/dist/index.cjs CHANGED
@@ -2069,22 +2069,6 @@ function AboutExpandableValues({
2069
2069
  const toggleExpand = React4.useCallback((id) => {
2070
2070
  setExpandedValue((prev) => prev === id ? null : id);
2071
2071
  }, []);
2072
- React4.useMemo(() => {
2073
- if (actionsSlot) return actionsSlot;
2074
- if (!actions || actions.length === 0) return null;
2075
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
2076
- pressable.Pressable,
2077
- {
2078
- href: action.href,
2079
- onClick: action.onClick,
2080
- variant: action.variant || "default",
2081
- size: action.size,
2082
- asButton: true,
2083
- children: action.label
2084
- },
2085
- idx
2086
- )) });
2087
- }, [actionsSlot, actions, actionsClassName]);
2088
2072
  const valuesContent = React4.useMemo(() => {
2089
2073
  if (valuesSlot) return valuesSlot;
2090
2074
  if (!values || values.length === 0) return null;
@@ -2198,7 +2182,7 @@ function AboutExpandableValues({
2198
2182
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
2199
2183
  ctaClassName
2200
2184
  ),
2201
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
2185
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
2202
2186
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2203
2187
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
2204
2188
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2334,20 +2318,26 @@ function CommunityInitiatives({
2334
2318
  children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
2335
2319
  }
2336
2320
  ) }),
2337
- /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2338
- TabsTrigger,
2321
+ /* @__PURE__ */ jsxRuntime.jsx(
2322
+ TabsList,
2339
2323
  {
2340
- value: category.id,
2341
- className: cn(
2342
- "px-3 py-2.5 cursor-pointer",
2343
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2344
- "hover:bg-muted hover:text-muted-foreground",
2345
- "transition-all duration-500"
2346
- ),
2347
- children: category.title
2348
- },
2349
- category.id
2350
- )) })
2324
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
2325
+ children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2326
+ TabsTrigger,
2327
+ {
2328
+ value: category.id,
2329
+ className: cn(
2330
+ "px-3 py-2.5 cursor-pointer",
2331
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2332
+ "hover:bg-muted hover:text-muted-foreground",
2333
+ "transition-all duration-500"
2334
+ ),
2335
+ children: category.title
2336
+ },
2337
+ category.id
2338
+ ))
2339
+ }
2340
+ )
2351
2341
  ] }),
2352
2342
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
2353
2343
  categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2424,7 +2414,7 @@ function CommunityInitiatives({
2424
2414
  )
2425
2415
  }
2426
2416
  ),
2427
- /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2417
+ /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
2428
2418
  ] })
2429
2419
  }
2430
2420
  )
@@ -2500,29 +2490,15 @@ function CommunityInitiatives({
2500
2490
  {
2501
2491
  className: cn(
2502
2492
  "mt-10 md:mt-24 p-6 md:p-16",
2503
- "text-center flex flex-col items-center",
2504
- "bg-muted text-muted-foreground",
2493
+ "text-center flex flex-col items-center justify-center gap-6",
2494
+ "bg-card text-card-foreground",
2505
2495
  "rounded-2xl shadow-lg",
2506
2496
  ctaClassName
2507
2497
  ),
2508
2498
  children: [
2509
- ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
2510
- "div",
2511
- {
2512
- className: cn(
2513
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2514
- ),
2515
- children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2516
- }
2517
- ),
2518
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2519
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
2520
- "p",
2521
- {
2522
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2523
- children: ctaDescription
2524
- }
2525
- ) : ctaDescription),
2499
+ ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
2500
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2501
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
2526
2502
  /* @__PURE__ */ jsxRuntime.jsx(
2527
2503
  BlockActions,
2528
2504
  {
package/dist/index.js CHANGED
@@ -2047,22 +2047,6 @@ function AboutExpandableValues({
2047
2047
  const toggleExpand = useCallback((id) => {
2048
2048
  setExpandedValue((prev) => prev === id ? null : id);
2049
2049
  }, []);
2050
- useMemo(() => {
2051
- if (actionsSlot) return actionsSlot;
2052
- if (!actions || actions.length === 0) return null;
2053
- return /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsx(
2054
- Pressable,
2055
- {
2056
- href: action.href,
2057
- onClick: action.onClick,
2058
- variant: action.variant || "default",
2059
- size: action.size,
2060
- asButton: true,
2061
- children: action.label
2062
- },
2063
- idx
2064
- )) });
2065
- }, [actionsSlot, actions, actionsClassName]);
2066
2050
  const valuesContent = useMemo(() => {
2067
2051
  if (valuesSlot) return valuesSlot;
2068
2052
  if (!values || values.length === 0) return null;
@@ -2176,7 +2160,7 @@ function AboutExpandableValues({
2176
2160
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
2177
2161
  ctaClassName
2178
2162
  ),
2179
- children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
2163
+ children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
2180
2164
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2181
2165
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
2182
2166
  /* @__PURE__ */ jsx(
@@ -2312,20 +2296,26 @@ function CommunityInitiatives({
2312
2296
  children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
2313
2297
  }
2314
2298
  ) }),
2315
- /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
2316
- TabsTrigger,
2299
+ /* @__PURE__ */ jsx(
2300
+ TabsList,
2317
2301
  {
2318
- value: category.id,
2319
- className: cn(
2320
- "px-3 py-2.5 cursor-pointer",
2321
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2322
- "hover:bg-muted hover:text-muted-foreground",
2323
- "transition-all duration-500"
2324
- ),
2325
- children: category.title
2326
- },
2327
- category.id
2328
- )) })
2302
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
2303
+ children: categories.map((category) => /* @__PURE__ */ jsx(
2304
+ TabsTrigger,
2305
+ {
2306
+ value: category.id,
2307
+ className: cn(
2308
+ "px-3 py-2.5 cursor-pointer",
2309
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2310
+ "hover:bg-muted hover:text-muted-foreground",
2311
+ "transition-all duration-500"
2312
+ ),
2313
+ children: category.title
2314
+ },
2315
+ category.id
2316
+ ))
2317
+ }
2318
+ )
2329
2319
  ] }),
2330
2320
  /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
2331
2321
  categories.map((category) => /* @__PURE__ */ jsx(
@@ -2402,7 +2392,7 @@ function CommunityInitiatives({
2402
2392
  )
2403
2393
  }
2404
2394
  ),
2405
- /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2395
+ /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
2406
2396
  ] })
2407
2397
  }
2408
2398
  )
@@ -2478,29 +2468,15 @@ function CommunityInitiatives({
2478
2468
  {
2479
2469
  className: cn(
2480
2470
  "mt-10 md:mt-24 p-6 md:p-16",
2481
- "text-center flex flex-col items-center",
2482
- "bg-muted text-muted-foreground",
2471
+ "text-center flex flex-col items-center justify-center gap-6",
2472
+ "bg-card text-card-foreground",
2483
2473
  "rounded-2xl shadow-lg",
2484
2474
  ctaClassName
2485
2475
  ),
2486
2476
  children: [
2487
- ctaBadgeText && /* @__PURE__ */ jsx(
2488
- "div",
2489
- {
2490
- className: cn(
2491
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2492
- ),
2493
- children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2494
- }
2495
- ),
2496
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2497
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
2498
- "p",
2499
- {
2500
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2501
- children: ctaDescription
2502
- }
2503
- ) : ctaDescription),
2477
+ ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
2478
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2479
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
2504
2480
  /* @__PURE__ */ jsx(
2505
2481
  BlockActions,
2506
2482
  {
package/dist/registry.cjs CHANGED
@@ -1803,22 +1803,6 @@ function AboutExpandableValues({
1803
1803
  const toggleExpand = React30.useCallback((id) => {
1804
1804
  setExpandedValue((prev) => prev === id ? null : id);
1805
1805
  }, []);
1806
- React30.useMemo(() => {
1807
- if (actionsSlot) return actionsSlot;
1808
- if (!actions || actions.length === 0) return null;
1809
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
1810
- pressable.Pressable,
1811
- {
1812
- href: action.href,
1813
- onClick: action.onClick,
1814
- variant: action.variant || "default",
1815
- size: action.size,
1816
- asButton: true,
1817
- children: action.label
1818
- },
1819
- idx
1820
- )) });
1821
- }, [actionsSlot, actions, actionsClassName]);
1822
1806
  const valuesContent = React30.useMemo(() => {
1823
1807
  if (valuesSlot) return valuesSlot;
1824
1808
  if (!values || values.length === 0) return null;
@@ -1932,7 +1916,7 @@ function AboutExpandableValues({
1932
1916
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
1933
1917
  ctaClassName
1934
1918
  ),
1935
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
1919
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
1936
1920
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
1937
1921
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
1938
1922
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2068,20 +2052,26 @@ function CommunityInitiatives({
2068
2052
  children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
2069
2053
  }
2070
2054
  ) }),
2071
- /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2072
- TabsTrigger,
2055
+ /* @__PURE__ */ jsxRuntime.jsx(
2056
+ TabsList,
2073
2057
  {
2074
- value: category.id,
2075
- className: cn(
2076
- "px-3 py-2.5 cursor-pointer",
2077
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2078
- "hover:bg-muted hover:text-muted-foreground",
2079
- "transition-all duration-500"
2080
- ),
2081
- children: category.title
2082
- },
2083
- category.id
2084
- )) })
2058
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
2059
+ children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2060
+ TabsTrigger,
2061
+ {
2062
+ value: category.id,
2063
+ className: cn(
2064
+ "px-3 py-2.5 cursor-pointer",
2065
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2066
+ "hover:bg-muted hover:text-muted-foreground",
2067
+ "transition-all duration-500"
2068
+ ),
2069
+ children: category.title
2070
+ },
2071
+ category.id
2072
+ ))
2073
+ }
2074
+ )
2085
2075
  ] }),
2086
2076
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
2087
2077
  categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2158,7 +2148,7 @@ function CommunityInitiatives({
2158
2148
  )
2159
2149
  }
2160
2150
  ),
2161
- /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2151
+ /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
2162
2152
  ] })
2163
2153
  }
2164
2154
  )
@@ -2234,29 +2224,15 @@ function CommunityInitiatives({
2234
2224
  {
2235
2225
  className: cn(
2236
2226
  "mt-10 md:mt-24 p-6 md:p-16",
2237
- "text-center flex flex-col items-center",
2238
- "bg-muted text-muted-foreground",
2227
+ "text-center flex flex-col items-center justify-center gap-6",
2228
+ "bg-card text-card-foreground",
2239
2229
  "rounded-2xl shadow-lg",
2240
2230
  ctaClassName
2241
2231
  ),
2242
2232
  children: [
2243
- ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
2244
- "div",
2245
- {
2246
- className: cn(
2247
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2248
- ),
2249
- children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2250
- }
2251
- ),
2252
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2253
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
2254
- "p",
2255
- {
2256
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2257
- children: ctaDescription
2258
- }
2259
- ) : ctaDescription),
2233
+ ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
2234
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2235
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
2260
2236
  /* @__PURE__ */ jsxRuntime.jsx(
2261
2237
  BlockActions,
2262
2238
  {
@@ -8207,13 +8183,13 @@ function AboutStartupTeam({
8207
8183
  if (sidebarSlot) return null;
8208
8184
  if (!effectiveTabs || effectiveTabs.length === 0) return null;
8209
8185
  if (!teamMembers || teamMembers.length === 0) return null;
8210
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0 max-w-[calc(100vw-1rem)] overflow-hidden sm:max-w-[calc(100vw-2rem)] lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "-mx-2 flex gap-2 overflow-x-auto px-2 pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
8186
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0 max-w-full overflow-hidden lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex w-full min-w-0 gap-2 overflow-x-auto pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
8211
8187
  pressable.Pressable,
8212
8188
  {
8213
8189
  componentType: "button",
8214
8190
  onClick: () => handleTabChange(link.value),
8215
8191
  className: cn(
8216
- "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
8192
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors",
8217
8193
  activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground"
8218
8194
  ),
8219
8195
  children: link.label
@@ -8242,7 +8218,7 @@ function AboutStartupTeam({
8242
8218
  children: renderTabsNav
8243
8219
  }
8244
8220
  ),
8245
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-3", children: [
8221
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 lg:col-span-3", children: [
8246
8222
  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
8247
8223
  "h1",
8248
8224
  {
@@ -8324,15 +8300,7 @@ function AboutMinimalStory({
8324
8300
  className: "h-16 w-16 rounded-full object-cover",
8325
8301
  optixFlowConfig
8326
8302
  }
8327
- ) : /* @__PURE__ */ jsxRuntime.jsx(
8328
- "div",
8329
- {
8330
- className: cn(
8331
- "flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold"
8332
- ),
8333
- children: author.name.charAt(0)
8334
- }
8335
- ),
8303
+ ) : null,
8336
8304
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8337
8305
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: author.name }),
8338
8306
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: author.role })
@@ -8418,7 +8386,7 @@ function AboutStoryHero({
8418
8386
  {
8419
8387
  className: cn(
8420
8388
  "rounded-2xl bg-muted text-muted-foreground",
8421
- "flex flex-col items-start gap-2",
8389
+ "flex flex-col items-start gap-2 p-6",
8422
8390
  teamInfoClassName
8423
8391
  ),
8424
8392
  children: [
package/dist/registry.js CHANGED
@@ -1763,22 +1763,6 @@ function AboutExpandableValues({
1763
1763
  const toggleExpand = useCallback((id) => {
1764
1764
  setExpandedValue((prev) => prev === id ? null : id);
1765
1765
  }, []);
1766
- useMemo(() => {
1767
- if (actionsSlot) return actionsSlot;
1768
- if (!actions || actions.length === 0) return null;
1769
- return /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsx(
1770
- Pressable,
1771
- {
1772
- href: action.href,
1773
- onClick: action.onClick,
1774
- variant: action.variant || "default",
1775
- size: action.size,
1776
- asButton: true,
1777
- children: action.label
1778
- },
1779
- idx
1780
- )) });
1781
- }, [actionsSlot, actions, actionsClassName]);
1782
1766
  const valuesContent = useMemo(() => {
1783
1767
  if (valuesSlot) return valuesSlot;
1784
1768
  if (!values || values.length === 0) return null;
@@ -1892,7 +1876,7 @@ function AboutExpandableValues({
1892
1876
  "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
1893
1877
  ctaClassName
1894
1878
  ),
1895
- children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
1879
+ children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center flex flex-col items-center gap-4", children: [
1896
1880
  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
1897
1881
  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
1898
1882
  /* @__PURE__ */ jsx(
@@ -2028,20 +2012,26 @@ function CommunityInitiatives({
2028
2012
  children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
2029
2013
  }
2030
2014
  ) }),
2031
- /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
2032
- TabsTrigger,
2015
+ /* @__PURE__ */ jsx(
2016
+ TabsList,
2033
2017
  {
2034
- value: category.id,
2035
- className: cn(
2036
- "px-3 py-2.5 cursor-pointer",
2037
- "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2038
- "hover:bg-muted hover:text-muted-foreground",
2039
- "transition-all duration-500"
2040
- ),
2041
- children: category.title
2042
- },
2043
- category.id
2044
- )) })
2018
+ className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
2019
+ children: categories.map((category) => /* @__PURE__ */ jsx(
2020
+ TabsTrigger,
2021
+ {
2022
+ value: category.id,
2023
+ className: cn(
2024
+ "px-3 py-2.5 cursor-pointer",
2025
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2026
+ "hover:bg-muted hover:text-muted-foreground",
2027
+ "transition-all duration-500"
2028
+ ),
2029
+ children: category.title
2030
+ },
2031
+ category.id
2032
+ ))
2033
+ }
2034
+ )
2045
2035
  ] }),
2046
2036
  /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
2047
2037
  categories.map((category) => /* @__PURE__ */ jsx(
@@ -2118,7 +2108,7 @@ function CommunityInitiatives({
2118
2108
  )
2119
2109
  }
2120
2110
  ),
2121
- /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2111
+ /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
2122
2112
  ] })
2123
2113
  }
2124
2114
  )
@@ -2194,29 +2184,15 @@ function CommunityInitiatives({
2194
2184
  {
2195
2185
  className: cn(
2196
2186
  "mt-10 md:mt-24 p-6 md:p-16",
2197
- "text-center flex flex-col items-center",
2198
- "bg-muted text-muted-foreground",
2187
+ "text-center flex flex-col items-center justify-center gap-6",
2188
+ "bg-card text-card-foreground",
2199
2189
  "rounded-2xl shadow-lg",
2200
2190
  ctaClassName
2201
2191
  ),
2202
2192
  children: [
2203
- ctaBadgeText && /* @__PURE__ */ jsx(
2204
- "div",
2205
- {
2206
- className: cn(
2207
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2208
- ),
2209
- children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2210
- }
2211
- ),
2212
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2213
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
2214
- "p",
2215
- {
2216
- className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2217
- children: ctaDescription
2218
- }
2219
- ) : ctaDescription),
2193
+ ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
2194
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2195
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
2220
2196
  /* @__PURE__ */ jsx(
2221
2197
  BlockActions,
2222
2198
  {
@@ -8167,13 +8143,13 @@ function AboutStartupTeam({
8167
8143
  if (sidebarSlot) return null;
8168
8144
  if (!effectiveTabs || effectiveTabs.length === 0) return null;
8169
8145
  if (!teamMembers || teamMembers.length === 0) return null;
8170
- return /* @__PURE__ */ jsx("div", { className: "w-full min-w-0 max-w-[calc(100vw-1rem)] overflow-hidden sm:max-w-[calc(100vw-2rem)] lg:hidden", children: /* @__PURE__ */ jsx("nav", { className: "-mx-2 flex gap-2 overflow-x-auto px-2 pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
8146
+ return /* @__PURE__ */ jsx("div", { className: "w-full min-w-0 max-w-full overflow-hidden lg:hidden", children: /* @__PURE__ */ jsx("nav", { className: "flex w-full min-w-0 gap-2 overflow-x-auto pb-2", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
8171
8147
  Pressable,
8172
8148
  {
8173
8149
  componentType: "button",
8174
8150
  onClick: () => handleTabChange(link.value),
8175
8151
  className: cn(
8176
- "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
8152
+ "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors",
8177
8153
  activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground"
8178
8154
  ),
8179
8155
  children: link.label
@@ -8202,7 +8178,7 @@ function AboutStartupTeam({
8202
8178
  children: renderTabsNav
8203
8179
  }
8204
8180
  ),
8205
- /* @__PURE__ */ jsxs("div", { className: "lg:col-span-3", children: [
8181
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 lg:col-span-3", children: [
8206
8182
  title && (typeof title === "string" ? /* @__PURE__ */ jsx(
8207
8183
  "h1",
8208
8184
  {
@@ -8284,15 +8260,7 @@ function AboutMinimalStory({
8284
8260
  className: "h-16 w-16 rounded-full object-cover",
8285
8261
  optixFlowConfig
8286
8262
  }
8287
- ) : /* @__PURE__ */ jsx(
8288
- "div",
8289
- {
8290
- className: cn(
8291
- "flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold"
8292
- ),
8293
- children: author.name.charAt(0)
8294
- }
8295
- ),
8263
+ ) : null,
8296
8264
  /* @__PURE__ */ jsxs("div", { children: [
8297
8265
  /* @__PURE__ */ jsx("p", { className: "font-semibold", children: author.name }),
8298
8266
  /* @__PURE__ */ jsx("p", { className: "text-sm", children: author.role })
@@ -8378,7 +8346,7 @@ function AboutStoryHero({
8378
8346
  {
8379
8347
  className: cn(
8380
8348
  "rounded-2xl bg-muted text-muted-foreground",
8381
- "flex flex-col items-start gap-2",
8349
+ "flex flex-col items-start gap-2 p-6",
8382
8350
  teamInfoClassName
8383
8351
  ),
8384
8352
  children: [
@@ -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 };
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "3.2.8",
3
+ "version": "3.3.0",
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",