farm-react 1.0.9 → 1.0.11

package/dist/cjs/hooks/slider/useSliderAutoPlay.d.ts

@@ -0,0 +1,33 @@
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderAutoPlay
+ * -----------------------------------------------------------------------------
+ *
+ * @description :- React hook that manages autoplay behavior for a slider component.
+ * Responsibilities:
+ * - Starts an interval-based autoplay when enabled
+ * - Stops autoplay safely on cleanup or when conditions change
+ * - Prevents multiple intervals from running simultaneously
+ * - Respects loop and transformation states to avoid invalid transitions
+ * Autoplay will:
+ * - Start only when `enable` is true
+ * - Pause automatically when the slider is transforming
+ * - Stop and clean up intervals on unmount
+ * @param autoPlayConfig Configuration object controlling autoplay behavior
+ * @param handleNextSlide Callback invoked to move to the next slide
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+import { type RefObject } from 'react';
+import type { SlickSliderAutoPlayConfig } from '../../components/SlickSlider';
+interface SlickSliderAutoplayProps {
+    autoPlayConfig: SlickSliderAutoPlayConfig;
+    handleNextSlide: () => void;
+    isAllSlidesVisible: boolean;
+    loop: boolean;
+    sliderWrapperRef?: RefObject<HTMLDivElement | null>;
+}
+declare function useSliderAutoplay({ autoPlayConfig, handleNextSlide, isAllSlidesVisible, loop, }: Readonly<SlickSliderAutoplayProps>): void;
+export default useSliderAutoplay;

