farm-react 1.0.7 → 1.0.8

package/dist/cjs/components/SkeletonLoader.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var clsx_1 = tslib_1.__importDefault(require("clsx"));
+var react_bootstrap_1 = require("react-bootstrap");
+var helpers_1 = require("../helpers");
+var sizeHeightMap = {
+    xs: 8,
+    sm: 16,
+    lg: 24,
+};
+function getComputedHeight(height, size) {
+    return height !== null && height !== void 0 ? height : (size ? sizeHeightMap[size] : undefined);
+}
+function getCommonStyle(width, height) {
+    return {
+        width: width !== null && width !== void 0 ? width : undefined,
+        height: height,
+    };
+}
+function SkeletonLoader(_a) {
+    var loading = _a.loading, variant = _a.variant, _b = _a.spinnerProps, spinnerProps = _b === void 0 ? {} : _b, _c = _a.xs, xs = _c === void 0 ? 12 : _c, _d = _a.as, Component = _d === void 0 ? 'span' : _d, _e = _a.animation, animation = _e === void 0 ? 'glow' : _e, _f = _a.width, width = _f === void 0 ? null : _f, _g = _a.height, height = _g === void 0 ? null : _g, _h = _a.rows, rows = _h === void 0 ? 1 : _h, _j = _a.cols, cols = _j === void 0 ? 1 : _j, size = _a.size, _k = _a.classnames, classnames = _k === void 0 ? {} : _k, _l = _a.attributes, attributes = _l === void 0 ? {} : _l;
+    if (!loading)
+        return null;
+    var computedHeight = getComputedHeight(height, size);
+    var commonStyle = getCommonStyle(width, computedHeight);
+    var baseAnimationClass = "placeholder-".concat(animation);
+    var _m = (0, helpers_1.destructObj)(classnames), wrapperClass = _m.wrapper, textClass = _m.text, circleClass = _m.circle, squareClass = _m.square, tableClass = _m.table, listClass = _m.list, spinnerWrapperClass = _m.spinnerWrapper, textWrapperClass = _m.textWrapper;
+    var _o = (0, helpers_1.destructObj)(attributes), wrapperAttr = _o.wrapper, textAttr = _o.text, circleAttr = _o.circle, squareAttr = _o.square, tableAttr = _o.table, listAttr = _o.list, spinnerWrapperAttr = _o.spinnerWrapper, textWrapperAttr = _o.textWrapper;
+    function renderText() {
+        return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, clsx_1.default)(baseAnimationClass, textWrapperClass) }, textWrapperAttr),
+            react_1.default.createElement(Component, tslib_1.__assign({ className: (0, clsx_1.default)("placeholder rounded col-".concat(xs), textClass), style: commonStyle }, textAttr))));
+    }
+    function renderCircle() {
+        var _a;
+        return (react_1.default.createElement("div", { className: baseAnimationClass },
+            react_1.default.createElement(Component, tslib_1.__assign({ className: (0, clsx_1.default)('placeholder rounded-circle', circleClass), style: {
+                    width: width !== null && width !== void 0 ? width : 40,
+                    height: (_a = computedHeight !== null && computedHeight !== void 0 ? computedHeight : width) !== null && _a !== void 0 ? _a : 40,
+                } }, circleAttr))));
+    }
+    function renderSquare() {
+        return (react_1.default.createElement("div", { className: baseAnimationClass },
+            react_1.default.createElement(Component, tslib_1.__assign({ className: (0, clsx_1.default)('placeholder rounded', squareClass), style: commonStyle }, squareAttr))));
+    }
+    function renderTable() {
+        return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, clsx_1.default)(tableClass) }, tableAttr), Array.from({ length: rows }).map(function (_, rowIndex) { return (react_1.default.createElement("div", { key: rowIndex, className: 'd-flex gap-50 mb-2' }, Array.from({ length: cols }).map(function (_, colIndex) { return (react_1.default.createElement(Component, { key: colIndex, className: 'placeholder rounded col mb-10', style: { height: computedHeight !== null && computedHeight !== void 0 ? computedHeight : 16 } })); }))); })));
+    }
+    function renderList() {
+        return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, clsx_1.default)(listClass) }, listAttr), Array.from({ length: rows }).map(function (_, index) {
+            var _a;
+            return (react_1.default.createElement("div", { key: index, className: 'd-flex align-items-center gap-3 mb-2' },
+                react_1.default.createElement(Component, tslib_1.__assign({ className: (0, clsx_1.default)('placeholder rounded-circle flex-shrink-0', circleClass), style: {
+                        width: width !== null && width !== void 0 ? width : 40,
+                        height: (_a = computedHeight !== null && computedHeight !== void 0 ? computedHeight : width) !== null && _a !== void 0 ? _a : 40,
+                    } }, circleAttr)),
+                react_1.default.createElement(Component, { className: 'placeholder rounded col-12', style: { height: computedHeight !== null && computedHeight !== void 0 ? computedHeight : 16 } })));
+        })));
+    }
+    function renderSpinner() {
+        return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, clsx_1.default)(spinnerWrapperClass) }, spinnerWrapperAttr),
+            react_1.default.createElement(react_bootstrap_1.Spinner, tslib_1.__assign({ animation: 'border' }, spinnerProps))));
+    }
+    var renderMap = {
+        text: renderText,
+        circle: renderCircle,
+        square: renderSquare,
+        table: renderTable,
+        list: renderList,
+        spinner: renderSpinner,
+    };
+    return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, clsx_1.default)(wrapperClass) }, wrapperAttr), renderMap[variant]()));
+}
+exports.default = SkeletonLoader;
+//# sourceMappingURL=SkeletonLoader.js.map

