@zayne-labs/ui-react 0.11.1 → 0.11.3

package/dist/esm/ui/carousel/index.d.ts

@@ -1,6 +1,6 @@
 import { PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
 import { UnionDiscriminator } from "@zayne-labs/toolkit-type-helpers";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { StoreApi } from "@zayne-labs/toolkit-core";
 
 //#region src/components/ui/carousel/types.d.ts
@@ -78,14 +78,14 @@ type OtherCarouselProps = {
 };
 //#endregion
 //#region src/components/ui/carousel/carousel.d.ts
-declare function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>): react_jsx_runtime0.JSX.Element;
-declare function CarouselButton(props: CarouselButtonsProps): react_jsx_runtime0.JSX.Element;
-declare function CarouselControls(props: CarouselControlProps): react_jsx_runtime0.JSX.Element;
-declare function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime0.JSX.Element;
-declare function CarouselItem(props: OtherCarouselProps): react_jsx_runtime0.JSX.Element;
-declare function CarouselCaption<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, OtherCarouselProps>): react_jsx_runtime0.JSX.Element;
-declare function CarouselIndicatorList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime0.JSX.Element;
-declare function CarouselIndicator(props: CarouselIndicatorProps): react_jsx_runtime0.JSX.Element;
+declare function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselButton(props: CarouselButtonsProps): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselControls(props: CarouselControlProps): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselItem(props: OtherCarouselProps): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselCaption<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, OtherCarouselProps>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselIndicatorList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselIndicator(props: CarouselIndicatorProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace carousel_parts_d_exports {
   export { CarouselButton as Button, CarouselCaption as Caption, CarouselControls as Controls, CarouselIndicator as Indicator, CarouselIndicatorList as IndicatorList, CarouselItem as Item, CarouselItemList as ItemList, CarouselRoot as Root };
 }

package/dist/esm/ui/carousel/index.js

@@ -1,13 +1,13 @@
 "use client";
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
-import { t as cnMerge } from "../../cn-CIbU5eI0.js";
 import { n as For } from "../../for-DGTMIS0w.js";
-import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-mvRnLPj8.js";
+import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-BzfAw7y3.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 { useAnimationInterval, useCallbackRef, useStore } from "@zayne-labs/toolkit-react";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/carousel/carousel-store-context.ts
 const [CarouselStoreContextProvider, useCarouselStoreContext] = createReactStoreContext({

package/dist/esm/ui/drag-scroll/index.d.ts

@@ -1,9 +1,10 @@
 import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
-import * as _zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
+import * as _$_zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
 import { SelectorFn } from "@zayne-labs/toolkit-type-helpers";
-import * as react from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as _zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$_zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
+
 //#region src/components/ui/drag-scroll/drag-scroll-context.d.ts
 declare const DragScrollStoreContextProvider: (props: {
     children: React.ReactNode;
@@ -28,9 +29,9 @@ declare const DragScrollStoreContextProvider: (props: {
           shouldReplace: true;
         }) | undefined): void;
       };
-      subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
+      subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
     };
-  }) => react.FunctionComponentElement<react.ProviderProps<{
+  }) => _$react.FunctionComponentElement<_$react.ProviderProps<{
     getInitialState: () => DragScrollStore;
     getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
     getState: () => DragScrollStore;
@@ -51,8 +52,8 @@ declare const DragScrollStoreContextProvider: (props: {
         shouldReplace: true;
       }) | undefined): void;
     };
-    subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
-  }>>, useDragScrollStoreContext: <TResult = DragScrollStore>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DragScrollStore, TResult> | undefined) => TResult;
+    subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
+  }>>, useDragScrollStoreContext: <TResult = DragScrollStore>(selector?: _$_zayne_labs_toolkit_type_helpers0.SelectorFn<DragScrollStore, TResult> | undefined) => TResult;
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll-store.d.ts
 type RequiredUseDragScrollProps = { [Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined };
@@ -78,7 +79,7 @@ declare const createDragScrollStore: (initStoreValues: InitStoreValues) => {
       shouldReplace: true;
     }) | undefined): void;
   };
