@ansh-ui/react 0.2.0 → 0.3.1

package/dist/index.js

@@ -1,24 +1,26 @@
 'use client';
 export { useAnimate, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, useSpringValue } from './chunk-O2PX54KX.js';
-export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-EGG4CP7C.js';
-export { Calendar, Checkbox, ChoiceCard, ColorPicker, Combobox, DatePicker, DateRangePicker, Dropzone, Field, Fieldset, Input, NumberInput, OptionList, PinInput, Radio, RadioGroup, RangeSlider, Rating, Select, Slider, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead } from './chunk-QO3E7TJS.js';
-export { AlertDialog, CommandPalette, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider, useCommandShortcut } from './chunk-LDCZQP3R.js';
-export { Presence, Slot, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus } from './chunk-HO2YSF5O.js';
+export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-BQJ6H3HC.js';
+export { Calendar, Checkbox, ChoiceCard, ColorPicker, Combobox, DatePicker, DateRangePicker, Dropzone, Field, Fieldset, Input, NumberInput, OptionList, PinInput, Radio, RadioGroup, RangeSlider, Rating, Select, Slider, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead } from './chunk-7QGB2X7R.js';
+export { AlertDialog, CommandPalette, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider, useCommandShortcut } from './chunk-RGGNLAAA.js';
+export { Presence, Slot, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus } from './chunk-742E5FQS.js';
 export { Portal, computePosition, useAnchoredPosition, useDismiss, useScrollLock } from './chunk-XEP6P7E6.js';
-export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline } from './chunk-HPGCILO4.js';
-export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs } from './chunk-OLTS6G5M.js';
+export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline } from './chunk-XRKZPLUT.js';
+import { inertProps } from './chunk-GNA33V2J.js';
+export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs } from './chunk-GNA33V2J.js';
 export { AppShell, Sidebar } from './chunk-5CFQFMP5.js';
+import { useControllableState } from './chunk-LXCIXR5T.js';
 export { useControllableState } from './chunk-LXCIXR5T.js';
-import { useBehaviour } from './chunk-T4AK2KLM.js';
-export { AnimatePresence, AnimatedText, Draggable, GradientText, MagneticButton, Marquee, Motion, MotionConfig, Parallax, Ripple, ScrollReveal, ThemeProvider, TiltCard, createBehaviourComponent, themeScript, useBehaviour, useMotionConfig, useTheme } from './chunk-T4AK2KLM.js';
-import { useMergedRef, useInView } from './chunk-IBXLC5IE.js';
-export { useElementSize, useFrameBudget, useInView, useMergedRef, usePointer, useReducedMotion, useScrollProgress, useTicker, useWindowScroll } from './chunk-IBXLC5IE.js';
+import { useBehaviour } from './chunk-NJUVVMJV.js';
+export { AnimatePresence, AnimatedText, Draggable, GradientText, MagneticButton, Marquee, Motion, MotionConfig, Parallax, Ripple, ScrollReveal, ThemeProvider, TiltCard, createBehaviourComponent, themeScript, useBehaviour, useMotionConfig, useTheme } from './chunk-NJUVVMJV.js';
+import { useMergedRef, useInView } from './chunk-P5MRISBP.js';
+export { useElementSize, useFrameBudget, useInView, useMergedRef, usePointer, useReducedMotion, useScrollProgress, useTicker, useTickerSubscriberCount, useWindowScroll } from './chunk-P5MRISBP.js';
 import { cx } from './chunk-H34OXXJU.js';
 export { composeEventHandlers, cx, mergeProps, mergeRefs } from './chunk-H34OXXJU.js';
 import { forwardRef, useRef, useEffect, createContext, useMemo, useState, useCallback, useContext, useId } from 'react';
