@zayne-labs/ui-react 0.11.3 → 0.11.5

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

@@ -1,13 +1,13 @@
 "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";
 import { useAnimationInterval, useCallbackRef, useStore } from "@zayne-labs/toolkit-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createStore } from "@zayne-labs/toolkit-core";
+import { createStore, dataAttr } from "@zayne-labs/toolkit-core";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/carousel/carousel-store-context.ts
 const [CarouselStoreContextProvider, useCarouselStoreContext] = createReactStoreContext({
@@ -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("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("relative scrollbar-hidden 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,10 +182,10 @@ 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
+		className: cnMerge(`flex size-full transform-[translate3d(var(--translate-distance),0,0)] snap-center
 				transition-transform duration-800`, className),
 		style: { "--translate-distance": `-${currentSlide * 100}%` },
 		children: isFunction(children) ? /* @__PURE__ */ jsx(For, {
@@ -208,22 +199,24 @@ function CarouselItemList(props) {
 	});
 }
 function CarouselItem(props) {
-	const { children, className, ...restOfProps } = props;
+	const { children, className, currentIndex, ...restOfProps } = props;
+	const isActive = useCarouselStoreContext((state) => state.currentSlide) === currentIndex;
 	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),
+		"data-active": dataAttr(isActive),
+		className: cnMerge("relative size-full shrink-0 snap-center overflow-hidden", 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
 	});
@@ -231,11 +224,11 @@ function CarouselCaption(props) {
 function CarouselIndicatorList(props) {
 	const { children, className, each } = props;
 	const images = useCarouselStoreContext((state) => each ?? state.images);
-	return /* @__PURE__ */ jsx("ul", {
+	return /* @__PURE__ */ jsx("div", {
+		"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),
+		className: cnMerge("absolute bottom-6 z-2 flex w-full items-center justify-center gap-4", className),
 		children: isFunction(children) ? /* @__PURE__ */ jsx(For, {
 			each: images,
 			renderItem: (image, index, array) => children({
@@ -247,18 +240,18 @@ function CarouselIndicatorList(props) {
 	});
 }
 function CarouselIndicator(props) {
-	const { classNames, currentIndex } = props;
+	const { className, classNames, currentIndex, ...restOfProps } = props;
 	const { actions: { goToSlide }, currentSlide } = useCarouselStoreContext((state) => state);
-	return /* @__PURE__ */ jsx("li", {
+	const isActive = currentSlide === currentIndex;
+	return /* @__PURE__ */ jsx("button", {
+		"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",
-			onClick: () => goToSlide(currentIndex),
-			className: cnMerge("size-1.5 rounded-[50%]", classNames?.base, currentIndex === currentSlide && ["w-[35px] rounded-[5px]", classNames?.isActive])
-		})
+		"data-active": dataAttr(isActive),
+		type: "button",
+		onClick: () => goToSlide(currentIndex),
+		className: cnMerge("size-1.5 rounded-[50%]", className, classNames?.base, isActive && ["w-9 rounded-[6px]", classNames?.isActive]),
+		...restOfProps
 	});
 }
 //#endregion

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 { dataAttr } from \"@zayne-labs/toolkit-core\";\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\tCarouselItemProps,\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(\"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\"relative scrollbar-hidden 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 size-full 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: CarouselItemProps) {\n\tconst { children, className, currentIndex, ...restOfProps } = props;\n\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\n\tconst isActive = currentSlide === currentIndex;\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\tdata-active={dataAttr(isActive)}\n\t\t\tclassName={cnMerge(\"relative size-full shrink-0 snap-center overflow-hidden\", 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<div\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-6 z-2 flex w-full items-center justify-center gap-4\",\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</div>\n\t);\n}\n\nexport function CarouselIndicator(props: CarouselIndicatorProps) {\n\tconst { className, classNames, currentIndex, ...restOfProps } = props;\n\n\tconst {\n\t\tactions: { goToSlide },\n\t\tcurrentSlide,\n\t} = useCarouselStoreContext((state) => state);\n\n\tconst isActive = currentSlide === currentIndex;\n\n\treturn (\n\t\t<button\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator\"\n\t\t\tdata-active={dataAttr(isActive)}\n\t\t\ttype=\"button\"\n\t\t\tonClick={() => goToSlide(currentIndex)}\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"size-1.5 rounded-[50%]\",\n\t\t\t\tclassName,\n\t\t\t\tclassNames?.base,\n\t\t\t\tisActive && [\"w-9 rounded-[6px]\", classNames?.isActive]\n\t\t\t)}\n\t\t\t{...restOfProps}\n\t\t/>\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.d.ts

@@ -57,7 +57,7 @@ declare const DragScrollStoreContextProvider: (props: {
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll-store.d.ts
 type RequiredUseDragScrollProps = { [Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined };
-type InitStoreValues = Pick<RequiredUseDragScrollProps, "orientation" | "scrollAmount" | "usage">;
+type InitStoreValues = Pick<RequiredUseDragScrollProps, "orientation" | "scrollAmount">;
 declare const createDragScrollStore: (initStoreValues: InitStoreValues) => {
   getInitialState: () => DragScrollStore;
   getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
@@ -156,14 +156,6 @@ type UseDragScrollProps = {
    * @default "item"
    */
   scrollAmount?: "item" | number;
-  /**
-   * Device usage constraints for drag behavior.
-   * - `allScreens`: Drag works on all devices
-   * - `desktopOnly`: Drag works only on desktop (width >= 768px)
-   * - `mobileAndTabletOnly`: Drag works only on mobile/tablet (width < 768px)
-   * @default "allScreens"
-   */
-  usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
 };
 type UseDragScrollResult<TContainerElement extends HTMLElement> = Pick<UseDragScrollProps, "disableInternalStateSubscription"> & {
   listRef: React.RefObject<TContainerElement | null>;

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

@@ -32,7 +32,7 @@ const handleScrollSnap = (dragContainer) => {
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll-store.ts
 const createDragScrollStore = (initStoreValues) => {
-	const { orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = initStoreValues;
+	const { orientation = "horizontal", scrollAmount = "item" } = initStoreValues;
 	const listRef = { current: null };
 	const positionRef = { current: {
 		left: 0,
@@ -84,8 +84,6 @@ const createDragScrollStore = (initStoreValues) => {
 				});
 			},
 			handleMouseDown: (event) => {
-				if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
-				if (usage === "desktopOnly" && window.innerWidth < 768) return;
 				if (!listRef.current) return;
 				abortControllerRef.current = {
 					mouseLeave: new AbortController(),
@@ -181,19 +179,14 @@ const getDragScrollScopeAttrs = (part) => {
 	};
 };
 const useDragScroll = (props) => {
-	const { disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = props ?? {};
+	const { disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item" } = props ?? {};
 	const listRef = useRef(null);
 	const storeApi = useMemo(() => {
 		return createDragScrollStore({
 			orientation,
-			scrollAmount,
-			usage
+			scrollAmount
 		});
-	}, [
-		orientation,
-		scrollAmount,
-		usage
-	]);
+	}, [orientation, scrollAmount]);
 	const actions = storeApi.getState().actions;
 	const useDragScrollStore = (selector) => {
 		return useStore(storeApi, selector);
@@ -217,57 +210,52 @@ 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),
+			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", innerProps?.className),
 			ref: composeRefs(refCallback, innerProps?.ref)
 		};
 	}, [
 		disableInternalStateSubscription,
 		isDragging,
 		orientation,
-		refCallback,
-		usage
+		refCallback
 	]);
 	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,
-			"aria-disabled": dataAttr(isDisabled),
-			"aria-label": innerProps?.["aria-label"] ?? "Scroll back",
+			...getDragScrollScopeAttrs("prev-button"),
 			"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),
-			"aria-label": innerProps?.["aria-label"] ?? "Scroll forward",
+			...getDragScrollScopeAttrs("next-button"),
 			"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\">;\n\nexport const createDragScrollStore = (initStoreValues: InitStoreValues) => {\n\tconst { orientation = \"horizontal\", scrollAmount = \"item\" } = 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 (!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} = props ?? {};\n\n\tconst listRef = useRef<TContainerElement>(null);\n\n\tconst storeApi = useMemo(() => {\n\t\treturn createDragScrollStore({ orientation, scrollAmount });\n\t}, [orientation, scrollAmount]);\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\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]\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\"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\"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