@ansh-ui/react 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/{chunk-RHTLNSVW.cjs → chunk-3SWO2M33.cjs} +7 -7
  2. package/dist/chunk-3SWO2M33.cjs.map +1 -0
  3. package/dist/{chunk-HO2YSF5O.js → chunk-742E5FQS.js} +3 -3
  4. package/dist/chunk-742E5FQS.js.map +1 -0
  5. package/dist/{chunk-EGG4CP7C.js → chunk-BQJ6H3HC.js} +3 -2
  6. package/dist/chunk-BQJ6H3HC.js.map +1 -0
  7. package/dist/{chunk-LDCZQP3R.js → chunk-CWYBOVCZ.js} +3 -3
  8. package/dist/{chunk-LDCZQP3R.js.map → chunk-CWYBOVCZ.js.map} +1 -1
  9. package/dist/{chunk-AVPEA5PB.cjs → chunk-IZ6T7LO3.cjs} +4 -4
  10. package/dist/{chunk-AVPEA5PB.cjs.map → chunk-IZ6T7LO3.cjs.map} +1 -1
  11. package/dist/{chunk-C32LKF23.cjs → chunk-KTLTYHAT.cjs} +3 -3
  12. package/dist/chunk-KTLTYHAT.cjs.map +1 -0
  13. package/dist/{chunk-IBXLC5IE.js → chunk-P5MRISBP.js} +19 -3
  14. package/dist/chunk-P5MRISBP.js.map +1 -0
  15. package/dist/{chunk-WGYNCSTP.cjs → chunk-PUW6BTPQ.cjs} +3 -2
  16. package/dist/chunk-PUW6BTPQ.cjs.map +1 -0
  17. package/dist/{chunk-T4AK2KLM.js → chunk-PVDQPVYF.js} +3 -3
  18. package/dist/{chunk-T4AK2KLM.js.map → chunk-PVDQPVYF.js.map} +1 -1
  19. package/dist/{chunk-6VRF7X5C.cjs → chunk-TEPQGFR4.cjs} +19 -2
  20. package/dist/chunk-TEPQGFR4.cjs.map +1 -0
  21. package/dist/{chunk-QO3E7TJS.js → chunk-WNWGYXJY.js} +4 -4
  22. package/dist/chunk-WNWGYXJY.js.map +1 -0
  23. package/dist/{chunk-C5JG6TMM.cjs → chunk-YACOHFYJ.cjs} +27 -27
  24. package/dist/{chunk-C5JG6TMM.cjs.map → chunk-YACOHFYJ.cjs.map} +1 -1
  25. package/dist/data.d.cts +2 -1
  26. package/dist/data.d.ts +2 -1
  27. package/dist/form.cjs +37 -37
  28. package/dist/form.d.cts +2 -1
  29. package/dist/form.d.ts +2 -1
  30. package/dist/form.js +2 -2
  31. package/dist/index.cjs +641 -110
  32. package/dist/index.cjs.map +1 -1
  33. package/dist/index.d.cts +220 -7
  34. package/dist/index.d.ts +220 -7
  35. package/dist/index.js +526 -11
  36. package/dist/index.js.map +1 -1
  37. package/dist/layout.cjs +13 -13
  38. package/dist/layout.d.cts +11 -2
  39. package/dist/layout.d.ts +11 -2
  40. package/dist/layout.js +1 -1
  41. package/dist/{motion-CQmCq6_k.d.ts → motion-DoT_sTl1.d.ts} +3 -2
  42. package/dist/{motion-CSX4g2N8.d.cts → motion-DsQPOsTT.d.cts} +3 -2
  43. package/dist/motion.cjs +19 -19
  44. package/dist/motion.d.cts +2 -2
  45. package/dist/motion.d.ts +2 -2
  46. package/dist/motion.js +2 -2
  47. package/dist/navigation.d.cts +3 -2
  48. package/dist/navigation.d.ts +3 -2
  49. package/dist/overlay.cjs +16 -16
  50. package/dist/overlay.d.cts +3 -2
  51. package/dist/overlay.d.ts +3 -2
  52. package/dist/overlay.js +2 -2
  53. package/dist/{position-DVScKcaa.d.cts → position-CW6cGpSF.d.cts} +2 -1
  54. package/dist/{position-DVScKcaa.d.ts → position-CW6cGpSF.d.ts} +2 -1
  55. package/dist/primitives.cjs +25 -21
  56. package/dist/primitives.d.cts +5 -4
  57. package/dist/primitives.d.ts +5 -4
  58. package/dist/primitives.js +2 -2
  59. package/dist/{sidebar-D-PafAXw.d.cts → sidebar-Dyt67t2z.d.cts} +2 -1
  60. package/dist/{sidebar-D-PafAXw.d.ts → sidebar-Dyt67t2z.d.ts} +2 -1
  61. package/dist/styles.css +464 -0
  62. package/dist/{use-observers-B9qtimrk.d.cts → use-observers-DvA7hSz4.d.cts} +10 -1
  63. package/dist/{use-observers-B9qtimrk.d.ts → use-observers-DvA7hSz4.d.ts} +10 -1
  64. package/package.json +3 -3
  65. package/dist/chunk-6VRF7X5C.cjs.map +0 -1
  66. package/dist/chunk-C32LKF23.cjs.map +0 -1
  67. package/dist/chunk-EGG4CP7C.js.map +0 -1
  68. package/dist/chunk-HO2YSF5O.js.map +0 -1
  69. package/dist/chunk-IBXLC5IE.js.map +0 -1
  70. package/dist/chunk-QO3E7TJS.js.map +0 -1
  71. package/dist/chunk-RHTLNSVW.cjs.map +0 -1
  72. package/dist/chunk-WGYNCSTP.cjs.map +0 -1
