@zayne-labs/ui-react 0.9.16 → 0.9.18

package/dist/esm/components/ui/form/index.d.ts

@@ -1,228 +1,2 @@
-import * as React$1 from 'react';
-import { DiscriminatedRenderProps, InferProps, PolymorphicProps } from '@zayne-labs/toolkit-react/utils';
-import { UseFormStateReturn, Control, FieldPath, ControllerProps, ControllerRenderProps, ControllerFieldState, RegisterOptions, UseFormReturn, FieldPathValues, FieldPathValue } from 'react-hook-form';
-export { useFormContext as useFormRootContext } from 'react-hook-form';
-import { UnionDiscriminator } from '@zayne-labs/toolkit-type-helpers';
-
-type RenderIconProps = {
-    isPasswordVisible: boolean;
-};
-type EyeIconObject = UnionDiscriminator<[
-    {
-        closed: React.ReactNode;
-        open: React.ReactNode;
-    },
-    {
-        renderIcon: (props: RenderIconProps) => React.ReactNode;
-    }
-]>;
-type FormRootContext = {
-    withEyeIcon: boolean | EyeIconObject | undefined;
-};
-type FieldContextValue = {
-    formDescriptionId: `${string}-(${string})-form-item-description`;
-    formItemId: `${string}-(${string})-form-item`;
-    formMessageId: `${string}-(${string})-form-item-message`;
-    name: string;
-};
-type FormFieldContextProps = DiscriminatedRenderProps<(contextValue: FieldContextValue) => React.ReactNode>;
-declare const useStrictFormFieldContext: () => FieldContextValue;
-type FieldState = {
-    errors?: UseFormStateReturn<FieldValues>["errors"];
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-};
-
-type FieldValues = Record<string, unknown>;
-type FormRootProps<TFieldValues extends FieldValues> = Partial<FormRootContext> & React$1.ComponentPropsWithoutRef<"form"> & {
-    children: React$1.ReactNode;
-    methods: UseFormReturn<TFieldValues>;
-};
-declare function FormRoot<TValues extends FieldValues>(props: FormRootProps<TValues>): React$1.JSX.Element;
-type FormFieldProps<TControl, TFieldValues extends FieldValues> = (TControl extends Control<infer TValues> ? {
-    control?: never;
-    name: FieldPath<TValues>;
-} : {
-    control?: Control<TFieldValues>;
-    name: FieldPath<TFieldValues>;
-}) & ((InferProps<"div"> & {
-    withWrapper?: true;
-}) | {
-    children: React$1.ReactNode;
-    className?: never;
-    withWrapper: false;
-});
-declare function FormField<TControl, TFieldValues extends FieldValues = FieldValues>(props: FormFieldProps<TControl, TFieldValues>): React$1.JSX.Element;
-type FormFieldControllerRenderFn = (props: {
-    field: Omit<ControllerRenderProps, "value"> & {
-        value: never;
-    };
-    fieldState: ControllerFieldState;
-    formState: UseFormStateReturn<never>;
-}) => React$1.ReactElement;
-type FormFieldControllerProps = Omit<ControllerProps<FieldValues, FieldPath<FieldValues>>, "control" | "name" | "render"> & {
-    render: FormFieldControllerRenderFn;
-};
-declare function FormFieldController(props: FormFieldControllerProps): React$1.JSX.Element;
-declare function FormFieldControlledField<TFieldValues extends FieldValues>(props: ControllerProps<TFieldValues>): React$1.JSX.Element;
-declare function FormFieldContext(props: FormFieldContextProps): React$1.ReactNode;
-declare function FormLabel(props: InferProps<"label">): React$1.JSX.Element;
-declare function FormInputGroup(props: InferProps<"div">): React$1.JSX.Element;
-type FormSideItemProps = {
-    children?: React$1.ReactNode;
-    className?: string;
-};
-declare function FormInputLeftItem<TElement extends React$1.ElementType = "span">(props: PolymorphicProps<TElement, FormSideItemProps>): React$1.JSX.Element;
-declare namespace FormInputLeftItem {
-    var slotSymbol: symbol;
-}
-declare function FormInputRightItem<TElement extends React$1.ElementType = "span">(props: PolymorphicProps<TElement, FormSideItemProps>): React$1.JSX.Element;
-declare namespace FormInputRightItem {
-    var slotSymbol: symbol;
-}
-type FormInputPrimitiveProps<TFieldValues extends FieldValues = FieldValues> = Omit<React$1.ComponentPropsWithRef<"input">, "children"> & {
-    classNames?: {
-        error?: string;
-        eyeIcon?: string;
-        input?: string;
-        inputGroup?: string;
-    };
-    control?: Control<TFieldValues>;
-    fieldState?: FieldState;
-    name?: FieldPath<TFieldValues>;
-    withEyeIcon?: FormRootContext["withEyeIcon"];
-};
-type FormTextAreaPrimitiveProps<TFieldValues extends FieldValues = FieldValues> = React$1.ComponentPropsWithRef<"textarea"> & {
-    classNames?: {
-        base?: string;
-        error?: string;
-    };
-    control?: Control<TFieldValues>;
-    fieldState?: FieldState;
-    name?: FieldPath<TFieldValues>;
-};
-type FormSelectPrimitiveProps<TFieldValues extends FieldValues = FieldValues> = React$1.ComponentPropsWithRef<"select"> & {
-    classNames?: {
-        base?: string;
-        error?: string;
-    };
-    control?: Control<TFieldValues>;
-    fieldState?: FieldState;
-    name?: FieldPath<TFieldValues>;
-};
-declare function FormInputPrimitive<TFieldValues extends FieldValues>(props: FormInputPrimitiveProps<TFieldValues> & {
-    rules?: RegisterOptions;
-}): React$1.JSX.Element;
-declare function FormTextAreaPrimitive<TFieldValues extends FieldValues>(props: FormTextAreaPrimitiveProps<TFieldValues> & {
-    rules?: RegisterOptions;
-}): React$1.JSX.Element;
-declare function FormSelectPrimitive<TFieldValues extends FieldValues>(props: FormSelectPrimitiveProps<TFieldValues> & {
-    rules?: RegisterOptions;
-}): React$1.JSX.Element;
-type PrimitivePropsToOmit = "control" | "formState" | "name";
-type FormInputProps = Omit<FormInputPrimitiveProps, PrimitivePropsToOmit> & {
-    rules?: RegisterOptions;
-};
-type FormTextAreaProps = Omit<FormTextAreaPrimitiveProps, PrimitivePropsToOmit> & {
-    rules?: RegisterOptions;
-};
-type FormSelectProps = Omit<FormSelectPrimitiveProps, PrimitivePropsToOmit> & {
-    rules?: RegisterOptions;
-};
-type CombinedFormInputProps = (FormSelectProps & {
-    type: "select";
-}) | (FormTextAreaProps & {
-    type: "textarea";
-}) | FormInputProps;
-declare function FormInput(props: CombinedFormInputProps & {
-    rules?: RegisterOptions;
-}): React$1.JSX.Element;
-declare function FormTextArea(props: FormTextAreaProps): React$1.JSX.Element;
-declare function FormSelect(props: FormSelectProps): React$1.JSX.Element;
-declare function FormDescription(props: InferProps<"p">): React$1.JSX.Element;
-type ErrorMessageRenderProps = {
-    className: string;
-    "data-index": number;
-    "data-part": "error-message";
-    "data-scope": "form";
-    "data-slot": "form-error-message";
-    id: string | undefined;
-    ref: React$1.RefCallback<HTMLElement>;
-};
-type ErrorMessageRenderState = {
-    errorMessage: string;
-    errorMessageArray: string[];
-    index: number;
-};
-type ErrorMessageRenderFn = (context: {
-    props: ErrorMessageRenderProps;
-    state: ErrorMessageRenderState;
-}) => React$1.ReactNode;
-type FormErrorMessagePrimitiveProps<TFieldValues extends FieldValues> = DiscriminatedRenderProps<ErrorMessageRenderFn> & {
-    className?: string;
-    classNames?: {
-        container?: string;
-        errorMessage?: string;
-        errorMessageAnimation?: string;
-    };
-    control?: Control<TFieldValues>;
-    disableErrorAnimation?: boolean;
-    disableScrollToErrorField?: boolean;
-} & ({
-    fieldName: FieldPath<TFieldValues>;
-    type?: "regular";
-} | {
-    fieldName: string;
-    type: "root";
-});
-type FormErrorMessagePrimitiveType = {
-    <TFieldValues extends FieldValues>(props: Extract<FormErrorMessagePrimitiveProps<TFieldValues>, {
-        type?: "regular";
-    }>): React$1.ReactNode;
-    <TFieldValues extends FieldValues>(props: Extract<FormErrorMessagePrimitiveProps<TFieldValues>, {
-        type: "root";
-    }>): React$1.ReactNode;
-};
-declare const FormErrorMessagePrimitive: FormErrorMessagePrimitiveType;
-type FormErrorMessageProps<TControl, TFieldValues extends FieldValues> = (TControl extends Control<infer TValues> ? {
-    className?: string;
-    control?: never;
-    errorField?: FieldPath<TValues>;
-    type?: "regular";
-} : {
-    className?: string;
-    control?: Control<TFieldValues>;
-    errorField?: FieldPath<TFieldValues>;
-    type?: "regular";
-}) | {
-    className?: string;
-    control?: never;
-    errorField: string;
-    type: "root";
-};
-declare function FormErrorMessage<TControl, TFieldValues extends FieldValues = FieldValues>(props: FormErrorMessageProps<TControl, TFieldValues>): React$1.JSX.Element;
-type FormSubmitProps = InferProps<"button"> & {
-    asChild?: boolean;
-};
-declare function FormSubmit<TElement extends React$1.ElementType = "button">(props: PolymorphicProps<TElement, FormSubmitProps>): React$1.JSX.Element;
-type GetFieldValue<TFieldPathOrPaths, TFieldValues extends FieldValues> = TFieldPathOrPaths extends Array<FieldPath<TFieldValues>> ? FieldPathValues<TFieldValues, TFieldPathOrPaths> : TFieldPathOrPaths extends FieldPath<TFieldValues> ? FieldPathValue<TFieldValues, TFieldPathOrPaths> : unknown;
-type FormSubscribeToFieldValueRenderFn<TFieldValues extends FieldValues, TFieldPathOrPaths> = (props: {
-    value: GetFieldValue<TFieldPathOrPaths, TFieldValues>;
-}) => React$1.ReactNode;
-type FormSubscribeToFieldValueProps<TFieldValues extends FieldValues, TFieldPathOrPaths> = DiscriminatedRenderProps<FormSubscribeToFieldValueRenderFn<TFieldValues, TFieldPathOrPaths>> & {
-    control: Control<TFieldValues>;
-    name?: TFieldPathOrPaths;
-};
-declare function FormSubscribeToFieldValue<TFieldValues extends FieldValues, const TFieldPathOrPaths extends Array<FieldPath<TFieldValues>> | FieldPath<TFieldValues>>(props: FormSubscribeToFieldValueProps<TFieldValues, TFieldPathOrPaths>): React$1.ReactNode;
-type FormSubscribeToFormStateRenderFn<TFieldValues extends FieldValues> = (props: UseFormStateReturn<TFieldValues>) => React$1.ReactNode;
-type FormSubscribeToFormStateProps<TFieldValues extends FieldValues> = DiscriminatedRenderProps<FormSubscribeToFormStateRenderFn<TFieldValues>> & {
-    control?: Control<TFieldValues>;
-    name?: Array<FieldPath<TFieldValues>> | FieldPath<TFieldValues>;
-};
-declare function FormSubscribeToFormState<TFieldValues extends FieldValues = FieldValues>(props: FormSubscribeToFormStateProps<TFieldValues>): React$1.ReactNode;
-
-declare namespace formParts {
-  export { FormFieldControlledField as ControlledField, FormDescription as Description, FormErrorMessage as ErrorMessage, FormErrorMessagePrimitive as ErrorMessagePrimitive, FormField as Field, FormFieldContext as FieldContext, FormFieldController as FieldController, FormInput as Input, FormInputGroup as InputGroup, FormInputLeftItem as InputLeftItem, FormInputPrimitive as InputPrimitive, FormInputRightItem as InputRightItem, FormLabel as Label, FormRoot as Root, FormSelect as Select, FormSubmit as Submit, FormSubscribeToFieldValue as SubscribeToFieldValue, FormSubscribeToFormState as SubscribeToFormState, FormTextArea as TextArea, FormTextAreaPrimitive as TextAreaPrimitive };
-}
-
-export { type FieldValues, formParts as Form, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, type FormErrorMessagePrimitiveProps, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, type FormInputProps, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, type FormSelectProps, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, type FormTextAreaProps, useStrictFormFieldContext as useFormFieldContext };
+import { FieldValues, FormDescription$1 as FormDescription, FormErrorMessage$1 as FormErrorMessage, FormErrorMessagePrimitive$1 as FormErrorMessagePrimitive, FormErrorMessagePrimitiveProps, FormField$1 as FormField, FormFieldContext$1 as FormFieldContext, FormFieldControlledField$1 as FormFieldControlledField, FormFieldController$1 as FormFieldController, FormInput$1 as FormInput, FormInputGroup$1 as FormInputGroup, FormInputLeftItem$1 as FormInputLeftItem, FormInputPrimitive$1 as FormInputPrimitive, FormInputProps, FormInputRightItem$1 as FormInputRightItem, FormLabel$1 as FormLabel, FormRoot$1 as FormRoot, FormSelect$1 as FormSelect, FormSelectPrimitive$1 as FormSelectPrimitive, FormSelectProps, FormSubmit$1 as FormSubmit, FormSubscribeToFieldValue$1 as FormSubscribeToFieldValue, FormSubscribeToFormState$1 as FormSubscribeToFormState, FormTextArea$1 as FormTextArea, FormTextAreaPrimitive$1 as FormTextAreaPrimitive, FormTextAreaProps, form_parts_d_exports, useFormRootContext$1 as useFormRootContext, useStrictFormFieldContext$1 as useStrictFormFieldContext } from "../../../index-DQ1yFGd2.js";
+export { FieldValues, form_parts_d_exports as Form, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormErrorMessagePrimitiveProps, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputProps, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSelectProps, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, FormTextAreaProps, useStrictFormFieldContext as useFormFieldContext, useFormRootContext };

