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

package/dist/index.cjs

@@ -1 +1,61 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("clsx"),s=require("styled-components"),c=s.keyframes(["0%{transform:scale(0);}100%{transform:scale(1);}"]),a=n=>s.keyframes(["0%{transform:translate(0,0);}100%{transform:",";}"],`translate(${5*n/3}px, 0)`),d=s.keyframes(["0%{transform:scale(1);}100%{transform:scale(0);}"]),l={Container:s.span.withConfig({displayName:"_style__Container",componentId:"sc-1ktgpxe-0"})(["display:flex;align-items:center;justify-content:center;width:",";height:",";"],({$fullScreen:n})=>n?"100vw":"100%",({$fullScreen:n})=>n?"100vh":"100%"),Spinner:s.span.withConfig({displayName:"_style__Spinner",componentId:"sc-1ktgpxe-1"})(["display:flex;position:relative;width:",";height:",";span{position:absolute;width:",";height:",";border-radius:50%;background:",";}span:nth-child(1){left:",";animation:"," 0.6s infinite;}span:nth-child(2){left:",";animation:"," 0.6s infinite;}span:nth-child(3){left:",";animation:"," 0.6s infinite;}span:nth-child(4){left:",";animation:"," 0.6s infinite;}"],({$size:n})=>`${17*n/3}px`,({$size:n})=>`${n}px`,({$size:n})=>`${n}px`,({$size:n})=>`${n}px`,({$color:n})=>n,({$size:n})=>`${2*n/3}px`,c,({$size:n})=>`${2*n/3}px`,({$size:n})=>a(n),({$size:n})=>`${7*n/3}px`,({$size:n})=>a(n),({$size:n})=>`${4*n}px`,d)},f=({size:n=12,color:e="#000000",fullScreen:t=!1,className:o,htmlAttributes:r})=>i.jsx(l.Container,{...r,$fullScreen:t,className:p("loading-ellipsis",`loading-ellipsis--size-${n}`,`loading-ellipsis--color-${e}`,t&&"loading-ellipsis--fullScreen",o),children:i.jsxs(l.Spinner,{$size:n,$color:e,className:"loading-ellipsis-inner",children:[i.jsx("span",{}),i.jsx("span",{}),i.jsx("span",{}),i.jsx("span",{})]})});exports.LoadingEllipsis=f;
+'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`
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+`,r=i=>l.keyframes`
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: ${`translate(${5*i/3}px, 0)`};
+  }
+`,m=l.keyframes`
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+`,o={Container:l__default.default.span`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${({$fullScreen:i})=>i?"100vw":"100%"};
+    height: ${({$fullScreen:i})=>i?"100vh":"100%"};
+  `,Spinner:l__default.default.span`
+    display: flex;
+    position: relative;
+    width: ${({$size:i})=>`${17*i/3}px`};
+    height: ${({$size:i})=>`${i}px`};
+
+    span {
+      position: absolute;
+      width: ${({$size:i})=>`${i}px`};
+      height: ${({$size:i})=>`${i}px`};
+      border-radius: 50%;
+      background: ${({$color:i})=>i};
+    }
+
+    span:nth-child(1) {
+      left: ${({$size:i})=>`${2*i/3}px`};
+      animation: ${$} 0.6s infinite;
+    }
+
+    span:nth-child(2) {
+      left: ${({$size:i})=>`${2*i/3}px`};
+      animation: ${({$size:i})=>r(i)} 0.6s infinite;
+    }
+
+    span:nth-child(3) {
+      left: ${({$size:i})=>`${7*i/3}px`};
+      animation: ${({$size:i})=>r(i)} 0.6s infinite;
+    }
+
+    span:nth-child(4) {
+      left: ${({$size:i})=>`${4*i}px`};
+      animation: ${m} 0.6s infinite;
+    }
+  `};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

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

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 ILoadingEllipsisProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    fullScreen?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+
+declare const LoadingEllipsis: ({ size, color, fullScreen, className, htmlAttributes, }: ILoadingEllipsisProps) => React.JSX.Element;
+
+export { type ILoadingEllipsisProps, LoadingEllipsis };

package/dist/index.js

@@ -1,53 +1,61 @@
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import d from "clsx";
-import a, { keyframes as s } from "styled-components";
-const m = /* @__PURE__ */ s(["0%{transform:scale(0);}100%{transform:scale(1);}"]), o = (n) => s(["0%{transform:translate(0,0);}100%{transform:", ";}"], `translate(${5 * n / 3}px, 0)`), f = /* @__PURE__ */ s(["0%{transform:scale(1);}100%{transform:scale(0);}"]), l = {
-  Container: a.span.withConfig({
-    displayName: "_style__Container",
-    componentId: "sc-1ktgpxe-0"
-  })(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";"], ({
-    $fullScreen: n
-  }) => n ? "100vw" : "100%", ({
-    $fullScreen: n
-  }) => n ? "100vh" : "100%"),
-  Spinner: a.span.withConfig({
-    displayName: "_style__Spinner",
-    componentId: "sc-1ktgpxe-1"
-  })(["display:flex;position:relative;width:", ";height:", ";span{position:absolute;width:", ";height:", ";border-radius:50%;background:", ";}span:nth-child(1){left:", ";animation:", " 0.6s infinite;}span:nth-child(2){left:", ";animation:", " 0.6s infinite;}span:nth-child(3){left:", ";animation:", " 0.6s infinite;}span:nth-child(4){left:", ";animation:", " 0.6s infinite;}"], ({
-    $size: n
-  }) => `${17 * n / 3}px`, ({
-    $size: n
-  }) => `${n}px`, ({
-    $size: n
-  }) => `${n}px`, ({
-    $size: n
-  }) => `${n}px`, ({
-    $color: n
-  }) => n, ({
-    $size: n
-  }) => `${2 * n / 3}px`, m, ({
-    $size: n
-  }) => `${2 * n / 3}px`, ({
-    $size: n
-  }) => o(n), ({
-    $size: n
-  }) => `${7 * n / 3}px`, ({
-    $size: n
-  }) => o(n), ({
-    $size: n
-  }) => `${4 * n}px`, f)
-}, $ = ({
-  size: n = 12,
-  color: t = "#000000",
-  fullScreen: e = !1,
-  className: p,
-  htmlAttributes: r
-}) => /* @__PURE__ */ i(l.Container, { ...r, $fullScreen: e, className: d("loading-ellipsis", `loading-ellipsis--size-${n}`, `loading-ellipsis--color-${t}`, e && "loading-ellipsis--fullScreen", p), children: /* @__PURE__ */ c(l.Spinner, { $size: n, $color: t, className: "loading-ellipsis-inner", children: [
-  /* @__PURE__ */ i("span", {}),
-  /* @__PURE__ */ i("span", {}),
-  /* @__PURE__ */ i("span", {}),
-  /* @__PURE__ */ i("span", {})
-] }) });
-export {
-  $ as LoadingEllipsis
-};
+import f from'clsx';import n from'react';import l,{keyframes}from'styled-components';var $=keyframes`
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+`,r=i=>keyframes`
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: ${`translate(${5*i/3}px, 0)`};
+  }
+`,m=keyframes`
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+`,o={Container:l.span`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${({$fullScreen:i})=>i?"100vw":"100%"};
+    height: ${({$fullScreen:i})=>i?"100vh":"100%"};
+  `,Spinner:l.span`
+    display: flex;
+    position: relative;
+    width: ${({$size:i})=>`${17*i/3}px`};
+    height: ${({$size:i})=>`${i}px`};
+
+    span {
+      position: absolute;
+      width: ${({$size:i})=>`${i}px`};
+      height: ${({$size:i})=>`${i}px`};
+      border-radius: 50%;
+      background: ${({$color:i})=>i};
+    }
+
+    span:nth-child(1) {
+      left: ${({$size:i})=>`${2*i/3}px`};
+      animation: ${$} 0.6s infinite;
+    }
+
+    span:nth-child(2) {
+      left: ${({$size:i})=>`${2*i/3}px`};
+      animation: ${({$size:i})=>r(i)} 0.6s infinite;
+    }
+
+    span:nth-child(3) {
+      left: ${({$size:i})=>`${7*i/3}px`};
+      animation: ${({$size:i})=>r(i)} 0.6s infinite;
+    }
+
+    span:nth-child(4) {
+      left: ${({$size:i})=>`${4*i}px`};
+      animation: ${m} 0.6s infinite;
+    }
+  `};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

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.loading-ellipsis",
-  "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 { ILoadingEllipsisProps } from './_types';
-
-export declare const LoadingEllipsis: ({ size, color, fullScreen, className, htmlAttributes, }: ILoadingEllipsisProps) => 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;
-    Spinner: 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 ILoadingEllipsisProps {
-    size?: number;
-    color?: string;
-    className?: string;
-    fullScreen?: boolean;
-    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-}