{"_id":"@16-bits-design/ui","_rev":"2-576244f403a0e4f7fae180df187b0756","name":"@16-bits-design/ui","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@16-bits-design/ui","version":"0.1.0","license":"MIT","_id":"@16-bits-design/ui@0.1.0","maintainers":[{"name":"maxigimenez","email":"gimenez.maxi@gmail.com"}],"homepage":"https://github.com/maxigimenez/16-bits-design#readme","bugs":{"url":"https://github.com/maxigimenez/16-bits-design/issues"},"dist":{"shasum":"5a128cc758fc7c5e313962661c2c6dd9f56dd304","tarball":"https://registry.npmjs.org/@16-bits-design/ui/-/ui-0.1.0.tgz","fileCount":91,"integrity":"sha512-kDRXl6uswATYLZ53s1DqqLLbkYIpHqTtqkPuv0/Z96uCQBU62DleC8QkRfM5ew2ZK4EpIkOLB54F9D9OfT9hzQ==","signatures":[{"sig":"MEQCIFeSoxbtq7xro+uAb4ouYCXtxZIOrZx/dTfO9MQ9LBXnAiBJCQToEjKjNKWr/Qb6qtG9hVUolJySMAiEKiIGzuacdA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":298021},"main":"./dist/index.cjs","type":"module","style":"./dist/styles.css","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./card":{"types":"./dist/card.d.ts","import":"./dist/card.js","require":"./dist/card.cjs"},"./badge":{"types":"./dist/badge.d.ts","import":"./dist/badge.js","require":"./dist/badge.cjs"},"./input":{"types":"./dist/input.d.ts","import":"./dist/input.js","require":"./dist/input.cjs"},"./meter":{"types":"./dist/meter.d.ts","import":"./dist/meter.js","require":"./dist/meter.cjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.js","require":"./dist/theme.cjs"},"./toast":{"types":"./dist/toast.d.ts","import":"./dist/toast.js","require":"./dist/toast.cjs"},"./avatar":{"types":"./dist/avatar.d.ts","import":"./dist/avatar.js","require":"./dist/avatar.cjs"},"./button":{"types":"./dist/button.d.ts","import":"./dist/button.js","require":"./dist/button.cjs"},"./dialog":{"types":"./dist/dialog.d.ts","import":"./dist/dialog.js","require":"./dist/dialog.cjs"},"./select":{"types":"./dist/select.d.ts","import":"./dist/select.js","require":"./dist/select.cjs"},"./toggle":{"types":"./dist/toggle.d.ts","import":"./dist/toggle.js","require":"./dist/toggle.cjs"},"./textarea":{"types":"./dist/textarea.d.ts","import":"./dist/textarea.js","require":"./dist/textarea.cjs"},"./styles.css":"./dist/styles.css","./typography":{"types":"./dist/typography.d.ts","import":"./dist/typography.js","require":"./dist/typography.cjs"},"./package.json":"./package.json"},"gitHead":"0b220f241337c7e64cd2cb54e0dcf68698c4c997","scripts":{"dev":"storybook dev -p 6006","lint":"eslint . --max-warnings=0","test":"vitest run","build":"tsup && node scripts/copy-styles.mjs","check":"eslint . --max-warnings=0 && tsc --noEmit && vitest run && tsup && node scripts/copy-styles.mjs && node scripts/verify-package.mjs && storybook build","prepack":"tsup && node scripts/copy-styles.mjs","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","test:watch":"vitest","verify:package":"node scripts/verify-package.mjs","build-storybook":"storybook build"},"_npmUser":{"name":"maxigimenez","email":"gimenez.maxi@gmail.com"},"devEngines":{"runtime":{"name":"node","onFail":"error","version":"24.13.1"}},"repository":{"url":"git+https://github.com/maxigimenez/16-bits-design.git","type":"git"},"_npmVersion":"11.8.0","description":"A reusable, themeable React component library with a pixel-sharp visual language.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"24.13.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.29.2","devDependencies":{"tsup":"8.5.1","vite":"8.2.2","react":"19.2.8","eslint":"10.9.1","vitest":"4.1.11","globals":"17.11.0","happy-dom":"20.12.0","react-dom":"19.2.8","storybook":"10.5.10","@eslint/js":"10.0.1","typescript":"6.0.2","@types/node":"26.4.0","@types/react":"19.2.18","@types/react-dom":"19.2.5","typescript-eslint":"8.69.0","@vitejs/plugin-react":"6.1.1","@storybook/addon-a11y":"10.5.10","@storybook/addon-docs":"10.5.10","@storybook/react-vite":"10.5.10","@testing-library/react":"16.3.3","@testing-library/jest-dom":"7.0.1","eslint-plugin-react-hooks":"7.1.1","@testing-library/user-event":"14.6.6","eslint-plugin-react-refresh":"0.5.5"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"optionalDependencies":{"@rolldown/binding-darwin-arm64":"1.2.6","@oxc-parser/binding-darwin-arm64":"0.127.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1788289092196_0.2900993525275295","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@16-bits-design/ui","version":"0.2.0","description":"A reusable, themeable React component library with a pixel-sharp visual language.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/maxigimenez/16-bits-design.git"},"homepage":"https://github.com/maxigimenez/16-bits-design#readme","bugs":{"url":"https://github.com/maxigimenez/16-bits-design/issues"},"type":"module","sideEffects":["./dist/styles.css"],"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/styles.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./alert":{"types":"./dist/alert.d.ts","import":"./dist/alert.js","require":"./dist/alert.cjs"},"./avatar":{"types":"./dist/avatar.d.ts","import":"./dist/avatar.js","require":"./dist/avatar.cjs"},"./badge":{"types":"./dist/badge.d.ts","import":"./dist/badge.js","require":"./dist/badge.cjs"},"./button":{"types":"./dist/button.d.ts","import":"./dist/button.js","require":"./dist/button.cjs"},"./card":{"types":"./dist/card.d.ts","import":"./dist/card.js","require":"./dist/card.cjs"},"./code":{"types":"./dist/code.d.ts","import":"./dist/code.js","require":"./dist/code.cjs"},"./dialog":{"types":"./dist/dialog.d.ts","import":"./dist/dialog.js","require":"./dist/dialog.cjs"},"./empty-state":{"types":"./dist/empty-state.d.ts","import":"./dist/empty-state.js","require":"./dist/empty-state.cjs"},"./input":{"types":"./dist/input.d.ts","import":"./dist/input.js","require":"./dist/input.cjs"},"./meter":{"types":"./dist/meter.d.ts","import":"./dist/meter.js","require":"./dist/meter.cjs"},"./select":{"types":"./dist/select.d.ts","import":"./dist/select.js","require":"./dist/select.cjs"},"./spinner":{"types":"./dist/spinner.d.ts","import":"./dist/spinner.js","require":"./dist/spinner.cjs"},"./segmented":{"types":"./dist/segmented.d.ts","import":"./dist/segmented.js","require":"./dist/segmented.cjs"},"./table":{"types":"./dist/table.d.ts","import":"./dist/table.js","require":"./dist/table.cjs"},"./textarea":{"types":"./dist/textarea.d.ts","import":"./dist/textarea.js","require":"./dist/textarea.cjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.js","require":"./dist/theme.cjs"},"./toast":{"types":"./dist/toast.d.ts","import":"./dist/toast.js","require":"./dist/toast.cjs"},"./toggle":{"types":"./dist/toggle.d.ts","import":"./dist/toggle.js","require":"./dist/toggle.cjs"},"./typography":{"types":"./dist/typography.d.ts","import":"./dist/typography.js","require":"./dist/typography.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"scripts":{"build":"tsup && node scripts/copy-styles.mjs","dev":"storybook dev -p 6006","storybook":"storybook dev -p 6006","build-storybook":"storybook build","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","lint":"eslint . --max-warnings=0","verify:package":"node scripts/verify-package.mjs","check":"eslint . --max-warnings=0 && tsc --noEmit && vitest run && tsup && node scripts/copy-styles.mjs && node scripts/verify-package.mjs && storybook build","prepack":"tsup && node scripts/copy-styles.mjs"},"devDependencies":{"@eslint/js":"10.0.1","@storybook/addon-a11y":"10.5.10","@storybook/addon-docs":"10.5.10","@storybook/react-vite":"10.5.10","@testing-library/jest-dom":"7.0.1","@testing-library/react":"16.3.3","@testing-library/user-event":"14.6.6","@types/node":"26.4.0","@types/react":"19.2.18","@types/react-dom":"19.2.5","@vitejs/plugin-react":"6.1.1","eslint":"10.9.1","eslint-plugin-react-hooks":"7.1.1","eslint-plugin-react-refresh":"0.5.5","globals":"17.11.0","happy-dom":"20.12.0","react":"19.2.8","react-dom":"19.2.8","storybook":"10.5.10","tsup":"8.5.1","typescript":"6.0.2","typescript-eslint":"8.69.0","vite":"8.2.2","vitest":"4.1.11"},"packageManager":"pnpm@10.29.2","engines":{"node":">=18.18"},"devEngines":{"runtime":{"name":"node","version":"24.13.1","onFail":"error"}},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"publishConfig":{"access":"public"},"optionalDependencies":{"@oxc-parser/binding-darwin-arm64":"0.127.0","@rolldown/binding-darwin-arm64":"1.2.6"},"gitHead":"4802a13497dfd329a1c95f5f88a4c7386f37b786","_id":"@16-bits-design/ui@0.2.0","_nodeVersion":"24.13.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-ecUe0rLcYZFoBZsfSXZ9VaSscc5r4CuV81H4B1oHAnk3Xc97mQ1LFwOiLYEllR1C8oWEksNmdC8GDuoK+oHdUA==","shasum":"2d3f3ac8059769cf832a3b198dc3c217f903f1b8","tarball":"https://registry.npmjs.org/@16-bits-design/ui/-/ui-0.2.0.tgz","fileCount":127,"unpackedSize":395028,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@16-bits-design%2fui@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC2fQ1lBngYHY9UZwtwyZs4G59s6uUHsTffCW7Ddv8qSAIgU+8s6cnSKnAhNwuy7fMoUdCUfzvlKU5fKfrLEg7GatM="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:a1f88d1c-435f-4308-9d52-716c3a782208"}},"directories":{},"maintainers":[{"name":"maxigimenez","email":"gimenez.maxi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.2.0_1788423217811_0.21842931544317912"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-01T18:58:12.052Z","modified":"2026-09-03T08:13:38.400Z","0.1.0":"2026-09-01T18:58:12.375Z","0.2.0":"2026-09-03T08:13:37.976Z"},"bugs":{"url":"https://github.com/maxigimenez/16-bits-design/issues"},"license":"MIT","homepage":"https://github.com/maxigimenez/16-bits-design#readme","repository":{"type":"git","url":"git+https://github.com/maxigimenez/16-bits-design.git"},"description":"A reusable, themeable React component library with a pixel-sharp visual language.","maintainers":[{"name":"maxigimenez","email":"gimenez.maxi@gmail.com"}],"readme":"# 16 Bits Design\n\nA reusable, themeable React component library with a dark, pixel-sharp visual language. It combines square geometry, stepped motion, 2px borders, offset shadows, a high-contrast signal palette, JetBrains Mono body type, and Silkscreen display type.\n\n## Install\n\nInstall one package:\n\n```sh\npnpm add @16-bits-design/ui\n```\n\nImport the stylesheet once at your application entry point, then import components from the root barrel or focused subpaths:\n\n```tsx\nimport '@16-bits-design/ui/styles.css';\nimport { ThemeProvider } from '@16-bits-design/ui/theme';\nimport { Button } from '@16-bits-design/ui/button';\nimport { Card, CardContent, CardHeader, CardTitle } from '@16-bits-design/ui/card';\n\nexport function App() {\n return (\n \n \n Ready\n \n \n \n );\n}\n```\n\nThe root barrel is available when a consolidated import is preferable:\n\n```tsx\nimport { Button, Card, ThemeProvider } from '@16-bits-design/ui';\n```\n\nAll JavaScript entry points ship ESM, CommonJS, and TypeScript declarations. Explicit component subpaths keep the public API stable and allow consumers to include only the component modules they use.\n\n## Public entry points\n\n- `@16-bits-design/ui`\n- `@16-bits-design/ui/alert`\n- `@16-bits-design/ui/avatar`\n- `@16-bits-design/ui/badge`\n- `@16-bits-design/ui/button`\n- `@16-bits-design/ui/card`\n- `@16-bits-design/ui/code`\n- `@16-bits-design/ui/dialog`\n- `@16-bits-design/ui/empty-state`\n- `@16-bits-design/ui/input`\n- `@16-bits-design/ui/meter`\n- `@16-bits-design/ui/select`\n- `@16-bits-design/ui/spinner`\n- `@16-bits-design/ui/segmented`\n- `@16-bits-design/ui/table`\n- `@16-bits-design/ui/textarea`\n- `@16-bits-design/ui/theme`\n- `@16-bits-design/ui/toast`\n- `@16-bits-design/ui/toggle`\n- `@16-bits-design/ui/typography`\n- `@16-bits-design/ui/styles.css`\n\n### Code\n\nUse block `Code` for logs, JSON, prompts, and other preformatted machine text. The required label names its keyboard-focusable horizontal scroll region so long lines remain inside the component. Use the inline variant for identifiers and short fragments.\n\n```tsx\nimport { Code } from '@16-bits-design/ui/code';\n\n{JSON.stringify(route, null, 2)}\n\n
Deployment dpl_8f32c1 is ready.
\n```\n\n### EmptyState\n\nUse `EmptyState` to explain an absence and offer the next useful action. Descriptions stay within a readable measure, the default pixel motif follows the active theme, and `headingLevel` preserves the surrounding document hierarchy.\n\n```tsx\nimport { EmptyState } from '@16-bits-design/ui/empty-state';\nimport { Button } from '@16-bits-design/ui/button';\n\nCreate deployment}\n>\n Create a deployment to connect a repository and start tracking releases.\n\n```\n\n### Spinner\n\nUse `Spinner` for indeterminate waits. Its required label is announced through a polite live region, can remain visible or be visually hidden, and the stepped animation becomes a static bar when reduced motion is requested.\n\n```tsx\nimport { Spinner } from '@16-bits-design/ui/spinner';\n\n\n```\n\n### Segmented\n\nUse `Segmented` for a small set of mutually exclusive filters or views that apply immediately. Each option is an individually Tab-reachable button with `aria-pressed`; the component supports controlled and uncontrolled state.\n\n```tsx\nimport { Segmented } from '@16-bits-design/ui/segmented';\n\n\n```\n\n### Alert\n\nUse `Alert` for persistent inline feedback that must remain available in the page. Danger alerts use `role=\"alert\"`; info, warning, and success alerts use the quieter `role=\"status\"`. Actions remain explicit composable controls.\n\n```tsx\nimport { Alert } from '@16-bits-design/ui/alert';\nimport { Button } from '@16-bits-design/ui/button';\n\nRetry}\n>\n The service returned an unexpected response.\n\n```\n\n### Table\n\nUse the composable table primitives for genuinely tabular data. `Table` keeps wide content inside a keyboard-focusable horizontal scroll region; give that region a context-specific `scrollLabel`. End-aligned cells use tabular numerals automatically.\n\n```tsx\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@16-bits-design/ui/table';\n\n
\n```\n\n## Theming\n\nThe stylesheet bundles Latin JetBrains Mono and Silkscreen font files. CSS custom properties are the theming API; JavaScript configuration is not required. Override variables globally or on any scoped container:\n\n```css\n:root {\n --bits-primary: #57d7ff;\n --bits-primary-soft: #a8ecff;\n --bits-primary-shadow: #15576b;\n --bits-surface: #081015;\n --bits-panel: #0c1820;\n --bits-text-dim: #9ab6c2;\n}\n```\n\nBuilt-in themes are `ember` (the warm, orange original) and `ocean` (blue/cyan). Apply one with `data-bits-theme=\"ocean\"` on ordinary HTML, or use `ThemeProvider` when scoped themes and portalled components are needed.\n\nThe public variables cover surfaces, borders, text, semantic colors, shadows and backdrops, typography, font sizes, spacing, border width, and focus rings. Every public variable is prefixed with `--bits-`.\n\nUse `--bits-text-dim` for readable subordinate interface text, such as inactive navigation; reserve `--bits-text-muted` for supporting metadata and placeholders.\n\nThe theme's bare-element typography and link rules are low-specificity defaults built\nwith `:where()`. A single application class can therefore override them without selector\nduplication or `!important`.\n\nThe styling is fully custom CSS built on namespaced classes and CSS custom properties. It has no Tailwind dependency, CSS-in-JS runtime, or consumer build-plugin requirement.\n\n## Development\n\n```sh\nnvm use\npnpm install\npnpm storybook\npnpm check\n```\n\nThe workspace is pinned to Node 24.13.1 through `.nvmrc` and `engines`. `pnpm check` runs ESLint, TypeScript, unit tests, the distributable package build, and the static Storybook build.\n","readmeFilename":"README.md"}