@zayne-labs/ui-react 0.10.52 → 0.11.0

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

@@ -1,115 +1,125 @@
-import { InferProps } from "@zayne-labs/toolkit-react/utils";
+import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
 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 "@zayne-labs/toolkit-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;
     store: {
-      getInitialState: () => DragScrollStore<HTMLElement>;
-      getListeners: () => Set<(state: DragScrollStore<HTMLElement>, prevState: DragScrollStore<HTMLElement>) => void>;
-      getState: () => DragScrollStore<HTMLElement>;
+      getInitialState: () => DragScrollStore;
+      getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
+      getState: () => DragScrollStore;
       resetState: () => void;
       setState: {
-        (stateUpdate: Partial<DragScrollStore<HTMLElement>> | ((prevState: DragScrollStore<HTMLElement>) => Partial<DragScrollStore<HTMLElement>>), options?: ({
-          onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+        (stateUpdate: Partial<DragScrollStore> | ((prevState: DragScrollStore) => Partial<DragScrollStore>), options?: ({
+          onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
           shouldNotifySync?: boolean | undefined;
         } & {
           shouldReplace?: false;
         }) | undefined): void;
-        (stateUpdate: DragScrollStore<HTMLElement> | ((prevState: DragScrollStore<HTMLElement>) => DragScrollStore<HTMLElement>), options?: ({
-          onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+        (stateUpdate: DragScrollStore | ((prevState: DragScrollStore) => DragScrollStore), options?: ({
+          onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
           shouldNotifySync?: boolean | undefined;
         } & {
           shouldReplace: true;
         }) | undefined): void;
       };
-      subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore<HTMLElement>>;
+      subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
     };
   }) => react.FunctionComponentElement<react.ProviderProps<{
-    getInitialState: () => DragScrollStore<HTMLElement>;
-    getListeners: () => Set<(state: DragScrollStore<HTMLElement>, prevState: DragScrollStore<HTMLElement>) => void>;
-    getState: () => DragScrollStore<HTMLElement>;
+    getInitialState: () => DragScrollStore;
+    getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
+    getState: () => DragScrollStore;
     resetState: () => void;
     setState: {
-      (stateUpdate: Partial<DragScrollStore<HTMLElement>> | ((prevState: DragScrollStore<HTMLElement>) => Partial<DragScrollStore<HTMLElement>>), options?: ({
-        onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+      (stateUpdate: Partial<DragScrollStore> | ((prevState: DragScrollStore) => Partial<DragScrollStore>), options?: ({
+        onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
         shouldNotifySync?: boolean | undefined;
       } & {
         shouldReplace?: false;
       }) | undefined): void;
-      (stateUpdate: DragScrollStore<HTMLElement> | ((prevState: DragScrollStore<HTMLElement>) => DragScrollStore<HTMLElement>), options?: ({
-        onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+      (stateUpdate: DragScrollStore | ((prevState: DragScrollStore) => DragScrollStore), options?: ({
+        onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
         shouldNotifySync?: boolean | undefined;
       } & {
         shouldReplace: true;
       }) | undefined): void;
     };
-    subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore<HTMLElement>>;
-  }>>, useDragScrollStoreContext: <TResult = DragScrollStore<HTMLElement>>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DragScrollStore<HTMLElement>, 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 };
 type InitStoreValues = Pick<RequiredUseDragScrollProps, "orientation" | "scrollAmount" | "usage">;
-declare const createDragScrollStore: <TElement extends HTMLElement = HTMLElement>(initStoreValues: InitStoreValues) => {
-  getInitialState: () => DragScrollStore<TElement>;
-  getListeners: () => Set<(state: DragScrollStore<TElement>, prevState: DragScrollStore<TElement>) => void>;
-  getState: () => DragScrollStore<TElement>;
+declare const createDragScrollStore: (initStoreValues: InitStoreValues) => {
+  getInitialState: () => DragScrollStore;
+  getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
+  getState: () => DragScrollStore;
   resetState: () => void;
   setState: {
-    (stateUpdate: Partial<DragScrollStore<TElement>> | ((prevState: DragScrollStore<TElement>) => Partial<DragScrollStore<TElement>>), options?: ({
-      onNotifySync?: ((previousState: DragScrollStore<TElement>) => void) | undefined;
-      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<TElement>) => void) | undefined;
+    (stateUpdate: Partial<DragScrollStore> | ((prevState: DragScrollStore) => Partial<DragScrollStore>), options?: ({
+      onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
       shouldNotifySync?: boolean | undefined;
     } & {
       shouldReplace?: false;
     }) | undefined): void;
-    (stateUpdate: DragScrollStore<TElement> | ((prevState: DragScrollStore<TElement>) => DragScrollStore<TElement>), options?: ({
-      onNotifySync?: ((previousState: DragScrollStore<TElement>) => void) | undefined;
-      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<TElement>) => void) | undefined;
+    (stateUpdate: DragScrollStore | ((prevState: DragScrollStore) => DragScrollStore), options?: ({
+      onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
       shouldNotifySync?: boolean | undefined;
     } & {
       shouldReplace: true;
     }) | undefined): void;
   };
-  subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore<TElement>>;
+  subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
 };
 //#endregion
 //#region src/components/ui/drag-scroll/types.d.ts
 type RecordForDataAttr = Record<`data-${string}`, unknown>;
-interface PartProps<TElement extends HTMLElement> {
-  backButton: {
-    input: PartProps<TElement>["backButton"]["output"];
-    output: InferProps<"button"> & RecordForDataAttr;
+type SharedInputProps = {
+  /**
+   * Set to `true` to disable the default styling
+   */
+  unstyled?: boolean;
+};
+type PartProps<TContainerElement extends HTMLElement = HTMLElement> = {
+  container: {
+    input: PartProps<TContainerElement>["container"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<TContainerElement>;
   };
   item: {
-    input: PartProps<TElement>["item"]["output"];
+    input: PartProps<TContainerElement>["item"]["output"] & SharedInputProps;
     output: InferProps<HTMLElement> & RecordForDataAttr;
   };
   nextButton: {
-    input: PartProps<TElement>["nextButton"]["output"];
-    output: InferProps<"button"> & RecordForDataAttr;
+    input: PartProps<TContainerElement>["nextButton"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<"button">;
+  };
+  prevButton: {
+    input: PartProps<TContainerElement>["prevButton"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<"button">;
   };
   root: {
-    input: PartProps<TElement>["root"]["output"];
-    output: InferProps<TElement> & RecordForDataAttr & {
-      ref?: React.Ref<TElement>;
-    };
+    input: PartProps<TContainerElement>["root"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<"div">;
   };
-}
-type DragScrollPropGetters<TElement extends HTMLElement> = { [Key in keyof PartProps<TElement> as `get${Capitalize<Key>}Props`]: (props?: PartProps<TElement>[Key]["input"]) => PartProps<TElement>[Key]["output"] };
+};
+type DragScrollPropGetters<TContainerElement extends HTMLElement = HTMLElement> = { [Key in keyof PartProps<TContainerElement> as `get${Capitalize<Key>}Props`]: (props?: PartProps<TContainerElement>[Key]["input"]) => PartProps<TContainerElement>[Key]["output"] };
+type PartInputProps<TContainerElement extends HTMLElement = HTMLElement> = { [Key in keyof PartProps<TContainerElement>]: PartProps<TContainerElement>[Key]["input"] };
 type DragScrollState = {
   /** Whether the container can scroll forward (right/down) */canGoToNext: boolean; /** Whether the container can scroll backward (left/up) */
   canGoToPrev: boolean; /** Whether the user is currently dragging */
   isDragging: boolean;
 };
-type DragScrollActions<TElement extends HTMLElement> = {
+type DragScrollActions = {
   actions: {
     cleanupDragListeners: () => void;
     goToNext: () => void;
@@ -119,19 +129,12 @@ type DragScrollActions<TElement extends HTMLElement> = {
     handleMouseUpOrLeave: () => void;
     handleScroll: () => void;
     initializeResizeObserver: () => (() => void) | undefined;
-    setContainerRef: (element: TElement | null) => void;
+    setContainerRef: (element: HTMLElement | null) => void;
     updateScrollState: () => void;
   };
 };
-type DragScrollStore<TElement extends HTMLElement> = DragScrollActions<TElement> & DragScrollState;
+type DragScrollStore = DragScrollActions & DragScrollState;
 type UseDragScrollProps = {
-  /**
-   * Custom class names for the root container and items
-   */
-  classNames?: {
-    base?: string;
-    item?: string;
-  };
   /**
    * Whether to disable the internal state subscription for setting things like data attributes
    * - This is useful if you want to subscribe to the state yourself
@@ -162,15 +165,46 @@ type UseDragScrollProps = {
    */
   usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
 };
-type UseDragScrollResult<TElement extends HTMLElement> = Pick<UseDragScrollProps, "disableInternalStateSubscription"> & {
-  containerRef: React.RefObject<TElement | null>;
-  propGetters: DragScrollPropGetters<TElement>;
-  storeApi: ReturnType<typeof createDragScrollStore<TElement>>;
+type UseDragScrollResult<TContainerElement extends HTMLElement> = Pick<UseDragScrollProps, "disableInternalStateSubscription"> & {
+  containerRef: React.RefObject<TContainerElement | null>;
+  propGetters: DragScrollPropGetters<TContainerElement>;
+  storeApi: ReturnType<typeof createDragScrollStore>;
   useDragScrollStore: typeof useDragScrollStoreContext;
 };
 //#endregion
 //#region src/components/ui/drag-scroll/use-drag-scroll.d.ts
-declare const useDragScroll: <TElement extends HTMLElement>(props?: UseDragScrollProps) => UseDragScrollResult<TElement>;
+declare const useDragScroll: <TContainerElement extends HTMLElement = HTMLElement>(props?: UseDragScrollProps) => UseDragScrollResult<TContainerElement>;
+//#endregion
+//#region src/components/ui/drag-scroll/drag-scroll.d.ts
+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;
+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 = {
+  asChild?: boolean;
+} & PartInputProps["container"];
+declare function DragScrollContainer<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DragScrollContainerProps>): 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;
+type DragScrollPrevProps = {
+  asChild?: boolean;
+} & PartInputProps["prevButton"];
+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 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 };
+}
 //#endregion
-export { type DragScrollStore, type UseDragScrollProps, type UseDragScrollResult, useDragScroll };
+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 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,10 +1,14 @@
-import { t as cnMerge } from "../../cn-2hIN1AQ7.js";
+"use client";
+import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
+import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
+import { t as cnMerge } from "../../cn-Bbh2G587.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
-import { isNumber } from "@zayne-labs/toolkit-type-helpers";
+import { isFunction, isNumber } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useCallbackRef, useStore } from "@zayne-labs/toolkit-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 { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/drag-scroll/utils.ts
 const updateCursor = (element) => {
 	element.style.cursor = "grabbing";
@@ -25,19 +29,18 @@ const handleScrollSnap = (dragContainer) => {
 	if (!checkIsDeviceMobile()) onScrollSnap("remove", dragContainer);
 	else onScrollSnap("reset", dragContainer);
 };
-
 //#endregion
 //#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 positionRef = {
+	const positionRef = { current: {
 		left: 0,
 		top: 0,
 		x: 0,
 		y: 0
-	};
-	const abortControllers = { current: {
+	} };
+	const abortControllerRef = { current: {
 		mouseLeave: new AbortController(),
 		mouseMove: new AbortController(),
 		mouseUp: new AbortController()
@@ -54,9 +57,9 @@ const createDragScrollStore = (initStoreValues) => {
 		isDragging: false,
 		actions: {
 			cleanupDragListeners: () => {
-				abortControllers.current.mouseMove.abort();
-				abortControllers.current.mouseUp.abort();
-				abortControllers.current.mouseLeave.abort();
+				abortControllerRef.current.mouseMove.abort();
+				abortControllerRef.current.mouseUp.abort();
+				abortControllerRef.current.mouseLeave.abort();
 			},
 			goToNext: () => {
 				if (!containerRef.current) return;
@@ -84,39 +87,39 @@ const createDragScrollStore = (initStoreValues) => {
 				if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
 				if (usage === "desktopOnly" && window.innerWidth < 768) return;
 				if (!containerRef.current) return;
-				abortControllers.current = {
+				abortControllerRef.current = {
 					mouseLeave: new AbortController(),
 					mouseMove: new AbortController(),
 					mouseUp: new AbortController()
 				};
 				if (orientation === "horizontal" || orientation === "both") {
-					positionRef.x = event.clientX;
-					positionRef.left = containerRef.current.scrollLeft;
+					positionRef.current.x = event.clientX;
+					positionRef.current.left = containerRef.current.scrollLeft;
 				}
 				if (orientation === "vertical" || orientation === "both") {
-					positionRef.y = event.clientY;
-					positionRef.top = containerRef.current.scrollTop;
+					positionRef.current.y = event.clientY;
+					positionRef.current.top = containerRef.current.scrollTop;
 				}
 				updateCursor(containerRef.current);
 				set({ isDragging: true });
 				const { actions } = get();
-				on("mousemove", containerRef.current, actions.handleMouseMove, { signal: abortControllers.current.mouseMove.signal });
-				on("mouseup", containerRef.current, actions.handleMouseUpOrLeave, { signal: abortControllers.current.mouseUp.signal });
-				on("mouseleave", containerRef.current, actions.handleMouseUpOrLeave, { signal: abortControllers.current.mouseLeave.signal });
-				on("mouseup", document, actions.handleMouseUpOrLeave, {
+				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(document, "mouseup", actions.handleMouseUpOrLeave, {
 					once: true,
-					signal: abortControllers.current.mouseUp.signal
+					signal: abortControllerRef.current.mouseUp.signal
 				});
 			},
 			handleMouseMove: (event) => {
 				if (!containerRef.current) return;
 				if (orientation === "horizontal" || orientation === "both") {
-					const dx = event.clientX - positionRef.x;
-					containerRef.current.scrollLeft = positionRef.left - dx;
+					const dx = event.clientX - positionRef.current.x;
+					containerRef.current.scrollLeft = positionRef.current.left - dx;
 				}
 				if (orientation === "vertical" || orientation === "both") {
-					const dy = event.clientY - positionRef.y;
-					containerRef.current.scrollTop = positionRef.top - dy;
+					const dy = event.clientY - positionRef.current.y;
+					containerRef.current.scrollTop = positionRef.current.top - dy;
 				}
 			},
 			handleMouseUpOrLeave: () => {
@@ -168,7 +171,6 @@ const createDragScrollStore = (initStoreValues) => {
 		}
 	}));
 };
-
 //#endregion
 //#region src/components/ui/drag-scroll/use-drag-scroll.ts
 const getScopeAttrs = (part) => ({
@@ -177,7 +179,7 @@ const getScopeAttrs = (part) => ({
 	"data-slot": `drag-scroll-${part}`
 });
 const useDragScroll = (props) => {
-	const { classNames, disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = props ?? {};
+	const { disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = props ?? {};
 	const containerRef = useRef(null);
 	const storeApi = useMemo(() => {
 		return createDragScrollStore({
@@ -201,8 +203,8 @@ const useDragScroll = (props) => {
 		containerRef.current = node;
 		actions.setContainerRef(node);
 		if (!node) return;
-		const cleanupMouseDown = on("mousedown", node, actions.handleMouseDown);
-		const cleanupScroll = on("scroll", node, actions.handleScroll, { passive: true });
+		const cleanupMouseDown = on(node, "mousedown", actions.handleMouseDown);
+		const cleanupScroll = on(node, "scroll", actions.handleScroll, { passive: true });
 		return () => {
 			cleanupMouseDown();
 			cleanupScroll();
@@ -211,33 +213,39 @@ const useDragScroll = (props) => {
 	useEffect(() => {
 		return actions.initializeResizeObserver();
 	}, [actions]);
-	const getRootProps = useCallback((innerProps) => {
+	const getRootProps = useCallbackRef((innerProps) => {
 		return {
 			...getScopeAttrs("root"),
+			...innerProps,
+			className: cnMerge("relative", innerProps?.className)
+		};
+	});
+	const getContainerProps = useCallback((innerProps) => {
+		return {
+			...getScopeAttrs("container"),
 			...!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", classNames?.base, 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", 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)
 		};
 	}, [
-		classNames?.base,
 		disableInternalStateSubscription,
 		isDragging,
 		orientation,
 		refCallback,
 		usage
 	]);
-	const getItemProps = useCallback((innerProps) => {
+	const getItemProps = useCallbackRef((innerProps) => {
 		return {
 			...getScopeAttrs("item"),
 			...innerProps,
-			className: cnMerge("snap-center snap-always", classNames?.item, innerProps?.className)
+			className: cnMerge("snap-center snap-always", innerProps?.className)
 		};
-	}, [classNames?.item]);
-	const getBackButtonProps = useCallback((innerProps) => {
+	});
+	const getPrevButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToPrev;
 		return {
-			...getScopeAttrs("back-button"),
+			...getScopeAttrs("prev-button"),
 			type: "button",
 			...innerProps,
 			"aria-disabled": dataAttr(isDisabled),
@@ -261,12 +269,14 @@ const useDragScroll = (props) => {
 		};
 	}, [actions.goToNext, canGoToNext]);
 	const propGetters = useMemo(() => ({
-		getBackButtonProps,
+		getContainerProps,
 		getItemProps,
 		getNextButtonProps,
+		getPrevButtonProps,
 		getRootProps
 	}), [
-		getBackButtonProps,
+		getPrevButtonProps,
+		getContainerProps,
 		getItemProps,
 		getNextButtonProps,
 		getRootProps
@@ -285,7 +295,78 @@ const useDragScroll = (props) => {
 		stableUseDragScrollStore
 	]);
 };
-
 //#endregion
-export { useDragScroll };
+//#region src/components/ui/drag-scroll/drag-scroll-context.ts
+const [DragScrollStoreContextProvider, useDragScrollStoreContext] = createReactStoreContext({
+	hookName: "useDragScrollStoreContext",
+	name: "DragScrollStoreContext",
+	providerName: "DragScrollRoot"
+});
+const [DragScrollRootContextProvider, useDragScrollRootContext] = createCustomContext({
+	hookName: "useDragScrollRootContext",
+	name: "DragScrollRootContext",
+	providerName: "DragScrollRoot"
+});
+//#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);
+	return /* @__PURE__ */ jsx(DragScrollStoreContextProvider, {
+		store: storeApi,
+		children: /* @__PURE__ */ jsx(DragScrollRootContextProvider, {
+			value: useMemo(() => ({
+				containerRef,
+				disableInternalStateSubscription,
+				propGetters
+			}), [
+				containerRef,
+				disableInternalStateSubscription,
+				propGetters
+			]),
+			children: /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, {
+				...propGetters.getRootProps(restOfProps),
+				children
+			})
+		})
+	});
+}
+function DragScrollContext(props) {
+	const { children, selector } = props;
+	const dragScrollCtx = useDragScrollStoreContext(useCompareSelector(selector));
+	return isFunction(children) ? children(dragScrollCtx) : children;
+}
+function DragScrollContainer(props) {
+	const { as: Element = "ul", asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getContainerProps(restOfProps) });
+}
+function DragScrollItem(props) {
+	const { as: Element = "li", asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getItemProps(restOfProps) });
+}
+function DragScrollPrev(props) {
+	const { asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : "button", { ...propGetters.getPrevButtonProps(restOfProps) });
+}
+function DragScrollNext(props) {
+	const { asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : "button", { ...propGetters.getNextButtonProps(restOfProps) });
+}
+//#endregion
+//#region src/components/ui/drag-scroll/drag-scroll-parts.ts
+var drag_scroll_parts_exports = /* @__PURE__ */ __exportAll({
+	Container: () => DragScrollContainer,
+	Context: () => DragScrollContext,
+	Item: () => DragScrollItem,
+	Next: () => DragScrollNext,
+	Prev: () => DragScrollPrev,
+	Root: () => DragScrollRoot
+});
+//#endregion
+export { drag_scroll_parts_exports as DragScroll, DragScrollContainer, DragScrollContext, DragScrollItem, DragScrollNext, DragScrollPrev, DragScrollRoot, useDragScroll, useDragScrollStoreContext };
+
 //# sourceMappingURL=index.js.map