@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.1-alpha.3

package/Selectbox/index.d.ts

@@ -1,17 +1,17 @@
-import React, { ButtonHTMLAttributes } from 'react';
-import { Value, OnRequestClose, GetOptionSelected } from '../Menu';
+import * as React from 'react';
+import { GetOptionSelected, OnRequestClose, Value } from '../Menu';
+import type { MenuItemCommonProps } from '../Menu/MenuItem';
 import SelectboxItem from '../Menu/MenuItem';
 import { SelectboxButtonProps } from './SelectboxButton';
 import { SelectboxChevronIconProps } from './SelectboxChevronIcon';
-import type { AnchorPos } from '../Popper';
-import type { MenuItemCommonProps } from '../Menu/MenuItem';
+import { AnchorPos } from '../Popper';
 import { TextFieldLabelProps } from '../TextField/TextFieldLabel';
 import { TextFieldLabelAsteriskProps } from '../TextField/TextFieldLabelAsterisk';
 import { TextFieldErrorTextProps } from '../TextField/TextFieldErrorText';
 import { SelectboxButtonWrapperProps } from './SelectboxButtonWrapper';
 import { SelectboxContainerProps } from './SelectboxContainer';
 export { SelectboxItem };
-export interface SelectboxProps<T, Multiple extends boolean | undefined = undefined> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'children'> {
+export interface SelectboxProps<T, Multiple extends boolean | undefined = undefined> extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'children'> {
     /**
      * Array of values
      */

package/Selectbox/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,8 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectboxItem = void 0;
-const react_1 = __importDefault(require("react"));
-const Menu_1 = __importDefault(require("../Menu"));
+const React = __importStar(require("react"));
 const MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
 exports.SelectboxItem = MenuItem_1.default;
 const SelectboxButton_1 = __importDefault(require("./SelectboxButton"));
@@ -28,112 +50,108 @@ const TextFieldLabelAsterisk_1 = __importDefault(require("../TextField/TextField
 const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErrorText"));
 const SelectboxButtonWrapper_1 = __importDefault(require("./SelectboxButtonWrapper"));
 const SelectboxContainer_1 = __importDefault(require("./SelectboxContainer"));
-const Selectbox = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
-    const menuRef = react_1.default.useRef(null);
-    const overridesMap = react_1.default.useMemo(() => ({
-        Button: (overrides === null || overrides === void 0 ? void 0 : overrides.Button) || SelectboxButton_1.default,
-        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || SelectboxChevronIcon_1.default,
-        Label: (overrides === null || overrides === void 0 ? void 0 : overrides.Label) || TextFieldLabel_1.default,
-        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || TextFieldLabelAsterisk_1.default,
-        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || TextFieldErrorText_1.default,
-        ButtonWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonWrapper) || SelectboxButtonWrapper_1.default,
-        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SelectboxContainer_1.default,
-    }), [overrides]);
-    const [anchorElement, setAnchorElement] = react_1.default.useState(null);
-    react_1.default.useEffect(() => {
+const SelectboxMenu_1 = __importDefault(require("./SelectboxMenu"));
+const DEFAULT_OVERRIDES = {
+    Button: SelectboxButton_1.default,
+    Icon: SelectboxChevronIcon_1.default,
+    Label: TextFieldLabel_1.default,
+    Asterisk: TextFieldLabelAsterisk_1.default,
+    ErrorText: TextFieldErrorText_1.default,
+    ButtonWrapper: SelectboxButtonWrapper_1.default,
+    Container: SelectboxContainer_1.default,
+};
+const generateGuid = () => {
+    const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
+    return [
+        u.substring(0, 8),
+        u.substring(8, 12),
+        '4000-8' + u.substring(13, 16),
+        u.substring(16, 28),
+    ].join('-');
+};
+const Selectbox = React.forwardRef((props, ref) => {
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
+    const menuRef = React.useRef(null);
+    const [actualPlacement, setActualPlacement] = React.useState(anchorPos);
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);
+    const inputID = React.useMemo(() => {
+        if (typeof id === 'string') {
+            return id;
+        }
+        return generateGuid();
+    }, [id]);
+    React.useEffect(() => {
         if (isOpen && menuRef.current) {
             menuRef.current.scrollToFirstSelected();
         }
     }, [isOpen]);
-    react_1.default.useEffect(() => {
-        const mouseDownEvent = (event) => {
-            var _a;
-            let parentElem = event.target;
-            let needToClose = true;
-            while (parentElem && 'parentNode' in parentElem) {
-                if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
-                    needToClose = false;
-                    break;
-                }
-                parentElem = parentElem.parentNode;
-            }
-            if (needToClose) {
-                onRequestClose(event);
-            }
-        };
-        window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
-        return () => {
-            window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
-        };
-    }, [onRequestClose, anchorElement]);
-    const renderValueAsString = react_1.default.useCallback(() => {
+    const renderValueAsString = React.useCallback(() => {
         if ((!multiple && !value) || (multiple && value.length === 0)) {
             return notSetLabel;
         }
         return selectedItemToString(value);
     }, [multiple, selectedItemToString, value, notSetLabel]);
-    const inputID = react_1.default.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
+    const handleButtonClick = React.useCallback((event) => {
+        var _a;
+        if (isOpen) {
+            onRequestClose(event);
         }
-        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        const guid = [
-            u.substring(0, 8),
-            u.substring(8, 12),
-            '4000-8' + u.substring(13, 16),
-            u.substring(16, 28),
-        ].join('-');
-        return guid;
-    }, [id]);
-    return (react_1.default.createElement(overridesMap.Container, null,
-        typeof label !== 'undefined' && label !== null && (react_1.default.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
+        else {
+            onRequestOpen(event);
+        }
+        (_a = nativeButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
+    }, [isOpen, nativeButtonProps, onRequestClose, onRequestOpen]);
+    const setRefs = React.useCallback((el) => {
+        if (anchorElement !== el) {
+            setAnchorElement(el);
+        }
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    }, [anchorElement, ref]);
+    const handleMouseDown = React.useCallback((event) => {
+        var _a;
+        let parentElem = event.target;
+        let needToClose = true;
+        while (parentElem && 'parentNode' in parentElem) {
+            if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
+                needToClose = false;
+                break;
+            }
+            parentElem = parentElem.parentNode;
+        }
+        if (needToClose) {
+            onRequestClose(event);
+        }
+    }, [onRequestClose, anchorElement]);
+    React.useEffect(() => {
+        window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
+        return () => {
+            window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
+        };
+    }, [handleMouseDown]);
+    const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
+        error,
+        isOpen, anchorPos: actualPlacement, endIcon: isLoading ? React.createElement(Spinner_1.default, null) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, actualPlacement, isLoading, overridesMap, nativeButtonProps]);
+    const labelProps = React.useMemo(() => ({
+        htmlFor: inputID,
+        error,
+    }), [inputID, error]);
+    if (!(items === null || items === void 0 ? void 0 : items.length) && !isLoading) {
+        return null;
+    }
+    return (React.createElement(overridesMap.Container, null,
+        label != null && (React.createElement(overridesMap.Label, Object.assign({}, labelProps),
             label,
-            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
-        react_1.default.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error },
-            react_1.default.createElement(overridesMap.Button, Object.assign({ fullWidth: fullWidth, error: error, endIcon: isLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(overridesMap.Icon, { isOpen: isOpen }), onClick: event => {
-                    if (isOpen) {
-                        onRequestClose(event);
-                    }
-                    else {
-                        onRequestOpen(event);
-                    }
-                    if (typeof nativeButtonProps.onClick === 'function') {
-                        nativeButtonProps.onClick(event);
-                    }
-                } }, nativeButtonProps, { ref: el => {
-                    if (anchorElement !== el) {
-                        setAnchorElement(el);
-                    }
-                    if (typeof ref === 'function') {
-                        ref(el);
-                    }
-                    if (ref && typeof ref === 'object') {
-                        ref.current = el;
-                    }
-                } }), renderValueAsString())),
-        react_1.default.createElement(overridesMap.ErrorText, { error: error }, errorText),
-        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, multiple: multiple, items: items, value: value, isOpen: isOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: item => {
-                if (typeof onChange === 'function') {
-                    onChange(item);
-                }
-            }, closeOnSelect: !multiple, onRequestClose: evt => {
-                if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
-                    onRequestClose(evt);
-                    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
-                }
-            } }, ({ index, item }, itemProps) => children({ index, item: item }, itemProps))), [
-            items,
-            anchorPos,
-            multiple,
-            value,
-            isOpen,
-            getOptionSelected,
-            onChange,
-            onRequestClose,
-            children,
-            anchorElement,
-        ])));
+            requiredAsterisk != null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error, isOpen: isOpen },
+            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { onClick: handleButtonClick, ref: setRefs }), renderValueAsString())),
+        React.createElement(overridesMap.ErrorText, { error: error }, errorText),
+        React.createElement(SelectboxMenu_1.default, { actualPlacement: actualPlacement, multiple: multiple, items: items, value: value, isOpen: isOpen, anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, onAnchorPosChanged: setActualPlacement, ref: menuRef }, children)));
 });
 Selectbox.displayName = 'Selectbox';
 exports.default = Selectbox;

