{"_id":"@abh80/lithium-prism","name":"@abh80/lithium-prism","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abh80/lithium-prism","version":"1.0.0","description":"Standalone Web Components UI kit; a fork of imput/helium-prism, ported from Svelte to native custom elements","type":"module","packageManager":"pnpm@11.5.0","license":"GPL-3.0-only","author":{"name":"abh80"},"repository":{"type":"git","url":"git+https://github.com/abh80/lithium-prism.git"},"bugs":{"url":"https://github.com/abh80/lithium-prism/issues"},"homepage":"https://github.com/abh80/lithium-prism#readme","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./element/*":{"types":"./dist/components/*.d.ts","default":"./dist/components/*.js"},"./lithium.css":"./dist/lithium.css","./package.json":"./package.json"},"sideEffects":["**/*.css","src/index.ts","src/components/*.ts"],"scripts":{"dev":"vite","build":"vite build && tsc --emitDeclarationOnly --outDir dist","build:demo":"vite build --config vite.demo.config.ts","deploy":"pnpm build:demo && wrangler deploy","check":"tsc --noEmit","lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --write .","format:check":"prettier --check .","test":"vitest run","test:watch":"vitest"},"devDependencies":{"@eslint/js":"^9.0.0","eslint":"^9.0.0","eslint-config-prettier":"^9.1.0","globals":"^15.0.0","happy-dom":"^15.0.0","prettier":"^3.3.0","typescript":"^5.6.0","typescript-eslint":"^8.0.0","vite":"^6.0.0","vitest":"^2.1.0"},"engines":{"node":">=22.13"},"gitHead":"0ebbd9e26379163c1e2e55fde9d6fd958666846b","_id":"@abh80/lithium-prism@1.0.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-PY42eSN5+kINevWnKxiowkaFiK6hbR4qKyGybI0MUDIdys5ILgRpu6vEF2PFrJLH+H0iIFqGUTUh++1SMuEG1w==","shasum":"e95ad11270ae5b36ac8e4c72f38bf28e4023e132","tarball":"https://registry.npmjs.org/@abh80/lithium-prism/-/lithium-prism-1.0.0.tgz","fileCount":50,"unpackedSize":126172,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCiPzYZ7shSS9MW4mhoGjr6wyEvDvSXIBPESyBU3zVavQIgAkvPZwpm/x4bg9308PJwvSA/XmHmkxKci8ZgXEPqaxw="}]},"_npmUser":{"name":"abh78989","email":"techixspotify@gmail.com"},"directories":{},"maintainers":[{"name":"abh78989","email":"techixspotify@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lithium-prism_1.0.0_1780379357600_0.6509887712351474"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-02T05:49:17.486Z","1.0.0":"2026-06-02T05:49:17.741Z","modified":"2026-06-02T05:49:17.912Z"},"maintainers":[{"name":"abh78989","email":"techixspotify@gmail.com"}],"description":"Standalone Web Components UI kit; a fork of imput/helium-prism, ported from Svelte to native custom elements","homepage":"https://github.com/abh80/lithium-prism#readme","repository":{"type":"git","url":"git+https://github.com/abh80/lithium-prism.git"},"author":{"name":"abh80"},"bugs":{"url":"https://github.com/abh80/lithium-prism/issues"},"license":"GPL-3.0-only","readme":"# lithium-prism\n\nStandalone, framework-agnostic UI kit built on native Web Components (custom elements). It ships\nthe building blocks used by web interfaces with typography, buttons, toggles, inputs, loading states,\nicons, and the brand gradient shimmer effect with with zero runtime framework dependency. Drop the\nelements into any page or framework (React, Vue, Svelte, plain HTML, etc.).\n\n> [!NOTE]\n> lithium-prism is a fork of [imput/helium-prism](https://github.com/imputnet/helium-prism), ported\n> from Svelte to native Web Components. Licensed GPL-3.0-only. Original work © The Helium Authors.\n\n## Installation\n\npnpm:\n\n```sh\npnpm add @abh80/lithium-prism\n```\n\n## Usage\n\n### Import the barrel (registers every element)\n\nImport the package root once near your app entry point to register all custom elements, then import\nthe stylesheet:\n\n```js\nimport \"@abh80/lithium-prism\";\nimport \"@abh80/lithium-prism/lithium.css\";\n```\n\nOnce registered, use the elements anywhere in your markup:\n\n```html\n<lit-button primary>Button</lit-button>\n<lit-button>Button 2</lit-button>\n<lit-toggle></lit-toggle>\n<lit-icon name=\"copy\"></lit-icon>\n```\n\n### Per-element imports\n\nTo register only the elements you use, import them individually:\n\n```js\nimport \"@abh80/lithium-prism/element/lit-button\";\nimport \"@abh80/lithium-prism/element/lit-toggle\";\nimport \"@abh80/lithium-prism/lithium.css\";\n```\n\n### CDN (no bundler)\n\nEach element can be loaded directly in the browser as an ES module:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@abh80/lithium-prism/dist/lithium.css\" />\n<script type=\"module\">\n    import \"https://unpkg.com/@abh80/lithium-prism/element/lit-button\";\n</script>\n\n<lit-button primary>Button</lit-button>\n```\n\n## Elements\n\nAll elements are registered with a `lit-` prefix:\n\n- `lit-button` — buttons (boolean attributes such as `primary`, `circle`, `card`, `transparent`,\n  plus `disabled` and `type`)\n- `lit-toggle` — toggle switch\n- `lit-checkbox` — checkbox\n- `lit-input` — text input\n- `lit-text` — typography\n- `lit-spinner` — loading spinner\n- `lit-skeleton` — skeleton placeholder\n- `lit-gradient-shimmer` — brand gradient shimmer effect\n- `lit-card-link`, `lit-outer-link` — link surfaces\n- `lit-search-bar` — search bar\n- `lit-tooltip` — tooltip\n- `lit-dropdown` — dropdown\n- `lit-copy-icon` — copy-to-clipboard icon\n- `lit-icon` — icon by name, e.g. `<lit-icon name=\"copy\"></lit-icon>`\n- `lit-helium-logo`, `lit-helium-text` — brand mark and wordmark\n\n## Theming\n\nlithium-prism derives every color from four CSS custom properties. Override them on\n`:root` (or any subtree — variables pierce the shadow DOM):\n\n| Variable            | Controls                                                                    | Light default           |\n| ------------------- | --------------------------------------------------------------------------- | ----------------------- |\n| `--lithium-accent`  | Action color: primary button, toggle-on, checkbox, focus, links             | `#3450d1`               |\n| `--lithium-bg`      | Page background                                                             | `#fbfcff`               |\n| `--lithium-surface` | Elevated tint base (button/input/panel backgrounds); defaults to the accent | `var(--lithium-accent)` |\n| `--lithium-fg`      | Text base (`--primary`/`--secondary`/`--tertiary` derive from it)           | `#0d1c64`               |\n\n```css\n/* Accent applies in both light and dark from a single override. */\n:root {\n    --lithium-accent: #c2410c;\n}\n\n/* Background and foreground are scheme-specific — set them per scheme. */\n:root {\n    --lithium-bg: #fff8f3;\n    --lithium-fg: #3a1d0c;\n}\n@media (prefers-color-scheme: dark) {\n    :root {\n        --lithium-bg: #160f0a;\n        --lithium-fg: #f3e9e2;\n    }\n}\n\n/* Decouple the elevated surface tint from the accent if you want neutral surfaces. */\n:root {\n    --lithium-surface: #6b7280;\n}\n```\n\nDerived shades (`hover`/`press`, the `--lithium-elevated-*` tint scale, `--secondary`,\n`--tertiary`, the background gradient) are computed from these knobs with `color-mix`, so a\nsingle override cascades through the kit. Requires a browser with `color-mix()` support\n(all evergreen browsers since 2023).\n\n## License\n\nlithium-prism is licensed under [GPL-3.0-only](LICENSE).\n\nThe icon set is sourced from a separate project under the MIT license; see\n[src/components/ICONS-LICENSE](src/components/ICONS-LICENSE).\n","readmeFilename":"README.md","_rev":"1-2e050dd85d1fa7a51602dfe2046fbd3e"}