package/dist/cjs/hooks/slider/useSliderAutoPlay.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderAutoPlay
+ * -----------------------------------------------------------------------------
+ *
+ * @description :- React hook that manages autoplay behavior for a slider component.
+ * Responsibilities:
+ * - Starts an interval-based autoplay when enabled
+ * - Stops autoplay safely on cleanup or when conditions change
+ * - Prevents multiple intervals from running simultaneously
+ * - Respects loop and transformation states to avoid invalid transitions
+ * Autoplay will:
+ * - Start only when `enable` is true
+ * - Pause automatically when the slider is transforming
+ * - Stop and clean up intervals on unmount
+ * @param autoPlayConfig Configuration object controlling autoplay behavior
+ * @param handleNextSlide Callback invoked to move to the next slide
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+var react_1 = require("react");
+var helpers_1 = require("../../helpers");
+var Utils_1 = require("../../Utils");
+function useSliderAutoplay(_a) {
+    var autoPlayConfig = _a.autoPlayConfig, handleNextSlide = _a.handleNextSlide, isAllSlidesVisible = _a.isAllSlidesVisible, loop = _a.loop;
+    // Destruct props
+    var _b = (0, helpers_1.destructObj)(autoPlayConfig), _c = _b.enable, enable = _c === void 0 ? false : _c, _d = _b.interval, interval = _d === void 0 ? 2000 : _d;
+    // Refs
+    var timerRef = (0, react_1.useRef)(null);
+    /**
+     * Function initializes autoplay by creating a single interval timer.
+     * On each interval tick, it triggers the handleNextSlide callback
+     * to advance the slider.
+     */
+    var startAutoPlay = (0, react_1.useCallback)(function () {
+        if (!enable || timerRef.current)
+            return;
+        timerRef.current = Utils_1.safeWindow === null || Utils_1.safeWindow === void 0 ? void 0 : Utils_1.safeWindow.setInterval(function () {
+            handleNextSlide();
+        }, interval);
+    }, [enable, interval, handleNextSlide]);
+    /** Function stops the active autoplay interval and resets the timer reference. */
+    var clearAutoplayTimer = (0, react_1.useCallback)(function () {
+        if (!(0, helpers_1.isNullOrUndefined)(timerRef.current)) {
+            Utils_1.safeWindow === null || Utils_1.safeWindow === void 0 ? void 0 : Utils_1.safeWindow.clearInterval(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!loop || isAllSlidesVisible)
+            return undefined;
+        startAutoPlay();
+        // TODO: Enable pause-on-hover by attaching mouseenter/mouseleave events to start and stop autoplay when hover interaction is active.
+        // const container = sliderWrapperRef?.current;
+        // if (pauseOnHover) {
+        // 	if (isNullOrUndefined(container)) return;
+        // 	container.addEventListener('mouseenter', clearAutoplayTimer);
+        // 	container.addEventListener('mouseleave', startAutoPlay);
+        // }
+        return function () {
+            clearAutoplayTimer();
+            // if (isNullOrUndefined(container)) return;
+            // container.removeEventListener('mouseenter', clearAutoplayTimer);
+            // container.removeEventListener('mouseleave', startAutoPlay);
+        };
+    }, [loop, isAllSlidesVisible, startAutoPlay, clearAutoplayTimer]);
+}
+exports.default = useSliderAutoplay;
+//# sourceMappingURL=useSliderAutoPlay.js.map

package/dist/cjs/hooks/slider/useSliderAutoPlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderAutoPlay.js","sourceRoot":"","sources":["../../../../src/hooks/slider/useSliderAutoPlay.ts"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,+BAAsE;AACtE,yCAA8D;AAE9D,qCAAwC;AAUxC,SAAS,iBAAiB,CAAC,EAKU;QAJnC,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,kBAAkB,wBAAA,EAClB,IAAI,UAAA;IAEJ,iBAAiB;IACX,IAAA,KAAsC,IAAA,qBAAW,EAAC,cAAc,CAAC,EAA/D,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EAAE,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAgC,CAAA;IAEvE,OAAO;IACP,IAAM,QAAQ,GAAG,IAAA,cAAM,EAA4B,IAAI,CAAC,CAAA;IAExD;;;;OAIG;IACH,IAAM,aAAa,GAAG,IAAA,mBAAW,EAAC;QAChC,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,OAAO;YAAE,OAAM;QACvC,QAAQ,CAAC,OAAO,GAAG,kBAAU,aAAV,kBAAU,uBAAV,kBAAU,CAAE,WAAW,CAAC;YACzC,eAAe,EAAE,CAAA;QACnB,CAAC,EAAE,QAAQ,CAAC,CAAA;IACd,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAEvC,kFAAkF;IAClF,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC;QACrC,IAAI,CAAC,IAAA,2BAAiB,EAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YACzC,kBAAU,aAAV,kBAAU,uBAAV,kBAAU,CAAE,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;YAC3C,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,IAAI,IAAI,kBAAkB;YAAE,OAAO,SAAS,CAAA;QACjD,aAAa,EAAE,CAAA;QACf,qIAAqI;QACrI,+CAA+C;QAC/C,sBAAsB;QACtB,6CAA6C;QAC7C,iEAAiE;QACjE,4DAA4D;QAC5D,IAAI;QAEJ,OAAO;YACL,kBAAkB,EAAE,CAAA;YACpB,4CAA4C;YAC5C,mEAAmE;YACnE,8DAA8D;QAChE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAA;AACnE,CAAC;AAED,kBAAe,iBAAiB,CAAA"}

package/dist/cjs/hooks/slider/useSliderBreakpoints.d.ts

@@ -0,0 +1,35 @@
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderBreakpoint
+ * -----------------------------------------------------------------------------
+ *
+ * @description Resolves responsive slider configuration based on viewport width.
+ * Applies the first matching breakpoint over the base config and updates
+ * the result on window resize. Uses deep comparison to avoid unnecessary
+ * re-renders.
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+import type { SlickSliderAnimationConfig, SlickSliderAutoPlayConfig } from '../../components/SlickSlider';
+export interface SlickSliderConfig {
+    activeSlide: number;
+    animationConfig: SlickSliderAnimationConfig;
+    autoPlayConfig: SlickSliderAutoPlayConfig;
+    breakpoint?: number;
+    draggable: {
+        dragThreshold?: number;
+        enableDrag?: boolean;
+    };
+    gap: number;
+    loop: boolean;
+    slideToScroll: number;
+    slideToShow: number;
+}
+export interface SliderBreakpointProps {
+    breakpoints?: SlickSliderConfig[];
+    config: SlickSliderConfig;
+}
+declare function useSliderBreakpoints({ breakpoints, config }: SliderBreakpointProps): SlickSliderConfig;
+export default useSliderBreakpoints;