package/dist/cjs/components/SkeletonLoader.js.map

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

package/dist/cjs/components/Slider/SlickSlider.d.ts

@@ -0,0 +1,74 @@
+/**
+ * -----------------------------------------------------------------------------
+ * @component SlickSlider
+ * -----------------------------------------------------------------------------
+ *
+ * @description A highly customizable and reusable React slider/carousel component.
+ * Supports autoplay, looping, center mode, custom navigation buttons,
+ * slide indicators, and flexible rendering through render props.
+ *
+ * Features:
+ * - Configurable slide animation (speed, easing)
+ * - Autoplay support with interval and pause-on-hover options
+ * - Looping with seamless slide cloning
+ * - Center mode with active slide highlighting
+ * - Custom next/previous navigation buttons
+ * - Optional slide indicators (dots)
+ * - Custom slide rendering via render props
+ * - Click handling for individual slides
+ *
+ * Note: tjs-slick-slider this class only added for sample
+ * -----------------------------------------------------------------------------
+ * Copyright © 2025 BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+import { type MouseEvent, type ReactElement } from 'react';
+import { SlickSliderConfig } from './useSliderBreakpoint';
+export interface SlickSliderDataProps {
+    id: number;
+    label: string;
+    url: string;
+}
+export interface SlickSliderAutoPlayConfig {
+    enable?: boolean;
+    interval?: number;
+    pauseOnHover?: boolean;
+}
+export interface SlickSliderAnimationConfig {
+    easing?: string;
+    speed?: number;
+}
+export interface SlickSliderProps {
+    activeSlide?: number;
+    animationConfig?: SlickSliderAnimationConfig;
+    autoPlayConfig?: SlickSliderAutoPlayConfig;
+    breakpoints?: SlickSliderConfig[];
+    btnsLabel?: {
+        next?: string;
+        prev?: string;
+    };
+    data: SlickSliderDataProps[];
+    draggable?: {
+        dragThreshold?: number;
+        enableDrag?: boolean;
+    };
+    gap?: number;
+    icons?: {
+        activeDot?: string;
+        dots?: string;
+        next?: string;
+        prev?: string;
+    };
+    loop?: boolean;
+    onSlideClick?: (item: SlickSliderDataProps, index: number, event: MouseEvent<HTMLButtonElement>) => void;
+    renderNextBtn?: (handleNextSlide: () => void, hasNextBtnDisabled: () => boolean) => ReactElement;
+    renderPrevBtn?: (handlePrevSlide: () => void, hasPrevBtnDisabled: () => boolean) => ReactElement;
+    renderSlide?: (slideItem: SlickSliderDataProps, index?: number) => null | ReactElement;
+    showCtrlBtns?: boolean;
+    showIndicator?: boolean;
+    slideToScroll?: number;
+    slideToShow?: number;
+    variant?: 'horizontal' | 'vertical';
+}
+declare function SlickSlider({ activeSlide, animationConfig, autoPlayConfig, breakpoints, btnsLabel, data, draggable, gap, icons, loop, onSlideClick, renderNextBtn, renderPrevBtn, renderSlide, showCtrlBtns, showIndicator, slideToScroll, slideToShow, variant, }: Readonly<SlickSliderProps>): ReactElement;
+export default SlickSlider;

package/dist/cjs/components/Slider/SlickSlider.js

@@ -0,0 +1,211 @@
+"use strict";
+/**
+ * -----------------------------------------------------------------------------
+ * @component SlickSlider
+ * -----------------------------------------------------------------------------
+ *
+ * @description A highly customizable and reusable React slider/carousel component.
+ * Supports autoplay, looping, center mode, custom navigation buttons,
+ * slide indicators, and flexible rendering through render props.
+ *
+ * Features:
+ * - Configurable slide animation (speed, easing)
+ * - Autoplay support with interval and pause-on-hover options
+ * - Looping with seamless slide cloning
+ * - Center mode with active slide highlighting
+ * - Custom next/previous navigation buttons
+ * - Optional slide indicators (dots)
+ * - Custom slide rendering via render props
+ * - Click handling for individual slides
+ *
+ * Note: tjs-slick-slider this class only added for sample
+ * -----------------------------------------------------------------------------
+ * Copyright © 2025 BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var clsx_1 = require("clsx");
+var Button_1 = tslib_1.__importDefault(require("../Button"));
+var hooks_1 = require("../../hooks");
+var helpers_1 = require("../../helpers");
+var app_1 = require("../../constants/app");
+var icons_1 = tslib_1.__importDefault(require("../../constants/icons"));
+var useSlider_1 = tslib_1.__importDefault(require("./useSlider"));
+// Destruct icons
+var angleLeft = icons_1.default.angleLeft, angleRight = icons_1.default.angleRight, circle = icons_1.default.circle, dotCircle = icons_1.default.dotCircle;
+// Default props value
+var defAutoPlayConfig = {
+    enable: false,
+    interval: 2000,
+    pauseOnHover: false,
+};
+var defAnimationConfig = {
+    easing: 'ease',
+    speed: 500,
+};
+var defaultDraggable = {
+    dragThreshold: 200,
+    enableDrag: true,
+};
+function SlickSlider(_a) {
+    var _b = _a.activeSlide, activeSlide = _b === void 0 ? 1 : _b, _c = _a.animationConfig, animationConfig = _c === void 0 ? defAnimationConfig : _c, _d = _a.autoPlayConfig, autoPlayConfig = _d === void 0 ? defAutoPlayConfig : _d, _e = _a.breakpoints, breakpoints = _e === void 0 ? app_1.EMPTY_ARRAY : _e, _f = _a.btnsLabel, btnsLabel = _f === void 0 ? app_1.EMPTY_OBJECT : _f, data = _a.data, _g = _a.draggable, draggable = _g === void 0 ? defaultDraggable : _g, _h = _a.gap, gap = _h === void 0 ? 20 : _h, _j = _a.icons, icons = _j === void 0 ? app_1.EMPTY_OBJECT : _j, _k = _a.loop, loop = _k === void 0 ? false : _k, _l = _a.onSlideClick, onSlideClick = _l === void 0 ? undefined : _l, _m = _a.renderNextBtn, renderNextBtn = _m === void 0 ? undefined : _m, _o = _a.renderPrevBtn, renderPrevBtn = _o === void 0 ? undefined : _o, _p = _a.renderSlide, renderSlide = _p === void 0 ? undefined : _p, _q = _a.showCtrlBtns, showCtrlBtns = _q === void 0 ? true : _q, _r = _a.showIndicator, showIndicator = _r === void 0 ? true : _r, _s = _a.slideToScroll, slideToScroll = _s === void 0 ? 1 : _s, _t = _a.slideToShow, slideToShow = _t === void 0 ? 1 : _t, _u = _a.variant, variant = _u === void 0 ? 'horizontal' : _u;
+    // Constants
+    var hasUseExtendedSlides = (0, helpers_1.getArrayLength)(data) > slideToShow;
+    var isRTL = (0, hooks_1.useLocalStorage)('tjsReactRTL')[0];
+    var isRTLMode = isRTL !== null && isRTL !== void 0 ? isRTL : false;
+    var nextBtnIconPrimary = isRTLMode ? angleLeft : angleRight;
+    var prevBtnIconPrimary = isRTLMode ? angleRight : angleLeft;
+    // Destruct props
+    var _v = (0, helpers_1.destructObj)(icons), _w = _v.activeDot, activeDot = _w === void 0 ? dotCircle : _w, _x = _v.dots, dots = _x === void 0 ? circle : _x, _y = _v.next, nextBtnIcon = _y === void 0 ? nextBtnIconPrimary : _y, _z = _v.prev, prevBtnIcon = _z === void 0 ? prevBtnIconPrimary : _z;
+    var _0 = (0, helpers_1.destructObj)(btnsLabel), _1 = _0.next, nextBtnLabel = _1 === void 0 ? '' : _1, _2 = _0.prev, prevBtnLabel = _2 === void 0 ? '' : _2;
+    // Hooks
+    var _3 = (0, useSlider_1.default)({
+        activeSlide: activeSlide - 1,
+        animationConfig: animationConfig,
+        autoPlayConfig: autoPlayConfig,
+        breakpoints: breakpoints,
+        draggable: draggable,
+        gap: gap,
+        isRTLMode: isRTLMode,
+        loop: loop,
+        slideToScroll: slideToScroll,
+        slideToShow: slideToShow,
+        totalSlides: (0, helpers_1.getArrayLength)(data),
+        variant: variant,
+    }), getActiveIndicatorIndex = _3.getActiveIndicatorIndex, getIndicatorCount = _3.getIndicatorCount, goToSlideIndicator = _3.goToSlideIndicator, handleNextSlide = _3.handleNextSlide, handlePrevSlide = _3.handlePrevSlide, hasNextBtnDisabled = _3.hasNextBtnDisabled, hasPrevBtnDisabled = _3.hasPrevBtnDisabled, sliderWrapperRef = _3.sliderWrapperRef;
+    var renderSlideItem = (0, helpers_1.isNullOrUndefined)(renderSlide)
+        ? renderDefSlide
+        : function (item, index) {
+            var result = renderSlide(item, index);
+            return result !== null && result !== void 0 ? result : renderDefSlide(item);
+        };
+    function renderDefSlide(item) {
+        return (react_1.default.createElement("div", { className: 'w-100 p-6 bg-primary' },
+            react_1.default.createElement("p", { className: 'fs-40' }, item.label)));
+    }
+    /**
+     * This helper function render the button based on the different label and custom icons.
+     * @param param0 takes a common property of btn
+     */
+    function renderNavBtn(_a) {
+        var disabled = _a.disabled, icon = _a.icon, label = _a.label, onClick = _a.onClick;
+        return (react_1.default.createElement(Button_1.default, { disabled: disabled, icon: icon, label: label, variant: 'ghost', classnames: { button: 'fs-16 p-5 px-10' }, onClick: onClick }));
+    }
+    function renderDefPrevBtn() {
+        return renderNavBtn({
+            disabled: hasPrevBtnDisabled(),
+            icon: prevBtnIcon,
+            label: prevBtnLabel,
+            onClick: handlePrevSlide,
+        });
+    }
+    /**
+     * Determines which previous button to render based on whether a custom renderPrevBtn prop is provided.
+     * Falls back to the default previous button if no custom renderer is specified.
+     */
+    function prevButtonElem() {
+        if ((0, helpers_1.isNullOrUndefined)(renderPrevBtn)) {
+            return renderDefPrevBtn();
+        }
+        var result = renderPrevBtn(handlePrevSlide, hasPrevBtnDisabled);
+        return result !== null && result !== void 0 ? result : renderDefPrevBtn();
+    }
+    /**
+     * Creates an extended slides array to support seamless looping.
+     *
+     * - Prepends the last `slideToShow` slides to allow backward looping
+     * - Appends the full slides array to allow forward looping
+     * - Results in a continuous sequence that prevents visual gaps
+     *   when transitioning across boundaries
+     *
+     * Example:
+     * data = [A, B, C, D]
+     * extendedSlides = [D, A, B, C, D, A, B, C, D] slideToShow = 1
+     * extendedSlides = [C,D, A, B, C, D, A, B, C, D] slideToShow = 2
+     */
+    var extendedSlides = (0, react_1.useMemo)(function () { return [data.slice(-slideToShow), data, data].flat(); }, [data, slideToShow]);
+    /**
+     * Creates a click handler for a slide item.
+     * Returns a function that invokes the onSlideClick callback with the item data.
+     * @param item - The slide data item
+     */
+    function onSlideClickHandler(item, index) {
+        return function () {
+            onSlideClick === null || onSlideClick === void 0 ? void 0 : onSlideClick(item, index, {});
+        };
+    }
+    /**
+     * Renders all slide items in the slider.
+     * Uses extended slides array for looping mode, otherwise uses the original data array.
+     * Each slide is wrapped in a button that handles click events.
+     */
+    function renderSlides() {
+        if ((0, helpers_1.isArrayEmpty)(data))
+            return null;
+        var sliderArray = hasUseExtendedSlides ? extendedSlides : data;
+        return (react_1.default.createElement("div", { ref: sliderWrapperRef, className: 'd-flex' }, sliderArray === null || sliderArray === void 0 ? void 0 : sliderArray.map(function (item, index) { return (react_1.default.createElement(Button_1.default, { variant: 'ghost', key: (0, helpers_1.getKeyString)('slide', index), attributes: {
+                button: {
+                    id: (0, helpers_1.getKeyString)('slide', index + 1),
+                    'data-index': index,
+                },
+            }, classnames: {
+                button: (0, clsx_1.clsx)('p-0 rounded-100 bg-transparent', variant === 'vertical' && 'vertical'),
+            }, onClick: onSlideClickHandler(item, index) }, renderSlideItem(item))); })));
+    }
+    function renderDefNextBtn() {
+        return renderNavBtn({
+            disabled: hasNextBtnDisabled(),
+            icon: nextBtnIcon,
+            label: nextBtnLabel,
+            onClick: handleNextSlide,
+        });
+    }
+    /**
+     * Determines which next button to render based on whether a custom renderNextBtn prop is provided.
+     * Falls back to the default next button if no custom renderer is specified.
+     */
+    function nextButtonElem() {
+        if ((0, helpers_1.isNullOrUndefined)(renderNextBtn)) {
+            return renderDefNextBtn();
+        }
+        var result = renderNextBtn(handleNextSlide, hasNextBtnDisabled);
+        return result !== null && result !== void 0 ? result : renderDefNextBtn();
+    }
+    /** This callback function handle the indicator click event and call the go to indicator. */
+    function handleIndicatorEvent(idx) {
+        return function () {
+            goToSlideIndicator(idx);
+        };
+    }
+    /**
+     * Function is render the indicator item and add the active indicator icons based active slide index.
+     * @param index index of the indicator items.
+     */
+    function renderIndicator(index) {
+        if (!hasUseExtendedSlides)
+            return undefined;
+        var isActive = index === getActiveIndicatorIndex();
+        var indicatorIcon = isActive ? activeDot : dots;
+        return (react_1.default.createElement(Button_1.default, { key: (0, helpers_1.getKeyString)('ctrl-dot', index), icon: indicatorIcon, variant: 'ghost', onClick: handleIndicatorEvent(index), classnames: { button: 'fs-16' } }));
+    }
+    /**
+     * Function responsible for render the indication icons based on the indicator count.
+     * create dynamic array based on the number for indicators.
+     */
+    function renderIndicators() {
+        var numberOfIndictor = getIndicatorCount();
+        if ((0, helpers_1.isNullOrUndefined)(numberOfIndictor))
+            return undefined;
+        return (react_1.default.createElement("div", { className: 'd-flex justify-content-center gap-10' }, (0, helpers_1.createDynamicArray)(numberOfIndictor).map(function (_, index) { return renderIndicator(index); })));
+    }
+    return (react_1.default.createElement("div", { className: 'tjs-slick-slider' },
+        react_1.default.createElement("div", { className: 'd-flex align-items-center justify-content-between mb-10' },
+            showCtrlBtns ? prevButtonElem() : null,
+            react_1.default.createElement("div", { className: 'overflow-hidden w-100' }, renderSlides()),
+            showCtrlBtns ? nextButtonElem() : null),
+        showIndicator ? renderIndicators() : null));
+}
+exports.default = SlickSlider;
+//# sourceMappingURL=SlickSlider.js.map

