{"_id":"42-components","_rev":"3-af87b5d5f0630ac32730560048463228","name":"42-components","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.0":{"name":"42-components","version":"0.0.0","_id":"42-components@0.0.0","maintainers":[{"name":"josecortez1","email":"jose.vazcortez@gmail.com"}],"dist":{"shasum":"cd91b02282a8094df37019c4473b01f6626a6064","tarball":"https://registry.npmjs.org/42-components/-/42-components-0.0.0.tgz","fileCount":269,"integrity":"sha512-PWVINHqf3Cp1iSqZBwU7j5MTbOyMDVLvGjvmPDW3W6GZ6OvpBXTKJ0n0AnWccexwJoXV3H1Y+UgPu2aoEmUO2Q==","signatures":[{"sig":"MEUCIQC1RQd73h5L2Y6RRIlTgeNZq8YePHNDpXGWGzvFotHNZAIgR4l4hZLxAlsf02RGyRjmscDlkV2mFeQEyHHRsLBNzVE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":582041},"type":"module","_from":"file:42-components-0.0.0.tgz","engines":{"node":">=24"},"private":false,"scripts":{"lint":"eslint .","test":"vitest run","build":"pnpm -r --filter \"./packages/*\" run build","format":"prettier --write .","release":"pnpm build && pnpm -r --filter \"./packages/*\" publish --no-git-checks","storybook":"storybook dev -p 6006","typecheck":"tsc -b --pretty","test:watch":"vitest","build-storybook":"storybook build"},"_npmUser":{"name":"josecortez1","email":"jose.vazcortez@gmail.com"},"_resolved":"/tmp/4665c7dab9055457129e3a772659c3bd/42-components-0.0.0.tgz","_integrity":"sha512-PWVINHqf3Cp1iSqZBwU7j5MTbOyMDVLvGjvmPDW3W6GZ6OvpBXTKJ0n0AnWccexwJoXV3H1Y+UgPu2aoEmUO2Q==","_npmVersion":"11.13.0","description":"Headless UI component library (vanilla TypeScript) with optional theme.","directories":{},"_nodeVersion":"24.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","eslint":"^9.13.0","vitest":"^2.1.4","globals":"^15.11.0","prettier":"^3.3.3","storybook":"^8.3.0","@eslint/js":"^9.13.0","emoji-mart":"^5.6.0","typescript":"^5.6.3","@types/node":"^22.7.0","@storybook/html":"^8.3.0","vite-plugin-dts":"^4.3.0","@emoji-mart/data":"^1.2.1","typescript-eslint":"^8.10.0","@storybook/html-vite":"^8.3.0","@testing-library/dom":"^10.4.0","@storybook/addon-a11y":"^8.3.0","@storybook/addon-essentials":"^8.3.0","@testing-library/user-event":"^14.5.2"},"_npmOperationalInternal":{"tmp":"tmp/42-components_0.0.0_1782236836350_0.25321397711399096","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"42-components","version":"0.0.1","_id":"42-components@0.0.1","maintainers":[{"name":"josecortez1","email":"jose.vazcortez@gmail.com"}],"dist":{"shasum":"8fac852c8b3aa280ec3d406857bc1f7f0db96a4d","tarball":"https://registry.npmjs.org/42-components/-/42-components-0.0.1.tgz","fileCount":657,"integrity":"sha512-2rGOvUxxegjGIGS98EsMnEabUtI4oMPlfOUTKlFphzyOj+CkvbB3ZS1JMVLV+25T28XoI8fZ0MYpklesGvZuxQ==","signatures":[{"sig":"MEYCIQCawjh+2uDDukUVZrfWYfx0c+BHvXHS6XvdGj5RG8+snwIhAJstKnkuYd1PLsiGtdnA6pT5q9kRzLMUIgJ3QanKJQwB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1675188},"type":"module","_from":"file:42-components-0.0.1.tgz","engines":{"node":">=24"},"private":false,"scripts":{"lint":"eslint .","test":"vitest run","build":"pnpm -r --filter \"./packages/*\" run build","format":"prettier --write .","release":"pnpm build && pnpm -r --filter \"./packages/*\" publish --no-git-checks","storybook":"storybook dev -p 6006","typecheck":"tsc -b --pretty","docs:check":"node scripts/generate-docs.mjs --check","test:watch":"vitest","docs:generate":"node scripts/generate-docs.mjs","build-storybook":"storybook build"},"_npmUser":{"name":"josecortez1","email":"jose.vazcortez@gmail.com"},"_resolved":"/tmp/55a4ea332bac692e6eeb377417276342/42-components-0.0.1.tgz","_integrity":"sha512-2rGOvUxxegjGIGS98EsMnEabUtI4oMPlfOUTKlFphzyOj+CkvbB3ZS1JMVLV+25T28XoI8fZ0MYpklesGvZuxQ==","_npmVersion":"11.13.0","description":"Headless UI component library (vanilla TypeScript) with optional theme.","directories":{},"_nodeVersion":"24.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","eslint":"^9.13.0","vitest":"^2.1.4","globals":"^15.11.0","prettier":"^3.3.3","storybook":"^8.3.0","@eslint/js":"^9.13.0","emoji-mart":"^5.6.0","typescript":"^5.6.3","@types/node":"^22.7.0","@storybook/html":"^8.3.0","vite-plugin-dts":"^4.3.0","@emoji-mart/data":"^1.2.1","typescript-eslint":"^8.10.0","@storybook/html-vite":"^8.3.0","@testing-library/dom":"^10.4.0","@storybook/addon-a11y":"^8.3.0","@storybook/addon-essentials":"^8.3.0","@testing-library/user-event":"^14.5.2"},"_npmOperationalInternal":{"tmp":"tmp/42-components_0.0.1_1782757826366_0.8296771153508675","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"42-components","version":"0.0.2","private":false,"type":"module","description":"Headless UI component library (vanilla TypeScript) with optional theme.","devDependencies":{"@changesets/cli":"^2.27.11","@emoji-mart/data":"^1.2.1","@eslint/js":"^9.13.0","@storybook/addon-a11y":"^8.3.0","@storybook/addon-essentials":"^8.3.0","@storybook/html":"^8.3.0","@storybook/html-vite":"^8.3.0","@testing-library/dom":"^10.4.0","@testing-library/user-event":"^14.5.2","@types/node":"^22.7.0","emoji-mart":"^5.6.0","eslint":"^9.13.0","globals":"^15.11.0","jsdom":"^25.0.1","prettier":"^3.3.3","storybook":"^8.3.0","typescript":"^5.6.3","typescript-eslint":"^8.10.0","vite":"^5.4.10","vite-plugin-dts":"^4.3.0","vitest":"^2.1.4"},"engines":{"node":">=24"},"scripts":{"build":"pnpm -r --filter \"./packages/*\" run build","test":"vitest run","test:watch":"vitest","lint":"eslint .","format":"prettier --write .","typecheck":"tsc -b --pretty","storybook":"storybook dev -p 6006","build-storybook":"storybook build","docs:generate":"node scripts/generate-docs.mjs","docs:check":"node scripts/generate-docs.mjs --check","manifest:generate":"node scripts/generate-manifest.mjs","manifest:check":"node scripts/generate-manifest.mjs --check","changeset":"changeset","version-packages":"changeset version","release":"pnpm build && changeset publish"},"_id":"42-components@0.0.2","_integrity":"sha512-tTPiA0w8T1lhpHOdGzHNPz7Ra70EO2vv0DVpwHtgQHIFGxmBfJFshbA7/cPYCkd3xAGqsa569DjrAR5SOvrFOA==","_resolved":"/tmp/4b875193e3366a64d7ed69a9b4db9d75/42-components-0.0.2.tgz","_from":"file:42-components-0.0.2.tgz","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-tTPiA0w8T1lhpHOdGzHNPz7Ra70EO2vv0DVpwHtgQHIFGxmBfJFshbA7/cPYCkd3xAGqsa569DjrAR5SOvrFOA==","shasum":"e92f4b8ba3ce68d52c287a4b4b6e929b3b95e051","tarball":"https://registry.npmjs.org/42-components/-/42-components-0.0.2.tgz","fileCount":899,"unpackedSize":2252976,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB5P/IoPA0e7KeTrzpmROzkszyP5eAfsNiooo+jZ5UqAAiBhvCAzGZz8meoCCtvmGbR479LrrAX1yUJNxjuATARieA=="}]},"_npmUser":{"name":"josecortez1","email":"jose.vazcortez@gmail.com"},"directories":{},"maintainers":[{"name":"josecortez1","email":"jose.vazcortez@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/42-components_0.0.2_1782841185378_0.17962869273402648"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-23T17:47:16.305Z","modified":"2026-06-30T17:39:45.706Z","0.0.0":"2026-06-23T17:47:16.489Z","0.0.1":"2026-06-29T18:30:26.535Z","0.0.2":"2026-06-30T17:39:45.607Z"},"description":"Headless UI component library (vanilla TypeScript) with optional theme.","maintainers":[{"name":"josecortez1","email":"jose.vazcortez@gmail.com"}],"readme":"# @42-components\n\nHeadless UI component library in vanilla TypeScript, with optional theme.\n\n## Packages\n\n| Package | Description |\n| --- | --- |\n| `@42/core` | Framework-agnostic headless controllers (subpath exports per component). |\n| `@42/styles` | Optional theme (CSS custom properties, dark mode included). |\n\n## Components\n\nGrouped by what you are trying to do. Full per-component reference (markup,\noptions, events) lives in [`docs/llm/reference/`](docs/llm/reference/); complex\ncomponents have a deep dive in [`docs/llm/`](docs/llm/).\n\n| Category | Use it when… | Reference |\n| --- | --- | --- |\n| Inputs & Forms | you capture data from the user | [inputs.md](docs/llm/reference/inputs.md) |\n| Overlays | you need a transient layer above content | [overlays.md](docs/llm/reference/overlays.md) |\n| Navigation | you move around or structure a flow | [navigation.md](docs/llm/reference/navigation.md) |\n| Data & Collections | you display or manipulate sets of data | [data.md](docs/llm/reference/data.md) |\n| Media | you show images or people | [media.md](docs/llm/reference/media.md) |\n| Feedback & Status | you communicate state, progress or an action | [feedback.md](docs/llm/reference/feedback.md) |\n| Disclosure & Layout | you show or hide regions of content | [disclosure.md](docs/llm/reference/disclosure.md) |\n| Presentational (CSS-only) | you just need styles, no controller | [presentational.md](docs/llm/reference/presentational.md) |\n\n## Development\n\n```bash\npnpm install\npnpm test            # vitest (jsdom)\npnpm build           # build all publishable packages\npnpm storybook       # run Storybook (HTML + Vite)\n```\n\n## Usage\n\n```bash\nnpm install @42/core @42/styles\n```\n\n```html\n<div data-c42-accordion>\n  <div data-c42-accordion-item data-value=\"a\">\n    <button data-c42-accordion-trigger>Title</button>\n    <div data-c42-accordion-panel>Content</div>\n  </div>\n</div>\n```\n\n```ts\nimport { Accordion } from '@42/core/accordion';\nimport '@42/styles/accordion.css'; // optional theme\n\nconst acc = new Accordion(document.querySelector('[data-c42-accordion]')!, { multiple: false });\nacc.on('accordion:change', (e) => console.log(e.detail.value));\n```\n\n### Form validation\n\nThe `Form` controller turns native inputs into a validated, accessible form\n(ARIA wiring, error states, typed events) without imposing styles:\n\n```html\n<form data-c42-form>\n  <div data-c42-field>\n    <label for=\"email\">Email</label>\n    <input id=\"email\" name=\"email\" type=\"email\" data-c42-validate=\"required email\" />\n    <span data-c42-field-error hidden></span>\n  </div>\n  <button type=\"submit\">Sign up</button>\n</form>\n```\n\n```ts\nimport { Form } from '@42/core/form';\nimport '@42/styles/form.css'; // optional theme\n\nconst form = new Form(document.querySelector('[data-c42-form]')!, { mode: 'blur' });\nform.on('form:submit', (e) => console.log(e.detail.values)); // only fires when valid\nform.on('form:invalid', (e) => console.log(e.detail.errors));\n```\n\nSee [`docs/llm/form.md`](docs/llm/form.md) for rules, options and recipes.\n\n## Theming\n\nImport `@42/styles` for the complete theme. Customize by overriding primitives:\n\n```css\n:root {\n  --c42-primary-500: #0ea5e9;\n  --c42-primary-600: #0284c7;\n}\n```\n\nDark mode activates automatically via `prefers-color-scheme` or with `data-theme=\"dark\"` on `<html>`.\n\nThe full theme also applies a thin, subtle global scrollbar (tunable via\n`--c42-scrollbar-size` / `--c42-scrollbar-thumb` / `--c42-scrollbar-thumb-hover`,\nor import `@42/styles/scrollbar.css` standalone).\n\n## AI agents\n\nSee [`LLM.md`](LLM.md) for the complete component reference optimized for AI consumption.\n","readmeFilename":"README.md"}