@zayne-labs/ui-react 0.10.52 → 0.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/drag-scroll-store.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"sourcesContent":["import { checkIsDeviceMobile } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { createStore, on, throttleByFrame } from \"@zayne-labs/toolkit-core\";\nimport { isNumber } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { DragScrollStore, UseDragScrollProps } from \"./types\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype RequiredUseDragScrollProps = {\n\t[Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined;\n};\n\ntype InitStoreValues = Pick<RequiredUseDragScrollProps, \"orientation\" | \"scrollAmount\" | \"usage\">;\n\nexport const createDragScrollStore = <TElement extends HTMLElement = HTMLElement>(\n\tinitStoreValues: InitStoreValues\n) => {\n\tconst { orientation = \"horizontal\", scrollAmount = \"item\", usage = \"allScreens\" } = initStoreValues;\n\n\tconst containerRef: React.RefObject<TElement | null> = { current: null };\n\tconst positionRef = { left: 0, top: 0, x: 0, y: 0 };\n\n\tconst abortControllers = {\n\t\tcurrent: {\n\t\t\tmouseLeave: new AbortController(),\n\t\t\tmouseMove: new AbortController(),\n\t\t\tmouseUp: new AbortController(),\n\t\t},\n\t};\n\n\t// == Calculate scroll amount based on orientation and settings\n\tconst getScrollAmount = (container: TElement): number => {\n\t\tif (isNumber(scrollAmount)) {\n\t\t\treturn scrollAmount;\n\t\t}\n\n\t\tconst firstChild = container.children[0] as HTMLElement | undefined;\n\n\t\tif (!firstChild) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn orientation === \"vertical\" || orientation === \"both\" ?\n\t\t\t\tfirstChild.offsetHeight\n\t\t\t:\tfirstChild.offsetWidth;\n\t};\n\n\tconst store = createStore<DragScrollStore<TElement>>((set, get) => ({\n\t\tcanGoToNext: true,\n\t\tcanGoToPrev: false,\n\t\tisDragging: false,\n\n\t\t// eslint-disable-next-line perfectionist/sort-objects -- actions should be last\n\t\tactions: {\n\t\t\tcleanupDragListeners: () => {\n\t\t\t\tabortControllers.current.mouseMove.abort();\n\t\t\t\tabortControllers.current.mouseUp.abort();\n\t\t\t\tabortControllers.current.mouseLeave.abort();\n\t\t\t},\n\n\t\t\tgoToNext: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tconst { canGoToNext } = get();\n\t\t\t\tif (!canGoToNext) return;\n\n\t\t\t\tconst amount = getScrollAmount(containerRef.current);\n\n\t\t\t\tcontainerRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\tgoToPrev: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tconst { canGoToPrev } = get();\n\t\t\t\tif (!canGoToPrev) return;\n\n\t\t\t\tconst amount = getScrollAmount(containerRef.current);\n\n\t\t\t\tcontainerRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : -amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? -amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseDown: (event) => {\n\t\t\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\t\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\t// == Create fresh AbortControllers for each drag session (they cannot be reused after abort)\n\t\t\t\tabortControllers.current = {\n\t\t\t\t\tmouseLeave: new AbortController(),\n\t\t\t\t\tmouseMove: new AbortController(),\n\t\t\t\t\tmouseUp: new AbortController(),\n\t\t\t\t};\n\n\t\t\t\t// == Update all initial position properties\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.x = event.clientX;\n\t\t\t\t\tpositionRef.left = containerRef.current.scrollLeft;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.y = event.clientY;\n\t\t\t\t\tpositionRef.top = containerRef.current.scrollTop;\n\t\t\t\t}\n\n\t\t\t\tupdateCursor(containerRef.current);\n\t\t\t\tset({ isDragging: true });\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\ton(\"mousemove\", containerRef.current, actions.handleMouseMove, {\n\t\t\t\t\tsignal: abortControllers.current.mouseMove.signal,\n\t\t\t\t});\n\t\t\t\ton(\"mouseup\", containerRef.current, actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllers.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t\ton(\"mouseleave\", containerRef.current, actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllers.current.mouseLeave.signal,\n\t\t\t\t});\n\n\t\t\t\t// == Document-level mouseup fallback for when user releases outside the container\n\t\t\t\ton(\"mouseup\", document, actions.handleMouseUpOrLeave, {\n\t\t\t\t\tonce: true,\n\t\t\t\t\tsignal: abortControllers.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseMove: (event) => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst dx = event.clientX - positionRef.x;\n\t\t\t\t\tcontainerRef.current.scrollLeft = positionRef.left - dx;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tconst dy = event.clientY - positionRef.y;\n\t\t\t\t\tcontainerRef.current.scrollTop = positionRef.top - dy;\n\t\t\t\t}\n\t\t\t},\n\n\t\t\thandleMouseUpOrLeave: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tresetCursor(containerRef.current);\n\t\t\t\tset({ isDragging: false });\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.cleanupDragListeners();\n\t\t\t},\n\n\t\t\thandleScroll: throttleByFrame(() => {\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t}),\n\n\t\t\tinitializeResizeObserver: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\t// == Use ResizeObserver to detect when container or children resize\n\t\t\t\tconst resizeObserver = new ResizeObserver(() => actions.updateScrollState());\n\n\t\t\t\tresizeObserver.observe(containerRef.current);\n\n\t\t\t\t// == Also observe children for size changes\n\t\t\t\tfor (const child of containerRef.current.children) {\n\t\t\t\t\tresizeObserver.observe(child);\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = () => {\n\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t};\n\n\t\t\t\treturn cleanup;\n\t\t\t},\n\n\t\t\tsetContainerRef: (element) => {\n\t\t\t\tcontainerRef.current = element;\n\n\t\t\t\tif (!element) return;\n\n\t\t\t\thandleScrollSnap(element);\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t},\n\n\t\t\tupdateScrollState: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst { clientWidth, scrollLeft, scrollWidth } = containerRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollLeft + clientWidth) < scrollWidth,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollLeft) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\") {\n\t\t\t\t\tconst { clientHeight, scrollHeight, scrollTop } = containerRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollTop + clientHeight) < scrollHeight,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollTop) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn store;\n};\n","import { dataAttr, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { composeRefs, composeTwoEventHandlers } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { createDragScrollStore } from \"./drag-scroll-store\";\nimport type { DragScrollPropGetters, UseDragScrollProps, UseDragScrollResult } from \"./types\";\n\nconst getScopeAttrs = (part: string) =>\n\t({\n\t\t\"data-part\": part,\n\t\t\"data-scope\": \"drag-scroll\",\n\t\t\"data-slot\": `drag-scroll-${part}`,\n\t}) as const;\n\nexport const useDragScroll = <TElement extends HTMLElement>(\n\tprops?: UseDragScrollProps\n): UseDragScrollResult<TElement> => {\n\tconst {\n\t\tclassNames,\n\t\tdisableInternalStateSubscription = false,\n\t\torientation = \"horizontal\",\n\t\tscrollAmount = \"item\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst containerRef = useRef<TElement>(null);\n\n\tconst storeApi = useMemo(() => {\n\t\treturn createDragScrollStore<TElement>({ orientation, scrollAmount, usage });\n\t}, [orientation, scrollAmount, usage]);\n\n\tconst actions = storeApi.getState().actions;\n\n\t/* eslint-disable react-hooks/hooks -- ignore */\n\tconst useDragScrollStore: UseDragScrollResult<TElement>[\"useDragScrollStore\"] = (selector) => {\n\t\treturn useStore(storeApi as never, selector);\n\t};\n\n\tconst canGoToPrev = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToPrev : null\n\t);\n\n\tconst canGoToNext = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToNext : null\n\t);\n\n\tconst isDragging = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.isDragging : null\n\t);\n\t/* eslint-enable react-hooks/hooks -- ignore */\n\n\tconst refCallback: React.RefCallback<TElement> = useCallbackRef((node) => {\n\t\tcontainerRef.current = node;\n\t\tactions.setContainerRef(node);\n\n\t\tif (!node) return;\n\n\t\tconst cleanupMouseDown = on(\"mousedown\", node, actions.handleMouseDown);\n\t\tconst cleanupScroll = on(\"scroll\", node as never, actions.handleScroll as never, {\n\t\t\tpassive: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\tcleanupMouseDown();\n\t\t\tcleanupScroll();\n\t\t};\n\t});\n\n\t// == Update scroll state when children might change (e.g., async loaded content)\n\tuseEffect(() => {\n\t\tconst cleanup = actions.initializeResizeObserver();\n\n\t\treturn cleanup;\n\t}, [actions]);\n\n\tconst getRootProps: DragScrollPropGetters<TElement>[\"getRootProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"root\"),\n\t\t\t\t...(!disableInternalStateSubscription && {\n\t\t\t\t\t\"data-dragging\": dataAttr(isDragging),\n\t\t\t\t}),\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`,\n\t\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tinnerProps?.className\n\t\t\t\t),\n\t\t\t\tref: composeRefs(refCallback, innerProps?.ref),\n\t\t\t} as never;\n\t\t},\n\t\t[classNames?.base, disableInternalStateSubscription, isDragging, orientation, refCallback, usage]\n\t);\n\n\tconst getItemProps: DragScrollPropGetters<TElement>[\"getItemProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"item\"),\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, innerProps?.className),\n\t\t\t};\n\t\t},\n\t\t[classNames?.item]\n\t);\n\n\tconst getBackButtonProps: DragScrollPropGetters<TElement>[\"getBackButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToPrev;\n\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"back-button\"),\n\t\t\t\ttype: \"button\",\n\t\t\t\t...innerProps,\n\t\t\t\t\"aria-disabled\": dataAttr(isDisabled),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll back\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick),\n\t\t\t};\n\t\t},\n\t\t[actions.goToPrev, canGoToPrev]\n\t);\n\n\tconst getNextButtonProps: DragScrollPropGetters<TElement>[\"getNextButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToNext;\n\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"next-button\"),\n\t\t\t\ttype: \"button\",\n\t\t\t\t...innerProps,\n\t\t\t\t\"aria-disabled\": dataAttr(isDisabled),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll forward\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick),\n\t\t\t};\n\t\t},\n\t\t[actions.goToNext, canGoToNext]\n\t);\n\n\tconst propGetters = useMemo<DragScrollPropGetters<TElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tgetBackButtonProps,\n\t\t\t\tgetItemProps,\n\t\t\t\tgetNextButtonProps,\n\t\t\t\tgetRootProps,\n\t\t\t}) satisfies DragScrollPropGetters<TElement>,\n\t\t[getBackButtonProps, getItemProps, getNextButtonProps, getRootProps]\n\t);\n\n\tconst stableUseDragScrollStore = useCallbackRef(useDragScrollStore);\n\n\tconst result = useMemo<UseDragScrollResult<TElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcontainerRef,\n\t\t\t\tdisableInternalStateSubscription,\n\t\t\t\tpropGetters,\n\t\t\t\tstoreApi,\n\t\t\t\tuseDragScrollStore: stableUseDragScrollStore,\n\t\t\t}) satisfies UseDragScrollResult<TElement>,\n\t\t[propGetters, disableInternalStateSubscription, storeApi, stableUseDragScrollStore]\n\t);\n\n\treturn result;\n};\n"],"mappings":";;;;;;;;AAGA,MAAa,gBAA8C,YAAsB;AAChF,SAAQ,MAAM,SAAS;AACvB,SAAQ,MAAM,aAAa;;AAG5B,MAAa,gBACZ,QACA,YACI;AACJ,KAAI,WAAW,UAAU;AACxB,UAAQ,MAAM,iBAAiB;AAC/B;;AAGD,SAAQ,MAAM,iBAAiB;;AAGhC,MAAa,eAA6C,YAAsB;AAC/E,SAAQ,MAAM,SAAS;AACvB,SAAQ,MAAM,aAAa;;AAI5B,MAAa,oBAAoB,kBAA+B;AAG/D,KAAI,CAFa,qBAAqB,CAGrC,cAAa,UAAU,cAAc;KAErC,cAAa,SAAS,cAAc;;;;;ACrBtC,MAAa,yBACZ,oBACI;CACJ,MAAM,EAAE,cAAc,cAAc,eAAe,QAAQ,QAAQ,iBAAiB;CAEpF,MAAM,eAAiD,EAAE,SAAS,MAAM;CACxE,MAAM,cAAc;EAAE,MAAM;EAAG,KAAK;EAAG,GAAG;EAAG,GAAG;EAAG;CAEnD,MAAM,mBAAmB,EACxB,SAAS;EACR,YAAY,IAAI,iBAAiB;EACjC,WAAW,IAAI,iBAAiB;EAChC,SAAS,IAAI,iBAAiB;EAC9B,EACD;CAGD,MAAM,mBAAmB,cAAgC;AACxD,MAAI,SAAS,aAAa,CACzB,QAAO;EAGR,MAAM,aAAa,UAAU,SAAS;AAEtC,MAAI,CAAC,WACJ,QAAO;AAGR,SAAO,gBAAgB,cAAc,gBAAgB,SACnD,WAAW,eACV,WAAW;;AAkLf,QA/Kc,aAAwC,KAAK,SAAS;EACnE,aAAa;EACb,aAAa;EACb,YAAY;EAGZ,SAAS;GACR,4BAA4B;AAC3B,qBAAiB,QAAQ,UAAU,OAAO;AAC1C,qBAAiB,QAAQ,QAAQ,OAAO;AACxC,qBAAiB,QAAQ,WAAW,OAAO;;GAG5C,gBAAgB;AACf,QAAI,CAAC,aAAa,QAAS;IAE3B,MAAM,EAAE,gBAAgB,KAAK;AAC7B,QAAI,CAAC,YAAa;IAElB,MAAM,SAAS,gBAAgB,aAAa,QAAQ;AAEpD,iBAAa,QAAQ,SAAS;KAC7B,UAAU;KACV,MAAM,gBAAgB,aAAa,IAAI;KACvC,KAAK,gBAAgB,cAAc,gBAAgB,SAAS,SAAS;KACrE,CAAC;;GAGH,gBAAgB;AACf,QAAI,CAAC,aAAa,QAAS;IAE3B,MAAM,EAAE,gBAAgB,KAAK;AAC7B,QAAI,CAAC,YAAa;IAElB,MAAM,SAAS,gBAAgB,aAAa,QAAQ;AAEpD,iBAAa,QAAQ,SAAS;KAC7B,UAAU;KACV,MAAM,gBAAgB,aAAa,IAAI,CAAC;KACxC,KAAK,gBAAgB,cAAc,gBAAgB,SAAS,CAAC,SAAS;KACtE,CAAC;;GAGH,kBAAkB,UAAU;AAC3B,QAAI,UAAU,yBAAyB,OAAO,cAAc,IAAK;AACjE,QAAI,UAAU,iBAAiB,OAAO,aAAa,IAAK;AAExD,QAAI,CAAC,aAAa,QAAS;AAG3B,qBAAiB,UAAU;KAC1B,YAAY,IAAI,iBAAiB;KACjC,WAAW,IAAI,iBAAiB;KAChC,SAAS,IAAI,iBAAiB;KAC9B;AAGD,QAAI,gBAAgB,gBAAgB,gBAAgB,QAAQ;AAC3D,iBAAY,IAAI,MAAM;AACtB,iBAAY,OAAO,aAAa,QAAQ;;AAGzC,QAAI,gBAAgB,cAAc,gBAAgB,QAAQ;AACzD,iBAAY,IAAI,MAAM;AACtB,iBAAY,MAAM,aAAa,QAAQ;;AAGxC,iBAAa,aAAa,QAAQ;AAClC,QAAI,EAAE,YAAY,MAAM,CAAC;IAEzB,MAAM,EAAE,YAAY,KAAK;AAEzB,OAAG,aAAa,aAAa,SAAS,QAAQ,iBAAiB,EAC9D,QAAQ,iBAAiB,QAAQ,UAAU,QAC3C,CAAC;AACF,OAAG,WAAW,aAAa,SAAS,QAAQ,sBAAsB,EACjE,QAAQ,iBAAiB,QAAQ,QAAQ,QACzC,CAAC;AACF,OAAG,cAAc,aAAa,SAAS,QAAQ,sBAAsB,EACpE,QAAQ,iBAAiB,QAAQ,WAAW,QAC5C,CAAC;AAGF,OAAG,WAAW,UAAU,QAAQ,sBAAsB;KACrD,MAAM;KACN,QAAQ,iBAAiB,QAAQ,QAAQ;KACzC,CAAC;;GAGH,kBAAkB,UAAU;AAC3B,QAAI,CAAC,aAAa,QAAS;AAE3B,QAAI,gBAAgB,gBAAgB,gBAAgB,QAAQ;KAC3D,MAAM,KAAK,MAAM,UAAU,YAAY;AACvC,kBAAa,QAAQ,aAAa,YAAY,OAAO;;AAGtD,QAAI,gBAAgB,cAAc,gBAAgB,QAAQ;KACzD,MAAM,KAAK,MAAM,UAAU,YAAY;AACvC,kBAAa,QAAQ,YAAY,YAAY,MAAM;;;GAIrD,4BAA4B;AAC3B,QAAI,CAAC,aAAa,QAAS;AAE3B,gBAAY,aAAa,QAAQ;AACjC,QAAI,EAAE,YAAY,OAAO,CAAC;IAE1B,MAAM,EAAE,YAAY,KAAK;AACzB,YAAQ,sBAAsB;;GAG/B,cAAc,sBAAsB;IACnC,MAAM,EAAE,YAAY,KAAK;AACzB,YAAQ,mBAAmB;KAC1B;GAEF,gCAAgC;AAC/B,QAAI,CAAC,aAAa,QAAS;IAE3B,MAAM,EAAE,YAAY,KAAK;IAGzB,MAAM,iBAAiB,IAAI,qBAAqB,QAAQ,mBAAmB,CAAC;AAE5E,mBAAe,QAAQ,aAAa,QAAQ;AAG5C,SAAK,MAAM,SAAS,aAAa,QAAQ,SACxC,gBAAe,QAAQ,MAAM;IAG9B,MAAM,gBAAgB;AACrB,oBAAe,YAAY;;AAG5B,WAAO;;GAGR,kBAAkB,YAAY;AAC7B,iBAAa,UAAU;AAEvB,QAAI,CAAC,QAAS;AAEd,qBAAiB,QAAQ;IAEzB,MAAM,EAAE,YAAY,KAAK;AACzB,YAAQ,mBAAmB;;GAG5B,yBAAyB;AACxB,QAAI,CAAC,aAAa,QAAS;AAE3B,QAAI,gBAAgB,gBAAgB,gBAAgB,QAAQ;KAC3D,MAAM,EAAE,aAAa,YAAY,gBAAgB,aAAa;AAE9D,SAAI;MACH,aAAa,KAAK,KAAK,aAAa,YAAY,GAAG;MACnD,aAAa,KAAK,MAAM,WAAW,GAAG;MACtC,CAAC;;AAGH,QAAI,gBAAgB,YAAY;KAC/B,MAAM,EAAE,cAAc,cAAc,cAAc,aAAa;AAE/D,SAAI;MACH,aAAa,KAAK,KAAK,YAAY,aAAa,GAAG;MACnD,aAAa,KAAK,MAAM,UAAU,GAAG;MACrC,CAAC;;;GAGJ;EACD,EAAE;;;;;ACjNJ,MAAM,iBAAiB,UACrB;CACA,aAAa;CACb,cAAc;CACd,aAAa,eAAe;CAC5B;AAEF,MAAa,iBACZ,UACmC;CACnC,MAAM,EACL,YACA,mCAAmC,OACnC,cAAc,cACd,eAAe,QACf,QAAQ,iBACL,SAAS,EAAE;CAEf,MAAM,eAAe,OAAiB,KAAK;CAE3C,MAAM,WAAW,cAAc;AAC9B,SAAO,sBAAgC;GAAE;GAAa;GAAc;GAAO,CAAC;IAC1E;EAAC;EAAa;EAAc;EAAM,CAAC;CAEtC,MAAM,UAAU,SAAS,UAAU,CAAC;CAGpC,MAAM,sBAA2E,aAAa;AAC7F,SAAO,SAAS,UAAmB,SAAS;;CAG7C,MAAM,cAAc,oBAAoB,UACvC,CAAC,mCAAmC,MAAM,cAAc,KACxD;CAED,MAAM,cAAc,oBAAoB,UACvC,CAAC,mCAAmC,MAAM,cAAc,KACxD;CAED,MAAM,aAAa,oBAAoB,UACtC,CAAC,mCAAmC,MAAM,aAAa,KACvD;CAGD,MAAM,cAA2C,gBAAgB,SAAS;AACzE,eAAa,UAAU;AACvB,UAAQ,gBAAgB,KAAK;AAE7B,MAAI,CAAC,KAAM;EAEX,MAAM,mBAAmB,GAAG,aAAa,MAAM,QAAQ,gBAAgB;EACvE,MAAM,gBAAgB,GAAG,UAAU,MAAe,QAAQ,cAAuB,EAChF,SAAS,MACT,CAAC;AAEF,eAAa;AACZ,qBAAkB;AAClB,kBAAe;;GAEf;AAGF,iBAAgB;AAGf,SAFgB,QAAQ,0BAA0B;IAGhD,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAgE,aACpE,eAAe;AACf,SAAO;GACN,GAAG,cAAc,OAAO;GACxB,GAAI,CAAC,oCAAoC,EACxC,iBAAiB,SAAS,WAAW,EACrC;GACD,GAAG;GACH,WAAW,QACV,sGACA,gBAAgB,gBAAgB,YAChC,gBAAgB,cAAc,YAC9B,UAAU,yBAAyB,iCACnC,UAAU,iBAAiB,yCAC3B,YAAY,MACZ,YAAY,UACZ;GACD,KAAK,YAAY,aAAa,YAAY,IAAI;GAC9C;IAEF;EAAC,YAAY;EAAM;EAAkC;EAAY;EAAa;EAAa;EAAM,CACjG;CAED,MAAM,eAAgE,aACpE,eAAe;AACf,SAAO;GACN,GAAG,cAAc,OAAO;GACxB,GAAG;GACH,WAAW,QAAQ,2BAA2B,YAAY,MAAM,YAAY,UAAU;GACtF;IAEF,CAAC,YAAY,KAAK,CAClB;CAED,MAAM,qBAA4E,aAChF,eAAe;EACf,MAAM,aAAa,YAAY,YAAY,CAAC;AAE5C,SAAO;GACN,GAAG,cAAc,cAAc;GAC/B,MAAM;GACN,GAAG;GACH,iBAAiB,SAAS,WAAW;GACrC,cAAc,aAAa,iBAAiB;GAC5C,iBAAiB,SAAS,WAAW;GACrC,UAAU;GACV,SAAS,wBAAwB,QAAQ,UAAU,YAAY,QAAQ;GACvE;IAEF,CAAC,QAAQ,UAAU,YAAY,CAC/B;CAED,MAAM,qBAA4E,aAChF,eAAe;EACf,MAAM,aAAa,YAAY,YAAY,CAAC;AAE5C,SAAO;GACN,GAAG,cAAc,cAAc;GAC/B,MAAM;GACN,GAAG;GACH,iBAAiB,SAAS,WAAW;GACrC,cAAc,aAAa,iBAAiB;GAC5C,iBAAiB,SAAS,WAAW;GACrC,UAAU;GACV,SAAS,wBAAwB,QAAQ,UAAU,YAAY,QAAQ;GACvE;IAEF,CAAC,QAAQ,UAAU,YAAY,CAC/B;CAED,MAAM,cAAc,eAEjB;EACA;EACA;EACA;EACA;EACA,GACF;EAAC;EAAoB;EAAc;EAAoB;EAAa,CACpE;CAED,MAAM,2BAA2B,eAAe,mBAAmB;AAcnE,QAZe,eAEZ;EACA;EACA;EACA;EACA;EACA,oBAAoB;EACpB,GACF;EAAC;EAAa;EAAkC;EAAU;EAAyB,CACnF"}
+{"version":3,"file":"index.js","names":["Slot.Root"],"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/drag-scroll-store.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts","../../../../src/components/ui/drag-scroll/drag-scroll-context.ts","../../../../src/components/ui/drag-scroll/drag-scroll.tsx","../../../../src/components/ui/drag-scroll/drag-scroll-parts.ts"],"sourcesContent":["import { checkIsDeviceMobile } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { createStore, on, throttleByFrame } from \"@zayne-labs/toolkit-core\";\nimport { isNumber } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { DragScrollStore, UseDragScrollProps } from \"./types\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype RequiredUseDragScrollProps = {\n\t[Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined;\n};\n\ntype InitStoreValues = Pick<RequiredUseDragScrollProps, \"orientation\" | \"scrollAmount\" | \"usage\">;\n\nexport const createDragScrollStore = (initStoreValues: InitStoreValues) => {\n\tconst { orientation = \"horizontal\", scrollAmount = \"item\", usage = \"allScreens\" } = initStoreValues;\n\n\tconst containerRef: React.RefObject<HTMLElement | null> = {\n\t\tcurrent: null,\n\t};\n\n\tconst positionRef = {\n\t\tcurrent: {\n\t\t\tleft: 0,\n\t\t\ttop: 0,\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t},\n\t};\n\n\tconst abortControllerRef = {\n\t\tcurrent: {\n\t\t\tmouseLeave: new AbortController(),\n\t\t\tmouseMove: new AbortController(),\n\t\t\tmouseUp: new AbortController(),\n\t\t},\n\t};\n\n\t// == Calculate scroll amount based on orientation and settings\n\tconst getScrollAmount = (container: HTMLElement): number => {\n\t\tif (isNumber(scrollAmount)) {\n\t\t\treturn scrollAmount;\n\t\t}\n\n\t\tconst firstChild = container.children[0] as HTMLElement | undefined;\n\n\t\tif (!firstChild) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn orientation === \"vertical\" || orientation === \"both\" ?\n\t\t\t\tfirstChild.offsetHeight\n\t\t\t:\tfirstChild.offsetWidth;\n\t};\n\n\tconst store = createStore<DragScrollStore>((set, get) => ({\n\t\tcanGoToNext: true,\n\t\tcanGoToPrev: false,\n\t\tisDragging: false,\n\n\t\t// eslint-disable-next-line perfectionist/sort-objects -- actions should be last\n\t\tactions: {\n\t\t\tcleanupDragListeners: () => {\n\t\t\t\tabortControllerRef.current.mouseMove.abort();\n\t\t\t\tabortControllerRef.current.mouseUp.abort();\n\t\t\t\tabortControllerRef.current.mouseLeave.abort();\n\t\t\t},\n\n\t\t\tgoToNext: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tconst { canGoToNext } = get();\n\t\t\t\tif (!canGoToNext) return;\n\n\t\t\t\tconst amount = getScrollAmount(containerRef.current);\n\n\t\t\t\tcontainerRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\tgoToPrev: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tconst { canGoToPrev } = get();\n\t\t\t\tif (!canGoToPrev) return;\n\n\t\t\t\tconst amount = getScrollAmount(containerRef.current);\n\n\t\t\t\tcontainerRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : -amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? -amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseDown: (event) => {\n\t\t\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\t\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\t// == Create fresh AbortControllers for each drag session (they cannot be reused after abort)\n\t\t\t\tabortControllerRef.current = {\n\t\t\t\t\tmouseLeave: new AbortController(),\n\t\t\t\t\tmouseMove: new AbortController(),\n\t\t\t\t\tmouseUp: new AbortController(),\n\t\t\t\t};\n\n\t\t\t\t// == Update all initial position properties\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.current.x = event.clientX;\n\t\t\t\t\tpositionRef.current.left = containerRef.current.scrollLeft;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.current.y = event.clientY;\n\t\t\t\t\tpositionRef.current.top = containerRef.current.scrollTop;\n\t\t\t\t}\n\n\t\t\t\tupdateCursor(containerRef.current);\n\t\t\t\tset({ isDragging: true });\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\ton(containerRef.current, \"mousemove\", actions.handleMouseMove, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseMove.signal,\n\t\t\t\t});\n\t\t\t\ton(containerRef.current, \"mouseup\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t\ton(containerRef.current, \"mouseleave\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseLeave.signal,\n\t\t\t\t});\n\t\t\t\t// == Document-level mouseup fallback for when user releases outside the container\n\t\t\t\ton(document, \"mouseup\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tonce: true,\n\t\t\t\t\tsignal: abortControllerRef.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseMove: (event) => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst dx = event.clientX - positionRef.current.x;\n\t\t\t\t\tcontainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tconst dy = event.clientY - positionRef.current.y;\n\t\t\t\t\tcontainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t\t\t}\n\t\t\t},\n\n\t\t\thandleMouseUpOrLeave: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tresetCursor(containerRef.current);\n\t\t\t\tset({ isDragging: false });\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.cleanupDragListeners();\n\t\t\t},\n\n\t\t\thandleScroll: throttleByFrame(() => {\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t}),\n\n\t\t\tinitializeResizeObserver: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\t// == Use ResizeObserver to detect when container or children resize\n\t\t\t\tconst resizeObserver = new ResizeObserver(() => actions.updateScrollState());\n\n\t\t\t\tresizeObserver.observe(containerRef.current);\n\n\t\t\t\t// == Also observe children for size changes\n\t\t\t\tfor (const child of containerRef.current.children) {\n\t\t\t\t\tresizeObserver.observe(child);\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = () => {\n\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t};\n\n\t\t\t\treturn cleanup;\n\t\t\t},\n\n\t\t\tsetContainerRef: (element) => {\n\t\t\t\tcontainerRef.current = element as HTMLElement;\n\n\t\t\t\tif (!element) return;\n\n\t\t\t\thandleScrollSnap(element);\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t},\n\n\t\t\tupdateScrollState: () => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst { clientWidth, scrollLeft, scrollWidth } = containerRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollLeft + clientWidth) < scrollWidth,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollLeft) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\") {\n\t\t\t\t\tconst { clientHeight, scrollHeight, scrollTop } = containerRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollTop + clientHeight) < scrollHeight,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollTop) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn store;\n};\n","import { dataAttr, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { composeRefs, composeTwoEventHandlers } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { createDragScrollStore } from \"./drag-scroll-store\";\nimport type { DragScrollPropGetters, UseDragScrollProps, UseDragScrollResult } from \"./types\";\n\nconst getScopeAttrs = (part: string) =>\n\t({\n\t\t\"data-part\": part,\n\t\t\"data-scope\": \"drag-scroll\",\n\t\t\"data-slot\": `drag-scroll-${part}`,\n\t}) as const;\n\nexport const useDragScroll = <TContainerElement extends HTMLElement = HTMLElement>(\n\tprops?: UseDragScrollProps\n): UseDragScrollResult<TContainerElement> => {\n\tconst {\n\t\tdisableInternalStateSubscription = false,\n\t\torientation = \"horizontal\",\n\t\tscrollAmount = \"item\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst containerRef = useRef<TContainerElement>(null);\n\n\tconst storeApi = useMemo(() => {\n\t\treturn createDragScrollStore({ orientation, scrollAmount, usage });\n\t}, [orientation, scrollAmount, usage]);\n\n\tconst actions = storeApi.getState().actions;\n\n\t/* eslint-disable react-hooks/hooks -- ignore */\n\t// eslint-disable-next-line react-x/component-hook-factories -- Ignore\n\tconst useDragScrollStore: UseDragScrollResult<TContainerElement>[\"useDragScrollStore\"] = (selector) => {\n\t\treturn useStore(storeApi as never, selector);\n\t};\n\n\tconst canGoToPrev = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToPrev : null\n\t);\n\n\tconst canGoToNext = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToNext : null\n\t);\n\n\tconst isDragging = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.isDragging : null\n\t);\n\t/* eslint-enable react-hooks/hooks -- ignore */\n\n\tconst refCallback: React.RefCallback<TContainerElement> = useCallbackRef((node) => {\n\t\tcontainerRef.current = node;\n\t\tactions.setContainerRef(node);\n\n\t\tif (!node) return;\n\n\t\tconst cleanupMouseDown = on(node, \"mousedown\", actions.handleMouseDown);\n\t\tconst cleanupScroll = on(node, \"scroll\", actions.handleScroll, {\n\t\t\tpassive: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\tcleanupMouseDown();\n\t\t\tcleanupScroll();\n\t\t};\n\t});\n\n\t// == Update scroll state when children might change (e.g., async loaded content)\n\tuseEffect(() => {\n\t\tconst cleanup = actions.initializeResizeObserver();\n\n\t\treturn cleanup;\n\t}, [actions]);\n\n\tconst getRootProps: DragScrollPropGetters<TContainerElement>[\"getRootProps\"] = useCallbackRef(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"root\"),\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: cnMerge(\"relative\", innerProps?.className),\n\t\t\t};\n\t\t}\n\t);\n\n\tconst getContainerProps: DragScrollPropGetters<TContainerElement>[\"getContainerProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"container\"),\n\t\t\t\t...(!disableInternalStateSubscription && {\n\t\t\t\t\t\"data-dragging\": dataAttr(isDragging),\n\t\t\t\t}),\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`,\n\t\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\t\tinnerProps?.className\n\t\t\t\t),\n\t\t\t\tref: composeRefs(\n\t\t\t\t\trefCallback,\n\t\t\t\t\t(innerProps as { ref?: React.Ref<TContainerElement> } | undefined)?.ref\n\t\t\t\t),\n\t\t\t} as never;\n\t\t},\n\t\t[disableInternalStateSubscription, isDragging, orientation, refCallback, usage]\n\t);\n\n\tconst getItemProps: DragScrollPropGetters<TContainerElement>[\"getItemProps\"] = useCallbackRef(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"item\"),\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: cnMerge(\"snap-center snap-always\", innerProps?.className),\n\t\t\t};\n\t\t}\n\t);\n\n\tconst getPrevButtonProps: DragScrollPropGetters<TContainerElement>[\"getPrevButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToPrev;\n\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"prev-button\"),\n\t\t\t\ttype: \"button\",\n\t\t\t\t...innerProps,\n\t\t\t\t\"aria-disabled\": dataAttr(isDisabled),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll back\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick),\n\t\t\t};\n\t\t},\n\t\t[actions.goToPrev, canGoToPrev]\n\t);\n\n\tconst getNextButtonProps: DragScrollPropGetters<TContainerElement>[\"getNextButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToNext;\n\n\t\t\treturn {\n\t\t\t\t...getScopeAttrs(\"next-button\"),\n\t\t\t\ttype: \"button\",\n\t\t\t\t...innerProps,\n\t\t\t\t\"aria-disabled\": dataAttr(isDisabled),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll forward\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick),\n\t\t\t};\n\t\t},\n\t\t[actions.goToNext, canGoToNext]\n\t);\n\n\tconst propGetters = useMemo<DragScrollPropGetters<TContainerElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tgetContainerProps,\n\t\t\t\tgetItemProps,\n\t\t\t\tgetNextButtonProps,\n\t\t\t\tgetPrevButtonProps,\n\t\t\t\tgetRootProps,\n\t\t\t}) satisfies DragScrollPropGetters<TContainerElement>,\n\t\t[getPrevButtonProps, getContainerProps, getItemProps, getNextButtonProps, getRootProps]\n\t);\n\n\tconst stableUseDragScrollStore = useCallbackRef(useDragScrollStore);\n\n\tconst result = useMemo<UseDragScrollResult<TContainerElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcontainerRef,\n\t\t\t\tdisableInternalStateSubscription,\n\t\t\t\tpropGetters,\n\t\t\t\tstoreApi,\n\t\t\t\tuseDragScrollStore: stableUseDragScrollStore,\n\t\t\t}) satisfies UseDragScrollResult<TContainerElement>,\n\t\t[propGetters, disableInternalStateSubscription, storeApi, stableUseDragScrollStore]\n\t);\n\n\treturn result;\n};\n","import { createCustomContext } from \"@zayne-labs/toolkit-react\";\nimport { createReactStoreContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { DragScrollStore, UseDragScrollResult } from \"./types\";\n\nconst [DragScrollStoreContextProvider, useDragScrollStoreContext] =\n\tcreateReactStoreContext<DragScrollStore>({\n\t\thookName: \"useDragScrollStoreContext\",\n\t\tname: \"DragScrollStoreContext\",\n\t\tproviderName: \"DragScrollRoot\",\n\t});\n\nexport type DragScrollRootContextType<TElement extends HTMLElement = HTMLElement> = Pick<\n\tUseDragScrollResult<TElement>,\n\t\"containerRef\" | \"disableInternalStateSubscription\" | \"propGetters\"\n>;\n\nconst [DragScrollRootContextProvider, useDragScrollRootContext] =\n\tcreateCustomContext<DragScrollRootContextType>({\n\t\thookName: \"useDragScrollRootContext\",\n\t\tname: \"DragScrollRootContext\",\n\t\tproviderName: \"DragScrollRoot\",\n\t});\n\nexport {\n\tDragScrollRootContextProvider,\n\tDragScrollStoreContextProvider,\n\tuseDragScrollRootContext,\n\tuseDragScrollStoreContext,\n};\n","\"use client\";\n\nimport { useCompareSelector } from \"@zayne-labs/toolkit-react\";\nimport type { PolymorphicPropsStrict } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction, type SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport { Slot } from \"@/components/common/slot\";\nimport {\n\tDragScrollRootContextProvider,\n\tDragScrollStoreContextProvider,\n\tuseDragScrollRootContext,\n\tuseDragScrollStoreContext,\n\ttype DragScrollRootContextType,\n} from \"./drag-scroll-context\";\nimport type { DragScrollStore, PartInputProps, UseDragScrollProps } from \"./types\";\nimport { useDragScroll } from \"./use-drag-scroll\";\n\n/* eslint-disable perfectionist/sort-intersection-types -- I need non-standard props to come first */\n\nexport type DragScrollRootProps = UseDragScrollProps & {\n\tasChild?: boolean;\n\tchildren: React.ReactNode;\n} & PartInputProps[\"root\"];\n\nexport function DragScrollRoot<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, DragScrollRootProps>\n) {\n\tconst { as: Element = \"div\", asChild, children, ...restOfProps } = props;\n\n\tconst { containerRef, disableInternalStateSubscription, propGetters, storeApi } =\n\t\tuseDragScroll(restOfProps);\n\n\tconst rootContextValue = useMemo<DragScrollRootContextType>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcontainerRef,\n\t\t\t\tdisableInternalStateSubscription,\n\t\t\t\tpropGetters,\n\t\t\t}) satisfies DragScrollRootContextType,\n\t\t[containerRef, disableInternalStateSubscription, propGetters]\n\t);\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn (\n\t\t<DragScrollStoreContextProvider store={storeApi}>\n\t\t\t<DragScrollRootContextProvider value={rootContextValue}>\n\t\t\t\t<Component {...propGetters.getRootProps(restOfProps)}>{children}</Component>\n\t\t\t</DragScrollRootContextProvider>\n\t\t</DragScrollStoreContextProvider>\n\t);\n}\n\nexport type DragScrollContextProps<TSlice> = {\n\tchildren: React.ReactNode | ((context: TSlice) => React.ReactNode);\n\tselector?: SelectorFn<DragScrollStore, TSlice>;\n};\n\nexport function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>) {\n\tconst { children, selector } = props;\n\n\tconst dragScrollCtx = useDragScrollStoreContext(useCompareSelector(selector));\n\n\tconst resolvedChildren = isFunction(children) ? children(dragScrollCtx) : children;\n\n\treturn resolvedChildren;\n}\n\nexport type DragScrollContainerProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"container\"];\n\nexport function DragScrollContainer<TElement extends React.ElementType = \"ul\">(\n\tprops: PolymorphicPropsStrict<TElement, DragScrollContainerProps>\n) {\n\tconst { as: Element = \"ul\", asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn <Component {...propGetters.getContainerProps(restOfProps)} />;\n}\n\nexport type DragScrollItemProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"item\"];\n\nexport function DragScrollItem<TElement extends React.ElementType = \"li\">(\n\tprops: PolymorphicPropsStrict<TElement, DragScrollItemProps>\n) {\n\tconst { as: Element = \"li\", asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn <Component {...propGetters.getItemProps(restOfProps)} />;\n}\n\nexport type DragScrollPrevProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"prevButton\"];\n\nexport function DragScrollPrev(props: DragScrollPrevProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : \"button\";\n\n\treturn <Component {...propGetters.getPrevButtonProps(restOfProps)} />;\n}\n\nexport type DragScrollNextProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"nextButton\"];\n\nexport function DragScrollNext(props: DragScrollNextProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : \"button\";\n\n\treturn <Component {...propGetters.getNextButtonProps(restOfProps)} />;\n}\n\n/* eslint-enable perfectionist/sort-intersection-types -- I need non-standard props to come first */\n","export {\n\tDragScrollContext as Context,\n\tDragScrollItem as Item,\n\tDragScrollNext as Next,\n\tDragScrollPrev as Prev,\n\tDragScrollRoot as Root,\n\tDragScrollContainer as Container,\n} from \"./drag-scroll\";\n"],"mappings":"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"}

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

