@zayne-labs/ui-react 0.0.9 → 0.1.0

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

@@ -1,20 +1,301 @@
+import * as react from 'react';
 import { RefCallback } from 'react';
+import { InferProps } from '@zayne-labs/toolkit-react/utils';
 
-type DragScrollProps = {
+type DragScrollProps<TElement extends HTMLElement> = {
     classNames?: {
         base?: string;
         item?: string;
     };
+    extraItemProps?: InferProps<HTMLElement>;
+    extraRootProps?: InferProps<TElement>;
     orientation?: "both" | "horizontal" | "vertical";
     usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
 };
-declare const useDragScroll: <TElement extends HTMLElement>(props?: DragScrollProps) => {
-    getItemProps: () => {
+declare const useDragScroll: <TElement extends HTMLElement>(props?: DragScrollProps<TElement>) => {
+    getItemProps: (itemProps?: DragScrollProps<TElement>["extraItemProps"]) => {
         className: string;
         "data-part": string;
         "data-scope": string;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: react.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: react.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        children?: react.ReactNode | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: react.ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: react.ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: react.ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: react.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: react.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: react.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+        onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+        onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+        onChange?: react.FormEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: react.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: react.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+        onInput?: react.FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+        onReset?: react.FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: react.FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: react.FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: react.FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: react.FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: react.FormEventHandler<HTMLElement> | undefined;
+        onLoad?: react.ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onError?: react.ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: react.ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: react.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: react.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: react.ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: react.ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: react.ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: react.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: react.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: react.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onPause?: react.ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: react.ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: react.ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: react.ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onResize?: react.ReactEventHandler<HTMLElement> | undefined;
+        onResizeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: react.ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: react.ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: react.ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: react.ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: react.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: react.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: react.ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: react.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: react.DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onDrop?: react.DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: react.DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: react.ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: react.TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: react.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: react.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: react.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: react.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: react.UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: react.UIEventHandler<HTMLElement> | undefined;
+        onWheel?: react.WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: react.WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: react.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: react.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: react.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+        onToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
+        onBeforeToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
+        onTransitionCancel?: react.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionCancelCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: react.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRun?: react.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRunCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStart?: react.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStartCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
     };
-    getRootProps: () => {
+    getRootProps: (rootProps?: DragScrollProps<TElement>["extraRootProps"]) => InferProps<TElement> & {
         className: string;
         "data-part": string;
         "data-scope": string;

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

@@ -1,6 +1,8 @@
 import { cnMerge } from '../../chunk-OHG7GB7O.js';
+import '../../chunk-PZ5AY32C.js';
 import { off, on, checkIsDeviceMobileOrTablet } from '@zayne-labs/toolkit-core';
 import { useCallbackRef } from '@zayne-labs/toolkit-react';
+import { mergeProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
 import { useRef } from 'react';
 
 var updateCursor = (element) => {
@@ -27,9 +29,15 @@ var handleScrollSnap = (dragContainer) => {
   }
 };
 
-// src/components/ui/drag-scroll/useDragScroll.ts
+// src/components/ui/drag-scroll/use-drag-scroll.ts
 var useDragScroll = (props = {}) => {
-  const { classNames, orientation = "horizontal", usage = "allScreens" } = 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) => {
@@ -77,25 +85,37 @@ var useDragScroll = (props = {}) => {
     }
     return cleanup;
   });
-  const getRootProps = () => ({
-    className: cnMerge(
-      `flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll
-			[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]: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
-    ),
-    "data-part": "root",
-    "data-scope": "drag-scroll",
-    ref: refCallBack
-  });
-  const getItemProps = () => ({
-    className: cnMerge("snap-center snap-always", classNames?.item),
-    "data-part": "item",
-    "data-scope": "drag-scroll"
-  });
+  const getRootProps = (rootProps) => {
+    const mergedRootProps = mergeProps(extraRootProps, rootProps);
+    return {
+      ...mergedRootProps,
+      className: cnMerge(
+        `flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll
+				[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]: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,
+        mergedRootProps.className
+      ),
+      "data-part": "root",
+      "data-scope": "drag-scroll",
+      ref: composeRefs([
+        refCallBack,
+        mergedRootProps?.ref
+      ])
+    };
+  };
+  const getItemProps = (itemProps) => {
+    const mergedItemProps = mergeProps(extraItemProps, itemProps);
+    return {
+      ...mergedItemProps,
+      className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
+      "data-part": "item",
+      "data-scope": "drag-scroll"
+    };
+  };
   return { getItemProps, getRootProps };
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/useDragScroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { checkIsDeviceMobileOrTablet } 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 isMobileOrTablet = checkIsDeviceMobileOrTablet();\n\n\tif (!isMobileOrTablet) {\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 RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps = {\n\tclassNames?: { base?: string; item?: string };\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps = {}) => {\n\tconst { classNames, orientation = \"horizontal\", usage = \"allScreens\" } = 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\t// == Run cleanup manually on unmount if the user is using a version of react that doesn't support cleanup\n\t\tif (!node) {\n\t\t\tcleanup();\n\t\t\treturn;\n\t\t}\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = () => ({\n\t\tclassName: cnMerge(\n\t\t\t`flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll\n\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\n\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\tclassNames?.base\n\t\t),\n\t\t\"data-part\": \"root\",\n\t\t\"data-scope\": \"drag-scroll\",\n\t\tref: refCallBack,\n\t});\n\n\tconst getItemProps = () => ({\n\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item),\n\t\t\"data-part\": \"item\",\n\t\t\"data-scope\": \"drag-scroll\",\n\t});\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}
+{"version":3,"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { checkIsDeviceMobileOrTablet } 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 isMobileOrTablet = checkIsDeviceMobileOrTablet();\n\n\tif (!isMobileOrTablet) {\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, mergeProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps<TElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: InferProps<HTMLElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps<TElement> = {}) => {\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\t// == Run cleanup manually on unmount if the user is using a version of react that doesn't support cleanup\n\t\tif (!node) {\n\t\t\tcleanup();\n\t\t\treturn;\n\t\t}\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = (rootProps?: DragScrollProps<TElement>[\"extraRootProps\"]) => {\n\t\tconst mergedRootProps = mergeProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll\n\t\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\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\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 = (itemProps?: DragScrollProps<TElement>[\"extraItemProps\"]) => {\n\t\tconst mergedItemProps = mergeProps(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};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}

package/dist/esm/ui/drop-zone/index.d.ts

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import { RefCallback } from 'react';
 import { FileValidationOptions } from '@zayne-labs/toolkit-core';
 import { InferProps } from '@zayne-labs/toolkit-react/utils';
 
@@ -8,6 +7,13 @@ type RenderProps = {
     inputRef: React.RefObject<HTMLInputElement | null>;
     isDragging: boolean;
 };
+type RootProps = InferProps<"div"> & {
+    classNames?: {
+        activeDrag?: string;
+        base?: string;
+    };
+};
+type InputProps = InferProps<"input">;
 type UseDropZoneProps = {
     allowedFileTypes?: string[];
     children?: React.ReactNode | ((props: RenderProps) => React.ReactNode);
@@ -18,15 +24,14 @@ type UseDropZoneProps = {
     };
     disableInbuiltValidation?: boolean;
     existingFiles?: File[];
-    extraInputProps?: Omit<InferProps<"input">, "ref">;
-    extraRootProps?: InferProps<"div">;
+    extraInputProps?: InputProps;
+    extraRootProps?: RootProps;
     onUpload?: (details: {
         acceptedFiles: File[];
         event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>;
     }) => void;
     onUploadError?: FileValidationOptions["onError"];
     onUploadSuccess?: FileValidationOptions["onSuccess"];
-    ref?: React.Ref<HTMLInputElement>;
     validationSettings?: {
         disallowDuplicates?: boolean;
         fileLimit?: number;
@@ -39,25 +44,22 @@ type UseDropZoneProps = {
 };
 declare const useDropZone: (props: UseDropZoneProps) => {
     getChildren: () => react.ReactNode;
-    getInputProps: () => {
+    getInputProps: (inputProps?: InputProps) => {
         accept: string | undefined;
         className: string;
+        "data-active-drag": boolean;
         "data-part": string;
         "data-scope": string;
         onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-        ref: RefCallback<HTMLInputElement>;
+        ref: react.RefCallback<HTMLInputElement>;
         type: string;
-        form?: string | undefined;
-        slot?: string | undefined;
-        style?: react.CSSProperties | undefined;
-        title?: string | undefined;
-        pattern?: string | undefined;
         key?: react.Key | null | undefined;
         alt?: string | undefined;
         autoComplete?: react.HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        form?: string | undefined;
         formAction?: string | ((formData: FormData) => void | Promise<void>) | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
@@ -71,6 +73,7 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         minLength?: number | undefined;
         multiple?: boolean | undefined;
         name?: string | undefined;
+        pattern?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
@@ -95,8 +98,11 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
+        slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: react.CSSProperties | undefined;
         tabIndex?: number | undefined;
+        title?: string | undefined;
         translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: react.AriaRole | undefined;
@@ -358,7 +364,7 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         inputRef: react.RefObject<HTMLInputElement | null>;
         isDragging: boolean;
     };
-    getRootProps: () => {
+    getRootProps: (rootProps?: RootProps) => {
         className: string;
         "data-active-drag": boolean;
         "data-part": string;
@@ -642,14 +648,18 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+        classNames?: {
+            activeDrag?: string;
+            base?: string;
+        };
     };
     handleDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
     handleDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
     handleFileUpload: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) => void;
+    inputRef: react.RefObject<HTMLInputElement | null>;
     isDragging: boolean;
-    ref: react.Ref<HTMLInputElement> | undefined;
 };
 
 declare function DropZone(props: UseDropZoneProps): react.JSX.Element;
 
-export { DropZone, type UseDropZoneProps, useDropZone };
+export { DropZone, type InputProps, type RootProps, type UseDropZoneProps, useDropZone };