rox-react-components 0.0.1 → 0.0.3

package/README.md

@@ -3,3 +3,9 @@
 # Usage & Components
 
 [Demo](https://stackblitz.com/edit/stackblitz-starters-wftsic?file=src%2FApp.tsx)
+
+# Components
+
+## Card
+
+## Swiper (suppoert <strong>PC</strong> & <strong>Mobile</strong> Platform)

package/dist/es/Card/Card.js

@@ -1,17 +1 @@
-import { css } from 'aphrodite';
-import React, { useMemo } from 'react';
-import styles from './styles.js';
-
-var Card = function (_a) {
-    var _b = _a.expand, expand = _b === void 0 ? false : _b, children = _a.children, _c = _a.duration, duration = _c === void 0 ? 200 : _c;
-    var transitionDuration = useMemo(function () { return ({
-        transitionDuration: "".concat(duration, "ms"),
-        msTransitionDuration: "".concat(duration, "ms"),
-        MozTransitionDuration: "".concat(duration, "ms"),
-        WebkitTransitionDuration: "".concat(duration, "ms"),
-    }); }, [duration]);
-    return (React.createElement("div", { style: transitionDuration, className: "".concat(css(styles.collapse), " ").concat(expand ? css(styles.expand) : '') },
-        React.createElement("div", { className: css(styles.hide0) }, children)));
-};
-
-export { Card as default };
+import{css as t}from"aphrodite/no-important";import n,{useMemo as a}from"react";import o from"./styles.js";var r=function(r){var i=r.expand,e=void 0!==i&&i,c=r.children,s=r.duration,m=void 0===s?200:s,d=a((function(){return{transitionDuration:"".concat(m,"ms"),msTransitionDuration:"".concat(m,"ms"),MozTransitionDuration:"".concat(m,"ms"),WebkitTransitionDuration:"".concat(m,"ms")}}),[m]);return n.createElement("div",{style:d,className:"".concat(t(o.collapse)," ").concat(e?t(o.expand):"")},n.createElement("div",{className:t(o.hide0)},c))};export{r as default};

package/dist/es/Card/index.js

@@ -1,5 +1 @@
-import Card from './Card.js';
-
-
-
-export { Card as default };
+import r from"./Card.js";export{r as default};

package/dist/es/Card/styles.js

@@ -1,17 +1 @@
-import { StyleSheet } from 'aphrodite';
-
-var styles = StyleSheet.create({
-    collapse: {
-        display: 'grid',
-        gridTemplateRows: '0fr',
-        overflow: 'hidden',
-    },
-    expand: {
-        gridTemplateRows: '1fr',
-    },
-    hide0: {
-        minHeight: 0,
-    },
-});
-
-export { styles as default };
+import{StyleSheet as e}from"aphrodite/no-important";var r=e.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});export{r as default};

package/dist/es/Swiper/Swiper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SwiperExposeMethods } from '../types';
+import { UseSwiperStateProps } from './useSwiperState';
+declare module 'react' {
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}
+declare const _default: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
+export default _default;

package/dist/es/Swiper/Swiper.js

@@ -0,0 +1 @@
+import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import r,{forwardRef as n,useMemo as o,useImperativeHandle as a}from"react";import l from"./styles.js";import i from"./useSwiperState.js";var d={data:[],renderItem:function(e){return null},duration:300,delay:3e3,autoPlay:!1,boundary:1/3,onChange:function(){return null},active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:{},activeDotStyle:{}},c=n((function(n,c){var s=e(e({},d),n),u=i(s),f=u.children,m=u.dotVisible,b=u.dotBoxStyle,y=u.dotStyle,v=u.activeDotStyle,_=u.scroll_element,h=u.box_element,p=u.width,x=u.boundary,w=u.renderItem,k=u.list,S=u.current,E=u.setCurrent,N=u.playNext,V=u.playPrev,g=o((function(){return p?{width:k.length*p+"px"}:{}}),[k,p]),B=o((function(){return k.length>=2}),[k.length]);if(a(c,(function(){return{next:function(){return N()},prev:function(){return V()}}}),[N,V]),void 0===x||x<=0||x>=1)throw new Error("boundary must between 0 - 1, exclude 0 and 1.");return r.createElement("div",{className:t(l.relative,l.w_full,l.overflow_hidden,l.border_box)},r.createElement("div",{ref:h,className:t(l.relative,l.w_full,l.overflow_hidden,l.border_box)},r.createElement("div",{ref:_,style:e(e({},g),{backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"}),className:t(l.w_full,l.flex,l.nowrap,l.item_center,l.justify_center,l.border_box,l.back_hidden)},k.map((function(e,n){return r.createElement("div",{key:n,className:t(l.flex_1,l.border_box,l.overflow_hidden,l.trans_0),style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"}},w(e))})))),f||B&&m&&r.createElement("ul",{className:t(l.dots_box),style:b},n.data.map((function(n,o){return r.createElement("li",{className:"".concat(t(l.dot)," ").concat(o===S?t(l.active):""),key:o,style:o===S?e(e({},y),v):y,onClick:function(){return E(o)}})}))))}));export{c as default};

