{"_id":"@23mnals/term-ui","name":"@23mnals/term-ui","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@23mnals/term-ui","version":"0.2.0","type":"module","description":"Terminal-CLI styled React component library — 20 components, 4 phosphor themes + custom HEX picker.","keywords":["react","component-library","terminal","cli","design-system","phosphor","ui"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/23mnals/term-ui.git"},"main":"./dist-lib/term-ui.js","exports":{".":{"import":"./dist-lib/term-ui.js"},"./style.css":"./dist-lib/term-ui.css","./tokens.css":"./src/styles/tokens.css"},"scripts":{"dev":"vite","build":"vite build","build:lib":"vite build -c vite.lib.config.js","preview":"vite preview","prepare":"npm run build:lib"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","react-router-dom":"^6.26.2"},"devDependencies":{"@vitejs/plugin-react":"^4.3.1","postcss":"^8.4.47","react":"^18.3.1","react-dom":"^18.3.1","react-router-dom":"^6.26.2","vite":"^5.4.8"},"_id":"@23mnals/term-ui@0.2.0","gitHead":"a88816ab504adf6f3db7252160c83b830c44e62c","bugs":{"url":"https://github.com/23mnals/term-ui/issues"},"homepage":"https://github.com/23mnals/term-ui#readme","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-9jbX2HVGVy/9076IMTRsoD1d7TykE+9s/galQuQ1Peg+kwOu/NrSFG/98xp0GKlcqSFPCM9vMJhYyR9aJCqVGg==","shasum":"a9b89a0903ac10ea934e256be83a682077af9904","tarball":"https://registry.npmjs.org/@23mnals/term-ui/-/term-ui-0.2.0.tgz","fileCount":57,"unpackedSize":456490,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEM0hAi5VNwVMm+EEdtXhHyOF0PSlVA8pCUatnMnkFKPAiAPlax5WpmM2q9TRsu/4UYXm6STFyW/kfUL3/ac5O/mFw=="}]},"_npmUser":{"name":"ccbaka","email":"ccbakala@gmail.com"},"directories":{},"maintainers":[{"name":"ccbaka","email":"ccbakala@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/term-ui_0.2.0_1780557780805_0.14675025492062788"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-04T07:23:00.610Z","0.2.0":"2026-06-04T07:23:00.983Z","modified":"2026-06-04T07:23:01.223Z"},"maintainers":[{"name":"ccbaka","email":"ccbakala@gmail.com"}],"description":"Terminal-CLI styled React component library — 20 components, 4 phosphor themes + custom HEX picker.","homepage":"https://github.com/23mnals/term-ui#readme","keywords":["react","component-library","terminal","cli","design-system","phosphor","ui"],"repository":{"type":"git","url":"git+https://github.com/23mnals/term-ui.git"},"bugs":{"url":"https://github.com/23mnals/term-ui/issues"},"license":"MIT","readme":"# TERM/UI\n\n终端 CLI 风格的 React 组件库 + 展示站。绿磷光屏的视觉语言，20 个核心组件，4 套预设主题 + 自定义 HEX 取色，像素小手光标，全站 token 驱动。\n\n```\n>_ 20 components // 4 presets + custom hex // react + vite // 0 deps beyond react\n```\n\n## 快速开始\n\n```bash\nnpm install\nnpm run dev      # 本地开发，默认 http://localhost:5173\nnpm run build    # 产物输出到 dist/\nnpm run preview  # 预览生产构建\n```\n\n构建产物是纯静态文件，`dist/` 可直接丢到 GitHub Pages / Vercel / 任意静态托管。`vite.config.js` 里 `base: './'` + HashRouter，部署到任意子路径都不会断链。\n\n## 在别的项目里用\n\n**Demo 展示站** → [23mnals.github.io/term-ui](https://23mnals.github.io/term-ui/)\n\n任何 React 项目这样装:\n\n```bash\nnpm install @23mnals/term-ui\n```\n\n然后:\n\n```jsx\nimport {\n  Button, Modal, Toast, ThemeProvider, ToastProvider, useTheme,\n} from '@23mnals/term-ui'\nimport '@23mnals/term-ui/style.css'\n\nexport default function App() {\n  return (\n    <ThemeProvider>\n      <ToastProvider>\n        <Button variant=\"primary\">deploy</Button>\n      </ToastProvider>\n    </ThemeProvider>\n  )\n}\n```\n\n更新到最新:`npm update @23mnals/term-ui`。\n\n**Peer deps**:`react@^18` + `react-dom@^18`,用到 `Sidebar` 时还要 `react-router-dom@^6`。这些消费方项目自己装。\n\n`npm install` 时会自动跑 `prepare` 把 `dist-lib/term-ui.js` + `term-ui.css` 构建出来,所以 `dist-lib/` 不进 git。\n\n## 站点结构\n\n```\n/                      首页：打字机 hero + boot log + 主题切换\n/components/:id         组件文档：侧边栏文件树 + 实时预览 + 代码复制\n/templates              整页模板索引\n/preview/landing        模板：ACME_SYS 落地页（全屏预览）\n/preview/dashboard      模板：NODE-01 运维面板（全屏预览）\n/showcase               作品画廊\n/login                  终端风格登录页\n```\n\n## 目录\n\n```\nsrc/\n├─ styles/\n│  ├─ tokens.css        所有 design token（颜色/字号/间距/辉光）\n│  └─ global.css        reset + 扫描线/辉光/光标等共享原语\n├─ theme/\n│  ├─ themes.js         主题元数据\n│  ├─ colorUtils.js     单 hex → 整套磷光色板的颜色推导\n│  └─ ThemeProvider.jsx 主题 context（含自定义取色）+ 持久化\n├─ components/\n│  ├─ ui/               20 个核心组件（可独立复制使用）\n│  └─ site/             站点框架：导航/Logo/CRT/预览窗等\n├─ pages/               4 个页面 + 2 个整页模板\n└─ data/\n   └─ componentDocs.jsx 组件文档与示例代码注册表\n```\n\n## 主题系统\n\n颜色不在任何组件里硬编码。每套预设是 `tokens.css` 里的一个 `[data-theme]` 块，切换 = 改 `<html data-theme>` 一个属性，CSS 变量级联，全站（含组件、模板）瞬间换肤。\n\n4 套预设：`green`（默认）· `amber` · `ice` · `red`。\n\n### 自定义 HEX 取色\n\n导航栏 `--theme` 下拉里有取色器：系统取色盘 + HEX 输入框 + 快捷色；首页主题区也有一个自定义入口。\n\n原理在 `colorUtils.js`：你只给一个主色 hex，`generatePalette()` 用 HSL 推导出整套磷光色板——背景带微弱色相、正文/暗调/边框是去饱和的色阶、扫描线取主色低透明度。算出的一组 CSS 变量内联写到 `<html>` 上，覆盖预设。因为所有组件都读这些变量，加一个颜色不用改任何组件代码。\n\n## 组件清单（20）\n\n- **forms** — `Button` · `Input` · `Textarea` · `Select` · `Checkbox` · `Radio` · `Switch`\n- **layout** — `Card` · `Accordion` · `Tabs` · `WindowTabs` · `Table` · `Sidebar`\n- **feedback** — `Modal` · `Tooltip` · `Alert` · `Badge` · `Toast` · `Loading` · `Typewriter`\n\n均为受控组件，键盘可达，带 ARIA 角色。`Tabs` / `Radio` / `WindowTabs` 方向键切换，`Select` 全键盘驱动，`Modal` 焦点陷阱 + Esc + 滚动锁，`Toast` 用 `ToastProvider` + `useToast()` 从任意位置推送，`Loading` 是跟随主题色的全屏开机动画。组件 class 统一 `tm-` 前缀，可整段复制到别的项目。\n\n## 技术栈\n\nReact 18 · React Router 6（HashRouter）· Vite 5。运行期依赖只有 react / react-dom / react-router-dom，没有 UI 框架、没有 CSS 框架。\n","readmeFilename":"README.md","_rev":"1-8d95ac4bc40eff0665316900cf7abc45"}