package/dist/cjs/hooks/slider/useSliderBreakpoints.js

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderBreakpoint
+ * -----------------------------------------------------------------------------
+ *
+ * @description Resolves responsive slider configuration based on viewport width.
+ * Applies the first matching breakpoint over the base config and updates
+ * the result on window resize. Uses deep comparison to avoid unnecessary
+ * re-renders.
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var helpers_1 = require("../../helpers");
+var Utils_1 = require("../../Utils");
+function useSliderBreakpoints(_a) {
+    var breakpoints = _a.breakpoints, config = _a.config;
+    // States
+    var _b = (0, react_1.useState)(config), sliderConfig = _b[0], setSliderConfig = _b[1];
+    // Hooks
+    (0, react_1.useEffect)(function () {
+        if ((0, helpers_1.isObjectEmpty)(config)) {
+            setSliderConfig(config);
+            return undefined;
+        }
+        function resolveBreakpointConfig() {
+            var viewportWidth = Utils_1.safeWindow === null || Utils_1.safeWindow === void 0 ? void 0 : Utils_1.safeWindow.innerWidth;
+            // Find the first breakpoint that matches current viewport
+            var matchedBreakpoint = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.find(function (bp) { return viewportWidth && (bp === null || bp === void 0 ? void 0 : bp.breakpoint) && viewportWidth <= bp.breakpoint; });
+            // Merge base config with breakpoint overrides
+            return (0, helpers_1.isObjectNotEmpty)(matchedBreakpoint) ? tslib_1.__assign(tslib_1.__assign({}, config), matchedBreakpoint) : config;
+        }
+        function updateConfig() {
+            var resolvedConfig = resolveBreakpointConfig();
+            // Avoid unnecessary updates
+            if (!(0, helpers_1.deepCompareObjects)(sliderConfig, resolvedConfig)) {
+                setSliderConfig(resolvedConfig);
+            }
+        }
+        updateConfig();
+        Utils_1.safeWindow === null || Utils_1.safeWindow === void 0 ? void 0 : Utils_1.safeWindow.addEventListener('resize', updateConfig);
+        return function () {
+            Utils_1.safeWindow === null || Utils_1.safeWindow === void 0 ? void 0 : Utils_1.safeWindow.removeEventListener('resize', updateConfig);
+        };
+    }, [config, breakpoints]);
+    return sliderConfig;
+}
+exports.default = useSliderBreakpoints;
+//# sourceMappingURL=useSliderBreakpoints.js.map

