lumidot 0.5.1 → 0.6.0
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/README.md +21 -14
- package/dist/index.cjs +1 -1
- package/dist/index.d.mts +5 -42
- package/dist/index.d.ts +5 -42
- package/dist/index.mjs +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# lumidot
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Dot-grid loading animations for React. Tiny, flexible, beautiful.
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -13,26 +13,33 @@ npm install lumidot
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
import { Lumidot } from 'lumidot'
|
|
16
|
+
import { Lumidot } from 'lumidot';
|
|
17
17
|
|
|
18
18
|
function App() {
|
|
19
|
-
return
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<Lumidot />
|
|
22
|
+
<Lumidot rows={5} cols={5} pattern="all" />
|
|
23
|
+
</>
|
|
24
|
+
);
|
|
20
25
|
}
|
|
21
26
|
```
|
|
22
27
|
|
|
23
28
|
## Props
|
|
24
29
|
|
|
25
|
-
| Prop
|
|
26
|
-
|
|
27
|
-
| `pattern`
|
|
28
|
-
| `variant`
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
35
|
-
| `
|
|
30
|
+
| Prop | Type | Default | Description |
|
|
31
|
+
| ----------- | ------------------ | -------- | --------------------------------------------------- |
|
|
32
|
+
| `pattern` | `LumidotPattern` | `'all'` | Dot layout pattern (36 options) |
|
|
33
|
+
| `variant` | `LumidotVariant` | `'blue'` | Color variant (20 options) |
|
|
34
|
+
| `rows` | `number` | `3` | Number of rows in the dot grid |
|
|
35
|
+
| `cols` | `number` | `3` | Number of columns in the dot grid |
|
|
36
|
+
| `direction` | `LumidotDirection` | `'ltr'` | Wave direction — `'ltr'`, `'rtl'`, `'ttb'`, `'btt'` |
|
|
37
|
+
| `scale` | `number` | `1` | Size multiplier (1 = 20px) |
|
|
38
|
+
| `glow` | `number` | `8` | Glow intensity |
|
|
39
|
+
| `duration` | `number` | `0.7` | Wave cycle duration in seconds |
|
|
40
|
+
| `className` | `string` | — | Additional CSS classes |
|
|
41
|
+
| `style` | `CSSProperties` | — | Inline styles |
|
|
42
|
+
| `testId` | `string` | — | Sets `data-testid` attribute |
|
|
36
43
|
|
|
37
44
|
## Patterns
|
|
38
45
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=e&&e.__esModule?e:{default:e};let
|
|
1
|
+
"use client";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=e&&e.__esModule?e:{default:e};let r=new Set(["corners-sync","frame-sync"]),a={"wave-lr":"lr","wave-rl":"rl","wave-tb":"tb","wave-bt":"bt"},n={amber:"#fcd34d",blue:"#93c5fd",cyan:"#67e8f9",emerald:"#6ee7b7",fuchsia:"#f0abfc",green:"#86efac",indigo:"#a5b4fc",lime:"#bef264",orange:"#fdba74",pink:"#f9a8d4",purple:"#d8b4fe",red:"#fca5a5",rose:"#fda4af",sky:"#7dd3fc",slate:"#cbd5e1",teal:"#5eead4",violet:"#c4b5fd",white:"#ffffff",black:"#000000",yellow:"#fde047"};!function(e){if(!e||"u"<typeof document)return;let t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",t.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}("@keyframes lumidot-wave{0%,100%{opacity:1}50%{opacity:.22}}[data-lumidot-dot]{margin:0;padding:0;border:none;border-radius:0;transform-origin:center;will-change:opacity,transform,box-shadow}[data-lumidot-mode=wave] [data-lumidot-dot-active=true]{animation:lumidot-wave var(--lumidot-duration,.7s) ease-in-out infinite;animation-delay:var(--lumidot-delay, 0s)}@media (prefers-reduced-motion:reduce){[data-lumidot-mode=wave] [data-lumidot-dot-active=true]{animation:none}[data-lumidot-dot]{transition:none!important;transform:none!important}}");let o=3;function l(e,t){return Array.from({length:t},(e,t)=>t)}function s(e,t){return Array.from({length:t},(r,a)=>(e-1)*t+a)}function i(e,t){return Array.from({length:e},(e,r)=>r*t)}function d(e,t){return Array.from({length:e},(e,r)=>r*t+(t-1))}function u(e,t){let r=Math.floor(e/2);return Array.from({length:t},(e,a)=>r*t+a)}function c(e,t){let r=Math.floor(t/2);return Array.from({length:e},(e,a)=>a*t+r)}let f=t.default.forwardRef(({variant:e="blue",pattern:f="all",rows:m=o,cols:h=o,glow:p=8,scale:g=1,duration:w=.7,direction:b="ltr",className:v,style:y,testId:M},S)=>{var x,E;let A=null!=(x=n[e])?x:n.blue,$=m*h,T=t.default.useMemo(()=>Array.from({length:$},(e,t)=>t),[$]),N=20*g/Math.max(m,h),k=function(e,t){if(e<=0)return"none";let r=function(e,t=.5){let r=parseInt(e.slice(1,3),16),a=parseInt(e.slice(3,5),16),n=parseInt(e.slice(5,7),16),o=e=>Math.round(e+(255-e)*t).toString(16).padStart(2,"0");return`#${o(r)}${o(a)}${o(n)}`}(t);return`0 0 ${.4*e}px ${t}, 0 0 ${e}px ${r}60`}(p,A),C=t.default.useMemo(()=>(function(e,t,r,a){let n=t*r;switch(e){case"solo-center":return[[Math.floor(t/2)*r+Math.floor(r/2)]];case"solo-tl":return[[0]];case"solo-br":return[[n-1]];case"line-h-top":return[l(t,r)];case"line-h-mid":return[u(t,r)];case"line-h-bot":return[s(t,r)];case"line-v-left":return[i(t,r)];case"line-v-mid":return[c(t,r)];case"line-v-right":return[d(t,r)];case"line-diag-1":case"sparse-1":return[Array.from({length:Math.min(t,r)},(e,t)=>t*r+t)];case"line-diag-2":return[Array.from({length:Math.min(t,r)},(e,t)=>t*r+(r-1-t))];case"corners-only":return[[0],[r-1],[n-1],[(t-1)*r]];case"corners-sync":return[[0,r-1,n-1,(t-1)*r]];case"plus-hollow":return[[Math.floor(r/2)],[Math.floor(t/2)*r+(r-1)],[(t-1)*r+Math.floor(r/2)],[Math.floor(t/2)*r]];case"l-tl":return[[...new Set([...l(t,r),...i(t,r)])]];case"l-tr":return[[...new Set([...l(t,r),...d(t,r)])]];case"l-bl":return[[...new Set([...s(t,r),...i(t,r)])]];case"l-br":return[[...new Set([...s(t,r),...d(t,r)])]];case"t-top":return[[...new Set([...l(t,r),...c(t,r)])]];case"t-bot":return[[...new Set([...s(t,r),...c(t,r)])]];case"t-left":return[[...new Set([...i(t,r),...u(t,r)])]];case"t-right":return[[...new Set([...d(t,r),...u(t,r)])]];case"duo-h":return[[Math.floor(t/2)*r,Math.floor(t/2)*r+(r-1)]];case"duo-v":return[[Math.floor(r/2),(t-1)*r+Math.floor(r/2)]];case"duo-diag":return[[0,n-1]];case"frame":var o,f;return[(o=t,f=r,o<2||f<2?o*f==1?[0]:l(o,f).concat(s(o,f)):[...l(o,f),...d(o,f).slice(1),...s(o,f).slice(0,-1).reverse(),...i(o,f).slice(1,-1).reverse()])];case"frame-sync":return[function(e,t){if(e<=1&&t<=1)return[0];let r=new Set;return l(e,t).forEach(e=>r.add(e)),d(e,t).forEach(e=>r.add(e)),s(e,t).forEach(e=>r.add(e)),i(e,t).forEach(e=>r.add(e)),Array.from(r)}(t,r)];case"sparse-2":return[[r-1,Math.floor(t/2)*r,(t-1)*r+Math.floor(r/2)]];case"sparse-3":return[[Math.floor(r/2),Math.floor(t/2)*r+(r-1),(t-1)*r]];case"all":case"wave-lr":case"wave-rl":case"wave-tb":case"wave-bt":default:return[Array.from({length:t*r},(e,t)=>t)];case"spiral":{let e=t<2||r<2?[[0]]:[l(t,r),d(t,r),s(t,r).reverse(),i(t,r).reverse()];return"rtl"===a||"btt"===a?[...e].reverse():e}}})(f,m,h,b),[f,m,h,b]),I=C.length>1,_=t.default.useMemo(()=>new Set(C.flat()),[C]),L=r.has(f),R=null!=(E=a[f])?E:b,[O,P]=t.default.useState(0),q=function(e){let[r,a]=t.default.useState(!1);return t.default.useEffect(()=>{if(!e)return;let t=window.matchMedia("(prefers-reduced-motion: reduce)");a(t.matches);let r=e=>a(e.matches);return t.addEventListener("change",r),()=>t.removeEventListener("change",r)},[e]),r}(I);t.default.useEffect(()=>{if(!I||(P(0),C.length<=1||q))return;let e=window.setInterval(()=>P(e=>(e+1)%C.length),1250);return()=>window.clearInterval(e)},[C,q,I]);let H=t.default.useMemo(()=>I?q||C.length<=1?_:new Set(C[O%C.length]):new Set(C[0]),[I,C,q,O,_]),W=t.default.useMemo(()=>T.map(e=>{let t=H.has(e),r={display:"block",width:N,height:N,minWidth:N,minHeight:N,boxSizing:"border-box"};return I?{...r,backgroundColor:_.has(e)?A:"transparent",boxShadow:_.has(e)?k:"none",opacity:+!!t,transform:t?"scale(1)":"scale(0.7)",transition:C.length>1&&!q?`opacity ${t?37:250}ms ${t?"ease-out":"ease-in"}, transform 250ms ease`:void 0}:{...r,backgroundColor:t?A:"transparent",boxShadow:t?k:"none","--lumidot-delay":`${t?L?0:function(e,t,r,a,n){let o=e%a,l=Math.floor(e/a),s=r/Math.max(5,a+n-2),i=a-1,d=n-1;switch(t){case"ltr":default:return(o+l)*s;case"rtl":return(i-o+l)*s;case"ttb":return(l+o)*s;case"btt":return(d-l+o)*s;case"lr":return o*s;case"rl":return(i-o)*s;case"tb":return l*s;case"bt":return(d-l)*s}}(e,R,w,h,m):0}s`,"--lumidot-duration":`${w}s`}}),[H,A,N,w,R,37,C.length,k,I,L,_,q,T,h,m]);return t.default.createElement("span",{ref:S,role:"status","aria-label":"Loading","data-lumidot":"","data-lumidot-pattern":f,"data-lumidot-variant":e,"data-lumidot-rows":m,"data-lumidot-cols":h,"data-lumidot-direction":b,"data-lumidot-mode":I?"sequence":"wave","data-testid":M,className:v,style:{display:"inline-grid",gridTemplateColumns:`repeat(${h}, ${N}px)`,gridTemplateRows:`repeat(${m}, ${N}px)`,gap:0,width:h*N,height:m*N,lineHeight:0,...y}},T.map(e=>t.default.createElement("span",{key:e,"data-lumidot-dot":"","data-lumidot-dot-active":H.has(e),style:W[e]})))});f.displayName="Lumidot",exports.COLORS=n,exports.Lumidot=f,exports.PATTERN_NAMES=["solo-center","solo-tl","solo-br","line-h-top","line-h-mid","line-h-bot","line-v-left","line-v-mid","line-v-right","line-diag-1","line-diag-2","corners-only","corners-sync","plus-hollow","l-tl","l-tr","l-bl","l-br","t-top","t-bot","t-left","t-right","duo-h","duo-v","duo-diag","frame","frame-sync","sparse-1","sparse-2","sparse-3","wave-lr","wave-rl","wave-tb","wave-bt","spiral","all"],exports.SYNC_PATTERNS=r,exports.WAVE_DIRECTIONS=a;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.mts
CHANGED
|
@@ -1,45 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
type DotFrame = readonly DotIndex[];
|
|
5
|
-
declare const PATTERNS: {
|
|
6
|
-
readonly 'solo-center': readonly [readonly [4]];
|
|
7
|
-
readonly 'solo-tl': readonly [readonly [0]];
|
|
8
|
-
readonly 'solo-br': readonly [readonly [8]];
|
|
9
|
-
readonly 'line-h-top': readonly [readonly [0, 1, 2]];
|
|
10
|
-
readonly 'line-h-mid': readonly [readonly [3, 4, 5]];
|
|
11
|
-
readonly 'line-h-bot': readonly [readonly [6, 7, 8]];
|
|
12
|
-
readonly 'line-v-left': readonly [readonly [0, 3, 6]];
|
|
13
|
-
readonly 'line-v-mid': readonly [readonly [1, 4, 7]];
|
|
14
|
-
readonly 'line-v-right': readonly [readonly [2, 5, 8]];
|
|
15
|
-
readonly 'line-diag-1': readonly [readonly [0, 4, 8]];
|
|
16
|
-
readonly 'line-diag-2': readonly [readonly [2, 4, 6]];
|
|
17
|
-
readonly 'corners-only': readonly [readonly [0], readonly [2], readonly [8], readonly [6]];
|
|
18
|
-
readonly 'corners-sync': readonly [DotFrame];
|
|
19
|
-
readonly 'plus-hollow': readonly [readonly [1], readonly [3], readonly [5], readonly [7]];
|
|
20
|
-
readonly 'l-tl': readonly [readonly [0, 3, 6, 7, 8]];
|
|
21
|
-
readonly 'l-tr': readonly [readonly [2, 5, 6, 7, 8]];
|
|
22
|
-
readonly 'l-bl': readonly [readonly [0, 1, 2, 3, 6]];
|
|
23
|
-
readonly 'l-br': readonly [readonly [0, 1, 2, 5, 8]];
|
|
24
|
-
readonly 't-top': readonly [readonly [0, 1, 2, 4, 7]];
|
|
25
|
-
readonly 't-bot': readonly [readonly [1, 4, 6, 7, 8]];
|
|
26
|
-
readonly 't-left': readonly [readonly [0, 1, 3, 6, 7]];
|
|
27
|
-
readonly 't-right': readonly [readonly [1, 2, 5, 7, 8]];
|
|
28
|
-
readonly 'duo-h': readonly [readonly [3, 5]];
|
|
29
|
-
readonly 'duo-v': readonly [readonly [1, 7]];
|
|
30
|
-
readonly 'duo-diag': readonly [readonly [0, 8]];
|
|
31
|
-
readonly frame: readonly [DotFrame];
|
|
32
|
-
readonly 'frame-sync': readonly [readonly [0, 1, 2, 3, 5, 6, 7, 8]];
|
|
33
|
-
readonly 'sparse-1': readonly [readonly [0, 4, 8]];
|
|
34
|
-
readonly 'sparse-2': readonly [readonly [2, 3, 7]];
|
|
35
|
-
readonly 'sparse-3': readonly [readonly [1, 5, 6]];
|
|
36
|
-
readonly 'wave-lr': readonly [DotFrame];
|
|
37
|
-
readonly 'wave-rl': readonly [DotFrame];
|
|
38
|
-
readonly 'wave-tb': readonly [DotFrame];
|
|
39
|
-
readonly 'wave-bt': readonly [DotFrame];
|
|
40
|
-
readonly spiral: readonly [readonly [0, 1, 2], readonly [2, 5, 8], readonly [8, 7, 6], readonly [6, 3, 0]];
|
|
41
|
-
readonly all: readonly [DotFrame];
|
|
42
|
-
};
|
|
3
|
+
declare const PATTERN_NAMES: readonly ["solo-center", "solo-tl", "solo-br", "line-h-top", "line-h-mid", "line-h-bot", "line-v-left", "line-v-mid", "line-v-right", "line-diag-1", "line-diag-2", "corners-only", "corners-sync", "plus-hollow", "l-tl", "l-tr", "l-bl", "l-br", "t-top", "t-bot", "t-left", "t-right", "duo-h", "duo-v", "duo-diag", "frame", "frame-sync", "sparse-1", "sparse-2", "sparse-3", "wave-lr", "wave-rl", "wave-tb", "wave-bt", "spiral", "all"];
|
|
43
4
|
declare const SYNC_PATTERNS: Set<string>;
|
|
44
5
|
declare const WAVE_DIRECTIONS: {
|
|
45
6
|
readonly 'wave-lr': "lr";
|
|
@@ -70,11 +31,13 @@ declare const COLORS: {
|
|
|
70
31
|
readonly yellow: "#fde047";
|
|
71
32
|
};
|
|
72
33
|
type LumidotVariant = keyof typeof COLORS;
|
|
73
|
-
type LumidotPattern =
|
|
34
|
+
type LumidotPattern = (typeof PATTERN_NAMES)[number];
|
|
74
35
|
type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
|
|
75
36
|
interface LumidotProps {
|
|
76
37
|
variant?: LumidotVariant;
|
|
77
38
|
pattern?: LumidotPattern;
|
|
39
|
+
rows?: number;
|
|
40
|
+
cols?: number;
|
|
78
41
|
glow?: number;
|
|
79
42
|
scale?: number;
|
|
80
43
|
duration?: number;
|
|
@@ -86,5 +49,5 @@ interface LumidotProps {
|
|
|
86
49
|
|
|
87
50
|
declare const Lumidot: React.ForwardRefExoticComponent<LumidotProps & React.RefAttributes<HTMLSpanElement>>;
|
|
88
51
|
|
|
89
|
-
export { COLORS, Lumidot,
|
|
52
|
+
export { COLORS, Lumidot, PATTERN_NAMES, SYNC_PATTERNS, WAVE_DIRECTIONS };
|
|
90
53
|
export type { LumidotDirection, LumidotPattern, LumidotProps, LumidotVariant };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,45 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
type DotFrame = readonly DotIndex[];
|
|
5
|
-
declare const PATTERNS: {
|
|
6
|
-
readonly 'solo-center': readonly [readonly [4]];
|
|
7
|
-
readonly 'solo-tl': readonly [readonly [0]];
|
|
8
|
-
readonly 'solo-br': readonly [readonly [8]];
|
|
9
|
-
readonly 'line-h-top': readonly [readonly [0, 1, 2]];
|
|
10
|
-
readonly 'line-h-mid': readonly [readonly [3, 4, 5]];
|
|
11
|
-
readonly 'line-h-bot': readonly [readonly [6, 7, 8]];
|
|
12
|
-
readonly 'line-v-left': readonly [readonly [0, 3, 6]];
|
|
13
|
-
readonly 'line-v-mid': readonly [readonly [1, 4, 7]];
|
|
14
|
-
readonly 'line-v-right': readonly [readonly [2, 5, 8]];
|
|
15
|
-
readonly 'line-diag-1': readonly [readonly [0, 4, 8]];
|
|
16
|
-
readonly 'line-diag-2': readonly [readonly [2, 4, 6]];
|
|
17
|
-
readonly 'corners-only': readonly [readonly [0], readonly [2], readonly [8], readonly [6]];
|
|
18
|
-
readonly 'corners-sync': readonly [DotFrame];
|
|
19
|
-
readonly 'plus-hollow': readonly [readonly [1], readonly [3], readonly [5], readonly [7]];
|
|
20
|
-
readonly 'l-tl': readonly [readonly [0, 3, 6, 7, 8]];
|
|
21
|
-
readonly 'l-tr': readonly [readonly [2, 5, 6, 7, 8]];
|
|
22
|
-
readonly 'l-bl': readonly [readonly [0, 1, 2, 3, 6]];
|
|
23
|
-
readonly 'l-br': readonly [readonly [0, 1, 2, 5, 8]];
|
|
24
|
-
readonly 't-top': readonly [readonly [0, 1, 2, 4, 7]];
|
|
25
|
-
readonly 't-bot': readonly [readonly [1, 4, 6, 7, 8]];
|
|
26
|
-
readonly 't-left': readonly [readonly [0, 1, 3, 6, 7]];
|
|
27
|
-
readonly 't-right': readonly [readonly [1, 2, 5, 7, 8]];
|
|
28
|
-
readonly 'duo-h': readonly [readonly [3, 5]];
|
|
29
|
-
readonly 'duo-v': readonly [readonly [1, 7]];
|
|
30
|
-
readonly 'duo-diag': readonly [readonly [0, 8]];
|
|
31
|
-
readonly frame: readonly [DotFrame];
|
|
32
|
-
readonly 'frame-sync': readonly [readonly [0, 1, 2, 3, 5, 6, 7, 8]];
|
|
33
|
-
readonly 'sparse-1': readonly [readonly [0, 4, 8]];
|
|
34
|
-
readonly 'sparse-2': readonly [readonly [2, 3, 7]];
|
|
35
|
-
readonly 'sparse-3': readonly [readonly [1, 5, 6]];
|
|
36
|
-
readonly 'wave-lr': readonly [DotFrame];
|
|
37
|
-
readonly 'wave-rl': readonly [DotFrame];
|
|
38
|
-
readonly 'wave-tb': readonly [DotFrame];
|
|
39
|
-
readonly 'wave-bt': readonly [DotFrame];
|
|
40
|
-
readonly spiral: readonly [readonly [0, 1, 2], readonly [2, 5, 8], readonly [8, 7, 6], readonly [6, 3, 0]];
|
|
41
|
-
readonly all: readonly [DotFrame];
|
|
42
|
-
};
|
|
3
|
+
declare const PATTERN_NAMES: readonly ["solo-center", "solo-tl", "solo-br", "line-h-top", "line-h-mid", "line-h-bot", "line-v-left", "line-v-mid", "line-v-right", "line-diag-1", "line-diag-2", "corners-only", "corners-sync", "plus-hollow", "l-tl", "l-tr", "l-bl", "l-br", "t-top", "t-bot", "t-left", "t-right", "duo-h", "duo-v", "duo-diag", "frame", "frame-sync", "sparse-1", "sparse-2", "sparse-3", "wave-lr", "wave-rl", "wave-tb", "wave-bt", "spiral", "all"];
|
|
43
4
|
declare const SYNC_PATTERNS: Set<string>;
|
|
44
5
|
declare const WAVE_DIRECTIONS: {
|
|
45
6
|
readonly 'wave-lr': "lr";
|
|
@@ -70,11 +31,13 @@ declare const COLORS: {
|
|
|
70
31
|
readonly yellow: "#fde047";
|
|
71
32
|
};
|
|
72
33
|
type LumidotVariant = keyof typeof COLORS;
|
|
73
|
-
type LumidotPattern =
|
|
34
|
+
type LumidotPattern = (typeof PATTERN_NAMES)[number];
|
|
74
35
|
type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
|
|
75
36
|
interface LumidotProps {
|
|
76
37
|
variant?: LumidotVariant;
|
|
77
38
|
pattern?: LumidotPattern;
|
|
39
|
+
rows?: number;
|
|
40
|
+
cols?: number;
|
|
78
41
|
glow?: number;
|
|
79
42
|
scale?: number;
|
|
80
43
|
duration?: number;
|
|
@@ -86,5 +49,5 @@ interface LumidotProps {
|
|
|
86
49
|
|
|
87
50
|
declare const Lumidot: React.ForwardRefExoticComponent<LumidotProps & React.RefAttributes<HTMLSpanElement>>;
|
|
88
51
|
|
|
89
|
-
export { COLORS, Lumidot,
|
|
52
|
+
export { COLORS, Lumidot, PATTERN_NAMES, SYNC_PATTERNS, WAVE_DIRECTIONS };
|
|
90
53
|
export type { LumidotDirection, LumidotPattern, LumidotProps, LumidotVariant };
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import e from"react";let t=[
|
|
1
|
+
"use client";import e from"react";let t=["solo-center","solo-tl","solo-br","line-h-top","line-h-mid","line-h-bot","line-v-left","line-v-mid","line-v-right","line-diag-1","line-diag-2","corners-only","corners-sync","plus-hollow","l-tl","l-tr","l-bl","l-br","t-top","t-bot","t-left","t-right","duo-h","duo-v","duo-diag","frame","frame-sync","sparse-1","sparse-2","sparse-3","wave-lr","wave-rl","wave-tb","wave-bt","spiral","all"],r=new Set(["corners-sync","frame-sync"]),a={"wave-lr":"lr","wave-rl":"rl","wave-tb":"tb","wave-bt":"bt"},n={amber:"#fcd34d",blue:"#93c5fd",cyan:"#67e8f9",emerald:"#6ee7b7",fuchsia:"#f0abfc",green:"#86efac",indigo:"#a5b4fc",lime:"#bef264",orange:"#fdba74",pink:"#f9a8d4",purple:"#d8b4fe",red:"#fca5a5",rose:"#fda4af",sky:"#7dd3fc",slate:"#cbd5e1",teal:"#5eead4",violet:"#c4b5fd",white:"#ffffff",black:"#000000",yellow:"#fde047"};!function(e){if(!e||"u"<typeof document)return;let t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",t.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}("@keyframes lumidot-wave{0%,100%{opacity:1}50%{opacity:.22}}[data-lumidot-dot]{margin:0;padding:0;border:none;border-radius:0;transform-origin:center;will-change:opacity,transform,box-shadow}[data-lumidot-mode=wave] [data-lumidot-dot-active=true]{animation:lumidot-wave var(--lumidot-duration,.7s) ease-in-out infinite;animation-delay:var(--lumidot-delay, 0s)}@media (prefers-reduced-motion:reduce){[data-lumidot-mode=wave] [data-lumidot-dot-active=true]{animation:none}[data-lumidot-dot]{transition:none!important;transform:none!important}}");let o=3;function l(e,t){return Array.from({length:t},(e,t)=>t)}function s(e,t){return Array.from({length:t},(r,a)=>(e-1)*t+a)}function i(e,t){return Array.from({length:e},(e,r)=>r*t)}function d(e,t){return Array.from({length:e},(e,r)=>r*t+(t-1))}function u(e,t){let r=Math.floor(e/2);return Array.from({length:t},(e,a)=>r*t+a)}function c(e,t){let r=Math.floor(t/2);return Array.from({length:e},(e,a)=>a*t+r)}let f=e.forwardRef(({variant:t="blue",pattern:f="all",rows:m=o,cols:h=o,glow:p=8,scale:g=1,duration:w=.7,direction:b="ltr",className:v,style:y,testId:M},S)=>{var E,x;let A=null!=(E=n[t])?E:n.blue,$=m*h,T=e.useMemo(()=>Array.from({length:$},(e,t)=>t),[$]),N=20*g/Math.max(m,h),k=function(e,t){if(e<=0)return"none";let r=function(e,t=.5){let r=parseInt(e.slice(1,3),16),a=parseInt(e.slice(3,5),16),n=parseInt(e.slice(5,7),16),o=e=>Math.round(e+(255-e)*t).toString(16).padStart(2,"0");return`#${o(r)}${o(a)}${o(n)}`}(t);return`0 0 ${.4*e}px ${t}, 0 0 ${e}px ${r}60`}(p,A),C=e.useMemo(()=>(function(e,t,r,a){let n=t*r;switch(e){case"solo-center":return[[Math.floor(t/2)*r+Math.floor(r/2)]];case"solo-tl":return[[0]];case"solo-br":return[[n-1]];case"line-h-top":return[l(t,r)];case"line-h-mid":return[u(t,r)];case"line-h-bot":return[s(t,r)];case"line-v-left":return[i(t,r)];case"line-v-mid":return[c(t,r)];case"line-v-right":return[d(t,r)];case"line-diag-1":case"sparse-1":return[Array.from({length:Math.min(t,r)},(e,t)=>t*r+t)];case"line-diag-2":return[Array.from({length:Math.min(t,r)},(e,t)=>t*r+(r-1-t))];case"corners-only":return[[0],[r-1],[n-1],[(t-1)*r]];case"corners-sync":return[[0,r-1,n-1,(t-1)*r]];case"plus-hollow":return[[Math.floor(r/2)],[Math.floor(t/2)*r+(r-1)],[(t-1)*r+Math.floor(r/2)],[Math.floor(t/2)*r]];case"l-tl":return[[...new Set([...l(t,r),...i(t,r)])]];case"l-tr":return[[...new Set([...l(t,r),...d(t,r)])]];case"l-bl":return[[...new Set([...s(t,r),...i(t,r)])]];case"l-br":return[[...new Set([...s(t,r),...d(t,r)])]];case"t-top":return[[...new Set([...l(t,r),...c(t,r)])]];case"t-bot":return[[...new Set([...s(t,r),...c(t,r)])]];case"t-left":return[[...new Set([...i(t,r),...u(t,r)])]];case"t-right":return[[...new Set([...d(t,r),...u(t,r)])]];case"duo-h":return[[Math.floor(t/2)*r,Math.floor(t/2)*r+(r-1)]];case"duo-v":return[[Math.floor(r/2),(t-1)*r+Math.floor(r/2)]];case"duo-diag":return[[0,n-1]];case"frame":var o,f;return[(o=t,f=r,o<2||f<2?o*f==1?[0]:l(o,f).concat(s(o,f)):[...l(o,f),...d(o,f).slice(1),...s(o,f).slice(0,-1).reverse(),...i(o,f).slice(1,-1).reverse()])];case"frame-sync":return[function(e,t){if(e<=1&&t<=1)return[0];let r=new Set;return l(e,t).forEach(e=>r.add(e)),d(e,t).forEach(e=>r.add(e)),s(e,t).forEach(e=>r.add(e)),i(e,t).forEach(e=>r.add(e)),Array.from(r)}(t,r)];case"sparse-2":return[[r-1,Math.floor(t/2)*r,(t-1)*r+Math.floor(r/2)]];case"sparse-3":return[[Math.floor(r/2),Math.floor(t/2)*r+(r-1),(t-1)*r]];case"all":case"wave-lr":case"wave-rl":case"wave-tb":case"wave-bt":default:return[Array.from({length:t*r},(e,t)=>t)];case"spiral":{let e=t<2||r<2?[[0]]:[l(t,r),d(t,r),s(t,r).reverse(),i(t,r).reverse()];return"rtl"===a||"btt"===a?[...e].reverse():e}}})(f,m,h,b),[f,m,h,b]),I=C.length>1,L=e.useMemo(()=>new Set(C.flat()),[C]),R=r.has(f),O=null!=(x=a[f])?x:b,[_,H]=e.useState(0),P=function(t){let[r,a]=e.useState(!1);return e.useEffect(()=>{if(!t)return;let e=window.matchMedia("(prefers-reduced-motion: reduce)");a(e.matches);let r=e=>a(e.matches);return e.addEventListener("change",r),()=>e.removeEventListener("change",r)},[t]),r}(I);e.useEffect(()=>{if(!I||(H(0),C.length<=1||P))return;let e=window.setInterval(()=>H(e=>(e+1)%C.length),1250);return()=>window.clearInterval(e)},[C,P,I]);let W=e.useMemo(()=>I?P||C.length<=1?L:new Set(C[_%C.length]):new Set(C[0]),[I,C,P,_,L]),q=e.useMemo(()=>T.map(e=>{let t=W.has(e),r={display:"block",width:N,height:N,minWidth:N,minHeight:N,boxSizing:"border-box"};return I?{...r,backgroundColor:L.has(e)?A:"transparent",boxShadow:L.has(e)?k:"none",opacity:+!!t,transform:t?"scale(1)":"scale(0.7)",transition:C.length>1&&!P?`opacity ${t?37:250}ms ${t?"ease-out":"ease-in"}, transform 250ms ease`:void 0}:{...r,backgroundColor:t?A:"transparent",boxShadow:t?k:"none","--lumidot-delay":`${t?R?0:function(e,t,r,a,n){let o=e%a,l=Math.floor(e/a),s=r/Math.max(5,a+n-2),i=a-1,d=n-1;switch(t){case"ltr":default:return(o+l)*s;case"rtl":return(i-o+l)*s;case"ttb":return(l+o)*s;case"btt":return(d-l+o)*s;case"lr":return o*s;case"rl":return(i-o)*s;case"tb":return l*s;case"bt":return(d-l)*s}}(e,O,w,h,m):0}s`,"--lumidot-duration":`${w}s`}}),[W,A,N,w,O,37,C.length,k,I,R,L,P,T,h,m]);return e.createElement("span",{ref:S,role:"status","aria-label":"Loading","data-lumidot":"","data-lumidot-pattern":f,"data-lumidot-variant":t,"data-lumidot-rows":m,"data-lumidot-cols":h,"data-lumidot-direction":b,"data-lumidot-mode":I?"sequence":"wave","data-testid":M,className:v,style:{display:"inline-grid",gridTemplateColumns:`repeat(${h}, ${N}px)`,gridTemplateRows:`repeat(${m}, ${N}px)`,gap:0,width:h*N,height:m*N,lineHeight:0,...y}},T.map(t=>e.createElement("span",{key:t,"data-lumidot-dot":"","data-lumidot-dot-active":W.has(t),style:q[t]})))});f.displayName="Lumidot";export{n as COLORS,f as Lumidot,t as PATTERN_NAMES,r as SYNC_PATTERNS,a as WAVE_DIRECTIONS};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lumidot",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.6.0",
|
|
4
|
+
"description": "Dot-grid loading animations for React. Tiny, flexible, beautiful.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
7
7
|
"email": "zainzafar90@gmail.com",
|