├── .editorconfig
├── .github
    └── workflows
    │   └── tests.yml
├── .gitignore
├── biome.json
├── eslint.config.js
├── example
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── .nojekyll
    │   ├── favicon.ico
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── src
    │   ├── App.jsx
    │   ├── background.png
    │   ├── index.css
    │   └── index.jsx
    └── vite.config.js
├── package-lock.json
├── package.json
├── readme.md
├── src
    ├── components
    │   ├── bang.tsx
    │   ├── ezdac.tsx
    │   ├── message.tsx
    │   ├── object.tsx
    │   ├── playbar.tsx
    │   ├── radiogroup.tsx
    │   ├── slider.tsx
    │   ├── textbutton.tsx
    │   ├── toggle.tsx
    │   └── umenu.tsx
    ├── index.ts
    ├── scss
    │   ├── bang.module.scss
    │   ├── ezdac.module.scss
    │   ├── message.module.scss
    │   ├── object.module.scss
    │   ├── playbar.module.scss
    │   ├── radiogroup.module.scss
    │   ├── slider.module.scss
    │   ├── textbutton.module.scss
    │   ├── toggle.module.scss
    │   ├── umenu.module.scss
    │   └── utils.scss
    ├── svg
    │   ├── bang.svg
    │   ├── ezdac.svg
    │   ├── inlet.svg
    │   ├── playbar-pause.svg
    │   ├── playbar-play.svg
    │   ├── playbar-slider.svg
    │   ├── radiogroup-row.svg
    │   ├── toggle.svg
    │   └── umenu-arrow.svg
    └── types.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | charset = utf-8
5 | indent_style = tab
6 | indent_size = 4
7 | insert_final_newline = true
8 | trim_trailing_whitespace = true
9 | 


--------------------------------------------------------------------------------
/.github/workflows/tests.yml:
--------------------------------------------------------------------------------
 1 | name: Tests
 2 | 
 3 | on:
 4 |     push:
 5 |         branches: [master]
 6 |     pull_request:
 7 |         branches: [master]
 8 | 
 9 | jobs:
10 |     all-tests:
11 |         runs-on: ${{ matrix.os }}
12 |         strategy:
13 |             matrix:
14 |                 os: [macos-latest]
15 |                 node: [22.x]
16 | 
17 |         steps:
18 |             - uses: actions/checkout@master
19 |             - uses: actions/setup-node@v4
20 |               with:
21 |                   node-version: ${{ matrix.node }}
22 | 
23 |             - name: Install node modules
24 |               run: npm install --include=dev
25 | 
26 |             - name: Format project
27 |               run: |
28 |                   npx @biomejs/biome format
29 |                   npx prettier --check ./src/scss
30 |                   npx prettier --check ./src/svg
31 | 
32 |             - name: Assert types
33 |               run: npx tsc
34 | 
35 |             - name: Lint project
36 |               run: |
37 |                   npx @biomejs/biome lint
38 |                   npx eslint .
39 |                   npx stylelint **/*.css **/*.scss
40 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # production
 5 | build
 6 | dist
 7 | 
 8 | # misc
 9 | .deno
10 | .DS_Store
11 | .vscode
12 | 
13 | # package specific
14 | unused
15 | todo.md


--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
 3 | 	"files": {
 4 | 		"ignore": ["**/node_modules/**", "**/dist/**", "**/unused/**"],
 5 | 		"include": [
 6 | 			"**/*.css",
 7 | 			"**/*.html",
 8 | 			"**/*.js",
 9 | 			"**/*.json",
10 | 			"**/*.jsx",
11 | 			"**/*.ts",
12 | 			"**/*.d.ts",
13 | 			"**/*.tsx"
14 | 		]
15 | 	},
16 | 	"organizeImports": {
17 | 		"enabled": true
18 | 	},
19 | 	"linter": {
20 | 		"enabled": true,
21 | 		"rules": {
22 | 			"all": true,
23 | 			"a11y": {
24 | 				"noNoninteractiveElementToInteractiveRole": "off",
25 | 				"noSvgWithoutTitle": "off",
26 | 				"useKeyWithClickEvents": "off",
27 | 				"useMediaCaption": "off",
28 | 				"useSemanticElements": "off"
29 | 			},
30 | 			"complexity": {
31 | 				"noExcessiveCognitiveComplexity": "off",
32 | 				"noVoid": "off"
33 | 			},
34 | 			"performance": {
35 | 				"noBarrelFile": "off"
36 | 			},
37 | 			"style": {
38 | 				"noDefaultExport": "off",
39 | 				"noNamespaceImport": "off",
40 | 				"noParameterAssign": "off",
41 | 				"useNamingConvention": "off"
42 | 			},
43 | 			"suspicious": {
44 | 				"noReactSpecificProps": "off"
45 | 			}
46 | 		}
47 | 	},
48 | 	"formatter": {
49 | 		"enabled": true,
50 | 		"lineEnding": "lf",
51 | 		"lineWidth": 125,
52 | 		"indentWidth": 4,
53 | 		"indentStyle": "tab"
54 | 	},
55 | 	"css": {
56 | 		"formatter": {
57 | 			"quoteStyle": "single"
58 | 		}
59 | 	},
60 | 	"javascript": {
61 | 		"formatter": {
62 | 			"arrowParentheses": "always",
63 | 			"bracketSpacing": true,
64 | 			"bracketSameLine": false,
65 | 			"jsxQuoteStyle": "single",
66 | 			"quoteProperties": "asNeeded",
67 | 			"quoteStyle": "single",
68 | 			"semicolons": "asNeeded",
69 | 			"trailingCommas": "all"
70 | 		}
71 | 	},
72 | 	"json": {
73 | 		"formatter": {
74 | 			"lineWidth": 100
75 | 		}
76 | 	}
77 | }
78 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import eslint from '@eslint/js'
 2 | import reactHooks from 'eslint-plugin-react-hooks'
 3 | import globals from 'globals'
 4 | import tseslint from 'typescript-eslint'
 5 | 
 6 | export default tseslint.config(
 7 | 	eslint.configs.recommended,
 8 | 	reactHooks.configs['recommended-latest'],
 9 | 	...tseslint.configs.strictTypeChecked,
10 | 	...tseslint.configs.stylisticTypeChecked,
11 | 	{
12 | 		ignores: ['**/dist/**', '**/unused/**'],
13 | 	},
14 | 	{
15 | 		files: ['**/*.ts', '**/*.tsx'],
16 | 		languageOptions: {
17 | 			ecmaVersion: 'latest',
18 | 			parserOptions: {
19 | 				projectService: true,
20 | 				tsconfigRootDir: import.meta.dirname,
21 | 			},
22 | 		},
23 | 	},
24 | 	{
25 | 		files: ['**/*.js', '**/*.jsx'],
26 | 		languageOptions: {
27 | 			globals: {
28 | 				...globals.browser,
29 | 			},
30 | 		},
31 | 		extends: [tseslint.configs.disableTypeChecked],
32 | 	},
33 | )
34 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>maxmsp-gui</title>
 5 | 		<meta charset="utf-8" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 | 		<meta name="author" content="Lewis Wolstanholme" />
 8 | 		<meta name="description" content="React component library for stylised Max MSP GUI" />
 9 | 		<meta name="keywords" content="Lewis Wolstanholme Music Art Creative Code React Max MSP" />
10 | 		<meta name="theme-color" content="#333333" />
11 | 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
12 | 		<link rel="apple-touch-icon" href="/logo192.png" />
13 | 		<link rel="icon" href="/favicon.ico" />
14 | 		<link rel="manifest" href="/manifest.json" />
15 | 	</head>
16 | 	<body>
17 | 		<noscript>You need to enable JavaScript to run this app.</noscript>
18 | 		<main id="root"></main>
19 | 		<script type="module" src="/src/index.jsx"></script>
20 | 	</body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/example/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"name": "maxmsp-gui-example",
  3 | 	"version": "0.0.0",
  4 | 	"lockfileVersion": 3,
  5 | 	"requires": true,
  6 | 	"packages": {
  7 | 		"": {
  8 | 			"name": "maxmsp-gui-example",
  9 | 			"version": "0.0.0",
 10 | 			"dependencies": {
 11 | 				"@vitejs/plugin-react-swc": "file:../node_modules/@vitejs/plugin-react-swc",
 12 | 				"maxmsp-gui": "file:..",
 13 | 				"react": "file:../node_modules/react",
 14 | 				"react-dom": "file:../node_modules/react-dom",
 15 | 				"vite": "file:../node_modules/vite",
 16 | 				"vite-plugin-compression2": "file:../node_modules/vite-plugin-compression2"
 17 | 			}
 18 | 		},
 19 | 		"..": {
 20 | 			"version": "2.5.2",
 21 | 			"license": "Creative Commons SA",
 22 | 			"devDependencies": {
 23 | 				"@biomejs/biome": "^1.9.4",
 24 | 				"@eslint/js": "^9.25.1",
 25 | 				"@prettier/plugin-xml": "^3.4.1",
 26 | 				"@types/node": "^22.14.1",
 27 | 				"@types/react": "^19.1.2",
 28 | 				"@types/react-dom": "^19.1.2",
 29 | 				"@vitejs/plugin-react-swc": "^3.9.0",
 30 | 				"eslint": "^9.25.1",
 31 | 				"eslint-plugin-react-hooks": "^5.2.0",
 32 | 				"gh-pages": "^6.3.0",
 33 | 				"globals": "^16.0.0",
 34 | 				"prettier": "^3.5.3",
 35 | 				"sass": "^1.87.0",
 36 | 				"stylelint": "^16.18.0",
 37 | 				"stylelint-config-standard-scss": "^14.0.0",
 38 | 				"typescript": "^5.8.3",
 39 | 				"typescript-eslint": "^8.31.0",
 40 | 				"vite": "^6.3.2",
 41 | 				"vite-plugin-compression2": "^1.3.3",
 42 | 				"vite-plugin-css-injected-by-js": "^3.5.2",
 43 | 				"vite-plugin-dts": "^4.5.3",
 44 | 				"vite-plugin-svgr": "^4.3.0"
 45 | 			},
 46 | 			"engines": {
 47 | 				"node": ">=10"
 48 | 			},
 49 | 			"peerDependencies": {
 50 | 				"react": "^19.1.0",
 51 | 				"react-dom": "^19.1.0"
 52 | 			}
 53 | 		},
 54 | 		"../node_modules/@vitejs/plugin-react-swc": {
 55 | 			"version": "3.9.0",
 56 | 			"license": "MIT",
 57 | 			"dependencies": {
 58 | 				"@swc/core": "^1.11.21"
 59 | 			},
 60 | 			"peerDependencies": {
 61 | 				"vite": "^4 || ^5 || ^6"
 62 | 			}
 63 | 		},
 64 | 		"../node_modules/react": {
 65 | 			"version": "19.1.0",
 66 | 			"license": "MIT",
 67 | 			"engines": {
 68 | 				"node": ">=0.10.0"
 69 | 			}
 70 | 		},
 71 | 		"../node_modules/react-dom": {
 72 | 			"version": "19.1.0",
 73 | 			"license": "MIT",
 74 | 			"dependencies": {
 75 | 				"scheduler": "^0.26.0"
 76 | 			},
 77 | 			"peerDependencies": {
 78 | 				"react": "^19.1.0"
 79 | 			}
 80 | 		},
 81 | 		"../node_modules/vite": {
 82 | 			"version": "6.3.2",
 83 | 			"license": "MIT",
 84 | 			"dependencies": {
 85 | 				"esbuild": "^0.25.0",
 86 | 				"fdir": "^6.4.3",
 87 | 				"picomatch": "^4.0.2",
 88 | 				"postcss": "^8.5.3",
 89 | 				"rollup": "^4.34.9",
 90 | 				"tinyglobby": "^0.2.12"
 91 | 			},
 92 | 			"bin": {
 93 | 				"vite": "bin/vite.js"
 94 | 			},
 95 | 			"engines": {
 96 | 				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
 97 | 			},
 98 | 			"funding": {
 99 | 				"url": "https://github.com/vitejs/vite?sponsor=1"
100 | 			},
101 | 			"optionalDependencies": {
102 | 				"fsevents": "~2.3.3"
103 | 			},
104 | 			"peerDependencies": {
105 | 				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
106 | 				"jiti": ">=1.21.0",
107 | 				"less": "*",
108 | 				"lightningcss": "^1.21.0",
109 | 				"sass": "*",
110 | 				"sass-embedded": "*",
111 | 				"stylus": "*",
112 | 				"sugarss": "*",
113 | 				"terser": "^5.16.0",
114 | 				"tsx": "^4.8.1",
115 | 				"yaml": "^2.4.2"
116 | 			},
117 | 			"peerDependenciesMeta": {
118 | 				"@types/node": {
119 | 					"optional": true
120 | 				},
121 | 				"jiti": {
122 | 					"optional": true
123 | 				},
124 | 				"less": {
125 | 					"optional": true
126 | 				},
127 | 				"lightningcss": {
128 | 					"optional": true
129 | 				},
130 | 				"sass": {
131 | 					"optional": true
132 | 				},
133 | 				"sass-embedded": {
134 | 					"optional": true
135 | 				},
136 | 				"stylus": {
137 | 					"optional": true
138 | 				},
139 | 				"sugarss": {
140 | 					"optional": true
141 | 				},
142 | 				"terser": {
143 | 					"optional": true
144 | 				},
145 | 				"tsx": {
146 | 					"optional": true
147 | 				},
148 | 				"yaml": {
149 | 					"optional": true
150 | 				}
151 | 			}
152 | 		},
153 | 		"../node_modules/vite-plugin-compression2": {
154 | 			"version": "1.3.3",
155 | 			"license": "MIT",
156 | 			"dependencies": {
157 | 				"@rollup/pluginutils": "^5.1.0",
158 | 				"tar-mini": "^0.2.0"
159 | 			},
160 | 			"peerDependencies": {
161 | 				"vite": "^2.0.0||^3.0.0||^4.0.0||^5.0.0 ||^6.0.0"
162 | 			}
163 | 		},
164 | 		"node_modules/@vitejs/plugin-react-swc": {
165 | 			"resolved": "../node_modules/@vitejs/plugin-react-swc",
166 | 			"link": true
167 | 		},
168 | 		"node_modules/maxmsp-gui": {
169 | 			"resolved": "..",
170 | 			"link": true
171 | 		},
172 | 		"node_modules/react": {
173 | 			"resolved": "../node_modules/react",
174 | 			"link": true
175 | 		},
176 | 		"node_modules/react-dom": {
177 | 			"resolved": "../node_modules/react-dom",
178 | 			"link": true
179 | 		},
180 | 		"node_modules/vite": {
181 | 			"resolved": "../node_modules/vite",
182 | 			"link": true
183 | 		},
184 | 		"node_modules/vite-plugin-compression2": {
185 | 			"resolved": "../node_modules/vite-plugin-compression2",
186 | 			"link": true
187 | 		}
188 | 	}
189 | }
190 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "maxmsp-gui-example",
 3 | 	"homepage": ".",
 4 | 	"version": "0.0.0",
 5 | 	"private": true,
 6 | 	"type": "module",
 7 | 	"scripts": {
 8 | 		"dev": "vite --host --base /",
 9 | 		"build": "vite build",
10 | 		"preview": "vite preview"
11 | 	},
12 | 	"dependencies": {
13 | 		"@vitejs/plugin-react-swc": "file:../node_modules/@vitejs/plugin-react-swc",
14 | 		"maxmsp-gui": "file:..",
15 | 		"react": "file:../node_modules/react",
16 | 		"react-dom": "file:../node_modules/react-dom",
17 | 		"vite": "file:../node_modules/vite",
18 | 		"vite-plugin-compression2": "file:../node_modules/vite-plugin-compression2"
19 | 	}
20 | }
21 | 


