{"_id":"@aoctech/ui","_rev":"2-10f5ede60242bf43f77593a4bdd943ee","name":"@aoctech/ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aoctech/ui","version":"0.1.0","keywords":["react","tailwind","design-system","ctech"],"author":{"name":"Artur Oliveira"},"license":"MIT","_id":"@aoctech/ui@0.1.0","maintainers":[{"name":"aoctech","email":"dev@aoctech.app"}],"homepage":"https://github.com/artur-oliveira/ctech-ui#readme","bugs":{"url":"https://github.com/artur-oliveira/ctech-ui/issues"},"dist":{"shasum":"cbf912a8b42de1e755faed561e31e01f3f070cdb","tarball":"https://registry.npmjs.org/@aoctech/ui/-/ui-0.1.0.tgz","fileCount":39,"integrity":"sha512-J99+sGz3yITFi41BehschsmDw3BYmuiZHwbLqEFonG/9cef1GNtPD12dhPMzohMxGeeGsUwwQ6n3kUKa4X/nGg==","signatures":[{"sig":"MEUCIQDNBkd8adIQib8OHqJQnZRlC4Y7nfufxWLSiy6zZfUVqgIgLf8rp3QrCZH4Tvj1fB29J0/TuUiPJUG/HypOPhIgCO0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45048},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=24"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./themes.css":"./dist/themes.css"},"gitHead":"406ce0620a2aa1c6346cbed13694916b425e9496","scripts":{"test":"npm run build","build":"tsc -p tsconfig.json && node scripts/copy-styles.mjs","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"aoctech","email":"dev@aoctech.app"},"repository":{"url":"git+https://github.com/artur-oliveira/ctech-ui.git","type":"git"},"_npmVersion":"11.16.0","description":"Shared CTech UI primitives: Base UI behaviour, Tailwind classes, no colours of its own. Themed entirely by the consuming app's CSS variables.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.6.0","react-day-picker":"^9.14.0","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.1","react":"^19.2.8","react-dom":"^19.2.8","typescript":"^6.0.3","@types/react":"^19.2.18","@base-ui/react":"^1.7.0","@types/react-dom":"^19.2.4","@tailwindcss/vite":"^4.3.3","@storybook/react-vite":"^10.5.8"},"peerDependencies":{"react":">=18","react-dom":">=18","@base-ui/react":">=1.7.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1786897911285_0.8150511657277257","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aoctech/ui","version":"0.1.1","description":"Shared CTech UI primitives: Base UI behaviour, Tailwind classes, no colours of its own. Themed entirely by the consuming app's CSS variables.","repository":{"type":"git","url":"git+https://github.com/artur-oliveira/ctech-ui.git"},"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./themes.css":"./dist/themes.css"},"publishConfig":{"access":"public"},"peerDependencies":{"@base-ui/react":">=1.7.0","react":">=18","react-dom":">=18"},"dependencies":{"class-variance-authority":"^0.7.1","clsx":"^2.1.1","react-day-picker":"^9.14.0","tailwind-merge":"^3.6.0"},"scripts":{"build":"tsc -p tsconfig.json && node scripts/copy-styles.mjs","test":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"keywords":["react","tailwind","design-system","ctech"],"author":{"name":"Artur Oliveira"},"license":"MIT","devDependencies":{"@base-ui/react":"^1.7.0","@storybook/react-vite":"^10.5.8","@tailwindcss/vite":"^4.3.3","@types/react":"^19.2.18","@types/react-dom":"^19.2.4","react":"^19.2.8","react-dom":"^19.2.8","typescript":"^6.0.3","vite":"^8.2.1"},"engines":{"node":">=24"},"gitHead":"bfe0acd6878a0c30d78955bed4d709609ab3f5d1","_id":"@aoctech/ui@0.1.1","bugs":{"url":"https://github.com/artur-oliveira/ctech-ui/issues"},"homepage":"https://github.com/artur-oliveira/ctech-ui#readme","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-sDhFfS1BIx14UiHvKSJe9oe8M1h+CN5RRG8Z1JkRQEL6mvdPToWM0fBytXhsH3jBMevhDyxUjK5c3+ayk1ooSw==","shasum":"7f9192d513fd36bd9cfc9d3051be08d48f15b049","tarball":"https://registry.npmjs.org/@aoctech/ui/-/ui-0.1.1.tgz","fileCount":39,"unpackedSize":45731,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aoctech%2fui@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC9rPCwTEkiDq7zAW1Bqo1WlzZjVz4vEgUC1UhDImQ9KQIgbX7vhSOI0q+dwztIkVCfx4oikNGtynV1ANb9v/kTVPE="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d97d0485-6f25-4af3-87a8-1c2236f047f8"}},"directories":{},"maintainers":[{"name":"aoctech","email":"dev@aoctech.app"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.1_1786898638677_0.17550508322442138"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T16:31:51.121Z","modified":"2026-08-16T16:43:59.080Z","0.1.0":"2026-08-16T16:31:51.419Z","0.1.1":"2026-08-16T16:43:58.812Z"},"bugs":{"url":"https://github.com/artur-oliveira/ctech-ui/issues"},"author":{"name":"Artur Oliveira"},"license":"MIT","homepage":"https://github.com/artur-oliveira/ctech-ui#readme","keywords":["react","tailwind","design-system","ctech"],"repository":{"type":"git","url":"git+https://github.com/artur-oliveira/ctech-ui.git"},"description":"Shared CTech UI primitives: Base UI behaviour, Tailwind classes, no colours of its own. Themed entirely by the consuming app's CSS variables.","maintainers":[{"name":"aoctech","email":"dev@aoctech.app"}],"readme":"# @aoctech/ui\n\nThe CTech component vocabulary, in one place. Base UI provides accessible behaviour; this package\nowns the semantic token contract and ships official themes for Account, DFE, Wallet, Poker and\nBilling. Each product keeps its identity without forking interactions or accessibility.\n\n```sh\nnpm i @aoctech/ui\n```\n\n## The consumer supplies two things\n\n### 1. The official theme contract\n\nImport the shared tokens once and scope an official theme at the product root. The application may\nextend a theme, but it must not redefine semantic status meaning.\n\n```css\n@import \"tailwindcss\";\n@import \"@aoctech/ui/styles.css\";\n\n@theme inline {\n  --color-background: var(--background);\n  --color-surface: var(--surface);\n  --color-foreground: var(--foreground);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-border: var(--border);\n  --color-ring: var(--ring);\n  --color-brand-50: var(--brand-50);\n  --color-brand-600: var(--brand-600);\n  --color-brand-700: var(--brand-700);\n  --color-success: var(--success);\n  --color-warning: var(--warning);\n  --color-danger: var(--danger);\n  --color-danger-strong: var(--danger-strong);\n  --shadow-modal: var(--shadow-modal);\n}\n```\n\n```tsx\nimport {ThemeProvider} from \"@aoctech/ui\"\n\nexport function App() {\n  return <ThemeProvider theme=\"billing\"><BillingApp /></ThemeProvider>\n}\n```\n\n### 2. The `@source` line\n\nTailwind v4 only emits classes it can see. It does not scan `node_modules` by default, so without\nthis the components ship with no styles at all — the single most likely thing to go wrong on first\ninstall.\n\n```css\n@source \"../node_modules/@aoctech/ui/dist\";\n```\n\n## Theme and status are separate contracts\n\n`account`, `dfe`, `wallet`, `poker` and `billing` change action, focus, surfaces and brand hue.\nThe `success`, `warning` and `danger` roles remain consistent. A new product theme is added only\nafter its palette and contrast states are documented in Storybook.\n\n## Density is a property of the surface\n\nControls are touch-sized by default (44px). A dense surface opts down by setting one attribute on\nits root, and every control inside follows:\n\n```tsx\n<div data-density=\"compact\">…</div>   {/* 32px controls */}\n```\n\nThat is why `Button` has no `size=\"console\"`: height is decided by where a button is, not by each\ncall site remembering which screen it is on.\n\n## Brand colour and status colour never meet\n\n`Button variant=\"brand\"` is the only place brand colour appears. `Badge` carries the four status\ntones — `neutral`, `positive`, `attention`, `urgent` — and they are **fixed**: never recoloured to\nmatch a surface's accent.\n\nThe reason is legibility across the family. An operator who learns that a green badge means settled\nhas to be able to read that on every screen of every CTech app; a tone that shifts with the surface\nis a tone that has to be relearned per app. It also keeps warm-brand apps honest — billing's\nterracotta sits near its own danger red, and the rule is what stops the two ever rendering on one\ncomponent. (Separating them by role was necessary and not sufficient: billing also had to pull its\nbrand chroma down until `danger` was the only saturated colour on a screen.)\n\nThe four tones are the same closed set the CTech APIs emit alongside a human-readable state string,\nso a badge renders what the server said rather than a client-side mapping of an internal enum.\n\n## What's here\n\n| Component | Notes |\n|---|---|\n| `Button` | Variants `brand` · `outline` · `ghost` · `danger` · `link`. Density-aware. |\n| `Input` + `Field` | Visible labels, hint/error copy and invalid state vocabulary. |\n| `Alert` | Info, success, warning and danger feedback. |\n| `Badge` | The four status tones. Pair with a glyph — never colour alone. |\n| `Modal` | Base UI `Dialog`: real focus trap, scroll lock, restore focus, Escape. |\n| `PageHeader` | One h1, one optional line, one optional action. |\n| `EmptyState` | Title, description, optional action. |\n| `Skeleton` | Honours `prefers-reduced-motion`. |\n| `Separator` | Horizontal and vertical. |\n\nDeliberately small. Components arrive when a second app needs one, not in anticipation — the whole\npoint of extracting this was to stop maintaining four copies, and a component with one consumer is\nstill one copy.\n\nThe extraction queue and non-domain boundaries live in [docs/component-inventory.md](docs/component-inventory.md). The source palette references and the rules for adding a product live in [docs/theme-registry.md](docs/theme-registry.md).\n\n## Storybook\n\n```sh\nnpm run storybook\n```\n\nThe catalogue includes a theme registry and a state-coverage page. Its toolbar switches all five\nthemes and density modes, which makes visual drift visible before a component release.\n\n## Peers\n\n`react >=18`, `react-dom >=18`, `@base-ui/react >=1.7`, and Tailwind v4 in the consuming app.\n","readmeFilename":"README.md"}