@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Carousel/index.mjs

@@ -1,10 +1,788 @@
-export { LazyCarousel } from '../../chunk-BL6E2DLZ.mjs';
-export { Carousel } from '../../chunk-X25TNRSD.mjs';
-import '../../chunk-NFSBGRDB.mjs';
-import '../../chunk-BDXKKMBZ.mjs';
-import '../../chunk-FPKEAJRZ.mjs';
-import '../../chunk-HK46BT5U.mjs';
-import '../../chunk-E2KQFV3O.mjs';
-import '../../chunk-5SVLJN2C.mjs';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { memo, forwardRef, lazy, useState, useRef, useMemo, useCallback, useEffect, Activity, Suspense, useId, createContext, useContext } from 'react';
+import { cva } from 'class-variance-authority';
+import { Button as Button$1 } from 'react-aria-components';
+import { ChevronUpIcon, ChevronDownIcon, PlayIcon, PauseIcon, Loader2, Zap } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var init_cn = __esm({
+  "src/utils/cn.ts"() {
+  }
+});
+
+// src/styles/interaction-states.ts
+var PRESSED_STYLES, HOVER_STYLES, HIGH_CONTRAST_HOVER, HIGH_CONTRAST_PRESSED;
+var init_interaction_states = __esm({
+  "src/styles/interaction-states.ts"() {
+    PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+    HOVER_STYLES = "data-[hovered]:shadow-md";
+    HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+    HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+  }
+});
+function useButtonGroupContext() {
+  return useContext(ButtonGroupContext);
+}
+function useButtonGroupItemContext() {
+  return useContext(ButtonGroupItemContext);
+}
+var ButtonGroupContext, ButtonGroupItemContext;
+var init_ButtonGroupContext = __esm({
+  "src/elements/ButtonGroup/ButtonGroupContext.tsx"() {
+    "use client";
+    ButtonGroupContext = createContext(null);
+    ButtonGroupContext.displayName = "ButtonGroupContext";
+    ButtonGroupItemContext = createContext(null);
+    ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
+  }
+});
+var buttonGroupItemVariants;
+var init_ButtonGroup_variants = __esm({
+  "src/elements/ButtonGroup/ButtonGroup.variants.ts"() {
+    cva("inline-flex items-center gap-0", {
+      variants: {
+        orientation: {
+          horizontal: "flex-row",
+          vertical: "flex-col w-full"
+        }
+      },
+      defaultVariants: {
+        orientation: "horizontal"
+      }
+    });
+    buttonGroupItemVariants = cva("", {
+      variants: {
+        orientation: {
+          // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
+          horizontal: "min-w-[44px]",
+          // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
+          // eliminating gaps between stacked buttons in vertical orientation
+          vertical: "flex min-h-[44px]"
+        },
+        position: {
+          first: "",
+          middle: "",
+          last: "",
+          only: ""
+          // Single button - no modifications needed
+        }
+      },
+      compoundVariants: [
+        // ==========================================================================
+        // Horizontal Orientation
+        // ==========================================================================
+        {
+          orientation: "horizontal",
+          position: "first",
+          className: "rounded-r-none border-r-0"
+        },
+        {
+          orientation: "horizontal",
+          position: "middle",
+          className: "rounded-none border-r-0"
+        },
+        {
+          orientation: "horizontal",
+          position: "last",
+          className: "rounded-l-none"
+        },
+        // ==========================================================================
+        // Vertical Orientation
+        // Note: w-full is handled by Button's effectiveFullWidth for both layers
+        // ==========================================================================
+        {
+          orientation: "vertical",
+          position: "first",
+          className: "rounded-b-none border-b-0"
+        },
+        {
+          orientation: "vertical",
+          position: "middle",
+          className: "rounded-none border-b-0"
+        },
+        {
+          orientation: "vertical",
+          position: "last",
+          className: "rounded-t-none"
+        }
+      ],
+      defaultVariants: {
+        orientation: "horizontal",
+        position: "only"
+      }
+    });
+    cva("bg-[var(--border)]", {
+      variants: {
+        orientation: {
+          horizontal: "w-px h-6 mx-1",
+          vertical: "h-px w-full my-1"
+        }
+      },
+      defaultVariants: {
+        orientation: "horizontal"
+      }
+    });
+  }
+});
+var buttonOuterVariants, buttonVisualVariants, Button;
+var init_Button = __esm({
+  "src/elements/Button/Button.tsx"() {
+    "use client";
+    init_cn();
+    init_interaction_states();
+    init_ButtonGroupContext();
+    init_ButtonGroup_variants();
+    buttonOuterVariants = cva(
+      "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+      {
+        variants: {
+          fullWidth: {
+            true: "w-full",
+            false: ""
+          },
+          inVerticalGroup: {
+            true: "items-stretch",
+            false: "items-center"
+          }
+        },
+        defaultVariants: {
+          fullWidth: false,
+          inVerticalGroup: false
+        }
+      }
+    );
+    buttonVisualVariants = cva(
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
+      {
+        variants: {
+          variant: {
+            default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
+            destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
+            outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
+            secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
+            ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
+            link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
+          },
+          fullWidth: {
+            true: "w-full",
+            false: ""
+          },
+          visualSize: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3 text-xs",
+            lg: "h-11 rounded-md px-8",
+            icon: "h-10 w-10",
+            dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
+          },
+          paywall: {
+            true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
+            false: ""
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          visualSize: "default",
+          paywall: false
+        }
+      }
+    );
+    Button = memo(forwardRef(
+      ({
+        className,
+        buttonVisualClassName,
+        variant,
+        size,
+        visualSize,
+        fullWidth,
+        loading = false,
+        loadingText = "Loading...",
+        shortcut,
+        children,
+        isDisabled,
+        paywall = false,
+        paywallRedirect,
+        paywallDescription,
+        onPress,
+        ...props
+      }, ref) => {
+        const paywallDescriptionId = useId();
+        const groupContext = useButtonGroupContext();
+        const itemContext = useButtonGroupItemContext();
+        const effectiveVariant = variant ?? groupContext?.variant ?? "default";
+        const effectiveSize = size ?? groupContext?.size;
+        const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
+        const isInVerticalGroup = groupContext?.orientation === "vertical";
+        const effectiveFullWidth = fullWidth || isInVerticalGroup;
+        const positionClassName = itemContext ? buttonGroupItemVariants({
+          orientation: groupContext?.orientation ?? "horizontal",
+          position: itemContext.position
+        }) : "";
+        const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
+        if (process.env.NODE_ENV !== "production") {
+          if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
+            console.warn(
+              '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
+            );
+          }
+        }
+        const handlePress = (e) => {
+          if (paywall) {
+            if (paywallRedirect) {
+              window.open(paywallRedirect, "_blank", "noopener,noreferrer");
+            }
+            return;
+          }
+          onPress?.(e);
+        };
+        const computedIsDisabled = effectiveIsDisabled || loading || void 0;
+        return /* @__PURE__ */ jsx(
+          Button$1,
+          {
+            ref,
+            isDisabled: computedIsDisabled,
+            "aria-disabled": paywall ? true : void 0,
+            "aria-describedby": paywall ? paywallDescriptionId : void 0,
+            onPress: handlePress,
+            className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+            ...props,
+            children: (renderProps) => (
+              /* Layer 2: Visual Button */
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    buttonVisualVariants({
+                      variant: effectiveVariant,
+                      visualSize: effectiveVisualSize,
+                      paywall,
+                      fullWidth: effectiveFullWidth
+                    }),
+                    // Position styling from ButtonGroup context (border-radius adjustments)
+                    positionClassName,
+                    buttonVisualClassName,
+                    // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
+                    PRESSED_STYLES,
+                    HOVER_STYLES,
+                    HIGH_CONTRAST_HOVER,
+                    HIGH_CONTRAST_PRESSED
+                  ),
+                  "data-pressed": renderProps.isPressed || void 0,
+                  children: [
+                    loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
+                    ] }),
+                    !loading && children,
+                    paywall && /* @__PURE__ */ jsx(
+                      Zap,
+                      {
+                        "data-testid": "zap-icon",
+                        "aria-hidden": "true",
+                        className: "ml-1"
+                      }
+                    ),
+                    paywall && /* @__PURE__ */ jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
+                      "Premium feature: ",
+                      paywallDescription || "Upgrade required to access this feature"
+                    ] }),
+                    renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
+                    renderProps.isPressed && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  ]
+                }
+              )
+            )
+          }
+        );
+      }
+    ));
+    Button.displayName = "Button";
+  }
+});
+
+// src/elements/Button/index.ts
+var init_Button2 = __esm({
+  "src/elements/Button/index.ts"() {
+    init_Button();
+  }
+});
+
+// src/elements/Carousel/Carousel.tsx
+var Carousel_exports = {};
+__export(Carousel_exports, {
+  Carousel: () => Carousel
+});
+function buildManifest(durations) {
+  let cumulative = 0;
+  return durations.map((duration, index) => {
+    const start = cumulative;
+    const safeDuration = Math.max(duration, MIN_ITEM_DURATION_MS);
+    cumulative += safeDuration;
+    return { index, startTime: start, endTime: cumulative };
+  });
+}
+function getCurrentItemIndex(manifest, elapsed) {
+  if (manifest.length === 0) return 0;
+  const totalDuration = manifest[manifest.length - 1]?.endTime ?? 0;
+  if (totalDuration === 0) return 0;
+  const normalizedElapsed = elapsed % totalDuration;
+  const item = manifest.find(
+    (m) => normalizedElapsed >= m.startTime && normalizedElapsed < m.endTime
+  );
+  return item?.index ?? 0;
+}
+function shouldUsePerItemTiming(itemsLength, itemDurations, autoRotateInterval) {
+  if (autoRotateInterval === 0) return false;
+  if (!itemDurations || itemDurations.length === 0) return false;
+  if (itemDurations.length !== itemsLength) {
+    console.warn(
+      "Carousel: itemDurations length does not match items length. Falling back to autoRotateInterval."
+    );
+    return false;
+  }
+  return true;
+}
+function Carousel({
+  items,
+  autoRotateInterval = 5e3,
+  defaultIndex = 0,
+  currentIndex: controlledIndex,
+  onIndexChange,
+  isPaused: controlledIsPaused,
+  onPauseChange,
+  collapsible = false,
+  defaultMinimized = false,
+  isMinimized: controlledIsMinimized,
+  onMinimizeChange,
+  minimizedLabel = "Carousel (minimized)",
+  label = "Carousel",
+  slideLabel,
+  showNavigation = true,
+  showPlayPause = true,
+  respectReducedMotion = true,
+  className,
+  slideClassName,
+  navigationClassName,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  // Per-item timing props
+  itemDurations,
+  elapsedTime: controlledElapsedTime,
+  onElapsedTimeChange,
+  ...props
+}) {
+  const isControlled = controlledIndex !== void 0;
+  const isPauseControlled = controlledIsPaused !== void 0;
+  const isMinimizedControlled = controlledIsMinimized !== void 0;
+  const isElapsedTimeControlled = controlledElapsedTime !== void 0;
+  const [internalIndex, setInternalIndex] = useState(defaultIndex);
+  const [internalIsPaused, setInternalIsPaused] = useState(false);
+  const [internalIsMinimized, setInternalIsMinimized] = useState(defaultMinimized);
+  const [_internalElapsedTime, setInternalElapsedTime] = useState(() => {
+    if (!itemDurations || itemDurations.length === 0) return 0;
+    if (itemDurations.length !== items.length) return 0;
+    if (defaultIndex === 0) return 0;
+    const tempManifest = buildManifest(itemDurations);
+    return tempManifest[defaultIndex]?.startTime ?? 0;
+  });
+  const wasPlayingBeforeMinimize = useRef(false);
+  const currentIndex = isControlled ? controlledIndex : internalIndex;
+  const isPaused = isPauseControlled ? controlledIsPaused : internalIsPaused;
+  const isMinimized = isMinimizedControlled ? controlledIsMinimized : internalIsMinimized;
+  const usePerItemTiming = useMemo(
+    () => shouldUsePerItemTiming(items.length, itemDurations, autoRotateInterval),
+    [items.length, itemDurations, autoRotateInterval]
+  );
+  const manifest = useMemo(() => {
+    if (!usePerItemTiming || !itemDurations) return [];
+    return buildManifest(itemDurations);
+  }, [usePerItemTiming, itemDurations]);
+  const totalDuration = useMemo(() => {
+    if (manifest.length === 0) return 0;
+    return manifest[manifest.length - 1]?.endTime ?? 0;
+  }, [manifest]);
+  const goToSlide = useCallback(
+    (index) => {
+      if (isControlled) {
+        onIndexChange?.(index);
+      } else {
+        setInternalIndex(index);
+      }
+      if (usePerItemTiming && manifest[index]) {
+        const newElapsed = manifest[index].startTime;
+        if (!isElapsedTimeControlled) {
+          setInternalElapsedTime(newElapsed);
+        }
+        onElapsedTimeChange?.(newElapsed);
+      }
+      if (isPauseControlled) {
+        onPauseChange?.(true);
+      } else {
+        setInternalIsPaused(true);
+      }
+    },
+    [
+      isControlled,
+      isPauseControlled,
+      isElapsedTimeControlled,
+      onIndexChange,
+      onPauseChange,
+      onElapsedTimeChange,
+      usePerItemTiming,
+      manifest
+    ]
+  );
+  const togglePause = useCallback(() => {
+    const newPauseState = !isPaused;
+    if (isPauseControlled) {
+      onPauseChange?.(newPauseState);
+    } else {
+      setInternalIsPaused(newPauseState);
+    }
+  }, [isPaused, isPauseControlled, onPauseChange]);
+  const toggleMinimize = useCallback(() => {
+    const newMinimizedState = !isMinimized;
+    if (newMinimizedState) {
+      wasPlayingBeforeMinimize.current = !isPaused;
+    } else {
+      if (wasPlayingBeforeMinimize.current && isPaused) {
+        if (isPauseControlled) {
+          onPauseChange?.(false);
+        } else {
+          setInternalIsPaused(false);
+        }
+      }
+      wasPlayingBeforeMinimize.current = false;
+    }
+    if (isMinimizedControlled) {
+      onMinimizeChange?.(newMinimizedState);
+    } else {
+      setInternalIsMinimized(newMinimizedState);
+    }
+  }, [isMinimized, isMinimizedControlled, onMinimizeChange, isPaused, isPauseControlled, onPauseChange]);
+  useEffect(() => {
+    if (autoRotateInterval === 0) return;
+    if (respectReducedMotion) {
+      if (typeof window !== "undefined" && window.matchMedia) {
+        const prefersReducedMotion = window.matchMedia(
+          "(prefers-reduced-motion: reduce)"
+        ).matches;
+        if (prefersReducedMotion) {
+          if (isPauseControlled) {
+            onPauseChange?.(true);
+          } else {
+            setInternalIsPaused(true);
+          }
+        }
+      }
+    }
+  }, [autoRotateInterval, respectReducedMotion, isPauseControlled, onPauseChange]);
+  const currentIndexRef = useRef(currentIndex);
+  currentIndexRef.current = currentIndex;
+  useEffect(() => {
+    if (!usePerItemTiming) return;
+    if (autoRotateInterval === 0) return;
+    if (isPaused || isMinimized) return;
+    if (isElapsedTimeControlled) return;
+    const interval = setInterval(() => {
+      setInternalElapsedTime((prevElapsed) => {
+        let newElapsed = prevElapsed + TIMER_CHECK_INTERVAL_MS;
+        if (totalDuration > 0 && newElapsed >= totalDuration) {
+          newElapsed = 0;
+        }
+        onElapsedTimeChange?.(newElapsed);
+        const newIndex = getCurrentItemIndex(manifest, newElapsed);
+        if (newIndex !== currentIndexRef.current) {
+          if (isControlled) {
+            onIndexChange?.(newIndex);
+          } else {
+            setInternalIndex(newIndex);
+          }
+        }
+        return newElapsed;
+      });
+    }, TIMER_CHECK_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, [
+    usePerItemTiming,
+    autoRotateInterval,
+    isPaused,
+    isMinimized,
+    isElapsedTimeControlled,
+    totalDuration,
+    manifest,
+    isControlled,
+    onIndexChange,
+    onElapsedTimeChange
+  ]);
+  useEffect(() => {
+    if (usePerItemTiming) return;
+    if (autoRotateInterval === 0) return;
+    if (isPaused || isMinimized) return;
+    const interval = setInterval(() => {
+      const nextIndex = (currentIndex + 1) % items.length;
+      if (isControlled) {
+        onIndexChange?.(nextIndex);
+      } else {
+        setInternalIndex(nextIndex);
+      }
+    }, autoRotateInterval);
+    return () => clearInterval(interval);
+  }, [
+    usePerItemTiming,
+    autoRotateInterval,
+    currentIndex,
+    isPaused,
+    isMinimized,
+    items.length,
+    isControlled,
+    onIndexChange
+  ]);
+  useEffect(() => {
+    if (!usePerItemTiming || !isElapsedTimeControlled) return;
+    const newIndex = getCurrentItemIndex(manifest, controlledElapsedTime);
+    if (newIndex !== currentIndex) {
+      if (isControlled) {
+        onIndexChange?.(newIndex);
+      } else {
+        setInternalIndex(newIndex);
+      }
+    }
+  }, [
+    usePerItemTiming,
+    isElapsedTimeControlled,
+    controlledElapsedTime,
+    manifest,
+    currentIndex,
+    isControlled,
+    onIndexChange
+  ]);
+  const currentSlideLabel = slideLabel ? slideLabel(currentIndex, items.length) : `Slide ${currentIndex + 1} of ${items.length}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col mb-4 transition-all duration-300",
+        !isMinimized && "space-y-4",
+        className
+      ),
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": isMinimized ? minimizedLabel : ariaLabel || label,
+      "aria-labelledby": ariaLabelledBy,
+      ...props,
+      children: isMinimized && collapsible ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "bg-[var(--primary)] rounded-lg px-4 py-2 shadow-md",
+            "flex items-center justify-between gap-4"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-[var(--primary-foreground)] text-sm", children: [
+              minimizedLabel,
+              " - ",
+              currentSlideLabel
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                visualSize: "icon",
+                onPress: toggleMinimize,
+                "aria-label": "Expand carousel",
+                "aria-expanded": false,
+                children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "w-5 h-5" })
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-[var(--primary)] rounded-lg p-4 overflow-hidden shadow-md",
+              "slide-in-animation",
+              slideClassName
+            ),
+            role: "group",
+            "aria-roledescription": "slide",
+            "aria-label": currentSlideLabel,
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: /* @__PURE__ */ jsx("div", { className: "text-[var(--primary-foreground)] min-h-[2rem] flex items-center", children: items[currentIndex] })
+          },
+          currentIndex
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          showNavigation && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("flex items-center", navigationClassName),
+              role: "group",
+              "aria-label": "Slide navigation",
+              children: items.map((_, index) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: index === currentIndex ? "default" : "outline",
+                  visualSize: "dot",
+                  onPress: () => goToSlide(index),
+                  "aria-label": `Go to slide ${index + 1}`,
+                  "aria-current": index === currentIndex ? true : void 0
+                },
+                index
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            collapsible && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                visualSize: "icon",
+                onPress: toggleMinimize,
+                "aria-label": "Minimize carousel",
+                "aria-expanded": true,
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-5 h-5" })
+              }
+            ),
+            showPlayPause && autoRotateInterval > 0 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                visualSize: "icon",
+                onPress: togglePause,
+                "aria-label": isPaused ? "Play carousel" : "Pause carousel",
+                children: isPaused ? /* @__PURE__ */ jsx(PlayIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(PauseIcon, { className: "w-5 h-5" })
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+var MIN_ITEM_DURATION_MS, TIMER_CHECK_INTERVAL_MS;
+var init_Carousel = __esm({
+  "src/elements/Carousel/Carousel.tsx"() {
+    "use client";
+    init_Button2();
+    init_cn();
+    MIN_ITEM_DURATION_MS = 1e3;
+    TIMER_CHECK_INTERVAL_MS = 1e3;
+    Carousel.displayName = "Carousel";
+  }
+});
+
+// src/elements/Carousel/index.ts
+init_Carousel();
+
+// src/elements/Skeleton/Skeleton.tsx
+init_cn();
+var skeletonVariants = cva(
+  // Base styles - pulse animation and theme-aware background
+  "animate-pulse bg-[var(--accent-background)] relative",
+  {
+    variants: {
+      // Shape variants
+      variant: {
+        rectangle: "rounded-md",
+        // Default: 0.375rem border radius
+        circle: "rounded-full",
+        // Circular shape (for avatars, icons)
+        text: "rounded-sm h-4"
+        // Text line placeholder (1rem height, 0.125rem radius)
+      }
+    },
+    defaultVariants: {
+      variant: "rectangle"
+    }
+  }
+);
+var Skeleton = memo(
+  forwardRef(
+    ({ className, variant, ...props }, ref) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "status",
+          "aria-live": "polite",
+          "aria-busy": "true",
+          className: cn(skeletonVariants({ variant }), className),
+          ...props,
+          children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+        }
+      );
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+var Carousel2 = lazy(
+  () => Promise.resolve().then(() => (init_Carousel(), Carousel_exports)).then((mod) => ({ default: mod.Carousel }))
+);
+function CarouselSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-3/4" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-5/6" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 rounded-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 rounded-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 rounded-full" })
+    ] })
+  ] });
+}
+function LazyCarousel({
+  minWidth = 1024,
+  preserveState = true,
+  ...props
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+    const checkViewport = () => {
+      const visible = window.innerWidth >= minWidth;
+      setIsVisible(visible);
+      if (visible) {
+        setHasLoaded(true);
+      }
+    };
+    checkViewport();
+    window.addEventListener("resize", checkViewport);
+    return () => window.removeEventListener("resize", checkViewport);
+  }, [minWidth]);
+  if (!isClient) {
+    return null;
+  }
+  if (!hasLoaded && !isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Activity, { mode: preserveState && !isVisible ? "hidden" : "visible", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CarouselSkeleton, {}), children: /* @__PURE__ */ jsx(Carousel2, { ...props }) }) });
+}
+
+export { Carousel, LazyCarousel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map