package/dist/es/Swiper/index.d.ts

@@ -0,0 +1,2 @@
+import Swiper from './Swiper';
+export default Swiper;

package/dist/es/Swiper/index.js

@@ -0,0 +1 @@
+import r from"./Swiper.js";export{r as default};

package/dist/es/Swiper/styles.d.ts

@@ -0,0 +1,17 @@
+declare const styles: {
+    border_box: object;
+    w_full: object;
+    overflow_hidden: object;
+    flex: object;
+    flex_1: object;
+    item_center: object;
+    justify_center: object;
+    nowrap: object;
+    relative: object;
+    back_hidden: object;
+    trans_0: object;
+    dots_box: object;
+    dot: object;
+    active: object;
+};
+export default styles;

package/dist/es/Swiper/styles.js

@@ -0,0 +1 @@
+import{StyleSheet as e}from"aphrodite/no-important";var t=e.create({border_box:{boxSizing:"border-box"},w_full:{width:"100%"},overflow_hidden:{overflow:"hidden"},flex:{display:"flex"},flex_1:{flex:1},item_center:{alignItems:"center"},justify_center:{justifyContent:"center"},nowrap:{whiteSpace:"nowrap"},relative:{position:"relative"},back_hidden:{backfaceVisibility:"hidden"},trans_0:{transform:"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"},dots_box:{position:"absolute",bottom:"15px",width:"100%",display:"flex",alignItems:"center",justifyContent:"center",columnGap:"6px",listStyle:"none",zIndex:99},dot:{width:"10px",height:"10px",borderRadius:"9999px",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},active:{backgroundColor:"rgba(255,255,255,.7)"}});export{t as default};

package/dist/es/Swiper/useSwiperState.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, PropsWithChildren, ReactNode, RefObject } from 'react';
+export interface UseSwiperStateProps<T> extends PropsWithChildren {
+    data: T[];
+    renderItem: (item: T) => ReactNode;
+    duration?: number;
+    delay?: number;
+    autoPlay?: boolean;
+    boundary?: number;
+    onChange?: (index: number) => void;
+    active?: number;
+    dotVisible?: boolean;
+    dotBoxStyle?: CSSProperties;
+    dotStyle?: CSSProperties;
+    activeDotStyle?: CSSProperties;
+}
+interface UseSwiperStateResponse<T, S, B> extends UseSwiperStateProps<T> {
+    scroll_element: RefObject<S>;
+    box_element: RefObject<B>;
+    width: number;
+    list: T[];
+    current: number;
+    playNext: () => any;
+    playPrev: () => any;
+    setCurrent: (i: number) => void;
+}
+export default function useSwiperState<T, S extends HTMLElement, B extends HTMLElement>(props: UseSwiperStateProps<T>): UseSwiperStateResponse<T, S, B>;
+export {};

package/dist/es/Swiper/useSwiperState.js