package/Surface/index.js

@@ -56,7 +56,7 @@ const Surface = (props, ref) => {
         Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || SurfaceFooter_1.default,
     }), [overrides]);
     if (!hasHeader && hasSubheader) {
-        console.warn(`[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header`);
+        console.warn('[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header');
     }
     return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, rounded: rounded, ref: ref }),
         hasHeader && (React.createElement(overridesMap.Header, { noPadding: noPadding, rounded: rounded }, header)),

package/Swiper/Swiper.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { SwiperContainerProps } from './SwiperContainer';
+import { SwiperWrapperProps } from './SwiperWrapper';
+import { SwiperTrackProps } from './SwiperTrack';
+export type SwiperRef = {
+    next: () => void;
+    prev: () => void;
+    goToIndex: (index: number) => void;
+};
+export interface SwiperOverrides {
+    /**
+     * Swiper main container
+     */
+    readonly Container?: React.ComponentType<SwiperContainerProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Swiper wrapper
+     */
+    readonly Wrapper?: React.ComponentType<SwiperWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Swiper slides track
+     */
+    readonly Track?: React.ComponentType<SwiperTrackProps & React.RefAttributes<HTMLDivElement>>;
+}
+export type SwiperProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly dragThreshold?: number;
+    readonly snap?: boolean;
+    readonly draggable?: boolean;
+    readonly initialIndex?: number;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: SwiperOverrides;
+};
+export declare const Swiper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly dragThreshold?: number | undefined;
+    readonly snap?: boolean | undefined;
+    readonly draggable?: boolean | undefined;
+    readonly initialIndex?: number | undefined;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: SwiperOverrides | undefined;
+} & React.RefAttributes<SwiperRef>>;
+export default Swiper;