package/dist/cjs/hooks/slider/useSliderBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderBreakpoints.js","sourceRoot":"","sources":["../../../../src/hooks/slider/useSliderBreakpoints.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;;;AAEH,+BAA2C;AAC3C,yCAAmF;AAEnF,qCAAwC;AAqBxC,SAAS,oBAAoB,CAAC,EAA8C;QAA5C,WAAW,iBAAA,EAAE,MAAM,YAAA;IACjD,SAAS;IACH,IAAA,KAAkC,IAAA,gBAAQ,EAAC,MAAM,CAAC,EAAjD,YAAY,QAAA,EAAE,eAAe,QAAoB,CAAA;IAExD,QAAQ;IACR,IAAA,iBAAS,EAAC;QACR,IAAI,IAAA,uBAAa,EAAC,MAAM,CAAC,EAAE,CAAC;YAC1B,eAAe,CAAC,MAAM,CAAC,CAAA;YACvB,OAAO,SAAS,CAAA;QAClB,CAAC;QAED,SAAS,uBAAuB;YAC9B,IAAM,aAAa,GAAG,kBAAU,aAAV,kBAAU,uBAAV,kBAAU,CAAE,UAAU,CAAA;YAE5C,0DAA0D;YAC1D,IAAM,iBAAiB,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CACzC,UAAC,EAAE,IAAK,OAAA,aAAa,KAAI,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,UAAU,CAAA,IAAI,aAAa,IAAI,EAAE,CAAC,UAAU,EAAjE,CAAiE,CAC1E,CAAA;YAED,8CAA8C;YAC9C,OAAO,IAAA,0BAAgB,EAAC,iBAAiB,CAAC,CAAC,CAAC,uCAAM,MAAM,GAAK,iBAAiB,EAAG,CAAC,CAAC,MAAM,CAAA;QAC3F,CAAC;QAED,SAAS,YAAY;YACnB,IAAM,cAAc,GAAG,uBAAuB,EAAE,CAAA;YAChD,4BAA4B;YAC5B,IAAI,CAAC,IAAA,4BAAkB,EAAC,YAAY,EAAE,cAAc,CAAC,EAAE,CAAC;gBACtD,eAAe,CAAC,cAAc,CAAC,CAAA;YACjC,CAAC;QACH,CAAC;QAED,YAAY,EAAE,CAAA;QACd,kBAAU,aAAV,kBAAU,uBAAV,kBAAU,CAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAEpD,OAAO;YACL,kBAAU,aAAV,kBAAU,uBAAV,kBAAU,CAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACzD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAA;IAEzB,OAAO,YAAY,CAAA;AACrB,CAAC;AAED,kBAAe,oBAAoB,CAAA"}

package/dist/cjs/hooks/slider/useSliderDimension.d.ts

@@ -0,0 +1,40 @@
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderDimension
+ * -----------------------------------------------------------------------------
+ *
+ * @description React hook responsible for calculating and applying layout-related
+ * dimensions for a flex-based slider.
+ * This hook dynamically computes:
+ * - Slider container width
+ * - Slide flex-basis based on the number of visible slides
+ * - Gap between slides
+ * The calculated values are applied directly to the DOM and stored
+ * in shared slider refs for use by other slider utilities.
+ *
+ * Features:
+ * - Responsive slide sizing using container dimensions
+ * - Flex-based layout calculation
+ * - Centralized dimension updates
+ * - Safe DOM access via refs
+ *
+ * NOTE: this loc update when we have add the custom styling. loc no.:-69
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+import { type MutableRefObject, type RefObject } from 'react';
+import type { SlickSliderRefs } from './useSlider';
+export interface SlickSliderDimensionProps {
+    gap: number;
+    orientation: 'horizontal' | 'vertical';
+    sliderObjRefs: MutableRefObject<SlickSliderRefs>;
+    sliderWrapperRef: RefObject<HTMLDivElement | null>;
+    slideToShow: number;
+}
+interface SlickSliderDimensionsReturn {
+    calculateDimensions: () => void;
+}
+declare function useSliderDimension({ gap, orientation, sliderObjRefs, sliderWrapperRef, slideToShow, }: Readonly<SlickSliderDimensionProps>): SlickSliderDimensionsReturn;
+export default useSliderDimension;

