{"_id":"@buschschwick/uac-ui","_rev":"2-e9e3bdabdfd073126088d6f9e50c049c","name":"@buschschwick/uac-ui","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.1":{"name":"@buschschwick/uac-ui","version":"1.0.1","keywords":["react","mui","material-ui","components","design-system","brutalist","monospace","dark"],"author":{"name":"Eric Stout","email":"ericwstout@gmail.com"},"license":"Unlicense","_id":"@buschschwick/uac-ui@1.0.1","maintainers":[{"name":"buschschwick","email":"ericwstout@gmail.com"}],"homepage":"https://erwstout.github.io/uac-ui/","bugs":{"url":"https://github.com/erwstout/uac-ui/issues"},"dist":{"shasum":"0cd0f7ee640f47a414b5fa0f0f2b552d9206fbe9","tarball":"https://registry.npmjs.org/@buschschwick/uac-ui/-/uac-ui-1.0.1.tgz","fileCount":17,"integrity":"sha512-KrQKbpaBzSMKcER57dfuX1aIudLNo9x8zyVcXLf1QQ0a1CKf+u1xHQV7m88flaVB/6Efrn6rb/bKH6HTT2yjnw==","signatures":[{"sig":"MEYCIQCxk46a7+cB4txuk2/YX1sG8PNLextWt9mb8xs+kBb6lgIhAIEzu4yI4jzj8YvfqBD2XWflbcltSQLefEVvulThhzsw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":142594},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./theme":{"types":"./dist/theme/index.d.ts","import":"./dist/theme/index.js","require":"./dist/theme/index.cjs"},"./package.json":"./package.json"},"gitHead":"c27bc5714e41f0f31d91502a5b236c492fc5e22a","scripts":{"dev":"tsup --watch","lint":"eslint \"src/**/*.{ts,tsx}\"","build":"tsup","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"buschschwick","email":"ericwstout@gmail.com"},"repository":{"url":"git+https://github.com/erwstout/uac-ui.git","type":"git"},"_npmVersion":"11.16.0","description":"Black-and-white brutalist monospace component library for React, built on Material UI.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.0","vite":"^5.4.11","react":"^18.3.1","eslint":"^9.9.0","react-dom":"^18.3.1","storybook":"^8.3.0","@eslint/js":"^9.9.0","typescript":"^5.6.3","@mui/system":"^6.5.0","@types/react":"^18.3.12","@mui/material":"^6.5.0","@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@types/react-dom":"^18.3.1","semantic-release":"^25.0.3","typescript-eslint":"^8.8.0","@vitejs/plugin-react":"^4.3.4","@semantic-release/git":"^10.0.1","@storybook/react-vite":"^8.3.0","eslint-plugin-storybook":"^0.9.0","eslint-plugin-react-hooks":"^5.0.0","@semantic-release/changelog":"^6.0.3"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@mui/system":"^6.0.0","@mui/material":"^6.0.0","@emotion/react":"^11.5.0","@emotion/styled":"^11.3.0"},"_npmOperationalInternal":{"tmp":"tmp/uac-ui_1.0.1_1780508378941_0.5233954231427504","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@buschschwick/uac-ui","version":"1.1.0","description":"Black-and-white brutalist monospace component library for React, built on Material UI.","keywords":["react","mui","material-ui","components","design-system","brutalist","monospace","dark"],"author":{"name":"Eric Stout","email":"ericwstout@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/erwstout/uac-ui.git"},"homepage":"https://erwstout.github.io/uac-ui/","bugs":{"url":"https://github.com/erwstout/uac-ui/issues"},"license":"Unlicense","type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./theme":{"types":"./dist/theme/index.d.ts","import":"./dist/theme/index.js","require":"./dist/theme/index.cjs"},"./package.json":"./package.json"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","lint":"eslint \"src/**/*.{ts,tsx}\"","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build"},"peerDependencies":{"@emotion/react":"^11.5.0","@emotion/styled":"^11.3.0","@mui/material":"^6.0.0","@mui/system":"^6.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@eslint/js":"^9.9.0","@mui/material":"^6.5.0","@mui/system":"^6.5.0","@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@storybook/react-vite":"^8.3.0","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4","eslint":"^9.9.0","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-storybook":"^0.9.0","react":"^18.3.1","react-dom":"^18.3.1","semantic-release":"^25.0.3","storybook":"^8.3.0","tsup":"^8.3.0","typescript":"^5.6.3","typescript-eslint":"^8.8.0","vite":"^5.4.11"},"publishConfig":{"access":"public"},"engines":{"node":">=18"},"gitHead":"03c13c819ce9b8b7d55a5de98546adda5abe32be","_id":"@buschschwick/uac-ui@1.1.0","_nodeVersion":"22.22.3","_npmVersion":"11.16.0","dist":{"integrity":"sha512-bBbp9+D33yKXPg1cT1TxvzYl+OmwxDC33KwmrCUIlp7eMIoDcJSKGikhWP+T7uejCQl82wVPRBTkV0lJrqjnxg==","shasum":"c588aefb004a315f532254d267b4326f9eb525a0","tarball":"https://registry.npmjs.org/@buschschwick/uac-ui/-/uac-ui-1.1.0.tgz","fileCount":17,"unpackedSize":254691,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIATwqADOkng/Plc05P1Jh9nvDr+rng1Gj6t4GIHJUYAIAiEAldYnf1WqQkGZUhGX0/7/dTLZqAUIi1NAMYMK78qTMkg="}]},"_npmUser":{"name":"buschschwick","email":"ericwstout@gmail.com"},"directories":{},"maintainers":[{"name":"buschschwick","email":"ericwstout@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/uac-ui_1.1.0_1780510851876_0.39581691719084655"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-03T17:39:38.816Z","modified":"2026-06-03T18:20:52.113Z","1.0.1":"2026-06-03T17:39:39.091Z","1.1.0":"2026-06-03T18:20:52.003Z"},"bugs":{"url":"https://github.com/erwstout/uac-ui/issues"},"author":{"name":"Eric Stout","email":"ericwstout@gmail.com"},"license":"Unlicense","homepage":"https://erwstout.github.io/uac-ui/","keywords":["react","mui","material-ui","components","design-system","brutalist","monospace","dark"],"repository":{"type":"git","url":"git+https://github.com/erwstout/uac-ui.git"},"description":"Black-and-white brutalist monospace component library for React, built on Material UI.","maintainers":[{"name":"buschschwick","email":"ericwstout@gmail.com"}],"readme":"# @buschschwick/uac-ui\n\nA black-and-white **brutalist monospace** component library for React, built on\n[Material UI](https://mui.com). It packages the design language used by `cord`\nand `wave-viewer` — pure black surfaces, white text, monospace type, sharp\ncorners, no shadows, structure defined by 1px borders at varying opacity — as a\nreusable MUI theme plus a small set of themed components.\n\n## Install\n\n```bash\nnpm install @buschschwick/uac-ui @mui/material @mui/system @emotion/react @emotion/styled\n# (react and react-dom are expected to already be in your app)\n```\n\n`@mui/material`, `@mui/system`, `@emotion/react`, `@emotion/styled`, `react`, and\n`react-dom` are **peer dependencies** — your app provides them, so there's only\none copy of React/emotion at runtime.\n\n## Usage\n\nWrap your app once in `UacThemeProvider`, then import themed components from the\npackage:\n\n```tsx\nimport {\n  UacThemeProvider,\n  Panel,\n  SectionLabel,\n  Button,\n  Input,\n} from \"@buschschwick/uac-ui\";\n\nexport default function App() {\n  return (\n    <UacThemeProvider>\n      <Panel padding={6}>\n        <SectionLabel>chords</SectionLabel>\n        <Input placeholder=\"search chords…\" fullWidth />\n        <Button variant=\"outlined\">add</Button>\n        <Button variant=\"contained\">save</Button> {/* inverted white/black */}\n      </Panel>\n    </UacThemeProvider>\n  );\n}\n```\n\nNo Tailwind is required in the consuming app — all styling ships via emotion in\nthe theme.\n\n### Components\n\n`UacThemeProvider`, `Panel`, `SectionLabel`, `Input`, `Modal`, `ColorField`,\nplus themed MUI re-exports: `Button`, `IconButton`, `TextField`, `Chip`, `Tabs`,\n`Tab`, `Select`, `MenuItem`, `Dialog`, `Card`, `Paper`, `ToggleButton`,\n`ToggleButtonGroup`, `Typography`, `Box`, `Stack`, `Container`, `Grid`,\n`Divider`, `Collapse`, `Slider`, `Switch`, `FormControl`, `FormControlLabel`,\n`InputLabel`, `Menu`, `Tooltip`, `CircularProgress`, `Link`.\n\nBecause the look lives entirely in the theme, you can also use any other MUI\ncomponent imported directly from `@mui/material` and it will match.\n\n## Color switching\n\nThe default look is black/white, but the whole UI can be recolored at runtime —\nthis is what powers `wave-viewer`'s background/primary color picker. Give\n`UacThemeProvider` a background and a primary color; the **foreground** (text,\nborders, the muted alpha ramp) is derived automatically for readable contrast,\nflipping to dark text on light backgrounds.\n\n```tsx\nimport { UacThemeProvider, ColorField, useUacColors } from \"@buschschwick/uac-ui\";\n\nfunction ColorControls() {\n  // Read and update the live theme colors from anywhere in the tree.\n  const { backgroundColor, primaryColor, setBackgroundColor, setPrimaryColor } =\n    useUacColors();\n  return (\n    <>\n      <ColorField label=\"background\" value={backgroundColor} onChange={setBackgroundColor} />\n      <ColorField label=\"primary\" value={primaryColor} onChange={setPrimaryColor} />\n    </>\n  );\n}\n\nexport default function App() {\n  return (\n    // Uncontrolled: the provider owns the colors. (Or drive them with the\n    // controlled `backgroundColor` / `primaryColor` + `onColorsChange` props.)\n    <UacThemeProvider defaultBackgroundColor=\"#000000\" defaultPrimaryColor=\"#4ade80\">\n      <ColorControls />\n      {/* ...the rest of the app recolors live... */}\n    </UacThemeProvider>\n  );\n}\n```\n\n`createUacTheme` accepts the same colors directly, alongside the color-math\nhelpers (`readableForeground`, `withAlpha`, `alphaRamp`, …) re-exported from the\npackage for use in non-MUI surfaces such as a `<canvas>`:\n\n```ts\nimport { createUacTheme, readableForeground } from \"@buschschwick/uac-ui\";\n\nconst theme = createUacTheme({ backgroundColor: \"#101418\", primaryColor: \"#ff4d4d\" });\nconst textColor = readableForeground(\"#101418\"); // \"#ffffff\"\n```\n\n## Theme & tokens\n\nUse the theme without the provider, or merge customizations on top:\n\n```ts\nimport { createUacTheme, uacTheme } from \"@buschschwick/uac-ui\";\n\nconst theme = createUacTheme({\n  palette: { primary: { main: \"#00e5ff\" } }, // deep-merged onto the base\n});\n```\n\nRaw design tokens are exported from the `/theme` subpath for non-MUI use (for\nexample, styling a `<canvas>`):\n\n```ts\nimport { tokens } from \"@buschschwick/uac-ui/theme\";\n\nctx.strokeStyle = tokens.color.whiteAlpha[40];\nctx.font = `14px ${tokens.font.mono}`;\n```\n\n## Development\n\n```bash\nnpm install\nnpm run storybook      # visual playground / living docs at :6006\nnpm run build          # bundle to dist/ (ESM + CJS + .d.ts) via tsup\nnpm run typecheck\nnpm run lint\n```\n\n## License\n\n[Unlicense](./LICENSE) — public domain.\n","readmeFilename":"README.md"}