package/dist/esm/components/ui/form/index.js

@@ -1,8 +1,10 @@
-export { form_parts_exports as Form, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, useStrictFormFieldContext as useFormFieldContext, useFormContext as useFormRootContext } from '../../../chunk-P5QP73HG.js';
-import '../../../chunk-OHG7GB7O.js';
-import '../../../chunk-NXZZXJRH.js';
-import '../../../chunk-YO5LJ7ZJ.js';
-import '../../../chunk-D6QZA3UT.js';
-import '../../../chunk-PZ5AY32C.js';
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+"use client";
+
+
+import "../../../getSlot-BIcGgBwN.js";
+import "../../../slot-RXTKo4L7.js";
+import "../../../for-aTw1TgJo.js";
+import "../../../cn-_FbtIrlZ.js";
+import { FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, form_parts_exports, useFormRootContext, useStrictFormFieldContext } from "../../../form-DytCfL6R.js";
+
+export { form_parts_exports as Form, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, useStrictFormFieldContext as useFormFieldContext, useFormRootContext };

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

@@ -1,11 +1,7 @@
-export { Card } from './card/index.js';
-export { Carousel } from './carousel/index.js';
-export { useDragScroll } from './drag-scroll/index.js';
-export { d as DropZone, u as useDropZone } from '../../drop-zone-parts-CvseSoXA.js';
-export { Form } from './form/index.js';
-import 'react';
-import '@zayne-labs/toolkit-react/utils';
-import '@zayne-labs/toolkit-core';
-import '@zayne-labs/toolkit-type-helpers';
-import '../../getSlotMap-DTkxtGhd.js';
-import 'react-hook-form';
+import "../../getSlotMap-DA_uhXqU.js";
+import { card_parts_d_exports } from "../../index-BuSQsDCX.js";
+import { carousel_parts_d_exports } from "../../index-BC0r1cBF.js";
+import { useDragScroll$1 as useDragScroll } from "../../index-CTZr4PTO.js";
+import { drop_zone_parts_d_exports, useDropZone$1 as useDropZone } from "../../index-ASoFjmZ6.js";
+import { form_parts_d_exports } from "../../index-DQ1yFGd2.js";
+export { card_parts_d_exports as Card, carousel_parts_d_exports as Carousel, drop_zone_parts_d_exports as DropZone, form_parts_d_exports as Form, useDragScroll, useDropZone };

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