-  subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
+  subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
 };
 //#endregion
 //#region src/components/ui/drag-scroll/types.d.ts
@@ -90,14 +91,14 @@ type SharedInputProps = {
   unstyled?: boolean;
 };
 type PartProps<TContainerElement extends HTMLElement = HTMLElement> = {
-  container: {
-    input: PartProps<TContainerElement>["container"]["output"] & SharedInputProps;
-    output: RecordForDataAttr & InferProps<TContainerElement>;
-  };
   item: {
     input: PartProps<TContainerElement>["item"]["output"] & SharedInputProps;
     output: InferProps<HTMLElement> & RecordForDataAttr;
   };
+  list: {
+    input: PartProps<TContainerElement>["list"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<TContainerElement>;
+  };
   nextButton: {
     input: PartProps<TContainerElement>["nextButton"]["output"] & SharedInputProps;
     output: RecordForDataAttr & InferProps<"button">;
@@ -128,7 +129,7 @@ type DragScrollActions = {
     handleMouseUpOrLeave: () => void;
     handleScroll: () => void;
     initializeResizeObserver: () => (() => void) | undefined;
-    setContainerRef: (element: HTMLElement | null) => void;
+    setListRef: (element: HTMLElement | null) => void;
     updateScrollState: () => void;
   };
 };
@@ -165,13 +166,21 @@ type UseDragScrollProps = {
   usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
 };
 type UseDragScrollResult<TContainerElement extends HTMLElement> = Pick<UseDragScrollProps, "disableInternalStateSubscription"> & {
-  containerRef: React.RefObject<TContainerElement | null>;
+  listRef: React.RefObject<TContainerElement | null>;
   propGetters: DragScrollPropGetters<TContainerElement>;
   storeApi: ReturnType<typeof createDragScrollStore>;
   useDragScrollStore: typeof useDragScrollStoreContext;
 };
 //#endregion
+//#region src/lib/utils/type-helpers.d.ts
+type FromCamelToKebabCase<TString extends string> = TString extends `${infer First}${infer Rest}` ? First extends Uppercase<First> ? `-${Lowercase<First>}${FromCamelToKebabCase<Rest>}` : `${First}${FromCamelToKebabCase<Rest>}` : "";
+//#endregion
 //#region src/components/ui/drag-scroll/use-drag-scroll.d.ts
+declare const getDragScrollScopeAttrs: (part: FromCamelToKebabCase<keyof PartProps>) => {
+  readonly "data-slot": "drag-scroll-item" | "drag-scroll-list" | "drag-scroll-root" | "drag-scroll-next-button" | "drag-scroll-prev-button";
+  readonly "data-scope": "drag-scroll";
+  readonly "data-part": FromCamelToKebabCase<keyof PartProps>;
+};
 declare const useDragScroll: <TContainerElement extends HTMLElement = HTMLElement>(props?: UseDragScrollProps) => UseDragScrollResult<TContainerElement>;
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll.d.ts
@@ -179,31 +188,31 @@ type DragScrollRootProps = UseDragScrollProps & {
   asChild?: boolean;
   children: React.ReactNode;
 } & PartInputProps["root"];
-declare function DragScrollRoot<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DragScrollRootProps>): react_jsx_runtime0.JSX.Element;
+declare function DragScrollRoot(props: DragScrollRootProps): _$react_jsx_runtime0.JSX.Element;
 type DragScrollContextProps<TSlice> = {
   children: React.ReactNode | ((context: TSlice) => React.ReactNode);
   selector?: SelectorFn<DragScrollStore, TSlice>;
 };
-declare function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>): react.ReactNode;
-type DragScrollContainerProps = {
+declare function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>): _$react.ReactNode;
+type DragScrollListProps = {
   asChild?: boolean;
-} & PartInputProps["container"];
-declare function DragScrollContainer<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DragScrollContainerProps>): react_jsx_runtime0.JSX.Element;
+} & PartInputProps["list"];
+declare function DragScrollList<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DragScrollListProps>): _$react_jsx_runtime0.JSX.Element;
 type DragScrollItemProps = {
   asChild?: boolean;
 } & PartInputProps["item"];
