rox-react-components 0.0.8 → 0.0.10

package/dist/es/Card/Card.js

@@ -1 +1 @@
-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};
+import{__assign as t}from"tslib";import{css as n}from"aphrodite/no-important";import a,{useMemo as o}from"react";import r from"./styles.js";var i={expand:!1,duration:200},e=function(e){var c=t(t({},i),e),s=c.duration,m=c.expand,d=c.children,l=o((function(){return{transitionDuration:"".concat(s,"ms"),msTransitionDuration:"".concat(s,"ms"),MozTransitionDuration:"".concat(s,"ms"),WebkitTransitionDuration:"".concat(s,"ms")}}),[s]);return a.createElement("div",{style:l,className:"".concat(n(r.collapse)," ").concat(m?n(r.expand):"")},a.createElement("div",{className:n(r.hide0)},d))};export{e as default};

package/dist/es/Container/Container.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface ContainerProps extends PropsWithChildren {
+    ratio?: number;
+}
+declare const Container: FC<ContainerProps>;
+export default Container;

package/dist/es/Container/Container.js

@@ -0,0 +1 @@
+import{__assign as t}from"tslib";import{css as r}from"aphrodite/no-important";import e,{useMemo as o}from"react";import l from"./styles.js";var a={ratio:1},i=function(i){var m=t(t({},a),i),n=m.ratio,f=m.children,s=o((function(){return null==n||n<=0?"100%":100/n+"%"}),[n]);return e.createElement("div",{className:r(l.relative,l.w_full,l.h_0,l.border_box),style:{paddingBottom:s}},e.createElement("div",{className:r(l.absolute,l.top_0,l.left_0,l.w_full,l.h_full)},f))};export{i as default};

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

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

package/dist/es/Container/index.js

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

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

@@ -0,0 +1,11 @@
+declare const styles: {
+    relative: object;
+    absolute: object;
+    top_0: object;
+    left_0: object;
+    w_full: object;
+    h_full: object;
+    h_0: object;
+    border_box: object;
+};
+export default styles;

package/dist/es/Container/styles.js

@@ -0,0 +1 @@
+import{StyleSheet as t}from"aphrodite/no-important";var o=t.create({relative:{position:"relative"},absolute:{position:"absolute"},top_0:{top:"0px"},left_0:{left:"0px"},w_full:{width:"100%"},h_full:{height:"100%"},h_0:{height:"0px"},border_box:{boxSizing:"border-box"}});export{o as default};

package/dist/es/Loading/Inner.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { LoadingProps } from './type';
+declare module 'react' {
+    interface CSSProperties {
+        '--delay'?: string;
+        '--width'?: string;
+        '--height'?: string;
+        '--bg'?: string;
+        '--margin'?: string;
+    }
+}
+declare const Inner: FC<{
+    style: LoadingProps['loadingStyle'];
+}>;
+export default Inner;

package/dist/es/Loading/Inner.js

@@ -0,0 +1 @@
+import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import r from"react";import a from"./styles.js";import{initLoadingStyle as i}from"./type.js";var m=[{delay:"0s"},{delay:"-1.1s"},{delay:"-1.0s"},{delay:"-0.9s"},{delay:"-0.8s"}],o=function(o){var s=e(e({},i),o.style);return r.createElement("div",{className:t(a.inner_box),style:{"--width":s.width,"--height":s.height,"--bg":s.bg,"--margin":s.margin}},m.map((function(e,i){return r.createElement("div",{key:i,style:{"--delay":e.delay},className:t(a.inner_box_item)})})))};export{o as default};

package/dist/es/Loading/Loading.d.ts