-import { magnetic, ripple, getTicker, mountEffect, aurora, meshGradient, animatedGradient, particleField, constellation, meteors, rain, snow, fireflies, waves, blob, noiseLayer, spotlight, prefersReducedMotion } from '@ansh-ui/core';
+import { magnetic, ripple, getTicker, mountEffect, aurora, meshGradient, animatedGradient, particleField, constellation, meteors, rain, snow, fireflies, waves, blob, noiseLayer, spotlight, lightRays, smoke, powderExplosion, floatingGeometry, orbit, strangeAttractor, swarm, prefersReducedMotion, mountBehaviour, textScramble, clamp } from '@ansh-ui/core';
 export { MotionValue, animate, checkContrast, createGradient, createNoise, createScale, createTimeline, cubicBezier, easings, ensureContrast, generatePalette, getRegistry, getTicker, mixColors, motionValue, palettes, parseColor, pickReadable, prefersReducedMotion, registerEasing, setReducedMotionMode, signature as signatureEasings, springs, stagger, toHex, toOklchString } from '@ansh-ui/core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var HOST_STYLE = {
   position: "relative",
@@ -101,6 +103,13 @@ var Waves = createEffectComponent(waves, "Waves");
 var LiquidBlob = createEffectComponent(blob, "LiquidBlob");
 var NoiseLayer = createEffectComponent(noiseLayer, "NoiseLayer");
 var Spotlight = createEffectComponent(spotlight, "Spotlight");