package/dist/index.js CHANGED
@@ -1,24 +1,25 @@
1
1
  'use client';
2
2
  export { useAnimate, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, useSpringValue } from './chunk-O2PX54KX.js';
3
- export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-EGG4CP7C.js';
4
- 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';
5
- export { AlertDialog, CommandPalette, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider, useCommandShortcut } from './chunk-LDCZQP3R.js';
6
- export { Presence, Slot, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus } from './chunk-HO2YSF5O.js';
3
+ export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-BQJ6H3HC.js';
4
+ 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-WNWGYXJY.js';
5
+ export { AlertDialog, CommandPalette, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider, useCommandShortcut } from './chunk-CWYBOVCZ.js';
6
+ export { Presence, Slot, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus } from './chunk-742E5FQS.js';
7
7
  export { Portal, computePosition, useAnchoredPosition, useDismiss, useScrollLock } from './chunk-XEP6P7E6.js';
8
8
  export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline } from './chunk-HPGCILO4.js';
9
9
  export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs } from './chunk-OLTS6G5M.js';
10
10
  export { AppShell, Sidebar } from './chunk-5CFQFMP5.js';
11
+ import { useControllableState } from './chunk-LXCIXR5T.js';
11
12
  export { useControllableState } from './chunk-LXCIXR5T.js';
12
- import { useBehaviour } from './chunk-T4AK2KLM.js';
13
- export { AnimatePresence, AnimatedText, Draggable, GradientText, MagneticButton, Marquee, Motion, MotionConfig, Parallax, Ripple, ScrollReveal, ThemeProvider, TiltCard, createBehaviourComponent, themeScript, useBehaviour, useMotionConfig, useTheme } from './chunk-T4AK2KLM.js';
14
- import { useMergedRef, useInView } from './chunk-IBXLC5IE.js';
15
- export { useElementSize, useFrameBudget, useInView, useMergedRef, usePointer, useReducedMotion, useScrollProgress, useTicker, useWindowScroll } from './chunk-IBXLC5IE.js';
13
+ import { useBehaviour } from './chunk-PVDQPVYF.js';
14
+ export { AnimatePresence, AnimatedText, Draggable, GradientText, MagneticButton, Marquee, Motion, MotionConfig, Parallax, Ripple, ScrollReveal, ThemeProvider, TiltCard, createBehaviourComponent, themeScript, useBehaviour, useMotionConfig, useTheme } from './chunk-PVDQPVYF.js';
15
+ import { useMergedRef, useInView } from './chunk-P5MRISBP.js';
16
+ export { useElementSize, useFrameBudget, useInView, useMergedRef, usePointer, useReducedMotion, useScrollProgress, useTicker, useTickerSubscriberCount, useWindowScroll } from './chunk-P5MRISBP.js';
16
17
  import { cx } from './chunk-H34OXXJU.js';
