@atom-learning/components 6.16.1-beta.1 → 6.17.0-beta.0

package/dist/index.cjs.js

@@ -45,7 +45,8 @@ let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
 let _radix_ui_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 let uid = require("uid");
 let throttle_debounce = require("throttle-debounce");
-let pure_react_carousel = require("pure-react-carousel");
+let embla_carousel_react = require("embla-carousel-react");
+embla_carousel_react = __toESM(embla_carousel_react);
 let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
 _radix_ui_react_checkbox = __toESM(_radix_ui_react_checkbox);
 let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
@@ -687,7 +688,7 @@ var useIsMountedRef = () => {
 };
 //#endregion
 //#region src/components/loader/Loader.tsx
-var Dot = styled("div", {
+var Dot$1 = styled("div", {
 	base: [
 		"animate-pulse",
 		"bg-current",
@@ -706,7 +707,7 @@ var Loader = ({ className, message = "Loading", size = "md", ...props }) => /* @
 	className: cn("flex", "justify-center", className),
 	role: "alert",
 	...props
-}, /* @__PURE__ */ react.createElement("span", { className: "sr-only" }, message), /* @__PURE__ */ react.createElement(Dot, { size }), /* @__PURE__ */ react.createElement(Dot, { size }), /* @__PURE__ */ react.createElement(Dot, { size }));
+}, /* @__PURE__ */ react.createElement("span", { className: "sr-only" }, message), /* @__PURE__ */ react.createElement(Dot$1, { size }), /* @__PURE__ */ react.createElement(Dot$1, { size }), /* @__PURE__ */ react.createElement(Dot$1, { size }));
 //#endregion
 //#region src/components/button/Button.tsx
 var StyledButton = styled("button", {
@@ -2125,9 +2126,8 @@ var Box = styled("div", { base: [] });
 Box.displayName = "Box";
 //#endregion
 //#region src/components/carousel/CarouselArrows.tsx
-var buttonStyles = [
+var ArrowButton = styled("button", { base: [
 	"items-center",
-	"bg-[unset]",
 	"text-primary-800",
 	"cursor-pointer",
 	"flex",
@@ -2140,55 +2140,168 @@ var buttonStyles = [
 	"ease-in-out",
 	"hover:text-primary-900",
 	"active:text-primary-1000",
-	"disabled:text-grey-200"
-];
-var StyledButtonBack = styled(pure_react_carousel.ButtonBack, { base: buttonStyles });
-var StyledButtonNext = styled(pure_react_carousel.ButtonNext, { base: buttonStyles });
-var CarouselArrowPrevious = (props) => /* @__PURE__ */ react.createElement(StyledButtonBack, props, /* @__PURE__ */ react.createElement(Icon, { is: _atom_learning_icons.ChevronLeft }));
-var CarouselArrowNext = (props) => /* @__PURE__ */ react.createElement(StyledButtonNext, props, /* @__PURE__ */ react.createElement(Icon, { is: _atom_learning_icons.ChevronRight }));
+	"disabled:text-grey-200",
+	"disabled:cursor-not-allowed"
+] });
+var CarouselArrowPrevious = (props) => {
+	const { scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ react.createElement(ArrowButton, {
+		type: "button",
+		onClick: scrollPrev,
+		disabled: !canScrollPrev,
+		"aria-label": "Previous slide",
+		...props
+	}, /* @__PURE__ */ react.createElement(Icon, { is: _atom_learning_icons.ChevronLeft }));
+};
+var CarouselArrowNext = (props) => {
+	const { scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ react.createElement(ArrowButton, {
+		type: "button",
+		onClick: scrollNext,
+		disabled: !canScrollNext,
+		"aria-label": "Next slide",
+		...props
+	}, /* @__PURE__ */ react.createElement(Icon, { is: _atom_learning_icons.ChevronRight }));
+};
 //#endregion
 //#region src/components/carousel/CarouselPagination.tsx
-var CarouselPagination = styled(pure_react_carousel.DotGroup, { base: [
-	"justify-center",
-	"[&_button]:[[class*=selected]]:bg-primary-800",
-	"[&_button]:bg-grey-600",
-	"[&_button]:border-none",
-	"[&_button]:cursor-pointer",
-	"[&_button]:duration-100",
-	"[&_button]:ease-in",
-	"[&_button]:focus:bg-primary-900",
-	"[&_button]:hover:bg-primary-900",
-	"[&_button]:mx-1",
-	"[&_button]:p-1",
-	"[&_button]:rounded-[50%]",
-	"[&_button]:size-3",
-	"[&_button]:transition-all"
+var Dot = styled("button", { base: [
+	"bg-grey-600",
+	"cursor-pointer",
+	"duration-100",
+	"ease-in",
+	"focus:bg-primary-900",
+	"hover:bg-primary-900",
+	"mx-1",
+	"p-1",
+	"rounded-full",
+	"size-3",
+	"transition-all",
+	"disabled:bg-primary-800",
+	"disabled:cursor-default"
 ] });
+var CarouselPagination = ({ className, ...rest }) => {
+	const { scrollSnaps, selectedIndex, scrollTo } = useCarousel();
+	const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i);
+	return /* @__PURE__ */ react.createElement("div", {
+		className: cn("flex", "justify-center", className),
+		...rest
+	}, dots.map((index) => /* @__PURE__ */ react.createElement(Dot, {
+		key: index,
+		type: "button",
+		onClick: () => scrollTo(index),
+		disabled: index === selectedIndex,
+		"aria-label": "slide dot"
+	})));
+};
 //#endregion
 //#region src/components/carousel/CarouselSlide.tsx
-var CarouselSlide = ({ children, ...remainingProps }) => /* @__PURE__ */ react.createElement(pure_react_carousel.Slide, {
-	...remainingProps,
-	tag: "div"
-}, /* @__PURE__ */ react.createElement("div", { className: "px-3" }, children));
+var CarouselSlide = ({ children, className, index, ...rest }) => {
+	const { selectedIndex } = useCarousel();
+	const isSelected = selectedIndex === index;
+	return /* @__PURE__ */ react.createElement("div", {
+		role: "option",
+		"aria-selected": isSelected,
+		className: cn("basis-full", "shrink-0", className),
+		...rest
+	}, /* @__PURE__ */ react.createElement("div", { className: "grid place-items-center px-3" }, children));
+};
 //#endregion
 //#region src/components/carousel/CarouselSlider.tsx
-var CarouselSlider = ({ children, className, overflow, ...rest }) => /* @__PURE__ */ react.createElement(pure_react_carousel.Slider, {
-	...rest,
-	className: cn(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, overflow && "overflow-visible", className)
-}, children);
+var CarouselSlider = ({ children, className, overflow, tabIndex = 0, ...rest }) => {
+	const { emblaRef } = useCarousel();
+	return /* @__PURE__ */ react.createElement("div", {
+		ref: emblaRef,
+		className: cn("ml-[50%]", "-translate-x-1/2", "cursor-grab", overflow ? "overflow-visible" : "overflow-hidden", className),
+		role: "listbox",
+		"aria-live": "polite",
+		tabIndex,
+		...rest
+	}, /* @__PURE__ */ react.createElement("div", { className: "flex" }, children));
+};
 //#endregion
 //#region src/components/carousel/Carousel.tsx
-var CarouselComponent = ({ children, className, slideHeight, slideWidth, numSlides, ...props }) => /* @__PURE__ */ react.createElement(CSSWrapper, { className }, /* @__PURE__ */ react.createElement(pure_react_carousel.CarouselProvider, {
-	naturalSlideWidth: slideWidth,
-	naturalSlideHeight: slideHeight,
-	totalSlides: numSlides,
-	...props
-}, children));
-/**
-* Documentation about the hook usage
-* https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext
-*/
-var useCarousel = () => react.useContext(pure_react_carousel.CarouselContext);
+var CarouselContext = react.createContext(null);
+var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
+	const [emblaRef, emblaApi] = (0, embla_carousel_react.default)({
+		startIndex: currentSlide,
+		align: "center"
+	});
+	const [selectedIndex, setSelectedIndex] = react.useState(currentSlide);
+	const [scrollSnaps, setScrollSnaps] = react.useState([]);
+	const [canScrollPrev, setCanScrollPrev] = react.useState(false);
+	const [canScrollNext, setCanScrollNext] = react.useState(false);
+	const scrollPrev = react.useCallback(() => {
+		emblaApi?.scrollPrev();
+	}, [emblaApi]);
+	const scrollNext = react.useCallback(() => {
+		emblaApi?.scrollNext();
+	}, [emblaApi]);
+	const scrollTo = react.useCallback((index) => {
+		emblaApi?.scrollTo(index);
+	}, [emblaApi]);
+	const onSelect = react.useCallback(() => {
+		if (!emblaApi) return;
+		setSelectedIndex(emblaApi.selectedScrollSnap());
+		setCanScrollPrev(emblaApi.canScrollPrev());
+		setCanScrollNext(emblaApi.canScrollNext());
+	}, [emblaApi]);
+	const onInit = react.useCallback(() => {
+		if (!emblaApi) return;
+		setScrollSnaps(emblaApi.scrollSnapList());
+	}, [emblaApi]);
+	react.useEffect(() => {
+		if (!emblaApi) return;
+		onInit();
+		onSelect();
+		emblaApi.on("reInit", onInit);
+		emblaApi.on("reInit", onSelect);
+		emblaApi.on("select", onSelect);
+		return () => {
+			emblaApi.off("reInit", onInit);
+			emblaApi.off("reInit", onSelect);
+			emblaApi.off("select", onSelect);
+		};
+	}, [
+		emblaApi,
+		onInit,
+		onSelect
+	]);
+	const contextValue = react.useMemo(() => ({
+		emblaRef,
+		emblaApi,
+		selectedIndex,
+		scrollSnaps,
+		canScrollPrev,
+		canScrollNext,
+		scrollPrev,
+		scrollNext,
+		scrollTo
+	}), [
+		emblaRef,
+		emblaApi,
+		selectedIndex,
+		scrollSnaps,
+		canScrollPrev,
+		canScrollNext,
+		scrollPrev,
+		scrollNext,
+		scrollTo
+	]);
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ react.createElement("div", {
+		className: cn("relative", "w-full", className),
+		...rest
+	}, /* @__PURE__ */ react.createElement(CarouselContext.Provider, { value: contextValue }, children));
+};
+var useCarousel = () => {
+	const context = react.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a Carousel");
+	return {
+		...context,
+		currentSlide: context.selectedIndex
+	};
+};
 var Carousel = Object.assign(CarouselComponent, {
 	ArrowNext: CarouselArrowNext,
 	ArrowPrevious: CarouselArrowPrevious,
@@ -5794,9 +5907,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-95",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-95"
 			],
 			sm: [
 				"rounded-md",
@@ -5805,9 +5916,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-120",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-120"
 			],
 			md: [
 				"rounded-md",
@@ -5816,9 +5925,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-150",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-150"
 			],
 			lg: [
 				"rounded-md",
@@ -5827,9 +5934,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-200",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-200"
 			],
 			xl: [
 				"rounded-md",
@@ -5838,9 +5943,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-275",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-275"
 			],
 			fullscreen: [
 				"rounded-none",
@@ -5849,9 +5952,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-w-screen",
 				"max-h-screen",
 				"supports-svh:h-svh",
-				"supports-svh:max-h-svh",
-				"[&>[data-dialog-close]]:top-safe-offset-4",
-				"[&>[data-dialog-close]]:right-safe-offset-4"
+				"supports-svh:max-h-svh"
 			]
 		},
 		layout: { panel: [
@@ -5874,7 +5975,6 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 	hasTooltip: false,
 	size: "md",
 	theme: "neutral",
-	"data-dialog-close": true,
 	className: "absolute top-4 right-4 size-12"
 }, /* @__PURE__ */ react.createElement(Icon, { is: _atom_learning_icons.Close })), react.Children.map(children, (child) => child?.type !== DialogBackground && child))));
 //#endregion
@@ -6751,7 +6851,7 @@ var NavigationMenuComponent = ({ children, className, ...props }) => {
 	const [activeItem, setActiveItem] = react.default.useState();
 	const [listWidth, setListWidth] = react.default.useState(0);
 	const listRef = react.default.useRef(null);
-	react.default.useEffect(() => {
+	react.default.useLayoutEffect(() => {
 		if (listRef.current) setListWidth(listRef.current.offsetWidth);
 	}, [react.default.Children.toArray(children).length]);
 	react.default.useEffect(() => {
@@ -9302,8 +9402,7 @@ var ToastProviderBase = styled("div", { base: [
 	"z-2147483647",
 	"inset-2",
 	"pointer-events-none",
-	"top-safe-or-2",
-	"sm:top-safe-or-3"
+	"sm:top-3"
 ] });
 var ToastWrapper = styled("div", {
 	base: [
@@ -9698,8 +9797,8 @@ var StyledRoot = styled("header", {
 	variants: {
 		hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
 		size: {
-			md: ["h-safe-offset-16", "pt-safe"],
-			lg: ["h-safe-offset-24", "pt-safe"]
+			md: ["h-16"],
+			lg: ["h-24"]
 		},
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
 		appearance: {