@@ -0,0 +1,17 @@
+import { Component, ReactNode } from 'react';
+import { LoadingProps } from './type';
+interface LoadingState {
+}
+declare class Loading extends Component<LoadingProps, LoadingState> {
+    state: Readonly<LoadingState>;
+    static defaultProps: LoadingProps;
+    private static el;
+    static show(options?: Pick<LoadingProps, 'bg' | 'loadingStyle' | 'customLoading'>): void;
+    static hide(): void;
+    render(): ReactNode;
+    static getDerivedStateFromProps(props: LoadingProps, state: LoadingState): null;
+    getSnapshotBeforeUpdate(prevProps: Readonly<LoadingProps>, prevState: Readonly<LoadingState>): null;
+    componentDidUpdate(prevProps: Readonly<LoadingProps>, prevState: Readonly<LoadingState>, snapshot?: any): void;
+    componentWillUnmount(): void;
+}
+export default Loading;

package/dist/es/Loading/Loading.js

@@ -0,0 +1 @@
+import{__extends as e,__assign as t}from"tslib";import{css as l}from"aphrodite/no-important";import o,{Component as r}from"react";import{createRoot as n}from"react-dom/client";import i from"./Inner.js";import u from"./dom.js";import a from"./styles.js";var d=function(r){function d(){var e=null!==r&&r.apply(this,arguments)||this;return e.state={},e}return e(d,r),d.show=function(e){d.el||(d.el=document.createElement("div"),u.addClass(d.el,l(a.fixed)),document.body.appendChild(d.el),n(d.el).render(o.createElement(d,t({},e,{children:null,visible:!0}))))},d.hide=function(){try{if(!d.el)return;document.body.removeChild(d.el),d.el=null}catch(e){d.el=null}},d.prototype.render=function(){var e=this.props,t=e.visible,r=e.bg,n=e.customLoading,u=e.loadingStyle,d=e.children;return o.createElement("div",{className:l(a.relative,a.w_full,a.h_full,a.border_box)},d,t?o.createElement("div",{className:l(a.absolute,a.top_0,a.left_0,a.w_full,a.h_full,a.z_99,a.center),style:{backgroundColor:r}},n||o.createElement(i,{style:u})):null)},d.getDerivedStateFromProps=function(e,t){return null},d.prototype.getSnapshotBeforeUpdate=function(e,t){return null},d.prototype.componentDidUpdate=function(e,t,l){},d.prototype.componentWillUnmount=function(){d.hide()},d.defaultProps={visible:!0,bg:"rgba(0,0,0,.7)",customLoading:null,loadingStyle:{}},d.el=null,d}(r);export{d as default};

package/dist/es/Loading/dom.d.ts

@@ -0,0 +1,7 @@
+declare function addClass<T extends HTMLElement>(el: T, cls: string): void;
+declare function removeClass<T extends HTMLElement>(el: T, cls: string): void;
+declare const _default: {
+    addClass: typeof addClass;
+    removeClass: typeof removeClass;
+};
+export default _default;

package/dist/es/Loading/dom.js

@@ -0,0 +1 @@
+var s={addClass:function(s,a){s.classList.contains(a)||s.classList.add(a)},removeClass:function(s,a){s.classList.remove(a)}};export{s as default};

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

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

package/dist/es/Loading/index.js

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

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

@@ -0,0 +1,15 @@
+declare const styles: {
+    relative: object;
+    center: object;
+    absolute: object;
+    top_0: object;
+    left_0: object;
+    w_full: object;
+    h_full: object;
+    border_box: object;
+    z_99: object;
+    inner_box: object;
+    inner_box_item: object;
+    fixed: object;
+};
+export default styles;

package/dist/es/Loading/styles.js

@@ -0,0 +1 @@
+import{StyleSheet as t}from"aphrodite/no-important";var e=t.create({relative:{position:"relative"},center:{display:"flex",alignItems:"center",justifyContent:"center"},absolute:{position:"absolute"},top_0:{top:"0px"},left_0:{left:"0px"},w_full:{width:"100%"},h_full:{height:"100%"},border_box:{boxSizing:"border-box"},z_99:{zIndex:99},inner_box:{display:"flex",width:"100%",height:"100%",textAlign:"center",fontSize:"10px",alignItems:"center",justifyContent:"center"},inner_box_item:{height:"var(--height)",width:"var(--width)",margin:"var(--margin)",backgroundColor:"var(--bg)",animationName:[{"0%, 40%, 100%":{transform:"scaleY(0.4)","-webkit-transform":"scaleY(0.4)"},"20%":{transform:"scaleY(1.0)","-webkit-transform":"scaleY(1.0)"}}],animationDelay:"var(--delay)",animationDuration:"1.2s",animationIterationCount:"infinite"},fixed:{position:"fixed",display:"flex",alignItems:"center",justifyContent:"center",top:"0",left:"0",width:"100%",height:"100%",zIndex:99}});export{e as default};

