@purr-react-styled-components/components.loading-ripple 0.0.7 → 0.0.9

package/dist/index.cjs

@@ -1 +1,54 @@
-"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;
+'use strict';var s=require('clsx'),i=require('react'),l=require('styled-components');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);var i__default=/*#__PURE__*/_interopDefault(i);var l__default=/*#__PURE__*/_interopDefault(l);var d=p=>l.keyframes`
+  0% {
+    top: ${p*.5}px;
+    left: ${p*.5}px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  4.9% {
+    top: ${p*.5}px;
+    left: ${p*.5}px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  5% {
+    top: ${p*.5}px;
+    left: ${p*.5}px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: ${p}px;
+    height: ${p}px;
+    opacity: 0;
+  }
+`,o={Container:l__default.default.span`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${({$fullScreen:p})=>p?"100vw":"100%"};
+    height: ${({$fullScreen:p})=>p?"100vh":"100%"};
+  `,Ripple:l__default.default.span`
+    display: inline-block;
+    position: relative;
+    width: ${({$size:p})=>`${p+8}px`};
+    height: ${({$size:p})=>`${p+8}px`};
+
+    span {
+      position: absolute;
+      border: 4px solid ${({$color:p})=>p};
+      opacity: 1;
+      border-radius: 50%;
+      animation: ${({$size:p})=>d(p)} 1s cubic-bezier(0, 0.2, 0.8, 1)
+        infinite;
+    }
+
+    span:nth-child(2) {
+      animation-delay: -0.5s;
+    }
+  `};var f=({size:p=80,color:t="#000000",fullScreen:e=false,className:n,htmlAttributes:r})=>i__default.default.createElement(o.Container,{...r,$fullScreen:e,className:s__default.default("loading-ripple",`loading-ripple--size-${p}`,`loading-ripple--color-${t}`,e&&"loading-ripple--fullScreen",n)},i__default.default.createElement(o.Ripple,{$size:p,$color:t,className:"loading-ripple-inner"},i__default.default.createElement("span",null),i__default.default.createElement("span",null)));exports.LoadingRipple=f;

package/dist/index.d.cts

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+interface ILoadingRippleProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    fullScreen?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+
+declare const LoadingRipple: ({ size, color, fullScreen, className, htmlAttributes, }: ILoadingRippleProps) => React.JSX.Element;
+
+export { type ILoadingRippleProps, LoadingRipple };

package/dist/index.d.ts

@@ -1,2 +1,14 @@
-export * from './_components';
-export * from './_types';
+import React, { HTMLAttributes } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+interface ILoadingRippleProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    fullScreen?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+
+declare const LoadingRipple: ({ size, color, fullScreen, className, htmlAttributes, }: ILoadingRippleProps) => React.JSX.Element;
+
+export { type ILoadingRippleProps, LoadingRipple };

package/dist/index.js

@@ -1,37 +1,54 @@
-import { jsx as p, jsxs as r } from "react/jsx-runtime";
-import s from "clsx";
-import n, { keyframes as d } from "styled-components";
-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 = {
-  Container: n.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: n.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
-  }) => c(i))
-}, g = ({
-  size: i = 80,
-  color: t = "#000000",
-  fullScreen: e = !1,
-  className: l,
-  htmlAttributes: a
-}) => /* @__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: [
-  /* @__PURE__ */ p("span", {}),
-  /* @__PURE__ */ p("span", {})
-] }) });
-export {
-  g as LoadingRipple
-};
+import s from'clsx';import i from'react';import l,{keyframes}from'styled-components';var d=p=>keyframes`
+  0% {
+    top: ${p*.5}px;
+    left: ${p*.5}px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  4.9% {
+    top: ${p*.5}px;
+    left: ${p*.5}px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  5% {
+    top: ${p*.5}px;
+    left: ${p*.5}px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: ${p}px;
+    height: ${p}px;
+    opacity: 0;
+  }
+`,o={Container:l.span`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${({$fullScreen:p})=>p?"100vw":"100%"};
+    height: ${({$fullScreen:p})=>p?"100vh":"100%"};
+  `,Ripple:l.span`
+    display: inline-block;
+    position: relative;
+    width: ${({$size:p})=>`${p+8}px`};
+    height: ${({$size:p})=>`${p+8}px`};
+
+    span {
+      position: absolute;
+      border: 4px solid ${({$color:p})=>p};
+      opacity: 1;
+      border-radius: 50%;
+      animation: ${({$size:p})=>d(p)} 1s cubic-bezier(0, 0.2, 0.8, 1)
+        infinite;
+    }
+
+    span:nth-child(2) {
+      animation-delay: -0.5s;
+    }
+  `};var f=({size:p=80,color:t="#000000",fullScreen:e=false,className:n,htmlAttributes:r})=>i.createElement(o.Container,{...r,$fullScreen:e,className:s("loading-ripple",`loading-ripple--size-${p}`,`loading-ripple--color-${t}`,e&&"loading-ripple--fullScreen",n)},i.createElement(o.Ripple,{$size:p,$color:t,className:"loading-ripple-inner"},i.createElement("span",null),i.createElement("span",null)));export{f as LoadingRipple};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.loading-ripple",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.10"
+    "@purr-core/utils.definitions": "0.0.12"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -34,6 +34,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ILoadingRippleProps } from './_types';
-
-export declare const LoadingRipple: ({ size, color, fullScreen, className, htmlAttributes, }: ILoadingRippleProps) => React.JSX.Element;

package/dist/_style.d.ts

@@ -1,9 +0,0 @@
-export declare const Styled: {
-    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $fullScreen: boolean;
-    }>> & string;
-    Ripple: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $size: number;
-        $color: string;
-    }>> & string;
-};

package/dist/_types.d.ts

@@ -1,10 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { IExtendable } from '@purr-core/utils.definitions';
-
-export interface ILoadingRippleProps {
-    size?: number;
-    color?: string;
-    className?: string;
-    fullScreen?: boolean;
-    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-}