package/dist/cjs/hooks/slider/useSliderDimension.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderDimension
+ * -----------------------------------------------------------------------------
+ *
+ * @description React hook responsible for calculating and applying layout-related
+ * dimensions for a flex-based slider.
+ * This hook dynamically computes:
+ * - Slider container width
+ * - Slide flex-basis based on the number of visible slides
+ * - Gap between slides
+ * The calculated values are applied directly to the DOM and stored
+ * in shared slider refs for use by other slider utilities.
+ *
+ * Features:
+ * - Responsive slide sizing using container dimensions
+ * - Flex-based layout calculation
+ * - Centralized dimension updates
+ * - Safe DOM access via refs
+ *
+ * NOTE: this loc update when we have add the custom styling. loc no.:-69
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+var react_1 = require("react");
+var helpers_1 = require("../../helpers");
+function useSliderDimension(_a) {
+    var gap = _a.gap, orientation = _a.orientation, sliderObjRefs = _a.sliderObjRefs, sliderWrapperRef = _a.sliderWrapperRef, slideToShow = _a.slideToShow;
+    /**
+     * Calculates and applies slide dimensions based on slider orientation.
+     *
+     * - Sets the gap between slides.
+     * - For vertical sliders:
+     *   - Calculates slide height including gap.
+     *   - Sets the container height to show the required number of slides.
+     *   - Switches layout to column direction.
+     * - For horizontal sliders:
+     *   - Calculates available width after subtracting gaps.
+     *   - Distributes width equally across visible slides using flex-basis.
+     *
+     * This function updates both DOM styles and cached dimensions
+     * used later for slide translation.
+     */
+    var calculateSlideDimensions = (0, react_1.useCallback)(function (_a) {
+        var container = _a.container, rect = _a.rect;
+        container.style.setProperty('gap', "".concat(gap, "px"));
+        if (orientation === 'vertical') {
+            var verticalSlideHight = container.children[0].clientHeight + gap;
+            Object.assign(sliderObjRefs.current, {
+                containerHeight: verticalSlideHight,
+            });
+            container.style.setProperty('height', "".concat(verticalSlideHight * slideToShow, "px"));
+            container.style.setProperty('flex-direction', 'column');
+            return;
+        }
+        var containerWidth = rect.width;
+        var totalGap = gap * (slideToShow - 1);
+        var availableWidth = containerWidth - totalGap;
+        var slideWidthPx = availableWidth / slideToShow;
+        var flexBasisPercent = (slideWidthPx / containerWidth) * 100;
+        Object.assign(sliderObjRefs.current, {
+            containerWidth: containerWidth + gap,
+        });
+        Array.from(container.children).forEach(function (element) {
+            ;
+            element.style.setProperty('flex', "0 0 ".concat(flexBasisPercent, "%"));
+        });
+    }, [gap, slideToShow, sliderObjRefs, orientation]);
+    /**
+     * Calculates and applies slider dimensions based on the current container size.
+     * Safely accesses the slider container element, retrieves its bounding rectangle,
+     * and triggers the dimension calculation for slides.
+     * NOTE: currently for horizontal slider navigation
+     */
+    var calculateDimensions = (0, react_1.useCallback)(function () {
+        var container = sliderWrapperRef.current;
+        if ((0, helpers_1.isNullOrUndefined)(container))
+            return;
+        var rect = container.getBoundingClientRect();
+        calculateSlideDimensions({ container: container, rect: rect });
+    }, [sliderWrapperRef, calculateSlideDimensions]);
+    return { calculateDimensions: calculateDimensions };
+}
+exports.default = useSliderDimension;
+//# sourceMappingURL=useSliderDimension.js.map