@@ -0,0 +1 @@
+import{__awaiter as t,__generator as e,__spreadArray as n,__assign as r}from"tslib";import{useRef as u,useState as c,useCallback as a,useEffect as o}from"react";import i from"../utils.js";function l(t,e){t.current&&(t.current.style.transform="translate3d(".concat(e,", 0 ,0)"),t.current.style.webkitTransform="translate3d(".concat(e,", 0 ,0)"))}function s(t,e){t.current&&(t.current.style.transition=e,t.current.style.webkitTransition=e)}function d(d){var v=this,f=u(null),p=u(null),h=u(d.active),m=u(0),g=u(0),y=u(!1),x=u(),T=u(!1),b=c(!1),E=b[0],L=b[1],w=c(d.data),P=w[0],X=w[1],C=c(0),D=C[0],S=C[1],k=c(d.active),z=k[0],N=k[1],W=a((function(){var t;return(null===(t=p.current)||void 0===t?void 0:t.clientWidth)||0}),[]),_=a((function(){S(W()),s(f,"none"),l(f,"-".concat(h.current*W(),"px"))}),[W]),j=a((function(){N((function(t){var e=t+1;return e>=P.length-2?0:e}))}),[P.length]),K=a((function(){N((function(t){var e=t-1;return e<0?P.length-3:e}))}),[P.length]),M=a((function(n){return t(v,void 0,void 0,(function(){return e(this,(function(t){switch(t.label){case 0:return L(!0),h.current=n+1,N(n),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(h.current*W(),"px")),[4,i.sleep(d.duration)];case 1:return t.sent(),[4,i.sleep(0)];case 2:return t.sent(),L(!1),[2]}}))}))}),[P.length,W,d.duration]),q=a((function(t,e){void 0===e&&(e=!1),L(!0),y.current=!0,P.length<2||(t.preventDefault(),t.stopPropagation(),m.current=e?t.pageX:t.targetTouches[0].pageX,s(f,"none"),0===h.current&&(h.current=P.length-2,l(f,"-".concat(h.current*W(),"px"))),h.current===P.length-1&&(h.current=1,l(f,"-".concat(h.current*W(),"px"))),f.current&&(g.current=function(t){var e=void 0;if(t.current){var n=getComputedStyle(t.current).transform;try{e=new WebKitCSSMatrix(n).m41}catch(t){var r=n.split(/\(|\)/)[1].split(",");e=Number(r[r.length-2])}}return e}(f)))}),[P.length,W]),A=a((function(t,e){if(void 0===e&&(e=!1),!(P.length<2)&&y.current){t.preventDefault(),t.stopPropagation();var n=e?t.pageX-m.current:t.targetTouches[0].pageX-m.current,r=g.current+n;s(f,"none"),l(f,r+"px")}}),[P.length]),B=a((function(t,e){if(void 0===e&&(e=!1),y.current=!1,L(!1),!(P.length<2)){t.preventDefault(),t.stopPropagation(),s(f,"all ".concat(d.duration,"ms linear"));var n=e?t.pageX-m.current:t.changedTouches[0].pageX-m.current;n>W()*d.boundary?(h.current--,K()):n<-W()*d.boundary&&(h.current++,j()),l(f,"-".concat(h.current*W(),"px"))}}),[P.length,d.duration,W,d.boundary,j,K]),F=a((function(){return t(v,void 0,void 0,(function(){return e(this,(function(t){switch(t.label){case 0:return P.length<2||T.current?[4,i.sleep(0)]:[3,2];case 1:return[2,t.sent()];case 2:return clearTimeout(x.current),T.current=!0,h.current++,h.current>=P.length?(h.current=1,s(f,"none"),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(0)]):[3,4];case 3:return t.sent(),T.current=!1,[2,F()];case 4:return j(),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(d.duration,!0)];case 5:t.sent(),T.current=!1,d.autoPlay&&P.length>=2&&(x.current=setTimeout((function(){return F()}),d.delay)),t.label=6;case 6:return[2]}}))}))}),[P.length,W,d.duration,d.autoPlay,d.delay,j]),G=a((function(){return t(v,void 0,void 0,(function(){return e(this,(function(t){switch(t.label){case 0:return P.length<2||T.current?[4,i.sleep(0)]:[3,2];case 1:return[2,t.sent()];case 2:return clearTimeout(x.current),T.current=!0,h.current--,h.current<0?(h.current=P.length-2,s(f,"none"),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(0)]):[3,4];case 3:return t.sent(),T.current=!1,[2,G()];case 4:return K(),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(d.duration,!0)];case 5:t.sent(),T.current=!1,d.autoPlay&&P.length>=2&&(x.current=setTimeout((function(){return F()}),d.delay)),t.label=6;case 6:return[2]}}))}))}),[P.length,d.duration,W,d.autoPlay,F,d.delay,K]),H=a((function(t){return q(t)}),[q]),I=a((function(t){return A(t)}),[A]),J=a((function(t){return B(t)}),[B]),O=a((function(t){return q(t,!0)}),[q]),Q=a((function(t){return A(t,!0)}),[A]),R=a((function(t){return B(t,!0)}),[B]),U=a((function(){f.current&&p.current&&(p.current.addEventListener("touchstart",H,{passive:!1}),p.current.addEventListener("touchmove",I,{passive:!1}),p.current.addEventListener("touchend",J,{passive:!1}))}),[H,I,J]),V=a((function(){f.current&&p.current&&(p.current.removeEventListener("touchstart",H),p.current.removeEventListener("touchmove",I),p.current.removeEventListener("touchend",J))}),[H,I,J]),Y=a((function(){f.current&&p.current&&(p.current.addEventListener("mousedown",O,{passive:!1}),p.current.addEventListener("mousemove",Q,{passive:!1}),p.current.addEventListener("mouseup",R,{passive:!1}))}),[O,Q,R]),Z=a((function(){f.current&&p.current&&(p.current.removeEventListener("mousedown",O),p.current.removeEventListener("mousemove",Q),p.current.removeEventListener("mouseup",R))}),[O,Q,R]);return o((function(){d.data.length<2?X(d.data):X(n(n([d.data[d.data.length-1]],d.data,!0),[d.data[0]],!1))}),[d.data,W]),o((function(){clearTimeout(x.current),h.current=d.active+1,N(d.active),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(h.current*W(),"px"))}),[d.active,d.duration,W]),o((function(){return _(),window.addEventListener("resize",_),function(){window.removeEventListener("resize",_)}}),[_]),o((function(){return U(),function(){V()}}),[U,V]),o((function(){return Y(),function(){Z()}}),[Y,Z]),o((function(){var t=x.current;return E&&clearTimeout(x.current),d.autoPlay&&P.length>=2?x.current=setTimeout((function(){return F()}),d.delay):clearTimeout(x.current),function(){clearTimeout(t)}}),[E,d.autoPlay,P.length,F,d.delay]),o((function(){var t;null===(t=d.onChange)||void 0===t||t.call(d,z)}),[z,d.onChange]),o((function(){var t=x.current;return function(){clearTimeout(t)}}),[]),r(r({},d),{scroll_element:f,box_element:p,width:D,list:P,current:z,playNext:F,playPrev:G,setCurrent:M})}export{d as default};

