react-restyle-components 0.2.66 → 0.2.68

package/lib/index.d.ts

@@ -1,2 +1,3 @@
+import './global.css';
 export * from './src/core-components';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AACtB,cAAc,uBAAuB,CAAC"}

package/lib/index.js

@@ -1,2 +1,3 @@
 // import './tc.css';
+import './global.css';
 export * from './src/core-components';

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.65",
+  "version": "0.2.68",
   "private": false,
   "description": "Easy use restyle components",
   "author": {

package/lib/src/core-components/atoms/loader/loader.component.d.ts

@@ -1,3 +1,6 @@
-export declare const Loader: () => import("react/jsx-runtime").JSX.Element;
-export declare const ModalLoader: () => import("react/jsx-runtime").JSX.Element;
+export interface LoadingAnimateSpinProps {
+    classWarper?: string;
+    className?: string;
+}
+export declare const LoadingAnimateSpin: ({ classWarper, className, }: LoadingAnimateSpinProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=loader.component.d.ts.map

package/lib/src/core-components/atoms/loader/loader.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/loader/loader.component.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM,+CAalB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAiHvB,CAAC"}
+{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/loader/loader.component.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gCAG5B,uBAAuB,4CAwBzB,CAAC"}

package/lib/src/core-components/atoms/loader/loader.component.js

@@ -1,40 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Container, Row, Spinner } from 'reactstrap';
+import { jsx as _jsx } from "react/jsx-runtime";
 import s from '../../../tc.module.css';
 import { cn } from '../../../core-utils';
-export const Loader = () => (_jsx(Container, { fluid: true, className: cn(s['vh-50'], s['d-flex']), children: _jsx(Row, { className: cn(s['justify-content-center'], s['align-self-center'], s['w-100'], s['text-center']), children: _jsx(Spinner, { color: "primary" }) }) }));
-export const ModalLoader = () => {
-    return (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['justify-center'], s['items-center'], s['flex'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none']), children: _jsx("div", { className: cn(s['relative'], s['mx-auto']), children: _jsx("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-full'], s['bg-white'], s['outline-none'], s['focus:outline-none']), children: _jsxs("div", { className: cn(s['relative'], s['p-2'], s['flex-auto'], s['flex'], s['flex-col'], s['items-center']), children: [_jsx("style", { children: `
-    .spinner .background {
-      fill: #555;
-    }
-    .spinner .line {
-      animation: PacMan 5s infinite;
-      fill: none;
-      stroke: #d26188;
-      stroke-width: 25;
-    }
-    .spinner .spinner {
-      animation: Spin 2s infinite linear;
-    }
-    @keyframes PacMan {
-      0% {
-        stroke-dasharray: 79px 79;
-      }
-      50% {
-        stroke-dasharray: 1px 79;
-      }
-      100% {
-        stroke-dasharray: 79px 79;
-      }
-    }
-    @keyframes Spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-    ` }), _jsxs("svg", { className: cn(s['spinner']), width: "100", height: "100", viewBox: "0 0 100 100", children: [_jsx("circle", { className: cn(s['background']), cx: "0", cy: "0" }), _jsx("path", { className: cn(s['line']), d: "M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50" })] }), ' ', _jsx("span", { style: { marginTop: -15 }, children: "loading ..." })] }) }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black']) })] }) }));
+export const LoadingAnimateSpin = ({ classWarper = '', className = '', }) => {
+    return (_jsx("div", { className: cn(s.absolute, s['justify-center'], s['items-center'], classWarper), children: _jsx("div", { className: cn(s['w-10'], s['h-10'], s['border-t-2'], s['border-b-2'], s['border-blue-500'], s['rounded-full'], s['animate-spin'], className) }) }));
 };

package/lib/src/core-components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,6BAA6B,CAAC;AAEpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kDAAkD,CAAC;AAEjE,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iDAAiD,CAAC;AAChE,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAE9C,cAAc,mCAAmC,CAAC;AAElD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AAExD,cAAc,+DAA+D,CAAC;AAC9E,cAAc,iJAAiJ,CAAC;AAChK,cAAc,6IAA6I,CAAC;AAC5J,cAAc,iDAAiD,CAAC;AAChE,cAAc,uEAAuE,CAAC;AACtF,cAAc,mDAAmD,CAAC;AAClE,cAAc,uCAAuC,CAAC;AACtD,cAAc,qEAAqE,CAAC;AACpF,cAAc,iDAAiD,CAAC;AAChE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,6FAA6F,CAAC;AAE5G,OAAO,EAAC,IAAI,EAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,6BAA6B,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kDAAkD,CAAC;AACjE,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iDAAiD,CAAC;AAChE,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AAExD,cAAc,+DAA+D,CAAC;AAC9E,cAAc,iJAAiJ,CAAC;AAChK,cAAc,6IAA6I,CAAC;AAC5J,cAAc,iDAAiD,CAAC;AAChE,cAAc,uEAAuE,CAAC;AACtF,cAAc,mDAAmD,CAAC;AAClE,cAAc,uCAAuC,CAAC;AACtD,cAAc,qEAAqE,CAAC;AACpF,cAAc,iDAAiD,CAAC;AAChE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,6FAA6F,CAAC;AAE5G,OAAO,EAAC,IAAI,EAAC,CAAC"}

package/lib/src/core-components/molecules/modal-confirm/modal-confirm.component.d.ts

@@ -1,12 +1,14 @@
-interface ModalConfirmProps {
+import React from 'react';
+export interface ModalConfirmProps {
     visible: boolean;
     title?: string;
-    message: string;
+    message: React.ReactNode | string;
     submitTitle?: string;
     closeTitle?: string;
+    isClick?: boolean;
+    isClose?: boolean;
     onClick: () => void;
     onClose: () => void;
 }
-export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, onClick, onClose, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, isClick, isClose, onClick, onClose, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=modal-confirm.component.d.ts.map

package/lib/src/core-components/molecules/modal-confirm/modal-confirm.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,4EAQtB,iBAAiB,4CAkLnB,CAAC"}
+{"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,8FAUtB,iBAAiB,4CA0LnB,CAAC"}

package/lib/src/core-components/molecules/modal-confirm/modal-confirm.component.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Container } from 'reactstrap';
 import s from '../../../tc.module.css';
 import { cn } from '../../../core-utils';
-export const ModalConfirm = ({ visible = false, title = 'Confirm', message = '', submitTitle = 'Send', closeTitle = 'Close', onClick, onClose, }) => {
+export const ModalConfirm = ({ visible = false, title = 'Confirm', message, submitTitle = 'Send', closeTitle = 'Close', isClick = true, isClose = true, onClick, onClose, }) => {
     const [showModal, setShowModal] = useState(visible);
     useEffect(() => {
         setShowModal(visible);
@@ -12,10 +12,10 @@ export const ModalConfirm = ({ visible = false, title = 'Confirm', message = '',
     return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none']), children: _jsx("div", { className: cn(s['relative'], s['my-6'], s['mx-auto']), children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-fit'], s['min-w-80'], s['bg-white'], s['outline-none'], s['focus:outline-none']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-2'], s['border-b'], s['border-solid'], s['border-gray-300'], s['rounded-t']), children: [_jsx("h3", { className: cn(s['text-2xl'], s['font-semibold']), children: title }), _jsx("button", { className: cn(s['p-1'], s['border-0'], s['text-black'], s['opacity-1'], s['ml-6'], s['float-right'], s['text-3xl'], s['leading-none'], s['font-semibold'], s['outline-none'], s['focus:outline-none']), onClick: () => {
                                                     setShowModal(false);
                                                     onClose && onClose();
-                                                }, children: _jsx("span", { className: cn(s['text-black'], s['h-6'], s['w-6'], s['text-2xl'], s['block'], s['outline-none'], s['focus:outline-none']), children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-2']), children: _jsx("div", { className: cn(s['flex']), children: _jsx("span", { className: cn(s['text-md']), children: message }) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-2'], s['border-t'], s['border-solid'], s['border-gray-300'], s['rounded-b']), children: [_jsx("button", { className: cn(s['text-red-500'], s['background-transparent'], s['font-bold'], s['uppercase'], s['p-2'], s['text-sm'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                                }, children: _jsx("span", { className: cn(s['text-black'], s['h-6'], s['w-6'], s['text-2xl'], s['block'], s['outline-none'], s['focus:outline-none']), children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-2']), children: _jsx("div", { className: cn(s['flex']), children: typeof message === 'string' ? (_jsx("span", { className: cn(s['text-md']), children: message })) : (message) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-2'], s['border-t'], s['border-solid'], s['border-gray-300'], s['rounded-b']), children: [isClose && (_jsx("button", { className: cn(s['text-red-500'], s['background-transparent'], s['font-bold'], s['uppercase'], s['p-2'], s['text-sm'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
                                                     setShowModal(false);
                                                     onClose && onClose();
-                                                }, children: closeTitle }), _jsx("button", { className: cn(s['bg-green-500'], s['text-white'], s['active:bg-green-600'], s['font-bold'], s['uppercase'], s['text-sm'], s['p-2'], s['rounded'], s['shadow'], s['hover:shadow-lg'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                                }, children: closeTitle })), isClick && (_jsx("button", { className: cn(s['bg-green-500'], s['text-white'], s['active:bg-green-600'], s['font-bold'], s['uppercase'], s['text-sm'], s['p-2'], s['rounded'], s['shadow'], s['hover:shadow-lg'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
                                                     onClick();
-                                                }, children: submitTitle })] })] }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black']) })] })) }) }));
+                                                }, children: submitTitle }))] })] }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black']) })] })) }) }));
 };