package/Swiper/Swiper.js

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swiper = void 0;
+const React = __importStar(require("react"));
+const SwiperContainer_1 = __importDefault(require("./SwiperContainer"));
+const SwiperWrapper_1 = __importDefault(require("./SwiperWrapper"));
+const SwiperTrack_1 = __importDefault(require("./SwiperTrack"));
+exports.Swiper = React.forwardRef((props, ref) => {
+    const { children, dragThreshold = 120, snap = true, draggable = true, overrides, initialIndex = 0 } = props, restProps = __rest(props, ["children", "dragThreshold", "snap", "draggable", "overrides", "initialIndex"]);
+    const slides = React.Children.toArray(children);
+    const total = slides.length;
+    const [index, setIndex] = React.useState(initialIndex);
+    const [offset, setOffset] = React.useState(0);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const dragging = React.useRef(false);
+    const startX = React.useRef(0);
+    const lastX = React.useRef(0);
+    const lastTime = React.useRef(0);
+    const velocity = React.useRef(0);
+    const width = React.useRef(0);
+    const wrapperRef = React.useRef(null);
+    const onPointerDown = React.useCallback((e) => {
+        if (!wrapperRef.current || !draggable) {
+            return;
+        }
+        width.current = wrapperRef.current.offsetWidth;
+        dragging.current = true;
+        setIsDragging(true);
+        startX.current = e.clientX;
+        lastX.current = e.clientX;
+        lastTime.current = performance.now();
+        velocity.current = 0;
+        e.target.setPointerCapture(e.pointerId);
+    }, [draggable]);
+    const onPointerMove = React.useCallback((e) => {
+        if (!dragging.current) {
+            return;
+        }
+        const now = performance.now();
+        const dx = e.clientX - lastX.current;
+        const dt = now - lastTime.current;
+        if (dt > 0) {
+            velocity.current = dx / dt;
+        }
+        lastX.current = e.clientX;
+        lastTime.current = now;
+        let delta = lastX.current - startX.current;
+        if (index === 0 && delta > 0) {
+            delta *= 0.3;
+        }
+        if (index === total - 1 && delta < 0) {
+            delta *= 0.3;
+        }
+        setOffset(delta);
+    }, [index, total]);
+    const onPointerUp = React.useCallback((e) => {
+        if (!dragging.current) {
+            return;
+        }
+        const delta = lastX.current - startX.current;
+        const v = Math.abs(velocity.current);
+        const velocityFactor = Math.min(v * 250, 0.65);
+        const threshold = Math.max(20, Math.min(dragThreshold * (1 - velocityFactor), dragThreshold));
+        let next = index;
+        if (Math.abs(delta) > threshold) {
+            next = delta < 0 ? index + 1 : index - 1;
+        }
+        next = Math.max(0, Math.min(total - 1, next));
+        if (snap) {
+            setIndex(next);
+            setOffset(0);
+        }
+        else {
+            setIndex(next);
+        }
+        dragging.current = false;
+        setIsDragging(false);
+        e.target.releasePointerCapture(e.pointerId);
+    }, [dragThreshold, index, snap, total]);
+    const next = React.useCallback(() => {
+        setIndex(i => Math.min(total - 1, i + 1));
+    }, [total]);
+    const prev = React.useCallback(() => {
+        setIndex(i => Math.max(0, i - 1));
+    }, []);
+    const goToIndex = React.useCallback((i) => {
+        setIndex(Math.max(0, Math.min(total - 1, i)));
+    }, [total]);
+    React.useImperativeHandle(ref, () => ({ next, prev, goToIndex }), [next, prev, goToIndex]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SwiperContainer_1.default,
+        Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || SwiperTrack_1.default,
+        Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || SwiperWrapper_1.default,
+    }), [overrides]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, restProps),
+        React.createElement(overridesMap.Wrapper, { ref: wrapperRef, draggable: draggable, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp },
+            React.createElement(overridesMap.Track, { dragging: isDragging, index: index, offset: offset }, slides.map((slide, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            React.createElement(React.Fragment, { key: i }, slide)))))));
+});
+exports.Swiper.displayName = 'Swiper';
+exports.default = exports.Swiper;