package/dist/es/index.d.ts

@@ -1 +1,4 @@
+export * from './types';
 export { default as Card } from './Card';
+export { default as Swiper } from './Swiper';
+export { default as utils } from './utils';

package/dist/es/index.js

@@ -1 +1 @@
-export { default as Card } from './Card/Card.js';
+export{default as Card}from"./Card/Card.js";export{default as Swiper}from"./Swiper/Swiper.js";export{default as utils}from"./utils.js";

package/dist/es/types.d.ts

@@ -0,0 +1,4 @@
+export interface SwiperExposeMethods {
+    next: () => void;
+    prev: () => void;
+}

package/dist/es/utils.d.ts

@@ -0,0 +1,5 @@
+declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
+declare const _default: {
+    sleep: typeof sleep;
+};
+export default _default;

package/dist/es/utils.js

@@ -0,0 +1 @@
+import{__awaiter as t,__generator as n}from"tslib";var r={sleep:function(r,i){return void 0===i&&(i=!1),t(this,void 0,void 0,(function(){return n(this,(function(t){return[2,new Promise((function(t){return setTimeout((function(){return t(i)}),r)}))]}))}))}};export{r as default};

package/dist/index.d.ts

@@ -1,4 +1,9 @@
-import { FC, PropsWithChildren } from 'react';
+import React, { FC, PropsWithChildren, ReactNode, CSSProperties } from 'react';
+
+interface SwiperExposeMethods {
+    next: () => void;
+    prev: () => void;
+}
 
 interface CardProps extends PropsWithChildren {
     expand?: boolean;
@@ -6,4 +11,29 @@ interface CardProps extends PropsWithChildren {
 }
 declare const Card: FC<CardProps>;
 
-export { Card };
+interface UseSwiperStateProps<T> extends PropsWithChildren {
+    data: T[];
+    renderItem: (item: T) => ReactNode;
+    duration?: number;
+    delay?: number;
+    autoPlay?: boolean;
+    boundary?: number;
+    onChange?: (index: number) => void;
+    active?: number;
+    dotVisible?: boolean;
+    dotBoxStyle?: CSSProperties;
+    dotStyle?: CSSProperties;
+    activeDotStyle?: CSSProperties;
+}
+
+declare module 'react' {
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}
+declare const _default$1: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
+
+declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
+declare const _default: {
+    sleep: typeof sleep;
+};
+
+export { Card, _default$1 as Swiper, type SwiperExposeMethods, _default as utils };

package/dist/lib/Card/Card.js

@@ -1,19 +1 @@
-'use strict';
-
-var aphrodite = require('aphrodite');
-var React = require('react');
-var styles = require('./styles.js');
-
-var Card = function (_a) {
-    var _b = _a.expand, expand = _b === void 0 ? false : _b, children = _a.children, _c = _a.duration, duration = _c === void 0 ? 200 : _c;
-    var transitionDuration = React.useMemo(function () { return ({
-        transitionDuration: "".concat(duration, "ms"),
-        msTransitionDuration: "".concat(duration, "ms"),
-        MozTransitionDuration: "".concat(duration, "ms"),
-        WebkitTransitionDuration: "".concat(duration, "ms"),
-    }); }, [duration]);
-    return (React.createElement("div", { style: transitionDuration, className: "".concat(aphrodite.css(styles.collapse), " ").concat(expand ? aphrodite.css(styles.expand) : '') },
-        React.createElement("div", { className: aphrodite.css(styles.hide0) }, children)));
-};
-
-module.exports = Card;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important"),t=require("react"),a=require("./styles.js");exports.default=function(n){var r=n.expand,s=void 0!==r&&r,i=n.children,o=n.duration,c=void 0===o?200:o,u=t.useMemo((function(){return{transitionDuration:"".concat(c,"ms"),msTransitionDuration:"".concat(c,"ms"),MozTransitionDuration:"".concat(c,"ms"),WebkitTransitionDuration:"".concat(c,"ms")}}),[c]);return t.createElement("div",{style:u,className:"".concat(e.css(a.default.collapse)," ").concat(s?e.css(a.default.expand):"")},t.createElement("div",{className:e.css(a.default.hide0)},i))};

package/dist/lib/Card/index.js

@@ -1,7 +1 @@
-'use strict';
-
-var Card = require('./Card.js');
-
-
-
-module.exports = Card;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Card.js");exports.default=e.default;

package/dist/lib/Card/styles.js

@@ -1,19 +1 @@
-'use strict';
-
-var aphrodite = require('aphrodite');
-
-var styles = aphrodite.StyleSheet.create({
-    collapse: {
-        display: 'grid',
-        gridTemplateRows: '0fr',
-        overflow: 'hidden',
-    },
-    expand: {
-        gridTemplateRows: '1fr',
-    },
-    hide0: {
-        minHeight: 0,
-    },
-});
-
-module.exports = styles;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});exports.default=e;