@@ -2,7 +2,6 @@ import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/ut
 import * as _zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
 import { Awaitable, SelectorFn, UnionDiscriminator } 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";
 import { FileMeta, FileOrFileMeta, FileValidationErrorContextEach, FileValidationHooksAsync, FileValidationSettingsAsync } from "@zayne-labs/toolkit-core";
@@ -91,47 +90,47 @@ type SharedInputProps = {
 interface PartProps {
   container: {
     input: PartProps["container"]["output"] & SharedInputProps;
-    output: InferProps<HTMLElement> & RecordForDataAttr;
+    output: RecordForDataAttr & InferProps<HTMLElement>;
   };
   fileItem: {
     input: PartProps["fileItem"]["output"] & SharedInputProps;
-    output: InferProps<"li"> & RecordForDataAttr;
+    output: RecordForDataAttr & InferProps<"li">;
   };
   fileItemClear: {
     input: PartProps["fileItemClear"]["output"];
-    output: InferProps<"button"> & RecordForDataAttr;
+    output: RecordForDataAttr & InferProps<"button">;
   };
   fileItemDelete: {
     input: Partial<FileStateOrIDProp> & PartProps["fileItemDelete"]["output"];
-    output: InferProps<"button"> & RecordForDataAttr;
+    output: RecordForDataAttr & InferProps<"button">;
   };
   fileItemMetadata: {
-    input: PartProps["fileItemMetadata"]["output"] & SharedInputProps;
-    output: InferProps<"div"> & RecordForDataAttr;
+    input: SharedInputProps & PartProps["fileItemMetadata"]["output"];
+    output: RecordForDataAttr & InferProps<"div">;
   };
   fileItemPreview: {
-    input: PartProps["fileItemPreview"]["output"] & SharedInputProps;
-    output: InferProps<"span"> & RecordForDataAttr;
+    input: SharedInputProps & PartProps["fileItemPreview"]["output"];
+    output: RecordForDataAttr & InferProps<"span">;
   };
   fileItemProgress: {
-    input: PartProps["fileItemProgress"]["output"] & SharedInputProps & {
+    input: SharedInputProps & {
       variant?: "circular" | "fill" | "linear";
-    };
-    output: InferProps<"span"> & RecordForDataAttr;
+    } & PartProps["fileItemProgress"]["output"];
+    output: RecordForDataAttr & InferProps<"span">;
   };
   fileList: {
-    input: PartProps["fileList"]["output"] & SharedInputProps & {
+    input: SharedInputProps & {
       orientation?: "horizontal" | "vertical";
-    };
-    output: InferProps<"ul"> & RecordForDataAttr;
+    } & PartProps["fileList"]["output"];
+    output: RecordForDataAttr & InferProps<"ul">;
   };
   input: {
     input: PartProps["input"]["output"];
-    output: InferProps<"input"> & RecordForDataAttr;
+    output: RecordForDataAttr & InferProps<"input">;
   };
   trigger: {
     input: PartProps["trigger"]["output"];
-    output: InferProps<"button"> & RecordForDataAttr;
+    output: RecordForDataAttr & InferProps<"button">;
   };
 }
 type DropZonePropGetters = { [Key in keyof PartProps as `get${Capitalize<Key>}Props`]: (props: PartProps[Key]["input"]) => PartProps[Key]["output"] };
@@ -309,22 +308,22 @@ type DropZoneContextProps<TSlice> = {
   selector?: SelectorFn<DropZoneStore, TSlice>;
 };
 declare function DropZoneContext<TSlice = DropZoneStore>(props: DropZoneContextProps<TSlice>): react.ReactNode;
-type DropZoneContainerProps = PartInputProps["container"] & {
+type DropZoneContainerProps = {
   asChild?: boolean;
-};
+} & PartInputProps["container"];
 declare function DropZoneContainer<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneContainerProps>): react_jsx_runtime0.JSX.Element;
