@zayne-labs/ui-react 0.11.3 → 0.11.4

package/dist/{esm → components}/ui/carousel/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
 import { n as For } from "../../for-DGTMIS0w.js";
-import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-BzfAw7y3.js";
+import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-CMxdpPiN.js";
 import { t as cnMerge } from "../../cn-jNZfGhrk.js";
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
 import { useMemo, useState } from "react";
@@ -116,14 +116,17 @@ function CarouselRoot(props) {
 	return /* @__PURE__ */ jsx(CarouselStoreContextProvider, {
 		store: carouselStore,
 		children: /* @__PURE__ */ jsx(Element, {
+			"data-slot": "carousel-root",
 			"data-scope": "carousel",
-			"data-part": "content",
-			"data-slot": "carousel-content",
-			className: cnMerge("relative select-none", classNames?.base),
+			"data-part": "root",
+			className: cnMerge("relative isolate", classNames?.base),
 			onMouseEnter: pauseAutoSlide,
 			onMouseLeave: resumeAutoSlide,
 			children: /* @__PURE__ */ jsx("div", {
-				className: cnMerge("flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", classNames?.scrollContainer),
+				"data-scope": "carousel",
+				"data-part": "content",
+				"data-slot": "carousel-content",
+				className: cnMerge("scrollbar-hidden flex size-full overflow-x-scroll", classNames?.content),
 				children
 			})
 		})
@@ -133,11 +136,11 @@ function CarouselButton(props) {
 	const { classNames, icon, variant } = props;
 	const { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);
 	return /* @__PURE__ */ jsx("button", {
+		"data-slot": `carousel-${variant}-button`,
 		"data-scope": "carousel",
 		"data-part": "button",
-		"data-slot": "carousel-button",
 		type: "button",
-		className: cnMerge("z-30 flex h-full w-fit items-center", variant === "prev" ? "justify-start" : "justify-end", classNames?.base),
+		className: cnMerge("absolute inset-y-0 z-20 flex items-center justify-center", variant === "prev" && "left-0", variant === "next" && "right-0", classNames?.base),
 		onClick: variant === "prev" ? goToPreviousSlide : goToNextSlide,
 		children: /* @__PURE__ */ jsx("span", {
 			className: cnMerge("transition-transform active:scale-[1.06]", classNames?.iconContainer),
@@ -147,43 +150,31 @@ function CarouselButton(props) {
 }
 function CarouselControls(props) {
 	const { classNames, icon } = props;
-	return /* @__PURE__ */ jsx("div", {
-		"data-scope": "carousel",
-		"data-part": "controls",
-		"data-slot": "carousel-controls",
-		className: cnMerge("absolute inset-0 flex justify-between", classNames?.base),
-		children: /* @__PURE__ */ jsxs(ShowRoot, {
-			when: icon?.iconType,
-			children: [/* @__PURE__ */ jsxs(ShowContent, { children: [/* @__PURE__ */ jsx(CarouselButton, {
-				variant: "prev",
-				classNames: {
-					defaultIcon: classNames?.defaultIcon,
-					iconContainer: cnMerge(icon?.iconType === "nextIcon" && "rotate-180", classNames?.iconContainer)
-				},
-				icon: icon?.icon
-			}), /* @__PURE__ */ jsx(CarouselButton, {
-				variant: "next",
-				classNames: {
-					defaultIcon: classNames?.defaultIcon,
-					iconContainer: cnMerge(icon?.iconType === "prevIcon" && "rotate-180", classNames?.iconContainer)
-				},
-				icon: icon?.icon
-			})] }), /* @__PURE__ */ jsxs(ShowFallback, { children: [/* @__PURE__ */ jsx(CarouselButton, {
-				variant: "prev",
-				classNames: {
-					defaultIcon: classNames?.defaultIcon,
-					iconContainer: classNames?.iconContainer
-				},
-				icon: icon?.prev
-			}), /* @__PURE__ */ jsx(CarouselButton, {
-				variant: "next",
-				classNames: {
-					defaultIcon: classNames?.defaultIcon,
-					iconContainer: classNames?.iconContainer
-				},
-				icon: icon?.next
-			})] })]
-		})
+	return /* @__PURE__ */ jsxs(ShowRoot, {
+		when: icon?.iconType,
+		children: [/* @__PURE__ */ jsxs(ShowContent, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+			variant: "prev",
+			classNames: {
+				...classNames,
+				iconContainer: cnMerge(icon?.iconType === "nextIcon" && "rotate-180", classNames?.iconContainer)
+			},
+			icon: icon?.icon
+		}), /* @__PURE__ */ jsx(CarouselButton, {
+			variant: "next",
+			classNames: {
+				...classNames,
+				iconContainer: cnMerge(icon?.iconType === "prevIcon" && "rotate-180", classNames?.iconContainer)
+			},
+			icon: icon?.icon
+		})] }), /* @__PURE__ */ jsxs(ShowFallback, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+			variant: "prev",
+			classNames,
+			icon: icon?.prev
+		}), /* @__PURE__ */ jsx(CarouselButton, {
+			variant: "next",
+			classNames,
+			icon: icon?.next
+		})] })]
 	});
 }
 function CarouselItemList(props) {
@@ -191,9 +182,9 @@ function CarouselItemList(props) {
 	const currentSlide = useCarouselStoreContext((state) => state.currentSlide);
 	const images = useCarouselStoreContext((state) => each ?? state.images);
 	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "carousel-item-list",
 		"data-scope": "carousel",
 		"data-part": "item-list",
-		"data-slot": "carousel-item-list",
 		className: cnMerge(`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center
 				transition-transform duration-800`, className),
 		style: { "--translate-distance": `-${currentSlide * 100}%` },
@@ -210,20 +201,20 @@ function CarouselItemList(props) {
 function CarouselItem(props) {
 	const { children, className, ...restOfProps } = props;
 	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "carousel-item",
 		"data-scope": "carousel",
 		"data-part": "item",
-		"data-slot": "carousel-item",
 		className: cnMerge("flex w-full shrink-0 snap-center justify-center", className),
 		...restOfProps,
 		children
 	});
 }
 function CarouselCaption(props) {
-	const { as: HtmlElement = "div", children, className } = props;
-	return /* @__PURE__ */ jsx(HtmlElement, {
+	const { as: Element = "div", children, className } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-slot": "carousel-caption",
 		"data-scope": "carousel",
 		"data-part": "caption",
-		"data-slot": "carousel-caption",
 		className: cnMerge("absolute z-10", className),
 		children
 	});
@@ -232,9 +223,9 @@ function CarouselIndicatorList(props) {
 	const { children, className, each } = props;
 	const images = useCarouselStoreContext((state) => each ?? state.images);
 	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "carousel-indicator-list",
 		"data-scope": "carousel",
 		"data-part": "indicator-list",
-		"data-slot": "carousel-indicator-list",
 		className: cnMerge("absolute bottom-[25px] z-2 flex w-full items-center justify-center gap-[15px]", className),
 		children: isFunction(children) ? /* @__PURE__ */ jsx(For, {
 			each: images,
@@ -250,9 +241,9 @@ function CarouselIndicator(props) {
 	const { classNames, currentIndex } = props;
 	const { actions: { goToSlide }, currentSlide } = useCarouselStoreContext((state) => state);
 	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "carousel-indicator",
 		"data-scope": "carousel",
 		"data-part": "indicator",
-		"data-slot": "carousel-indicator",
 		className: cnMerge("inline-flex", classNames?.base),
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",

package/dist/components/ui/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Show.Root","Show.Content","Show.Fallback"],"sources":["../../../../src/components/ui/carousel/carousel-store-context.ts","../../../../src/components/ui/carousel/icons.tsx","../../../../src/components/ui/carousel/useCarouselOptions.ts","../../../../src/components/ui/carousel/carousel.tsx","../../../../src/components/ui/carousel/carousel-parts.ts"],"sourcesContent":["import { createStore } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { createReactStoreContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { PrettyOmit } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport type { CarouselRootProps, CarouselStore, ImagesType } from \"./types\";\n\nconst [CarouselStoreContextProvider, useCarouselStoreContext] = createReactStoreContext<CarouselStore>({\n\thookName: \"useCarouselStore\",\n\tname: \"CarouselStoreContext\",\n\tproviderName: \"CarouselRoot\",\n});\n\n// CarouselStore Creation\nconst createCarouselStore = <TImages extends ImagesType>(\n\tstoreValues: PrettyOmit<CarouselRootProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = storeValues;\n\n\tconst carouselStore = createStore<CarouselStore<TImages>>((set, get) => ({\n\t\tcurrentSlide: 0,\n\t\timages,\n\t\tmaxSlide: images.length - 1,\n\n\t\t/* eslint-disable perfectionist/sort-objects -- actions should be last */\n\t\tactions: {\n\t\t\t/* eslint-enable perfectionist/sort-objects -- actions should be last */\n\n\t\t\tgoToNextSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === maxSlide) {\n\t\t\t\t\tgoToSlide(0);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide + 1);\n\t\t\t},\n\n\t\t\tgoToPreviousSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === 0) {\n\t\t\t\t\tgoToSlide(maxSlide);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide - 1);\n\t\t\t},\n\n\t\t\tgoToSlide: (newValue) => {\n\t\t\t\tonSlideBtnClick?.();\n\n\t\t\t\tset({ currentSlide: newValue });\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn carouselStore;\n};\n\nconst useCarousel = <TImages extends ImagesType>(props: Omit<CarouselRootProps<TImages>, \"children\">) => {\n\tconst { images, onSlideBtnClick } = props;\n\n\tconst savedOnSlideBtnClick = useCallbackRef(onSlideBtnClick);\n\n\tconst carouselStore = useMemo(\n\t\t() => createCarouselStore({ images, onSlideBtnClick: savedOnSlideBtnClick }),\n\t\t[images, savedOnSlideBtnClick]\n\t);\n\n\t// eslint-disable-next-line react-x/component-hook-factories -- Ignore\n\tconst useCarouselStore: typeof useCarouselStoreContext = (selector) => {\n\t\t// eslint-disable-next-line react-hooks/hooks -- Ignore\n\t\treturn useStore(carouselStore, selector);\n\t};\n\n\tconst savedUseCarouselStore = useCallbackRef(useCarouselStore);\n\n\treturn useMemo(\n\t\t() => ({ carouselStore, useCarouselStore: savedUseCarouselStore }),\n\t\t[carouselStore, savedUseCarouselStore]\n\t);\n};\n\nexport { CarouselStoreContextProvider, useCarousel, useCarouselStoreContext };\n","export const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n\t\t<g fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\">\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t<path d=\"m14 16l-4-4l4-4\" />\n\t\t</g>\n\t</svg>\n);\n","import { useAnimationInterval, useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport type { CarouselStore } from \"./types\";\n\ntype CarouselOptions = {\n\tactions: CarouselStore[\"actions\"];\n\tautoSlideInterval?: number;\n\thasAutoSlide?: boolean;\n\tshouldPauseOnHover?: boolean;\n};\n\nconst useCarouselOptions = (options: CarouselOptions) => {\n\tconst { actions, autoSlideInterval = 5000, hasAutoSlide = false, shouldPauseOnHover = false } = options;\n\n\tconst [isPaused, setIsPaused] = useState(false);\n\n\tconst shouldAutoSlide = hasAutoSlide && !isPaused;\n\n\tuseAnimationInterval({\n\t\tintervalDuration: shouldAutoSlide ? autoSlideInterval : null,\n\t\tonAnimation: actions.goToNextSlide,\n\t});\n\n\tconst pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));\n\n\tconst resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));\n\n\treturn { pauseAutoSlide, resumeAutoSlide };\n};\n\nexport { useCarouselOptions };\n","\"use client\";\n\nimport type { CssWithCustomProperties, PolymorphicPropsStrict } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { For } from \"@/components/common/for\";\nimport { Show } from \"@/components/common/show\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport {\n\tCarouselStoreContextProvider,\n\tuseCarousel,\n\tuseCarouselStoreContext,\n} from \"./carousel-store-context\";\nimport { ChevronLeftIcon } from \"./icons\";\nimport type {\n\tCarouselButtonsProps,\n\tCarouselControlProps,\n\tCarouselIndicatorProps,\n\tCarouselRootProps,\n\tCarouselWrapperProps,\n\tImagesType,\n\tOtherCarouselProps,\n} from \"./types\";\nimport { useCarouselOptions } from \"./useCarouselOptions\";\n\n// TODO -  Add dragging and swiping support\nexport function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>\n) {\n\tconst {\n\t\tas: Element = \"div\",\n\t\tautoSlideInterval,\n\t\tchildren,\n\t\tclassNames,\n\t\thasAutoSlide,\n\t\timages,\n\t\tonSlideBtnClick,\n\t\tshouldPauseOnHover,\n\t} = props;\n\n\tconst { carouselStore } = useCarousel({ images, onSlideBtnClick });\n\n\tconst actions = carouselStore.getState().actions;\n\n\tconst { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({\n\t\tactions,\n\t\tautoSlideInterval,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t});\n\n\treturn (\n\t\t<CarouselStoreContextProvider store={carouselStore}>\n\t\t\t<Element\n\t\t\t\tdata-slot=\"carousel-root\"\n\t\t\t\tdata-scope=\"carousel\"\n\t\t\t\tdata-part=\"root\"\n\t\t\t\tclassName={cnMerge(\"relative isolate\", classNames?.base)}\n\t\t\t\tonMouseEnter={pauseAutoSlide}\n\t\t\t\tonMouseLeave={resumeAutoSlide}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-scope=\"carousel\"\n\t\t\t\t\tdata-part=\"content\"\n\t\t\t\t\tdata-slot=\"carousel-content\"\n\t\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\t\"scrollbar-hidden flex size-full overflow-x-scroll\",\n\t\t\t\t\t\tclassNames?.content\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</Element>\n\t\t</CarouselStoreContextProvider>\n\t);\n}\n\nexport function CarouselButton(props: CarouselButtonsProps) {\n\tconst { classNames, icon, variant } = props;\n\n\tconst { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);\n\n\treturn (\n\t\t<button\n\t\t\tdata-slot={`carousel-${variant}-button`}\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"button\"\n\t\t\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute inset-y-0 z-20 flex items-center justify-center\",\n\t\t\t\tvariant === \"prev\" && \"left-0\",\n\t\t\t\tvariant === \"next\" && \"right-0\",\n\t\t\t\tclassNames?.base\n\t\t\t)}\n\t\t\tonClick={variant === \"prev\" ? goToPreviousSlide : goToNextSlide}\n\t\t>\n\t\t\t<span className={cnMerge(\"transition-transform active:scale-[1.06]\", classNames?.iconContainer)}>\n\t\t\t\t{icon ?? (\n\t\t\t\t\t<ChevronLeftIcon\n\t\t\t\t\t\tclassName={cnMerge(variant === \"next\" && \"rotate-180\", classNames?.defaultIcon)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\nexport function CarouselControls(props: CarouselControlProps) {\n\tconst { classNames, icon } = props;\n\n\treturn (\n\t\t<Show.Root when={icon?.iconType}>\n\t\t\t<Show.Content>\n\t\t\t\t<CarouselButton\n\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t...classNames,\n\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\ticon?.iconType === \"nextIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t/>\n\n\t\t\t\t<CarouselButton\n\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t...classNames,\n\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\ticon?.iconType === \"prevIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t/>\n\t\t\t</Show.Content>\n\n\t\t\t<Show.Fallback>\n\t\t\t\t<CarouselButton variant=\"prev\" classNames={classNames} icon={icon?.prev} />\n\n\t\t\t\t<CarouselButton variant=\"next\" classNames={classNames} icon={icon?.next} />\n\t\t\t</Show.Fallback>\n\t\t</Show.Root>\n\t);\n}\n\nexport function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>) {\n\tconst { children, className, each } = props;\n\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArray));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-slot=\"carousel-item-list\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center\n\t\t\t\ttransition-transform duration-800`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--translate-distance\": `-${currentSlide * 100}%`,\n\t\t\t\t} satisfies CssWithCustomProperties as CssWithCustomProperties\n\t\t\t}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselItem(props: OtherCarouselProps) {\n\tconst { children, className, ...restOfProps } = props;\n\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item\"\n\t\t\tclassName={cnMerge(\"flex w-full shrink-0 snap-center justify-center\", className)}\n\t\t\t{...restOfProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n\nexport function CarouselCaption<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, OtherCarouselProps>\n) {\n\tconst { as: Element = \"div\", children, className } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-slot=\"carousel-caption\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"caption\"\n\t\t\tclassName={cnMerge(\"absolute z-10\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</Element>\n\t);\n}\n\nexport function CarouselIndicatorList<TArray extends unknown[]>(\n\tprops: CarouselWrapperProps<TArray[number]>\n) {\n\tconst { children, className, each } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArray));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-slot=\"carousel-indicator-list\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute bottom-[25px] z-2 flex w-full items-center justify-center gap-[15px]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselIndicator(props: CarouselIndicatorProps) {\n\tconst { classNames, currentIndex } = props;\n\n\tconst {\n\t\tactions: { goToSlide },\n\t\tcurrentSlide,\n\t} = useCarouselStoreContext((state) => state);\n\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator\"\n\t\t\tclassName={cnMerge(\"inline-flex\", classNames?.base)}\n\t\t>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => goToSlide(currentIndex)}\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"size-1.5 rounded-[50%]\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tcurrentIndex === currentSlide && [\"w-[35px] rounded-[5px]\", classNames?.isActive]\n\t\t\t\t)}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n","export {\n\tCarouselButton as Button,\n\tCarouselCaption as Caption,\n\tCarouselControls as Controls,\n\tCarouselIndicator as Indicator,\n\tCarouselIndicatorList as IndicatorList,\n\tCarouselItem as Item,\n\tCarouselItemList as ItemList,\n\tCarouselRoot as Root,\n} from \"./carousel\";\n"],"mappings":"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"}

package/dist/{esm → components}/ui/drag-scroll/index.js

@@ -217,16 +217,16 @@ const useDragScroll = (props) => {
 	}, [actions]);
 	const getRootProps = useCallbackRef((innerProps) => {
 		return {
-			...getDragScrollScopeAttrs("root"),
 			...innerProps,
+			...getDragScrollScopeAttrs("root"),
 			className: cnMerge("relative", innerProps?.className)
 		};
 	});
 	const getListProps = useCallback((innerProps) => {
 		return {
+			...innerProps,
 			...getDragScrollScopeAttrs("list"),
 			...!disableInternalStateSubscription && { "data-dragging": dataAttr(isDragging) },
-			...innerProps,
 			className: cnMerge(`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`, orientation === "horizontal" && "flex-row", orientation === "vertical" && "flex-col", usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col", usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col", innerProps?.className),
 			ref: composeRefs(refCallback, innerProps?.ref)
 		};
@@ -239,35 +239,34 @@ const useDragScroll = (props) => {
 	]);
 	const getItemProps = useCallbackRef((innerProps) => {
 		return {
-			...getDragScrollScopeAttrs("item"),
 			...innerProps,
+			...getDragScrollScopeAttrs("item"),
 			className: cnMerge("snap-center snap-always", innerProps?.className)
 		};
 	});
 	const getPrevButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToPrev;
 		return {
-			...getDragScrollScopeAttrs("prev-button"),
-			type: "button",
 			...innerProps,
+			...getDragScrollScopeAttrs("prev-button"),
 			"aria-disabled": dataAttr(isDisabled),
 			"aria-label": innerProps?.["aria-label"] ?? "Scroll back",
 			"data-disabled": dataAttr(isDisabled),
 			disabled: isDisabled,
-			onClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick)
+			onClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick),
+			type: "button"
 		};
 	}, [actions.goToPrev, canGoToPrev]);
 	const getNextButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToNext;
 		return {
-			...getDragScrollScopeAttrs("next-button"),
-			type: "button",
 			...innerProps,
-			"aria-disabled": dataAttr(isDisabled),
+			...getDragScrollScopeAttrs("next-button"),
 			"aria-label": innerProps?.["aria-label"] ?? "Scroll forward",
 			"data-disabled": dataAttr(isDisabled),
 			disabled: isDisabled,
-			onClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick)
+			onClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick),
+			type: "button"
 		};
 	}, [actions.goToNext, canGoToNext]);
 	const propGetters = useMemo(() => ({

package/dist/components/ui/drag-scroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Slot.Root"],"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/drag-scroll-store.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts","../../../../src/components/ui/drag-scroll/drag-scroll-context.ts","../../../../src/components/ui/drag-scroll/drag-scroll.tsx","../../../../src/components/ui/drag-scroll/drag-scroll-parts.ts"],"sourcesContent":["import { checkIsDeviceMobile } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { createStore, on, throttleByFrame } from \"@zayne-labs/toolkit-core\";\nimport { isNumber } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { DragScrollStore, UseDragScrollProps } from \"./types\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype RequiredUseDragScrollProps = {\n\t[Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined;\n};\n\ntype InitStoreValues = Pick<RequiredUseDragScrollProps, \"orientation\" | \"scrollAmount\" | \"usage\">;\n\nexport const createDragScrollStore = (initStoreValues: InitStoreValues) => {\n\tconst { orientation = \"horizontal\", scrollAmount = \"item\", usage = \"allScreens\" } = initStoreValues;\n\n\tconst listRef: React.RefObject<HTMLElement | null> = {\n\t\tcurrent: null,\n\t};\n\n\tconst positionRef = {\n\t\tcurrent: {\n\t\t\tleft: 0,\n\t\t\ttop: 0,\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t},\n\t};\n\n\tconst abortControllerRef = {\n\t\tcurrent: {\n\t\t\tmouseLeave: new AbortController(),\n\t\t\tmouseMove: new AbortController(),\n\t\t\tmouseUp: new AbortController(),\n\t\t},\n\t};\n\n\t// == Calculate scroll amount based on orientation and settings\n\tconst getScrollAmount = (container: HTMLElement): number => {\n\t\tif (isNumber(scrollAmount)) {\n\t\t\treturn scrollAmount;\n\t\t}\n\n\t\tconst firstChild = container.children[0] as HTMLElement | undefined;\n\n\t\tif (!firstChild) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn orientation === \"vertical\" || orientation === \"both\" ?\n\t\t\t\tfirstChild.offsetHeight\n\t\t\t:\tfirstChild.offsetWidth;\n\t};\n\n\tconst store = createStore<DragScrollStore>((set, get) => ({\n\t\tcanGoToNext: true,\n\t\tcanGoToPrev: false,\n\t\tisDragging: false,\n\n\t\t// eslint-disable-next-line perfectionist/sort-objects -- actions should be last\n\t\tactions: {\n\t\t\tcleanupDragListeners: () => {\n\t\t\t\tabortControllerRef.current.mouseMove.abort();\n\t\t\t\tabortControllerRef.current.mouseUp.abort();\n\t\t\t\tabortControllerRef.current.mouseLeave.abort();\n\t\t\t},\n\n\t\t\tgoToNext: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tconst { canGoToNext } = get();\n\t\t\t\tif (!canGoToNext) return;\n\n\t\t\t\tconst amount = getScrollAmount(listRef.current);\n\n\t\t\t\tlistRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\tgoToPrev: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tconst { canGoToPrev } = get();\n\t\t\t\tif (!canGoToPrev) return;\n\n\t\t\t\tconst amount = getScrollAmount(listRef.current);\n\n\t\t\t\tlistRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : -amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? -amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseDown: (event) => {\n\t\t\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\t\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\t// == Create fresh AbortControllers for each drag session (they cannot be reused after abort)\n\t\t\t\tabortControllerRef.current = {\n\t\t\t\t\tmouseLeave: new AbortController(),\n\t\t\t\t\tmouseMove: new AbortController(),\n\t\t\t\t\tmouseUp: new AbortController(),\n\t\t\t\t};\n\n\t\t\t\t// == Update all initial position properties\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.current.x = event.clientX;\n\t\t\t\t\tpositionRef.current.left = listRef.current.scrollLeft;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.current.y = event.clientY;\n\t\t\t\t\tpositionRef.current.top = listRef.current.scrollTop;\n\t\t\t\t}\n\n\t\t\t\tupdateCursor(listRef.current);\n\t\t\t\tset({ isDragging: true });\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\ton(listRef.current, \"mousemove\", actions.handleMouseMove, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseMove.signal,\n\t\t\t\t});\n\t\t\t\ton(listRef.current, \"mouseup\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t\ton(listRef.current, \"mouseleave\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseLeave.signal,\n\t\t\t\t});\n\t\t\t\t// == Document-level mouseup fallback for when user releases outside the container\n\t\t\t\ton(document, \"mouseup\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tonce: true,\n\t\t\t\t\tsignal: abortControllerRef.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseMove: (event) => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst dx = event.clientX - positionRef.current.x;\n\t\t\t\t\tlistRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tconst dy = event.clientY - positionRef.current.y;\n\t\t\t\t\tlistRef.current.scrollTop = positionRef.current.top - dy;\n\t\t\t\t}\n\t\t\t},\n\n\t\t\thandleMouseUpOrLeave: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tresetCursor(listRef.current);\n\t\t\t\tset({ isDragging: false });\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.cleanupDragListeners();\n\t\t\t},\n\n\t\t\thandleScroll: throttleByFrame(() => {\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t}),\n\n\t\t\tinitializeResizeObserver: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\t// == Use ResizeObserver to detect when container or children resize\n\t\t\t\tconst resizeObserver = new ResizeObserver(() => actions.updateScrollState());\n\n\t\t\t\tresizeObserver.observe(listRef.current);\n\n\t\t\t\t// == Also observe children for size changes\n\t\t\t\tfor (const child of listRef.current.children) {\n\t\t\t\t\tresizeObserver.observe(child);\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = () => {\n\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t};\n\n\t\t\t\treturn cleanup;\n\t\t\t},\n\n\t\t\tsetListRef: (element) => {\n\t\t\t\tlistRef.current = element as HTMLElement;\n\n\t\t\t\tif (!element) return;\n\n\t\t\t\thandleScrollSnap(element);\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t},\n\n\t\t\tupdateScrollState: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst { clientWidth, scrollLeft, scrollWidth } = listRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollLeft + clientWidth) < scrollWidth,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollLeft) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\") {\n\t\t\t\t\tconst { clientHeight, scrollHeight, scrollTop } = listRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollTop + clientHeight) < scrollHeight,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollTop) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn store;\n};\n","import { dataAttr, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { composeRefs, composeTwoEventHandlers } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport type { FromCamelToKebabCase } from \"@/lib/utils/type-helpers\";\nimport { createDragScrollStore } from \"./drag-scroll-store\";\nimport type { DragScrollPropGetters, PartProps, UseDragScrollProps, UseDragScrollResult } from \"./types\";\n\nexport const getDragScrollScopeAttrs = (part: FromCamelToKebabCase<keyof PartProps>) => {\n\treturn {\n\t\t/* eslint-disable perfectionist/sort-objects -- I need this order to be maintained */\n\t\t\"data-slot\": `drag-scroll-${part}`,\n\t\t\"data-scope\": \"drag-scroll\",\n\t\t\"data-part\": part,\n\t\t/* eslint-enable perfectionist/sort-objects -- I need this order to be maintained */\n\t} as const;\n};\n\nexport const useDragScroll = <TContainerElement extends HTMLElement = HTMLElement>(\n\tprops?: UseDragScrollProps\n): UseDragScrollResult<TContainerElement> => {\n\tconst {\n\t\tdisableInternalStateSubscription = false,\n\t\torientation = \"horizontal\",\n\t\tscrollAmount = \"item\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst listRef = useRef<TContainerElement>(null);\n\n\tconst storeApi = useMemo(() => {\n\t\treturn createDragScrollStore({ orientation, scrollAmount, usage });\n\t}, [orientation, scrollAmount, usage]);\n\n\tconst actions = storeApi.getState().actions;\n\n\t/* eslint-disable react-hooks/hooks -- ignore */\n\t// eslint-disable-next-line react-x/component-hook-factories -- Ignore\n\tconst useDragScrollStore: UseDragScrollResult<TContainerElement>[\"useDragScrollStore\"] = (selector) => {\n\t\treturn useStore(storeApi as never, selector);\n\t};\n\n\tconst canGoToPrev = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToPrev : null\n\t);\n\n\tconst canGoToNext = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToNext : null\n\t);\n\n\tconst isDragging = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.isDragging : null\n\t);\n\t/* eslint-enable react-hooks/hooks -- ignore */\n\n\tconst refCallback: React.RefCallback<TContainerElement> = useCallbackRef((node) => {\n\t\tlistRef.current = node;\n\t\tactions.setListRef(node);\n\n\t\tif (!node) return;\n\n\t\tconst cleanupMouseDown = on(node, \"mousedown\", actions.handleMouseDown);\n\t\tconst cleanupScroll = on(node, \"scroll\", actions.handleScroll, { passive: true });\n\n\t\treturn () => {\n\t\t\tcleanupMouseDown();\n\t\t\tcleanupScroll();\n\t\t};\n\t});\n\n\t// == Update scroll state when children might change (e.g., async loaded content)\n\tuseEffect(() => {\n\t\tconst cleanup = actions.initializeResizeObserver();\n\n\t\treturn cleanup;\n\t}, [actions]);\n\n\tconst getRootProps: DragScrollPropGetters<TContainerElement>[\"getRootProps\"] = useCallbackRef(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"root\"),\n\t\t\t\tclassName: cnMerge(\"relative\", innerProps?.className),\n\t\t\t};\n\t\t}\n\t);\n\n\tconst getListProps: DragScrollPropGetters<TContainerElement>[\"getListProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"list\"),\n\t\t\t\t...(!disableInternalStateSubscription && {\n\t\t\t\t\t\"data-dragging\": dataAttr(isDragging),\n\t\t\t\t}),\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`,\n\t\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\t\tinnerProps?.className\n\t\t\t\t),\n\t\t\t\tref: composeRefs(\n\t\t\t\t\trefCallback,\n\t\t\t\t\t(innerProps as { ref?: React.Ref<TContainerElement> } | undefined)?.ref\n\t\t\t\t),\n\t\t\t} as never;\n\t\t},\n\t\t[disableInternalStateSubscription, isDragging, orientation, refCallback, usage]\n\t);\n\n\tconst getItemProps: DragScrollPropGetters<TContainerElement>[\"getItemProps\"] = useCallbackRef(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"item\"),\n\t\t\t\tclassName: cnMerge(\"snap-center snap-always\", innerProps?.className),\n\t\t\t};\n\t\t}\n\t);\n\n\tconst getPrevButtonProps: DragScrollPropGetters<TContainerElement>[\"getPrevButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToPrev;\n\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"prev-button\"),\n\t\t\t\t\"aria-disabled\": dataAttr(isDisabled),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll back\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick),\n\t\t\t\ttype: \"button\",\n\t\t\t};\n\t\t},\n\t\t[actions.goToPrev, canGoToPrev]\n\t);\n\n\tconst getNextButtonProps: DragScrollPropGetters<TContainerElement>[\"getNextButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToNext;\n\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"next-button\"),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll forward\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick),\n\t\t\t\ttype: \"button\",\n\t\t\t};\n\t\t},\n\t\t[actions.goToNext, canGoToNext]\n\t);\n\n\tconst propGetters = useMemo<DragScrollPropGetters<TContainerElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tgetItemProps,\n\t\t\t\tgetListProps,\n\t\t\t\tgetNextButtonProps,\n\t\t\t\tgetPrevButtonProps,\n\t\t\t\tgetRootProps,\n\t\t\t}) satisfies DragScrollPropGetters<TContainerElement>,\n\t\t[getPrevButtonProps, getListProps, getItemProps, getNextButtonProps, getRootProps]\n\t);\n\n\tconst stableUseDragScrollStore = useCallbackRef(useDragScrollStore);\n\n\tconst result = useMemo<UseDragScrollResult<TContainerElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tdisableInternalStateSubscription,\n\t\t\t\tlistRef,\n\t\t\t\tpropGetters,\n\t\t\t\tstoreApi,\n\t\t\t\tuseDragScrollStore: stableUseDragScrollStore,\n\t\t\t}) satisfies UseDragScrollResult<TContainerElement>,\n\t\t[propGetters, disableInternalStateSubscription, storeApi, stableUseDragScrollStore]\n\t);\n\n\treturn result;\n};\n","import { createCustomContext } from \"@zayne-labs/toolkit-react\";\nimport { createReactStoreContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { DragScrollStore, UseDragScrollResult } from \"./types\";\n\nconst [DragScrollStoreContextProvider, useDragScrollStoreContext] =\n\tcreateReactStoreContext<DragScrollStore>({\n\t\thookName: \"useDragScrollStoreContext\",\n\t\tname: \"DragScrollStoreContext\",\n\t\tproviderName: \"DragScrollRoot\",\n\t});\n\nexport type DragScrollRootContextType<TElement extends HTMLElement = HTMLElement> = Pick<\n\tUseDragScrollResult<TElement>,\n\t\"disableInternalStateSubscription\" | \"listRef\" | \"propGetters\"\n>;\n\nconst [DragScrollRootContextProvider, useDragScrollRootContext] =\n\tcreateCustomContext<DragScrollRootContextType>({\n\t\thookName: \"useDragScrollRootContext\",\n\t\tname: \"DragScrollRootContext\",\n\t\tproviderName: \"DragScrollRoot\",\n\t});\n\nexport {\n\tDragScrollRootContextProvider,\n\tDragScrollStoreContextProvider,\n\tuseDragScrollRootContext,\n\tuseDragScrollStoreContext,\n};\n","\"use client\";\n\nimport { useCompareSelector } from \"@zayne-labs/toolkit-react\";\nimport type { PolymorphicPropsStrict } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction, type SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport { Slot } from \"@/components/common/slot\";\nimport {\n\tDragScrollRootContextProvider,\n\tDragScrollStoreContextProvider,\n\tuseDragScrollRootContext,\n\tuseDragScrollStoreContext,\n\ttype DragScrollRootContextType,\n} from \"./drag-scroll-context\";\nimport type { DragScrollStore, PartInputProps, UseDragScrollProps } from \"./types\";\nimport { useDragScroll } from \"./use-drag-scroll\";\n\n/* eslint-disable perfectionist/sort-intersection-types -- I need non-standard props to come first */\n\nexport type DragScrollRootProps = UseDragScrollProps & {\n\tasChild?: boolean;\n\tchildren: React.ReactNode;\n} & PartInputProps[\"root\"];\n\nexport function DragScrollRoot(props: DragScrollRootProps) {\n\tconst { asChild, children, ...restOfProps } = props;\n\n\tconst { disableInternalStateSubscription, listRef, propGetters, storeApi } = useDragScroll(restOfProps);\n\n\tconst rootContextValue = useMemo<DragScrollRootContextType>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tdisableInternalStateSubscription,\n\t\t\t\tlistRef,\n\t\t\t\tpropGetters,\n\t\t\t}) satisfies DragScrollRootContextType,\n\t\t[listRef, disableInternalStateSubscription, propGetters]\n\t);\n\n\tconst Component = asChild ? Slot.Root : \"div\";\n\n\treturn (\n\t\t<DragScrollStoreContextProvider store={storeApi}>\n\t\t\t<DragScrollRootContextProvider value={rootContextValue}>\n\t\t\t\t<Component {...propGetters.getRootProps(restOfProps)}>{children}</Component>\n\t\t\t</DragScrollRootContextProvider>\n\t\t</DragScrollStoreContextProvider>\n\t);\n}\n\nexport type DragScrollContextProps<TSlice> = {\n\tchildren: React.ReactNode | ((context: TSlice) => React.ReactNode);\n\tselector?: SelectorFn<DragScrollStore, TSlice>;\n};\n\nexport function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>) {\n\tconst { children, selector } = props;\n\n\tconst dragScrollCtx = useDragScrollStoreContext(useCompareSelector(selector));\n\n\tconst resolvedChildren = isFunction(children) ? children(dragScrollCtx) : children;\n\n\treturn resolvedChildren;\n}\n\nexport type DragScrollListProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"list\"];\n\nexport function DragScrollList<TElement extends React.ElementType = \"ul\">(\n\tprops: PolymorphicPropsStrict<TElement, DragScrollListProps>\n) {\n\tconst { as: Element = \"ul\", asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn <Component {...propGetters.getListProps(restOfProps)} />;\n}\n\nexport type DragScrollItemProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"item\"];\n\nexport function DragScrollItem<TElement extends React.ElementType = \"li\">(\n\tprops: PolymorphicPropsStrict<TElement, DragScrollItemProps>\n) {\n\tconst { as: Element = \"li\", asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn <Component {...propGetters.getItemProps(restOfProps)} />;\n}\n\nexport type DragScrollPrevProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"prevButton\"];\n\nexport function DragScrollPrev(props: DragScrollPrevProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : \"button\";\n\n\treturn <Component {...propGetters.getPrevButtonProps(restOfProps)} />;\n}\n\nexport type DragScrollNextProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"nextButton\"];\n\nexport function DragScrollNext(props: DragScrollNextProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : \"button\";\n\n\treturn <Component {...propGetters.getNextButtonProps(restOfProps)} />;\n}\n\n/* eslint-enable perfectionist/sort-intersection-types -- I need non-standard props to come first */\n","export {\n\tDragScrollContext as Context,\n\tDragScrollItem as Item,\n\tDragScrollNext as Next,\n\tDragScrollPrev as Prev,\n\tDragScrollRoot as Root,\n\tDragScrollList as List,\n} from \"./drag-scroll\";\n"],"mappings":"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"}

package/dist/{esm → components}/ui/drop-zone/index.d.ts

@@ -33,17 +33,6 @@ declare const createDropZoneStore: (storeContext: StoreContext) => {
   subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DropZoneStore>;
 };
 //#endregion
-//#region src/components/ui/drop-zone/utils.d.ts
-declare class DropZoneError extends Error {
-  readonly dropZoneErrorSymbol: symbol;
-  file?: FileValidationErrorContextEach["file"];
-  name: "DropZoneError";
-  constructor(ctx: Pick<FileValidationErrorContextEach, "message"> & {
-    file?: FileValidationErrorContextEach["file"];
-  }, errorOptions?: ErrorOptions);
-  static isError(error: unknown): error is DropZoneError;
-}
-//#endregion
 //#region src/components/ui/drop-zone/types.d.ts
 type FileErrorContext = Omit<FileValidationErrorContextEach, "code"> & {
   code: "upload-error" | FileValidationErrorContextEach["code"];
@@ -89,11 +78,11 @@ type SharedInputProps = {
 };
 interface PartProps {
   container: {
-    input: PartProps["container"]["output"] & SharedInputProps;
+    input: SharedInputProps & PartProps["container"]["output"];
     output: RecordForDataAttr & InferProps<HTMLElement>;
   };
   fileItem: {
-    input: PartProps["fileItem"]["output"] & SharedInputProps;
+    input: SharedInputProps & PartProps["fileItem"]["output"];
     output: RecordForDataAttr & InferProps<"li">;
   };
   fileItemClear: {
@@ -128,6 +117,10 @@ interface PartProps {
     input: PartProps["input"]["output"];
     output: RecordForDataAttr & InferProps<"input">;
   };
+  root: {
+    input: SharedInputProps & PartProps["root"]["output"];
+    output: RecordForDataAttr & InferProps<"div">;
+  };
   trigger: {
     input: PartProps["trigger"]["output"];
     output: RecordForDataAttr & InferProps<"button">;
@@ -221,7 +214,7 @@ interface UseDropZoneProps extends FileValidationSettingsAsync, Pick<SharedInput
    */
   onUpload?: (context: Pick<DropZoneState, "fileStateArray"> & {
     onError: (ctx: FileStateOrIDProp & {
-      error: DropZoneError;
+      error: unknown;
     }) => void;
     onProgress: (ctx: FileStateOrIDProp & {
       progress: number;
@@ -300,9 +293,9 @@ type FileItemContextType = {
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone.d.ts
 type DropZoneRootProps = UseDropZoneProps & {
-  children: React.ReactNode;
-};
-declare function DropZoneRoot(props: DropZoneRootProps): _$react_jsx_runtime0.JSX.Element;
+  asChild?: boolean;
+} & PartInputProps["root"];
+declare function DropZoneRoot<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneRootProps>): _$react_jsx_runtime0.JSX.Element;
 type DropZoneContextProps<TSlice> = {
   children: React.ReactNode | ((context: TSlice) => React.ReactNode);
   selector?: SelectorFn<DropZoneStore, TSlice>;
@@ -430,5 +423,16 @@ declare namespace drop_zone_parts_d_exports {
 //#region src/components/ui/drop-zone/use-drop-zone.d.ts
 declare const useDropZone: (props?: UseDropZoneProps) => UseDropZoneResult;
 //#endregion
+//#region src/components/ui/drop-zone/utils.d.ts
+declare class DropZoneError extends Error {
+  readonly dropZoneErrorSymbol: symbol;
+  file?: FileValidationErrorContextEach["file"];
+  name: "DropZoneError";
+  constructor(ctx: Pick<FileValidationErrorContextEach, "message"> & {
+    file?: FileValidationErrorContextEach["file"];
+  }, errorOptions?: ErrorOptions);
+  static isError(error: unknown): error is DropZoneError;
+}
+//#endregion
 export { drop_zone_parts_d_exports as DropZone, type DropZoneActions, DropZoneArea, DropZoneAreaProps, DropZoneContainer, DropZoneContainerProps, DropZoneContext, DropZoneContextProps, DropZoneError, DropZoneFileClear, DropZoneFileClearProps, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemDeleteProps, DropZoneFileItemMetadata, DropZoneFileItemMetadataProps, DropZoneFileItemPreview, DropZoneFileItemPreviewProps, DropZoneFileItemProgress, DropZoneFileItemProgressProps, DropZoneFileItemProps, DropZoneFileList, DropZoneFileListProps, DropZoneInput, DropZoneInputProps, DropZoneRoot, DropZoneRootProps, type DropZoneState, type DropZoneStore, DropZoneTrigger, DropZoneTriggerProps, type FileState, type UseDropZoneProps, type UseDropZoneResult, useDropZone, useDropZoneStoreContext };
 //# sourceMappingURL=index.d.ts.map

package/dist/{esm → components}/ui/drop-zone/index.js

@@ -2,7 +2,7 @@
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
 import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
 import { n as For } from "../../for-DGTMIS0w.js";
-import { t as Presence } from "../../presence-CHd9s3IS.js";
+import { t as Presence } from "../../presence-DkWhm7xu.js";
 import { i as SwitchRoot, r as SwitchMatch } from "../../switch-Dwy5Gzsb.js";
 import { t as cnMerge } from "../../cn-jNZfGhrk.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
@@ -10,7 +10,7 @@ import { isBoolean, isFile, isFunction, isNumber, isObject, isString } from "@za
 import { useCallback, useMemo, useRef } from "react";
 import { createCustomContext, useCallbackRef, useCompareSelector, useCompareValue, useStore, useUnmountEffect } from "@zayne-labs/toolkit-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createFileURL, createStore, dataAttr, formatBytes, generateFileID, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
+import { createFileURL, createStore, dataAttr, formatBytes, generateFileID, handleFileValidationAsync, omitKeys, toArray } from "@zayne-labs/toolkit-core";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/drop-zone/drop-zone-context.ts
 const [DropZoneStoreContextProvider, useDropZoneStoreContext] = createReactStoreContext({
@@ -488,6 +488,13 @@ const useDropZone = (props) => {
 	};
 	const isDraggingOver = useDropZoneStore((state) => !disableInternalStateSubscription ? state.isDraggingOver : null);
 	const isInvalid = useDropZoneStore((state) => !disableInternalStateSubscription ? state.isInvalid : null);
+	const getRootProps = useCallback((innerProps) => {
+		return {
+			...innerProps,
+			...getDropZoneScopeAttrs("root"),
+			"data-disabled": dataAttr(disabled)
+		};
+	}, [disabled]);
 	const getContainerProps = useCallback((innerProps) => {
 		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		const isDisabled = disabled;
@@ -497,15 +504,15 @@ const useDropZone = (props) => {
 		const onAreaClick = !isDisabled && !disableFilePickerOpenOnAreaClick ? actions.openFilePicker : void 0;
 		const onKeyDown = !isDisabled && !disableFilePickerOpenOnAreaClick ? actions.handleKeyDown : void 0;
 		return {
+			...restOfInnerProps,
 			...getDropZoneScopeAttrs("container"),
-			role: "region",
 			...!disableInternalStateSubscription && {
 				"data-drag-over": dataAttr(isDraggingOver),
 				"data-invalid": dataAttr(isInvalid)
 			},
-			...restOfInnerProps,
-			...!unstyled && { className: cnMerge(`relative flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 transition-colors duration-250 ease-out outline-none select-none focus-visible:border-zu-ring/50`, `data-disabled:pointer-events-none data-drag-over:opacity-60 data-invalid:border-zu-destructive data-invalid:ring-zu-destructive/20`, innerProps.className) },
 			"data-disabled": dataAttr(isDisabled),
+			role: "region",
+			...!unstyled && { className: cnMerge(`relative flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 transition-colors duration-250 ease-out outline-none select-none focus-visible:border-zu-ring/50`, `data-disabled:pointer-events-none data-drag-over:opacity-60 data-invalid:border-zu-destructive data-invalid:ring-zu-destructive/20`, innerProps.className) },
 			onClick: composeTwoEventHandlers(onAreaClick, innerProps.onClick),
 			onDragEnter: composeTwoEventHandlers(actions.handleDragEnter, innerProps.onDragEnter),
 			onDragLeave: composeTwoEventHandlers(actions.handleDragLeave, innerProps.onDragLeave),
@@ -538,9 +545,9 @@ const useDropZone = (props) => {
 		const isDisabled = innerProps.disabled ?? disabled;
 		const onFileChange = !isDisabled ? actions.handleChange : void 0;
 		return {
+			...innerProps,
 			...getDropZoneScopeAttrs("input"),
 			...!disableInternalStateSubscription && { "data-drag-over": dataAttr(isDraggingOver) },
-			...innerProps,
 			accept: allowedFileTypes ? allowedFileTypes.join(", ") : innerProps.accept,
 			className: cnMerge("hidden", innerProps.className),
 			"data-disabled": dataAttr(isDisabled),
@@ -562,37 +569,37 @@ const useDropZone = (props) => {
 	const getTriggerProps = useCallback((innerProps) => {
 		const isDisabled = innerProps.disabled ?? disabled;
 		return {
-			...getDropZoneScopeAttrs("trigger"),
-			type: "button",
 			...innerProps,
+			...getDropZoneScopeAttrs("trigger"),
 			"data-disabled": dataAttr(isDisabled),
 			disabled: isDisabled,
-			onClick: composeTwoEventHandlers(actions.openFilePicker, innerProps.onClick)
+			onClick: composeTwoEventHandlers(actions.openFilePicker, innerProps.onClick),
+			type: "button"
 		};
 	}, [actions.openFilePicker, disabled]);
 	const getFileListProps = useCallback((innerProps) => {
 		const { orientation = "vertical", unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
+			...restOfInnerProps,
 			...getDropZoneScopeAttrs("file-list"),
 			"data-orientation": orientation,
-			...restOfInnerProps,
 			...!unstyled && { className: cnMerge("flex flex-col gap-2", orientation === "horizontal" && "flex-row overflow-x-auto p-1.5", innerProps.className) }
 		};
 	}, [globalUnstyled]);
 	const getFileItemProps = useCallback((innerProps) => {
 		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
-			...getDropZoneScopeAttrs("file-item"),
 			...restOfInnerProps,
+			...getDropZoneScopeAttrs("file-item"),
 			...!unstyled && { className: cnMerge("relative flex animate-files-in items-center gap-2.5 rounded-md border p-2", innerProps.className) }
 		};
 	}, [globalUnstyled]);
 	const getFileItemProgressProps = useCallback((innerProps) => {
 		const { unstyled = globalUnstyled, variant = "linear", ...restOfInnerProps } = innerProps;
 		return {
+			...restOfInnerProps,
 			...getDropZoneScopeAttrs("file-item-progress"),
 			role: "progressbar",
-			...restOfInnerProps,
 			...!unstyled && { className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-1/2", variant === "fill" && `absolute inset-0`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className) }
 		};
 	}, [globalUnstyled]);
@@ -601,39 +608,39 @@ const useDropZone = (props) => {
 		const isDisabled = innerProps.disabled ?? disabled;
 		const onRemoveFile = () => fileStateOrID && actions.removeFile({ fileStateOrID });
 		return {
-			...getDropZoneScopeAttrs("file-item-delete"),
-			type: "button",
 			...restOfInnerProps,
+			...getDropZoneScopeAttrs("file-item-delete"),
 			"data-disabled": dataAttr(isDisabled),
 			disabled: isDisabled,
-			onClick: composeTwoEventHandlers(onRemoveFile, restOfInnerProps.onClick)
+			onClick: composeTwoEventHandlers(onRemoveFile, restOfInnerProps.onClick),
+			type: "button"
 		};
 	}, [actions, disabled]);
 	const getFileItemPreviewProps = useCallback((innerProps) => {
 		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
-			...getDropZoneScopeAttrs("file-item-preview"),
 			...restOfInnerProps,
+			...getDropZoneScopeAttrs("file-item-preview"),
 			...!unstyled && { className: cnMerge(`relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-zu-accent/50 [&>svg]:size-10`, innerProps.className) }
 		};
 	}, [globalUnstyled]);
 	const getFileItemMetadataProps = useCallback((innerProps) => {
 		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
-			...getDropZoneScopeAttrs("file-item-metadata"),
 			...restOfInnerProps,
+			...getDropZoneScopeAttrs("file-item-metadata"),
 			...!unstyled && { className: cnMerge("flex min-w-0 grow flex-col", innerProps.className) }
 		};
 	}, [globalUnstyled]);
 	const getFileItemClearProps = useCallback((innerProps) => {
 		const isDisabled = innerProps.disabled ?? disabled;
 		return {
-			...getDropZoneScopeAttrs("file-item-clear"),
-			type: "button",
 			...innerProps,
+			...getDropZoneScopeAttrs("file-item-clear"),
 			"data-disabled": dataAttr(isDisabled),
 			disabled: isDisabled,
-			onClick: composeTwoEventHandlers(actions.clearFiles, innerProps.onClick)
+			onClick: composeTwoEventHandlers(actions.clearFiles, innerProps.onClick),
+			type: "button"
 		};
 	}, [actions.clearFiles, disabled]);
 	const propGetters = useMemo(() => ({
@@ -646,17 +653,19 @@ const useDropZone = (props) => {
 		getFileItemProps,
 		getFileListProps,
 		getInputProps,
+		getRootProps,
 		getTriggerProps
 	}), [
 		getContainerProps,
-		getFileListProps,
 		getFileItemClearProps,
 		getFileItemDeleteProps,
 		getFileItemMetadataProps,
 		getFileItemPreviewProps,
 		getFileItemProgressProps,
 		getFileItemProps,
+		getFileListProps,
 		getInputProps,
+		getRootProps,
 		getTriggerProps
 	]);
 	const stableUseDropZoneStore = useCallbackRef(useDropZoneStore);
@@ -677,8 +686,27 @@ const useDropZone = (props) => {
 };
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone.tsx
+const dropzonePropKeys = [
+	"allowedFileTypes",
+	"disableFilePickerOpenOnAreaClick",
+	"disableInternalStateSubscription",
+	"disablePreviewGenForNonImageFiles",
+	"disabled",
+	"initialFiles",
+	"maxFileCount",
+	"maxFileSize",
+	"multiple",
+	"onFilesChange",
+	"onUpload",
+	"onValidationError",
+	"onValidationSuccess",
+	"rejectDuplicateFiles",
+	"unstyled",
+	"validator"
+];
 function DropZoneRoot(props) {
-	const { children, ...restOfProps } = props;
+	const { as: Element = "div", asChild, children, ...restOfProps } = props;
+	const rootProps = useMemo(() => omitKeys(restOfProps, dropzonePropKeys), [restOfProps]);
 	const { disabled, disableInternalStateSubscription, inputRef, propGetters, storeApi } = useDropZone(restOfProps);
 	return /* @__PURE__ */ jsx(DropZoneStoreContextProvider, {
 		store: storeApi,
@@ -694,7 +722,10 @@ function DropZoneRoot(props) {
 				inputRef,
 				propGetters
 			]),
-			children
+			children: /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, {
+				...propGetters.getRootProps(rootProps),
+				children
+			})
 		})
 	});
 }