package/dist/lib/Swiper/Swiper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SwiperExposeMethods } from '../types';
+import { UseSwiperStateProps } from './useSwiperState';
+declare module 'react' {
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}
+declare const _default: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
+export default _default;

package/dist/lib/Swiper/Swiper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),a=require("react"),r=require("./styles.js"),l=require("./useSwiperState.js"),n={data:[],renderItem:function(e){return null},duration:300,delay:3e3,autoPlay:!1,boundary:1/3,onChange:function(){return null},active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:{},activeDotStyle:{}},d=a.forwardRef((function(d,i){var s=e.__assign(e.__assign({},n),d),u=l.default(s),o=u.children,f=u.dotVisible,c=u.dotBoxStyle,_=u.dotStyle,m=u.activeDotStyle,b=u.scroll_element,y=u.box_element,v=u.width,h=u.boundary,x=u.renderItem,p=u.list,w=u.current,g=u.setCurrent,k=u.playNext,S=u.playPrev,E=a.useMemo((function(){return v?{width:p.length*v+"px"}:{}}),[p,v]),N=a.useMemo((function(){return p.length>=2}),[p.length]);if(a.useImperativeHandle(i,(function(){return{next:function(){return k()},prev:function(){return S()}}}),[k,S]),void 0===h||h<=0||h>=1)throw new Error("boundary must between 0 - 1, exclude 0 and 1.");return a.createElement("div",{className:t.css(r.default.relative,r.default.w_full,r.default.overflow_hidden,r.default.border_box)},a.createElement("div",{ref:y,className:t.css(r.default.relative,r.default.w_full,r.default.overflow_hidden,r.default.border_box)},a.createElement("div",{ref:b,style:e.__assign(e.__assign({},E),{backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"}),className:t.css(r.default.w_full,r.default.flex,r.default.nowrap,r.default.item_center,r.default.justify_center,r.default.border_box,r.default.back_hidden)},p.map((function(e,l){return a.createElement("div",{key:l,className:t.css(r.default.flex_1,r.default.border_box,r.default.overflow_hidden,r.default.trans_0),style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"}},x(e))})))),o||N&&f&&a.createElement("ul",{className:t.css(r.default.dots_box),style:c},d.data.map((function(l,n){return a.createElement("li",{className:"".concat(t.css(r.default.dot)," ").concat(n===w?t.css(r.default.active):""),key:n,style:n===w?e.__assign(e.__assign({},_),m):_,onClick:function(){return g(n)}})}))))}));exports.default=d;

package/dist/lib/Swiper/index.d.ts

@@ -0,0 +1,2 @@
+import Swiper from './Swiper';
+export default Swiper;

