@opensite/ui 1.2.8 → 1.3.0

package/dist/carousel-multi-step-showcase.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-multi-step-showcase.d.ts

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

package/dist/carousel-pagination.cjs

@@ -553,12 +553,20 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
+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",
@@ -566,6 +574,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,
@@ -574,11 +594,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(
@@ -588,14 +605,12 @@ 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 })
       }
     )
   ] });
 }
 
+exports.CAROUSEL_PAGINATION_SIZES = BUTTON_SIZES;
 exports.CarouselPagination = CarouselPagination;

package/dist/carousel-pagination.d.cts

@@ -1,5 +1,28 @@
 import * as React from 'react';
 
+/**
+ * Button size configuration for CarouselPagination
+ * Each size defines the button dimensions and corresponding icon size
+ */
+declare const BUTTON_SIZES: {
+    readonly sm: {
+        readonly buttonSize: "size-8";
+        readonly iconSize: 16;
+    };
+    readonly md: {
+        readonly buttonSize: "size-10";
+        readonly iconSize: 20;
+    };
+    readonly lg: {
+        readonly buttonSize: "size-12";
+        readonly iconSize: 24;
+    };
+    readonly xl: {
+        readonly buttonSize: "size-14";
+        readonly iconSize: 28;
+    };
+};
+type CarouselPaginationSize = keyof typeof BUTTON_SIZES;
 interface CarouselPaginationProps {
     /**
      * Handler for scrolling to the previous item
@@ -18,8 +41,19 @@ interface CarouselPaginationProps {
      */
     canScrollNext?: boolean;
     /**
-     * Size of the icon in pixels
-     * @default 24
+     * Predefined button size - controls both button dimensions and icon size
+     * @default "md"
+     */
+    size?: CarouselPaginationSize;
+    /**
+     * Responsive size - mobile size (optional, uses `size` if not provided)
+     * Use this for different sizes on mobile vs desktop
+     * @example size="lg" mobileSize="md" -> md on mobile, lg on desktop
+     */
+    mobileSize?: CarouselPaginationSize;
+    /**
+     * Custom icon size in pixels (overrides the size-based default)
+     * @deprecated Use `size` prop instead for consistent sizing
      */
     iconSize?: number;
     /**
@@ -28,6 +62,8 @@ interface CarouselPaginationProps {
     className?: string;
     /**
      * Additional CSS classes for the buttons
+     * Note: Size-related classes (size-*, h-*, w-*) will be overridden by the `size` prop
+     * to ensure perfect circles. Use `size` prop to control button dimensions.
      */
     buttonClassName?: string;
     /**
@@ -55,12 +91,13 @@ interface CarouselPaginationProps {
  * CarouselPagination - Reusable carousel navigation buttons based on AppleCarousel design.
  *
  * Features:
- * - Circular buttons with consistent sizing
- * - Disabled state with reduced opacity
- * - Positioned with flexbox for flexible placement
- * - Works with any carousel implementation
+ * - **Perfect circles** - Uses aspect-square and explicit sizing to guarantee circular buttons
+ * - **Consistent sizing** - Use the `size` prop for uniform appearance across devices
+ * - **Responsive sizing** - Use `mobileSize` + `size` for different sizes on mobile/desktop
+ * - **Disabled state** - Reduced opacity when at scroll boundaries
+ * - **Flexible placement** - Container uses flexbox for easy positioning
  *
- * @example
+ * @example Basic usage
  * ```tsx
  * <CarouselPagination
  *   onPrevious={() => scroll("left")}
@@ -69,7 +106,27 @@ interface CarouselPaginationProps {
  *   canScrollNext={!isAtEnd}
  * />
  * ```
+ *
+ * @example Responsive sizing (smaller on mobile, larger on desktop)
+ * ```tsx
+ * <CarouselPagination
+ *   size="lg"
+ *   mobileSize="md"
+ *   onPrevious={scrollPrev}
+ *   onNext={scrollNext}
+ * />
+ * ```
+ *
+ * @example Custom styling
+ * ```tsx
+ * <CarouselPagination
+ *   size="xl"
+ *   buttonClassName="bg-primary text-primary-foreground hover:bg-primary/90"
+ *   onPrevious={scrollPrev}
+ *   onNext={scrollNext}
+ * />
+ * ```
  */
-declare function CarouselPagination({ onPrevious, onNext, canScrollPrevious, canScrollNext, iconSize, className, buttonClassName, previousIcon, nextIcon, previousAriaLabel, nextAriaLabel, }: CarouselPaginationProps): React.JSX.Element;
+declare function CarouselPagination({ onPrevious, onNext, canScrollPrevious, canScrollNext, size, mobileSize, iconSize: customIconSize, className, buttonClassName, previousIcon, nextIcon, previousAriaLabel, nextAriaLabel, }: CarouselPaginationProps): React.JSX.Element;
 
-export { CarouselPagination, type CarouselPaginationProps };
+export { BUTTON_SIZES as CAROUSEL_PAGINATION_SIZES, CarouselPagination, type CarouselPaginationProps, type CarouselPaginationSize };

package/dist/carousel-pagination.d.ts

@@ -1,5 +1,28 @@
 import * as React from 'react';
 
+/**
+ * Button size configuration for CarouselPagination
+ * Each size defines the button dimensions and corresponding icon size
+ */
+declare const BUTTON_SIZES: {
+    readonly sm: {
+        readonly buttonSize: "size-8";
+        readonly iconSize: 16;
+    };
+    readonly md: {
+        readonly buttonSize: "size-10";
+        readonly iconSize: 20;
+    };
+    readonly lg: {
+        readonly buttonSize: "size-12";
+        readonly iconSize: 24;
+    };
+    readonly xl: {
+        readonly buttonSize: "size-14";
+        readonly iconSize: 28;
+    };
+};
+type CarouselPaginationSize = keyof typeof BUTTON_SIZES;
 interface CarouselPaginationProps {
     /**
      * Handler for scrolling to the previous item
@@ -18,8 +41,19 @@ interface CarouselPaginationProps {
      */
     canScrollNext?: boolean;
     /**
-     * Size of the icon in pixels
-     * @default 24
+     * Predefined button size - controls both button dimensions and icon size
+     * @default "md"
+     */
+    size?: CarouselPaginationSize;
+    /**
+     * Responsive size - mobile size (optional, uses `size` if not provided)
+     * Use this for different sizes on mobile vs desktop
+     * @example size="lg" mobileSize="md" -> md on mobile, lg on desktop
+     */
+    mobileSize?: CarouselPaginationSize;
+    /**
+     * Custom icon size in pixels (overrides the size-based default)
+     * @deprecated Use `size` prop instead for consistent sizing
      */
     iconSize?: number;
     /**
@@ -28,6 +62,8 @@ interface CarouselPaginationProps {
     className?: string;
     /**
      * Additional CSS classes for the buttons
+     * Note: Size-related classes (size-*, h-*, w-*) will be overridden by the `size` prop
+     * to ensure perfect circles. Use `size` prop to control button dimensions.
      */
     buttonClassName?: string;
     /**
@@ -55,12 +91,13 @@ interface CarouselPaginationProps {
  * CarouselPagination - Reusable carousel navigation buttons based on AppleCarousel design.
  *
  * Features:
- * - Circular buttons with consistent sizing
- * - Disabled state with reduced opacity
- * - Positioned with flexbox for flexible placement
- * - Works with any carousel implementation
+ * - **Perfect circles** - Uses aspect-square and explicit sizing to guarantee circular buttons
+ * - **Consistent sizing** - Use the `size` prop for uniform appearance across devices
+ * - **Responsive sizing** - Use `mobileSize` + `size` for different sizes on mobile/desktop
+ * - **Disabled state** - Reduced opacity when at scroll boundaries
+ * - **Flexible placement** - Container uses flexbox for easy positioning
  *
- * @example
+ * @example Basic usage
  * ```tsx
  * <CarouselPagination
  *   onPrevious={() => scroll("left")}
@@ -69,7 +106,27 @@ interface CarouselPaginationProps {
  *   canScrollNext={!isAtEnd}
  * />
  * ```
+ *
+ * @example Responsive sizing (smaller on mobile, larger on desktop)
+ * ```tsx
+ * <CarouselPagination
+ *   size="lg"
+ *   mobileSize="md"
+ *   onPrevious={scrollPrev}
+ *   onNext={scrollNext}
+ * />
+ * ```
+ *
+ * @example Custom styling
+ * ```tsx
+ * <CarouselPagination
+ *   size="xl"
+ *   buttonClassName="bg-primary text-primary-foreground hover:bg-primary/90"
+ *   onPrevious={scrollPrev}
+ *   onNext={scrollNext}
+ * />
+ * ```
  */
-declare function CarouselPagination({ onPrevious, onNext, canScrollPrevious, canScrollNext, iconSize, className, buttonClassName, previousIcon, nextIcon, previousAriaLabel, nextAriaLabel, }: CarouselPaginationProps): React.JSX.Element;
+declare function CarouselPagination({ onPrevious, onNext, canScrollPrevious, canScrollNext, size, mobileSize, iconSize: customIconSize, className, buttonClassName, previousIcon, nextIcon, previousAriaLabel, nextAriaLabel, }: CarouselPaginationProps): React.JSX.Element;
 
-export { CarouselPagination, type CarouselPaginationProps };
+export { BUTTON_SIZES as CAROUSEL_PAGINATION_SIZES, CarouselPagination, type CarouselPaginationProps, type CarouselPaginationSize };

package/dist/carousel-pagination.js

@@ -531,12 +531,20 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
+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",
@@ -544,6 +552,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__ */ jsxs("div", { className: cn("flex justify-end gap-2", className), children: [
     /* @__PURE__ */ jsx(
       Pressable,
@@ -552,11 +572,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__ */ jsx(DynamicIcon, { name: previousIcon, size: iconSize })
+        className: baseButtonStyles,
+        children: /* @__PURE__ */ jsx(DynamicIcon, { name: previousIcon, size: effectiveIconSize })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -566,14 +583,11 @@ 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__ */ jsx(DynamicIcon, { name: nextIcon, size: iconSize })
+        className: baseButtonStyles,
+        children: /* @__PURE__ */ jsx(DynamicIcon, { name: nextIcon, size: effectiveIconSize })
       }
     )
   ] });
 }
 