-type DropZoneInputProps = PartInputProps["input"] & {
+type DropZoneInputProps = {
   asChild?: boolean;
-};
+} & PartInputProps["input"];
 declare function DropZoneInput(props: DropZoneInputProps): react_jsx_runtime0.JSX.Element;
-type DropZoneAreaProps<TSlice> = DropZoneContextProps<TSlice> & PartInputProps["container"] & {
+type DropZoneAreaProps<TSlice = DropZoneStore> = DropZoneContextProps<TSlice> & {
   classNames?: Partial<Record<Extract<keyof PartInputProps, "container" | "input">, string>>;
   extraProps?: Partial<Pick<PartInputProps, "container" | "input">>;
-};
+} & PartInputProps["container"];
 declare function DropZoneArea<TSlice = DropZoneStore>(props: DropZoneAreaProps<TSlice>): react_jsx_runtime0.JSX.Element;
-type DropZoneTriggerProps = PartInputProps["trigger"] & {
+type DropZoneTriggerProps = {
   asChild?: boolean;
-};
+} & PartInputProps["trigger"];
 declare function DropZoneTrigger(props: DropZoneTriggerProps): react_jsx_runtime0.JSX.Element;
 type ListPerItemContext = Pick<DropZoneStore, "actions"> & {
   array: DropZoneStore["fileStateArray"];
@@ -340,24 +339,32 @@ type FileListManualListVariant = {
   children: React.ReactNode | ((context: ListManualListContext) => React.ReactNode);
   renderMode: "manual-list";
 };
-type DropZoneFileListProps = Omit<PartInputProps["fileList"], "children"> & {
+type DropZoneFileListProps = {
   asChild?: boolean;
   forceMount?: boolean;
-} & (FileListManualListVariant | FileListPerItemVariant);
+} & (FileListManualListVariant | FileListPerItemVariant) & Omit<PartInputProps["fileList"], "children">;
 declare function DropZoneFileList<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DropZoneFileListProps>): react_jsx_runtime0.JSX.Element;
