@opensite/ui 1.2.7 → 1.2.9

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';
 
 /**