package/dist/es/Loading/type.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export interface LoadingProps extends PropsWithChildren {
+    visible?: boolean;
+    bg?: string;
+    customLoading?: ReactNode;
+    loadingStyle?: {
+        width?: string;
+        height?: string;
+        bg?: string;
+        margin?: string;
+    };
+}
+export declare const initLoadingStyle: LoadingProps['loadingStyle'];

package/dist/es/Loading/type.js

@@ -0,0 +1 @@
+var p={width:"6px",height:"50px",bg:"#fff",margin:"0 3px"};export{p as initLoadingStyle};

package/dist/es/Menu/Menu.d.ts

@@ -0,0 +1,28 @@
+import React, { CSSProperties, ReactNode } from 'react';
+declare module 'react' {
+    interface CSSProperties {
+        '--size'?: string;
+        '--strokeWidth'?: string;
+        '--color'?: string;
+    }
+}
+interface IconProps {
+    iconSize?: string;
+    iconStrokeWidth?: string;
+    iconColor?: string;
+}
+interface MenuProps<T> extends IconProps {
+    data: T[];
+    renderItem: (item: T) => ReactNode;
+    onChange?: (item: T, index: string) => void;
+    subItemStyle?: CSSProperties;
+    activeStyle?: CSSProperties;
+    active?: string;
+    isMultipleExpand?: boolean;
+    icon?: ReactNode;
+    activeIcon?: ReactNode;
+}
+declare const Menu: <T extends {
+    children?: unknown[] | undefined;
+}>(_props: MenuProps<T>) => React.JSX.Element;
+export default Menu;

package/dist/es/Menu/Menu.js

