lumidot 0.1.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.
Files changed (10) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +70 -0
  3. package/dist/index.cjs +2 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.mts +91 -0
  6. package/dist/index.d.ts +91 -0
  7. package/dist/index.mjs +2 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/styles.css +31 -0
  10. package/package.json +72 -0
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Zain Zafar
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,70 @@
1
+ # lumidot
2
+
3
+ A 3x3 dot-grid loader for React. 36 patterns, 19 colors, under 4KB.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install lumidot
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```tsx
14
+ import { Lumidot } from 'lumidot'
15
+ import 'lumidot/styles.css'
16
+
17
+ function App() {
18
+ return <Lumidot />
19
+ }
20
+ ```
21
+
22
+ ## Props
23
+
24
+ | Prop | Type | Default | Description |
25
+ |------|------|---------|-------------|
26
+ | `pattern` | `LumidotPattern` | `'all'` | Dot layout pattern (36 options) |
27
+ | `variant` | `LumidotVariant` | `'cyan'` | Color variant (19 options) |
28
+ | `direction` | `LumidotDirection` | `'ltr'` | Wave direction — `'ltr'`, `'rtl'`, `'ttb'`, `'btt'` |
29
+ | `scale` | `number` | `1` | Size multiplier (1 = 20px) |
30
+ | `glow` | `number` | `8` | Glow intensity |
31
+ | `duration` | `number` | `0.7` | Wave cycle duration in seconds |
32
+ | `speed` | `number` | `1250` | Frame change speed in ms (sequence mode) |
33
+ | `smoothness` | `number` | `250` | Transition smoothness in ms |
34
+ | `className` | `string` | — | Additional CSS classes |
35
+ | `style` | `CSSProperties` | — | Inline styles |
36
+ | `testId` | `string` | — | Sets `data-testid` attribute |
37
+
38
+ ## Patterns
39
+
40
+ 36 named patterns organized by category:
41
+
42
+ - **Solo** — `solo-center`, `solo-tl`, `solo-br`
43
+ - **Lines** — `line-h-top`, `line-h-mid`, `line-h-bot`, `line-v-left`, `line-v-mid`, `line-v-right`, `line-diag-1`, `line-diag-2`
44
+ - **Corners & Cross** — `corners-only`, `corners-sync`, `plus-hollow`
45
+ - **Shapes** — `l-tl`, `l-tr`, `l-bl`, `l-br`, `t-top`, `t-bot`, `t-left`, `t-right`
46
+ - **Duo** — `duo-h`, `duo-v`, `duo-diag`
47
+ - **Frame** — `frame`, `frame-sync`
48
+ - **Sparse** — `sparse-1`, `sparse-2`, `sparse-3`
49
+ - **Wave** — `wave-lr`, `wave-rl`, `wave-tb`, `wave-bt`
50
+ - **Other** — `spiral`, `all`
51
+
52
+ ## Variants
53
+
54
+ 19 color variants: `amber`, `blue`, `cyan`, `emerald`, `fuchsia`, `green`, `indigo`, `lime`, `orange`, `pink`, `purple`, `red`, `rose`, `sky`, `slate`, `teal`, `violet`, `white`, `yellow`
55
+
56
+ ## Animation Modes
57
+
58
+ The animation mode is determined automatically by the pattern:
59
+
60
+ - **Wave** — Continuous pulsing animation across the grid. Controlled by `duration` and `direction`.
61
+ - **Sequence** — Frame-by-frame animation for multi-frame patterns (`corners-only`, `plus-hollow`, `spiral`). Controlled by `speed` and `smoothness`.
62
+
63
+ ## Accessibility
64
+
65
+ - `role="status"` and `aria-label="Loading"` on root element
66
+ - Respects `prefers-reduced-motion` — animations are disabled when the user prefers reduced motion
67
+
68
+ ## License
69
+
70
+ MIT
package/dist/index.cjs ADDED
@@ -0,0 +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]},l=new Set(["corners-sync","frame-sync"]),n={"wave-lr":"lr","wave-rl":"rl","wave-tb":"tb","wave-bt":"bt"},s={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"},o=Array.from({length:9},(e,t)=>t),d=t.default.forwardRef(({variant:e="cyan",pattern:a="all",glow:d=8,scale:i=1,duration:u=.7,speed:c=1250,smoothness:f=250,direction:h="ltr",className:m,style:p,testId:b},w)=>{var g,v,y;let S=null!=(g=s[e])?g:s.cyan,$=20*i,x=$/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),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`}(d,S),M=null!=(v=r[a])?v:r.all,I=M.length>1,C=t.default.useMemo(()=>M.length<=1?M:"rtl"===h||"btt"===h?[...M].reverse():M,[M,h]),L=t.default.useMemo(()=>new Set(C.flat()),[C]),N=l.has(a),T=null!=(y=n[a])?y:h,_=Math.round(.15*f),[k,R]=t.default.useState(0),A=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}(I);t.default.useEffect(()=>{if(!I||(R(0),C.length<=1||A))return;let e=window.setInterval(()=>R(e=>(e+1)%C.length),c);return()=>window.clearInterval(e)},[C,c,A,I]);let O=t.default.useMemo(()=>I?A||C.length<=1?L:new Set(C[k%C.length]):new Set(M[0]),[I,M,A,C,k,L]),P=t.default.useMemo(()=>o.map(e=>{let t=O.has(e);return I?{width:x,height:x,backgroundColor:L.has(e)?S:"transparent",boxShadow:L.has(e)?E:"none",opacity:+!!t,transform:t?"scale(1)":"scale(0.7)",transition:C.length>1&&!A?`opacity ${t?_:f}ms ${t?"ease-out":"ease-in"}, transform ${f}ms ease`:void 0}:{width:x,height:x,backgroundColor:t?S:"transparent",boxShadow:t?E:"none","--lumidot-delay":`${t?N?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,T,u):0}s`,"--lumidot-duration":`${u}s`}}),[O,S,x,u,f,T,_,C.length,E,I,N,L,A]);return t.default.createElement("span",{ref:w,role:"status","aria-label":"Loading","data-lumidot":"","data-lumidot-pattern":a,"data-lumidot-variant":e,"data-lumidot-direction":h,"data-lumidot-mode":I?"sequence":"wave","data-testid":b,className:m,style:{display:"inline-grid",gridTemplateColumns:"repeat(3, 1fr)",placeItems:"center",width:$,height:$,...p}},o.map(e=>t.default.createElement("span",{key:e,"data-lumidot-dot":"","data-lumidot-dot-active":O.has(e),style:P[e]})))});d.displayName="Lumidot",exports.COLORS=s,exports.Lumidot=d,exports.PATTERNS=r,exports.SYNC_PATTERNS=l,exports.WAVE_DIRECTIONS=n;
2
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../src/types.ts","../src/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\ntype DotIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\ntype DotFrame = readonly DotIndex[];\ntype PatternFrames = readonly DotFrame[];\n\nconst FULL_GRID: DotFrame = [0, 1, 2, 3, 4, 5, 6, 7, 8];\nconst CORNERS: DotFrame = [0, 2, 6, 8];\nconst FRAME_RING: DotFrame = [0, 1, 2, 5, 8, 7, 6, 3];\n\nexport const PATTERNS = {\n // Solo\n 'solo-center': [[4]],\n 'solo-tl': [[0]],\n 'solo-br': [[8]],\n\n // Lines\n 'line-h-top': [[0, 1, 2]],\n 'line-h-mid': [[3, 4, 5]],\n 'line-h-bot': [[6, 7, 8]],\n 'line-v-left': [[0, 3, 6]],\n 'line-v-mid': [[1, 4, 7]],\n 'line-v-right': [[2, 5, 8]],\n 'line-diag-1': [[0, 4, 8]],\n 'line-diag-2': [[2, 4, 6]],\n\n // Corner and cross\n 'corners-only': [[0], [2], [8], [6]],\n 'corners-sync': [CORNERS],\n 'plus-hollow': [[1], [3], [5], [7]],\n\n // Shapes\n 'l-tl': [[0, 3, 6, 7, 8]],\n 'l-tr': [[2, 5, 6, 7, 8]],\n 'l-bl': [[0, 1, 2, 3, 6]],\n 'l-br': [[0, 1, 2, 5, 8]],\n 't-top': [[0, 1, 2, 4, 7]],\n 't-bot': [[1, 4, 6, 7, 8]],\n 't-left': [[0, 1, 3, 6, 7]],\n 't-right': [[1, 2, 5, 7, 8]],\n\n // Duo\n 'duo-h': [[3, 5]],\n 'duo-v': [[1, 7]],\n 'duo-diag': [[0, 8]],\n\n // Frame\n frame: [FRAME_RING],\n 'frame-sync': [[0, 1, 2, 3, 5, 6, 7, 8]],\n\n // Sparse\n 'sparse-1': [[0, 4, 8]],\n 'sparse-2': [[2, 3, 7]],\n 'sparse-3': [[1, 5, 6]],\n\n // Wave\n 'wave-lr': [FULL_GRID],\n 'wave-rl': [FULL_GRID],\n 'wave-tb': [FULL_GRID],\n 'wave-bt': [FULL_GRID],\n\n // Sequence\n spiral: [[0, 1, 2], [2, 5, 8], [8, 7, 6], [6, 3, 0]],\n\n // Fallback/default\n all: [FULL_GRID],\n} as const satisfies Record<string, PatternFrames>;\n\nexport const SYNC_PATTERNS = new Set<string>(['corners-sync', 'frame-sync']);\n\nexport const WAVE_DIRECTIONS = {\n 'wave-lr': 'lr',\n 'wave-rl': 'rl',\n 'wave-tb': 'tb',\n 'wave-bt': 'bt',\n} as const;\n\nexport const COLORS = {\n amber: '#fcd34d',\n blue: '#93c5fd',\n cyan: '#67e8f9',\n emerald: '#6ee7b7',\n fuchsia: '#f0abfc',\n green: '#86efac',\n indigo: '#a5b4fc',\n lime: '#bef264',\n orange: '#fdba74',\n pink: '#f9a8d4',\n purple: '#d8b4fe',\n red: '#fca5a5',\n rose: '#fda4af',\n sky: '#7dd3fc',\n slate: '#cbd5e1',\n teal: '#5eead4',\n violet: '#c4b5fd',\n white: '#ffffff',\n yellow: '#fde047',\n} as const;\n\nexport type LumidotVariant = keyof typeof COLORS;\nexport type LumidotPattern = keyof typeof PATTERNS;\nexport type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';\nexport type LumidotWaveDirection = (typeof WAVE_DIRECTIONS)[keyof typeof WAVE_DIRECTIONS];\n\nexport interface LumidotProps {\n variant?: LumidotVariant;\n pattern?: LumidotPattern;\n glow?: number;\n scale?: number;\n duration?: number;\n speed?: number;\n smoothness?: number;\n direction?: LumidotDirection;\n className?: string;\n style?: CSSProperties;\n testId?: string;\n}\n","'use client';\n\nimport React from 'react';\nimport { COLORS, PATTERNS, SYNC_PATTERNS, WAVE_DIRECTIONS } from './types';\nimport type { LumidotDirection, LumidotPattern, LumidotProps, LumidotWaveDirection } from './types';\n\nexport type { LumidotProps, LumidotVariant, LumidotPattern, LumidotDirection } from './types';\nexport { PATTERNS, COLORS, SYNC_PATTERNS, WAVE_DIRECTIONS } from './types';\n\nconst GRID = 3;\nconst DOT_INDICES = Array.from({ length: 9 }, (_, i) => i);\n\nfunction brighten(hex: string, amount = 0.5): string {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n const lift = (c: number) => Math.round(c + (255 - c) * amount).toString(16).padStart(2, '0');\n return `#${lift(r)}${lift(g)}${lift(b)}`;\n}\n\nfunction glowShadow(glow: number, color: string): string {\n if (glow <= 0) return 'none';\n const bright = brighten(color);\n return `0 0 ${glow * 0.4}px ${color}, 0 0 ${glow}px ${bright}60`;\n}\n\nfunction waveDelay(index: number, direction: LumidotDirection | LumidotWaveDirection, duration: number): number {\n const col = index % GRID;\n const row = Math.floor(index / GRID);\n const step = duration / 5;\n const max = GRID - 1;\n\n switch (direction) {\n case 'ltr':\n return (col + row) * step;\n case 'rtl':\n return (max - col + row) * step;\n case 'ttb':\n return (row + col) * step;\n case 'btt':\n return (max - row + col) * step;\n case 'lr':\n return col * step;\n case 'rl':\n return (max - col) * step;\n case 'tb':\n return row * step;\n case 'bt':\n return (max - row) * step;\n default:\n return (col + row) * step;\n }\n}\n\nfunction orientFrames(\n frames: readonly (readonly number[])[],\n direction: LumidotDirection,\n): readonly (readonly number[])[] {\n if (frames.length <= 1) return frames;\n if (direction === 'rtl' || direction === 'btt') return [...frames].reverse();\n return frames;\n}\n\nfunction useReducedMotion(enabled: boolean): boolean {\n const [reduced, setReduced] = React.useState(false);\n\n React.useEffect(() => {\n if (!enabled) return;\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const handler = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', handler);\n return () => mq.removeEventListener('change', handler);\n }, [enabled]);\n\n return reduced;\n}\n\nconst Lumidot = React.forwardRef<HTMLSpanElement, LumidotProps>(\n (\n {\n variant = 'cyan',\n pattern = 'all',\n glow = 8,\n scale = 1,\n duration = 0.7,\n speed = 1250,\n smoothness = 250,\n direction = 'ltr',\n className,\n style,\n testId,\n },\n ref,\n ) => {\n const color = COLORS[variant] ?? COLORS.cyan;\n const size = 20 * scale;\n const dotSize = size / GRID;\n const shadow = glowShadow(glow, color);\n\n const rawFrames = PATTERNS[pattern] ?? PATTERNS.all;\n const isSequence = rawFrames.length > 1;\n\n const frames = React.useMemo(\n () => orientFrames(rawFrames, direction),\n [rawFrames, direction],\n );\n\n const allDots = React.useMemo(\n () => new Set<number>(frames.flat()),\n [frames],\n );\n\n const isSync = SYNC_PATTERNS.has(pattern);\n const waveDir = (WAVE_DIRECTIONS as Partial<Record<LumidotPattern, LumidotWaveDirection>>)[pattern] ?? direction;\n const fadeIn = Math.round(smoothness * 0.15);\n\n const [frame, setFrame] = React.useState(0);\n const reduced = useReducedMotion(isSequence);\n\n React.useEffect(() => {\n if (!isSequence) return;\n setFrame(0);\n if (frames.length <= 1 || reduced) return;\n const id = window.setInterval(\n () => setFrame((prev) => (prev + 1) % frames.length),\n speed,\n );\n return () => window.clearInterval(id);\n }, [frames, speed, reduced, isSequence]);\n\n const active = React.useMemo(() => {\n if (!isSequence) return new Set<number>(rawFrames[0]);\n if (reduced || frames.length <= 1) return allDots;\n return new Set<number>(frames[frame % frames.length]);\n }, [isSequence, rawFrames, reduced, frames, frame, allDots]);\n\n const dotStyles = React.useMemo(\n () =>\n DOT_INDICES.map((i) => {\n const on = active.has(i);\n\n if (isSequence) {\n return {\n width: dotSize,\n height: dotSize,\n backgroundColor: allDots.has(i) ? color : 'transparent',\n boxShadow: allDots.has(i) ? shadow : 'none',\n opacity: on ? 1 : 0,\n transform: on ? 'scale(1)' : 'scale(0.7)',\n transition:\n frames.length > 1 && !reduced\n ? `opacity ${on ? fadeIn : smoothness}ms ${on ? 'ease-out' : 'ease-in'}, transform ${smoothness}ms ease`\n : undefined,\n };\n }\n\n return {\n width: dotSize,\n height: dotSize,\n backgroundColor: on ? color : 'transparent',\n boxShadow: on ? shadow : 'none',\n '--lumidot-delay': `${on ? (isSync ? 0 : waveDelay(i, waveDir, duration)) : 0}s`,\n '--lumidot-duration': `${duration}s`,\n } as React.CSSProperties;\n }),\n [active, color, dotSize, duration, smoothness, waveDir, fadeIn, frames.length, shadow, isSequence, isSync, allDots, reduced],\n );\n\n return (\n <span\n ref={ref}\n role=\"status\"\n aria-label=\"Loading\"\n data-lumidot=\"\"\n data-lumidot-pattern={pattern}\n data-lumidot-variant={variant}\n data-lumidot-direction={direction}\n data-lumidot-mode={isSequence ? 'sequence' : 'wave'}\n data-testid={testId}\n className={className}\n style={{\n display: 'inline-grid',\n gridTemplateColumns: `repeat(${GRID}, 1fr)`,\n placeItems: 'center',\n width: size,\n height: size,\n ...style,\n }}\n >\n {DOT_INDICES.map((i) => (\n <span\n key={i}\n data-lumidot-dot=\"\"\n data-lumidot-dot-active={active.has(i)}\n style={dotStyles[i]}\n />\n ))}\n </span>\n );\n },\n);\n\nLumidot.displayName = 'Lumidot';\n\nexport { Lumidot };\n"],"names":["FULL_GRID","PATTERNS","frame","spiral","all","SYNC_PATTERNS","Set","WAVE_DIRECTIONS","COLORS","amber","blue","cyan","emerald","fuchsia","green","indigo","lime","orange","pink","purple","red","rose","sky","slate","teal","violet","white","yellow","DOT_INDICES","Array","from","length","_","i","Lumidot","React","forwardRef","variant","pattern","glow","scale","duration","speed","smoothness","direction","className","style","testId","ref","_WAVE_DIRECTIONS_pattern","color","size","dotSize","shadow","glowShadow","bright","brighten","hex","amount","r","parseInt","slice","g","b","lift","c","Math","round","toString","padStart","rawFrames","isSequence","frames","useMemo","reverse","allDots","flat","isSync","has","waveDir","fadeIn","setFrame","useState","reduced","useReducedMotion","enabled","setReduced","useEffect","mq","window","matchMedia","matches","handler","e","addEventListener","removeEventListener","id","setInterval","prev","clearInterval","active","dotStyles","map","on","width","height","backgroundColor","boxShadow","opacity","transform","transition","undefined","waveDelay","index","col","row","floor","step","max","GRID","createElement","span","role","aria-label","data-lumidot","data-lumidot-pattern","data-lumidot-variant","data-lumidot-direction","data-lumidot-mode","data-testid","display","gridTemplateColumns","placeItems","key","data-lumidot-dot","data-lumidot-dot-active","displayName"],"mappings":"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"}
package/dist/index.d.mts ADDED
@@ -0,0 +1,91 @@
1
+ import React, { CSSProperties } from 'react';
2
+
3
+ type DotIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
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
+ };
43
+ declare const SYNC_PATTERNS: Set<string>;
44
+ declare const WAVE_DIRECTIONS: {
45
+ readonly 'wave-lr': "lr";
46
+ readonly 'wave-rl': "rl";
47
+ readonly 'wave-tb': "tb";
48
+ readonly 'wave-bt': "bt";
49
+ };
50
+ declare const COLORS: {
51
+ readonly amber: "#fcd34d";
52
+ readonly blue: "#93c5fd";
53
+ readonly cyan: "#67e8f9";
54
+ readonly emerald: "#6ee7b7";
55
+ readonly fuchsia: "#f0abfc";
56
+ readonly green: "#86efac";
57
+ readonly indigo: "#a5b4fc";
58
+ readonly lime: "#bef264";
59
+ readonly orange: "#fdba74";
60
+ readonly pink: "#f9a8d4";
61
+ readonly purple: "#d8b4fe";
62
+ readonly red: "#fca5a5";
63
+ readonly rose: "#fda4af";
64
+ readonly sky: "#7dd3fc";
65
+ readonly slate: "#cbd5e1";
66
+ readonly teal: "#5eead4";
67
+ readonly violet: "#c4b5fd";
68
+ readonly white: "#ffffff";
69
+ readonly yellow: "#fde047";
70
+ };
71
+ type LumidotVariant = keyof typeof COLORS;
72
+ type LumidotPattern = keyof typeof PATTERNS;
73
+ type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
74
+ interface LumidotProps {
75
+ variant?: LumidotVariant;
76
+ pattern?: LumidotPattern;
77
+ glow?: number;
78
+ scale?: number;
79
+ duration?: number;
80
+ speed?: number;
81
+ smoothness?: number;
82
+ direction?: LumidotDirection;
83
+ className?: string;
84
+ style?: CSSProperties;
85
+ testId?: string;
86
+ }
87
+
88
+ declare const Lumidot: React.ForwardRefExoticComponent<LumidotProps & React.RefAttributes<HTMLSpanElement>>;
89
+
90
+ export { COLORS, Lumidot, PATTERNS, SYNC_PATTERNS, WAVE_DIRECTIONS };
91
+ export type { LumidotDirection, LumidotPattern, LumidotProps, LumidotVariant };
package/dist/index.d.ts ADDED
@@ -0,0 +1,91 @@
1
+ import React, { CSSProperties } from 'react';
2
+
3
+ type DotIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
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
+ };
43
+ declare const SYNC_PATTERNS: Set<string>;
44
+ declare const WAVE_DIRECTIONS: {
45
+ readonly 'wave-lr': "lr";
46
+ readonly 'wave-rl': "rl";
47
+ readonly 'wave-tb': "tb";
48
+ readonly 'wave-bt': "bt";
49
+ };
50
+ declare const COLORS: {
51
+ readonly amber: "#fcd34d";
52
+ readonly blue: "#93c5fd";
53
+ readonly cyan: "#67e8f9";
54
+ readonly emerald: "#6ee7b7";
55
+ readonly fuchsia: "#f0abfc";
56
+ readonly green: "#86efac";
57
+ readonly indigo: "#a5b4fc";
58
+ readonly lime: "#bef264";
59
+ readonly orange: "#fdba74";
60
+ readonly pink: "#f9a8d4";
61
+ readonly purple: "#d8b4fe";
62
+ readonly red: "#fca5a5";
63
+ readonly rose: "#fda4af";
64
+ readonly sky: "#7dd3fc";
65
+ readonly slate: "#cbd5e1";
66
+ readonly teal: "#5eead4";
67
+ readonly violet: "#c4b5fd";
68
+ readonly white: "#ffffff";
69
+ readonly yellow: "#fde047";
70
+ };
71
+ type LumidotVariant = keyof typeof COLORS;
72
+ type LumidotPattern = keyof typeof PATTERNS;
73
+ type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
74
+ interface LumidotProps {
75
+ variant?: LumidotVariant;
76
+ pattern?: LumidotPattern;
77
+ glow?: number;
78
+ scale?: number;
79
+ duration?: number;
80
+ speed?: number;
81
+ smoothness?: number;
82
+ direction?: LumidotDirection;
83
+ className?: string;
84
+ style?: CSSProperties;
85
+ testId?: string;
86
+ }
87
+
88
+ declare const Lumidot: React.ForwardRefExoticComponent<LumidotProps & React.RefAttributes<HTMLSpanElement>>;
89
+
90
+ export { COLORS, Lumidot, PATTERNS, SYNC_PATTERNS, WAVE_DIRECTIONS };
91
+ export type { LumidotDirection, LumidotPattern, LumidotProps, LumidotVariant };
package/dist/index.mjs ADDED
@@ -0,0 +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"]),l={"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",yellow:"#fde047"},o=Array.from({length:9},(e,t)=>t),s=e.forwardRef(({variant:t="cyan",pattern:s="all",glow:i=8,scale:d=1,duration:u=.7,speed:c=1250,smoothness:f=250,direction:m="ltr",className:h,style:p,testId:b},w)=>{var g,v,y;let S=null!=(g=n[t])?g:n.cyan,$=20*d,E=$/3,I=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,S),M=null!=(v=a[s])?v:a.all,C=M.length>1,L=e.useMemo(()=>M.length<=1?M:"rtl"===m||"btt"===m?[...M].reverse():M,[M,m]),N=e.useMemo(()=>new Set(L.flat()),[L]),T=r.has(s),k=null!=(y=l[s])?y:m,x=Math.round(.15*f),[R,A]=e.useState(0),O=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}(C);e.useEffect(()=>{if(!C||(A(0),L.length<=1||O))return;let e=window.setInterval(()=>A(e=>(e+1)%L.length),c);return()=>window.clearInterval(e)},[L,c,O,C]);let P=e.useMemo(()=>C?O||L.length<=1?N:new Set(L[R%L.length]):new Set(M[0]),[C,M,O,L,R,N]),_=e.useMemo(()=>o.map(e=>{let t=P.has(e);return C?{width:E,height:E,backgroundColor:N.has(e)?S:"transparent",boxShadow:N.has(e)?I:"none",opacity:+!!t,transform:t?"scale(1)":"scale(0.7)",transition:L.length>1&&!O?`opacity ${t?x:f}ms ${t?"ease-out":"ease-in"}, transform ${f}ms ease`:void 0}:{width:E,height:E,backgroundColor:t?S:"transparent",boxShadow:t?I:"none","--lumidot-delay":`${t?T?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,k,u):0}s`,"--lumidot-duration":`${u}s`}}),[P,S,E,u,f,k,x,L.length,I,C,T,N,O]);return e.createElement("span",{ref:w,role:"status","aria-label":"Loading","data-lumidot":"","data-lumidot-pattern":s,"data-lumidot-variant":t,"data-lumidot-direction":m,"data-lumidot-mode":C?"sequence":"wave","data-testid":b,className:h,style:{display:"inline-grid",gridTemplateColumns:"repeat(3, 1fr)",placeItems:"center",width:$,height:$,...p}},o.map(t=>e.createElement("span",{key:t,"data-lumidot-dot":"","data-lumidot-dot-active":P.has(t),style:_[t]})))});s.displayName="Lumidot";export{n as COLORS,s as Lumidot,a as PATTERNS,r as SYNC_PATTERNS,l as WAVE_DIRECTIONS};
2
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../src/types.ts","../src/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\ntype DotIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\ntype DotFrame = readonly DotIndex[];\ntype PatternFrames = readonly DotFrame[];\n\nconst FULL_GRID: DotFrame = [0, 1, 2, 3, 4, 5, 6, 7, 8];\nconst CORNERS: DotFrame = [0, 2, 6, 8];\nconst FRAME_RING: DotFrame = [0, 1, 2, 5, 8, 7, 6, 3];\n\nexport const PATTERNS = {\n // Solo\n 'solo-center': [[4]],\n 'solo-tl': [[0]],\n 'solo-br': [[8]],\n\n // Lines\n 'line-h-top': [[0, 1, 2]],\n 'line-h-mid': [[3, 4, 5]],\n 'line-h-bot': [[6, 7, 8]],\n 'line-v-left': [[0, 3, 6]],\n 'line-v-mid': [[1, 4, 7]],\n 'line-v-right': [[2, 5, 8]],\n 'line-diag-1': [[0, 4, 8]],\n 'line-diag-2': [[2, 4, 6]],\n\n // Corner and cross\n 'corners-only': [[0], [2], [8], [6]],\n 'corners-sync': [CORNERS],\n 'plus-hollow': [[1], [3], [5], [7]],\n\n // Shapes\n 'l-tl': [[0, 3, 6, 7, 8]],\n 'l-tr': [[2, 5, 6, 7, 8]],\n 'l-bl': [[0, 1, 2, 3, 6]],\n 'l-br': [[0, 1, 2, 5, 8]],\n 't-top': [[0, 1, 2, 4, 7]],\n 't-bot': [[1, 4, 6, 7, 8]],\n 't-left': [[0, 1, 3, 6, 7]],\n 't-right': [[1, 2, 5, 7, 8]],\n\n // Duo\n 'duo-h': [[3, 5]],\n 'duo-v': [[1, 7]],\n 'duo-diag': [[0, 8]],\n\n // Frame\n frame: [FRAME_RING],\n 'frame-sync': [[0, 1, 2, 3, 5, 6, 7, 8]],\n\n // Sparse\n 'sparse-1': [[0, 4, 8]],\n 'sparse-2': [[2, 3, 7]],\n 'sparse-3': [[1, 5, 6]],\n\n // Wave\n 'wave-lr': [FULL_GRID],\n 'wave-rl': [FULL_GRID],\n 'wave-tb': [FULL_GRID],\n 'wave-bt': [FULL_GRID],\n\n // Sequence\n spiral: [[0, 1, 2], [2, 5, 8], [8, 7, 6], [6, 3, 0]],\n\n // Fallback/default\n all: [FULL_GRID],\n} as const satisfies Record<string, PatternFrames>;\n\nexport const SYNC_PATTERNS = new Set<string>(['corners-sync', 'frame-sync']);\n\nexport const WAVE_DIRECTIONS = {\n 'wave-lr': 'lr',\n 'wave-rl': 'rl',\n 'wave-tb': 'tb',\n 'wave-bt': 'bt',\n} as const;\n\nexport const COLORS = {\n amber: '#fcd34d',\n blue: '#93c5fd',\n cyan: '#67e8f9',\n emerald: '#6ee7b7',\n fuchsia: '#f0abfc',\n green: '#86efac',\n indigo: '#a5b4fc',\n lime: '#bef264',\n orange: '#fdba74',\n pink: '#f9a8d4',\n purple: '#d8b4fe',\n red: '#fca5a5',\n rose: '#fda4af',\n sky: '#7dd3fc',\n slate: '#cbd5e1',\n teal: '#5eead4',\n violet: '#c4b5fd',\n white: '#ffffff',\n yellow: '#fde047',\n} as const;\n\nexport type LumidotVariant = keyof typeof COLORS;\nexport type LumidotPattern = keyof typeof PATTERNS;\nexport type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';\nexport type LumidotWaveDirection = (typeof WAVE_DIRECTIONS)[keyof typeof WAVE_DIRECTIONS];\n\nexport interface LumidotProps {\n variant?: LumidotVariant;\n pattern?: LumidotPattern;\n glow?: number;\n scale?: number;\n duration?: number;\n speed?: number;\n smoothness?: number;\n direction?: LumidotDirection;\n className?: string;\n style?: CSSProperties;\n testId?: string;\n}\n","'use client';\n\nimport React from 'react';\nimport { COLORS, PATTERNS, SYNC_PATTERNS, WAVE_DIRECTIONS } from './types';\nimport type { LumidotDirection, LumidotPattern, LumidotProps, LumidotWaveDirection } from './types';\n\nexport type { LumidotProps, LumidotVariant, LumidotPattern, LumidotDirection } from './types';\nexport { PATTERNS, COLORS, SYNC_PATTERNS, WAVE_DIRECTIONS } from './types';\n\nconst GRID = 3;\nconst DOT_INDICES = Array.from({ length: 9 }, (_, i) => i);\n\nfunction brighten(hex: string, amount = 0.5): string {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n const lift = (c: number) => Math.round(c + (255 - c) * amount).toString(16).padStart(2, '0');\n return `#${lift(r)}${lift(g)}${lift(b)}`;\n}\n\nfunction glowShadow(glow: number, color: string): string {\n if (glow <= 0) return 'none';\n const bright = brighten(color);\n return `0 0 ${glow * 0.4}px ${color}, 0 0 ${glow}px ${bright}60`;\n}\n\nfunction waveDelay(index: number, direction: LumidotDirection | LumidotWaveDirection, duration: number): number {\n const col = index % GRID;\n const row = Math.floor(index / GRID);\n const step = duration / 5;\n const max = GRID - 1;\n\n switch (direction) {\n case 'ltr':\n return (col + row) * step;\n case 'rtl':\n return (max - col + row) * step;\n case 'ttb':\n return (row + col) * step;\n case 'btt':\n return (max - row + col) * step;\n case 'lr':\n return col * step;\n case 'rl':\n return (max - col) * step;\n case 'tb':\n return row * step;\n case 'bt':\n return (max - row) * step;\n default:\n return (col + row) * step;\n }\n}\n\nfunction orientFrames(\n frames: readonly (readonly number[])[],\n direction: LumidotDirection,\n): readonly (readonly number[])[] {\n if (frames.length <= 1) return frames;\n if (direction === 'rtl' || direction === 'btt') return [...frames].reverse();\n return frames;\n}\n\nfunction useReducedMotion(enabled: boolean): boolean {\n const [reduced, setReduced] = React.useState(false);\n\n React.useEffect(() => {\n if (!enabled) return;\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const handler = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', handler);\n return () => mq.removeEventListener('change', handler);\n }, [enabled]);\n\n return reduced;\n}\n\nconst Lumidot = React.forwardRef<HTMLSpanElement, LumidotProps>(\n (\n {\n variant = 'cyan',\n pattern = 'all',\n glow = 8,\n scale = 1,\n duration = 0.7,\n speed = 1250,\n smoothness = 250,\n direction = 'ltr',\n className,\n style,\n testId,\n },\n ref,\n ) => {\n const color = COLORS[variant] ?? COLORS.cyan;\n const size = 20 * scale;\n const dotSize = size / GRID;\n const shadow = glowShadow(glow, color);\n\n const rawFrames = PATTERNS[pattern] ?? PATTERNS.all;\n const isSequence = rawFrames.length > 1;\n\n const frames = React.useMemo(\n () => orientFrames(rawFrames, direction),\n [rawFrames, direction],\n );\n\n const allDots = React.useMemo(\n () => new Set<number>(frames.flat()),\n [frames],\n );\n\n const isSync = SYNC_PATTERNS.has(pattern);\n const waveDir = (WAVE_DIRECTIONS as Partial<Record<LumidotPattern, LumidotWaveDirection>>)[pattern] ?? direction;\n const fadeIn = Math.round(smoothness * 0.15);\n\n const [frame, setFrame] = React.useState(0);\n const reduced = useReducedMotion(isSequence);\n\n React.useEffect(() => {\n if (!isSequence) return;\n setFrame(0);\n if (frames.length <= 1 || reduced) return;\n const id = window.setInterval(\n () => setFrame((prev) => (prev + 1) % frames.length),\n speed,\n );\n return () => window.clearInterval(id);\n }, [frames, speed, reduced, isSequence]);\n\n const active = React.useMemo(() => {\n if (!isSequence) return new Set<number>(rawFrames[0]);\n if (reduced || frames.length <= 1) return allDots;\n return new Set<number>(frames[frame % frames.length]);\n }, [isSequence, rawFrames, reduced, frames, frame, allDots]);\n\n const dotStyles = React.useMemo(\n () =>\n DOT_INDICES.map((i) => {\n const on = active.has(i);\n\n if (isSequence) {\n return {\n width: dotSize,\n height: dotSize,\n backgroundColor: allDots.has(i) ? color : 'transparent',\n boxShadow: allDots.has(i) ? shadow : 'none',\n opacity: on ? 1 : 0,\n transform: on ? 'scale(1)' : 'scale(0.7)',\n transition:\n frames.length > 1 && !reduced\n ? `opacity ${on ? fadeIn : smoothness}ms ${on ? 'ease-out' : 'ease-in'}, transform ${smoothness}ms ease`\n : undefined,\n };\n }\n\n return {\n width: dotSize,\n height: dotSize,\n backgroundColor: on ? color : 'transparent',\n boxShadow: on ? shadow : 'none',\n '--lumidot-delay': `${on ? (isSync ? 0 : waveDelay(i, waveDir, duration)) : 0}s`,\n '--lumidot-duration': `${duration}s`,\n } as React.CSSProperties;\n }),\n [active, color, dotSize, duration, smoothness, waveDir, fadeIn, frames.length, shadow, isSequence, isSync, allDots, reduced],\n );\n\n return (\n <span\n ref={ref}\n role=\"status\"\n aria-label=\"Loading\"\n data-lumidot=\"\"\n data-lumidot-pattern={pattern}\n data-lumidot-variant={variant}\n data-lumidot-direction={direction}\n data-lumidot-mode={isSequence ? 'sequence' : 'wave'}\n data-testid={testId}\n className={className}\n style={{\n display: 'inline-grid',\n gridTemplateColumns: `repeat(${GRID}, 1fr)`,\n placeItems: 'center',\n width: size,\n height: size,\n ...style,\n }}\n >\n {DOT_INDICES.map((i) => (\n <span\n key={i}\n data-lumidot-dot=\"\"\n data-lumidot-dot-active={active.has(i)}\n style={dotStyles[i]}\n />\n ))}\n </span>\n );\n },\n);\n\nLumidot.displayName = 'Lumidot';\n\nexport { Lumidot };\n"],"names":["FULL_GRID","PATTERNS","frame","spiral","all","SYNC_PATTERNS","Set","WAVE_DIRECTIONS","COLORS","amber","blue","cyan","emerald","fuchsia","green","indigo","lime","orange","pink","purple","red","rose","sky","slate","teal","violet","white","yellow","DOT_INDICES","Array","from","length","_","i","Lumidot","React","forwardRef","variant","pattern","glow","scale","duration","speed","smoothness","direction","className","style","testId","ref","_WAVE_DIRECTIONS_pattern","color","size","dotSize","shadow","glowShadow","bright","brighten","hex","amount","r","parseInt","slice","g","b","lift","c","Math","round","toString","padStart","rawFrames","isSequence","frames","useMemo","reverse","allDots","flat","isSync","has","waveDir","fadeIn","setFrame","useState","reduced","useReducedMotion","enabled","setReduced","useEffect","mq","window","matchMedia","matches","handler","e","addEventListener","removeEventListener","id","setInterval","prev","clearInterval","active","dotStyles","map","on","width","height","backgroundColor","boxShadow","opacity","transform","transition","undefined","waveDelay","index","col","row","floor","step","max","GRID","createElement","span","role","aria-label","data-lumidot","data-lumidot-pattern","data-lumidot-variant","data-lumidot-direction","data-lumidot-mode","data-testid","display","gridTemplateColumns","placeItems","key","data-lumidot-dot","data-lumidot-dot-active","displayName"],"mappings":"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"}
package/dist/styles.css ADDED
@@ -0,0 +1,31 @@
1
+ @keyframes lumidot-wave {
2
+ 0%,
3
+ 100% {
4
+ opacity: 1;
5
+ }
6
+ 50% {
7
+ opacity: 0.22;
8
+ }
9
+ }
10
+
11
+ [data-lumidot-dot] {
12
+ border-radius: 0;
13
+ transform-origin: center;
14
+ will-change: opacity, transform, box-shadow;
15
+ }
16
+
17
+ [data-lumidot-mode='wave'] [data-lumidot-dot-active='true'] {
18
+ animation: lumidot-wave var(--lumidot-duration, 0.7s) ease-in-out infinite;
19
+ animation-delay: var(--lumidot-delay, 0s);
20
+ }
21
+
22
+ @media (prefers-reduced-motion: reduce) {
23
+ [data-lumidot-mode='wave'] [data-lumidot-dot-active='true'] {
24
+ animation: none;
25
+ }
26
+
27
+ [data-lumidot-dot] {
28
+ transition: none !important;
29
+ transform: none !important;
30
+ }
31
+ }
package/package.json ADDED
@@ -0,0 +1,72 @@
1
+ {
2
+ "name": "lumidot",
3
+ "version": "0.1.0",
4
+ "description": "A 3x3 dot-grid loader for React, inspired by the RGB spinner animation",
5
+ "license": "MIT",
6
+ "author": {
7
+ "email": "zainzafar90@gmail.com",
8
+ "name": "Zain Zafar",
9
+ "url": "https://zainzafar.net"
10
+ },
11
+ "type": "module",
12
+ "main": "./dist/index.cjs",
13
+ "module": "./dist/index.mjs",
14
+ "types": "./dist/index.d.ts",
15
+ "exports": {
16
+ ".": {
17
+ "import": {
18
+ "types": "./dist/index.d.mts",
19
+ "default": "./dist/index.mjs"
20
+ },
21
+ "require": {
22
+ "types": "./dist/index.d.ts",
23
+ "default": "./dist/index.cjs"
24
+ }
25
+ },
26
+ "./styles.css": "./dist/styles.css"
27
+ },
28
+ "files": [
29
+ "dist"
30
+ ],
31
+ "sideEffects": [
32
+ "*.css"
33
+ ],
34
+ "peerDependencies": {
35
+ "react": "^18.0.0 || ^19.0.0",
36
+ "react-dom": "^18.0.0 || ^19.0.0"
37
+ },
38
+ "devDependencies": {
39
+ "@playwright/test": "^1.58.2",
40
+ "@types/node": "^25.3.3",
41
+ "@types/react": "^18.3.0",
42
+ "@types/react-dom": "^18.3.0",
43
+ "bunchee": "^6.9.0",
44
+ "prettier": "^3.4.0",
45
+ "react": "^18.3.1",
46
+ "react-dom": "^18.3.1",
47
+ "turbo": "1.6",
48
+ "typescript": "^5.6.0"
49
+ },
50
+ "keywords": [
51
+ "rgb",
52
+ "spinner",
53
+ "loader",
54
+ "loading",
55
+ "rgb",
56
+ "animation",
57
+ "ai"
58
+ ],
59
+ "repository": {
60
+ "type": "git",
61
+ "url": "https://github.com/zainzafar90/lumidot"
62
+ },
63
+ "scripts": {
64
+ "dev": "bunchee --watch",
65
+ "build": "bunchee --minify && cp src/styles.css dist/styles.css",
66
+ "type-check": "tsc --noEmit",
67
+ "dev:website": "turbo run dev --filter=website...",
68
+ "dev:test": "turbo run dev --filter=test...",
69
+ "format": "prettier --write .",
70
+ "test": "playwright test"
71
+ }
72
+ }