package/dist/cjs/components/Slider/SlickSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlickSlider.js","sourceRoot":"","sources":["../../../../src/components/Slider/SlickSlider.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Slider/Slider/SlickSlider.d.ts

@@ -0,0 +1,74 @@
+/**
+ * -----------------------------------------------------------------------------
+ * @component SlickSlider
+ * -----------------------------------------------------------------------------
+ *
+ * @description A highly customizable and reusable React slider/carousel component.
+ * Supports autoplay, looping, center mode, custom navigation buttons,
+ * slide indicators, and flexible rendering through render props.
+ *
+ * Features:
+ * - Configurable slide animation (speed, easing)
+ * - Autoplay support with interval and pause-on-hover options
+ * - Looping with seamless slide cloning
+ * - Center mode with active slide highlighting
+ * - Custom next/previous navigation buttons
+ * - Optional slide indicators (dots)
+ * - Custom slide rendering via render props
+ * - Click handling for individual slides
+ *
+ * Note: tjs-slick-slider this class only added for sample
+ * -----------------------------------------------------------------------------
+ * Copyright © 2025 BookingKoala. All rights reserved.
+ * -----------------------------------------------------------------------------
+ */
+import { type MouseEvent, type ReactElement } from 'react';
+import { SlickSliderConfig } from './useSliderBreakpoint';
+export interface SlickSliderDataProps {
+    id: number;
+    label: string;
+    url: string;
+}
+export interface SlickSliderAutoPlayConfig {
+    enable?: boolean;
+    interval?: number;
+    pauseOnHover?: boolean;
+}
+export interface SlickSliderAnimationConfig {
+    easing?: string;
+    speed?: number;
+}
+export interface SlickSliderProps {
+    activeSlide?: number;
+    animationConfig?: SlickSliderAnimationConfig;
+    autoPlayConfig?: SlickSliderAutoPlayConfig;
+    breakpoints?: SlickSliderConfig[];
+    btnsLabel?: {
+        next?: string;
+        prev?: string;
+    };
+    data: SlickSliderDataProps[];
+    draggable?: {
+        dragThreshold?: number;
+        enableDrag?: boolean;
+    };
+    gap?: number;
+    icons?: {
+        activeDot?: string;
+        dots?: string;
+        next?: string;
+        prev?: string;
+    };
+    loop?: boolean;
+    onSlideClick?: (item: SlickSliderDataProps, index: number, event: MouseEvent<HTMLButtonElement>) => void;
+    renderNextBtn?: (handleNextSlide: () => void, hasNextBtnDisabled: () => boolean) => ReactElement;
+    renderPrevBtn?: (handlePrevSlide: () => void, hasPrevBtnDisabled: () => boolean) => ReactElement;
+    renderSlide?: (slideItem: SlickSliderDataProps, index?: number) => null | ReactElement;
+    showCtrlBtns?: boolean;
+    showIndicator?: boolean;
+    slideToScroll?: number;
+    slideToShow?: number;
+    variant?: 'horizontal' | 'vertical';
+}
+declare function SlickSlider({ activeSlide, animationConfig, autoPlayConfig, breakpoints, btnsLabel, data, draggable, gap, icons, loop, onSlideClick, renderNextBtn, renderPrevBtn, renderSlide, showCtrlBtns, showIndicator, slideToScroll, slideToShow, variant }: Readonly<SlickSliderProps>): ReactElement;
+export default SlickSlider;