{"_id":"@alanzli/zui","_rev":"3-9c114ca28fdecedf55085d258b653a53","name":"@alanzli/zui","dist-tags":{"latest":"2.0.1","@alanzli/zui@2.0.1-rc1":"2.0.1-rc1"},"versions":{"2.0.0":{"name":"@alanzli/zui","version":"2.0.0","keywords":[],"author":{"name":"Alan Z Li"},"license":"MIT","_id":"@alanzli/zui@2.0.0","maintainers":[{"name":"alanzli","email":"li.zha.alan@gmail.com"}],"dist":{"shasum":"2ab7e8e6b84d3d9b03c354b01ea892ea1b61da40","tarball":"https://registry.npmjs.org/@alanzli/zui/-/zui-2.0.0.tgz","fileCount":18,"integrity":"sha512-jEMfGriBwc8HDup7GSShzIEmhLWT3h8vI/aq0Y/AUDRc1WkDFNhw78/I21yHA9U37TO3X0nH0vPR6Lqot01j8Q==","signatures":[{"sig":"MEUCIEYK2RhwNtR5Q69ZUlpEUHHjyDAf2/GhbvNKczgQGA7fAiEAsRKA0NrWac/WVWJP3SCfQL4X7jU7QeIM5qXqmcgw7Hg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":743253},"type":"module","types":"./zui.d.ts","module":"./zui.js","exports":{".":{"import":"./zui.js","default":"./zui.js"},"./zui.css":"./zui.css","./zui-theme.css":"./zui-theme.css","./zui-elements.css":"./zui-elements.css","./zui-patterns.css":"./zui-patterns.css","./zui-utilities.css":"./zui-utilities.css","./zui-animations.css":"./zui-animations.css","./zui-theme-soft.css":"./zui-theme-soft.css","./zui-theme-glass.css":"./zui-theme-glass.css","./zui-theme-metal.css":"./zui-theme-metal.css","./zui-theme-bright.css":"./zui-theme-bright.css","./zui-theme-liquid.css":"./zui-theme-liquid.css","./zui-theme-borderless.css":"./zui-theme-borderless.css","./zui-theme-high-contrast.css":"./zui-theme-high-contrast.css"},"gitHead":"e466fbf9c45abf5bd020d0884c93a657d2d56ab6","_npmUser":{"name":"alanzli","email":"li.zha.alan@gmail.com"},"_npmVersion":"11.3.0","description":"A minimalist UI system ","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.2.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/zui_2.0.0_1762741772918_0.7190253145275622","host":"s3://npm-registry-packages-npm-production"}},"2.0.1-rc1":{"name":"@alanzli/zui","version":"2.0.1-rc1","keywords":[],"author":{"name":"Alan Z Li"},"license":"MIT","_id":"@alanzli/zui@2.0.1-rc1","maintainers":[{"name":"alanzli","email":"li.zha.alan@gmail.com"}],"dist":{"shasum":"5bb7f846f97a708168327211af48d3883742c2eb","tarball":"https://registry.npmjs.org/@alanzli/zui/-/zui-2.0.1-rc1.tgz","fileCount":18,"integrity":"sha512-uQmfISsQmidMEEJqnkPPr4mIAMfWgbB66o+kFFpO8g0cAc2yBgkSZkNPpJpdb512pqLG3bfWuDmAr4cWddspOg==","signatures":[{"sig":"MEUCIQCt2PEx6EDz0O3wPH31Hg09XYbBSMw1gn2QUhK8ZqlvfwIgHGQdGjtRne2b/cnGs3bHh/dFO4QNDVWJohz8bWsiyQI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":747306},"type":"module","types":"./zui.d.ts","module":"./zui.js","exports":{".":{"import":"./zui.js","default":"./zui.js"},"./zui.css":"./zui.css","./zui-theme.css":"./zui-theme.css","./zui-elements.css":"./zui-elements.css","./zui-patterns.css":"./zui-patterns.css","./zui-utilities.css":"./zui-utilities.css","./zui-animations.css":"./zui-animations.css","./zui-theme-soft.css":"./zui-theme-soft.css","./zui-theme-glass.css":"./zui-theme-glass.css","./zui-theme-metal.css":"./zui-theme-metal.css","./zui-theme-bright.css":"./zui-theme-bright.css","./zui-theme-liquid.css":"./zui-theme-liquid.css","./zui-theme-borderless.css":"./zui-theme-borderless.css","./zui-theme-high-contrast.css":"./zui-theme-high-contrast.css"},"gitHead":"20bd915efada33959e428fb5b2903402d9762499","_npmUser":{"name":"alanzli","email":"li.zha.alan@gmail.com"},"_npmVersion":"11.3.0","description":"A minimalist UI system ","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.2.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/zui_2.0.1-rc1_1762745887680_0.43936983099378346","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@alanzli/zui","version":"2.0.1","description":"A minimalist UI system ","author":{"name":"Alan Z Li"},"type":"module","module":"./zui.js","types":"./zui.d.ts","exports":{".":{"import":"./zui.js","default":"./zui.js"},"./zui.css":"./zui.css","./zui-theme.css":"./zui-theme.css","./zui-elements.css":"./zui-elements.css","./zui-utilities.css":"./zui-utilities.css","./zui-theme-high-contrast.css":"./zui-theme-high-contrast.css","./zui-theme-borderless.css":"./zui-theme-borderless.css","./zui-theme-soft.css":"./zui-theme-soft.css","./zui-theme-liquid.css":"./zui-theme-liquid.css","./zui-theme-glass.css":"./zui-theme-glass.css","./zui-theme-metal.css":"./zui-theme-metal.css","./zui-theme-bright.css":"./zui-theme-bright.css","./zui-patterns.css":"./zui-patterns.css","./zui-animations.css":"./zui-animations.css"},"sideEffects":["*.css"],"license":"MIT","keywords":[],"gitHead":"607695bf2fe5023b77fa3a95bdf98483d7ae2c02","_id":"@alanzli/zui@2.0.1","_nodeVersion":"24.11.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-Tr142Dy3VTbz4MPM6GcqMyuLpT2/b/+3kxr/dpkpQ8J798hkzlog8MiQUWiew4aE8pJnWSNkL5CrDqfvkU5BMA==","shasum":"3afe6d96aa90a33c1f214df06f64b3748ea5cac9","tarball":"https://registry.npmjs.org/@alanzli/zui/-/zui-2.0.1.tgz","fileCount":18,"unpackedSize":741641,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCET5fe3AEeZw1n3e9PlatcBqbCyNy15W0jrvLfnmjcbgIhAJtwvohyelQO/4oFFIS1Fld+oklD1dclogK0UTY5vWaD"}]},"_npmUser":{"name":"alanzli","email":"li.zha.alan@gmail.com"},"directories":{},"maintainers":[{"name":"alanzli","email":"li.zha.alan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/zui_2.0.1_1762753789268_0.8601127219477982"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-10T02:29:32.824Z","modified":"2025-11-10T05:49:50.009Z","2.0.0":"2025-11-10T02:29:33.214Z","2.0.1-rc1":"2025-11-10T03:38:07.915Z","2.0.1":"2025-11-10T05:49:49.512Z"},"author":{"name":"Alan Z Li"},"license":"MIT","keywords":[],"description":"A minimalist UI system ","maintainers":[{"name":"alanzli","email":"li.zha.alan@gmail.com"}],"readme":"# zui TypeScript setup\n\nThis project is configured for a minimal TypeScript development workflow.\n\n## Theme tokens (light/dark variants)\n\nZUI exposes color tokens with explicit light/dark variants so you can reference a theme color directly regardless of the current theme. Non-suffixed tokens remain theme-aware and map to the appropriate variant automatically.\n\n- Always-available variants (examples):\n    - `--surface-light`, `--surface-dark`\n    - `--text-light`, `--text-dark`\n    - `--border-light`, `--border-dark`\n    - Semantic sets include `--secondary(-contrast)`, `--info(-contrast)`, `--success(-contrast)`, `--warning(-contrast)`, `--danger(-contrast)` with `-light`/`-dark` suffixes.\n\n- Theme-aware base tokens (map automatically):\n    - `--surface`, `--text`, `--border`, `--primary`, `--secondary`, `--info`, `--success`, `--warning`, `--danger`\n    - These resolve to their `-light` values by default and switch to `-dark` in dark mode (via `prefers-color-scheme: dark` or `[data-theme=\"dark\"]`).\n\n### Recommended usage\n\n- For theme-aware styling (preferred):\n    - `background: var(--surface);`\n    - `color: var(--text);`\n\n- For forcing a specific theme value regardless of current theme:\n    - `background: var(--surface-dark); // always use dark surface`\n    - `border-color: var(--border-light); // always use light border`\n\n- To force the theme for a subtree:\n    - Add `[data-theme=\"light\"]` or `[data-theme=\"dark\"]` on any container to remap base tokens inside it.\n\n### Overriding tokens\n\nYou can override base tokens or the variants at any scope. For example, tweak the sticky navbar behavior:\n\n```css\n.my-page {\n    --zui-nav-sticky-top: 12px;\n    --zui-nav-sticky-z: 100;\n}\n```\n\nThis keeps components configurable purely via CSS, without touching TypeScript.\n\n## Built-in themes and guidance\n\nZUI ships with multiple swappable themes. Use `swapZuiTheme(href)` at runtime or the demo navbar cycler.\n\n- Base (`zui-theme.css`): Balanced default with light translucency and neutral palette.\n- High Contrast (`zui-theme-high-contrast.css`): Stronger contrast for readability and accessibility.\n- Borderless (`zui-theme-borderless.css`): Removes borders, relies on elevation; `--border-width: 0`.\n- Soft (`zui-theme-soft.css`): Pastel look, gentle elevation on buttons, borderless by default.\n- Liquid (`zui-theme-liquid.css`): Fluid, high-blur glass with cool hues and saturated accents.\n- Glass (`zui-theme-glass.css`): Neutral frosted glass aesthetic with balanced translucency.\n- Metal (`zui-theme-metal.css`): Fully opaque—no translucency/backdrop blur; crisp panels.\n- Bright (`zui-theme-bright.css`): Vivid saturated palette with crisp whites and moderate translucency.\n\nDesign tips:\n\n- Prefer theme tokens (e.g., `--surface`, `--text`) to avoid hard-coding colors.\n- For borderless variants, use `var(--border-width)` in component borders so themes can set 0 cleanly.\n- Use elevation (`--shadow-*`, surface opacity) to separate layers when borders are minimized.\n\nRuntime API:\n\n- `getAvailableThemes()` returns descriptors of built-in themes (id, href, kind, translucency).\n- `swapZuiTheme(href)` replaces the active theme `<link>` at runtime.\n\n## Scripts\n\n- `npm run dev` — run the entry file with tsx in watch mode\n- `npm run typecheck` — run the TypeScript type checker without emitting files\n- `npm run build` — compile TypeScript to `dist/`\n- `npm start` — run compiled JavaScript from `dist/`\n\n## Files\n\n- `tsconfig.json` — TypeScript compiler configuration\n- `src/index.ts` — example entry with an exported function\n\n## Getting started\n\n1. Install dependencies\n2. Start in watch mode or build\n","readmeFilename":"README.md"}