--------------------------------------------------------------------------------
/example/public/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lewiswolf/maxmsp-gui/245b3aebe68983a9db0511d54e7202210bfc3862/example/public/.nojekyll


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lewiswolf/maxmsp-gui/245b3aebe68983a9db0511d54e7202210bfc3862/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lewiswolf/maxmsp-gui/245b3aebe68983a9db0511d54e7202210bfc3862/example/public/logo192.png


--------------------------------------------------------------------------------
/example/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lewiswolf/maxmsp-gui/245b3aebe68983a9db0511d54e7202210bfc3862/example/public/logo512.png


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"background_color": "#e5e5e5",
 3 | 	"description": "React component library for stylised Max MSP GUI",
 4 | 	"developer": {
 5 | 		"name": "Lewis Wolstanholme",
 6 | 		"url": "http://lewiswolstanholme.co.uk"
 7 | 	},
 8 | 	"display": "standalone",
 9 | 	"icons": [
10 | 		{
11 | 			"sizes": "64x64 32x32 24x24 16x16",
12 | 			"src": "favicon.ico",
13 | 			"type": "image/x-icon"
14 | 		},
15 | 		{
16 | 			"sizes": "192x192",
17 | 			"src": "logo192.png",
18 | 			"type": "image/png"
19 | 		},
20 | 		{
21 | 			"sizes": "512x512",
22 | 			"src": "logo512.png",
23 | 			"type": "image/png"
24 | 		}
25 | 	],
26 | 	"name": "maxmsp-gui",
27 | 	"short_name": "maxmsp-gui",
28 | 	"start_url": ".",
29 | 	"theme_color": "#333333"
30 | }
31 | 


--------------------------------------------------------------------------------
/example/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *


--------------------------------------------------------------------------------
/example/src/App.jsx:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import { useEffect, useRef, useState } from 'react'
 3 | import * as MaxMSP from 'maxmsp-gui'
 4 | 
 5 | export default function App() {
 6 | 	// handle iframe styles
 7 | 	const iframe = window !== window.top
 8 | 
 9 | 	// example playbar animation
10 | 	const [playbar, setPlaybar] = useState(0)
11 | 	const [playing, setPlaying] = useState(false)
12 | 	const interval = useRef(null)
13 | 	useEffect(() => {
14 | 		if (playing) {
15 | 			interval.current = window.setInterval(() => {
16 | 				if (playbar <= 0.995) {
17 | 					setPlaybar(playbar + 0.005)
18 | 				} else {
19 | 					setPlaybar(0)
20 | 					setPlaying(false)
21 | 					return () => {
22 | 						window.clearInterval(interval.current)
23 | 					}
24 | 				}
25 | 			}, 10)
26 | 		}
27 | 		return () => {
28 | 			window.clearInterval(interval.current)
29 | 		}
30 | 	}, [playing, playbar])
31 | 
32 | 	// render page
33 | 	return (
34 | 		<>
35 | 			{!iframe && <h2>React component library for stylised Max MSP GUI</h2>}
36 | 			<MaxMSP.Bang />
37 | 			<MaxMSP.Ezdac />
38 | 			<MaxMSP.Message text='text' />
39 | 			<MaxMSP.Object text='text' />
40 | 			<MaxMSP.Playbar
41 | 				setPlaying={playing}
42 | 				setValue={playbar}
43 | 				onChange={(x) => {
44 | 					setPlaybar(x)
45 | 				}}
46 | 				onPlay={(bool) => {
47 | 					setPlaying(bool)
48 | 				}}
49 | 			/>
50 | 			<MaxMSP.RadioGroup />
51 | 			<MaxMSP.Slider />
52 | 			<div className='textbuttons'>
53 | 				<MaxMSP.TextButton mode={false} />
54 | 				<MaxMSP.TextButton mode={true} />
55 | 			</div>
56 | 			<MaxMSP.Toggle />
57 | 			<MaxMSP.Umenu items={['foo', 'bar']} />
58 | 		</>
59 | 	)
60 | }
61 | 


--------------------------------------------------------------------------------
/example/src/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lewiswolf/maxmsp-gui/245b3aebe68983a9db0511d54e7202210bfc3862/example/src/background.png


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | html {
 2 | 	margin: 0;
 3 | 	padding: 0;
 4 | 	font-family: Arial, sans-serif;
 5 | 	background: transparent;
 6 | }
 7 | 
 8 | body {
 9 | 	margin: 0;
10 | 	padding: 0;
11 | 	background-image: url('./background.png');
12 | 	background-size: 30px 30px;
13 | 	background-color: #e5e5e5;
14 | }
15 | 
16 | main {
17 | 	display: grid;
18 | 	grid-auto-rows: minmax(70px, max-content);
19 | 	place-items: center;
20 | 	padding-bottom: 48px;
21 | }
22 | 
23 | h2 {
24 | 	font-family: inherit;
25 | 	user-select: none;
26 | 	padding: 0 5px;
27 | 	text-align: center;
28 | }
29 | 


--------------------------------------------------------------------------------
/example/src/index.jsx:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import { StrictMode } from 'react'
 3 | import { createRoot } from 'react-dom/client'
 4 | // src
 5 | import App from './App.jsx'
 6 | import './index.css'
 7 | 
 8 | createRoot(document.getElementById('root')).render(
 9 | 	<StrictMode>
10 | 		<App />
11 | 	</StrictMode>,
12 | )
13 | 


--------------------------------------------------------------------------------
/example/vite.config.js:
--------------------------------------------------------------------------------
 1 | import react from '@vitejs/plugin-react-swc'
 2 | import { defineConfig } from 'vite'
 3 | import { compression } from 'vite-plugin-compression2'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 | 	base: '/maxmsp-gui',
 8 | 	build: { target: 'ESNext' },
 9 | 	esbuild: { legalComments: 'none' },