-export { CarouselPagination };
+export { BUTTON_SIZES as CAROUSEL_PAGINATION_SIZES, CarouselPagination };

package/dist/carousel-portfolio-hero.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-portfolio-hero.d.ts

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

package/dist/carousel-product-feature-showcase.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-product-feature-showcase.d.ts

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

package/dist/carousel-progress-slider.d.cts

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

package/dist/carousel-progress-slider.d.ts

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

package/dist/carousel-scale-focus.cjs

@@ -689,12 +689,20 @@ function CarouselItem({ className, ...props }) {
     }
   );
 }
+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",
@@ -702,6 +710,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,
@@ -710,11 +730,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(
@@ -724,11 +741,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 })
       }
     )
   ] });
@@ -1125,7 +1139,8 @@ function CarouselScaleFocus({
   indicatorClassName,
   startIndex = 1,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -1235,7 +1250,7 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
-      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:px-45", children: [
           title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [
@@ -1285,12 +1300,13 @@ function CarouselScaleFocus({
                 onNext: scrollNext,
                 canScrollPrevious,
                 canScrollNext,
-                iconSize: 24,
+                size: "xl",
+                mobileSize: "md",
                 className: cn(
-                  "mt-6 justify-center md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:pointer-events-none",
+                  "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: "size-10 md:size-14 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"
+                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"
               }
             )
           ] }),

package/dist/carousel-scale-focus.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -109,6 +109,10 @@ interface CarouselScaleFocusProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * CarouselScaleFocus displays images with a scale and opacity focus effect.
@@ -130,6 +134,6 @@ interface CarouselScaleFocusProps {
  * />
  * ```
  */
-declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
+declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
 
 export { CarouselScaleFocus, type CarouselScaleFocusImage, type CarouselScaleFocusProps };

package/dist/carousel-scale-focus.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -109,6 +109,10 @@ interface CarouselScaleFocusProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * CarouselScaleFocus displays images with a scale and opacity focus effect.
@@ -130,6 +134,6 @@ interface CarouselScaleFocusProps {
  * />
  * ```
  */
-declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
+declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
 
 export { CarouselScaleFocus, type CarouselScaleFocusImage, type CarouselScaleFocusProps };