+var LightRays = createEffectComponent(lightRays, "LightRays");
+var Smoke = createEffectComponent(smoke, "Smoke");
+var PowderExplosion = createEffectComponent(powderExplosion, "PowderExplosion");
+var FloatingGeometry = createEffectComponent(floatingGeometry, "FloatingGeometry");
+var Orbit = createEffectComponent(orbit, "Orbit");
+var StrangeAttractor = createEffectComponent(strangeAttractor, "StrangeAttractor");
+var Swarm = createEffectComponent(swarm, "Swarm");
 var Button = forwardRef(function Button2({
   variant = "solid",
   size = "md",
@@ -798,13 +807,520 @@ function FAQAccordion({
           "aria-labelledby": triggerId,
           className: "ansh-accordion__panel",
           "data-open": isOpen,
-          ...isOpen ? {} : { inert: true },
+          ...inertProps(!isOpen),
           children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "ansh-accordion__body", children: item.answer }) })
         }
       )
     ] }, item.question);
   }) });
 }
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function ScrambleText({ children, as, className, style, ...options }) {
+  const Tag = as ?? "span";
+  const ref = useRef(null);
+  const {
+    chars,
+    duration,
+    stagger: stagger2,
+    cycleSpeed,
+    trigger,
+    repeat,
+    threshold,
+    seed,
+    intensity,
+    reducedMotion,
+    disabled
+  } = options;
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handle = mountBehaviour(textScramble, node, {
+      chars,
+      duration,
+      stagger: stagger2,
+      cycleSpeed,
+      trigger,
+      repeat,
+      threshold,
+      seed,
+      intensity,
+      reducedMotion,
+      disabled
+    });
+    return () => handle.destroy();
+  }, [
+    children,
+    chars,
+    duration,
+    stagger2,
+    cycleSpeed,
+    trigger,
+    repeat,
+    threshold,
+    seed,
+    intensity,
+    reducedMotion,
+    disabled
+  ]);
+  return /* @__PURE__ */ jsxs(Tag, { className, style, children: [
+    /* @__PURE__ */ jsx("span", { style: VISUALLY_HIDDEN, children }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ref, children })
+  ] });
+}
+function TextRotate({
+  words,
+  interval = 2.2,
+  animation = "slide",
+  className,
+  style
+}) {
+  const [index, setIndex] = useState(0);
+  const reduced = useRef(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    reduced.current = prefersReducedMotion();
+    setReady(true);
+  }, []);
+  const safeWords = words.length > 0 ? words : [""];
+  const count = safeWords.length;
+  useEffect(() => {
+    if (!ready || reduced.current) return;
+    if (count < 2) return;
+    const ms = Math.max(200, interval * 1e3);
+    const timer = window.setInterval(() => {
+      setIndex((previous) => (previous + 1) % count);
+    }, ms);
+    return () => window.clearInterval(timer);
+  }, [ready, interval, count]);
+  const current = safeWords[index % count];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: ["ansh-rotate", className].filter(Boolean).join(" "),
+      style,
+      "data-animation": animation,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ansh-rotate__sizer", "aria-hidden": "true", children: safeWords.map((word, i) => /* @__PURE__ */ jsx("span", { className: "ansh-rotate__ghost", children: word }, `${word}-${i}`)) }),
+        /* @__PURE__ */ jsx("span", { className: "ansh-rotate__clip", children: /* @__PURE__ */ jsx("span", { className: "ansh-rotate__word", children: current }, index) })
+      ]
+    }
+  );
+}
+function BeforeAfter({
+  before,
+  after,
+  value,
+  defaultValue = 50,
+  onValueChange,
+  step = 4,
+  label = "Comparison position",
+  className,
+  style
+}) {
+  const [position, setPosition] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const rootRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const positionFromClientX = useCallback((clientX) => {
+    const node = rootRef.current;
+    if (!node) return 50;
+    const rect = node.getBoundingClientRect();
+    if (rect.width <= 0) return 50;
+    return clamp((clientX - rect.left) / rect.width * 100, 0, 100);
+  }, []);
+  const onPointerDown = (event) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+    setPosition(positionFromClientX(event.clientX));
+  };
+  const onPointerMove = (event) => {
+    if (!dragging) return;
+    setPosition(positionFromClientX(event.clientX));
+  };
+  const endDrag = (event) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    setDragging(false);
+  };
+  const onKeyDown = (event) => {
+    const jump = event.key === "ArrowLeft" || event.key === "ArrowDown" ? -step : event.key === "ArrowRight" || event.key === "ArrowUp" ? step : event.key === "Home" ? -100 : event.key === "End" ? 100 : 0;
+    if (jump === 0) return;
+    event.preventDefault();
+    setPosition((current) => clamp(current + jump, 0, 100));
+  };
+  const clipped = clamp(position, 0, 100);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: ["ansh-compare", className].filter(Boolean).join(" "),
+      style,
+      "data-dragging": dragging || void 0,
+      onPointerDown: (event) => {
+        if (event.target === event.currentTarget || !dragging) {
+          setPosition(positionFromClientX(event.clientX));
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ansh-compare__layer", children: after }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ansh-compare__layer ansh-compare__layer--before",
+            style: { clipPath: `inset(0 ${100 - clipped}% 0 0)` },
+            children: before
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ansh-compare__handle",
+            style: { left: `${clipped}%` },
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(clipped),
+            "aria-orientation": "horizontal",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            onKeyDown,
+            children: /* @__PURE__ */ jsx("span", { className: "ansh-compare__grip", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+function DeviceMockup({
+  variant = "browser",
+  url,
+  title,
+  label,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["ansh-mock", `ansh-mock--${variant}`, className].filter(Boolean).join(" "),
+      style,
+      role: label ? "group" : void 0,
+      "aria-label": label,
+      children: [
+        variant === "phone" ? /* @__PURE__ */ jsx("span", { className: "ansh-mock__notch", "aria-hidden": "true" }) : /* @__PURE__ */ jsxs("div", { className: "ansh-mock__chrome", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ansh-mock__dots", children: [
+            /* @__PURE__ */ jsx("i", {}),
+            /* @__PURE__ */ jsx("i", {}),
+            /* @__PURE__ */ jsx("i", {})
+          ] }),
+          variant === "browser" && url ? /* @__PURE__ */ jsx("span", { className: "ansh-mock__url", children: url }) : title ? /* @__PURE__ */ jsx("span", { className: "ansh-mock__title", children: title }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ansh-mock__screen", children })
+      ]
+    }
+  );
+}
+var OFFSET_Y = 14;
+var SCALE_STEP = 0.05;
+var ROTATE_STEP = 1.6;
+function CardStack({
+  items,
+  autoPlay = true,
+  interval = 3.5,
+  peek = 2,
+  controls = true,
+  label = "Card stack",
+  className,
+  style
+}) {
+  const [top, setTop] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const reduced = useRef(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    reduced.current = prefersReducedMotion();
+    setReady(true);
+  }, []);
+  const count = items.length;
+  useEffect(() => {
+    if (!ready || reduced.current || !autoPlay || paused) return;
+    if (count < 2) return;
+    const ms = Math.max(600, interval * 1e3);
+    const timer = window.setInterval(() => setTop((current2) => (current2 + 1) % count), ms);
+    return () => window.clearInterval(timer);
+  }, [ready, autoPlay, paused, interval, count]);
+  if (count === 0) return null;
+  const current = top % count;
+  const advance = (direction) => setTop((previous) => (previous + direction + count) % count);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["ansh-stack", className].filter(Boolean).join(" "),
+      style,
+      role: "group",
+      "aria-label": label,
+      "aria-roledescription": "card stack",
+      onPointerEnter: () => setPaused(true),
+      onPointerLeave: () => setPaused(false),
+      onFocusCapture: () => setPaused(true),
+      onBlurCapture: () => setPaused(false),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ansh-stack__deck", children: items.map((item, i) => {
+          const rung = (i - current + count) % count;
+          const hidden = rung > peek;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ansh-stack__card",
+              "data-rung": rung,
+              "aria-hidden": rung === 0 ? void 0 : "true",
+              ...inertProps(rung !== 0),
+              style: {
+                transform: `translateY(${rung * OFFSET_Y}px) scale(${1 - rung * SCALE_STEP}) rotate(${rung === 0 ? 0 : (rung % 2 === 0 ? 1 : -1) * ROTATE_STEP}deg)`,
+                opacity: hidden ? 0 : 1,
+                zIndex: count - rung,
+                pointerEvents: rung === 0 ? void 0 : "none"
+              },
+              children: item
+            },
+            i
+          );
+        }) }),
+        controls && count > 1 ? /* @__PURE__ */ jsxs("div", { className: "ansh-stack__controls", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-stack__button",
+              onClick: () => advance(-1),
+              "aria-label": "Previous card",
+              children: "\u2039"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "ansh-stack__count", "aria-hidden": "true", children: [
+            current + 1,
+            " / ",
+            count
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-stack__button",
+              onClick: () => advance(1),
+              "aria-label": "Next card",
+              children: "\u203A"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function Carousel({
+  items,
+  value,
+  defaultValue = 0,
+  onChange,
+  loop = true,
+  autoPlay = false,
+  interval = 5,
+  showDots = true,
+  showArrows = true,
+  draggable = true,
+  label,
+  className,
+  style
+}) {
+  const count = items.length;
+  const [index, setIndex] = useControllableState({
+    value,
+    defaultValue: clamp(defaultValue, 0, Math.max(0, count - 1)),
+    onChange
+  });
+  const [paused, setPaused] = useState(false);
+  const [playing, setPlaying] = useState(autoPlay);
+  const [drag, setDrag] = useState(0);
+  const baseId = useId();
+  const viewportRef = useRef(null);
+  const dragStart = useRef(null);
+  const active = count > 0 ? clamp(index, 0, count - 1) : 0;
+  const goTo = (next) => {
+    if (count === 0) return;
+    const wrapped = loop ? (next + count) % count : clamp(next, 0, count - 1);
+    setIndex(wrapped);
+  };
+  useEffect(() => {
+    if (!playing || paused || count < 2) return;
+    const ms = Math.max(1e3, interval * 1e3);
+    const timer = window.setInterval(() => {
+      setIndex((previous) => {
+        const next = previous + 1;
+        return loop ? next % count : Math.min(next, count - 1);
+      });
+    }, ms);
+    return () => window.clearInterval(timer);
+  }, [playing, paused, interval, count, loop, setIndex]);
+  if (count === 0) return null;
+  const atStart = !loop && active === 0;
+  const atEnd = !loop && active === count - 1;
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      goTo(active - 1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      goTo(active + 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      goTo(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      goTo(count - 1);
+    }
+  };
+  const onPointerDown = (event) => {
+    if (!draggable || count < 2) return;
+    dragStart.current = event.clientX;
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const onPointerMove = (event) => {
+    if (dragStart.current === null) return;
+    setDrag(event.clientX - dragStart.current);
+  };
+  const endDrag = (event) => {
+    if (dragStart.current === null) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    const width = viewportRef.current?.clientWidth ?? 1;
+    const travelled = drag;
+    dragStart.current = null;
+    setDrag(0);
+    if (Math.abs(travelled) > width * 0.25) goTo(active + (travelled < 0 ? 1 : -1));
+  };
+  const dragPercent = drag !== 0 ? drag / (viewportRef.current?.clientWidth || 1) * 100 : 0;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cx("ansh-carousel", className),
+      style,
+      "aria-roledescription": "carousel",
+      "aria-label": label,
+      onKeyDown,
+      onPointerEnter: () => setPaused(true),
+      onPointerLeave: () => setPaused(false),
+      onFocusCapture: () => setPaused(true),
+      onBlurCapture: () => setPaused(false),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ansh-carousel__viewport",
+            ref: viewportRef,
+            "aria-live": playing ? "off" : "polite",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            "data-dragging": dragStart.current !== null || void 0,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ansh-carousel__track",
+                style: {
+                  transform: `translate3d(${-active * 100 + dragPercent}%, 0, 0)`,
+                  // Suppress the transition mid-drag so the track tracks the finger exactly.
+                  transition: dragStart.current !== null ? "none" : void 0
+                },
+                children: items.map((item, i) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ansh-carousel__slide",
+                    id: `${baseId}-slide-${i}`,
+                    role: "group",
+                    "aria-roledescription": "slide",
+                    "aria-label": `${i + 1} of ${count}`,
+                    "aria-hidden": i === active ? void 0 : "true",
+                    ...inertProps(i !== active),
+                    children: item
+                  },
+                  i
+                ))
+              }
+            )
+          }
+        ),
+        showArrows && count > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-carousel__arrow ansh-carousel__arrow--prev",
+              onClick: () => goTo(active - 1),
+              disabled: atStart,
+              "aria-label": "Previous slide",
+              children: "\u2039"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-carousel__arrow ansh-carousel__arrow--next",
+              onClick: () => goTo(active + 1),
+              disabled: atEnd,
+              "aria-label": "Next slide",
+              children: "\u203A"
+            }
+          )
+        ] }) : null,
+        showDots && count > 1 || autoPlay ? /* @__PURE__ */ jsxs("div", { className: "ansh-carousel__controls", children: [
+          autoPlay ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-carousel__pause",
+              onClick: () => setPlaying((on) => !on),
+              "aria-label": playing ? "Pause carousel" : "Play carousel",
+              children: playing ? "\u275A\u275A" : "\u25B6"
+            }
+          ) : null,
+          showDots && count > 1 ? /* @__PURE__ */ jsx("div", { className: "ansh-carousel__dots", children: items.map((_, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-carousel__dot",
+              "aria-label": `Go to slide ${i + 1}`,
+              "aria-current": i === active ? "true" : void 0,
+              onClick: () => goTo(i)
+            },
+            i
+          )) }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
 var ICONS = {
   info: /* @__PURE__ */ jsxs(
     "svg",
@@ -951,6 +1467,6 @@ function Callout({ label, tone = "info", icon, className, children }) {
 }
 var VERSION = "0.1.0";
 
-export { Alert, AnimatedGradient, AuroraBackground, Banner, BentoGrid, BentoItem, Button, Callout, Constellation, Dock, FAQAccordion, Fireflies, GlowCard, IconButton, LiquidBlob, LoadingDots, MeshGradient, MeteorShower, NoiseLayer, NumberTicker, ParticleField, PricingTable, Rain, ShinyText, Skeleton, Snow, Spinner, Spotlight, SpotlightCard, TiltCard3D, ToastProvider, Typewriter, VERSION, Waves, createEffectComponent, useToast };
+export { Alert, AnimatedGradient, AuroraBackground, Banner, BeforeAfter, BentoGrid, BentoItem, Button, Callout, CardStack, Carousel, Constellation, DeviceMockup, Dock, FAQAccordion, Fireflies, FloatingGeometry, GlowCard, IconButton, LightRays, LiquidBlob, LoadingDots, MeshGradient, MeteorShower, NoiseLayer, NumberTicker, Orbit, ParticleField, PowderExplosion, PricingTable, Rain, ScrambleText, ShinyText, Skeleton, Smoke, Snow, Spinner, Spotlight, SpotlightCard, StrangeAttractor, Swarm, TextRotate, TiltCard3D, ToastProvider, Typewriter, VERSION, Waves, createEffectComponent, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map