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

package/dist/index.cjs.js

@@ -45,8 +45,7 @@ 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 embla_carousel_react = require("embla-carousel-react");
-embla_carousel_react = __toESM(embla_carousel_react);
+let pure_react_carousel = require("pure-react-carousel");
 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");
@@ -688,7 +687,7 @@ var useIsMountedRef = () => {
 };
 //#endregion
 //#region src/components/loader/Loader.tsx
-var Dot$1 = styled("div", {
+var Dot = styled("div", {
 	base: [
 		"animate-pulse",
 		"bg-current",
@@ -707,7 +706,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$1, { size }), /* @__PURE__ */ react.createElement(Dot$1, { size }), /* @__PURE__ */ react.createElement(Dot$1, { size }));
+}, /* @__PURE__ */ react.createElement("span", { className: "sr-only" }, message), /* @__PURE__ */ react.createElement(Dot, { size }), /* @__PURE__ */ react.createElement(Dot, { size }), /* @__PURE__ */ react.createElement(Dot, { size }));
 //#endregion
 //#region src/components/button/Button.tsx
 var StyledButton = styled("button", {
@@ -2126,8 +2125,9 @@ var Box = styled("div", { base: [] });
 Box.displayName = "Box";
 //#endregion
 //#region src/components/carousel/CarouselArrows.tsx
-var ArrowButton = styled("button", { base: [
+var buttonStyles = [
 	"items-center",
+	"bg-[unset]",
 	"text-primary-800",
 	"cursor-pointer",
 	"flex",
@@ -2140,168 +2140,55 @@ var ArrowButton = styled("button", { base: [
 	"ease-in-out",
 	"hover:text-primary-900",
 	"active:text-primary-1000",
-	"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 }));
-};
+	"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 }));
 //#endregion
 //#region src/components/carousel/CarouselPagination.tsx
-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 = 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 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, 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: "flex items-center justify-center px-3" }, children));
-};
+var CarouselSlide = ({ children, ...remainingProps }) => /* @__PURE__ */ react.createElement(pure_react_carousel.Slide, {
+	...remainingProps,
+	tag: "div"
+}, /* @__PURE__ */ react.createElement("div", { className: "px-3" }, children));
 //#endregion
 //#region src/components/carousel/CarouselSlider.tsx
-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));
-};
+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);
 //#endregion
 //#region src/components/carousel/Carousel.tsx
-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 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 Carousel = Object.assign(CarouselComponent, {
 	ArrowNext: CarouselArrowNext,
 	ArrowPrevious: CarouselArrowPrevious,
@@ -6206,6 +6093,15 @@ var DropdownMenuItem = styled(_radix_ui_react_dropdown_menu.Item, { base: [
 	"hover:underline"
 ] });
 //#endregion
+//#region src/components/dropdown-menu/DropdownMenuLabel.tsx
+var DropdownMenuLabel = ({ className, ...props }) => /* @__PURE__ */ react.createElement(Text, {
+	as: _radix_ui_react_dropdown_menu.Label,
+	size: "sm",
+	className: cn("px-3", "py-2", "text-text-subtle", className),
+	...props
+});
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+//#endregion
 //#region src/components/dropdown-menu/DropdownMenuLinkItem.tsx
 var StyledLink$2 = styled("a", { base: ["no-underline"] });
 var DropdownMenuLinkItem = ({ children, href, ...props }) => /* @__PURE__ */ react.default.createElement(DropdownMenuItem, {
@@ -6230,7 +6126,9 @@ var DropdownMenuTrigger = styled(_radix_ui_react_dropdown_menu.Trigger, { base:
 //#region src/components/dropdown-menu/DropdownMenu.tsx
 var DropdownMenu = Object.assign(_radix_ui_react_dropdown_menu.Root, {
 	Content: DropdownMenuContent,
+	Group: _radix_ui_react_dropdown_menu.Group,
 	Item: DropdownMenuItem,
+	Label: DropdownMenuLabel,
 	LinkItem: DropdownMenuLinkItem,
 	Portal: _radix_ui_react_dropdown_menu.Portal,
 	Separator: DropdownMenuSeparator,