17
18
  export { composeEventHandlers, cx, mergeProps, mergeRefs } from './chunk-H34OXXJU.js';
18
19
  import { forwardRef, useRef, useEffect, createContext, useMemo, useState, useCallback, useContext, useId } from 'react';
19
- import { magnetic, ripple, getTicker, mountEffect, aurora, meshGradient, animatedGradient, particleField, constellation, meteors, rain, snow, fireflies, waves, blob, noiseLayer, spotlight, prefersReducedMotion } from '@ansh-ui/core';
20
+ 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';
20
21
  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';
21
- import { jsx, jsxs } from 'react/jsx-runtime';
22
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
22
23
 
23
24
  var HOST_STYLE = {
24
25
  position: "relative",
@@ -101,6 +102,13 @@ var Waves = createEffectComponent(waves, "Waves");
101
102
  var LiquidBlob = createEffectComponent(blob, "LiquidBlob");
102
103
  var NoiseLayer = createEffectComponent(noiseLayer, "NoiseLayer");
103
104
  var Spotlight = createEffectComponent(spotlight, "Spotlight");
105
+ var LightRays = createEffectComponent(lightRays, "LightRays");
106
+ var Smoke = createEffectComponent(smoke, "Smoke");
107
+ var PowderExplosion = createEffectComponent(powderExplosion, "PowderExplosion");
108
+ var FloatingGeometry = createEffectComponent(floatingGeometry, "FloatingGeometry");
109
+ var Orbit = createEffectComponent(orbit, "Orbit");
110
+ var StrangeAttractor = createEffectComponent(strangeAttractor, "StrangeAttractor");
111
+ var Swarm = createEffectComponent(swarm, "Swarm");
104
112
  var Button = forwardRef(function Button2({
105
113
  variant = "solid",
106
114
  size = "md",
@@ -805,6 +813,513 @@ function FAQAccordion({
805
813
  ] }, item.question);
806
814
  }) });
807
815
  }