10 | 	plugins: [
11 | 		compression({
12 | 			algorithm: 'gzip',
13 | 			include: /\.(js|mjs|json|css|svg)$/i,
14 | 		}),
15 | 		react(),
16 | 	],
17 | })
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "maxmsp-gui",
 3 | 	"version": "2.5.2",
 4 | 	"description": "React component library for stylised Max MSP GUI.",
 5 | 	"author": "Lewis Wolstanholme",
 6 | 	"license": "Creative Commons SA",
 7 | 	"repository": {
 8 | 		"type": "git",
 9 | 		"url": "git+https://github.com/lewiswolf/maxmsp-gui.git"
10 | 	},
11 | 	"main": "dist/index.js",
12 | 	"source": "src/index.ts",
13 | 	"types": "dist/index.d.ts",
14 | 	"type": "module",
15 | 	"engines": {
16 | 		"node": ">=10"
17 | 	},
18 | 	"keywords": ["cycling74", "max msp", "maxmsp"],
19 | 	"peerDependencies": {
20 | 		"react": "^19.1.0",
21 | 		"react-dom": "^19.1.0"
22 | 	},
23 | 	"devDependencies": {
24 | 		"@biomejs/biome": "^1.9.4",
25 | 		"@eslint/js": "^9.25.1",
26 | 		"@prettier/plugin-xml": "^3.4.1",
27 | 		"@types/node": "^22.14.1",
28 | 		"@types/react": "^19.1.2",
29 | 		"@types/react-dom": "^19.1.2",
30 | 		"@vitejs/plugin-react-swc": "^3.9.0",
31 | 		"eslint": "^9.25.1",
32 | 		"eslint-plugin-react-hooks": "^5.2.0",
33 | 		"gh-pages": "^6.3.0",
34 | 		"globals": "^16.0.0",
35 | 		"prettier": "^3.5.3",
36 | 		"sass": "^1.87.0",
37 | 		"stylelint": "^16.18.0",
38 | 		"stylelint-config-standard-scss": "^14.0.0",
39 | 		"typescript": "^5.8.3",
40 | 		"typescript-eslint": "^8.31.0",
41 | 		"vite": "^6.3.2",
42 | 		"vite-plugin-compression2": "^1.3.3",
43 | 		"vite-plugin-css-injected-by-js": "^3.5.2",
44 | 		"vite-plugin-dts": "^4.5.3",
45 | 		"vite-plugin-svgr": "^4.3.0"
46 | 	},
47 | 	"files": ["dist"],
48 | 	"scripts": {
49 | 		"build": "tsc && vite build",
50 | 		"dev": "vite build --watch",
51 | 		"predeploy": "npm run build && cd example && npm run build",
52 | 		"deploy": "gh-pages -d example/dist",
53 | 		"example": "cd example && npm run dev",
54 | 		"format": "biome format --write && prettier --write ./**/*.html ./**/*.md ./**/*.scss ./**/*.svg",
55 | 		"test": "tsc && biome lint && eslint . && stylelint **/*.css **/*.scss"
56 | 	},
57 | 	"prettier": {
58 | 		"arrowParens": "always",
59 | 		"bracketSpacing": true,
60 | 		"bracketSameLine": false,
61 | 		"endOfLine": "lf",
62 | 		"htmlWhitespaceSensitivity": "strict",
63 | 		"jsxSingleQuote": true,
64 | 		"plugins": ["@prettier/plugin-xml"],
65 | 		"printWidth": 125,
66 | 		"quoteProps": "as-needed",
67 | 		"semi": false,
68 | 		"singleQuote": true,
69 | 		"tabWidth": 4,
70 | 		"trailingComma": "all",
71 | 		"useTabs": true,
72 | 		"xmlQuoteAttributes": "single",
73 | 		"xmlSortAttributesByKey": true,
74 | 		"xmlWhitespaceSensitivity": "preserve"
75 | 	},
76 | 	"stylelint": {
77 | 		"extends": "stylelint-config-standard-scss",
78 | 		"ignoreFiles": ["**/dist/**"],
79 | 		"rules": {
80 | 			"declaration-empty-line-before": null,
81 | 			"no-descending-specificity": null,
82 | 			"property-no-vendor-prefix": null,
83 | 			"scss/double-slash-comment-empty-line-before": null
84 | 		}
85 | 	}
86 | }
87 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # maxmsp-gui
  2 | 
  3 | ## by Lewis Wolf
  4 | 
  5 | > React component library for stylised Max MSP GUI.
  6 | 
  7 | [![NPM](https://img.shields.io/npm/v/maxmsp-gui.svg)](https://www.npmjs.com/package/maxmsp-gui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
  8 | 
  9 | ### [Demo](https://lewiswolf.github.io/maxmsp-gui/)
 10 | 
 11 | ## Install
 12 | 
 13 | ```bash
 14 | npm i maxmsp-gui
 15 | ```
 16 | 
 17 | ## Usage
 18 | 
 19 | ```tsx
 20 | import * as MaxMSP from 'maxmsp-gui'
 21 | 
 22 | export default function App() {
 23 | 	return (
 24 | 		<>
 25 | 			<MaxMSP.Bang
 26 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 27 | 				ariaPressed={true || false} // default null
 28 | 				onClick={() => console.log('bang')}
 29 | 			/>
 30 | 
 31 | 			<MaxMSP.Ezdac
 32 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 33 | 				setValue={true || false} // set the current state
 34 | 				onClick={(b: boolean) => console.log(b)}
 35 | 			/>
 36 | 
 37 | 			<MaxMSP.Message
 38 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 39 | 				ariaPressed={true || false} // default null
 40 | 				text='What does the message say?'
 41 | 				onClick={() => console.log('bang')}
 42 | 			/>
 43 | 
 44 | 			<MaxMSP.Object
 45 | 				inactive={true || false} // default false
 46 | 				text='What is the object called?'
 47 | 			/>
 48 | 
 49 | 			<MaxMSP.Playbar
 50 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 51 | 				inactive={true || false} // disable user interaction, default false
 52 | 				setPlaying={true || false} // set onPlay externally
 53 | 				setValue={0} // initial/updated state, 0 to props.fidelity
 54 | 				width={200} // width of the slider in pixels
 55 | 				onPlay={(b: boolean) => console.log(b)}
 56 | 				onChange={(x: number) => console.log(`My value is ${x}`)} // 0 - props.fidelity
 57 | 			/>
 58 | 
 59 | 			<MaxMSP.RadioGroup
 60 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 61 | 				items={['array', 'of', 'items']} // this sets the amount of radiobuttons, strings create text alongside each button
 62 | 				spacing={24} // the height of each button in pixels
 63 | 				setValue={0} // props.items[i]
 64 | 				onClick={(i: number) => console.log(`My index is ${i}`)}
 65 | 			/>
 66 | 
 67 | 			<MaxMSP.Slider
 68 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 69 | 				setValue={0} // initial/updated state, 0 to props.fidelity
 70 | 				width={200} // width of the slider in pixels
 71 | 				onChange={(x: number) => console.log(`My value is ${x}`)} // 0 - props.fidelity
 72 | 			/>
 73 | 
 74 | 			<MaxMSP.TextButton
 75 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 76 | 				ariaPressed={true || false} // default null, for button mode only
 77 | 				inactive={true || false} // disable user interaction, default false
 78 | 				mode={true || false} // true for toggle, false for bang, default false
 79 | 				setValue={true || false} // default false, for toggle mode only
 80 | 				text='What does the textbutton say?'
 81 | 				toggleText='What does the toggled textbutton say?'
 82 | 				onChange={(b: boolean) => console.log(b)} // toggle mode only
 83 | 				onClick={() => console.log('bang')}
 84 | 			/>
 85 | 
 86 | 			<MaxMSP.Toggle
 87 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 88 | 				setValue={true || false} // set the current state
 89 | 				onClick={(b: boolean) => console.log(b)}
 90 | 			/>
 91 | 
 92 | 			<MaxMSP.Umenu
 93 | 				ariaLabel='Set the aria-label tag.' // defaults to the object name
 94 | 				items={['array', 'of', 'items']}
 95 | 				setValue={0} // props.items[i]
 96 | 				width={100} // width of the umenu in pixels
 97 | 				onChange={(i: number) => console.log(`My index is ${i}`)}
 98 | 			/>
 99 | 		</>
100 | 	)
101 | }
102 | ```
103 | 
104 | All components return a div, and so the css can be accessed/overwritten in the following way:
105 | 
106 | ```css
107 | .wrapper div:nth-of-type(n) {
108 |     // css goes here
109 | }
110 | ```
111 | 
112 | ## Development
113 | 
114 | ### Install
115 | 
116 | ```bash
117 | git clone ...
118 | npm install --include=dev
119 | ```
120 | 
121 | ### Run
122 | 
123 | ```bash
124 | npm run build
125 | npm run example
126 | ```
127 | 
128 | ### Test
129 | 
130 | ```bash
131 | npm run dev
132 | npm run format
133 | npm run test
134 | ```
135 | 


--------------------------------------------------------------------------------
/src/components/bang.tsx:
--------------------------------------------------------------------------------
  1 | // dependencies
  2 | import { type FC, useEffect, useRef, useState } from 'react'
  3 | 
  4 | // src
  5 | import style from '../scss/bang.module.scss'
  6 | import SVG from '../svg/bang.svg?react'
  7 | 
  8 | const Bang: FC<{
  9 | 	ariaLabel?: string
 10 | 	ariaPressed?: boolean | null
 11 | 	onClick?: () => void
 12 | }> = ({
 13 | 	ariaLabel = 'bang',
 14 | 	ariaPressed = null,
 15 | 	onClick = () => {
 16 | 		/* */
 17 | 	},
 18 | }) => {
 19 | 	/*
 20 | 		[bang]
 21 | 	*/
 22 | 
 23 | 	const self = useRef<HTMLDivElement>(null)
 24 | 	// click event with prop
 25 | 	const buttonPressed = (): void => {
 26 | 		isMouseDown(true)
 27 | 		onClick()
 28 | 	}
 29 | 	// mousedown state
 30 | 	const [mousedown, isMouseDown] = useState<boolean>(false)
 31 | 	// this useEffect adds a global mouse up to allow for press and hover,
 32 | 	// and a touchstart event used to prevent event bubbling.
 33 | 	useEffect(() => {
 34 | 		const buttonFreed = (): void => {
 35 | 			isMouseDown(false)
 36 | 		}
 37 | 		const touchstart = (e: TouchEvent): void => {
 38 | 			if (e.cancelable) {
 39 | 				e.preventDefault()
 40 | 				isMouseDown(true)
 41 | 				onClick()
 42 | 			}
 43 | 		}
 44 | 		if (self.current) {
 45 | 			window.addEventListener('mouseup', buttonFreed)
 46 | 			self.current.addEventListener('touchstart', touchstart)
 47 | 		}
 48 | 		const cleanup_self = self.current
 49 | 		return () => {
 50 | 			if (cleanup_self) {
 51 | 				cleanup_self.removeEventListener('touchstart', touchstart)
 52 | 				window.removeEventListener('mouseup', buttonFreed)
 53 | 			}
 54 | 		}
 55 | 	}, [onClick])
 56 | 
 57 | 	return (
 58 | 		<div
 59 | 			aria-label={ariaLabel}
 60 | 			{...(ariaPressed !== null && {
 61 | 				'aria-pressed': ariaPressed,
 62 | 			})}
 63 | 			className={style.bang}
 64 | 			ref={self}
 65 | 			role='button'
 66 | 			tabIndex={0}
 67 | 			onKeyDown={(e) => {
 68 | 				if (e.key === 'Enter' || e.key === ' ') {
 69 | 					e.preventDefault()
 70 | 					if (!mousedown) {
 71 | 						buttonPressed()
 72 | 					}
 73 | 				}
 74 | 			}}
 75 | 			onKeyUp={(e) => {
 76 | 				if ((e.key === 'Enter' || e.key === ' ') && mousedown) {
 77 | 					e.preventDefault()
 78 | 					isMouseDown(false)
 79 | 				}
 80 | 			}}
 81 | 			onMouseDown={(e) => {
 82 | 				if (e.button === 0) {
 83 | 					buttonPressed()
 84 | 				}
 85 | 			}}
 86 | 			onTouchCancel={() => {
 87 | 				isMouseDown(false)
 88 | 			}}
 89 | 			onTouchEnd={() => {
 90 | 				isMouseDown(false)
 91 | 			}}
 92 | 		>
 93 | 			<SVG
 94 | 				style={{
 95 | 					background: mousedown ? 'radial-gradient(10px circle at center, #cee5e8 50%, #333333 50%)' : '#333333',
 96 | 				}}
 97 | 				tabIndex={-1}
 98 | 			/>
 99 | 		</div>
100 | 	)
101 | }
102 | 
103 | export default Bang
104 | 


--------------------------------------------------------------------------------
/src/components/ezdac.tsx:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import { type FC, useEffect, useRef, useState } from 'react'
 3 | 
 4 | // src
 5 | import style from '../scss/ezdac.module.scss'
 6 | import SVG from '../svg/ezdac.svg?react'
 7 | 
 8 | const Ezdac: FC<{
 9 | 	ariaLabel?: string
10 | 	setValue?: boolean
11 | 	onClick?: (b: boolean) => void
12 | }> = ({
13 | 	ariaLabel = 'ezdac',
14 | 	setValue = false,
15 | 	onClick = () => {
16 | 		/**/
17 | 	},
18 | }) => {
19 | 	/*
20 | 		[ezdac]
21 | 	*/
22 | 
23 | 	const self = useRef<HTMLDivElement>(null)
24 | 	// is the toggle pressed - state and prop
25 | 	const [pressed, isPressed] = useState<boolean>(setValue)
26 | 	useEffect(() => {
27 | 		isPressed(setValue)
28 | 	}, [setValue])
29 | 	// click event with prop
30 | 	const togglePressed = (): void => {
31 | 		isPressed(!pressed)
32 | 		onClick(pressed)
33 | 	}
34 | 	// keyboard event specific watch state
35 | 	const [keydown, isKeyDown] = useState<boolean>(false)
36 | 	// this useEffect adds a touch event listener used to prevent bubbling.
37 | 	useEffect(() => {
38 | 		const touchstart = (e: TouchEvent): void => {
39 | 			if (e.cancelable) {
40 | 				e.preventDefault()
41 | 				togglePressed()
42 | 			}
43 | 		}
44 | 		self.current?.addEventListener('touchstart', touchstart)
45 | 		const cleanup_self = self.current
46 | 		return () => {
47 | 			cleanup_self?.removeEventListener('touchstart', touchstart)
48 | 		}
49 | 	})
50 | 
51 | 	return (
52 | 		<div
53 | 			aria-checked={pressed}
54 | 			aria-label={ariaLabel}
55 | 			className={style.ezdac}
56 | 			ref={self}
57 | 			role='switch'
58 | 			tabIndex={0}
59 | 			onKeyDown={(e) => {
60 | 				if (e.key === 'Enter' || e.key === ' ') {
61 | 					e.preventDefault()
62 | 					if (!keydown) {
63 | 						isKeyDown(true)
64 | 						togglePressed()
65 | 					}
66 | 				}
67 | 			}}
68 | 			onKeyUp={(e) => {
69 | 				if ((e.key === 'Enter' || e.key === ' ') && keydown) {
70 | 					e.preventDefault()
71 | 					isKeyDown(false)
72 | 				}
73 | 			}}
74 | 			onMouseDown={(e) => {
75 | 				if (e.button === 0) {
76 | 					togglePressed()
77 | 				}
78 | 			}}
79 | 		>
80 | 			<SVG
81 | 				style={{
82 | 					background: pressed ? 'radial-gradient(40px circle at center,#cee5e8 50%,#333333 50%)' : '#595959',
83 | 				}}
84 | 				tabIndex={-1}
85 | 			/>
86 | 		</div>
87 | 	)
88 | }
89 | 
90 | export default Ezdac
91 | 


--------------------------------------------------------------------------------
/src/components/message.tsx:
--------------------------------------------------------------------------------
  1 | // dependencies
  2 | import { type FC, useEffect, useRef, useState } from 'react'
  3 | 
  4 | // src
  5 | import style from '../scss/message.module.scss'
  6 | 
  7 | const Message: FC<{
  8 | 	ariaLabel?: string
  9 | 	ariaPressed?: boolean | null
 10 | 	text?: string
 11 | 	onClick?: () => void
 12 | }> = ({
 13 | 	ariaLabel = 'message',
 14 | 	ariaPressed = null,
 15 | 	text = '',
 16 | 	onClick = () => {
 17 | 		/**/
 18 | 	},
 19 | }) => {
 20 | 	/*
 21 | 		[message]
 22 | 	*/
 23 | 
 24 | 	const self = useRef<HTMLDivElement>(null)
 25 | 	// click event with prop
 26 | 	const buttonPressed = (): void => {
 27 | 		isMouseDown(true)
 28 | 		onClick()
 29 | 	}
 30 | 	// mousedown state
 31 | 	const [mousedown, isMouseDown] = useState<boolean>(false)
 32 | 	// this useEffect adds a global mouse up to allow for press and hover,
 33 | 	// and a touchstart event used to prevent event bubbling.
 34 | 	useEffect(() => {
 35 | 		const buttonFreed = (): void => {
 36 | 			isMouseDown(false)
 37 | 		}
 38 | 		const touchstart = (e: TouchEvent): void => {
 39 | 			if (e.cancelable) {
 40 | 				e.preventDefault()
 41 | 				isMouseDown(true)
 42 | 				onClick()
 43 | 			}
 44 | 		}
 45 | 		if (self.current) {
 46 | 			window.addEventListener('mouseup', buttonFreed)
 47 | 			self.current.addEventListener('touchstart', touchstart)
 48 | 		}
 49 | 		const cleanup_self = self.current
 50 | 		return () => {
 51 | 			if (cleanup_self) {
 52 | 				cleanup_self.removeEventListener('touchstart', touchstart)
 53 | 				window.removeEventListener('mouseup', buttonFreed)
 54 | 			}
 55 | 		}
 56 | 	}, [onClick])
 57 | 
 58 | 	return (
 59 | 		<div
 60 | 			aria-label={ariaLabel}
 61 | 			{...(ariaPressed !== null && {
 62 | 				'aria-pressed': ariaPressed,
 63 | 			})}
 64 | 			className={style.message}
 65 | 			ref={self}
 66 | 			role='button'
 67 | 			tabIndex={0}
 68 | 			onKeyDown={(e) => {
 69 | 				if (e.key === 'Enter' || e.key === ' ') {
 70 | 					e.preventDefault()
 71 | 					if (!mousedown) {
 72 | 						buttonPressed()
 73 | 					}
 74 | 				}
 75 | 			}}
 76 | 			onKeyUp={(e) => {
 77 | 				if ((e.key === 'Enter' || e.key === ' ') && mousedown) {
 78 | 					e.preventDefault()
 79 | 					isMouseDown(false)
 80 | 				}
 81 | 			}}
 82 | 			onMouseDown={(e) => {
 83 | 				if (e.button === 0) {
 84 | 					buttonPressed()
 85 | 				}
 86 | 			}}
 87 | 			onTouchCancel={() => {
 88 | 				isMouseDown(false)
 89 | 			}}
 90 | 			onTouchEnd={() => {
 91 | 				isMouseDown(false)
 92 | 			}}
 93 | 		>
 94 | 			<p
 95 | 				style={{
 96 | 					padding: mousedown ? '6px 4px 4px 6px' : '5px 5px',
 97 | 				}}
 98 | 				tabIndex={-1}
 99 | 			>
100 | 				{text}
101 | 			</p>
102 | 		</div>
103 | 	)
104 | }
105 | 
106 | export default Message
107 | 


--------------------------------------------------------------------------------
/src/components/object.tsx:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import type { FC } from 'react'
 3 | 
 4 | // src
 5 | import SVG from '../svg/inlet.svg?react'
 6 | import style from '../scss/object.module.scss'
 7 | 
 8 | const object: FC<{
 9 | 	inactive?: boolean
10 | 	text?: string
11 | }> = ({ inactive = false, text = '' }) => {
12 | 	/* 
13 | 		[]
14 | 	*/
15 | 
16 | 	return (
17 | 		<div className={style.object} style={{ background: inactive ? '#b49d7c' : '#808080' }}>
18 | 			{!inactive && text && <SVG />}
19 | 			<p style={{ background: inactive ? '#977e6d' : '#333333' }}>{text}</p>
20 | 		</div>
21 | 	)
22 | }
23 | 
24 | export default object
25 | 


--------------------------------------------------------------------------------
/src/components/playbar.tsx:
--------------------------------------------------------------------------------
  1 | // dependencies
  2 | import { type FC, type JSX, createElement, useEffect, useRef, useState } from 'react'
  3 | 
  4 | // src
  5 | import style from '../scss/playbar.module.scss'
  6 | import PauseButtonSVG from '../svg/playbar-pause.svg?react'
  7 | import PlayButtonSVG from '../svg/playbar-play.svg?react'
  8 | 
  9 | const PlaybarToggle: FC<{
 10 | 	ariaLabel: string
 11 | 	inactive: boolean
 12 | 	setPlaying: boolean
 13 | 	onPlay: (b: boolean) => void
 14 | }> = ({ ariaLabel, inactive, setPlaying, onPlay }): JSX.Element => {
 15 | 	/*
 16 | 		The toggle element of the playbar.
 17 | 	*/
 18 | 	const self = useRef<HTMLDivElement>(null)
 19 | 	// is the toggle pressed - state and prop
 20 | 	const [playing, isPlaying] = useState<boolean>(setPlaying)
 21 | 	useEffect(() => {
 22 | 		isPlaying(setPlaying)
 23 | 	}, [setPlaying])
 24 | 	// click event with prop
 25 | 	const toggle = (): void => {
 26 | 		isMouseDown(true)
 27 | 		if (!inactive) {
 28 | 			isPlaying(!playing)
 29 | 			onPlay(!playing)
 30 | 		}
 31 | 	}
 32 | 	// mousedown state
 33 | 	const [mousedown, isMouseDown] = useState<boolean>(false)
 34 | 	// this useEffect adds a global mouse up to allow for press and hover,
 35 | 	// and a touchstart event used to prevent event bubbling.
 36 | 	useEffect(() => {
 37 | 		const mouseup = (): void => {
 38 | 			isMouseDown(false)
 39 | 		}
 40 | 		const touchstart = (e: TouchEvent): void => {
 41 | 			if (e.cancelable) {
 42 | 				e.preventDefault()
 43 | 				toggle()
 44 | 			}
 45 | 		}
 46 | 		if (self.current) {
 47 | 			window.addEventListener('mouseup', mouseup)
 48 | 			self.current.addEventListener('touchstart', touchstart)
 49 | 		}
 50 | 		const cleanup_self = self.current
 51 | 		return () => {
 52 | 			if (cleanup_self) {
 53 | 				window.removeEventListener('mouseup', mouseup)
 54 | 				cleanup_self.removeEventListener('touchstart', touchstart)
 55 | 			}
 56 | 		}
 57 | 	})
 58 | 
 59 | 	return (
 60 | 		<div
 61 | 			aria-checked={playing}
 62 | 			aria-disabled={inactive}
 63 | 			aria-label={`${ariaLabel}: play button`}
 64 | 			className='playbutton'
 65 | 			ref={self}
 66 | 			role='switch'
 67 | 			style={{
 68 | 				fill: inactive ? '#808080' : '#cee5e8',
 69 | 				background: mousedown ? 'linear-gradient(to top, rgb(51, 51, 51) 0%, rgb(76, 76, 76) 100%)' : 'inherit',
 70 | 			}}
 71 | 			tabIndex={0}
 72 | 			onKeyDown={(e) => {
 73 | 				if (e.key === 'Enter' || e.key === ' ') {
 74 | 					e.preventDefault()
 75 | 					if (!mousedown) {
 76 | 						toggle()
 77 | 					}
 78 | 				}
 79 | 			}}
 80 | 			onKeyUp={(e) => {
 81 | 				if ((e.key === 'Enter' || e.key === ' ') && mousedown) {
 82 | 					isMouseDown(false)
 83 | 				}
 84 | 			}}
 85 | 			onMouseDown={(e) => {
 86 | 				if (e.button === 0) {
 87 | 					toggle()
 88 | 				}
 89 | 			}}
 90 | 			onTouchCancel={() => {
 91 | 				isMouseDown(false)
 92 | 			}}
 93 | 			onTouchEnd={() => {
 94 | 				isMouseDown(false)
 95 | 			}}
 96 | 		>
 97 | 			<div tabIndex={-1}>
 98 | 				{createElement(!inactive && playing ? PauseButtonSVG : PlayButtonSVG, {
 99 | 					tabIndex: -1,
100 | 				})}
101 | 			</div>
102 | 		</div>
103 | 	)
104 | }
105 | 
106 | const PlaybarSlider: FC<{
107 | 	ariaLabel: string
108 | 	inactive: boolean
109 | 	setValue: number
110 | 	width: number
111 | 	onChange: (x: number) => void
112 | }> = ({ ariaLabel, inactive, setValue, width, onChange }): JSX.Element => {
113 | 	/*
114 | 		The slider element of the playbar.
115 | 	*/
116 | 	const fidelity = 10000
117 | 	const self = useRef<HTMLDivElement>(null)
118 | 	// mousedown state
119 | 	const [mousedown, isMouseDown] = useState<boolean>(false)
120 | 	// slider value - state and prop
121 | 	const [value, updateValue] = useState<number>(inactive ? 0 : Math.max(Math.min(setValue, 1), 0) * fidelity)
122 | 	useEffect(() => {
123 | 		updateValue(inactive ? 0 : Math.max(Math.min(setValue, 1), 0) * fidelity)
124 | 	}, [inactive, setValue])
125 | 	// dynamic width - state and prop
126 | 	// this maintains that the svg is always positioned within the slider
127 | 	const [stateWidth, updateWidth] = useState<number>(width)
128 | 	useEffect(() => {
129 | 		const computeWidth = () => {
130 | 			if (self.current?.parentElement) {
131 | 				updateWidth(Math.min(width, self.current.parentElement.getBoundingClientRect().width))
132 | 			}
133 | 		}
134 | 		window.addEventListener('resize', computeWidth)
135 | 		computeWidth()
136 | 		return () => {
137 | 			window.removeEventListener('resize', computeWidth)
138 | 		}
139 | 	}, [width])
140 | 	// this useEffect adds a global mouse up to allow for press and hover,
141 | 	useEffect(() => {
142 | 		const mouseup = (): void => {
143 | 			isMouseDown(false)
144 | 		}
145 | 		window.addEventListener('mouseup', mouseup)
146 | 		return () => {
147 | 			window.removeEventListener('mouseup', mouseup)
148 | 		}
149 | 	}, [])
150 | 	// onChange event with prop
151 | 	const changeSlider = (v: number) => {
152 | 		updateValue(v)
153 | 		onChange(v / fidelity)
154 | 	}
155 | 
156 | 	return (
157 | 		<>
158 | 			<hr />
159 | 			<svg
160 | 				style={{
161 | 					left: `${((stateWidth - 37) * (value / fidelity) + 16).toString()}px`,
162 | 				}}
163 | 				version='1.1'
164 | 				viewBox='0 0 84 84'
165 | 				xmlSpace='preserve'
166 | 				x='0px'
167 | 				y='0px'
168 | 			>
169 | 				<g>
170 | 					<path
171 | 						d='M42.13,67.02C28.24,67.05,16.97,55.8,16.98,41.93C17,28.19,28.21,16.98,41.98,16.94 c13.89-0.03,25.17,11.22,25.15,25.08C67.1,55.78,55.89,66.99,42.13,67.02z M42.14,25.02c-9.35-0.03-17.07,7.62-17.07,16.94 c-0.01,9.23,7.57,16.91,16.77,16.99c9.37,0.08,17.14-7.51,17.2-16.81C59.1,32.78,51.47,25.05,42.14,25.02z'
172 | 						style={{
173 | 							fill: inactive ? '#808080' : '#cee5e8',
174 | 						}}
175 | 					/>
176 | 					<path
177 | 						d='M42.14,25.02c9.33,0.03,16.96,7.76,16.9,17.11c-0.06,9.3-7.83,16.9-17.2,16.81c-9.2-0.08-16.78-7.76-16.77-16.99 C25.08,32.64,32.8,24.98,42.14,25.02z'
178 | 						style={{
179 | 							fill: mousedown ? (inactive ? '#808080' : '#cee5e8') : 'none',
180 | 							opacity: 0.4,
181 | 						}}
182 | 					/>
183 | 				</g>
184 | 			</svg>
185 | 			<div
186 | 				aria-disabled={inactive}
187 | 				aria-label={`${ariaLabel}: slider`}
188 | 				aria-orientation='horizontal'
189 | 				aria-valuemax={fidelity}
190 | 				aria-valuemin={0}
191 | 				aria-valuenow={value}
192 | 				ref={self}
193 | 				role='slider'
194 | 				tabIndex={0}
195 | 				onKeyDown={(e) => {
196 | 					switch (e.key) {
197 | 						case 'Up':
198 | 						case 'ArrowUp':
199 | 						case 'Right':
200 | 						case 'ArrowRight': {
201 | 							e.preventDefault()
202 | 							changeSlider(Math.min(Math.round(value + fidelity / 100), fidelity))
203 | 							break
204 | 						}
205 | 						case 'Down':
206 | 						case 'ArrowDown':
207 | 						case 'Left':
208 | 						case 'ArrowLeft':
209 | 							{
210 | 								e.preventDefault()
211 | 								changeSlider(Math.max(Math.round(value - fidelity / 100), 0))
212 | 							}
213 | 							break
214 | 						case 'PageUp': {
215 | 							e.preventDefault()
216 | 							changeSlider(Math.min(Math.round(value + fidelity / 10), fidelity))
217 | 							break
218 | 						}
219 | 						case 'PageDown': {
220 | 							e.preventDefault()
221 | 							changeSlider(Math.max(Math.round(value - fidelity / 10), 0))
222 | 							break
223 | 						}
224 | 						default:
225 | 							break
226 | 					}
227 | 				}}
228 | 			>
229 | 				<div tabIndex={-1}>
230 | 					<input
231 | 						aria-disabled={inactive}
232 | 						aria-label={`${ariaLabel}: slider`}
233 | 						aria-orientation='horizontal'
234 | 						aria-valuemax={fidelity}
235 | 						aria-valuemin={0}
236 | 						aria-valuenow={value}
237 | 						max={fidelity}
238 | 						min='0'
239 | 						tabIndex={-1}
240 | 						type='range'
241 | 						value={value}
242 | 						onChange={(e) => {
243 | 							changeSlider(+e.target.value)
244 | 						}}
245 | 						onMouseDown={() => {
246 | 							isMouseDown(true)
247 | 						}}
248 | 						onTouchCancel={() => {
249 | 							isMouseDown(false)
250 | 						}}
251 | 						onTouchEnd={() => {
252 | 							isMouseDown(false)
253 | 						}}
254 | 						onTouchMove={(e) => {
255 | 							if (self.current && e.targetTouches[0]) {
256 | 								const rect = self.current.getBoundingClientRect()
257 | 								changeSlider(
258 | 									Math.max(
259 | 										Math.min(
260 | 											Math.round(
261 | 												(e.targetTouches[0].clientX - (rect.x + 5)) / ((rect.width - 10) / fidelity),
262 | 											),
263 | 											fidelity,
264 | 										),
265 | 										0,
266 | 									),
267 | 								)
268 | 							}
269 | 						}}
270 | 						onTouchStart={() => {
271 | 							isMouseDown(true)
272 | 						}}
273 | 					/>
274 | 				</div>
275 | 			</div>
276 | 		</>
277 | 	)
278 | }
279 | 
280 | const Playbar: FC<{
281 | 	ariaLabel?: string
282 | 	inactive?: boolean
283 | 	setPlaying?: boolean
284 | 	setValue?: number
285 | 	width?: number
286 | 	onChange?: (x: number) => void
287 | 	onPlay?: (b: boolean) => void
288 | }> = ({
289 | 	ariaLabel = 'playbar',
290 | 	inactive = false,
291 | 	setPlaying = false,
292 | 	setValue = 0,
293 | 	width = 200,
294 | 	onChange = () => {
295 | 		/**/
296 | 	},
297 | 	onPlay = () => {
298 | 		/**/
299 | 	},
300 | }): JSX.Element => {
301 | 	/*
302 | 		[playbar]
303 | 	*/
304 | 
305 | 	width = Math.max(width, 100)
306 | 
307 | 	return (
308 | 		<div className={style.playbar} style={{ width }}>
309 | 			<PlaybarToggle ariaLabel={ariaLabel} inactive={inactive} setPlaying={setPlaying} onPlay={onPlay} />
310 | 			<PlaybarSlider ariaLabel={ariaLabel} inactive={inactive} setValue={setValue} width={width} onChange={onChange} />
311 | 		</div>
312 | 	)
313 | }
314 | 
315 | export default Playbar
316 | 


--------------------------------------------------------------------------------
/src/components/radiogroup.tsx:
--------------------------------------------------------------------------------
  1 | // dependencies
  2 | import { type FC, useEffect, useRef, useState } from 'react'
  3 | 
  4 | // src
  5 | import style from '../scss/radiogroup.module.scss'
  6 | import RadioGroupSVG from '../svg/radiogroup-row.svg?react'
  7 | 
  8 | const RadioGroup: FC<{
  9 | 	ariaLabel?: string
 10 | 	items?: string[]
 11 | 	spacing?: number
 12 | 	setValue?: number
 13 | 	onClick?: (i: number) => void
 14 | }> = ({
 15 | 	ariaLabel = 'radiogroup',
 16 | 	items = ['', ''],
 17 | 	spacing = 20,
 18 | 	setValue = 0,
 19 | 	onClick = () => {
 20 | 		/**/
 21 | 	},
 22 | }) => {
 23 | 	/*
 24 | 		[radiogroup]
 25 | 	*/
 26 | 
 27 | 	const self = useRef<HTMLDivElement>(null)
 28 | 	// which toggle is pressed - state and prop
 29 | 	const [index, indexPressed] = useState<number>(setValue)
 30 | 	useEffect(() => {
 31 | 		indexPressed(setValue)
 32 | 	}, [setValue])
 33 | 	// click event with prop
 34 | 	const togglePressed = (i: number): void => {
 35 | 		i = i === index ? 0 : i
 36 | 		indexPressed(i)
 37 | 		onClick(i)
 38 | 	}
 39 | 	// keyboard event specific watch state
 40 | 	const [keydown, isKeyDown] = useState<boolean>(false)
 41 | 	// which toggle is focused
 42 | 	const [focus, indexFocused] = useState<number>(setValue)
 43 | 	// focus method
 44 | 	const toggleFocused = (i: number) => {
 45 | 		indexFocused(i)
 46 | 		;(self.current?.childNodes[i] as HTMLElement).focus()
 47 | 	}
 48 | 	// this useEffect adds a touch event listener used to prevent bubbling.
 49 | 	useEffect(() => {
 50 | 		const touchstart = (e: TouchEvent): void => {
 51 | 			if (e.cancelable && self.current && e.targetTouches[0]) {
 52 | 				e.preventDefault()
 53 | 				let t: number | null = null
 54 | 				for (let i = 0; i < self.current.childNodes.length; i++) {
 55 | 					const b = (self.current.childNodes[i] as HTMLElement).getBoundingClientRect()
 56 | 					if (e.targetTouches[0].clientY > b.top && e.targetTouches[0].clientY < b.bottom) {
 57 | 						t = i + 1
 58 | 						break
 59 | 					}
 60 | 				}
 61 | 				if (t !== null) {
 62 | 					togglePressed(t)
 63 | 				}
 64 | 			}
 65 | 		}
 66 | 		self.current?.addEventListener('touchstart', touchstart)
 67 | 		const cleanup_self = self.current
 68 | 		return () => {
 69 | 			cleanup_self?.removeEventListener('touchstart', touchstart)
 70 | 		}
 71 | 	})
 72 | 
 73 | 	return (
 74 | 		<div aria-label={ariaLabel} className={style.radiogroup} ref={self} role='radiogroup'>
 75 | 			{items.map((item: string, i: number) => {
 76 | 				i++
 77 | 				return (
 78 | 					<div
 79 | 						aria-checked={i === index}
 80 | 						aria-label={item ? item : `${ariaLabel} button ${i.toString()}`}
 81 | 						key={i.toString()}
 82 | 						role='radio'
 83 | 						style={{ height: spacing > 16 ? `${spacing.toString()}px` : '16px' }}
 84 | 						tabIndex={i === Math.max(index, 1) ? 0 : -1}
 85 | 						onFocus={() => {
 86 | 							indexFocused(i - 1)
 87 | 						}}
 88 | 						onKeyDown={(e) => {
 89 | 							switch (e.key) {
 90 | 								case 'Enter':
 91 | 								case ' ': {
 92 | 									e.preventDefault()
 93 | 									if (!keydown) {
 94 | 										isKeyDown(true)
 95 | 										togglePressed(i)
 96 | 									}
 97 | 									break
 98 | 								}
 99 | 								case 'Up':
100 | 								case 'ArrowUp': {
101 | 									e.preventDefault()
102 | 									toggleFocused(focus < 1 ? items.length - 1 : focus - 1)
103 | 									break
104 | 								}
105 | 								case 'Down':
106 | 								case 'ArrowDown': {
107 | 									e.preventDefault()
108 | 									toggleFocused((focus + 1) % items.length)
109 | 									break
110 | 								}
111 | 								default:
112 | 									break
113 | 							}
114 | 						}}
115 | 						onKeyUp={(e) => {
116 | 							if ((e.key === 'Enter' || e.key === ' ') && keydown) {
117 | 								e.preventDefault()
118 | 								isKeyDown(false)
119 | 							}
120 | 						}}
121 | 						onMouseDown={(e) => {
122 | 							if (e.button === 0) {
123 | 								togglePressed(i)
124 | 							}
125 | 						}}
126 | 					>
127 | 						{item && (
128 | 							<p
129 | 								style={{
130 | 									lineHeight: spacing > 16 ? `${spacing.toString()}px` : '16px',
131 | 									paddingRight: item ? '10px' : 0,
132 | 								}}
133 | 								tabIndex={-1}
134 | 							>
135 | 								{item}
136 | 							</p>
137 | 						)}
138 | 						<div
139 | 							style={{
140 | 								background:
141 | 									i === index
142 | 										? 'radial-gradient(18px circle at center,#cee5e8 50%,#333333 50%)'
143 | 										: 'radial-gradient(18px circle at center,#595959 50%,#333333 50%)',
144 | 							}}
145 | 							tabIndex={-1}
146 | 						>
147 | 							<RadioGroupSVG />
148 | 						</div>
149 | 					</div>
150 | 				)
151 | 			})}
152 | 		</div>
153 | 	)
154 | }
155 | 
156 | export default RadioGroup
157 | 


--------------------------------------------------------------------------------
/src/components/slider.tsx:
--------------------------------------------------------------------------------
  1 | // dependencies
  2 | import { type FC, type TouchEvent as ReactTouchEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
  3 | 
  4 | // src
  5 | import style from '../scss/slider.module.scss'
  6 | 
  7 | const Slider: FC<{
  8 | 	ariaLabel?: string
  9 | 	setValue?: number
 10 | 	width?: number
 11 | 	onChange?: (x: number) => void
 12 | }> = ({
 13 | 	ariaLabel = 'slider',
 14 | 	setValue = 0,
 15 | 	width = 200,
 16 | 	onChange = () => {
 17 | 		/**/
 18 | 	},
 19 | }) => {
 20 | 	/*
 21 | 		[slider]
 22 | 	*/
 23 | 
 24 | 	const fidelity = 10000
 25 | 	const self = useRef<HTMLDivElement>(null)
 26 | 
 27 | 	// decalre slider colors
 28 | 	const SliderColors = useMemo<{
 29 | 		positive: string
 30 | 		negative: string
 31 | 		off: string
 32 | 	}>(() => {
 33 | 		return {
 34 | 			positive: '#cee5e8',
 35 | 			negative: '#595959',
 36 | 			off: '#818d8f',
 37 | 		}
 38 | 	}, [])
 39 | 
 40 | 	// declare slider colour update function
 41 | 	const colourAndState = useCallback(
 42 | 		(new_value: number): void => {
 43 | 			if (new_value !== 0) {
 44 | 				if (self.current) {
 45 | 					const sliderWidth = self.current.getBoundingClientRect().width - 10
 46 | 					const position = ((sliderWidth - 6) * new_value) / fidelity
 47 | 					setBackground(`linear-gradient(90deg,
 48 | 					${SliderColors.negative}, 
 49 | 					${SliderColors.negative} 0px, 
 50 | 					${SliderColors.positive} 0px, 
 51 | 					${SliderColors.positive} ${(position - 1).toString()}px, 
 52 | 					${SliderColors.negative} ${(position - 1).toString()}px,
 53 | 					${SliderColors.negative} ${position.toString()}px,
 54 | 					${SliderColors.positive} ${position.toString()}px,
 55 | 					${SliderColors.positive} ${(position + 6).toString()}px,
 56 | 					${SliderColors.negative} ${(position + 6).toString()}px
 57 | 					)`)
 58 | 					updateValue(new_value)
 59 | 				}
 60 | 			} else {
 61 | 				setBackground(
 62 | 					`linear-gradient(90deg, ${SliderColors.off}, ${SliderColors.off} 6px, ${SliderColors.negative} 6px)`,
 63 | 				)
 64 | 				updateValue(0)
 65 | 			}
 66 | 		},
 67 | 		[SliderColors],
 68 | 	)
 69 | 
 70 | 	// what is the value - state and prop
 71 | 	const [value, updateValue] = useState<number>(Math.max(Math.min(setValue, 1), 0) * fidelity)
 72 | 	useEffect(() => {
 73 | 		colourAndState(Math.max(Math.min(setValue, 1), 0) * fidelity)
 74 | 	}, [setValue, colourAndState])
 75 | 
 76 | 	// background gradient / colour
 77 | 	const [background, setBackground] = useState<string>(
 78 | 		`linear-gradient(90deg, ${SliderColors.off}, ${SliderColors.off} 6px, ${SliderColors.negative} 6px)`,
 79 | 	)
 80 | 
 81 | 	// this useEffect adds a touch event listener used to prevent bubbling.
 82 | 	useEffect(() => {
 83 | 		const touchstart = (e: TouchEvent) => {
 84 | 			if (e.cancelable) {
 85 | 				e.preventDefault()
 86 | 				touchmove(e)
 87 | 			}
 88 | 		}
 89 | 		self.current?.addEventListener('touchstart', touchstart)
 90 | 		const cleanup_self = self.current
 91 | 		return () => {
 92 | 			cleanup_self?.removeEventListener('touchstart', touchstart)
 93 | 		}
 94 | 	})
 95 | 
 96 | 	const touchmove = (e: ReactTouchEvent | TouchEvent) => {
 97 | 		if (self.current && e.targetTouches[0]) {
 98 | 			const rect = self.current.getBoundingClientRect()
 99 | 			const new_val = Math.max(
100 | 				Math.min(Math.round((e.targetTouches[0].clientX - (rect.x + 5)) / ((rect.width - 10) / fidelity)), fidelity),
101 | 				0,
102 | 			)
103 | 			colourAndState(new_val)
104 | 			onChange(new_val / fidelity)
105 | 		}
106 | 	}
107 | 
108 | 	return (
109 | 		<div
110 | 			className={style.slider}
111 | 			aria-label={ariaLabel}
112 | 			aria-orientation='horizontal'
113 | 			aria-valuemax={fidelity}
114 | 			aria-valuemin={0}
115 | 			aria-valuenow={value}
116 | 			ref={self}
117 | 			role='slider'
118 | 			tabIndex={0}
119 | 			onKeyDown={(e) => {
120 | 				let new_val: number
121 | 				switch (e.key) {
122 | 					case 'Up':
123 | 					case 'ArrowUp':
124 | 					case 'Right':
125 | 					case 'ArrowRight': {
126 | 						e.preventDefault()
127 | 						new_val = Math.min(Math.round(value + fidelity / 100), fidelity)
128 | 						colourAndState(new_val)
129 | 						onChange(new_val / fidelity)
130 | 						break
131 | 					}
132 | 					case 'Down':
133 | 					case 'ArrowDown':
134 | 					case 'Left':
135 | 					case 'ArrowLeft': {
136 | 						e.preventDefault()
137 | 						new_val = Math.max(Math.round(value - fidelity / 100), 0)
138 | 						colourAndState(new_val)
139 | 						onChange(new_val / fidelity)
140 | 						break
141 | 					}
142 | 					case 'PageUp': {
143 | 						e.preventDefault()
144 | 						new_val = Math.min(Math.round(value + fidelity / 10), fidelity)
145 | 						colourAndState(new_val)
146 | 						onChange(new_val / fidelity)
147 | 						break
148 | 					}
149 | 					case 'PageDown': {
150 | 						e.preventDefault()
151 | 						new_val = Math.max(Math.round(value - fidelity / 10), 0)
152 | 						colourAndState(new_val)
153 | 						onChange(new_val / fidelity)
154 | 						break
155 | 					}
156 | 					default:
157 | 						break
158 | 				}
159 | 			}}
160 | 		>
161 | 			<div tabIndex={-1}>
162 | 				<input
163 | 					aria-label={ariaLabel}
164 | 					aria-orientation='horizontal'
165 | 					aria-valuemax={fidelity}
166 | 					aria-valuemin={0}
167 | 					aria-valuenow={value}
168 | 					max={fidelity}
169 | 					min={0}
170 | 					style={{ background, width }}
171 | 					tabIndex={-1}
172 | 					type='range'
173 | 					value={value}
174 | 					onChange={(e) => {
175 | 						const new_val = +e.target.value
176 | 						colourAndState(new_val)
177 | 						onChange(new_val / fidelity)
178 | 					}}
179 | 					onTouchMove={(e) => {
180 | 						touchmove(e)
181 | 					}}
182 | 				/>
183 | 			</div>
184 | 		</div>
185 | 	)
186 | }
187 | 
188 | export default Slider
189 | 


--------------------------------------------------------------------------------
/src/components/textbutton.tsx:
--------------------------------------------------------------------------------
  1 | // dependencies
  2 | import { type FC, useEffect, useRef, useState } from 'react'
  3 | 
  4 | // src
  5 | import style from '../scss/textbutton.module.scss'
  6 | 
  7 | const TextButton: FC<{
  8 | 	ariaLabel?: string
  9 | 	ariaPressed?: boolean | null
 10 | 	inactive?: boolean
 11 | 	mode?: boolean
 12 | 	setValue?: boolean
 13 | 	text?: string
 14 | 	toggleText?: string
 15 | 	onChange?: (b: boolean) => void
 16 | 	onClick?: () => void
 17 | }> = ({
 18 | 	ariaLabel = 'textbutton',
 19 | 	ariaPressed = null,
 20 | 	inactive = false,
 21 | 	mode = false,
 22 | 	setValue = false,
 23 | 	text = 'Button',
 24 | 	toggleText = 'Button On',
 25 | 	onChange = () => {
 26 | 		/**/
 27 | 	},
 28 | 	onClick = () => {
 29 | 		/**/
 30 | 	},
 31 | }) => {
 32 | 	/*
 33 | 		[textbutton]
 34 | 	*/
 35 | 
 36 | 	const self = useRef<HTMLDivElement>(null)
 37 | 
 38 | 	// declare button colours
 39 | 	const TextColours: {
 40 | 		clicked: string
 41 | 		inactive: string
 42 | 		neutral: string
 43 | 		toggleOff: string
 44 | 		toggleOffClicked: string
 45 | 		toggleOffInactive: string
 46 | 	} = {
 47 | 		clicked: '#96aaac',
 48 | 		inactive: '#afbabb',
 49 | 		neutral: '#cee5e8',
 50 | 		toggleOff: '#808080',
 51 | 		toggleOffClicked: '#6c6c6c',
 52 | 		toggleOffInactive: '#878787',
 53 | 	}
 54 | 	const BackgroundGradients: {
 55 | 		neutral: string
 56 | 		hover: string
 57 | 		inactive: string
 58 | 	} = {
 59 | 		neutral: 'linear-gradient(to top, rgb(51, 51, 51) 0%, rgb(76, 76, 76) 100%)',
 60 | 		hover: 'linear-gradient(to top, rgb(51, 51, 51) 0%, rgb(81, 81, 81) 100%)',
 61 | 		inactive: 'linear-gradient(to top, rgb(138, 138, 138) 0%, rgb(151, 151, 151) 100%)',
 62 | 	}
 63 | 
 64 | 	// is the toggle pressed - state and prop
 65 | 	const [pressed, isPressed] = useState<boolean>(mode && setValue)
 66 | 	useEffect(() => {
 67 | 		isPressed(mode && setValue)
 68 | 	}, [mode, setValue])
 69 | 	// button interactions
 70 | 	const [hover, setHover] = useState<boolean>(false)
 71 | 	const [mousedown, setMousedown] = useState<boolean>(false)
 72 | 	const [externalMousedown, setExternalMousedown] = useState<boolean>(false)
 73 | 
 74 | 	const pressButton = (new_value: boolean): void => {
 75 | 		// press button
 76 | 		if (!inactive) {
 77 | 			isPressed(new_value)
 78 | 			onClick()
 79 | 			if (mode) {
 80 | 				onChange(new_value)
 81 | 			}
 82 | 		}
 83 | 	}
 84 | 
 85 | 	// this useEffect adds a touch event listener used to prevent bubbling.
 86 | 	// also add global mouse up and down listeners for cosmetic updates.
 87 | 	useEffect(() => {
 88 | 		const globalMousedown = (e: MouseEvent) => {
 89 | 			if (!inactive && self.current) {
 90 | 				const rect = self.current.getBoundingClientRect()
 91 | 				if (e.clientX > rect.left && e.clientX < rect.right && e.clientY > rect.top && e.clientY < rect.bottom) {
 92 | 					setMousedown(true)
 93 | 				} else {
 94 | 					setExternalMousedown(true)
 95 | 				}
 96 | 			}
 97 | 		}
 98 | 		const globalMouseup = () => {
 99 | 			setExternalMousedown(false)
100 | 			setMousedown(false)
101 | 		}
102 | 		const touchstart = (e: TouchEvent): void => {
103 | 			if (e.cancelable) {
104 | 				e.preventDefault()
105 | 				setHover(true)
106 | 				setMousedown(true)
107 | 			}
108 | 		}
109 | 		if (self.current) {
110 | 			window.addEventListener('mousedown', globalMousedown)
111 | 			window.addEventListener('mouseup', globalMouseup)
112 | 			self.current.addEventListener('touchstart', touchstart)
113 | 		}
114 | 		const cleanup_self = self.current
115 | 		return () => {
116 | 			if (cleanup_self) {
117 | 				window.removeEventListener('mousedown', globalMousedown)
118 | 				window.removeEventListener('mouseup', globalMouseup)
119 | 				cleanup_self.removeEventListener('touchstart', touchstart)
120 | 			}
121 | 		}
122 | 	})
123 | 
124 | 	return (
125 | 		<div
126 | 			{...(mode &&
127 | 				!inactive && {
128 | 					'aria-checked': pressed,
129 | 				})}
130 | 			{...(!(mode || inactive) &&
131 | 				ariaPressed !== null && {
132 | 					'aria-pressed': ariaPressed,
133 | 				})}
134 | 			{...(!inactive && {
135 | 				'aria-label': ariaLabel,
136 | 				role: mode ? 'switch' : 'button',
137 | 				tabIndex: 0,
138 | 				onKeyDown: (e) => {
139 | 					if (e.key === 'Enter' || e.key === ' ') {
140 | 						e.preventDefault()
141 | 						if (!mousedown) {
142 | 							setHover(true)
143 | 							setMousedown(true)
144 | 						}
145 | 					}
146 | 				},
147 | 				onKeyUp: (e) => {
148 | 					if ((e.key === 'Enter' || e.key === ' ') && mousedown) {
149 | 						e.preventDefault()
150 | 						setHover(false)
151 | 						setMousedown(false)
152 | 						pressButton(mode && !pressed)
153 | 					}
154 | 				},
155 | 			})}
156 | 			className={style.textbutton}
157 | 			ref={self}
158 | 			style={{
159 | 				background: inactive
160 | 					? BackgroundGradients.inactive
161 | 					: hover && !externalMousedown
162 | 						? BackgroundGradients.hover
163 | 						: BackgroundGradients.neutral,
164 | 			}}
165 | 			onClick={() => {
166 | 				pressButton(mode && !pressed)
167 | 			}}
168 | 			onMouseEnter={() => {
169 | 				if (!inactive) {
170 | 					setHover(true)
171 | 				}
172 | 			}}
173 | 			onMouseLeave={() => {
174 | 				if (!inactive) {
175 | 					setHover(false)
176 | 				}
177 | 			}}
178 | 			onTouchEnd={(e) => {
179 | 				e.preventDefault()
180 | 				setHover(false)
181 | 				setMousedown(false)
182 | 				pressButton(mode && !pressed)
183 | 			}}
184 | 			onTouchCancel={() => {
185 | 				setHover(false)
186 | 				setMousedown(false)
187 | 			}}
188 | 		>
189 | 			<p
190 | 				style={{
191 | 					color: inactive
192 | 						? pressed
193 | 							? TextColours.inactive
194 | 							: mode
195 | 								? TextColours.toggleOffInactive
196 | 								: TextColours.inactive
197 | 						: mousedown && hover
198 | 							? pressed
199 | 								? mode
200 | 									? TextColours.toggleOffClicked
201 | 									: TextColours.clicked
202 | 								: TextColours.clicked
203 | 							: pressed
204 | 								? TextColours.neutral
205 | 								: mode
206 | 									? TextColours.toggleOff
207 | 									: TextColours.neutral,
208 | 				}}
209 | 				tabIndex={-1}
210 | 			>
211 | 				{mode ? (pressed ? (mousedown && hover ? text : toggleText) : mousedown && hover ? toggleText : text) : text}
212 | 			</p>
213 | 		</div>
214 | 	)
215 | }
216 | 
217 | export default TextButton
218 | 


--------------------------------------------------------------------------------
/src/components/toggle.tsx:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import { type FC, useEffect, useRef, useState } from 'react'
 3 | 
 4 | // src
 5 | import style from '../scss/toggle.module.scss'
 6 | import SVG from '../svg/toggle.svg?react'
 7 | 
 8 | const Toggle: FC<{
 9 | 	ariaLabel?: string
10 | 	setValue?: boolean
11 | 	onClick?: (b: boolean) => void
12 | }> = ({
13 | 	ariaLabel = 'toggle',
14 | 	setValue = false,
15 | 	onClick = () => {
16 | 		/**/
17 | 	},
18 | }) => {
19 | 	/*
20 | 		[toggle]
21 | 	*/
22 | 
23 | 	const self = useRef<HTMLDivElement>(null)
24 | 	// is the toggle pressed - state and prop
25 | 	const [pressed, isPressed] = useState<boolean>(setValue)
26 | 	useEffect(() => {
27 | 		isPressed(setValue)
28 | 	}, [setValue])
29 | 	// click event with prop
30 | 	const togglePressed = (): void => {
31 | 		isPressed(!pressed)
32 | 		onClick(pressed)
33 | 	}
34 | 	// keyboard event specific watch state
35 | 	const [keydown, isKeyDown] = useState<boolean>(false)
36 | 	// this useEffect adds a touch event listener used to prevent bubbling.
37 | 	useEffect(() => {
38 | 		const touchstart = (e: TouchEvent): void => {
39 | 			if (e.cancelable) {
40 | 				e.preventDefault()
41 | 				togglePressed()
42 | 			}
43 | 		}
44 | 		self.current?.addEventListener('touchstart', touchstart)
45 | 		const cleanup_self = self.current
46 | 		return () => {
47 | 			cleanup_self?.removeEventListener('touchstart', touchstart)
48 | 		}
49 | 	})
50 | 
51 | 	return (
52 | 		<div
53 | 			aria-checked={pressed}
54 | 			aria-label={ariaLabel}
55 | 			className={style.toggle}
56 | 			ref={self}
57 | 			role='switch'
58 | 			tabIndex={0}
59 | 			onKeyDown={(e) => {
60 | 				if (e.key === 'Enter' || e.key === ' ') {
61 | 					e.preventDefault()
62 | 					if (!keydown) {
63 | 						isKeyDown(true)
64 | 						togglePressed()
65 | 					}
66 | 				}
67 | 			}}
68 | 			onKeyUp={(e) => {
69 | 				if ((e.key === 'Enter' || e.key === ' ') && keydown) {
70 | 					e.preventDefault()
71 | 					isKeyDown(false)
72 | 				}
73 | 			}}
74 | 			onMouseDown={(e) => {
75 | 				if (e.button === 0) {
76 | 					togglePressed()
77 | 				}
78 | 			}}
79 | 		>
80 | 			<SVG
81 | 				style={{
82 | 					background: pressed ? 'radial-gradient(40px circle at center,#cee5e8 50%,#333333 50%)' : '#595959',
83 | 				}}
84 | 				tabIndex={-1}
85 | 			/>
86 | 		</div>
87 | 	)
88 | }
89 | 
90 | export default Toggle
91 | 


--------------------------------------------------------------------------------
/src/components/umenu.tsx:
--------------------------------------------------------------------------------
  1 | // dependencies
  2 | import { type FC, useEffect, useRef, useState } from 'react'
  3 | 
  4 | // src
  5 | import style from '../scss/umenu.module.scss'
  6 | import UmenuSVG from '../svg/umenu-arrow.svg?react'
  7 | 
  8 | const Umenu: FC<{
  9 | 	ariaLabel?: string
 10 | 	items?: string[]
 11 | 	width?: number
 12 | 	setValue?: number
 13 | 	onChange?: (i: number) => void
 14 | }> = ({
 15 | 	ariaLabel = 'umenu',
 16 | 	items = [],
 17 | 	width = 100,
 18 | 	setValue = 0,
 19 | 	onChange = () => {
 20 | 		/**/
 21 | 	},
 22 | }) => {
 23 | 	/*
 24 | 		[umenu]
 25 | 	*/
 26 | 
 27 | 	const self = useRef<HTMLDivElement>(null)
 28 | 	// which toggle is pressed - state and prop
 29 | 	const [index, indexPressed] = useState<number>(setValue < items.length && setValue >= 0 ? setValue : 0)
 30 | 	useEffect(() => {
 31 | 		indexPressed((i) => (setValue < items.length && setValue >= 0 ? setValue : i))
 32 | 	}, [items, setValue])
 33 | 	// is the dropdown displayed
 34 | 	const [dropdownVisible, setDropdown] = useState<boolean>(false)
 35 | 	const [dropdownWidth, setDropdownWidth] = useState<string>('fit-content')
 36 | 	// which index is focused
 37 | 	const [focus, setFocus] = useState<null | number>(null)
 38 | 	// keyboard event specific watch state
 39 | 	const [keydown, isKeyDown] = useState<boolean>(false)
 40 | 
 41 | 	// this useEffect adds a touch event listener used to prevent bubbling.
 42 | 	useEffect(() => {
 43 | 		const listTouchStart = (e: TouchEvent) => {
 44 | 			if (e.cancelable && self.current) {
 45 | 				let t: number | null = null
 46 | 				self.current.childNodes[1]?.childNodes.forEach((button, i) => {
 47 | 					const b = (button as HTMLElement).getBoundingClientRect()
 48 | 					if (e.targetTouches[0] && e.targetTouches[0].clientY > b.top && e.targetTouches[0].clientY < b.bottom) {
 49 | 						t = i
 50 | 					}
 51 | 				})
 52 | 				setFocus(t)
 53 | 			}
 54 | 		}
 55 | 		const toggleTouchStart = (e: TouchEvent): void => {
 56 | 			if (e.cancelable) {
 57 | 				e.preventDefault()
 58 | 				openDropdown(null)
 59 | 			}
 60 | 		}
 61 | 
 62 | 		const isNotInViewport = (): void => {
 63 | 			if (dropdownVisible && self.current) {
 64 | 				const umenuDim = self.current.getBoundingClientRect()
 65 | 				const dropdownDim = (self.current.childNodes[1] as HTMLElement).getBoundingClientRect()
 66 | 				if (
 67 | 					umenuDim.top > window.innerHeight ||
 68 | 					dropdownDim.bottom < 0 ||
 69 | 					umenuDim.left > window.innerWidth ||
 70 | 					Math.max(umenuDim.right, dropdownDim.right) < 0
 71 | 				) {
 72 | 					setDropdown(false)
 73 | 					setFocus(null)
 74 | 				}
 75 | 			}
 76 | 		}
 77 | 
 78 | 		const customBlur = (e: MouseEvent): void => {
 79 | 			if (self.current) {
 80 | 				const umenuDim = self.current.getBoundingClientRect()
 81 | 				const dropdownDim = (self.current.childNodes[1] as HTMLElement).getBoundingClientRect()
 82 | 				if (
 83 | 					e.clientX > umenuDim.left &&
 84 | 					e.clientX < umenuDim.right &&
 85 | 					e.clientY > umenuDim.top &&
 86 | 					e.clientY < umenuDim.bottom
 87 | 				) {
 88 | 					return
 89 | 				}
 90 | 				if (dropdownVisible) {
 91 | 					if (
 92 | 						e.clientX > dropdownDim.left &&
 93 | 						e.clientX < dropdownDim.right &&
 94 | 						e.clientY > dropdownDim.top &&
 95 | 						e.clientY < dropdownDim.bottom
 96 | 					) {
 97 | 						return
 98 | 					}
 99 | 					setDropdown(false)
100 | 					setFocus(null)
101 | 				}
102 | 				self.current.blur()
103 | 			}
104 | 		}
105 | 
106 | 		if (self.current) {
107 | 			;(self.current.childNodes[0] as HTMLElement).addEventListener('touchstart', toggleTouchStart)
108 | 			;(self.current.childNodes[1] as HTMLElement).addEventListener('touchstart', listTouchStart)
109 | 			window.addEventListener('resize', responsiveDropdown)
110 | 			window.addEventListener('mousedown', customBlur)
111 | 			window.addEventListener('scroll', isNotInViewport)
112 | 		}
113 | 		const cleanup_self = self.current
114 | 		return () => {
115 | 			if (cleanup_self) {
116 | 				;(cleanup_self.childNodes[0] as HTMLElement).removeEventListener('touchstart', toggleTouchStart)
117 | 				;(cleanup_self.childNodes[1] as HTMLElement).removeEventListener('touchstart', listTouchStart)
118 | 				window.removeEventListener('mousedown', customBlur)
119 | 				window.removeEventListener('resize', responsiveDropdown)
120 | 				window.removeEventListener('scroll', isNotInViewport)
121 | 			}
122 | 		}
123 | 	})
124 | 
125 | 	const openDropdown = (focus: number | null): void => {
126 | 		setDropdown(!dropdownVisible)
127 | 		setFocus(focus)
128 | 		if (dropdownVisible) {
129 | 			responsiveDropdown()
130 | 			if (focus !== null) {
131 | 				;(self.current?.childNodes[1]?.childNodes[focus] as HTMLElement).focus()
132 | 			}
133 | 		}
134 | 	}
135 | 
136 | 	const responsiveDropdown = (): void => {
137 | 		if (self.current) {
138 | 			const maxWidth =
139 | 				(self.current.parentNode as HTMLElement).getBoundingClientRect().right -
140 | 				self.current.getBoundingClientRect().left
141 | 			setDropdownWidth('fit-content')
142 | 			if (maxWidth < (self.current.childNodes[1] as HTMLElement).offsetWidth) {
143 | 				setDropdownWidth(`${(maxWidth - 2).toString()}px`)
144 | 			}
145 | 		}
146 | 	}
147 | 
148 | 	const arrowKeys = (value: 1 | -1): void => {
149 | 		if (focus !== null) {
150 | 			setFocus((focus + items.length + value) % items.length)
151 | 			;(self.current?.childNodes[1]?.childNodes[focus] as HTMLElement).focus()
152 | 		} else {
153 | 			const f = value === -1 ? items.length - 1 : 0
154 | 			setFocus(f)
155 | 			;(self.current?.childNodes[1]?.childNodes[f] as HTMLElement).focus()
156 | 		}
157 | 	}
158 | 
159 | 	const changeSelected = (new_index: number, aria: boolean): void => {
160 | 		indexPressed(new_index)
161 | 		setDropdown(false)
162 | 		onChange(new_index)
163 | 		if (aria) {
164 | 			self.current?.focus()
165 | 		}
166 | 	}
167 | 
168 | 	return (
169 | 		<div
170 | 			className={style.umenu}
171 | 			ref={self}
172 | 			style={{ width: `${Math.max(50, width).toString()}px` }}
173 | 			{...(items.length > 0 && {
174 | 				'aria-expanded': dropdownVisible,
175 | 				'aria-haspopup': 'listbox',
176 | 				'aria-label': `${ariaLabel}: ${items[index] ?? 'nothing'} selected`,
177 | 				role: 'button',
178 | 				tabIndex: 0,
179 | 				onKeyDown: (e) => {
180 | 					switch (e.key) {
181 | 						case 'Enter':
182 | 						case ' ': {
183 | 							e.preventDefault()
184 | 							if (!keydown) {
185 | 								isKeyDown(true)
186 | 								if (dropdownVisible) {
187 | 									if (focus !== null) {
188 | 										changeSelected(focus, true)
189 | 									} else {
190 | 										openDropdown(null)
191 | 									}
192 | 								} else {
193 | 									openDropdown(0)
194 | 								}
195 | 							}
196 | 							break
197 | 						}
198 | 						case 'Esc':
199 | 						case 'Escape': {
200 | 							e.preventDefault()
201 | 							setDropdown(false)
202 | 							setFocus(null)
203 | 							self.current?.focus()
204 | 							break
205 | 						}
206 | 						case 'Home':
207 | 						case 'End': {
208 | 							e.preventDefault()
209 | 							setFocus(e.key === 'Home' ? 0 : items.length - 1)
210 | 							if (focus !== null) {
211 | 								;(self.current?.childNodes[1]?.childNodes[focus] as HTMLElement).focus()
212 | 							}
213 | 							break
214 | 						}
215 | 						case 'Up':
216 | 						case 'ArrowUp': {
217 | 							e.preventDefault()
218 | 							if (dropdownVisible) {
219 | 								arrowKeys(-1)
220 | 							}
221 | 							break
222 | 						}
223 | 						case 'Down':
224 | 						case 'ArrowDown': {
225 | 							e.preventDefault()
226 | 							if (dropdownVisible) {
227 | 								arrowKeys(1)
228 | 							}
229 | 							break
230 | 						}
231 | 						case 'Tab': {
232 | 							if (dropdownVisible) {
233 | 								setDropdown(false)
234 | 							}
235 | 							break
236 | 						}
237 | 						default:
238 | 							break
239 | 					}
240 | 				},
241 | 				onKeyUp: (e) => {
242 | 					if ((e.key === 'Enter' || e.key === ' ') && keydown) {
243 | 						e.preventDefault()
244 | 						isKeyDown(false)
245 | 					}
246 | 				},
247 | 			})}
248 | 		>
249 | 			<div
250 | 				tabIndex={-1}
251 | 				onMouseDown={(e) => {
252 | 					if (e.button === 0) {
253 | 						openDropdown(null)
254 | 					}
255 | 				}}
256 | 			>
257 | 				<p>{items[index]}</p>
258 | 				<UmenuSVG />
259 | 			</div>
260 | 			<ul
261 | 				aria-label={`${ariaLabel}: ${items[index] ?? 'nothing'} selected`}
262 | 				role='listbox'
263 | 				tabIndex={-1}
264 | 				style={{
265 | 					display: dropdownVisible && items.length > 0 ? 'block' : 'none',
266 | 					width: dropdownWidth || 'fit-content',
267 | 					whiteSpace: dropdownWidth !== 'fit-content' ? 'normal' : 'nowrap',
268 | 				}}
269 | 			>
270 | 				{items.map((item, i) => {
271 | 					return (
272 | 						<li
273 | 							aria-selected={i === index}
274 | 							key={i.toString()}
275 | 							role='option'
276 | 							style={{
277 | 								background: focus === i ? '#4c4c4c' : 'inherit',
278 | 							}}
279 | 							tabIndex={-1}
280 | 							onMouseEnter={() => {
281 | 								setFocus(i)
282 | 							}}
283 | 							onMouseLeave={() => {
284 | 								setFocus(null)
285 | 							}}
286 | 							onClick={() => {
287 | 								changeSelected(i, false)
288 | 							}}
289 | 							onTouchEnd={() => {
290 | 								setFocus(null)
291 | 							}}
292 | 						>
293 | 							{item}
294 | 						</li>
295 | 					)
296 | 				})}
297 | 			</ul>
298 | 		</div>
299 | 	)
300 | }
301 | 
302 | export default Umenu
303 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Bang } from './components/bang.tsx'
 2 | export { default as Ezdac } from './components/ezdac.tsx'
 3 | export { default as Message } from './components/message.tsx'
 4 | export { default as Object } from './components/object.tsx'
 5 | export { default as Playbar } from './components/playbar.tsx'
 6 | export { default as RadioGroup } from './components/radiogroup.tsx'
 7 | export { default as Slider } from './components/slider.tsx'
 8 | export { default as TextButton } from './components/textbutton.tsx'
 9 | export { default as Toggle } from './components/toggle.tsx'
10 | export { default as Umenu } from './components/umenu.tsx'
11 | 


--------------------------------------------------------------------------------
/src/scss/bang.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .bang {
 4 | 	@include utils.main;
 5 | 	height: 24px;
 6 | 	width: 24px;
 7 | 
 8 | 	@include utils.focus;
 9 | 
10 | 	svg {
11 | 		outline: 0;
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/scss/ezdac.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .ezdac {
 4 | 	@include utils.main;
 5 | 	height: 45px;
 6 | 	width: 45px;
 7 | 
 8 | 	@include utils.focus;
 9 | 
10 | 	svg {
11 | 		outline: 0;
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/scss/message.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .message {
 4 | 	@include utils.main;
 5 | 	height: fit-content;
 6 | 	min-height: 24px;
 7 | 	width: fit-content;
 8 | 	min-width: 29.5px;
 9 | 	background: linear-gradient(to top, rgb(51 51 51) 0%, rgb(76 76 76) 100%);
10 | 	border-radius: 5px;
11 | 
12 | 	@include utils.focus;
13 | 
14 | 	p {
15 | 		margin: auto 0;
16 | 		line-height: 14px;
17 | 		font-size: 13px;
18 | 		color: #f7f7f7;
19 | 		outline: 0;
20 | 	}
21 | }
22 | 


--------------------------------------------------------------------------------
/src/scss/object.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .object {
 4 | 	@include utils.main;
 5 | 	height: fit-content;
 6 | 	min-height: 24px;
 7 | 	width: fit-content;
 8 | 	min-width: 29.5px;
 9 | 	max-width: 100%;
10 | 
11 | 	svg {
12 | 		height: 24px;
13 | 		margin: 0;
14 | 		position: absolute;
15 | 		top: 0;
16 | 		left: 5px;
17 | 	}
18 | 
19 | 	p {
20 | 		height: fit-content;
21 | 		min-height: 14px;
22 | 		min-width: 19.5px;
23 | 		margin: 4px 0;
24 | 		padding: 1px 5px;
25 | 		line-height: 14px;
26 | 		font-size: 13px;
27 | 		color: #f7f7f7;
28 | 	}
29 | }
30 | 


--------------------------------------------------------------------------------
/src/scss/playbar.module.scss:
--------------------------------------------------------------------------------
  1 | @use './utils.scss' as utils;
  2 | 
  3 | @mixin thumb-style {
  4 | 	height: 20px;
  5 | 	width: 12px;
  6 | 	appearance: none;
  7 | 	background: none;
  8 | 	border: 0;
  9 | 	opacity: 0;
 10 | }
 11 | 
 12 | .playbar {
 13 | 	@include utils.main;
 14 | 	height: 20px;
 15 | 	// width set by component
 16 | 	max-width: 100%;
 17 | 	background: #333;
 18 | 
 19 | 	hr {
 20 | 		height: 2px;
 21 | 		width: calc(100% - 37px);
 22 | 		margin: auto;
 23 | 		position: absolute;
 24 | 		top: 0;
 25 | 		bottom: 0;
 26 | 		left: 26px;
 27 | 		background: #808080;
 28 | 		border: 0;
 29 | 	}
 30 | 
 31 | 	> svg {
 32 | 		height: 20px;
 33 | 		width: 20px;
 34 | 		margin: auto;
 35 | 		position: absolute;
 36 | 		top: 0;
 37 | 		bottom: 0;
 38 | 		pointer-events: none;
 39 | 	}
 40 | 
 41 | 	> div:first-of-type {
 42 | 		height: 20px;
 43 | 		width: 20px;
 44 | 		position: absolute;
 45 | 		top: 0;
 46 | 		left: 0;
 47 | 		margin: 0;
 48 | 
 49 | 		@include utils.focus;
 50 | 
 51 | 		> div {
 52 | 			height: inherit;
 53 | 			width: inherit;
 54 | 			outline: 0;
 55 | 
 56 | 			svg {
 57 | 				height: inherit;
 58 | 				width: inherit;
 59 | 				pointer-events: none;
 60 | 			}
 61 | 		}
 62 | 	}
 63 | 
 64 | 	> div:last-of-type {
 65 | 		z-index: 10;
 66 | 		height: 20px;
 67 | 		margin: 0;
 68 | 		width: calc(100% - 25px);
 69 | 		padding: 0 5px 0 0;
 70 | 		float: right;
 71 | 
 72 | 		@include utils.focus;
 73 | 
 74 | 		div {
 75 | 			height: inherit;
 76 | 			width: 100%;
 77 | 			position: relative;
 78 | 			padding: 0;
 79 | 			outline: 0;
 80 | 
 81 | 			input {
 82 | 				height: 100%;
 83 | 				width: 100%;
 84 | 				margin: 0;
 85 | 				appearance: none;
 86 | 				background: inherit;
 87 | 				outline: 0;
 88 | 
 89 | 				&::-webkit-slider-thumb {
 90 | 					@include thumb-style;
 91 | 				}
 92 | 
 93 | 				&::-moz-range-thumb {
 94 | 					@include thumb-style;
 95 | 				}
 96 | 			}
 97 | 		}
 98 | 	}
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/scss/radiogroup.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .radiogroup {
 4 | 	@include utils.main;
 5 | 	height: fit-content;
 6 | 	width: fit-content;
 7 | 	max-width: 100%;
 8 | 	background: unset;
 9 | 
10 | 	@include utils.focus;
11 | 
12 | 	> div {
13 | 		height: fit-content;
14 | 		width: fit-content;
15 | 		display: flex;
16 | 		float: right;
17 | 		clear: right;
18 | 
19 | 		@include utils.focus;
20 | 
21 | 		p {
22 | 			height: inherit;
23 | 			width: fit-content;
24 | 			margin: 0;
25 | 			float: right;
26 | 			text-align: right;
27 | 			vertical-align: middle;
28 | 			white-space: nowrap;
29 | 			font-size: 16px;
30 | 			font-weight: bold;
31 | 			color: black;
32 | 			outline: 0;
33 | 		}
34 | 
35 | 		div {
36 | 			height: inherit;
37 | 			width: 20.1px;
38 | 			display: grid;
39 | 			position: relative;
40 | 			background: #333;
41 | 			outline: 0;
42 | 
43 | 			svg {
44 | 				height: 20px;
45 | 				width: 20px;
46 | 				place-self: center;
47 | 			}
48 | 		}
49 | 	}
50 | }
51 | 


--------------------------------------------------------------------------------
/src/scss/slider.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | @mixin thumb-style() {
 4 | 	height: 20px;
 5 | 	width: 6px;
 6 | 	appearance: none;
 7 | 	background: none;
 8 | 	border: 0;
 9 | 	opacity: 0;
10 | }
11 | 
12 | .slider {
13 | 	@include utils.main;
14 | 	height: 24px;
15 | 	width: fit-content;
16 | 	max-width: 100%;
17 | 	background: #393939;
18 | 
19 | 	@include utils.focus;
20 | 
21 | 	div {
22 | 		height: inherit;
23 | 		outline: 0;
24 | 
25 | 		input {
26 | 			height: inherit;
27 | 			// width set by component
28 | 			max-width: calc(100% - 10px);
29 | 			margin: 0 5px;
30 | 			appearance: none;
31 | 			border-radius: 0;
32 | 			outline: 0;
33 | 
34 | 			&::-webkit-slider-thumb {
35 | 				@include thumb-style;
36 | 			}
37 | 
38 | 			&::-moz-range-thumb {
39 | 				@include thumb-style;
40 | 			}
41 | 		}
42 | 	}
43 | }
44 | 


--------------------------------------------------------------------------------
/src/scss/textbutton.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .textbutton {
 4 | 	@include utils.main;
 5 | 	height: 24px;
 6 | 	width: fit-content;
 7 | 
 8 | 	@include utils.focus;
 9 | 
10 | 	p {
11 | 		height: 100%;
12 | 		width: fit-content;
13 | 		min-width: 80px;
14 | 		max-width: calc(100% - 20px);
15 | 		padding: 0 10px;
16 | 		margin: 0;
17 | 		overflow: hidden;
18 | 		line-height: 24px;
19 | 		font-size: 13.5px;
20 | 		text-align: center;
21 | 		text-overflow: ellipsis;
22 | 		white-space: nowrap;
23 | 		outline: 0;
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/src/scss/toggle.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .toggle {
 4 | 	@include utils.main;
 5 | 	height: 24px;
 6 | 	width: 24px;
 7 | 
 8 | 	@include utils.focus;
 9 | 
10 | 	svg {
11 | 		outline: 0;
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/scss/umenu.module.scss:
--------------------------------------------------------------------------------
 1 | @use './utils.scss' as utils;
 2 | 
 3 | .umenu {
 4 | 	@include utils.main;
 5 | 	height: 24px;
 6 | 	// width set by component
 7 | 	max-width: 100%;
 8 | 	min-width: 40px;
 9 | 	text-align: left;
10 | 	font-size: 13px;
11 | 	color: #f7f7f7;
12 | 	background: linear-gradient(to top, rgb(51 51 51) 0%, rgb(76 76 76) 100%);
13 | 
14 | 	@include utils.focus;
15 | 
16 | 	> div {
17 | 		outline: 0;
18 | 
19 | 		p {
20 | 			line-height: 24px;
21 | 			margin: 0;
22 | 			padding: 0 22px 0 8px;
23 | 			text-align: left;
24 | 			white-space: nowrap;
25 | 			text-overflow: ellipsis;
26 | 			overflow: hidden;
27 | 		}
28 | 
29 | 		svg {
30 | 			height: 24px;
31 | 			position: absolute;
32 | 			top: 0;
33 | 			right: 5px;
34 | 		}
35 | 	}
36 | 
37 | 	ul {
38 | 		height: fit-content;
39 | 		margin: 0;
40 | 		padding: 0;
41 | 		position: absolute;
42 | 		top: 24px;
43 | 		left: 0;
44 | 		z-index: 10;
45 | 		outline: 0;
46 | 		list-style: none;
47 | 		overflow: hidden;
48 | 		background: #393939;
49 | 		border: 1px solid black;
50 | 		border-radius: 4px;
51 | 
52 | 		li {
53 | 			min-height: 13px;
54 | 			padding: 5px 20px;
55 | 			word-break: break-word;
56 | 			text-align: justify;
57 | 			outline: 0;
58 | 		}
59 | 	}
60 | }
61 | 


--------------------------------------------------------------------------------
/src/scss/utils.scss:
--------------------------------------------------------------------------------
 1 | @mixin main() {
 2 | 	position: relative;
 3 | 	font-family: Arial, sans-serif;
 4 | 	text-size-adjust: 100%;
 5 | 	word-break: break-word;
 6 | 	touch-action: none;
 7 | 	user-select: none;
 8 | 	-webkit-user-select: none;
 9 | 	-webkit-tap-highlight-color: transparent;
10 | 	cursor: default;
11 | }
12 | 
13 | @mixin focus() {
14 | 	&:focus {
15 | 		outline: #b4b4b4 solid 3px;
16 | 		z-index: 10;
17 | 	}
18 | }
19 | 


--------------------------------------------------------------------------------
/src/svg/bang.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 96 96;' version='1.1' viewBox='0 0 96 96' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M95.97,47.99c0,15.39-0.02,30.78,0.03,46.18C96,96,96,96,96,96c-30.87-0.07-65.13-0.05-96,0c0,0,0-0.36,0-1.7
 6 | 		C0.05,63.44,0.04,30.87,0,0c0,0,0.16,0,1.62,0c30.96,0.06,61.92,0.05,92.87,0.01C95.8,0.01,96,0,96,0
 7 | 		C95.96,15.47,95.97,32.52,95.97,47.99z M48.01,80.93c18.7-0.69,32.83-14.49,32.79-33c-0.05-18.45-14.08-32.62-32.67-32.72
 8 | 		c-18.37-0.09-32.86,13.9-32.91,32.73C15.16,66.47,29.34,80.25,48.01,80.93z'
 9 | 			style='fill: #333333;'
10 | 		/>
11 | 		<path
12 | 			d='M48.01,80.93c-18.67-0.68-32.85-14.46-32.79-32.99c0.05-18.83,14.54-32.82,32.91-32.73
13 | 		c18.59,0.1,32.63,14.26,32.67,32.72C80.84,66.43,66.71,80.24,48.01,80.93z M72.95,48.07c-0.72-14.02-10.13-24.68-24.75-24.84
14 | 		c-14.1-0.15-24.89,10.01-24.97,24.7c-0.07,14.02,9.97,24.66,24.59,24.84C61.85,72.94,72.19,62.67,72.95,48.07z'
15 | 			style='fill: #595959;'
16 | 		/>
17 | 		<path
18 | 			d='M72.95,48.07c-0.76,14.6-11.09,24.87-25.13,24.7C33.2,72.59,23.15,61.95,23.23,47.93
19 | 		c0.08-14.69,10.87-24.85,24.97-24.7C62.81,23.39,72.23,34.05,72.95,48.07z M48.1,62.45c8.32-0.57,14.23-6.08,14.21-14.49
20 | 		c-0.02-8.67-6.25-14.32-14.29-14.32c-8.45,0.01-14.48,6.18-14.33,14.51C33.85,56.96,40.13,62.02,48.1,62.45z'
21 | 			style='fill: #333333;'
22 | 		/>
23 | 	</g>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/src/svg/ezdac.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 180 180;' version='1.1' viewBox='0 0 180 180' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M0.05,179.95c0-59.3,0.01-118.6-0.05-177.91C0,0.34,0.34,0,2.05,0c58.64,0.06,117.27,0.06,175.91,0
 6 | 		c1.71,0,2.05,0.34,2.05,2.05c-0.06,58.64-0.06,117.27,0,175.91c0,1.71-0.34,2.05-2.05,2.05C118.65,179.94,59.35,179.95,0.05,179.95
 7 | 		z M95.94,90.13c0.01,0,0.02,0,0.04,0c0-17.23,0.01-34.46-0.03-51.69c0-0.63,0.5-1.57-0.57-1.87c-0.79-0.22-1.37,0.21-1.95,0.77
 8 | 		c-2.2,2.11-4.44,4.19-6.71,6.22c-7.59,6.8-15.24,13.54-22.79,20.39c-0.98,0.89-1.92,1.12-3.1,1.12
 9 | 		c-6.24-0.01-12.49,0.06-18.73-0.03c-4.03-0.06-6.38,3.02-6.43,6.3c-0.18,12.4-0.06,24.8,0.07,37.2c0.04,4.03,2.7,6.38,6.74,6.39
10 | 		c6.08,0.01,12.15,0.07,18.23,0.02c1.43-0.01,2.44,0.35,3.47,1.4c2.14,2.18,4.42,4.21,6.7,6.23c7.37,6.55,14.77,13.08,22.14,19.62
11 | 		c0.74,0.66,1.41,1.66,2.51,1.11c0.88-0.44,0.38-1.49,0.38-2.24C95.95,124.09,95.94,107.11,95.94,90.13z M144.45,92.22
12 | 		c0-2,0.29-4.05-0.05-5.99c-2.23-13.03-9.22-22.98-19.95-30.51c-1.26-0.88-1.95-0.68-2.65,0.33c-1.17,1.69-2.49,3.23-3.83,4.78
13 | 		c-1.98,2.29-1.97,3.05,0.36,4.72c3.36,2.41,6.41,5.1,8.87,8.43c4.74,6.41,7.22,13.71,6.14,21.54c-1.14,8.28-5.35,15.23-12.08,20.47
14 | 		c-1.36,1.06-2.61,2.26-3.91,3.38c-0.87,0.75-1.18,1.41-0.27,2.49c1.79,2.1,3.41,4.35,5.12,6.53c0.67,0.85,1.35,0.69,2.1,0
15 | 		c1.02-0.95,2.1-1.83,3.19-2.7C138.31,117.15,144.38,106.21,144.45,92.22z M129.48,91.59c0.14-2.14-0.22-4.44-1.01-6.71
16 | 		c-2.58-7.42-8.29-12.43-13.61-17.74c-1.06-1.06-2.2-0.91-2.93,0.25c-1.35,2.14-3.3,3.68-5.03,5.44c-1.06,1.08-1.21,1.88,0.01,2.83
17 | 		c2.86,2.23,5.46,4.73,7.62,7.65c2.3,3.12,4.62,6.23,3.48,10.55c-1.18,4.46-3.93,7.85-7.44,10.56c-1.69,1.31-2.83,3.19-4.79,4.21
18 | 		c-0.59,0.31-0.46,1.34,0.11,1.97c1.88,2.07,3.78,4.13,5.65,6.21c0.89,0.99,1.57,0.71,2.49-0.07c2.98-2.5,5.8-5.17,8.43-8.03
19 | 		C126.83,103.96,129.65,98.51,129.48,91.59z M113.98,91.96c0.15-8.4-5.32-11.5-11.39-12.89c-2.79-0.64-3.04-0.25-3.09,2.61
20 | 		c-0.01,0.74-0.28,1.46-0.35,2.16c-0.21,1.88-0.34,3.85,0,5.69c0.15,0.82,1.82,0.69,2.71,1.14c1,0.51,1.24,1.38,0.39,2.33
21 | 		c-0.67,0.75-1.46,1.35-2.46,1.49c-1.09,0.15-1.43,0.83-1.26,1.74c0.52,2.72,1.02,5.45,0.96,8.23c-0.03,1.22,0.79,0.95,1.5,1.05
22 | 		C106.61,106.29,114.79,98.38,113.98,91.96z'
23 | 			style='fill:#333333;'
24 | 		/>
25 | 	</g>
26 | </svg>
27 | 


--------------------------------------------------------------------------------
/src/svg/inlet.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg
 3 | 	xml:space='preserve'
 4 | 	style='enable-background:new 0 0 135.69 441;'
 5 | 	version='1.1'
 6 | 	viewBox='0 0 135.69 441'
 7 | 	x='0px'
 8 | 	y='0px'
 9 | >
10 | 	<g>
11 | 		<path d='M135.24,0c0,0,0,60.56-67.62,60.56S0,0,0,0s30.27,0,67.62,0S135.24,0,135.24,0z' style='fill: #FDB7AA;' />
12 | 		<path
13 | 			d='M116.27,0.2c0,0,0,43.53-48.42,43.53S19.42,0.2,19.42,0.2S41.16,0,67.9,0S116.27,0.2,116.27,0.2z'
14 | 			style='fill: #333333;'
15 | 		/>
16 | 	</g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/svg/playbar-pause.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 84 84;' version='1.1' viewBox='0 0 84 84' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M38.52,42c0,6.82-0.07,16.17,0.05,22.98c0,0-0.68-0.01-2.58-0.01c-3.57,0.01-7.15-0.02-10.73-0.01
 6 | 		c-2.21,0-2.21,0-2.21,0c0.05-13.89,0-32.06,0-45.95c0,0,0,0,2.21,0.02c3.58,0.03,7.15,0,10.73-0.01c2.13-0.01,2.58-0.01,2.58-0.01
 7 | 		C38.44,25.84,38.52,35.18,38.52,42z'
 8 | 		/>
 9 | 		<path
10 | 			d='M60.91,42c0,6.82-0.07,16.17,0.05,22.98c0,0-0.68-0.01-2.58-0.01c-3.57,0.01-7.15-0.02-10.73-0.01
11 | 		c-2.21,0-2.21,0-2.21,0c0.05-13.89,0-32.06,0-45.95c0,0,0,0,2.21,0.02c3.58,0.03,7.15,0,10.73-0.01c2.13-0.01,2.58-0.01,2.58-0.01
12 | 		C60.84,25.83,60.91,35.18,60.91,42z'
13 | 		/>
14 | 	</g>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/src/svg/playbar-play.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 84 84;' version='1.1' viewBox='0 0 84 84' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M24.19,19.01C36.3,26.7,48.03,34.14,60.18,41.85c-12.19,7.83-23.89,15.34-35.99,23.11
 6 | 	C24.19,49.55,24.19,34.64,24.19,19.01z'
 7 | 		/>
 8 | 	</g>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/svg/playbar-slider.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 84 84;' version='1.1' viewBox='0 0 84 84' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M42.13,67.02C28.24,67.05,16.97,55.8,16.98,41.93C17,28.19,28.21,16.98,41.98,16.94
 6 | 		c13.89-0.03,25.17,11.22,25.15,25.08C67.1,55.78,55.89,66.99,42.13,67.02z M42.14,25.02c-9.35-0.03-17.07,7.62-17.07,16.94
 7 | 		c-0.01,9.23,7.57,16.91,16.77,16.99c9.37,0.08,17.14-7.51,17.2-16.81C59.1,32.78,51.47,25.05,42.14,25.02z'
 8 | 		/>
 9 | 		<path
10 | 			d='M42.14,25.02c9.33,0.03,16.96,7.76,16.9,17.11c-0.06,9.3-7.83,16.9-17.2,16.81c-9.2-0.08-16.78-7.76-16.77-16.99
11 | 		C25.08,32.64,32.8,24.98,42.14,25.02z'
12 | 		/>
13 | 	</g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/svg/radiogroup-row.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 72 72;' version='1.1' viewBox='0 0 72 72' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M72,72c-24,0-48,0-72,0C0,48,0,24,0,0c24,0,48,0,72,0C72,24,72,48,72,72z M56.4,36.1
 6 | 		c0-11.5-8.9-20.7-20.4-20.7c-13.1,0-20.7,11-20.6,20.6c0,12.6,11.8,20.7,20.6,20.7C48.5,56.7,56.5,46.1,56.4,36.1z'
 7 | 			style='fill:#333333;'
 8 | 		/>
 9 | 	</g>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/src/svg/toggle.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 96 96;' version='1.1' viewBox='0 0 96 96' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M96,96c-32,0-64,0-96,0C0,64,0,32,0,0c32,0,64,0,96,0C96,32,96,64,96,96z M67.78,22.33C61.26,28.9,54.71,35.48,47.9,42.34
 6 | 		c-6.76-6.78-13.32-13.35-19.71-19.76c-1.98,1.88-3.87,3.69-6.14,5.85c6.66,6.61,13.25,13.16,20.31,20.16
 7 | 		c-6.61,6.58-13.19,13.13-19.61,19.51c1.7,1.73,3.49,3.55,5.45,5.54c6.53-6.55,13.09-13.12,19.92-19.97
 8 | 		c6.74,6.75,13.29,13.33,19.69,19.73c1.98-1.88,3.87-3.69,6.14-5.85c-6.66-6.62-13.25-13.16-20.31-20.16
 9 | 		c6.61-6.58,13.19-13.13,19.61-19.52C71.55,26.16,69.76,24.34,67.78,22.33z'
10 | 			style='fill:#333333;'
11 | 		/>
12 | 	</g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/src/svg/umenu-arrow.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8' ?>
 2 | <svg xml:space='preserve' style='enable-background:new 0 0 44.5 88;' version='1.1' viewBox='0 0 44 88' x='0px' y='0px'>
 3 | 	<g>
 4 | 		<path
 5 | 			d='M21.8,51.8c-5.27-5.3-10.92-10.99-16.48-16.59c10.98,0,22.31,0,33.15,0C32.98,40.67,27.27,46.35,21.8,51.8z'
 6 | 			style='fill:#F7F7F7;'
 7 | 		/>
 8 | 	</g>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
1 | // dependencies
2 | /// <reference types="vite/client" />
3 | /// <reference types="vite-plugin-svgr/client" />
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		// type checking
 4 | 		"allowUnreachableCode": false,
 5 | 		"allowUnusedLabels": false,
 6 | 		"alwaysStrict": true,
 7 | 		"exactOptionalPropertyTypes": true,
 8 | 		"noFallthroughCasesInSwitch": true,
 9 | 		"noImplicitAny": true,
10 | 		"noImplicitOverride": true,
11 | 		"noImplicitReturns": true,
12 | 		"noImplicitThis": true,
13 | 		"noPropertyAccessFromIndexSignature": false,
14 | 		"noUncheckedIndexedAccess": true,
15 | 		"noUnusedLocals": true,
16 | 		"noUnusedParameters": true,
17 | 		"strict": true,
18 | 		"strictBindCallApply": true,
19 | 		"strictFunctionTypes": true,
20 | 		"strictNullChecks": true,
21 | 		"strictPropertyInitialization": true,
22 | 		"useUnknownInCatchVariables": true,
23 | 		// modules
24 | 		"module": "ESNext",
25 | 		"moduleResolution": "node",
26 | 		"resolveJsonModule": true,
27 | 		// emit
28 | 		"noEmit": true,
29 | 		// javascript support
30 | 		"allowJs": false,
31 | 		// interop constraints
32 | 		"allowImportingTsExtensions": true,
33 | 		"allowSyntheticDefaultImports": true,
34 | 		"esModuleInterop": true,
35 | 		"forceConsistentCasingInFileNames": true,
36 | 		"isolatedModules": true,
37 | 		// language and environment
38 | 		"jsx": "react-jsx",
39 | 		"lib": ["dom", "dom.iterable", "ESNext"],
40 | 		"target": "ESNext",
41 | 		// completeness
42 | 		"skipLibCheck": true
43 | 	},
44 | 	"include": ["src"],
45 | 	"references": [{ "path": "./tsconfig.node.json" }]
46 | }
47 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"allowSyntheticDefaultImports": true,
 4 | 		"composite": true,
 5 | 		"module": "ESNext",
 6 | 		"moduleResolution": "Node",
 7 | 		"resolveJsonModule": true,
 8 | 		"skipLibCheck": true,
 9 | 		"strict": true
10 | 	},
11 | 	"include": ["vite.config.ts", "package.json"]
12 | }
13 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import react from '@vitejs/plugin-react-swc'
 2 | // biome-ignore lint/correctness/noNodejsModules: This script is ran by NodeJS.
 3 | import { resolve } from 'node:path'
 4 | import { defineConfig } from 'vite'
 5 | import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 6 | import dts from 'vite-plugin-dts'
 7 | import svgr from 'vite-plugin-svgr'
 8 | 
 9 | // https://vitejs.dev/config/
10 | export default defineConfig({
11 | 	build: {
12 | 		copyPublicDir: false,
13 | 		lib: {
14 | 			entry: resolve(__dirname, 'src/index.ts'),
15 | 			formats: ['es'],
16 | 		},
17 | 		minify: 'esbuild',
18 | 		rollupOptions: {
19 | 			external: ['react', 'react/jsx-runtime'],
20 | 			output: { entryFileNames: '[name].js', manualChunks: undefined },
21 | 		},
22 | 		target: 'ESNext',
23 | 	},
24 | 	esbuild: { legalComments: 'none' },
25 | 	plugins: [cssInjectedByJsPlugin(), dts({ include: ['src'] }), react(), svgr()],
26 | })
27 | 


--------------------------------------------------------------------------------