-type DropZoneFileItemProps = FileItemContextType & PartInputProps["fileItem"] & {
+type DropZoneFileItemProps = FileItemContextType & {
   asChild?: boolean;
-};
+} & PartInputProps["fileItem"];
 declare function DropZoneFileItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProps>): react_jsx_runtime0.JSX.Element;
-type DropZoneFileItemDeleteProps = PartInputProps["fileItemDelete"] & {
+type DropZoneFileItemDeleteProps = {
   asChild?: boolean;
-};
+} & PartInputProps["fileItemDelete"];
 declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): react_jsx_runtime0.JSX.Element;
-type DropZoneFileItemProgressProps = PartInputProps["fileItemProgress"] & {
+type DropZoneFileItemProgressProps = {
   asChild?: boolean;
+  classNames?: {
+    circular?: {
+      root?: string;
+      svgCircleOne?: string;
+      svgCircleTwo?: string;
+      svgRoot?: string;
+    };
+  };
   forceMount?: boolean;
   size?: number;
-};
+} & PartInputProps["fileItemProgress"];
 declare function DropZoneFileItemProgress<TElement extends React.ElementType = "span">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProgressProps>): react_jsx_runtime0.JSX.Element | null;
 type NodeCtx<TElement extends React.ElementType> = {
   getProps: (innerProps: Partial<InferProps<TElement>>) => InferProps<TElement>;
@@ -383,15 +390,15 @@ type RenderPreviewObject = {
 };
 type RenderPreviewFn = (context: RenderPropContext) => RenderPreviewObject;
 type RenderPreview = RenderPreviewFn | RenderPreviewObject;
-type DropZoneFileItemPreviewProps = Omit<PartInputProps["fileItemPreview"], "children"> & Partial<Pick<FileItemContextType, "fileState">> & {
+type DropZoneFileItemPreviewProps = Partial<Pick<FileItemContextType, "fileState">> & {
   asChild?: boolean;
   children?: React.ReactNode | ((context: RenderPropContext & {
     fallbackPreview: () => React.ReactNode;
   }) => React.ReactNode);
   renderPreview?: boolean | RenderPreview;
-};
+} & Omit<PartInputProps["fileItemPreview"], "children">;
 declare function DropZoneFileItemPreview<TElement extends React.ElementType>(props: PolymorphicPropsStrict<TElement, DropZoneFileItemPreviewProps>): react_jsx_runtime0.JSX.Element | null;
-type DropZoneFileItemMetadataProps = Omit<PartInputProps["fileItemMetadata"], "children"> & Partial<Pick<FileItemContextType, "fileState">> & {
+type DropZoneFileItemMetadataProps = Partial<Pick<FileItemContextType, "fileState">> & {
   asChild?: boolean;
   children?: React.ReactNode | ((context: Pick<FileItemContextType, "fileState">) => React.ReactNode);
   classNames?: {
@@ -399,12 +406,12 @@ type DropZoneFileItemMetadataProps = Omit<PartInputProps["fileItemMetadata"], "c
     size?: string;
   };
   size?: "default" | "sm";
-};
+} & Omit<PartInputProps["fileItemMetadata"], "children">;
 declare function DropZoneFileItemMetadata(props: DropZoneFileItemMetadataProps): react_jsx_runtime0.JSX.Element | null;
-type DropZoneFileClearProps = PartInputProps["fileItemClear"] & {
+type DropZoneFileClearProps = {
   asChild?: boolean;
   forceMount?: boolean;
-};
+} & PartInputProps["fileItemClear"];
 declare function DropZoneFileClear(props: DropZoneFileClearProps): react_jsx_runtime0.JSX.Element | null;
 declare namespace drop_zone_parts_d_exports {
   export { DropZoneArea as Area, DropZoneContainer as Container, DropZoneContext as Context, DropZoneFileClear as FileClear, DropZoneFileItem as FileItem, DropZoneFileItemDelete as FileItemDelete, DropZoneFileItemMetadata as FileItemMetadata, DropZoneFileItemPreview as FileItemPreview, DropZoneFileItemProgress as FileItemProgress, DropZoneFileList as FileList, DropZoneInput as Input, DropZoneRoot as Root, DropZoneTrigger as Trigger };
@@ -413,5 +420,5 @@ declare namespace drop_zone_parts_d_exports {
 //#region src/components/ui/drop-zone/use-drop-zone.d.ts
 declare const useDropZone: (props?: UseDropZoneProps) => UseDropZoneResult;
 //#endregion
-export { drop_zone_parts_d_exports as DropZone, type DropZoneActions, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, type DropZoneState, type DropZoneStore, DropZoneTrigger, type FileState, type UseDropZoneProps, type UseDropZoneResult, useDropZone, useDropZoneStoreContext };
+export { drop_zone_parts_d_exports as DropZone, type DropZoneActions, DropZoneArea, DropZoneAreaProps, DropZoneContainer, DropZoneContainerProps, DropZoneContext, DropZoneContextProps, DropZoneError, DropZoneFileClear, DropZoneFileClearProps, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemDeleteProps, DropZoneFileItemMetadata, DropZoneFileItemMetadataProps, DropZoneFileItemPreview, DropZoneFileItemPreviewProps, DropZoneFileItemProgress, DropZoneFileItemProgressProps, DropZoneFileItemProps, DropZoneFileList, DropZoneFileListProps, DropZoneInput, DropZoneInputProps, DropZoneRoot, DropZoneRootProps, type DropZoneState, type DropZoneStore, DropZoneTrigger, DropZoneTriggerProps, type FileState, type UseDropZoneProps, type UseDropZoneResult, useDropZone, useDropZoneStoreContext };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/ui/drop-zone/index.js

@@ -1,10 +1,9 @@
 "use client";
-
-import { t as __exportAll } from "../../chunk-BYypO7fO.js";
-import { n as SlotRoot } from "../../slot-parts-CAyHw8R-.js";
-import { n as For } from "../../getElementList-CtQvQXjS.js";
-import { t as Presence } from "../../presence-DCY8KkO1.js";
-import { t as cnMerge } from "../../cn-2hIN1AQ7.js";
+import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
+import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
+import { n as For } from "../../for-DGTMIS0w.js";
+import { t as Presence } from "../../presence-CWOGx-be.js";
+import { t as cnMerge } from "../../cn-Bbh2G587.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
 import { isBoolean, isFile, isFunction, isNumber, isObject, isString } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useMemo, useRef } from "react";
@@ -12,7 +11,6 @@ import { createCustomContext, useCallbackRef, useCompareSelector, useCompareValu
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createFileURL, createStore, dataAttr, formatBytes, generateFileID, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
-
 //#region src/components/ui/drop-zone/drop-zone-context.ts
 const [DropZoneStoreContextProvider, useDropZoneStoreContext] = createReactStoreContext({
 	hookName: "useDropZoneStoreContext",
@@ -31,7 +29,6 @@ const [FileItemContextProvider, useFileItemContext] = createCustomContext({
 	providerName: "FileItem",
 	strict: false
 });
-
 //#endregion
 //#region src/components/ui/drop-zone/icons.tsx
 const FileVideoIcon = (props) => /* @__PURE__ */ jsx("svg", {
@@ -155,7 +152,6 @@ const FileIcon = (props) => /* @__PURE__ */ jsx("svg", {
 		children: [/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })]
 	})
 });
-
 //#endregion
 //#region src/components/ui/drop-zone/utils.ts
 const generateFileID$1 = generateFileID;
@@ -217,7 +213,6 @@ const getErrorContext = (error) => {
 		originalError: actualError
 	};
 };
-
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone-store.ts
 const createDropZoneStore = (storeContext) => {
@@ -441,7 +436,6 @@ const createDropZoneStore = (storeContext) => {
 	});
 	return store;
 };
-
 //#endregion
 //#region src/components/ui/drop-zone/use-drop-zone.ts
 const useDropZone = (props) => {
@@ -598,7 +592,7 @@ const useDropZone = (props) => {
 			...getDropZoneScopeAttrs("file-item-progress"),
 			role: "progressbar",
 			...restOfInnerProps,
-			...!unstyled && { className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", variant === "fill" && `absolute inset-0 bg-zu-primary/50 transition-[clip-path] duration-300 ease-linear [clip-path:var(--clip-path)]`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className) }
+			...!unstyled && { className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-1/2", variant === "fill" && `absolute inset-0 bg-zu-primary/50 transition-[clip-path] duration-300 ease-linear [clip-path:var(--clip-path)]`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className) }
 		};
 	}, [globalUnstyled]);
 	const getFileItemDeleteProps = useCallback((innerProps) => {
@@ -680,7 +674,6 @@ const useDropZone = (props) => {
 		stableUseDropZoneStore
 	]);
 };
-
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone.tsx
 function DropZoneRoot(props) {
@@ -810,7 +803,7 @@ function DropZoneFileItemDelete(props) {
 	}) });
 }
 function DropZoneFileItemProgress(props) {
-	const { as: Element = "span", asChild, forceMount = false, size = 40, variant = "linear", ...restOfProps } = props;
+	const { as: Element = "span", asChild, className, classNames, forceMount = false, size = 40, variant = "linear", ...restOfProps } = props;
 	const fileState = useFileItemContext()?.fileState;
 	const { propGetters } = useDropZoneRootContext();
 	if (!fileState) return null;
@@ -826,22 +819,23 @@ function DropZoneFileItemProgress(props) {
 			const circumference = 2 * Math.PI * ((size - 4) / 2);
 			const strokeDashoffset = circumference - currentProgress / 100 * circumference;
 			return /* @__PURE__ */ jsx(Component, {
+				className: cnMerge(className, classNames?.circular?.root),
 				...componentProps,
 				children: /* @__PURE__ */ jsxs("svg", {
-					className: "-rotate-90",
+					className: cnMerge("-rotate-90", classNames?.circular?.svgRoot),
 					width: size,
 					height: size,
 					viewBox: `0 0 ${size} ${size}`,
 					fill: "none",
 					stroke: "currentColor",
 					children: [/* @__PURE__ */ jsx("circle", {
-						className: "text-zu-primary/20",
+						className: cnMerge("text-zu-primary/20", classNames?.circular?.svgCircleOne),
 						strokeWidth: "2",
 						cx: size / 2,
 						cy: size / 2,
 						r: (size - 4) / 2
 					}), /* @__PURE__ */ jsx("circle", {
-						className: "text-zu-primary transition-[stroke-dashoffset] duration-300 ease-linear",
+						className: cnMerge("text-zu-primary transition-[stroke-dashoffset] duration-300 ease-linear", classNames?.circular?.svgCircleTwo),
 						strokeWidth: "2",
 						strokeLinecap: "round",
 						strokeDasharray: circumference,
@@ -856,16 +850,22 @@ function DropZoneFileItemProgress(props) {
 		case "fill": {
 			const topInset = 100 - currentProgress;
 			return /* @__PURE__ */ jsx(Component, {
+				className,
 				...componentProps,
-				style: { "--clip-path": `inset(${topInset}% 0% 0% 0%)` }
+				style: {
+					"--clip-path": `inset(${topInset}% 0% 0% 0%)`,
+					...componentProps.style
+				}
 			});
 		}
 		case "linear": return /* @__PURE__ */ jsx(Component, {
+			className: cnMerge("inline-block size-full grow translate-x-(--translate-distance) bg-zu-primary transition-transform duration-300 ease-linear", className),
 			...componentProps,
-			children: /* @__PURE__ */ jsx("span", {
-				className: "inline-block size-full grow translate-x-(--translate-distance) bg-zu-primary transition-transform duration-300 ease-linear",
-				style: { "--translate-distance": `-${100 - currentProgress}%` }
-			})
+			style: {
+				"--translate-distance": `-${100 - currentProgress}%`,
+				...componentProps.style
+			},
+			children: /* @__PURE__ */ jsx("span", {})
 		});
 		default: return null;
 	}
@@ -1011,7 +1011,6 @@ function DropZoneFileClear(props) {
 	if (!(forceMount || fileCount > 0)) return null;
 	return /* @__PURE__ */ jsx(asChild ? SlotRoot : "button", { ...propGetters.getFileItemClearProps(restOfProps) });
 }
-
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone-parts.ts
 var drop_zone_parts_exports = /* @__PURE__ */ __exportAll({
@@ -1029,7 +1028,7 @@ var drop_zone_parts_exports = /* @__PURE__ */ __exportAll({
 	Root: () => DropZoneRoot,
 	Trigger: () => DropZoneTrigger
 });
-
 //#endregion
 export { drop_zone_parts_exports as DropZone, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, DropZoneTrigger, useDropZone, useDropZoneStoreContext };
+
 //# sourceMappingURL=index.js.map