lumidot 0.4.0 → 0.5.1
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 +5 -3
- package/dist/index.cjs +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# lumidot
|
|
2
2
|
|
|
3
|
-
A 3x3 dot-grid loader for React. 36 patterns,
|
|
3
|
+
A 3x3 dot-grid loader for React. 36 patterns, 20 colors, under 5KB.
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
@@ -23,7 +25,7 @@ function App() {
|
|
|
23
25
|
| Prop | Type | Default | Description |
|
|
24
26
|
|------|------|---------|-------------|
|
|
25
27
|
| `pattern` | `LumidotPattern` | `'all'` | Dot layout pattern (36 options) |
|
|
26
|
-
| `variant` | `LumidotVariant` | `'
|
|
28
|
+
| `variant` | `LumidotVariant` | `'blue'` | Color variant (20 options) |
|
|
27
29
|
| `direction` | `LumidotDirection` | `'ltr'` | Wave direction — `'ltr'`, `'rtl'`, `'ttb'`, `'btt'` |
|
|
28
30
|
| `scale` | `number` | `1` | Size multiplier (1 = 20px) |
|
|
29
31
|
| `glow` | `number` | `8` | Glow intensity |
|
|
@@ -48,7 +50,7 @@ function App() {
|
|
|
48
50
|
|
|
49
51
|
## Variants
|
|
50
52
|
|
|
51
|
-
|
|
53
|
+
20 color variants: `amber`, `black`, `blue`, `cyan`, `emerald`, `fuchsia`, `green`, `indigo`, `lime`, `orange`, `pink`, `purple`, `red`, `rose`, `sky`, `slate`, `teal`, `violet`, `white`, `yellow`
|
|
52
54
|
|
|
53
55
|
## Animation Modes
|
|
54
56
|
|
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 a=[0,1,2,3,4,5,6,7,8],r={"solo-center":[[4]],"solo-tl":[[0]],"solo-br":[[8]],"line-h-top":[[0,1,2]],"line-h-mid":[[3,4,5]],"line-h-bot":[[6,7,8]],"line-v-left":[[0,3,6]],"line-v-mid":[[1,4,7]],"line-v-right":[[2,5,8]],"line-diag-1":[[0,4,8]],"line-diag-2":[[2,4,6]],"corners-only":[[0],[2],[8],[6]],"corners-sync":[[0,2,6,8]],"plus-hollow":[[1],[3],[5],[7]],"l-tl":[[0,3,6,7,8]],"l-tr":[[2,5,6,7,8]],"l-bl":[[0,1,2,3,6]],"l-br":[[0,1,2,5,8]],"t-top":[[0,1,2,4,7]],"t-bot":[[1,4,6,7,8]],"t-left":[[0,1,3,6,7]],"t-right":[[1,2,5,7,8]],"duo-h":[[3,5]],"duo-v":[[1,7]],"duo-diag":[[0,8]],frame:[[0,1,2,5,8,7,6,3]],"frame-sync":[[0,1,2,3,5,6,7,8]],"sparse-1":[[0,4,8]],"sparse-2":[[2,3,7]],"sparse-3":[[1,5,6]],"wave-lr":[a],"wave-rl":[a],"wave-tb":[a],"wave-bt":[a],spiral:[[0,1,2],[2,5,8],[8,7,6],[6,3,0]],all:[a]},
|
|
1
|
+
"use client";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=e&&e.__esModule?e:{default:e};let a=[0,1,2,3,4,5,6,7,8],r={"solo-center":[[4]],"solo-tl":[[0]],"solo-br":[[8]],"line-h-top":[[0,1,2]],"line-h-mid":[[3,4,5]],"line-h-bot":[[6,7,8]],"line-v-left":[[0,3,6]],"line-v-mid":[[1,4,7]],"line-v-right":[[2,5,8]],"line-diag-1":[[0,4,8]],"line-diag-2":[[2,4,6]],"corners-only":[[0],[2],[8],[6]],"corners-sync":[[0,2,6,8]],"plus-hollow":[[1],[3],[5],[7]],"l-tl":[[0,3,6,7,8]],"l-tr":[[2,5,6,7,8]],"l-bl":[[0,1,2,3,6]],"l-br":[[0,1,2,5,8]],"t-top":[[0,1,2,4,7]],"t-bot":[[1,4,6,7,8]],"t-left":[[0,1,3,6,7]],"t-right":[[1,2,5,7,8]],"duo-h":[[3,5]],"duo-v":[[1,7]],"duo-diag":[[0,8]],frame:[[0,1,2,5,8,7,6,3]],"frame-sync":[[0,1,2,3,5,6,7,8]],"sparse-1":[[0,4,8]],"sparse-2":[[2,3,7]],"sparse-3":[[1,5,6]],"wave-lr":[a],"wave-rl":[a],"wave-tb":[a],"wave-bt":[a],spiral:[[0,1,2],[2,5,8],[8,7,6],[6,3,0]],all:[a]},l=new Set(["corners-sync","frame-sync"]),n={"wave-lr":"lr","wave-rl":"rl","wave-tb":"tb","wave-bt":"bt"},o={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],a=document.createElement("style");a.type="text/css",t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}("@keyframes lumidot-wave{0%,100%{opacity:1}50%{opacity:.22}}[data-lumidot-dot]{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 d=Array.from({length:9},(e,t)=>t),i=t.default.forwardRef(({variant:e="blue",pattern:a="all",glow:i=8,scale:s=1,duration:u=.7,direction:c="ltr",className:m,style:f,testId:h},p)=>{var b,w,v;let g=null!=(b=o[e])?b:o.blue,y=20*s,S=y/3,x=function(e,t){if(e<=0)return"none";let a=function(e,t=.5){let a=parseInt(e.slice(1,3),16),r=parseInt(e.slice(3,5),16),l=parseInt(e.slice(5,7),16),n=e=>Math.round(e+(255-e)*t).toString(16).padStart(2,"0");return`#${n(a)}${n(r)}${n(l)}`}(t);return`0 0 ${.4*e}px ${t}, 0 0 ${e}px ${a}60`}(i,g),E=null!=(w=r[a])?w:r.all,$=E.length>1,M=t.default.useMemo(()=>E.length<=1?E:"rtl"===c||"btt"===c?[...E].reverse():E,[E,c]),T=t.default.useMemo(()=>new Set(M.flat()),[M]),C=l.has(a),I=null!=(v=n[a])?v:c,[N,k]=t.default.useState(0),L=function(e){let[a,r]=t.default.useState(!1);return t.default.useEffect(()=>{if(!e)return;let t=window.matchMedia("(prefers-reduced-motion: reduce)");r(t.matches);let a=e=>r(e.matches);return t.addEventListener("change",a),()=>t.removeEventListener("change",a)},[e]),a}($);t.default.useEffect(()=>{if(!$||(k(0),M.length<=1||L))return;let e=window.setInterval(()=>k(e=>(e+1)%M.length),1250);return()=>window.clearInterval(e)},[M,L,$]);let _=t.default.useMemo(()=>$?L||M.length<=1?T:new Set(M[N%M.length]):new Set(E[0]),[$,E,L,M,N,T]),R=t.default.useMemo(()=>d.map(e=>{let t=_.has(e);return $?{width:S,height:S,backgroundColor:T.has(e)?g:"transparent",boxShadow:T.has(e)?x:"none",opacity:+!!t,transform:t?"scale(1)":"scale(0.7)",transition:M.length>1&&!L?`opacity ${t?37:250}ms ${t?"ease-out":"ease-in"}, transform 250ms ease`:void 0}:{width:S,height:S,backgroundColor:t?g:"transparent",boxShadow:t?x:"none","--lumidot-delay":`${t?C?0:function(e,t,a){let r=e%3,l=Math.floor(e/3),n=a/5;switch(t){case"ltr":default:return(r+l)*n;case"rtl":return(2-r+l)*n;case"ttb":return(l+r)*n;case"btt":return(2-l+r)*n;case"lr":return r*n;case"rl":return(2-r)*n;case"tb":return l*n;case"bt":return(2-l)*n}}(e,I,u):0}s`,"--lumidot-duration":`${u}s`}}),[_,g,S,u,I,37,M.length,x,$,C,T,L]);return t.default.createElement("span",{ref:p,role:"status","aria-label":"Loading","data-lumidot":"","data-lumidot-pattern":a,"data-lumidot-variant":e,"data-lumidot-direction":c,"data-lumidot-mode":$?"sequence":"wave","data-testid":h,className:m,style:{display:"inline-grid",gridTemplateColumns:"repeat(3, 1fr)",placeItems:"center",width:y,height:y,...f}},d.map(e=>t.default.createElement("span",{key:e,"data-lumidot-dot":"","data-lumidot-dot-active":_.has(e),style:R[e]})))});i.displayName="Lumidot",exports.COLORS=o,exports.Lumidot=i,exports.PATTERNS=r,exports.SYNC_PATTERNS=l,exports.WAVE_DIRECTIONS=n;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import e from"react";let t=[0,1,2,3,4,5,6,7,8],a={"solo-center":[[4]],"solo-tl":[[0]],"solo-br":[[8]],"line-h-top":[[0,1,2]],"line-h-mid":[[3,4,5]],"line-h-bot":[[6,7,8]],"line-v-left":[[0,3,6]],"line-v-mid":[[1,4,7]],"line-v-right":[[2,5,8]],"line-diag-1":[[0,4,8]],"line-diag-2":[[2,4,6]],"corners-only":[[0],[2],[8],[6]],"corners-sync":[[0,2,6,8]],"plus-hollow":[[1],[3],[5],[7]],"l-tl":[[0,3,6,7,8]],"l-tr":[[2,5,6,7,8]],"l-bl":[[0,1,2,3,6]],"l-br":[[0,1,2,5,8]],"t-top":[[0,1,2,4,7]],"t-bot":[[1,4,6,7,8]],"t-left":[[0,1,3,6,7]],"t-right":[[1,2,5,7,8]],"duo-h":[[3,5]],"duo-v":[[1,7]],"duo-diag":[[0,8]],frame:[[0,1,2,5,8,7,6,3]],"frame-sync":[[0,1,2,3,5,6,7,8]],"sparse-1":[[0,4,8]],"sparse-2":[[2,3,7]],"sparse-3":[[1,5,6]],"wave-lr":[t],"wave-rl":[t],"wave-tb":[t],"wave-bt":[t],spiral:[[0,1,2],[2,5,8],[8,7,6],[6,3,0]],all:[t]},r=new Set(["corners-sync","frame-sync"]),n={"wave-lr":"lr","wave-rl":"rl","wave-tb":"tb","wave-bt":"bt"},l={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",yellow:"#fde047"};!function(e){if(!e||"u"<typeof document)return;let t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}("@keyframes lumidot-wave{0%,100%{opacity:1}50%{opacity:.22}}[data-lumidot-dot]{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=Array.from({length:9},(e,t)=>t),i=e.forwardRef(({variant:t="
|
|
1
|
+
"use client";import e from"react";let t=[0,1,2,3,4,5,6,7,8],a={"solo-center":[[4]],"solo-tl":[[0]],"solo-br":[[8]],"line-h-top":[[0,1,2]],"line-h-mid":[[3,4,5]],"line-h-bot":[[6,7,8]],"line-v-left":[[0,3,6]],"line-v-mid":[[1,4,7]],"line-v-right":[[2,5,8]],"line-diag-1":[[0,4,8]],"line-diag-2":[[2,4,6]],"corners-only":[[0],[2],[8],[6]],"corners-sync":[[0,2,6,8]],"plus-hollow":[[1],[3],[5],[7]],"l-tl":[[0,3,6,7,8]],"l-tr":[[2,5,6,7,8]],"l-bl":[[0,1,2,3,6]],"l-br":[[0,1,2,5,8]],"t-top":[[0,1,2,4,7]],"t-bot":[[1,4,6,7,8]],"t-left":[[0,1,3,6,7]],"t-right":[[1,2,5,7,8]],"duo-h":[[3,5]],"duo-v":[[1,7]],"duo-diag":[[0,8]],frame:[[0,1,2,5,8,7,6,3]],"frame-sync":[[0,1,2,3,5,6,7,8]],"sparse-1":[[0,4,8]],"sparse-2":[[2,3,7]],"sparse-3":[[1,5,6]],"wave-lr":[t],"wave-rl":[t],"wave-tb":[t],"wave-bt":[t],spiral:[[0,1,2],[2,5,8],[8,7,6],[6,3,0]],all:[t]},r=new Set(["corners-sync","frame-sync"]),n={"wave-lr":"lr","wave-rl":"rl","wave-tb":"tb","wave-bt":"bt"},l={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],a=document.createElement("style");a.type="text/css",t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}("@keyframes lumidot-wave{0%,100%{opacity:1}50%{opacity:.22}}[data-lumidot-dot]{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=Array.from({length:9},(e,t)=>t),i=e.forwardRef(({variant:t="blue",pattern:i="all",glow:d=8,scale:s=1,duration:u=.7,direction:c="ltr",className:m,style:f,testId:h},p)=>{var b,w,g;let v=null!=(b=l[t])?b:l.blue,y=20*s,S=y/3,E=function(e,t){if(e<=0)return"none";let a=function(e,t=.5){let a=parseInt(e.slice(1,3),16),r=parseInt(e.slice(3,5),16),n=parseInt(e.slice(5,7),16),l=e=>Math.round(e+(255-e)*t).toString(16).padStart(2,"0");return`#${l(a)}${l(r)}${l(n)}`}(t);return`0 0 ${.4*e}px ${t}, 0 0 ${e}px ${a}60`}(d,v),$=null!=(w=a[i])?w:a.all,x=$.length>1,T=e.useMemo(()=>$.length<=1?$:"rtl"===c||"btt"===c?[...$].reverse():$,[$,c]),C=e.useMemo(()=>new Set(T.flat()),[T]),I=r.has(i),N=null!=(g=n[i])?g:c,[k,M]=e.useState(0),L=function(t){let[a,r]=e.useState(!1);return e.useEffect(()=>{if(!t)return;let e=window.matchMedia("(prefers-reduced-motion: reduce)");r(e.matches);let a=e=>r(e.matches);return e.addEventListener("change",a),()=>e.removeEventListener("change",a)},[t]),a}(x);e.useEffect(()=>{if(!x||(M(0),T.length<=1||L))return;let e=window.setInterval(()=>M(e=>(e+1)%T.length),1250);return()=>window.clearInterval(e)},[T,L,x]);let R=e.useMemo(()=>x?L||T.length<=1?C:new Set(T[k%T.length]):new Set($[0]),[x,$,L,T,k,C]),A=e.useMemo(()=>o.map(e=>{let t=R.has(e);return x?{width:S,height:S,backgroundColor:C.has(e)?v:"transparent",boxShadow:C.has(e)?E:"none",opacity:+!!t,transform:t?"scale(1)":"scale(0.7)",transition:T.length>1&&!L?`opacity ${t?37:250}ms ${t?"ease-out":"ease-in"}, transform 250ms ease`:void 0}:{width:S,height:S,backgroundColor:t?v:"transparent",boxShadow:t?E:"none","--lumidot-delay":`${t?I?0:function(e,t,a){let r=e%3,n=Math.floor(e/3),l=a/5;switch(t){case"ltr":default:return(r+n)*l;case"rtl":return(2-r+n)*l;case"ttb":return(n+r)*l;case"btt":return(2-n+r)*l;case"lr":return r*l;case"rl":return(2-r)*l;case"tb":return n*l;case"bt":return(2-n)*l}}(e,N,u):0}s`,"--lumidot-duration":`${u}s`}}),[R,v,S,u,N,37,T.length,E,x,I,C,L]);return e.createElement("span",{ref:p,role:"status","aria-label":"Loading","data-lumidot":"","data-lumidot-pattern":i,"data-lumidot-variant":t,"data-lumidot-direction":c,"data-lumidot-mode":x?"sequence":"wave","data-testid":h,className:m,style:{display:"inline-grid",gridTemplateColumns:"repeat(3, 1fr)",placeItems:"center",width:y,height:y,...f}},o.map(t=>e.createElement("span",{key:t,"data-lumidot-dot":"","data-lumidot-dot-active":R.has(t),style:A[t]})))});i.displayName="Lumidot";export{l as COLORS,i as Lumidot,a as PATTERNS,r as SYNC_PATTERNS,n as WAVE_DIRECTIONS};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|