@@ -1,20 +1,19 @@
-export { card_parts_exports as Card } from '../../chunk-6QJYHPBL.js';
-export { carousel_parts_exports as Carousel } from '../../chunk-BJ7WR4XW.js';
-export { useDragScroll } from '../../chunk-V5ZPMMIH.js';
-export { drop_zone_parts_exports as DropZone, useDropZone } from '../../chunk-MRYXZN2P.js';
-export { form_parts_exports as Form } from '../../chunk-P5QP73HG.js';
-import '../../chunk-OHG7GB7O.js';
-import '../../chunk-CWUEUCR5.js';
-import '../../chunk-MT2MQDK2.js';
-import '../../chunk-EYWTW54R.js';
-import '../../chunk-G5BNZM66.js';
-import '../../chunk-YSDKXBU7.js';
-import '../../chunk-N4274N5K.js';
-import '../../chunk-JC52CA2O.js';
-import '../../chunk-NXZZXJRH.js';
-import '../../chunk-M7YXNGT6.js';
-import '../../chunk-YO5LJ7ZJ.js';
-import '../../chunk-D6QZA3UT.js';
-import '../../chunk-PZ5AY32C.js';
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+import "../../utils-D4YNWj2X.js";
+import "../../getSlot-BIcGgBwN.js";
+import "../../error-boundary-B3ycUZ1t.js";
+import "../../slot-RXTKo4L7.js";
+import "../../await-Fe4LFRKd.js";
+import "../../for-aTw1TgJo.js";
+import "../../show-BgYrfIxJ.js";
+import "../../suspense-with-boundary-TrQxYRG6.js";
+import "../../switch-PF5xTJfr.js";
+import "../../teleport-dlSjWj_t.js";
+import "../../common-BYWy8Q78.js";
+import "../../cn-_FbtIrlZ.js";
+import { card_parts_exports } from "../../card-DRjs-vtv.js";
+import { carousel_parts_exports } from "../../carousel-Dznupnx8.js";
+import { useDragScroll } from "../../drag-scroll-BLjij7aI.js";
+import { drop_zone_parts_exports, useDropZone } from "../../drop-zone-_YK9C3Xj.js";
+import { form_parts_exports } from "../../form-DytCfL6R.js";
+
+export { card_parts_exports as Card, carousel_parts_exports as Carousel, drop_zone_parts_exports as DropZone, form_parts_exports as Form, useDragScroll, useDropZone };

