{"_id":"@batthewz/response-ui-tw-merge","_rev":"4-a8b952a23040cf6c944925499daeed36","name":"@batthewz/response-ui-tw-merge","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@batthewz/response-ui-tw-merge","version":"0.1.0","keywords":["design-system","tailwind","tailwindcss-v4","tailwind-merge","clsx","classnames","cn"],"author":{"name":"BatthewZ"},"license":"MIT","_id":"@batthewz/response-ui-tw-merge@0.1.0","maintainers":[{"name":"batthewz","email":"benmatthews.it@gmail.com"}],"homepage":"https://github.com/BatthewZ/response-ui-tw-merge#readme","bugs":{"url":"https://github.com/BatthewZ/response-ui-tw-merge/issues"},"dist":{"shasum":"24e9ace683361d75d1e59c8d1e5a3db217454d4a","tarball":"https://registry.npmjs.org/@batthewz/response-ui-tw-merge/-/response-ui-tw-merge-0.1.0.tgz","fileCount":7,"integrity":"sha512-/c142O3IKKMnL5tkVSbnP2kdBdtyS4QKs1IORKJ6mwEq4r4VUY7yj0a3AwbmILKcM2mGWsKvt+cD/J1VE3yAWw==","signatures":[{"sig":"MEUCIQCY4irKHLJ3bogsth17m8KsXUyX3HAHRXJJAIrLRxQApwIgF3wD5ZpCR108aor8DG6IgiTA4siYyUAL3BCADz+SSgc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20050},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","default":"./src/index.js"}},"gitHead":"4070fcbef1a0ff91e56d2d6f87e3f2aa08a7200d","scripts":{"test":"bun test","test:watch":"bun test --watch","prepublishOnly":"bun test"},"_npmUser":{"name":"batthewz","email":"benmatthews.it@gmail.com"},"repository":{"url":"git+https://github.com/BatthewZ/response-ui-tw-merge.git","type":"git"},"_npmVersion":"10.8.2","description":"tailwind-merge configured for the response-ui design system's custom utilities (r1..r6 spacing, semantic colors, h1..h6 and body-1..body-3 text scales). Pairs with @batthewz/response-ui-css.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.5.0"},"peerDependencies":{"clsx":"^2.1.0","tailwind-merge":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/response-ui-tw-merge_0.1.0_1780637706082_0.8412217795215506","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@batthewz/response-ui-tw-merge","version":"0.1.1","keywords":["design-system","tailwind","tailwindcss-v4","tailwind-merge","clsx","classnames","cn"],"author":{"name":"BatthewZ"},"license":"MIT","_id":"@batthewz/response-ui-tw-merge@0.1.1","maintainers":[{"name":"batthewz","email":"benmatthews.it@gmail.com"}],"homepage":"https://github.com/BatthewZ/response-ui-tw-merge#readme","bugs":{"url":"https://github.com/BatthewZ/response-ui-tw-merge/issues"},"dist":{"shasum":"1101690fb78223a57f65f15087a770e363ff7486","tarball":"https://registry.npmjs.org/@batthewz/response-ui-tw-merge/-/response-ui-tw-merge-0.1.1.tgz","fileCount":7,"integrity":"sha512-MvBndWR9/C4mJrEKwRGq1L/W8890kthGEZDj9hRr92zakxMNVi6mm5irRe74rn1Uj1zUiVebvWy7rDPe2Ys5QA==","signatures":[{"sig":"MEUCIQDV7c9eup4B8is4pM2mTGgFJZqxV4eQT/7PNOixdQSiQgIgF3pdiRWbMjARY69MmHhFQKol4Oj/TrbctSMhPhiFnR0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21142},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","default":"./src/index.js"}},"gitHead":"2ad9e267b658779be88a2fbde014aaa280ad0e90","scripts":{"test":"bun test","test:watch":"bun test --watch","prepublishOnly":"bun test"},"_npmUser":{"name":"batthewz","email":"benmatthews.it@gmail.com"},"repository":{"url":"git+https://github.com/BatthewZ/response-ui-tw-merge.git","type":"git"},"_npmVersion":"10.8.2","description":"tailwind-merge configured for the response-ui design system's custom utilities (r1..r6 spacing, semantic colors, h1..h6 and body-1..body-3 text scales). Pairs with @batthewz/response-ui-css.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.5.0"},"peerDependencies":{"clsx":"^2.1.0","tailwind-merge":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/response-ui-tw-merge_0.1.1_1781344209351_0.5123926404345447","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@batthewz/response-ui-tw-merge","version":"0.1.2","keywords":["design-system","tailwind","tailwindcss-v4","tailwind-merge","clsx","classnames","cn"],"author":{"name":"BatthewZ"},"license":"MIT","_id":"@batthewz/response-ui-tw-merge@0.1.2","maintainers":[{"name":"batthewz","email":"benmatthews.it@gmail.com"}],"homepage":"https://github.com/BatthewZ/response-ui-tw-merge#readme","bugs":{"url":"https://github.com/BatthewZ/response-ui-tw-merge/issues"},"dist":{"shasum":"eb9c475873aa2079c07474ba9315f8db78028b58","tarball":"https://registry.npmjs.org/@batthewz/response-ui-tw-merge/-/response-ui-tw-merge-0.1.2.tgz","fileCount":8,"integrity":"sha512-J3Wl3SnlA6m2bQUQsem0Qw8uLK2ecNTDM79bBhk6R36ZX3hJnga5P/GK/fVNM/dHz5gr7kb7kKERa8aX6CSPww==","signatures":[{"sig":"MEUCIBn8Cn1m8K1+dL1lFWdeVsiEF4Y9i7FlM8KujnGzlBeNAiEA50xB76F6Qu5vbQGR/u58Pm0QgucPx1OwjALtcvoxe3s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25320},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","default":"./src/index.js"}},"gitHead":"ab456c87ef386a09672508abab0daccffe133fcc","scripts":{"test":"bun test","test:watch":"bun test --watch","prepublishOnly":"bun test"},"_npmUser":{"name":"batthewz","email":"benmatthews.it@gmail.com"},"repository":{"url":"git+https://github.com/BatthewZ/response-ui-tw-merge.git","type":"git"},"_npmVersion":"10.8.2","description":"tailwind-merge configured for the response-ui design system's custom utilities (r1..r6 spacing, semantic colors, h1..h6 and body-1..body-3 text scales). Pairs with @batthewz/response-ui-css.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.5.0"},"peerDependencies":{"clsx":"^2.1.0","tailwind-merge":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/response-ui-tw-merge_0.1.2_1781408861332_0.5468900190891375","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@batthewz/response-ui-tw-merge","version":"0.1.3","type":"module","description":"tailwind-merge configured for the response-ui design system's custom utilities (r1..r6 spacing, semantic colors, h1..h6 and body-1..body-3 text scales). Pairs with @batthewz/response-ui-css.","sideEffects":false,"main":"./src/index.js","module":"./src/index.js","types":"./src/index.d.ts","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","default":"./src/index.js"}},"scripts":{"test":"bun test","test:watch":"bun test --watch","prepublishOnly":"bun test"},"publishConfig":{"access":"public"},"peerDependencies":{"clsx":"^2.1.0","tailwind-merge":"^3.5.0"},"devDependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.5.0"},"keywords":["design-system","tailwind","tailwindcss-v4","tailwind-merge","clsx","classnames","cn"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/BatthewZ/response-ui-tw-merge.git"},"homepage":"https://github.com/BatthewZ/response-ui-tw-merge#readme","bugs":{"url":"https://github.com/BatthewZ/response-ui-tw-merge/issues"},"author":{"name":"BatthewZ"},"_id":"@batthewz/response-ui-tw-merge@0.1.3","gitHead":"ea95beab1167b568b5667b158ce74ab4b86f298c","_nodeVersion":"22.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-I3ij+xsv9tPx6pstBEp+jrLfTbS6yn2tULrrGSmPwu6yMtqmbmheceZe59S2/MC2yPxcmRkBpxjDOoanTJ2XjA==","shasum":"e46d6cd7a09feec817e6d0fdb7711dadb0659a4f","tarball":"https://registry.npmjs.org/@batthewz/response-ui-tw-merge/-/response-ui-tw-merge-0.1.3.tgz","fileCount":8,"unpackedSize":25380,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC/TRbsru9Abm9fmJzu1/fvy/zMKUHs7cRsGLQWPbxLmAIgfELEFDLLZBtPYOU1OQ8SCV19+GGPwtICxWeDOB7VJP8="}]},"_npmUser":{"name":"batthewz","email":"benmatthews.it@gmail.com"},"directories":{},"maintainers":[{"name":"batthewz","email":"benmatthews.it@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/response-ui-tw-merge_0.1.3_1782009132015_0.11562259974275735"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-05T05:35:05.920Z","modified":"2026-06-21T02:32:12.268Z","0.1.0":"2026-06-05T05:35:06.245Z","0.1.1":"2026-06-13T09:50:09.500Z","0.1.2":"2026-06-14T03:47:41.477Z","0.1.3":"2026-06-21T02:32:12.149Z"},"bugs":{"url":"https://github.com/BatthewZ/response-ui-tw-merge/issues"},"author":{"name":"BatthewZ"},"license":"MIT","homepage":"https://github.com/BatthewZ/response-ui-tw-merge#readme","keywords":["design-system","tailwind","tailwindcss-v4","tailwind-merge","clsx","classnames","cn"],"repository":{"type":"git","url":"git+https://github.com/BatthewZ/response-ui-tw-merge.git"},"description":"tailwind-merge configured for the response-ui design system's custom utilities (r1..r6 spacing, semantic colors, h1..h6 and body-1..body-3 text scales). Pairs with @batthewz/response-ui-css.","maintainers":[{"name":"batthewz","email":"benmatthews.it@gmail.com"}],"readme":"# @batthewz/response-ui-tw-merge\n\n`tailwind-merge` pre-configured for the [response-ui](https://github.com/BatthewZ/response-ui-css) design system's custom utilities, plus an extensible `cn()` className helper. Tiny, zero-runtime-dependencies-beyond-peers.\n\n## What it knows about\n\n- Responsive spacing scale: `r1`..`r6` (e.g. `p-r3`, `gap-r4`)\n- Semantic colors: `canvas`, `primary`, `surface-0..3`, `fg-primary`, `status-error`, etc.\n- Heading + body text scales: `h1`..`h6`, `body-1`..`body-3`\n\nWithout this configuration, `tailwind-merge` doesn't know that `p-r3` and `p-r5` conflict, or that `text-fg-primary` and `text-fg-muted` are alternatives — `cn()` would happily emit both and let the cascade decide.\n\n## Pairing with `@batthewz/response-ui-css`\n\nThis package is the **JS-side companion** to [`@batthewz/response-ui-css`](https://www.npmjs.com/package/@batthewz/response-ui-css). It does not import the CSS package at runtime, but the token list it ships **mirrors** the tokens defined in `response-ui-css`. They are intentionally separate npm packages so that:\n\n- `response-ui-css` stays pure CSS — pure-CSS consumers (Vue, Svelte, vanilla, plain HTML) pay zero JS cost.\n- This package can be used independently by anyone who wants `cn()` with the same conventions in a non-React, non-CSS-consuming context.\n\n**Important:** if you add a new token (color, spacing step, text scale) to `response-ui-css`, you must update the corresponding array in this package's `src/index.js` too, or `tailwind-merge` won't know about it. This is the trade-off for keeping the packages decoupled.\n\nIn practice you almost always want both installed together.\n\n## Install\n\n```sh\nnpm install @batthewz/response-ui-tw-merge clsx tailwind-merge\n# and the styles:\nnpm install @batthewz/response-ui-css\n```\n\n`clsx` and `tailwind-merge` are peer dependencies — bring your own to avoid duplicate copies in the bundle.\n\n## Usage\n\n### No custom tokens — just import `cn`\n\n```ts\nimport { cn } from \"@batthewz/response-ui-tw-merge\";\n\nfunction Button({ className, ...props }) {\n  return (\n    <button\n      className={cn(\n        \"px-r4 py-r3 text-body-2 text-fg-on-primary bg-primary\",\n        \"hover:bg-primary-hover\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n```\n\n`cn()` runs your inputs through `clsx` (conditional class merging) and then through a `tailwind-merge` instance that's been taught the design system's tokens, so the last-spec-wins rule works correctly for the custom utilities.\n\n### Your app adds custom tokens — use `createCn`\n\nWhen your app extends the design system with its own colors, spacing, etc., create a project-local `cn` that knows about **both** the response-ui tokens and yours:\n\n```ts\n// app/cn.ts\nimport { createCn } from \"@batthewz/response-ui-tw-merge\";\n\nexport const cn = createCn({\n  theme: {\n    color: [\"brand-primary\", \"brand-accent\"],\n    spacing: [\"xtra-tight\", \"xtra-wide\"],\n  },\n});\n```\n\nThen import `cn` from `app/cn` everywhere instead of from the package directly.\n\n**Why a factory rather than spread?** The factory **concatenates** your arrays onto the built-ins. With the older spread pattern, customising one theme key (e.g. `color`) while forgetting to spread the others (`spacing`, `text`) silently wiped the built-in awareness for those. With `createCn` that footgun is impossible — every built-in stays known no matter which keys you customise.\n\nYou can also pass through `tailwind-merge`'s other config keys (`classGroups`, `conflictingClassGroups`, `cacheSize`, etc.):\n\n```ts\nexport const cn = createCn({\n  theme: { color: [\"brand-x\"] },\n  classGroups: {\n    \"custom-prose\": [\"prose-tight\", \"prose-loose\"],\n  },\n  cacheSize: 1000,\n});\n```\n\n### Low-level escape hatches\n\nFor power users who want to drive `extendTailwindMerge` themselves:\n\n```ts\nimport { mergeExtension, tailwindMergeExtension } from \"@batthewz/response-ui-tw-merge\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n// `mergeExtension` does the safe concat for you:\nconst config = mergeExtension({\n  theme: { color: [\"brand-x\"] },\n});\nconst twMerge = extendTailwindMerge({ extend: config });\n\n// Or use the raw built-in extension config (frozen, immutable):\nconst twMergeStrict = extendTailwindMerge({ extend: tailwindMergeExtension });\n```\n\nA pre-configured `twMerge` (design-system tokens only, no extension) is also exported if you want `twMerge` semantics without `clsx` on top:\n\n```ts\nimport { twMerge } from \"@batthewz/response-ui-tw-merge\";\ntwMerge(\"p-r3 p-r5\"); // → \"p-r5\"\n```\n\n## Extending\n\nAdding your own utilities and need `cn()` to merge them? See\n[docs/extending.md](./docs/extending.md) for the `createCn` / `mergeExtension` workflow and\nhow it pairs with generating the utility in your CSS layer.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}