package/lib/src/index.css

@@ -108,3 +108,11 @@ body {
 .menu li:last-child {
   border-bottom: none;
 }
+
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}

package/lib/src/tc.module.css

@@ -6,9 +6,11 @@
 } .inset-0 { inset: 0px;
 } .left-0 { left: 0px;
 } .right-0 { right: 0px;
+} .right-10 { right: 2.5rem;
 } .right-3 { right: 0.75rem;
 } .top-0 { top: 0px;
 } .top-1\/2 { top: 50%;
+} .top-10 { top: 2.5rem;
 } .top-3 { top: 0.75rem;
 } .-z-1 { z-index: -1;
 } .z-0 { z-index: 0;
@@ -45,6 +47,8 @@
 } .grid { display: grid;
 } .hidden { display: none;
 } .h-0\.5 { height: 0.125rem;
+} .h-10 { height: 2.5rem;
+} .h-16 { height: 4rem;
 } .h-3 { height: 0.75rem;
 } .h-4 { height: 1rem;
 } .h-6 { height: 1.5rem;
@@ -53,6 +57,7 @@
 } .max-h-40 { max-height: 10rem;
 } .max-h-60 { max-height: 15rem;
 } .w-10 { width: 2.5rem;
+} .w-16 { width: 4rem;
 } .w-3 { width: 0.75rem;
 } .w-4 { width: 1rem;
 } .w-6 { width: 1.5rem;
@@ -63,11 +68,13 @@
 } .min-w-80 { min-width: 20rem;
 } .max-w-full { max-width: 100%;
 } .flex-1 { flex: 1 1 0%;
-} .flex-auto { flex: 1 1 auto;
 } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 } .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 } .translate-x-1\/2 { --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+} @keyframes spin { to { transform: rotate(360deg);
+  }
+} .animate-spin { animation: spin 1s linear infinite;
 } .cursor-pointer { cursor: pointer;
 } .list-none { list-style-type: none;
 } .appearance-none { appearance: none;
@@ -108,6 +115,7 @@
 } .border-t { border-top-width: 1px;
 } .border-solid { border-style: solid;
 } .border-none { border-style: none;
+} .border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity));
 } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity));
 } .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity));
 } .border-orange { --tw-border-opacity: 1; border-color: rgb(255 174 26 / var(--tw-border-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.66",
+  "version": "0.2.68",
   "private": false,
   "description": "Easy use restyle components",
   "author": {