package/dist/esm/drag-scroll-BLjij7aI.js

@@ -0,0 +1,111 @@
+import { cnMerge } from "./cn-_FbtIrlZ.js";
+import { useRef } from "react";
+import { checkIsDeviceMobile, off, on } from "@zayne-labs/toolkit-core";
+import { useCallbackRef } from "@zayne-labs/toolkit-react";
+import { composeRefs, mergeTwoProps } from "@zayne-labs/toolkit-react/utils";
+
+//#region src/components/ui/drag-scroll/utils.ts
+const updateCursor = (element) => {
+	element.style.cursor = "grabbing";
+	element.style.userSelect = "none";
+};
+const onScrollSnap = (action, element) => {
+	if (action === "remove") {
+		element.style.scrollSnapType = "none";
+		return;
+	}
+	element.style.scrollSnapType = "";
+};
+const resetCursor = (element) => {
+	element.style.cursor = "";
+	element.style.userSelect = "";
+};
+const handleScrollSnap = (dragContainer) => {
+	const isMobile = checkIsDeviceMobile();
+	if (!isMobile) onScrollSnap("remove", dragContainer);
+	else onScrollSnap("reset", dragContainer);
+};
+
+//#endregion
+//#region src/components/ui/drag-scroll/use-drag-scroll.ts
+const useDragScroll = (props) => {
+	const { classNames, extraItemProps, extraRootProps, orientation = "horizontal", usage = "allScreens" } = props ?? {};
+	const dragContainerRef = useRef(null);
+	const positionRef = useRef({
+		left: 0,
+		top: 0,
+		x: 0,
+		y: 0
+	});
+	const handleMouseMove = useCallbackRef((event) => {
+		if (!dragContainerRef.current) return;
+		if (orientation === "horizontal" || orientation === "both") {
+			const dx = event.clientX - positionRef.current.x;
+			dragContainerRef.current.scrollLeft = positionRef.current.left - dx;
+		}
+		if (orientation === "vertical" || orientation === "both") {
+			const dy = event.clientY - positionRef.current.y;
+			dragContainerRef.current.scrollTop = positionRef.current.top - dy;
+		}
+	});
+	const handleMouseUpOrLeave = useCallbackRef(() => {
+		if (!dragContainerRef.current) return;
+		off("mousemove", dragContainerRef.current, handleMouseMove);
+		off("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+		off("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+		resetCursor(dragContainerRef.current);
+	});
+	const handleMouseDown = useCallbackRef((event) => {
+		if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
+		if (usage === "desktopOnly" && window.innerWidth < 768) return;
+		if (!dragContainerRef.current) return;
+		if (orientation === "horizontal" || orientation === "both") {
+			positionRef.current.x = event.clientX;
+			positionRef.current.left = dragContainerRef.current.scrollLeft;
+		}
+		if (orientation === "vertical" || orientation === "both") {
+			positionRef.current.y = event.clientY;
+			positionRef.current.top = dragContainerRef.current.scrollTop;
+		}
+		updateCursor(dragContainerRef.current);
+		on("mousemove", dragContainerRef.current, handleMouseMove);
+		on("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+		on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+	});
+	const refCallBack = useCallbackRef((node) => {
+		dragContainerRef.current = node;
+		node && handleScrollSnap(node);
+		const cleanup = on("mousedown", dragContainerRef.current, handleMouseDown);
+		return cleanup;
+	});
+	const getRootProps = (rootProps) => {
+		const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
+		return {
+			...mergedRootProps,
+			className: cnMerge(`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-y-hidden
+				overflow-x-scroll`, 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, mergedRootProps.className),
+			"data-part": "root",
+			"data-scope": "drag-scroll",
+			"data-slot": "drag-scroll-root",
+			ref: composeRefs(refCallBack, mergedRootProps?.ref)
+		};
+	};
+	const getItemProps = (itemProps) => {
+		const mergedItemProps = mergeTwoProps(extraItemProps, itemProps);
+		return {
+			...mergedItemProps,
+			className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
+			"data-part": "item",
+			"data-scope": "drag-scroll",
+			"data-slot": "drag-scroll-item"
+		};
+	};
+	return {
+		getItemProps,
+		getRootProps
+	};
+};
+
+//#endregion
+export { useDragScroll };
+//# sourceMappingURL=drag-scroll-BLjij7aI.js.map

package/dist/esm/drag-scroll-BLjij7aI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-scroll-BLjij7aI.js","names":["element: TElement","action: \"remove\" | \"reset\"","dragContainer: HTMLElement","props?: DragScrollProps<TElement, TItemElement>","event: MouseEvent","refCallBack: RefCallback<TElement>","getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"]","getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"]"],"sources":["../../src/components/ui/drag-scroll/utils.ts","../../src/components/ui/drag-scroll/use-drag-scroll.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 { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype ItemProps<TItemElement extends HTMLElement> = Omit<InferProps<TItemElement>, \"children\">;\n\ntype RootProps<TElement extends HTMLElement> = Omit<InferProps<TElement>, \"children\">;\n\ntype DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: ItemProps<TItemElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\ntype DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tgetItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;\n\tgetRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;\n};\n\nconst useDragScroll = <TElement extends HTMLElement, TItemElement extends HTMLElement = HTMLElement>(\n\tprops?: DragScrollProps<TElement, TItemElement>\n): DragScrollResult<TElement, TItemElement> => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"] = (rootProps) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-y-hidden\n\t\t\t\toverflow-x-scroll`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\"data-slot\": \"drag-scroll-root\",\n\t\t\tref: composeRefs(\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref\n\t\t\t),\n\t\t};\n\t};\n\n\tconst getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"] = (itemProps) => {\n\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\"data-slot\": \"drag-scroll-item\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"],"mappings":"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"}