@purr-react-styled-components/components.loading-ellipsis 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +61 -0
  2. package/dist/index.d.cts +14 -0
  3. package/dist/index.d.ts +14 -0
  4. package/dist/index.js +61 -0
  5. package/package.json +2 -2
package/dist/index.cjs ADDED
@@ -0,0 +1,61 @@
1
+ 'use strict';var f=require('clsx'),n=require('react'),l=require('styled-components');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var f__default=/*#__PURE__*/_interopDefault(f);var n__default=/*#__PURE__*/_interopDefault(n);var l__default=/*#__PURE__*/_interopDefault(l);var $=l.keyframes`
2
+ 0% {
3
+ transform: scale(0);
4
+ }
5
+ 100% {
6
+ transform: scale(1);
7
+ }
8
+ `,r=i=>l.keyframes`
9
+ 0% {
10
+ transform: translate(0, 0);
11
+ }
12
+ 100% {
13
+ transform: ${`translate(${5*i/3}px, 0)`};
14
+ }
15
+ `,m=l.keyframes`
16
+ 0% {
17
+ transform: scale(1);
18
+ }
19
+ 100% {
20
+ transform: scale(0);
21
+ }
22
+ `,o={Container:l__default.default.span`
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ width: ${({$fullScreen:i})=>i?"100vw":"100%"};
27
+ height: ${({$fullScreen:i})=>i?"100vh":"100%"};
28
+ `,Spinner:l__default.default.span`
29
+ display: flex;
30
+ position: relative;
31
+ width: ${({$size:i})=>`${17*i/3}px`};
32
+ height: ${({$size:i})=>`${i}px`};
33
+
34
+ span {
35
+ position: absolute;
36
+ width: ${({$size:i})=>`${i}px`};
37
+ height: ${({$size:i})=>`${i}px`};
38
+ border-radius: 50%;
39
+ background: ${({$color:i})=>i};
40
+ }
41
+
42
+ span:nth-child(1) {
43
+ left: ${({$size:i})=>`${2*i/3}px`};
44
+ animation: ${$} 0.6s infinite;
45
+ }
46
+
47
+ span:nth-child(2) {
48
+ left: ${({$size:i})=>`${2*i/3}px`};
49
+ animation: ${({$size:i})=>r(i)} 0.6s infinite;
50
+ }
51
+
52
+ span:nth-child(3) {
53
+ left: ${({$size:i})=>`${7*i/3}px`};
54
+ animation: ${({$size:i})=>r(i)} 0.6s infinite;
55
+ }
56
+
57
+ span:nth-child(4) {
58
+ left: ${({$size:i})=>`${4*i}px`};
59
+ animation: ${m} 0.6s infinite;
60
+ }
61
+ `};var y=({size:i=12,color:t="#000000",fullScreen:e=false,className:a,htmlAttributes:p})=>n__default.default.createElement(o.Container,{...p,$fullScreen:e,className:f__default.default("loading-ellipsis",`loading-ellipsis--size-${i}`,`loading-ellipsis--color-${t}`,e&&"loading-ellipsis--fullScreen",a)},n__default.default.createElement(o.Spinner,{$size:i,$color:t,className:"loading-ellipsis-inner"},n__default.default.createElement("span",null),n__default.default.createElement("span",null),n__default.default.createElement("span",null),n__default.default.createElement("span",null)));exports.LoadingEllipsis=y;
package/dist/index.d.cts ADDED
@@ -0,0 +1,14 @@
1
+ import React, { HTMLAttributes } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ interface ILoadingEllipsisProps {
5
+ size?: number;
6
+ color?: string;
7
+ className?: string;
8
+ fullScreen?: boolean;
9
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
10
+ }
11
+
12
+ declare const LoadingEllipsis: ({ size, color, fullScreen, className, htmlAttributes, }: ILoadingEllipsisProps) => React.JSX.Element;
13
+
14
+ export { type ILoadingEllipsisProps, LoadingEllipsis };
package/dist/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React, { HTMLAttributes } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ interface ILoadingEllipsisProps {
5
+ size?: number;
6
+ color?: string;
7
+ className?: string;
8
+ fullScreen?: boolean;
9
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
10
+ }
11
+
12
+ declare const LoadingEllipsis: ({ size, color, fullScreen, className, htmlAttributes, }: ILoadingEllipsisProps) => React.JSX.Element;
13
+
14
+ export { type ILoadingEllipsisProps, LoadingEllipsis };
package/dist/index.js ADDED
@@ -0,0 +1,61 @@
1
+ import f from'clsx';import n from'react';import l,{keyframes}from'styled-components';var $=keyframes`
2
+ 0% {
3
+ transform: scale(0);
4
+ }
5
+ 100% {
6
+ transform: scale(1);
7
+ }
8
+ `,r=i=>keyframes`
9
+ 0% {
10
+ transform: translate(0, 0);
11
+ }
12
+ 100% {
13
+ transform: ${`translate(${5*i/3}px, 0)`};
14
+ }
15
+ `,m=keyframes`
16
+ 0% {
17
+ transform: scale(1);
18
+ }
19
+ 100% {
20
+ transform: scale(0);
21
+ }
22
+ `,o={Container:l.span`
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ width: ${({$fullScreen:i})=>i?"100vw":"100%"};
27
+ height: ${({$fullScreen:i})=>i?"100vh":"100%"};
28
+ `,Spinner:l.span`
29
+ display: flex;
30
+ position: relative;
31
+ width: ${({$size:i})=>`${17*i/3}px`};
32
+ height: ${({$size:i})=>`${i}px`};
33
+
34
+ span {
35
+ position: absolute;
36
+ width: ${({$size:i})=>`${i}px`};
37
+ height: ${({$size:i})=>`${i}px`};
38
+ border-radius: 50%;
39
+ background: ${({$color:i})=>i};
40
+ }
41
+
42
+ span:nth-child(1) {
43
+ left: ${({$size:i})=>`${2*i/3}px`};
44
+ animation: ${$} 0.6s infinite;
45
+ }
46
+
47
+ span:nth-child(2) {
48
+ left: ${({$size:i})=>`${2*i/3}px`};
49
+ animation: ${({$size:i})=>r(i)} 0.6s infinite;
50
+ }
51
+
52
+ span:nth-child(3) {
53
+ left: ${({$size:i})=>`${7*i/3}px`};
54
+ animation: ${({$size:i})=>r(i)} 0.6s infinite;
55
+ }
56
+
57
+ span:nth-child(4) {
58
+ left: ${({$size:i})=>`${4*i}px`};
59
+ animation: ${m} 0.6s infinite;
60
+ }
61
+ `};var y=({size:i=12,color:t="#000000",fullScreen:e=false,className:a,htmlAttributes:p})=>n.createElement(o.Container,{...p,$fullScreen:e,className:f("loading-ellipsis",`loading-ellipsis--size-${i}`,`loading-ellipsis--color-${t}`,e&&"loading-ellipsis--fullScreen",a)},n.createElement(o.Spinner,{$size:i,$color:t,className:"loading-ellipsis-inner"},n.createElement("span",null),n.createElement("span",null),n.createElement("span",null),n.createElement("span",null)));export{y as LoadingEllipsis};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purr-react-styled-components/components.loading-ellipsis",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -25,7 +25,7 @@
25
25
  "react": "*",
26
26
  "styled-components": "*",
27
27
  "clsx": "*",
28
- "@purr-core/utils.definitions": "0.0.11"
28
+ "@purr-core/utils.definitions": "0.0.12"
29
29
  },
30
30
  "author": "@DinhThienPhuc",
31
31
  "license": "ISC",