816
+ var VISUALLY_HIDDEN = {
817
+ position: "absolute",
818
+ width: 1,
819
+ height: 1,
820
+ padding: 0,
821
+ margin: -1,
822
+ overflow: "hidden",
823
+ clip: "rect(0 0 0 0)",
824
+ whiteSpace: "nowrap",
825
+ border: 0
826
+ };
827
+ function ScrambleText({ children, as, className, style, ...options }) {
828
+ const Tag = as ?? "span";
829
+ const ref = useRef(null);
830
+ const {
831
+ chars,
832
+ duration,
833
+ stagger: stagger2,
834
+ cycleSpeed,
835
+ trigger,
836
+ repeat,
837
+ threshold,
838
+ seed,
839
+ intensity,
840
+ reducedMotion,
841
+ disabled
842
+ } = options;
843
+ useEffect(() => {
844
+ const node = ref.current;
845
+ if (!node) return;
846
+ const handle = mountBehaviour(textScramble, node, {
847
+ chars,
848
+ duration,
849
+ stagger: stagger2,
850
+ cycleSpeed,
851
+ trigger,
852
+ repeat,
853
+ threshold,
854
+ seed,
855
+ intensity,
856
+ reducedMotion,
857
+ disabled
858
+ });
859
+ return () => handle.destroy();
860
+ }, [
861
+ children,
862
+ chars,
863
+ duration,
864
+ stagger2,
865
+ cycleSpeed,
866
+ trigger,
867
+ repeat,
868
+ threshold,
869
+ seed,
870
+ intensity,
871
+ reducedMotion,
872
+ disabled
873
+ ]);
874
+ return /* @__PURE__ */ jsxs(Tag, { className, style, children: [
875
+ /* @__PURE__ */ jsx("span", { style: VISUALLY_HIDDEN, children }),
876
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ref, children })
877
+ ] });
878
+ }
879
+ function TextRotate({
880
+ words,
881
+ interval = 2.2,
882
+ animation = "slide",
883
+ className,
884
+ style
885
+ }) {
886
+ const [index, setIndex] = useState(0);
887
+ const reduced = useRef(false);
888
+ const [ready, setReady] = useState(false);
889
+ useEffect(() => {
890
+ reduced.current = prefersReducedMotion();
891
+ setReady(true);
892
+ }, []);
893
+ const safeWords = words.length > 0 ? words : [""];
894
+ const count = safeWords.length;
895
+ useEffect(() => {
896
+ if (!ready || reduced.current) return;
897
+ if (count < 2) return;
898
+ const ms = Math.max(200, interval * 1e3);
899
+ const timer = window.setInterval(() => {
900
+ setIndex((previous) => (previous + 1) % count);
901
+ }, ms);
902
+ return () => window.clearInterval(timer);
903
+ }, [ready, interval, count]);
904
+ const current = safeWords[index % count];
905
+ return /* @__PURE__ */ jsxs(
906
+ "span",
907
+ {
908
+ className: ["ansh-rotate", className].filter(Boolean).join(" "),
909
+ style,
910
+ "data-animation": animation,
911
+ children: [
912
+ /* @__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}`)) }),
913
+ /* @__PURE__ */ jsx("span", { className: "ansh-rotate__clip", children: /* @__PURE__ */ jsx("span", { className: "ansh-rotate__word", children: current }, index) })
914
+ ]
915
+ }
916
+ );
917
+ }
918
+ function BeforeAfter({
919
+ before,
920
+ after,
921
+ value,
922
+ defaultValue = 50,
923
+ onValueChange,
924
+ step = 4,
925
+ label = "Comparison position",
926
+ className,
927
+ style
928
+ }) {
929
+ const [position, setPosition] = useControllableState({
930
+ value,
931
+ defaultValue,
932
+ onChange: onValueChange
933
+ });
934
+ const rootRef = useRef(null);
935
+ const [dragging, setDragging] = useState(false);
936
+ const positionFromClientX = useCallback((clientX) => {
937
+ const node = rootRef.current;
938
+ if (!node) return 50;
939
+ const rect = node.getBoundingClientRect();
940
+ if (rect.width <= 0) return 50;
941
+ return clamp((clientX - rect.left) / rect.width * 100, 0, 100);
942
+ }, []);
943
+ const onPointerDown = (event) => {
944
+ event.currentTarget.setPointerCapture(event.pointerId);
945
+ setDragging(true);
946
+ setPosition(positionFromClientX(event.clientX));
947
+ };
948
+ const onPointerMove = (event) => {
949
+ if (!dragging) return;
950
+ setPosition(positionFromClientX(event.clientX));
951
+ };
952
+ const endDrag = (event) => {
953
+ if (event.currentTarget.hasPointerCapture(event.pointerId)) {
954
+ event.currentTarget.releasePointerCapture(event.pointerId);
955
+ }
956
+ setDragging(false);
957
+ };
958
+ const onKeyDown = (event) => {
959
+ 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;
960
+ if (jump === 0) return;
961
+ event.preventDefault();
962
+ setPosition((current) => clamp(current + jump, 0, 100));
963
+ };
964
+ const clipped = clamp(position, 0, 100);
965
+ return /* @__PURE__ */ jsxs(
966
+ "div",
967
+ {
968
+ ref: rootRef,
969
+ className: ["ansh-compare", className].filter(Boolean).join(" "),
970
+ style,
971
+ "data-dragging": dragging || void 0,
972
+ onPointerDown: (event) => {
973
+ if (event.target === event.currentTarget || !dragging) {
974
+ setPosition(positionFromClientX(event.clientX));
975
+ }
976
+ },
977
+ children: [
978
+ /* @__PURE__ */ jsx("div", { className: "ansh-compare__layer", children: after }),
979
+ /* @__PURE__ */ jsx(
980
+ "div",
981
+ {
982
+ className: "ansh-compare__layer ansh-compare__layer--before",
983
+ style: { clipPath: `inset(0 ${100 - clipped}% 0 0)` },
984
+ children: before
985
+ }
986
+ ),
987
+ /* @__PURE__ */ jsx(
988
+ "div",
989
+ {
990
+ className: "ansh-compare__handle",
991
+ style: { left: `${clipped}%` },
992
+ role: "slider",
993
+ tabIndex: 0,
994
+ "aria-label": label,
995
+ "aria-valuemin": 0,
996
+ "aria-valuemax": 100,
997
+ "aria-valuenow": Math.round(clipped),
998
+ "aria-orientation": "horizontal",
999
+ onPointerDown,
1000
+ onPointerMove,
1001
+ onPointerUp: endDrag,
1002
+ onPointerCancel: endDrag,
1003
+ onKeyDown,
1004
+ children: /* @__PURE__ */ jsx("span", { className: "ansh-compare__grip", "aria-hidden": "true" })
1005
+ }
1006
+ )
1007
+ ]
1008
+ }
1009
+ );
1010
+ }
1011
+ function DeviceMockup({
1012
+ variant = "browser",
1013
+ url,
1014
+ title,
1015
+ label,
1016
+ className,
1017
+ style,
1018
+ children
1019
+ }) {
1020
+ return /* @__PURE__ */ jsxs(
1021
+ "div",
1022
+ {
1023
+ className: ["ansh-mock", `ansh-mock--${variant}`, className].filter(Boolean).join(" "),
1024
+ style,
1025
+ role: label ? "group" : void 0,
1026
+ "aria-label": label,
1027
+ children: [
1028
+ variant === "phone" ? /* @__PURE__ */ jsx("span", { className: "ansh-mock__notch", "aria-hidden": "true" }) : /* @__PURE__ */ jsxs("div", { className: "ansh-mock__chrome", "aria-hidden": "true", children: [
1029
+ /* @__PURE__ */ jsxs("span", { className: "ansh-mock__dots", children: [
1030
+ /* @__PURE__ */ jsx("i", {}),
1031
+ /* @__PURE__ */ jsx("i", {}),
1032
+ /* @__PURE__ */ jsx("i", {})
1033
+ ] }),
1034
+ variant === "browser" && url ? /* @__PURE__ */ jsx("span", { className: "ansh-mock__url", children: url }) : title ? /* @__PURE__ */ jsx("span", { className: "ansh-mock__title", children: title }) : null
1035
+ ] }),
1036
+ /* @__PURE__ */ jsx("div", { className: "ansh-mock__screen", children })
1037
+ ]
1038
+ }
1039
+ );
1040
+ }
1041
+ var OFFSET_Y = 14;
1042
+ var SCALE_STEP = 0.05;
1043
+ var ROTATE_STEP = 1.6;
1044
+ function CardStack({
1045
+ items,
1046
+ autoPlay = true,
1047
+ interval = 3.5,
1048
+ peek = 2,
1049
+ controls = true,
1050
+ label = "Card stack",
1051
+ className,
1052
+ style
1053
+ }) {
1054
+ const [top, setTop] = useState(0);
1055
+ const [paused, setPaused] = useState(false);
1056
+ const reduced = useRef(false);
1057
+ const [ready, setReady] = useState(false);
1058
+ useEffect(() => {
1059
+ reduced.current = prefersReducedMotion();
1060
+ setReady(true);
1061
+ }, []);
1062
+ const count = items.length;
1063
+ useEffect(() => {
1064
+ if (!ready || reduced.current || !autoPlay || paused) return;
1065
+ if (count < 2) return;
1066
+ const ms = Math.max(600, interval * 1e3);
1067
+ const timer = window.setInterval(() => setTop((current2) => (current2 + 1) % count), ms);
1068
+ return () => window.clearInterval(timer);
1069
+ }, [ready, autoPlay, paused, interval, count]);
1070
+ if (count === 0) return null;
1071
+ const current = top % count;
1072
+ const advance = (direction) => setTop((previous) => (previous + direction + count) % count);
1073
+ return /* @__PURE__ */ jsxs(
1074
+ "div",
1075
+ {
1076
+ className: ["ansh-stack", className].filter(Boolean).join(" "),
1077
+ style,
1078
+ role: "group",
1079
+ "aria-label": label,
1080
+ "aria-roledescription": "card stack",
1081
+ onPointerEnter: () => setPaused(true),
1082
+ onPointerLeave: () => setPaused(false),
1083
+ onFocusCapture: () => setPaused(true),
1084
+ onBlurCapture: () => setPaused(false),
1085
+ children: [
1086
+ /* @__PURE__ */ jsx("div", { className: "ansh-stack__deck", children: items.map((item, i) => {
1087
+ const rung = (i - current + count) % count;
1088
+ const hidden = rung > peek;
1089
+ return /* @__PURE__ */ jsx(
1090
+ "div",
1091
+ {
1092
+ className: "ansh-stack__card",
1093
+ "data-rung": rung,
1094
+ "aria-hidden": rung === 0 ? void 0 : "true",
1095
+ inert: rung === 0 ? void 0 : true,
1096
+ style: {
1097
+ transform: `translateY(${rung * OFFSET_Y}px) scale(${1 - rung * SCALE_STEP}) rotate(${rung === 0 ? 0 : (rung % 2 === 0 ? 1 : -1) * ROTATE_STEP}deg)`,
1098
+ opacity: hidden ? 0 : 1,
1099
+ zIndex: count - rung,
1100
+ pointerEvents: rung === 0 ? void 0 : "none"
1101
+ },
1102
+ children: item
1103
+ },
1104
+ i
1105
+ );
1106
+ }) }),
1107
+ controls && count > 1 ? /* @__PURE__ */ jsxs("div", { className: "ansh-stack__controls", children: [
1108
+ /* @__PURE__ */ jsx(
1109
+ "button",
1110
+ {
1111
+ type: "button",
1112
+ className: "ansh-stack__button",
1113
+ onClick: () => advance(-1),
1114
+ "aria-label": "Previous card",
1115
+ children: "\u2039"
1116
+ }
1117
+ ),
1118
+ /* @__PURE__ */ jsxs("span", { className: "ansh-stack__count", "aria-hidden": "true", children: [
1119
+ current + 1,
1120
+ " / ",
1121
+ count
1122
+ ] }),
1123
+ /* @__PURE__ */ jsx(
1124
+ "button",
1125
+ {
1126
+ type: "button",
1127
+ className: "ansh-stack__button",
1128
+ onClick: () => advance(1),
1129
+ "aria-label": "Next card",
1130
+ children: "\u203A"
1131
+ }
1132
+ )
1133
+ ] }) : null
1134
+ ]
1135
+ }
1136
+ );
1137
+ }
1138
+ function Carousel({
1139
+ items,
1140
+ value,
1141
+ defaultValue = 0,
1142
+ onChange,
1143
+ loop = true,
1144
+ autoPlay = false,
1145
+ interval = 5,
1146
+ showDots = true,
1147
+ showArrows = true,
1148
+ draggable = true,
1149
+ label,
1150
+ className,
1151
+ style
1152
+ }) {
1153
+ const count = items.length;
1154
+ const [index, setIndex] = useControllableState({
1155
+ value,
1156
+ defaultValue: clamp(defaultValue, 0, Math.max(0, count - 1)),
1157
+ onChange
1158
+ });
1159
+ const [paused, setPaused] = useState(false);
1160
+ const [playing, setPlaying] = useState(autoPlay);
1161
+ const [drag, setDrag] = useState(0);
1162
+ const baseId = useId();
1163
+ const viewportRef = useRef(null);
1164
+ const dragStart = useRef(null);
1165
+ const active = count > 0 ? clamp(index, 0, count - 1) : 0;
1166
+ const goTo = (next) => {
1167
+ if (count === 0) return;
1168
+ const wrapped = loop ? (next + count) % count : clamp(next, 0, count - 1);
1169
+ setIndex(wrapped);
1170
+ };
1171
+ useEffect(() => {
1172
+ if (!playing || paused || count < 2) return;
1173
+ const ms = Math.max(1e3, interval * 1e3);
1174
+ const timer = window.setInterval(() => {
1175
+ setIndex((previous) => {
1176
+ const next = previous + 1;
1177
+ return loop ? next % count : Math.min(next, count - 1);
1178
+ });
1179
+ }, ms);
1180
+ return () => window.clearInterval(timer);
1181
+ }, [playing, paused, interval, count, loop, setIndex]);
1182
+ if (count === 0) return null;
1183
+ const atStart = !loop && active === 0;
1184
+ const atEnd = !loop && active === count - 1;
1185
+ const onKeyDown = (event) => {
1186
+ if (event.key === "ArrowLeft") {
1187
+ event.preventDefault();
1188
+ goTo(active - 1);
1189
+ } else if (event.key === "ArrowRight") {
1190
+ event.preventDefault();
1191
+ goTo(active + 1);
1192
+ } else if (event.key === "Home") {
1193
+ event.preventDefault();
1194
+ goTo(0);
1195
+ } else if (event.key === "End") {
1196
+ event.preventDefault();
1197
+ goTo(count - 1);
1198
+ }
1199
+ };
1200
+ const onPointerDown = (event) => {
1201
+ if (!draggable || count < 2) return;
1202
+ dragStart.current = event.clientX;
1203
+ event.currentTarget.setPointerCapture(event.pointerId);
1204
+ };
1205
+ const onPointerMove = (event) => {
1206
+ if (dragStart.current === null) return;
1207
+ setDrag(event.clientX - dragStart.current);
1208
+ };
1209
+ const endDrag = (event) => {
1210
+ if (dragStart.current === null) return;
1211
+ if (event.currentTarget.hasPointerCapture(event.pointerId)) {
1212
+ event.currentTarget.releasePointerCapture(event.pointerId);
1213
+ }
1214
+ const width = viewportRef.current?.clientWidth ?? 1;
1215
+ const travelled = drag;
1216
+ dragStart.current = null;
1217
+ setDrag(0);
1218
+ if (Math.abs(travelled) > width * 0.25) goTo(active + (travelled < 0 ? 1 : -1));
1219
+ };
1220
+ const dragPercent = drag !== 0 ? drag / (viewportRef.current?.clientWidth || 1) * 100 : 0;
1221
+ return /* @__PURE__ */ jsxs(
1222
+ "section",
1223
+ {
1224
+ className: cx("ansh-carousel", className),
1225
+ style,
1226
+ "aria-roledescription": "carousel",
1227
+ "aria-label": label,
1228
+ onKeyDown,
1229
+ onPointerEnter: () => setPaused(true),
1230
+ onPointerLeave: () => setPaused(false),
1231
+ onFocusCapture: () => setPaused(true),
1232
+ onBlurCapture: () => setPaused(false),
1233
+ children: [
1234
+ /* @__PURE__ */ jsx(
1235
+ "div",
1236
+ {
1237
+ className: "ansh-carousel__viewport",
1238
+ ref: viewportRef,
1239
+ "aria-live": playing ? "off" : "polite",
1240
+ onPointerDown,
1241
+ onPointerMove,
1242
+ onPointerUp: endDrag,
1243
+ onPointerCancel: endDrag,
1244
+ "data-dragging": dragStart.current !== null || void 0,
1245
+ children: /* @__PURE__ */ jsx(
1246
+ "div",
1247
+ {
1248
+ className: "ansh-carousel__track",
1249
+ style: {
1250
+ transform: `translate3d(${-active * 100 + dragPercent}%, 0, 0)`,
1251
+ // Suppress the transition mid-drag so the track tracks the finger exactly.
1252
+ transition: dragStart.current !== null ? "none" : void 0
1253
+ },
1254
+ children: items.map((item, i) => /* @__PURE__ */ jsx(
1255
+ "div",
1256
+ {
1257
+ className: "ansh-carousel__slide",
1258
+ id: `${baseId}-slide-${i}`,
1259
+ role: "group",
1260
+ "aria-roledescription": "slide",
1261
+ "aria-label": `${i + 1} of ${count}`,
1262
+ "aria-hidden": i === active ? void 0 : "true",
1263
+ inert: i === active ? void 0 : true,
1264
+ children: item
1265
+ },
1266
+ i
1267
+ ))
1268
+ }
1269
+ )
1270
+ }
1271
+ ),
1272
+ showArrows && count > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
1273
+ /* @__PURE__ */ jsx(
1274
+ "button",
1275
+ {
1276
+ type: "button",
1277
+ className: "ansh-carousel__arrow ansh-carousel__arrow--prev",
1278
+ onClick: () => goTo(active - 1),
1279
+ disabled: atStart,
1280
+ "aria-label": "Previous slide",
1281
+ children: "\u2039"
1282
+ }
1283
+ ),
1284
+ /* @__PURE__ */ jsx(
1285
+ "button",
1286
+ {
1287
+ type: "button",
1288
+ className: "ansh-carousel__arrow ansh-carousel__arrow--next",
1289
+ onClick: () => goTo(active + 1),
1290
+ disabled: atEnd,
1291
+ "aria-label": "Next slide",
1292
+ children: "\u203A"
1293
+ }
1294
+ )
1295
+ ] }) : null,
1296
+ showDots && count > 1 || autoPlay ? /* @__PURE__ */ jsxs("div", { className: "ansh-carousel__controls", children: [
1297
+ autoPlay ? /* @__PURE__ */ jsx(
1298
+ "button",
1299
+ {
1300
+ type: "button",
1301
+ className: "ansh-carousel__pause",
1302
+ onClick: () => setPlaying((on) => !on),
1303
+ "aria-label": playing ? "Pause carousel" : "Play carousel",
1304
+ children: playing ? "\u275A\u275A" : "\u25B6"
1305
+ }
1306
+ ) : null,
1307
+ showDots && count > 1 ? /* @__PURE__ */ jsx("div", { className: "ansh-carousel__dots", children: items.map((_, i) => /* @__PURE__ */ jsx(
1308
+ "button",
1309
+ {
1310
+ type: "button",
1311
+ className: "ansh-carousel__dot",
1312
+ "aria-label": `Go to slide ${i + 1}`,
1313
+ "aria-current": i === active ? "true" : void 0,
1314
+ onClick: () => goTo(i)
1315
+ },
1316
+ i
1317
+ )) }) : null
1318
+ ] }) : null
1319
+ ]
1320
+ }
1321
+ );
1322
+ }
808
1323
  var ICONS = {
809
1324
  info: /* @__PURE__ */ jsxs(
810
1325
  "svg",
@@ -951,6 +1466,6 @@ function Callout({ label, tone = "info", icon, className, children }) {
951
1466
  }
952
1467
  var VERSION = "0.1.0";
953
1468
 
954
- 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 };
1469
+ 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 };
955
1470
  //# sourceMappingURL=index.js.map
956
1471
  //# sourceMappingURL=index.js.map