package/dist/cjs/hooks/slider/useSliderDimension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderDimension.js","sourceRoot":"","sources":["../../../../src/hooks/slider/useSliderDimension.ts"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,+BAA0E;AAC1E,yCAAiD;AAoBjD,SAAS,kBAAkB,CAAC,EAMU;QALpC,GAAG,SAAA,EACH,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,WAAW,iBAAA;IAEX;;;;;;;;;;;;;;OAcG;IACH,IAAM,wBAAwB,GAAG,IAAA,mBAAW,EAC1C,UAAC,EAAwC;YAAtC,SAAS,eAAA,EAAE,IAAI,UAAA;QAChB,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,UAAG,GAAG,OAAI,CAAC,CAAA;QAC9C,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;YAC/B,IAAM,kBAAkB,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,GAAG,CAAA;YACnE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE;gBACnC,eAAe,EAAE,kBAAkB;aACpC,CAAC,CAAA;YACF,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,UAAG,kBAAkB,GAAG,WAAW,OAAI,CAAC,CAAA;YAC9E,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAA;YACvD,OAAM;QACR,CAAC;QAEO,IAAO,cAAc,GAAK,IAAI,MAAT,CAAS;QACtC,IAAM,QAAQ,GAAG,GAAG,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;QACxC,IAAM,cAAc,GAAG,cAAc,GAAG,QAAQ,CAAA;QAChD,IAAM,YAAY,GAAG,cAAc,GAAG,WAAW,CAAA;QACjD,IAAM,gBAAgB,GAAG,CAAC,YAAY,GAAG,cAAc,CAAC,GAAG,GAAG,CAAA;QAC9D,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE;YACnC,cAAc,EAAE,cAAc,GAAG,GAAG;SACrC,CAAC,CAAA;QACF,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAC,OAAO;YAC7C,CAAC;YAAC,OAAuB,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,cAAO,gBAAgB,MAAG,CAAC,CAAA;QACjF,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,GAAG,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,CAC/C,CAAA;IAED;;;;;OAKG;IACH,IAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC;QACtC,IAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAA;QAC1C,IAAI,IAAA,2BAAiB,EAAC,SAAS,CAAC;YAAE,OAAM;QACxC,IAAM,IAAI,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAA;QAC9C,wBAAwB,CAAC,EAAE,SAAS,WAAA,EAAE,IAAI,MAAA,EAAE,CAAC,CAAA;IAC/C,CAAC,EAAE,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC,CAAA;IAEhD,OAAO,EAAE,mBAAmB,qBAAA,EAAE,CAAA;AAChC,CAAC;AAED,kBAAe,kBAAkB,CAAA"}

package/dist/cjs/hooks/slider/useSliderDraggable.d.ts

@@ -0,0 +1,42 @@
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderDraggable
+ * -----------------------------------------------------------------------------
+ *
+ * @description A custom React hook that enables pointer-based drag interactions
+ * for the Slick slider component.
+ * Responsibilities:
+ * - Attaches pointer event listeners to the slider container
+ * - Tracks drag state and movement distance
+ * - Applies real-time transforms during dragging
+ * - Determines swipe intent using a configurable threshold
+ * - Triggers next/previous slide navigation based on drag direction
+ * - Safely handles pointer cancellation and cleanup
+ * Behavior:
+ * - Dragging is enabled only when `draggable.enableDrag` is true
+ * - Horizontal movement controls slide navigation
+ * - Transitions are suppressed during drag and restored on release
+ * - Automatically cleans up listeners on unmount or ref changes
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+import { type MutableRefObject, type RefObject } from 'react';
+import type { SlickSliderRefs } from './useSlider';
+export interface SliderDraggableProps {
+    applyTransform: (val: number, withTransition?: boolean, isRaw?: boolean) => void;
+    calculateTranslate: (idx: number) => number;
+    draggable?: {
+        dragThreshold?: number;
+        enableDrag?: boolean;
+    };
+    handleNextSlide: () => void;
+    handlePrevSlide: () => void;
+    hasNextBtnDisabled: () => boolean;
+    hasPrevBtnDisabled: () => boolean;
+    sliderObjRefs: MutableRefObject<SlickSliderRefs>;
+    sliderWrapperRef: RefObject<HTMLDivElement | null>;
+}
+declare function useSliderDraggable({ applyTransform, calculateTranslate, draggable, handleNextSlide, handlePrevSlide, hasNextBtnDisabled, hasPrevBtnDisabled, sliderObjRefs, sliderWrapperRef, }: SliderDraggableProps): void;
+export default useSliderDraggable;