package/Swiper/SwiperContainer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type SwiperContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const SwiperContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default SwiperContainer;

package/Swiper/SwiperContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwiperContainer = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.SwiperContainer = styled_1.default.div `
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+`;
+exports.default = exports.SwiperContainer;

package/Swiper/SwiperSlide.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type SwiperSlideProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+};
+export declare const SwiperSlide: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+} & React.RefAttributes<HTMLDivElement>>;

package/Swiper/SwiperSlide.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwiperSlide = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const React = __importStar(require("react"));
+const StyledSlide = styled_1.default.div `
+  flex: 0 0 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+`;
+exports.SwiperSlide = React.forwardRef((props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledSlide, Object.assign({}, restProps, { ref: ref }), children));
+});
+exports.SwiperSlide.displayName = 'SwiperSlide';

package/Swiper/SwiperTrack.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type SwiperTrackProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode;
+    readonly index: number;
+    readonly offset: number;
+    readonly dragging: boolean;
+};
+export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode;
+    readonly index: number;
+    readonly offset: number;
+    readonly dragging: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SwiperTrack;

package/Swiper/SwiperTrack.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwiperTrack = void 0;
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledTrack = styled_1.default.div `
+  display: flex;
+  height: 100%;
+  transition: ${p => (p.$dragging ? 'none' : 'transform 0.3s ease')};
+  will-change: transform;
+  transform: ${({ $index, $offset }) => {
+    const trackX = `translateX(calc(${-($index * 100)}% + ${$offset}px))`;
+    return trackX;
+}};
+`;
+exports.SwiperTrack = React.forwardRef((props, ref) => {
+    const { children, index, offset, dragging } = props, restProps = __rest(props, ["children", "index", "offset", "dragging"]);
+    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset }, restProps, { ref: ref }), children));
+});
+exports.SwiperTrack.displayName = 'SwiperTrack';
+exports.default = exports.SwiperTrack;

package/Swiper/SwiperWrapper.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type SwiperWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly draggable: boolean;
+};
+export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & {
+    $draggable: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const SwiperWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly draggable: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SwiperWrapper;