package/dist/lib/Swiper/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Swiper.js");exports.default=e.default;

package/dist/lib/Swiper/styles.d.ts

@@ -0,0 +1,17 @@
+declare const styles: {
+    border_box: object;
+    w_full: object;
+    overflow_hidden: object;
+    flex: object;
+    flex_1: object;
+    item_center: object;
+    justify_center: object;
+    nowrap: object;
+    relative: object;
+    back_hidden: object;
+    trans_0: object;
+    dots_box: object;
+    dot: object;
+    active: object;
+};
+export default styles;

package/dist/lib/Swiper/styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({border_box:{boxSizing:"border-box"},w_full:{width:"100%"},overflow_hidden:{overflow:"hidden"},flex:{display:"flex"},flex_1:{flex:1},item_center:{alignItems:"center"},justify_center:{justifyContent:"center"},nowrap:{whiteSpace:"nowrap"},relative:{position:"relative"},back_hidden:{backfaceVisibility:"hidden"},trans_0:{transform:"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"},dots_box:{position:"absolute",bottom:"15px",width:"100%",display:"flex",alignItems:"center",justifyContent:"center",columnGap:"6px",listStyle:"none",zIndex:99},dot:{width:"10px",height:"10px",borderRadius:"9999px",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},active:{backgroundColor:"rgba(255,255,255,.7)"}});exports.default=e;

package/dist/lib/Swiper/useSwiperState.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, PropsWithChildren, ReactNode, RefObject } from 'react';
+export interface UseSwiperStateProps<T> extends PropsWithChildren {
+    data: T[];
+    renderItem: (item: T) => ReactNode;
+    duration?: number;
+    delay?: number;
+    autoPlay?: boolean;
+    boundary?: number;
+    onChange?: (index: number) => void;
+    active?: number;
+    dotVisible?: boolean;
+    dotBoxStyle?: CSSProperties;
+    dotStyle?: CSSProperties;
+    activeDotStyle?: CSSProperties;
+}
+interface UseSwiperStateResponse<T, S, B> extends UseSwiperStateProps<T> {
+    scroll_element: RefObject<S>;
+    box_element: RefObject<B>;
+    width: number;
+    list: T[];
+    current: number;
+    playNext: () => any;
+    playPrev: () => any;
+    setCurrent: (i: number) => void;
+}
+export default function useSwiperState<T, S extends HTMLElement, B extends HTMLElement>(props: UseSwiperStateProps<T>): UseSwiperStateResponse<T, S, B>;
+export {};