package/dist/cjs/hooks/slider/useSliderDraggable.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderDraggable
+ * -----------------------------------------------------------------------------
+ *
+ * @description A custom React hook that enables pointer-based drag interactions
+ * for the Slick slider component.
+ * Responsibilities:
+ * - Attaches pointer event listeners to the slider container
+ * - Tracks drag state and movement distance
+ * - Applies real-time transforms during dragging
+ * - Determines swipe intent using a configurable threshold
+ * - Triggers next/previous slide navigation based on drag direction
+ * - Safely handles pointer cancellation and cleanup
+ * Behavior:
+ * - Dragging is enabled only when `draggable.enableDrag` is true
+ * - Horizontal movement controls slide navigation
+ * - Transitions are suppressed during drag and restored on release
+ * - Automatically cleans up listeners on unmount or ref changes
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+var react_1 = require("react");
+var helpers_1 = require("../../helpers");
+function useSliderDraggable(_a) {
+    var applyTransform = _a.applyTransform, calculateTranslate = _a.calculateTranslate, draggable = _a.draggable, handleNextSlide = _a.handleNextSlide, handlePrevSlide = _a.handlePrevSlide, hasNextBtnDisabled = _a.hasNextBtnDisabled, hasPrevBtnDisabled = _a.hasPrevBtnDisabled, sliderObjRefs = _a.sliderObjRefs, sliderWrapperRef = _a.sliderWrapperRef;
+    (0, react_1.useEffect)(function () {
+        var _a = (0, helpers_1.destructObj)(draggable), _b = _a.dragThreshold, dragThreshold = _b === void 0 ? 200 : _b, _c = _a.enableDrag, enableDrag = _c === void 0 ? true : _c;
+        var _d = sliderObjRefs.current, currentIndex = _d.currentIndex, drag = _d.drag;
+        var container = sliderWrapperRef.current;
+        if (!enableDrag || (0, helpers_1.isNullOrUndefined)(container))
+            return undefined;
+        /**
+         * Handles the pointer down event to initiate a drag interaction.
+         * - Captures the pointer to continue receiving move/up events
+         *   even if the pointer leaves the container
+         * - Initializes drag state (start position and reset translate)
+         */
+        function handlePointerDown(event) {
+            if ((0, helpers_1.isNullOrUndefined)(container))
+                return;
+            container.setPointerCapture(event.pointerId);
+            Object.assign(drag, {
+                isDragging: true,
+                startX: event.clientX,
+                startY: event.clientY,
+                translate: 0,
+            });
+            (0, helpers_1.preventDefault)(event);
+        }
+        /**
+         * Handles pointer move events during an active drag gesture.
+         * - Runs only while dragging is in progress
+         * - Calculates horizontal movement delta from the initial pointer position
+         * - Updates drag translate value for threshold / direction detection
+         * - Applies a real-time transform without transition for smooth dragging
+         */
+        function handlePointerMove(event) {
+            if ((0, helpers_1.isNullOrUndefined)(container) || !drag.isDragging)
+                return;
+            var delta = event.clientX - drag.startX;
+            var base = calculateTranslate(currentIndex);
+            Object.assign(drag, { translate: delta });
+            applyTransform(delta + base, false, true);
+            (0, helpers_1.preventDefault)(event);
+        }
+        /**
+         * Handles the pointer up event to finalize a drag interaction.
+         * - Releases pointer capture to stop receiving pointer events
+         * - Evaluates total drag distance against the configured threshold
+         * - Triggers slide navigation based on drag direction and availability
+         * - Reverts to the current slide if the drag is insufficient or navigation is disabled
+         */
+        function handlePointerUp(event) {
+            if ((0, helpers_1.isNullOrUndefined)(container) || !drag.isDragging)
+                return;
+            container.releasePointerCapture(event.pointerId);
+            var translate = drag.translate;
+            Object.assign(drag, { isDragging: false });
+            if (Math.abs(translate) <= dragThreshold) {
+                applyTransform(currentIndex, true);
+                return;
+            }
+            if (translate < 0 && !hasNextBtnDisabled()) {
+                handleNextSlide();
+                return;
+            }
+            if (translate > 0 && !hasPrevBtnDisabled()) {
+                handlePrevSlide();
+                return;
+            }
+            applyTransform(currentIndex, true);
+        }
+        /**
+         * Handles pointer cancel events to safely abort an active drag interaction.
+         * - Triggered when the browser cancels the pointer sequence
+         *   (e.g., touch interruption, context menu, lost capture)
+         * - Releases pointer capture to avoid stuck pointer states
+         * - Resets dragging state
+         * - Smoothly reverts the slider back to the current active slid.
+         */
+        function handlePointerCancel(event) {
+            if ((0, helpers_1.isNullOrUndefined)(container) || !drag.isDragging)
+                return;
+            container.releasePointerCapture(event.pointerId);
+            Object.assign(drag, { isDragging: false });
+            applyTransform(currentIndex, true);
+        }
+        /**
+         * Registers pointer event listeners on the slider container
+         * to enable drag-based interactions.
+         *
+         * Cleanup ensures all listeners are removed when the component
+         * unmounts or the container reference changes, preventing
+         * memory leaks and duplicate handlers.
+         */
+        container.addEventListener('pointerdown', handlePointerDown);
+        container.addEventListener('pointermove', handlePointerMove);
+        container.addEventListener('pointerup', handlePointerUp);
+        container.addEventListener('pointercancel', handlePointerCancel);
+        /**
+         * Restrict touch gestures to vertical scrolling only (pan-y),allowing smooth page scroll while
+         * preventing horizontal touch interference during slider drag interactions.
+         */
+        var touchActionAxis = 'pan-y';
+        Object.assign(container.style, { touchAction: touchActionAxis });
+        return function () {
+            if ((0, helpers_1.isNullOrUndefined)(container))
+                return;
+            container.removeEventListener('pointerdown', handlePointerDown);
+            container.removeEventListener('pointermove', handlePointerMove);
+            container.removeEventListener('pointerup', handlePointerUp);
+            container.removeEventListener('pointercancel', handlePointerCancel);
+            Object.assign(container.style, { touchAction: '' });
+        };
+    }, [sliderObjRefs, handleNextSlide, handlePrevSlide, hasNextBtnDisabled, handlePrevSlide]);
+}
+exports.default = useSliderDraggable;
+//# sourceMappingURL=useSliderDraggable.js.map