@@ -0,0 +1 @@
+import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import r,{createContext as n,useState as i,useEffect as a,useContext as c,useCallback as o}from"react";import l from"../Card/Card.js";import d from"./styles.js";var u={data:[],renderItem:function(){return null},onChange:function(){return null},subItemStyle:{paddingLeft:"25px"},activeStyle:{color:"skyblue"},active:"0",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333"};function m(n){var i=e(e({},u),n),a=i.iconSize,c=i.iconStrokeWidth,o=i.iconColor,l=i.down;return r.createElement("div",{style:{"--size":a,"--strokeWidth":c,"--color":o},className:"".concat(t(d.arrow_right)," ").concat(l?t(d.arrow_down):"")})}var s=n({active:"0",changeActive:function(){return null}}),v=function(n){var h=e(e({},u),n),f=h.renderItem,p=h.item,y=h.subItemStyle,g=h.index,E=h.isMultipleExpand,x=h.icon,A=h.activeIcon,b=i(!1),S=b[0],C=b[1],k=c(s),w=k.active,I=k.changeActive,W=o((function(e){e.stopPropagation(),I(g),h.onChange(p,g),p.children&&Array.isArray(p.children)&&C((function(e){return!e}))}),[I,g,p]);return a((function(){if(void 0!==w){var e=w.split("-"),t=g.split("-");w.startsWith(g)&&e.length>t.length&&g.length<w.length?C(!0):w.startsWith(g)&&g.startsWith(w)||E||C(!1)}}),[w,g]),r.createElement("div",{className:t(d.w_full,d.border_box),onClick:W},r.createElement("div",{className:t(d.item)},f(p)," ",Array.isArray(p.children)&&p.children.length?S?A||r.createElement(m,{down:!0}):x||r.createElement(m,null):null),Array.isArray(p.children)?p.children.map((function(n,i){return r.createElement("div",{key:i,className:t(d.w_full,d.border_box),style:e(e({},u.subItemStyle),y)},r.createElement(l,{expand:S},r.createElement(v,e({},h,{index:g+"-"+i,item:n}))))})):null)},h=function(t){var n=e(e({},u),t),c=i(n.active),o=c[0],l=c[1];return a((function(){if(n.data.length&&void 0!==n.active){var e=n.active.split("-").map((function(e){return Number(e)})),t=n.data,r={};e.forEach((function(e){Array.isArray(t)&&(r=t[e]||{},t=r.children)})),n.onChange(r,n.active)}l(n.active)}),[n.active,n.data]),r.createElement(s.Provider,{value:{active:o,changeActive:l}},n.data.map((function(t,i){return r.createElement(v,e({key:i,index:i.toString()},n,{item:t}))})))};export{h as default};

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

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

package/dist/es/Menu/index.js

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

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

@@ -0,0 +1,8 @@
+declare const styles: {
+    w_full: object;
+    item: object;
+    border_box: object;
+    arrow_right: object;
+    arrow_down: object;
+};
+export default styles;

package/dist/es/Menu/styles.js

@@ -0,0 +1 @@
+import{StyleSheet as r}from"aphrodite/no-important";var o=r.create({w_full:{width:"100%"},item:{display:"flex",width:"100%",paddingRight:"10px",alignItems:"center",justifyContent:"space-between",boxSizing:"border-box"},border_box:{boxSizing:"border-box"},arrow_right:{position:"relative",width:"var(--size)",height:"var(--size)",borderTop:"var(--strokeWidth) solid var(--color)",borderRight:"var(--strokeWidth) solid var(--color)",transform:"rotate(45deg)",transformOrigin:"center",transition:"all 100ms linear"},arrow_down:{transform:"rotate(135deg)"}});export{o as default};

package/dist/es/index.d.ts

@@ -1,4 +1,7 @@
 export * from './types';
+export { default as utils } from './utils';
 export { default as Card } from './Card';
+export { default as Container } from './Container';
+export { default as Loading } from './Loading';
+export { default as Menu } from './Menu';
 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 Swiper}from"./Swiper/Swiper.js";export{default as utils}from"./utils.js";
+export{default as utils}from"./utils.js";export{default as Card}from"./Card/Card.js";export{default as Container}from"./Container/Container.js";export{default as Loading}from"./Loading/Loading.js";export{default as Menu}from"./Menu/Menu.js";export{default as Swiper}from"./Swiper/Swiper.js";

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode, CSSProperties, FC } from 'react';
+import React, { PropsWithChildren, ReactNode, CSSProperties, FC, Component } from 'react';
 
 interface SwiperProps<T> extends PropsWithChildren {
     data: T[];
@@ -20,20 +20,79 @@ interface SwiperExposeMethods {
     pre: () => any;
 }
 
+declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
+declare const _default$1: {
+    sleep: typeof sleep;
+};
+
 interface CardProps extends PropsWithChildren {
     expand?: boolean;
     duration?: number;
 }
 declare const Card: FC<CardProps>;
 
+interface ContainerProps extends PropsWithChildren {
+    ratio?: number;
+}
+declare const Container: FC<ContainerProps>;
+
+interface LoadingProps extends PropsWithChildren {
+    visible?: boolean;
+    bg?: string;
+    customLoading?: ReactNode;
+    loadingStyle?: {
+        width?: string;
+        height?: string;
+        bg?: string;
+        margin?: string;
+    };
+}
+
+interface LoadingState {
+}
+declare class Loading extends Component<LoadingProps, LoadingState> {
+    state: Readonly<LoadingState>;
+    static defaultProps: LoadingProps;
+    private static el;
+    static show(options?: Pick<LoadingProps, 'bg' | 'loadingStyle' | 'customLoading'>): void;
+    static hide(): void;
+    render(): ReactNode;
+    static getDerivedStateFromProps(props: LoadingProps, state: LoadingState): null;
+    getSnapshotBeforeUpdate(prevProps: Readonly<LoadingProps>, prevState: Readonly<LoadingState>): null;
+    componentDidUpdate(prevProps: Readonly<LoadingProps>, prevState: Readonly<LoadingState>, snapshot?: any): void;
+    componentWillUnmount(): void;
+}
+
 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;
+    interface CSSProperties {
+        '--size'?: string;
+        '--strokeWidth'?: string;
+        '--color'?: string;
+    }
+}
+interface IconProps {
+    iconSize?: string;
+    iconStrokeWidth?: string;
+    iconColor?: string;
+}
+interface MenuProps<T> extends IconProps {
+    data: T[];
+    renderItem: (item: T) => ReactNode;
+    onChange?: (item: T, index: string) => void;
+    subItemStyle?: CSSProperties;
+    activeStyle?: CSSProperties;
+    active?: string;
+    isMultipleExpand?: boolean;
+    icon?: ReactNode;
+    activeIcon?: ReactNode;
 }
