@opensite/ui 0.8.5 → 0.8.7

package/dist/blog-cards-tagline-cta.cjs

@@ -1099,7 +1099,7 @@ function BlogCardsTaglineCta({
               Pressable,
               {
                 href: postHref,
-                className: "flex items-center text-foreground hover:underline",
+                className: "flex items-center hover:underline",
                 children: [
                   readMoreText,
                   /* @__PURE__ */ jsxRuntime.jsx(

package/dist/blog-cards-tagline-cta.js

@@ -1078,7 +1078,7 @@ function BlogCardsTaglineCta({
               Pressable,
               {
                 href: postHref,
-                className: "flex items-center text-foreground hover:underline",
+                className: "flex items-center hover:underline",
                 children: [
                   readMoreText,
                   /* @__PURE__ */ jsx(

package/dist/blog-horizontal-timeline.cjs

@@ -1022,7 +1022,7 @@ function BlogHorizontalTimelineComponent({
                     ),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-2 md:h-full md:justify-between md:pr-8", children: [
-                        post.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-tight text-foreground line-clamp-2", children: post.title }),
+                        post.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-tight line-clamp-2", children: post.title }),
                         postDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-widest text-muted-foreground uppercase md:mt-2 md:text-sm", children: postDate })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-4 md:h-full md:justify-between md:gap-6", children: [
@@ -1064,7 +1064,7 @@ function BlogHorizontalTimelineComponent({
           "h1",
           {
             className: cn(
-              "mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl",
+              "mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight md:text-7xl",
               headingClassName
             ),
             children: heading

package/dist/blog-horizontal-timeline.js

@@ -1001,7 +1001,7 @@ function BlogHorizontalTimelineComponent({
                     ),
                     children: [
                       /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-2 md:h-full md:justify-between md:pr-8", children: [
-                        post.title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold tracking-tight text-foreground line-clamp-2", children: post.title }),
+                        post.title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold tracking-tight line-clamp-2", children: post.title }),
                         postDate && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-widest text-muted-foreground uppercase md:mt-2 md:text-sm", children: postDate })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-4 md:h-full md:justify-between md:gap-6", children: [
@@ -1043,7 +1043,7 @@ function BlogHorizontalTimelineComponent({
           "h1",
           {
             className: cn(
-              "mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl",
+              "mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight md:text-7xl",
               headingClassName
             ),
             children: heading

package/dist/blog-tech-insights.cjs

@@ -898,7 +898,7 @@ function BlogTechInsights({
       {
         asButton: true,
         className: cn(
-          "ml-auto rounded-full border-foreground text-foreground",
+          "ml-auto rounded-full border-foreground",
           actionClassName,
           readMoreClassName
         ),
@@ -927,11 +927,11 @@ function BlogTechInsights({
           optixFlowConfig
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-foreground md:text-3xl lg:text-4xl", children: featuredPost.title })) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: featuredPost.title })) }),
       (featuredPost.author || featuredPost.authorAvatar) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center gap-3 md:mt-8 md:gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "h-8 w-8 rounded-md md:h-12 md:w-12", children: featuredPost.authorAvatar && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: featuredPost.authorAvatar }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base", children: [
-          featuredPost.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-foreground", children: featuredPost.author }),
+          featuredPost.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block", children: featuredPost.author }),
           featuredPost.authorRole && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground md:text-sm", children: featuredPost.authorRole })
         ] })
       ] })
@@ -979,7 +979,7 @@ function BlogTechInsights({
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-              post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-foreground text-md line-clamp-2", children: post.title }),
+              post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-md line-clamp-2", children: post.title }),
               truncatedDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-snug text-muted-foreground md:text-base line-clamp-2", children: truncatedDescription })
             ] })
           ]
@@ -1025,7 +1025,7 @@ function BlogTechInsights({
                 "h1",
                 {
                   className: cn(
-                    "text-3xl font-bold text-foreground md:text-4xl lg:text-5xl",
+                    "text-3xl font-bold md:text-4xl lg:text-5xl",
                     headingClassName
                   ),
                   children: heading
@@ -1058,7 +1058,7 @@ function BlogTechInsights({
                     "div",
                     {
                       className: cn(
-                        "space-y-6 text-foreground md:space-y-8",
+                        "space-y-6 md:space-y-8",
                         secondaryPostsClassName
                       ),
                       children: secondaryPostsContent

package/dist/blog-tech-insights.js

@@ -876,7 +876,7 @@ function BlogTechInsights({
       {
         asButton: true,
         className: cn(
-          "ml-auto rounded-full border-foreground text-foreground",
+          "ml-auto rounded-full border-foreground",
           actionClassName,
           readMoreClassName
         ),
@@ -905,11 +905,11 @@ function BlogTechInsights({
           optixFlowConfig
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "mt-4", children: featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-foreground md:text-3xl lg:text-4xl", children: featuredPost.title })) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4", children: featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: featuredPost.title })) }),
       (featuredPost.author || featuredPost.authorAvatar) && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-3 md:mt-8 md:gap-4", children: [
         /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 rounded-md md:h-12 md:w-12", children: featuredPost.authorAvatar && /* @__PURE__ */ jsx(AvatarImage, { src: featuredPost.authorAvatar }) }),
         /* @__PURE__ */ jsxs("span", { className: "text-sm md:text-base", children: [
-          featuredPost.author && /* @__PURE__ */ jsx("span", { className: "block text-foreground", children: featuredPost.author }),
+          featuredPost.author && /* @__PURE__ */ jsx("span", { className: "block", children: featuredPost.author }),
           featuredPost.authorRole && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground md:text-sm", children: featuredPost.authorRole })
         ] })
       ] })
@@ -957,7 +957,7 @@ function BlogTechInsights({
               }
             ) }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              post.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground text-md line-clamp-2", children: post.title }),
+              post.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-md line-clamp-2", children: post.title }),
               truncatedDescription && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-snug text-muted-foreground md:text-base line-clamp-2", children: truncatedDescription })
             ] })
           ]
@@ -1003,7 +1003,7 @@ function BlogTechInsights({
                 "h1",
                 {
                   className: cn(
-                    "text-3xl font-bold text-foreground md:text-4xl lg:text-5xl",
+                    "text-3xl font-bold md:text-4xl lg:text-5xl",
                     headingClassName
                   ),
                   children: heading
@@ -1036,7 +1036,7 @@ function BlogTechInsights({
                     "div",
                     {
                       className: cn(
-                        "space-y-6 text-foreground md:space-y-8",
+                        "space-y-6 md:space-y-8",
                         secondaryPostsClassName
                       ),
                       children: secondaryPostsContent

package/dist/carousel-animated-sections.cjs

@@ -1086,13 +1086,13 @@ function CarouselAnimatedSections({
                 animate: { opacity: 1, y: 0 },
                 exit: { opacity: 0, y: -40 },
                 transition: { duration: 0.4, delay: 0.2 },
-                className: "max-w-2xl text-white text-shadow",
+                className: "max-w-2xl text-shadow",
                 children: [
                   currentSection?.subtitle && (typeof currentSection?.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
                       className: cn(
-                        "mb-2 text-sm font-medium uppercase tracking-widest text-white/70",
+                        "mb-2 text-sm font-medium uppercase tracking-widest opacity-70",
                         subtitleClassName
                       ),
                       children: currentSection?.subtitle
@@ -1112,7 +1112,7 @@ function CarouselAnimatedSections({
                     "p",
                     {
                       className: cn(
-                        "mb-8 text-lg text-white/80 text-balance",
+                        "mb-8 text-lg opacity-80 text-balance",
                         descriptionClassName
                       ),
                       children: currentSection?.description
@@ -1125,7 +1125,6 @@ function CarouselAnimatedSections({
                       onClick: currentSection?.ctaOnClick,
                       asButton: true,
                       size: "lg",
-                      className: "bg-white text-black hover:bg-white/90",
                       children: [
                         currentSection?.ctaText,
                         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1158,7 +1157,7 @@ function CarouselAnimatedSections({
                 onClick: () => goToSlide(index),
                 className: cn(
                   "h-3 w-3 rounded-full border-2 transition-all",
-                  currentIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+                  currentIndex === index ? "scale-125 border-foreground bg-foreground" : "border-foreground/50 bg-transparent hover:border-foreground"
                 ),
                 "aria-label": `Go to section ${index + 1}`
               },
@@ -1182,7 +1181,7 @@ function CarouselAnimatedSections({
                   variant: "ghost",
                   size: "icon",
                   disabled: currentIndex === 0,
-                  className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
+                  className: "rounded-full border border-foreground/30 hover:bg-foreground/10 disabled:opacity-30",
                   children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-up", size: 20 })
                 }
               ),
@@ -1194,7 +1193,7 @@ function CarouselAnimatedSections({
                   variant: "ghost",
                   size: "icon",
                   disabled: currentIndex === (sections?.length ?? 0) - 1,
-                  className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
+                  className: "rounded-full border border-foreground/30 hover:bg-foreground/10 disabled:opacity-30",
                   children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", size: 20 })
                 }
               )
@@ -1205,7 +1204,7 @@ function CarouselAnimatedSections({
           "div",
           {
             className: cn(
-              "absolute bottom-8 right-8 z-20 text-sm text-white/50",
+              "absolute bottom-8 right-8 z-20 text-sm opacity-50",
               counterClassName
             ),
             children: [

package/dist/carousel-animated-sections.js

@@ -1065,13 +1065,13 @@ function CarouselAnimatedSections({
                 animate: { opacity: 1, y: 0 },
                 exit: { opacity: 0, y: -40 },
                 transition: { duration: 0.4, delay: 0.2 },
-                className: "max-w-2xl text-white text-shadow",
+                className: "max-w-2xl text-shadow",
                 children: [
                   currentSection?.subtitle && (typeof currentSection?.subtitle === "string" ? /* @__PURE__ */ jsx(
                     "p",
                     {
                       className: cn(
-                        "mb-2 text-sm font-medium uppercase tracking-widest text-white/70",
+                        "mb-2 text-sm font-medium uppercase tracking-widest opacity-70",
                         subtitleClassName
                       ),
                       children: currentSection?.subtitle
@@ -1091,7 +1091,7 @@ function CarouselAnimatedSections({
                     "p",
                     {
                       className: cn(
-                        "mb-8 text-lg text-white/80 text-balance",
+                        "mb-8 text-lg opacity-80 text-balance",
                         descriptionClassName
                       ),
                       children: currentSection?.description
@@ -1104,7 +1104,6 @@ function CarouselAnimatedSections({
                       onClick: currentSection?.ctaOnClick,
                       asButton: true,
                       size: "lg",
-                      className: "bg-white text-black hover:bg-white/90",
                       children: [
                         currentSection?.ctaText,
                         /* @__PURE__ */ jsx(
@@ -1137,7 +1136,7 @@ function CarouselAnimatedSections({
                 onClick: () => goToSlide(index),
                 className: cn(
                   "h-3 w-3 rounded-full border-2 transition-all",
-                  currentIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+                  currentIndex === index ? "scale-125 border-foreground bg-foreground" : "border-foreground/50 bg-transparent hover:border-foreground"
                 ),
                 "aria-label": `Go to section ${index + 1}`
               },
@@ -1161,7 +1160,7 @@ function CarouselAnimatedSections({
                   variant: "ghost",
                   size: "icon",
                   disabled: currentIndex === 0,
-                  className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
+                  className: "rounded-full border border-foreground/30 hover:bg-foreground/10 disabled:opacity-30",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-up", size: 20 })
                 }
               ),
@@ -1173,7 +1172,7 @@ function CarouselAnimatedSections({
                   variant: "ghost",
                   size: "icon",
                   disabled: currentIndex === (sections?.length ?? 0) - 1,
-                  className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
+                  className: "rounded-full border border-foreground/30 hover:bg-foreground/10 disabled:opacity-30",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", size: 20 })
                 }
               )
@@ -1184,7 +1183,7 @@ function CarouselAnimatedSections({
           "div",
           {
             className: cn(
-              "absolute bottom-8 right-8 z-20 text-sm text-white/50",
+              "absolute bottom-8 right-8 z-20 text-sm opacity-50",
               counterClassName
             ),
             children: [

package/dist/carousel-auto-progress-slides.cjs

@@ -1031,7 +1031,7 @@ function CarouselAutoProgressSlides({
             "p",
             {
               className: cn(
-                "mt-4 text-2xl text-foreground/50",
+                "mt-4 text-2xl text-muted-foreground",
                 subheadingClassName
               ),
               children: subheading
@@ -1053,7 +1053,7 @@ function CarouselAutoProgressSlides({
                   asButton: true,
                   variant: "ghost",
                   size: "icon",
-                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-foreground/50 hover:bg-foreground/20 active:scale-95",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-muted p-0.5 opacity-50 hover:bg-muted/80 active:scale-95",
                   children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
                 }
               ),
@@ -1065,12 +1065,12 @@ function CarouselAutoProgressSlides({
                   animate: {
                     width: index === currentIndex ? "30px" : "8px"
                   },
-                  className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-foreground/15 p-0.5 text-foreground/50",
+                  className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted p-0.5 opacity-50",
                   children: currentIndex === index && /* @__PURE__ */ jsxRuntime.jsx(
                     framerMotion.motion.div,
                     {
                       style: { clipPath },
-                      className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-foreground"
+                      className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-primary"
                     }
                   )
                 },
@@ -1083,7 +1083,7 @@ function CarouselAutoProgressSlides({
                   asButton: true,
                   variant: "ghost",
                   size: "icon",
-                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-neutral-400 hover:bg-foreground/20 active:scale-95",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-muted p-0.5 hover:bg-muted/80 active:scale-95",
                   children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
                 }
               )
@@ -1108,7 +1108,7 @@ function CarouselAutoProgressSlides({
                 "p",
                 {
                   className: cn(
-                    "mb-6 font-medium text-center text-lg text-foreground/50",
+                    "mb-6 font-medium text-center text-lg text-muted-foreground",
                     slideLabelClassName
                   ),
                   children: items?.[currentIndex]?.label
@@ -1118,7 +1118,7 @@ function CarouselAutoProgressSlides({
                 "div",
                 {
                   className: cn(
-                    "h-[550px] w-full overflow-hidden rounded-3xl bg-foreground/10 p-1",
+                    "h-[550px] w-full overflow-hidden rounded-3xl bg-muted p-1",
                     slideContainerClassName
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/carousel-auto-progress-slides.js

@@ -1010,7 +1010,7 @@ function CarouselAutoProgressSlides({
             "p",
             {
               className: cn(
-                "mt-4 text-2xl text-foreground/50",
+                "mt-4 text-2xl text-muted-foreground",
                 subheadingClassName
               ),
               children: subheading
@@ -1032,7 +1032,7 @@ function CarouselAutoProgressSlides({
                   asButton: true,
                   variant: "ghost",
                   size: "icon",
-                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-foreground/50 hover:bg-foreground/20 active:scale-95",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-muted p-0.5 opacity-50 hover:bg-muted/80 active:scale-95",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
                 }
               ),
@@ -1044,12 +1044,12 @@ function CarouselAutoProgressSlides({
                   animate: {
                     width: index === currentIndex ? "30px" : "8px"
                   },
-                  className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-foreground/15 p-0.5 text-foreground/50",
+                  className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted p-0.5 opacity-50",
                   children: currentIndex === index && /* @__PURE__ */ jsx(
                     motion.div,
                     {
                       style: { clipPath },
-                      className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-foreground"
+                      className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-primary"
                     }
                   )
                 },
@@ -1062,7 +1062,7 @@ function CarouselAutoProgressSlides({
                   asButton: true,
                   variant: "ghost",
                   size: "icon",
-                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-neutral-400 hover:bg-foreground/20 active:scale-95",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-muted p-0.5 hover:bg-muted/80 active:scale-95",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
                 }
               )
@@ -1087,7 +1087,7 @@ function CarouselAutoProgressSlides({
                 "p",
                 {
                   className: cn(
-                    "mb-6 font-medium text-center text-lg text-foreground/50",
+                    "mb-6 font-medium text-center text-lg text-muted-foreground",
                     slideLabelClassName
                   ),
                   children: items?.[currentIndex]?.label
@@ -1097,7 +1097,7 @@ function CarouselAutoProgressSlides({
                 "div",
                 {
                   className: cn(
-                    "h-[550px] w-full overflow-hidden rounded-3xl bg-foreground/10 p-1",
+                    "h-[550px] w-full overflow-hidden rounded-3xl bg-muted p-1",
                     slideContainerClassName
                   ),
                   children: /* @__PURE__ */ jsx(

package/dist/carousel-autoplay-progress.cjs

@@ -1086,7 +1086,7 @@ function CarouselAutoplayProgress({
               onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
               className: cn(
                 "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
-                index === selectedIndex ? "bg-foreground" : "bg-transparent hover:bg-muted"
+                index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
               )
             },
             index
@@ -1095,14 +1095,14 @@ function CarouselAutoplayProgress({
             "div",
             {
               className: cn(
-                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border bg-background transition-opacity duration-300 ease-in-out",
+                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border bg-muted transition-opacity duration-300 ease-in-out",
                 showAutoplayProgress ? "opacity-100" : "opacity-0",
                 progressClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "absolute bottom-0 top-0 -left-full w-full bg-foreground",
+                  className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
                   ref: progressNode,
                   style: {
                     animation: "autoplay-progress linear 1",

package/dist/carousel-autoplay-progress.js

@@ -1061,7 +1061,7 @@ function CarouselAutoplayProgress({
               onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
               className: cn(
                 "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
-                index === selectedIndex ? "bg-foreground" : "bg-transparent hover:bg-muted"
+                index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
               )
             },
             index
@@ -1070,14 +1070,14 @@ function CarouselAutoplayProgress({
             "div",
             {
               className: cn(
-                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border bg-background transition-opacity duration-300 ease-in-out",
+                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border bg-muted transition-opacity duration-300 ease-in-out",
                 showAutoplayProgress ? "opacity-100" : "opacity-0",
                 progressClassName
               ),
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute bottom-0 top-0 -left-full w-full bg-foreground",
+                  className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
                   ref: progressNode,
                   style: {
                     animation: "autoplay-progress linear 1",

package/dist/carousel-fullscreen-scroll-fx.cjs

@@ -897,7 +897,7 @@ function CarouselFullscreenScrollFx({
                 onClick: () => scrollToSlide(index),
                 className: cn(
                   "h-3 w-3 rounded-full border-2 transition-all",
-                  activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+                  activeIndex === index ? "scale-125 border-foreground bg-foreground" : "border-foreground/50 bg-transparent hover:border-foreground"
                 ),
                 "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
               },
@@ -910,13 +910,13 @@ function CarouselFullscreenScrollFx({
           {
             onClick: () => scrollToSlide(activeIndex + 1),
             className: cn(
-              "fixed bottom-8 left-1/2 z-50 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
+              "fixed bottom-8 left-1/2 z-50 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-lg p-2",
               scrollIndicatorClassName
             ),
             "aria-label": "Scroll to next slide",
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest opacity-50", children: "Scroll" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-foreground/50 to-transparent" })
             ] })
           }
         ),
@@ -924,7 +924,7 @@ function CarouselFullscreenScrollFx({
           "div",
           {
             className: cn(
-              "fixed bottom-8 right-8 z-50 text-sm text-white/50",
+              "fixed bottom-8 right-8 z-50 text-sm opacity-50",
               counterClassName
             ),
             children: [
@@ -1014,7 +1014,7 @@ function CarouselFullscreenScrollFx({
                             "p",
                             {
                               className: cn(
-                                "mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
+                                "mb-4 text-sm font-medium uppercase tracking-widest opacity-70",
                                 subtitleClassName
                               ),
                               children: slide.subtitle
@@ -1034,7 +1034,7 @@ function CarouselFullscreenScrollFx({
                             "p",
                             {
                               className: cn(
-                                "mx-auto text-lg text-white/80 md:text-xl text-balance",
+                                "mx-auto text-lg opacity-80 md:text-xl text-balance",
                                 descriptionClassName
                               ),
                               children: slide.description

package/dist/carousel-fullscreen-scroll-fx.js

@@ -876,7 +876,7 @@ function CarouselFullscreenScrollFx({
                 onClick: () => scrollToSlide(index),
                 className: cn(
                   "h-3 w-3 rounded-full border-2 transition-all",
-                  activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+                  activeIndex === index ? "scale-125 border-foreground bg-foreground" : "border-foreground/50 bg-transparent hover:border-foreground"
                 ),
                 "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
               },
@@ -889,13 +889,13 @@ function CarouselFullscreenScrollFx({
           {
             onClick: () => scrollToSlide(activeIndex + 1),
             className: cn(
-              "fixed bottom-8 left-1/2 z-50 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
+              "fixed bottom-8 left-1/2 z-50 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-lg p-2",
               scrollIndicatorClassName
             ),
             "aria-label": "Scroll to next slide",
             children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
-              /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
+              /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest opacity-50", children: "Scroll" }),
+              /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-foreground/50 to-transparent" })
             ] })
           }
         ),
@@ -903,7 +903,7 @@ function CarouselFullscreenScrollFx({
           "div",
           {
             className: cn(
-              "fixed bottom-8 right-8 z-50 text-sm text-white/50",
+              "fixed bottom-8 right-8 z-50 text-sm opacity-50",
               counterClassName
             ),
             children: [
@@ -993,7 +993,7 @@ function CarouselFullscreenScrollFx({
                             "p",
                             {
                               className: cn(
-                                "mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
+                                "mb-4 text-sm font-medium uppercase tracking-widest opacity-70",
                                 subtitleClassName
                               ),
                               children: slide.subtitle
@@ -1013,7 +1013,7 @@ function CarouselFullscreenScrollFx({
                             "p",
                             {
                               className: cn(
-                                "mx-auto text-lg text-white/80 md:text-xl text-balance",
+                                "mx-auto text-lg opacity-80 md:text-xl text-balance",
                                 descriptionClassName
                               ),
                               children: slide.description

package/dist/carousel-horizontal-cards.cjs

@@ -1052,7 +1052,7 @@ function CarouselHorizontalCards({
                   {
                     id: "carousel-title",
                     className: cn(
-                      "text-2xl font-bold tracking-tight text-card-foreground md:text-3xl",
+                      "text-2xl font-bold tracking-tight md:text-3xl",
                       headingClassName
                     ),
                     children: heading

package/dist/carousel-horizontal-cards.js

@@ -1031,7 +1031,7 @@ function CarouselHorizontalCards({
                   {
                     id: "carousel-title",
                     className: cn(
-                      "text-2xl font-bold tracking-tight text-card-foreground md:text-3xl",
+                      "text-2xl font-bold tracking-tight md:text-3xl",
                       headingClassName
                     ),
                     children: heading

package/dist/carousel-icon-sidebar.cjs

@@ -1194,7 +1194,7 @@ function CarouselIconSidebar({
             "div",
             {
               className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-gray-200",
+                "flex h-12 w-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-border",
                 iconClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: activeItem.icon, size: 24 })
@@ -1222,8 +1222,8 @@ function CarouselIconSidebar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", controlsClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" })
+              /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" })
             ] })
           ] })
         ]