package/dist/cjs/hooks/slider/useSliderDraggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderDraggable.js","sourceRoot":"","sources":["../../../../src/hooks/slider/useSliderDraggable.ts"],"names":[],"mappings":"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"}

package/dist/cjs/hooks/slider/useSliderNavigation.d.ts

@@ -0,0 +1,42 @@
+/**
+ * -----------------------------------------------------------------------------
+ * @file useSliderNavigation
+ * -----------------------------------------------------------------------------
+ *
+ * @description This hook is responsible for handling all slider navigation logic.
+ *
+ * Features:
+ * - Handles next slide navigation
+ * - Handles previous slide navigation
+ * - Controls next button disabled state
+ * - Controls previous button disabled state
+ * - Provides the active indicator index
+ * - Calculates the total number of indicators
+ *
+ * -----------------------------------------------------------------------------
+ * Copyright © 2017-present BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+import { type MutableRefObject, type RefObject } from 'react';
+import type { SlickSliderRefs } from './useSlider';
+interface UseSlickSliderNavigationReturn {
+    getActiveIndicatorIndex: () => number | undefined;
+    getIndicatorCount: () => number | undefined;
+    goToSlideIndicator: (indicatorIndex: number) => void;
+    handleNextSlide: () => void;
+    handlePrevSlide: () => void;
+    hasNextBtnDisabled: () => boolean;
+    hasPrevBtnDisabled: () => boolean;
+}
+interface UseSlickSliderDimensionsProps {
+    activeSlide: number;
+    applyTransform: (indexOrTranslate: number, withTransition?: boolean) => void;
+    loop: boolean;
+    sliderObjRefs: MutableRefObject<SlickSliderRefs>;
+    sliderWrapperRef: RefObject<HTMLDivElement | null>;
+    slideToScroll: number;
+    slideToShow: number;
+    speed?: number;
+}
+declare function useSliderNavigation({ activeSlide, applyTransform, loop, sliderObjRefs, slideToScroll, slideToShow, speed, }: UseSlickSliderDimensionsProps): UseSlickSliderNavigationReturn;
+export default useSliderNavigation;