-declare const _default$1: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
+declare const Menu: <T extends {
+    children?: unknown[] | undefined;
+}>(_props: MenuProps<T>) => React.JSX.Element;
 
-declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
-declare const _default: {
-    sleep: typeof sleep;
-};
+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: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
 
-export { Card, _default$1 as Swiper, type SwiperExposeMethods, type SwiperProps, _default as utils };
+export { Card, Container, Loading, Menu, _default as Swiper, type SwiperExposeMethods, type SwiperProps, _default$1 as utils };

package/dist/lib/Card/Card.js

@@ -1 +1 @@
-"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))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),a=require("react"),n=require("./styles.js"),r={expand:!1,duration:200};exports.default=function(s){var i=e.__assign(e.__assign({},r),s),o=i.duration,c=i.expand,u=i.children,d=a.useMemo((function(){return{transitionDuration:"".concat(o,"ms"),msTransitionDuration:"".concat(o,"ms"),MozTransitionDuration:"".concat(o,"ms"),WebkitTransitionDuration:"".concat(o,"ms")}}),[o]);return a.createElement("div",{style:d,className:"".concat(t.css(n.default.collapse)," ").concat(c?t.css(n.default.expand):"")},a.createElement("div",{className:t.css(n.default.hide0)},u))};

package/dist/lib/Container/Container.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface ContainerProps extends PropsWithChildren {
+    ratio?: number;
+}
+declare const Container: FC<ContainerProps>;
+export default Container;

package/dist/lib/Container/Container.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),l=require("react"),r=require("./styles.js"),a={ratio:1};exports.default=function(u){var s=e.__assign(e.__assign({},a),u),i=s.ratio,d=s.children,o=l.useMemo((function(){return null==i||i<=0?"100%":100/i+"%"}),[i]);return l.createElement("div",{className:t.css(r.default.relative,r.default.w_full,r.default.h_0,r.default.border_box),style:{paddingBottom:o}},l.createElement("div",{className:t.css(r.default.absolute,r.default.top_0,r.default.left_0,r.default.w_full,r.default.h_full)},d))};

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

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

package/dist/lib/Container/index.js

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

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

@@ -0,0 +1,11 @@
+declare const styles: {
+    relative: object;
+    absolute: object;
+    top_0: object;
+    left_0: object;
+    w_full: object;
+    h_full: object;
+    h_0: object;
+    border_box: object;
+};
+export default styles;

package/dist/lib/Container/styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({relative:{position:"relative"},absolute:{position:"absolute"},top_0:{top:"0px"},left_0:{left:"0px"},w_full:{width:"100%"},h_full:{height:"100%"},h_0:{height:"0px"},border_box:{boxSizing:"border-box"}});exports.default=e;

package/dist/lib/Loading/Inner.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { LoadingProps } from './type';
+declare module 'react' {
+    interface CSSProperties {
+        '--delay'?: string;
+        '--width'?: string;
+        '--height'?: string;
+        '--bg'?: string;
+        '--margin'?: string;
+    }
+}
+declare const Inner: FC<{
+    style: LoadingProps['loadingStyle'];
+}>;
+export default Inner;