-declare function DragScrollItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DragScrollItemProps>): react_jsx_runtime0.JSX.Element;
+declare function DragScrollItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DragScrollItemProps>): _$react_jsx_runtime0.JSX.Element;
 type DragScrollPrevProps = {
   asChild?: boolean;
 } & PartInputProps["prevButton"];
-declare function DragScrollPrev(props: DragScrollPrevProps): react_jsx_runtime0.JSX.Element;
+declare function DragScrollPrev(props: DragScrollPrevProps): _$react_jsx_runtime0.JSX.Element;
 type DragScrollNextProps = {
   asChild?: boolean;
 } & PartInputProps["nextButton"];
-declare function DragScrollNext(props: DragScrollNextProps): react_jsx_runtime0.JSX.Element;
+declare function DragScrollNext(props: DragScrollNextProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace drag_scroll_parts_d_exports {
-  export { DragScrollContainer as Container, DragScrollContext as Context, DragScrollItem as Item, DragScrollNext as Next, DragScrollPrev as Prev, DragScrollRoot as Root };
+  export { DragScrollContext as Context, DragScrollItem as Item, DragScrollList as List, DragScrollNext as Next, DragScrollPrev as Prev, DragScrollRoot as Root };
 }
 //#endregion
-export { drag_scroll_parts_d_exports as DragScroll, DragScrollContainer, DragScrollContainerProps, DragScrollContext, DragScrollContextProps, DragScrollItem, DragScrollItemProps, DragScrollNext, DragScrollNextProps, DragScrollPrev, DragScrollPrevProps, DragScrollRoot, DragScrollRootProps, type DragScrollStore, type UseDragScrollProps, type UseDragScrollResult, useDragScroll, useDragScrollStoreContext };
+export { drag_scroll_parts_d_exports as DragScroll, DragScrollContext, DragScrollContextProps, DragScrollItem, DragScrollItemProps, DragScrollList, DragScrollListProps, DragScrollNext, DragScrollNextProps, DragScrollPrev, DragScrollPrevProps, DragScrollRoot, DragScrollRootProps, type DragScrollStore, type UseDragScrollProps, type UseDragScrollResult, getDragScrollScopeAttrs, useDragScroll, useDragScrollStoreContext };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/ui/drag-scroll/index.js

@@ -1,13 +1,13 @@
 "use client";
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
-import { n as SlotRoot } from "../../slot-CHR5Li4r.js";
-import { t as cnMerge } from "../../cn-CIbU5eI0.js";
+import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
+import { t as cnMerge } from "../../cn-jNZfGhrk.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
 import { isFunction, isNumber } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useEffect, useMemo, useRef } from "react";
+import { createCustomContext, useCallbackRef, useCompareSelector, useStore } from "@zayne-labs/toolkit-react";
 import { jsx } from "react/jsx-runtime";
 import { checkIsDeviceMobile, createStore, dataAttr, on, throttleByFrame } from "@zayne-labs/toolkit-core";
