{"_id":"@bastianplsfix/typography","name":"@bastianplsfix/typography","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bastianplsfix/typography","version":"0.1.0","description":"A semantic Text component and Tailwind CSS v4 type system: modular scale, vertical rhythm, wrapping, clamping, and OpenType utilities.","type":"module","license":"MIT","sideEffects":["*.css"],"exports":{".":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"./theme.css":"./css/theme.css","./inter.css":"./css/inter.css"},"scripts":{"build":"tsdown","dev":"tsdown --watch","test":"vitest run","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@base-ui/react":"^1.6.0","cn-variants":"^1.1.0"},"devDependencies":{"@tailwindcss/vite":"^4.3.2","@types/node":"^26.1.1","@types/react":"^19.2.17","@vitest/browser":"^4.1.10","@vitest/browser-playwright":"^4.1.10","playwright":"^1.61.1","react":"^19.2.7","react-dom":"^19.2.7","tailwindcss":"^4.3.2","tsdown":"^0.22.4","vitest":"^4.1.10"},"author":{"name":"Sebastian Nomme"},"repository":{"type":"git","url":"git+https://github.com/bastianplsfix/fonts.git","directory":"packages/typography"},"homepage":"https://github.com/bastianplsfix/fonts/tree/main/packages/typography#readme","bugs":{"url":"https://github.com/bastianplsfix/fonts/issues"},"keywords":["typography","tailwindcss","tailwind-v4","react","text","type-scale","opentype","design-system"],"main":"./dist/index.mjs","types":"./dist/index.d.mts","_id":"@bastianplsfix/typography@0.1.0","gitHead":"700d4f91f187021eb384659488335ab19494ec20","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-9vJde7l029r65KoeLVszJAqpf/olCGbqaqRhefMvorEjpQSTAmUgla8FuEN26xGFf+ouil5dhRL6UgMlaPIiXA==","shasum":"44deb2819786d7e552b925da7ba2511929f5bedf","tarball":"https://registry.npmjs.org/@bastianplsfix/typography/-/typography-0.1.0.tgz","fileCount":7,"unpackedSize":28114,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC/KGdRUpB7o7MpUK1IBZtbt0Hq+bqNqyKdEjRg7fk+5gIgcohriApFIheE13/v3SrQyodSiYEsGWAJp4eYItq4LVw="}]},"_npmUser":{"name":"bastianplsfix","email":"Sebastian.nomme@icloud.com"},"directories":{},"maintainers":[{"name":"bastianplsfix","email":"Sebastian.nomme@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/typography_0.1.0_1783536516295_0.10791806547002114"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-08T18:48:36.139Z","0.1.0":"2026-07-08T18:48:36.431Z","modified":"2026-07-08T18:48:36.682Z"},"maintainers":[{"name":"bastianplsfix","email":"Sebastian.nomme@icloud.com"}],"description":"A semantic Text component and Tailwind CSS v4 type system: modular scale, vertical rhythm, wrapping, clamping, and OpenType utilities.","homepage":"https://github.com/bastianplsfix/fonts/tree/main/packages/typography#readme","keywords":["typography","tailwindcss","tailwind-v4","react","text","type-scale","opentype","design-system"],"repository":{"type":"git","url":"git+https://github.com/bastianplsfix/fonts.git","directory":"packages/typography"},"author":{"name":"Sebastian Nomme"},"bugs":{"url":"https://github.com/bastianplsfix/fonts/issues"},"license":"MIT","readme":"# @bastianplsfix/typography\n\nA semantic `Text` React component and a Tailwind CSS v4 type system: rem-based\nmodular scale with per-size line-height and letter-spacing, fluid display\nsizes, vertical rhythm on the spacing grid, wrapping utilities, line clamping\nwith an overflow-aware tooltip, cap-height trimming, and OpenType features.\n\n## Install\n\n```sh\nnpm install @bastianplsfix/typography\n```\n\n`react` and `react-dom` (18 or 19) are peer dependencies.\n\n## Setup\n\nIn your app CSS, import the type system after Tailwind and register the\ncomponent for class extraction (Tailwind doesn't scan node_modules):\n\n```css\n@import \"tailwindcss\";\n@import \"@bastianplsfix/typography/theme.css\";\n@source \"../node_modules/@bastianplsfix/typography/dist\";\n```\n\n`theme.css` is font-agnostic. If your app uses Inter as a variable font, also\nadd the Inter-tuned defaults (fallback metrics, stylistic sets, dark-mode\nweight de-bloom — see the file header for what it assumes):\n\n```css\n@import \"@bastianplsfix/typography/inter.css\";\n```\n\n## Use\n\n```tsx\nimport { Text } from \"@bastianplsfix/typography\";\n\n<Text variant=\"heading-1\">Page title</Text>\n<Text variant=\"body\">Body copy at the reading size, pretty-wrapped.</Text>\n<Text maxLines={3}>Long content clamps and reveals a tooltip on overflow…</Text>\n<Text size=\"sm\" transform=\"uppercase\">An eyebrow with caps tracking</Text>\n```\n\nSemantic variants (`heading-1…3`, `body`, `body-small`, `description`,\n`caption`, `label`) preset the element, size, weight, and wrap; any individual\nprop overrides its axis. See `TextProps` for the full API: OpenType `features`,\n`justify` (logical, RTL-safe), `hasTabularNumbers`, `trim`, `underline`,\nsemantic elements via `as` (`em`, `strong`, `s`, `del`, `sup`/`sub` with the\nfont's real figures, headings), and more.\n\n## Tests\n\n`npm test` runs a Vitest browser-mode suite (real Chromium) covering the type\nscale, tracking, clamping, hyphenation, `sup`/`sub` resets, `feature-case`\ncomposition, `stack` rhythm and specificity guarantees, and the truncation\ntooltip. Set `CHROMIUM_PATH` to use a pre-provisioned browser instead of\n`npx playwright install`.\n\nThe component ships with `\"use client\"` — it works in React Server Component\napps out of the box.\n","readmeFilename":"README.md","_rev":"1-7d7460cdff8d727111966f3fde44546d"}