package/dist/lib/Swiper/useSwiperState.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),n=require("../utils.js");function r(e,t){e.current&&(e.current.style.transform="translate3d(".concat(t,", 0 ,0)"),e.current.style.webkitTransform="translate3d(".concat(t,", 0 ,0)"))}function u(e,t){e.current&&(e.current.style.transition=t,e.current.style.webkitTransition=t)}exports.default=function(a){var c=this,o=t.useRef(null),l=t.useRef(null),s=t.useRef(a.active),i=t.useRef(0),f=t.useRef(0),d=t.useRef(!1),v=t.useRef(),p=t.useRef(!1),h=t.useState(!1),g=h[0],m=h[1],b=t.useState(a.data),y=b[0],C=b[1],_=t.useState(0),k=_[0],E=_[1],w=t.useState(a.active),x=w[0],T=w[1],L=t.useCallback((function(){var e;return(null===(e=l.current)||void 0===e?void 0:e.clientWidth)||0}),[]),P=t.useCallback((function(){E(L()),u(o,"none"),r(o,"-".concat(s.current*L(),"px"))}),[L]),R=t.useCallback((function(){T((function(e){var t=e+1;return t>=y.length-2?0:t}))}),[y.length]),S=t.useCallback((function(){T((function(e){var t=e-1;return t<0?y.length-3:t}))}),[y.length]),X=t.useCallback((function(t){return e.__awaiter(c,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return m(!0),s.current=t+1,T(t),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(s.current*L(),"px")),[4,n.default.sleep(a.duration)];case 1:return e.sent(),[4,n.default.sleep(0)];case 2:return e.sent(),m(!1),[2]}}))}))}),[y.length,L,a.duration]),q=t.useCallback((function(e,t){void 0===t&&(t=!1),m(!0),d.current=!0,y.length<2||(e.preventDefault(),e.stopPropagation(),i.current=t?e.pageX:e.targetTouches[0].pageX,u(o,"none"),0===s.current&&(s.current=y.length-2,r(o,"-".concat(s.current*L(),"px"))),s.current===y.length-1&&(s.current=1,r(o,"-".concat(s.current*L(),"px"))),o.current&&(f.current=function(e){var t=void 0;if(e.current){var n=getComputedStyle(e.current).transform;try{t=new WebKitCSSMatrix(n).m41}catch(e){var r=n.split(/\(|\)/)[1].split(",");t=Number(r[r.length-2])}}return t}(o)))}),[y.length,L]),D=t.useCallback((function(e,t){if(void 0===t&&(t=!1),!(y.length<2)&&d.current){e.preventDefault(),e.stopPropagation();var n=t?e.pageX-i.current:e.targetTouches[0].pageX-i.current,a=f.current+n;u(o,"none"),r(o,a+"px")}}),[y.length]),j=t.useCallback((function(e,t){if(void 0===t&&(t=!1),d.current=!1,m(!1),!(y.length<2)){e.preventDefault(),e.stopPropagation(),u(o,"all ".concat(a.duration,"ms linear"));var n=t?e.pageX-i.current:e.changedTouches[0].pageX-i.current;n>L()*a.boundary?(s.current--,S()):n<-L()*a.boundary&&(s.current++,R()),r(o,"-".concat(s.current*L(),"px"))}}),[y.length,a.duration,L,a.boundary,R,S]),z=t.useCallback((function(){return e.__awaiter(c,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return y.length<2||p.current?[4,n.default.sleep(0)]:[3,2];case 1:return[2,e.sent()];case 2:return clearTimeout(v.current),p.current=!0,s.current++,s.current>=y.length?(s.current=1,u(o,"none"),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(0)]):[3,4];case 3:return e.sent(),p.current=!1,[2,z()];case 4:return R(),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(a.duration,!0)];case 5:e.sent(),p.current=!1,a.autoPlay&&y.length>=2&&(v.current=setTimeout((function(){return z()}),a.delay)),e.label=6;case 6:return[2]}}))}))}),[y.length,L,a.duration,a.autoPlay,a.delay,R]),A=t.useCallback((function(){return e.__awaiter(c,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return y.length<2||p.current?[4,n.default.sleep(0)]:[3,2];case 1:return[2,e.sent()];case 2:return clearTimeout(v.current),p.current=!0,s.current--,s.current<0?(s.current=y.length-2,u(o,"none"),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(0)]):[3,4];case 3:return e.sent(),p.current=!1,[2,A()];case 4:return S(),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(a.duration,!0)];case 5:e.sent(),p.current=!1,a.autoPlay&&y.length>=2&&(v.current=setTimeout((function(){return z()}),a.delay)),e.label=6;case 6:return[2]}}))}))}),[y.length,a.duration,L,a.autoPlay,z,a.delay,S]),M=t.useCallback((function(e){return q(e)}),[q]),N=t.useCallback((function(e){return D(e)}),[D]),W=t.useCallback((function(e){return j(e)}),[j]),K=t.useCallback((function(e){return q(e,!0)}),[q]),O=t.useCallback((function(e){return D(e,!0)}),[D]),B=t.useCallback((function(e){return j(e,!0)}),[j]),F=t.useCallback((function(){o.current&&l.current&&(l.current.addEventListener("touchstart",M,{passive:!1}),l.current.addEventListener("touchmove",N,{passive:!1}),l.current.addEventListener("touchend",W,{passive:!1}))}),[M,N,W]),G=t.useCallback((function(){o.current&&l.current&&(l.current.removeEventListener("touchstart",M),l.current.removeEventListener("touchmove",N),l.current.removeEventListener("touchend",W))}),[M,N,W]),H=t.useCallback((function(){o.current&&l.current&&(l.current.addEventListener("mousedown",K,{passive:!1}),l.current.addEventListener("mousemove",O,{passive:!1}),l.current.addEventListener("mouseup",B,{passive:!1}))}),[K,O,B]),I=t.useCallback((function(){o.current&&l.current&&(l.current.removeEventListener("mousedown",K),l.current.removeEventListener("mousemove",O),l.current.removeEventListener("mouseup",B))}),[K,O,B]);return t.useEffect((function(){a.data.length<2?C(a.data):C(e.__spreadArray(e.__spreadArray([a.data[a.data.length-1]],a.data,!0),[a.data[0]],!1))}),[a.data,L]),t.useEffect((function(){clearTimeout(v.current),s.current=a.active+1,T(a.active),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(s.current*L(),"px"))}),[a.active,a.duration,L]),t.useEffect((function(){return P(),window.addEventListener("resize",P),function(){window.removeEventListener("resize",P)}}),[P]),t.useEffect((function(){return F(),function(){G()}}),[F,G]),t.useEffect((function(){return H(),function(){I()}}),[H,I]),t.useEffect((function(){var e=v.current;return g&&clearTimeout(v.current),a.autoPlay&&y.length>=2?v.current=setTimeout((function(){return z()}),a.delay):clearTimeout(v.current),function(){clearTimeout(e)}}),[g,a.autoPlay,y.length,z,a.delay]),t.useEffect((function(){var e;null===(e=a.onChange)||void 0===e||e.call(a,x)}),[x,a.onChange]),t.useEffect((function(){var e=v.current;return function(){clearTimeout(e)}}),[]),e.__assign(e.__assign({},a),{scroll_element:o,box_element:l,width:k,list:y,current:x,playNext:z,playPrev:A,setCurrent:X})};

