@opensite/ui 1.2.7 → 1.2.9

package/dist/project-video-hover-stack.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverStackItem {

package/dist/project-video-hover-two-by-two.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverTwoByTwoItem {

package/dist/project-video-hover-two-by-two.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverTwoByTwoItem {

package/dist/project-work-showcase.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectWorkShowcaseProject {

package/dist/project-work-showcase.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectWorkShowcaseProject {

package/dist/project-zigzag-layout.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground } from './community-initiatives-CPyEa7IX.cjs';
+import { f as SectionBackground } from './community-initiatives-Bz_A5vLU.cjs';
 import 'react';
-import './blocks-tmd_MRJv.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectZigzagLayoutItem {

package/dist/project-zigzag-layout.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground } from './community-initiatives-hxnFe3w6.js';
+import { f as SectionBackground } from './community-initiatives-Bi_ClKrO.js';
 import 'react';
-import './blocks-DRE-f6cS.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectZigzagLayoutItem {

package/dist/registry.cjs

@@ -18180,12 +18180,20 @@ function CarouselAutoplayProgress({
     }
   );
 }
+var BUTTON_SIZES = {
+  sm: { buttonSize: "size-8", iconSize: 16 },
+  md: { buttonSize: "size-10", iconSize: 20 },
+  lg: { buttonSize: "size-12", iconSize: 24 },
+  xl: { buttonSize: "size-14", iconSize: 28 }
+};
 function CarouselPagination({
   onPrevious,
   onNext,
   canScrollPrevious = true,
   canScrollNext = true,
-  iconSize = 24,
+  size = "md",
+  mobileSize,
+  iconSize: customIconSize,
   className,
   buttonClassName,
   previousIcon = "lucide/arrow-left",
@@ -18193,6 +18201,18 @@ function CarouselPagination({
   previousAriaLabel = "Previous",
   nextAriaLabel = "Next"
 }) {
+  const desktopConfig = BUTTON_SIZES[size];
+  const mobileConfig = mobileSize ? BUTTON_SIZES[mobileSize] : desktopConfig;
+  const sizeClasses = mobileSize && mobileSize !== size ? `${mobileConfig.buttonSize} md:${desktopConfig.buttonSize}` : desktopConfig.buttonSize;
+  const effectiveIconSize = customIconSize ?? desktopConfig.iconSize;
+  const baseButtonStyles = cn(
+    "relative z-40 flex items-center justify-center",
+    "aspect-square !p-0 rounded-full",
+    // Force perfect circle
+    sizeClasses,
+    "disabled:opacity-50",
+    buttonClassName
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-end gap-2", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
@@ -18201,11 +18221,8 @@ function CarouselPagination({
         disabled: !canScrollPrevious,
         "aria-label": previousAriaLabel,
         asButton: true,
-        className: cn(
-          "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
-          buttonClassName
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: previousIcon, size: iconSize })
+        className: baseButtonStyles,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: previousIcon, size: effectiveIconSize })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -18215,11 +18232,8 @@ function CarouselPagination({
         disabled: !canScrollNext,
         "aria-label": nextAriaLabel,
         asButton: true,
-        className: cn(
-          "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
-          buttonClassName
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: nextIcon, size: iconSize })
+        className: baseButtonStyles,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: nextIcon, size: effectiveIconSize })
       }
     )
   ] });