package/dist/lib/Loading/Inner.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),r=require("react"),s=require("./styles.js"),a=require("./type.js"),i=[{delay:"0s"},{delay:"-1.1s"},{delay:"-1.0s"},{delay:"-0.9s"},{delay:"-0.8s"}];exports.default=function(l){var n=e.__assign(e.__assign({},a.initLoadingStyle),l.style);return r.createElement("div",{className:t.css(s.default.inner_box),style:{"--width":n.width,"--height":n.height,"--bg":n.bg,"--margin":n.margin}},i.map((function(e,a){return r.createElement("div",{key:a,style:{"--delay":e.delay},className:t.css(s.default.inner_box_item)})})))};

package/dist/lib/Loading/Loading.d.ts

@@ -0,0 +1,17 @@
+import { Component, ReactNode } from 'react';
+import { LoadingProps } from './type';
+interface LoadingState {
+}
+declare class Loading extends Component<LoadingProps, LoadingState> {
+    state: Readonly<LoadingState>;
+    static defaultProps: LoadingProps;
+    private static el;
+    static show(options?: Pick<LoadingProps, 'bg' | 'loadingStyle' | 'customLoading'>): void;
+    static hide(): void;
+    render(): ReactNode;
+    static getDerivedStateFromProps(props: LoadingProps, state: LoadingState): null;
+    getSnapshotBeforeUpdate(prevProps: Readonly<LoadingProps>, prevState: Readonly<LoadingState>): null;
+    componentDidUpdate(prevProps: Readonly<LoadingProps>, prevState: Readonly<LoadingState>, snapshot?: any): void;
+    componentWillUnmount(): void;
+}
+export default Loading;

package/dist/lib/Loading/Loading.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),l=require("react"),r=require("react-dom/client"),n=require("./Inner.js"),u=require("./dom.js"),o=require("./styles.js"),a=function(a){function d(){var e=null!==a&&a.apply(this,arguments)||this;return e.state={},e}return e.__extends(d,a),d.show=function(n){d.el||(d.el=document.createElement("div"),u.default.addClass(d.el,t.css(o.default.fixed)),document.body.appendChild(d.el),r.createRoot(d.el).render(l.createElement(d,e.__assign({},n,{children:null,visible:!0}))))},d.hide=function(){try{if(!d.el)return;document.body.removeChild(d.el),d.el=null}catch(e){d.el=null}},d.prototype.render=function(){var e=this.props,r=e.visible,u=e.bg,a=e.customLoading,d=e.loadingStyle,i=e.children;return l.createElement("div",{className:t.css(o.default.relative,o.default.w_full,o.default.h_full,o.default.border_box)},i,r?l.createElement("div",{className:t.css(o.default.absolute,o.default.top_0,o.default.left_0,o.default.w_full,o.default.h_full,o.default.z_99,o.default.center),style:{backgroundColor:u}},a||l.createElement(n.default,{style:d})):null)},d.getDerivedStateFromProps=function(e,t){return null},d.prototype.getSnapshotBeforeUpdate=function(e,t){return null},d.prototype.componentDidUpdate=function(e,t,l){},d.prototype.componentWillUnmount=function(){d.hide()},d.defaultProps={visible:!0,bg:"rgba(0,0,0,.7)",customLoading:null,loadingStyle:{}},d.el=null,d}(l.Component);exports.default=a;

package/dist/lib/Loading/dom.d.ts

@@ -0,0 +1,7 @@
+declare function addClass<T extends HTMLElement>(el: T, cls: string): void;
+declare function removeClass<T extends HTMLElement>(el: T, cls: string): void;
+declare const _default: {
+    addClass: typeof addClass;
+    removeClass: typeof removeClass;
+};
+export default _default;

package/dist/lib/Loading/dom.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s={addClass:function(s,e){s.classList.contains(e)||s.classList.add(e)},removeClass:function(s,e){s.classList.remove(e)}};exports.default=s;

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

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

