@purr-react-styled-components/components.loading-ripple 0.0.7 → 0.0.8
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.
- package/package.json +4 -2
- package/dist/_components.d.ts +0 -4
- package/dist/_style.d.ts +0 -9
- package/dist/_types.d.ts +0 -10
- package/dist/index.cjs +0 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -37
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purr-react-styled-components/components.loading-ripple",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
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.
|
|
28
|
+
"@purr-core/utils.definitions": "0.0.11"
|
|
29
29
|
},
|
|
30
30
|
"author": "@DinhThienPhuc",
|
|
31
31
|
"license": "ISC",
|
|
@@ -34,6 +34,8 @@
|
|
|
34
34
|
"scripts": {
|
|
35
35
|
"dev": "vite build --watch",
|
|
36
36
|
"build": "tsc && vite build",
|
|
37
|
+
"build:vite": "tsc && vite build",
|
|
38
|
+
"build:tsup": "tsup",
|
|
37
39
|
"lint": "eslint . --ext ts,tsx --max-warnings 0"
|
|
38
40
|
}
|
|
39
41
|
}
|
package/dist/_components.d.ts
DELETED
package/dist/_style.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export declare const Styled: {
|
|
2
|
-
Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
3
|
-
$fullScreen: boolean;
|
|
4
|
-
}>> & string;
|
|
5
|
-
Ripple: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
6
|
-
$size: number;
|
|
7
|
-
$color: string;
|
|
8
|
-
}>> & string;
|
|
9
|
-
};
|
package/dist/_types.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes } from 'react';
|
|
2
|
-
import { IExtendable } from '@purr-core/utils.definitions';
|
|
3
|
-
|
|
4
|
-
export interface ILoadingRippleProps {
|
|
5
|
-
size?: number;
|
|
6
|
-
color?: string;
|
|
7
|
-
className?: string;
|
|
8
|
-
fullScreen?: boolean;
|
|
9
|
-
htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
|
|
10
|
-
}
|
package/dist/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("clsx"),t=require("styled-components"),r=i=>t.keyframes(["0%{top:","px;left:","px;width:0;height:0;opacity:0;}4.9%{top:","px;left:","px;width:0;height:0;opacity:0;}5%{top:","px;left:","px;width:0;height:0;opacity:1;}100%{top:0px;left:0px;width:","px;height:","px;opacity:0;}"],i*.5,i*.5,i*.5,i*.5,i*.5,i*.5,i,i),l={Container:t.span.withConfig({displayName:"_style__Container",componentId:"sc-1wjgbyx-0"})(["display:flex;align-items:center;justify-content:center;width:",";height:",";"],({$fullScreen:i})=>i?"100vw":"100%",({$fullScreen:i})=>i?"100vh":"100%"),Ripple:t.span.withConfig({displayName:"_style__Ripple",componentId:"sc-1wjgbyx-1"})(["display:inline-block;position:relative;width:",";height:",";span{position:absolute;border:4px solid ",";opacity:1;border-radius:50%;animation:"," 1s cubic-bezier(0,0.2,0.8,1) infinite;}span:nth-child(2){animation-delay:-0.5s;}"],({$size:i})=>`${i+8}px`,({$size:i})=>`${i+8}px`,({$color:i})=>i,({$size:i})=>r(i))},c=({size:i=80,color:p="#000000",fullScreen:n=!1,className:o,htmlAttributes:a})=>e.jsx(l.Container,{...a,$fullScreen:n,className:s("loading-ripple",`loading-ripple--size-${i}`,`loading-ripple--color-${p}`,n&&"loading-ripple--fullScreen",o),children:e.jsxs(l.Ripple,{$size:i,$color:p,className:"loading-ripple-inner",children:[e.jsx("span",{}),e.jsx("span",{})]})});exports.LoadingRipple=c;
|
package/dist/index.d.ts
DELETED
package/dist/index.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { jsx as p, jsxs as r } from "react/jsx-runtime";
|
|
2
|
-
import s from "clsx";
|
|
3
|
-
import n, { keyframes as d } from "styled-components";
|
|
4
|
-
const c = (i) => d(["0%{top:", "px;left:", "px;width:0;height:0;opacity:0;}4.9%{top:", "px;left:", "px;width:0;height:0;opacity:0;}5%{top:", "px;left:", "px;width:0;height:0;opacity:1;}100%{top:0px;left:0px;width:", "px;height:", "px;opacity:0;}"], i * 0.5, i * 0.5, i * 0.5, i * 0.5, i * 0.5, i * 0.5, i, i), o = {
|
|
5
|
-
Container: n.span.withConfig({
|
|
6
|
-
displayName: "_style__Container",
|
|
7
|
-
componentId: "sc-1wjgbyx-0"
|
|
8
|
-
})(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";"], ({
|
|
9
|
-
$fullScreen: i
|
|
10
|
-
}) => i ? "100vw" : "100%", ({
|
|
11
|
-
$fullScreen: i
|
|
12
|
-
}) => i ? "100vh" : "100%"),
|
|
13
|
-
Ripple: n.span.withConfig({
|
|
14
|
-
displayName: "_style__Ripple",
|
|
15
|
-
componentId: "sc-1wjgbyx-1"
|
|
16
|
-
})(["display:inline-block;position:relative;width:", ";height:", ";span{position:absolute;border:4px solid ", ";opacity:1;border-radius:50%;animation:", " 1s cubic-bezier(0,0.2,0.8,1) infinite;}span:nth-child(2){animation-delay:-0.5s;}"], ({
|
|
17
|
-
$size: i
|
|
18
|
-
}) => `${i + 8}px`, ({
|
|
19
|
-
$size: i
|
|
20
|
-
}) => `${i + 8}px`, ({
|
|
21
|
-
$color: i
|
|
22
|
-
}) => i, ({
|
|
23
|
-
$size: i
|
|
24
|
-
}) => c(i))
|
|
25
|
-
}, g = ({
|
|
26
|
-
size: i = 80,
|
|
27
|
-
color: t = "#000000",
|
|
28
|
-
fullScreen: e = !1,
|
|
29
|
-
className: l,
|
|
30
|
-
htmlAttributes: a
|
|
31
|
-
}) => /* @__PURE__ */ p(o.Container, { ...a, $fullScreen: e, className: s("loading-ripple", `loading-ripple--size-${i}`, `loading-ripple--color-${t}`, e && "loading-ripple--fullScreen", l), children: /* @__PURE__ */ r(o.Ripple, { $size: i, $color: t, className: "loading-ripple-inner", children: [
|
|
32
|
-
/* @__PURE__ */ p("span", {}),
|
|
33
|
-
/* @__PURE__ */ p("span", {})
|
|
34
|
-
] }) });
|
|
35
|
-
export {
|
|
36
|
-
g as LoadingRipple
|
|
37
|
-
};
|