-import { createCustomContext, useCallbackRef, useCompareSelector, useStore } from "@zayne-labs/toolkit-react";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/drag-scroll/utils.ts
 const updateCursor = (element) => {
@@ -33,7 +33,7 @@ const handleScrollSnap = (dragContainer) => {
 //#region src/components/ui/drag-scroll/drag-scroll-store.ts
 const createDragScrollStore = (initStoreValues) => {
 	const { orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = initStoreValues;
-	const containerRef = { current: null };
+	const listRef = { current: null };
 	const positionRef = { current: {
 		left: 0,
 		top: 0,
@@ -62,22 +62,22 @@ const createDragScrollStore = (initStoreValues) => {
 				abortControllerRef.current.mouseLeave.abort();
 			},
 			goToNext: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				const { canGoToNext } = get();
 				if (!canGoToNext) return;
-				const amount = getScrollAmount(containerRef.current);
-				containerRef.current.scrollBy({
+				const amount = getScrollAmount(listRef.current);
+				listRef.current.scrollBy({
 					behavior: "smooth",
 					left: orientation === "vertical" ? 0 : amount,
 					top: orientation === "vertical" || orientation === "both" ? amount : 0
 				});
 			},
 			goToPrev: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				const { canGoToPrev } = get();
 				if (!canGoToPrev) return;
-				const amount = getScrollAmount(containerRef.current);
-				containerRef.current.scrollBy({
+				const amount = getScrollAmount(listRef.current);
+				listRef.current.scrollBy({
 					behavior: "smooth",
 					left: orientation === "vertical" ? 0 : -amount,
 					top: orientation === "vertical" || orientation === "both" ? -amount : 0
@@ -86,7 +86,7 @@ const createDragScrollStore = (initStoreValues) => {
 			handleMouseDown: (event) => {
 				if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
 				if (usage === "desktopOnly" && window.innerWidth < 768) return;
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				abortControllerRef.current = {
 					mouseLeave: new AbortController(),
 					mouseMove: new AbortController(),
@@ -94,37 +94,37 @@ const createDragScrollStore = (initStoreValues) => {
 				};
 				if (orientation === "horizontal" || orientation === "both") {
 					positionRef.current.x = event.clientX;
-					positionRef.current.left = containerRef.current.scrollLeft;
+					positionRef.current.left = listRef.current.scrollLeft;
 				}
 				if (orientation === "vertical" || orientation === "both") {
 					positionRef.current.y = event.clientY;
-					positionRef.current.top = containerRef.current.scrollTop;
+					positionRef.current.top = listRef.current.scrollTop;
 				}
-				updateCursor(containerRef.current);
+				updateCursor(listRef.current);
 				set({ isDragging: true });
 				const { actions } = get();
-				on(containerRef.current, "mousemove", actions.handleMouseMove, { signal: abortControllerRef.current.mouseMove.signal });
-				on(containerRef.current, "mouseup", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseUp.signal });
-				on(containerRef.current, "mouseleave", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseLeave.signal });
+				on(listRef.current, "mousemove", actions.handleMouseMove, { signal: abortControllerRef.current.mouseMove.signal });
+				on(listRef.current, "mouseup", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseUp.signal });
+				on(listRef.current, "mouseleave", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseLeave.signal });
 				on(document, "mouseup", actions.handleMouseUpOrLeave, {
 					once: true,
 					signal: abortControllerRef.current.mouseUp.signal
 				});
 			},
 			handleMouseMove: (event) => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				if (orientation === "horizontal" || orientation === "both") {
 					const dx = event.clientX - positionRef.current.x;
-					containerRef.current.scrollLeft = positionRef.current.left - dx;
+					listRef.current.scrollLeft = positionRef.current.left - dx;
 				}
 				if (orientation === "vertical" || orientation === "both") {
 					const dy = event.clientY - positionRef.current.y;
-					containerRef.current.scrollTop = positionRef.current.top - dy;
+					listRef.current.scrollTop = positionRef.current.top - dy;
 				}
 			},
 			handleMouseUpOrLeave: () => {
-				if (!containerRef.current) return;
-				resetCursor(containerRef.current);
+				if (!listRef.current) return;
+				resetCursor(listRef.current);
 				set({ isDragging: false });
 				const { actions } = get();
 				actions.cleanupDragListeners();
@@ -134,34 +134,34 @@ const createDragScrollStore = (initStoreValues) => {
 				actions.updateScrollState();
 			}),
 			initializeResizeObserver: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				const { actions } = get();
 				const resizeObserver = new ResizeObserver(() => actions.updateScrollState());
-				resizeObserver.observe(containerRef.current);
-				for (const child of containerRef.current.children) resizeObserver.observe(child);
+				resizeObserver.observe(listRef.current);
+				for (const child of listRef.current.children) resizeObserver.observe(child);
 				const cleanup = () => {
 					resizeObserver.disconnect();
 				};
 				return cleanup;
 			},
-			setContainerRef: (element) => {
-				containerRef.current = element;
+			setListRef: (element) => {
+				listRef.current = element;
 				if (!element) return;
 				handleScrollSnap(element);
 				const { actions } = get();
 				actions.updateScrollState();
 			},
 			updateScrollState: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				if (orientation === "horizontal" || orientation === "both") {
-					const { clientWidth, scrollLeft, scrollWidth } = containerRef.current;
+					const { clientWidth, scrollLeft, scrollWidth } = listRef.current;
 					set({
 						canGoToNext: Math.ceil(scrollLeft + clientWidth) < scrollWidth,
 						canGoToPrev: Math.floor(scrollLeft) > 0
 					});
 				}
 				if (orientation === "vertical") {
-					const { clientHeight, scrollHeight, scrollTop } = containerRef.current;
+					const { clientHeight, scrollHeight, scrollTop } = listRef.current;
 					set({
 						canGoToNext: Math.ceil(scrollTop + clientHeight) < scrollHeight,
 						canGoToPrev: Math.floor(scrollTop) > 0
@@ -173,14 +173,16 @@ const createDragScrollStore = (initStoreValues) => {
 };
 //#endregion
 //#region src/components/ui/drag-scroll/use-drag-scroll.ts
-const getScopeAttrs = (part) => ({
-	"data-part": part,
-	"data-scope": "drag-scroll",
-	"data-slot": `drag-scroll-${part}`
-});
+const getDragScrollScopeAttrs = (part) => {
+	return {
+		"data-slot": `drag-scroll-${part}`,
+		"data-scope": "drag-scroll",
+		"data-part": part
+	};
+};
 const useDragScroll = (props) => {
 	const { disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = props ?? {};
-	const containerRef = useRef(null);
+	const listRef = useRef(null);
 	const storeApi = useMemo(() => {
 		return createDragScrollStore({
 			orientation,
@@ -200,8 +202,8 @@ const useDragScroll = (props) => {
 	const canGoToNext = useDragScrollStore((state) => !disableInternalStateSubscription ? state.canGoToNext : null);
 	const isDragging = useDragScrollStore((state) => !disableInternalStateSubscription ? state.isDragging : null);
 	const refCallback = useCallbackRef((node) => {
-		containerRef.current = node;
-		actions.setContainerRef(node);
+		listRef.current = node;
+		actions.setListRef(node);
 		if (!node) return;
 		const cleanupMouseDown = on(node, "mousedown", actions.handleMouseDown);
 		const cleanupScroll = on(node, "scroll", actions.handleScroll, { passive: true });
@@ -215,14 +217,14 @@ const useDragScroll = (props) => {
 	}, [actions]);
 	const getRootProps = useCallbackRef((innerProps) => {
 		return {
-			...getScopeAttrs("root"),
+			...getDragScrollScopeAttrs("root"),
 			...innerProps,
 			className: cnMerge("relative", innerProps?.className)
 		};
 	});
-	const getContainerProps = useCallback((innerProps) => {
+	const getListProps = useCallback((innerProps) => {
 		return {
-			...getScopeAttrs("container"),
+			...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),
@@ -237,7 +239,7 @@ const useDragScroll = (props) => {
 	]);
 	const getItemProps = useCallbackRef((innerProps) => {
 		return {
-			...getScopeAttrs("item"),
+			...getDragScrollScopeAttrs("item"),
 			...innerProps,
 			className: cnMerge("snap-center snap-always", innerProps?.className)
 		};
@@ -245,7 +247,7 @@ const useDragScroll = (props) => {
 	const getPrevButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToPrev;
 		return {
-			...getScopeAttrs("prev-button"),
+			...getDragScrollScopeAttrs("prev-button"),
 			type: "button",
 			...innerProps,
 			"aria-disabled": dataAttr(isDisabled),
@@ -258,7 +260,7 @@ const useDragScroll = (props) => {
 	const getNextButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToNext;
 		return {
-			...getScopeAttrs("next-button"),
+			...getDragScrollScopeAttrs("next-button"),
 			type: "button",
 			...innerProps,
 			"aria-disabled": dataAttr(isDisabled),
@@ -269,22 +271,22 @@ const useDragScroll = (props) => {
 		};
 	}, [actions.goToNext, canGoToNext]);
 	const propGetters = useMemo(() => ({
-		getContainerProps,
 		getItemProps,
+		getListProps,
 		getNextButtonProps,
 		getPrevButtonProps,
 		getRootProps
 	}), [
 		getPrevButtonProps,
-		getContainerProps,
+		getListProps,
 		getItemProps,
 		getNextButtonProps,
 		getRootProps
 	]);
 	const stableUseDragScrollStore = useCallbackRef(useDragScrollStore);
 	return useMemo(() => ({
-		containerRef,
 		disableInternalStateSubscription,
+		listRef,
 		propGetters,
 		storeApi,
 		useDragScrollStore: stableUseDragScrollStore
@@ -310,21 +312,21 @@ const [DragScrollRootContextProvider, useDragScrollRootContext] = createCustomCo
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll.tsx
 function DragScrollRoot(props) {
-	const { as: Element = "div", asChild, children, ...restOfProps } = props;
-	const { containerRef, disableInternalStateSubscription, propGetters, storeApi } = useDragScroll(restOfProps);
+	const { asChild, children, ...restOfProps } = props;
+	const { disableInternalStateSubscription, listRef, propGetters, storeApi } = useDragScroll(restOfProps);
 	return /* @__PURE__ */ jsx(DragScrollStoreContextProvider, {
 		store: storeApi,
 		children: /* @__PURE__ */ jsx(DragScrollRootContextProvider, {
 			value: useMemo(() => ({
-				containerRef,
 				disableInternalStateSubscription,
+				listRef,
 				propGetters
 			}), [
-				containerRef,
+				listRef,
 				disableInternalStateSubscription,
 				propGetters
 			]),
-			children: /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, {
+			children: /* @__PURE__ */ jsx(asChild ? SlotRoot : "div", {
 				...propGetters.getRootProps(restOfProps),
 				children
 			})
@@ -336,10 +338,10 @@ function DragScrollContext(props) {
 	const dragScrollCtx = useDragScrollStoreContext(useCompareSelector(selector));
 	return isFunction(children) ? children(dragScrollCtx) : children;
 }
-function DragScrollContainer(props) {
+function DragScrollList(props) {
 	const { as: Element = "ul", asChild, ...restOfProps } = props;
 	const { propGetters } = useDragScrollRootContext();
-	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getContainerProps(restOfProps) });
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getListProps(restOfProps) });
 }
 function DragScrollItem(props) {
 	const { as: Element = "li", asChild, ...restOfProps } = props;
@@ -359,14 +361,14 @@ function DragScrollNext(props) {
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll-parts.ts
 var drag_scroll_parts_exports = /* @__PURE__ */ __exportAll({
-	Container: () => DragScrollContainer,
 	Context: () => DragScrollContext,
 	Item: () => DragScrollItem,
+	List: () => DragScrollList,
 	Next: () => DragScrollNext,
 	Prev: () => DragScrollPrev,
 	Root: () => DragScrollRoot
 });
 //#endregion
-export { drag_scroll_parts_exports as DragScroll, DragScrollContainer, DragScrollContext, DragScrollItem, DragScrollNext, DragScrollPrev, DragScrollRoot, useDragScroll, useDragScrollStoreContext };
+export { drag_scroll_parts_exports as DragScroll, DragScrollContext, DragScrollItem, DragScrollList, DragScrollNext, DragScrollPrev, DragScrollRoot, getDragScrollScopeAttrs, useDragScroll, useDragScrollStoreContext };
 
 //# sourceMappingURL=index.js.map