package/dist/lib/Loading/index.js

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

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

@@ -0,0 +1,15 @@
+declare const styles: {
+    relative: object;
+    center: object;
+    absolute: object;
+    top_0: object;
+    left_0: object;
+    w_full: object;
+    h_full: object;
+    border_box: object;
+    z_99: object;
+    inner_box: object;
+    inner_box_item: object;
+    fixed: object;
+};
+export default styles;

package/dist/lib/Loading/styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({relative:{position:"relative"},center:{display:"flex",alignItems:"center",justifyContent:"center"},absolute:{position:"absolute"},top_0:{top:"0px"},left_0:{left:"0px"},w_full:{width:"100%"},h_full:{height:"100%"},border_box:{boxSizing:"border-box"},z_99:{zIndex:99},inner_box:{display:"flex",width:"100%",height:"100%",textAlign:"center",fontSize:"10px",alignItems:"center",justifyContent:"center"},inner_box_item:{height:"var(--height)",width:"var(--width)",margin:"var(--margin)",backgroundColor:"var(--bg)",animationName:[{"0%, 40%, 100%":{transform:"scaleY(0.4)","-webkit-transform":"scaleY(0.4)"},"20%":{transform:"scaleY(1.0)","-webkit-transform":"scaleY(1.0)"}}],animationDelay:"var(--delay)",animationDuration:"1.2s",animationIterationCount:"infinite"},fixed:{position:"fixed",display:"flex",alignItems:"center",justifyContent:"center",top:"0",left:"0",width:"100%",height:"100%",zIndex:99}});exports.default=e;

package/dist/lib/Loading/type.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export interface LoadingProps extends PropsWithChildren {
+    visible?: boolean;
+    bg?: string;
+    customLoading?: ReactNode;
+    loadingStyle?: {
+        width?: string;
+        height?: string;
+        bg?: string;
+        margin?: string;
+    };
+}
+export declare const initLoadingStyle: LoadingProps['loadingStyle'];

package/dist/lib/Loading/type.js

@@ -0,0 +1 @@
+"use strict";exports.initLoadingStyle={width:"6px",height:"50px",bg:"#fff",margin:"0 3px"};

package/dist/lib/Menu/Menu.d.ts

@@ -0,0 +1,28 @@
+import React, { CSSProperties, ReactNode } from 'react';
+declare module 'react' {
+    interface CSSProperties {
+        '--size'?: string;
+        '--strokeWidth'?: string;
+        '--color'?: string;
+    }
+}
+interface IconProps {
+    iconSize?: string;
+    iconStrokeWidth?: string;
+    iconColor?: string;
+}
+interface MenuProps<T> extends IconProps {
+    data: T[];
+    renderItem: (item: T) => ReactNode;
+    onChange?: (item: T, index: string) => void;
+    subItemStyle?: CSSProperties;
+    activeStyle?: CSSProperties;
+    active?: string;
+    isMultipleExpand?: boolean;
+    icon?: ReactNode;
+    activeIcon?: ReactNode;
+}
+declare const Menu: <T extends {
+    children?: unknown[] | undefined;
+}>(_props: MenuProps<T>) => React.JSX.Element;
+export default Menu;