@@ -20667,7 +20681,6 @@ function FeatureSplitImage({
   actions,
   actionsSlot,
   className,
-  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
   gridClassName,
   contentClassName,
   titleClassName,
@@ -20676,6 +20689,7 @@ function FeatureSplitImage({
   imageClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
   spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
@@ -27564,13 +27578,13 @@ function FeatureCapabilitiesGrid({
   items,
   itemsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
+  spacing = "py-6 md:py-32",
   eyebrowClassName,
   headingClassName,
   gridClassName,
   cardClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
@@ -27592,7 +27606,7 @@ function FeatureCapabilitiesGrid({
         Card,
         {
           className: cn(
-            "group relative overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20",
+            "group relative rounded-md overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20",
             cardClassName,
             item.className
           ),
@@ -27684,12 +27698,13 @@ function FeatureCapabilitiesGrid({
       patternClassName,
       className,
       containerClassName,
+      containerMaxWidth: "lg",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(
+        eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn("text-xs tracking-widest", eyebrowClassName),
+              className: cn("text-sm tracking-widest", eyebrowClassName),
               children: eyebrow
             }
           )),
@@ -27697,7 +27712,7 @@ function FeatureCapabilitiesGrid({
             "h2",
             {
               className: cn(
-                "mt-3 text-4xl font-semibold tracking-tight sm:text-5xl",
+                "text-4xl font-semibold sm:text-5xl",
                 headingClassName
               ),
               children: heading
@@ -27706,7 +27721,7 @@ function FeatureCapabilitiesGrid({
             "div",
             {
               className: cn(
-                "mt-3 text-4xl font-semibold tracking-tight sm:text-5xl",
+                "text-4xl font-semibold sm:text-5xl",
                 headingClassName
               ),
               children: heading
@@ -34533,19 +34548,33 @@ function CarouselScaleFocus({
   const [count, setCount] = React52.useState(0);
   const [lightboxOpen, setLightboxOpen] = React52.useState(false);
   const [lightboxIndex, setLightboxIndex] = React52.useState(0);
+  const [canScrollPrevious, setCanScrollPrevious] = React52.useState(false);
+  const [canScrollNext, setCanScrollNext] = React52.useState(false);
   React52.useEffect(() => {
     if (!api) {
       return;
     }
-    React52.startTransition(() => {
-      setCount(api.scrollSnapList().length);
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-    api.on("select", () => {
+    const updateState = () => {
       React52.startTransition(() => {
+        setCount(api.scrollSnapList().length);
         setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrevious(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
       });
-    });
+    };
+    updateState();
+    api.on("select", updateState);
+    api.on("reInit", updateState);
+    return () => {
+      api.off("select", updateState);
+      api.off("reInit", updateState);
+    };
+  }, [api]);
+  const scrollPrevious = React52.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React52.useCallback(() => {
+    api?.scrollNext();
   }, [api]);
   const lightboxItems = React52.useMemo(() => {
     if (!images || images.length === 0) return [];
@@ -34646,63 +34675,38 @@ function CarouselScaleFocus({
               }
             ))
           ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Carousel,
-            {
-              className: cn(
-                "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
-                carouselClassName
-              ),
-              setApi,
-              opts: {
-                startIndex
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 hidden md:block", controlsClassName), children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    CarouselPrevious,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-left-25 md:size-14 lg:-left-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    CarouselNext,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-right-25 md:size-14 lg:-right-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "mt-10 flex items-center justify-center gap-4 md:hidden",
-                controlsClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  CarouselPrevious,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
+              {
+                className: cn(
+                  "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
+                  carouselClassName
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  CarouselNext,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
-                )
-              ]
-            }
-          ),
+                setApi,
+                opts: {
+                  startIndex
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CarouselPagination,
+              {
+                onPrevious: scrollPrevious,
+                onNext: scrollNext,
+                canScrollPrevious,
+                canScrollNext,
+                size: "xl",
+                mobileSize: "md",
+                className: cn(
+                  "mt-6 justify-end md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:pointer-events-none",
+                  controlsClassName
+                ),
+                buttonClassName: "bg-primary text-primary-foreground hover:bg-primary/90 pointer-events-auto md:absolute md:-left-25 lg:-left-39.75 [&:last-child]:md:left-auto [&:last-child]:md:-right-25 [&:last-child]:lg:-right-39.75"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -35108,6 +35112,7 @@ function BlurVignetteGrid({
   images,
   imagesSlot,
   vignetteConfig,
+  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
   gridColumns = 5,
   gridGap = "gap-4",
   className,
@@ -35115,7 +35120,7 @@ function BlurVignetteGrid({
   itemClassName,
   imageClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -35167,7 +35172,7 @@ function BlurVignetteGrid({
     imageClassName,
     optixFlowConfig
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -35176,8 +35181,9 @@ function BlurVignetteGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -35188,7 +35194,13 @@ function BlurVignetteGrid({
               children: title
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn("max-w-lg text-balance", descriptionClassName),
@@ -35207,7 +35219,7 @@ function BlurVignetteGrid({
             children: imagesContent
           }
         )
-      ]
+      ] })
     }
   );
 }