package/dist/lib/index.d.ts

@@ -1 +1,4 @@
+export * from './types';
 export { default as Card } from './Card';
+export { default as Swiper } from './Swiper';
+export { default as utils } from './utils';

package/dist/lib/index.js

@@ -1,7 +1 @@
-'use strict';
-
-var Card = require('./Card/Card.js');
-
-
-
-exports.Card = Card;
+"use strict";var r=require("./Card/Card.js"),e=require("./Swiper/Swiper.js"),s=require("./utils.js");exports.Card=r.default,exports.Swiper=e.default,exports.utils=s.default;

package/dist/lib/types.d.ts

@@ -0,0 +1,4 @@
+export interface SwiperExposeMethods {
+    next: () => void;
+    prev: () => void;
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,5 @@
+declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
+declare const _default: {
+    sleep: typeof sleep;
+};
+export default _default;

package/dist/lib/utils.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib");var t={sleep:function(t,r){return void 0===r&&(r=!1),e.__awaiter(this,void 0,void 0,(function(){return e.__generator(this,(function(e){return[2,new Promise((function(e){return setTimeout((function(){return e(r)}),t)}))]}))}))}};exports.default=t;

package/package.json

@@ -1,18 +1,28 @@
 {
 	"name": "rox-react-components",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"main": "dist/lib/index.js",
 	"module": "dist/es/index.js",
 	"types": "dist/index.d.ts",
+	"description": "A React UI Component Library",
+	"keywords": [
+		"React",
+		"SlideMenu",
+		"Card",
+		"Swiper"
+	],
 	"files": [
 		"dist",
 		"README.md",
 		"pakcage.json"
 	],
+	"engines": {
+		"node": ">=14"
+	},
 	"author": "YangSu.Zhou",
 	"scripts": {
-		"dev": "cross-env NODE_ENV=development rollup -c",
-		"build": "cross-env NODE_ENV=production rollup -c -w"
+		"dev": "cross-env NODE_ENV=development rollup -c -w",
+		"build": "cross-env NODE_ENV=production rollup -c"
 	},
 	"license": "MIT",
 	"devDependencies": {
@@ -26,6 +36,7 @@
 		"@types/react-dom": "^18.2.14",
 		"cross-env": "^7.0.3",
 		"rollup": "^4.3.0",
+		"rollup-plugin-delete": "^2.0.0",
 		"rollup-plugin-dts": "^6.1.0",
 		"rollup-plugin-node-externals": "^6.1.2"
 	},

package/dist/es/Button/Button.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Button: () => React.JSX.Element;
-export default Button;

package/dist/es/Button/index.d.ts

@@ -1,2 +0,0 @@
-import Button from './Button';
-export default Button;

package/dist/es/Button/style.d.ts

@@ -1,4 +0,0 @@
-declare const styles: {
-    red: object;
-};
-export default styles;

package/dist/es/Slide/Slide.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Slide: () => React.JSX.Element;
-export default Slide;

package/dist/es/Slide/index.d.ts

@@ -1,2 +0,0 @@
-import Slide from './Slide';
-export default Slide;

package/dist/lib/Button/Button.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Button: () => React.JSX.Element;
-export default Button;

package/dist/lib/Button/index.d.ts

@@ -1,2 +0,0 @@
-import Button from './Button';
-export default Button;

package/dist/lib/Button/style.d.ts

@@ -1,4 +0,0 @@
-declare const styles: {
-    red: object;
-};
-export default styles;

package/dist/lib/Slide/Slide.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Slide: () => React.JSX.Element;
-export default Slide;

package/dist/lib/Slide/index.d.ts

@@ -1,2 +0,0 @@
-import Slide from './Slide';
-export default Slide;