package/dist/lib/Menu/Menu.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),n=require("react"),r=require("../Card/Card.js"),a=require("./styles.js"),i={data:[],renderItem:function(){return null},onChange:function(){return null},subItemStyle:{paddingLeft:"25px"},activeStyle:{color:"skyblue"},active:"0",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333"};function c(r){var c=e.__assign(e.__assign({},i),r),l=c.iconSize,s=c.iconStrokeWidth,o=c.iconColor,u=c.down;return n.createElement("div",{style:{"--size":l,"--strokeWidth":s,"--color":o},className:"".concat(t.css(a.default.arrow_right)," ").concat(u?t.css(a.default.arrow_down):"")})}var l=n.createContext({active:"0",changeActive:function(){return null}}),s=function(o){var u=e.__assign(e.__assign({},i),o),d=u.renderItem,f=u.item,v=u.subItemStyle,h=u.index,m=u.isMultipleExpand,_=u.icon,g=u.activeIcon,p=n.useState(!1),y=p[0],x=p[1],E=n.useContext(l),b=E.active,A=E.changeActive,C=n.useCallback((function(e){e.stopPropagation(),A(h),u.onChange(f,h),f.children&&Array.isArray(f.children)&&x((function(e){return!e}))}),[A,h,f]);return n.useEffect((function(){if(void 0!==b){var e=b.split("-"),t=h.split("-");b.startsWith(h)&&e.length>t.length&&h.length<b.length?x(!0):b.startsWith(h)&&h.startsWith(b)||m||x(!1)}}),[b,h]),n.createElement("div",{className:t.css(a.default.w_full,a.default.border_box),onClick:C},n.createElement("div",{className:t.css(a.default.item)},d(f)," ",Array.isArray(f.children)&&f.children.length?y?g||n.createElement(c,{down:!0}):_||n.createElement(c,null):null),Array.isArray(f.children)?f.children.map((function(c,l){return n.createElement("div",{key:l,className:t.css(a.default.w_full,a.default.border_box),style:e.__assign(e.__assign({},i.subItemStyle),v)},n.createElement(r.default,{expand:y},n.createElement(s,e.__assign({},u,{index:h+"-"+l,item:c}))))})):null)};exports.default=function(t){var r=e.__assign(e.__assign({},i),t),a=n.useState(r.active),c=a[0],o=a[1];return n.useEffect((function(){if(r.data.length&&void 0!==r.active){var e=r.active.split("-").map((function(e){return Number(e)})),t=r.data,n={};e.forEach((function(e){Array.isArray(t)&&(n=t[e]||{},t=n.children)})),r.onChange(n,r.active)}o(r.active)}),[r.active,r.data]),n.createElement(l.Provider,{value:{active:c,changeActive:o}},r.data.map((function(t,a){return n.createElement(s,e.__assign({key:a,index:a.toString()},r,{item:t}))})))};

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

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

package/dist/lib/Menu/index.js

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

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

@@ -0,0 +1,8 @@
+declare const styles: {
+    w_full: object;
+    item: object;
+    border_box: object;
+    arrow_right: object;
+    arrow_down: object;
+};
+export default styles;

package/dist/lib/Menu/styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("aphrodite/no-important").StyleSheet.create({w_full:{width:"100%"},item:{display:"flex",width:"100%",paddingRight:"10px",alignItems:"center",justifyContent:"space-between",boxSizing:"border-box"},border_box:{boxSizing:"border-box"},arrow_right:{position:"relative",width:"var(--size)",height:"var(--size)",borderTop:"var(--strokeWidth) solid var(--color)",borderRight:"var(--strokeWidth) solid var(--color)",transform:"rotate(45deg)",transformOrigin:"center",transition:"all 100ms linear"},arrow_down:{transform:"rotate(135deg)"}});exports.default=r;

package/dist/lib/index.d.ts

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

package/dist/lib/index.js

@@ -1 +1 @@
-"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;
+"use strict";var e=require("./utils.js"),r=require("./Card/Card.js"),t=require("./Container/Container.js"),i=require("./Loading/Loading.js"),u=require("./Menu/Menu.js"),a=require("./Swiper/Swiper.js");exports.utils=e.default,exports.Card=r.default,exports.Container=t.default,exports.Loading=i.default,exports.Menu=u.default,exports.Swiper=a.default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rox-react-components",
-	"version": "0.0.8",
+	"version": "0.0.10",
 	"main": "dist/lib/index.js",
 	"module": "dist/es/index.js",
 	"types": "dist/index.d.ts",
@@ -15,6 +15,9 @@
 		"carousel",
 		"mobile carousel",
 		"ps carousel",
+		"menu",
+		"loading",
+		"container with ratio",
 		"react swiper carousel pc mobile touch mouse"
 	],
 	"files": [