Custom Radios indicator with one-line labels; keep Pagination within its parent

Radios: each radio stays on one line, with its label clamped to a single
line (full text on hover) like Checkbox. Pass `wrap` to let labels flow
onto multiple lines. The native radio is replaced by a custom indicator
aligned to the label's first line; the input stays (visually hidden) for
forms and keyboard use, so inputProps.className now lands on a hidden
input - style .twui-radio-indicator instead. Adds twui-radios,
twui-radio, twui-radio-label and twui-radio-indicator classes.

Pagination: flex children could not shrink below their content, so many
pages pushed the component past its parent. Add min-w-0 so the page
buttons scroll inside the parent instead. Adds twui-pagination.

Playground: demos for both, and bump bunext to 1.3.5.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

dev/bun.lock

@@ -5,7 +5,7 @@
     "": {
       "name": "@moduletrace/twui-dev",
       "dependencies": {
-        "@moduletrace/bunext": "^1.3.4",
+        "@moduletrace/bunext": "^1.3.5",
         "lucide-react": "^1.59.0",
       },
       "devDependencies": {
@@ -78,7 +78,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/[email protected]", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@moduletrace/bunext": ["@moduletrace/[email protected].4", "https://git.tben.me/api/packages/Moduletrace/npm/%40moduletrace%2Fbunext/-/1.3.4/bunext-1.3.4.tgz", { "dependencies": { "@tailwindcss/postcss": "^4.3.3", "@types/bun": "1.3.14", "@types/node": "^24.10.0", "@types/react": "^19.3.0", "@types/react-dom": "^19.3.0", "bun-plugin-tailwind": "^0.1.2", "chalk": "^5.6.2", "chokidar": "^5.0.0", "commander": "^14.0.2", "esbuild": "^0.28.2", "lightningcss-wasm": "^1.32.0", "lodash": "^4.18.1", "ora": "^9.0.0", "postcss": "^8.5.30", "react": "^19.3.0", "react-dom": "^19.3.0", "tailwindcss": "^4.3.3", "typescript": "^5.0.0", "uuid": "^14.0.2" }, "bin": { "bunext": "dist/commands/index.js" } }, "sha512-+WERTs024+7c2RiynwxngPhShPOexnA2qriVe38JTDAEzl2bqHq97WBecJhD6z7R+VTMibfx+ODikHBXcWEj8Q=="],
+    "@moduletrace/bunext": ["@moduletrace/[email protected].5", "https://git.tben.me/api/packages/Moduletrace/npm/%40moduletrace%2Fbunext/-/1.3.5/bunext-1.3.5.tgz", { "dependencies": { "@tailwindcss/postcss": "^4.3.3", "@types/bun": "1.3.14", "@types/node": "^24.10.0", "@types/react": "^19.3.0", "@types/react-dom": "^19.3.0", "bun-plugin-tailwind": "^0.1.2", "chalk": "^5.6.2", "chokidar": "^5.0.0", "commander": "^14.0.2", "esbuild": "^0.28.2", "lightningcss-wasm": "^1.32.0", "lodash": "^4.18.1", "ora": "^9.0.0", "postcss": "^8.5.30", "react": "^19.3.0", "react-dom": "^19.3.0", "tailwindcss": "^4.3.3", "typescript": "^5.0.0", "uuid": "^14.0.2" }, "bin": { "bunext": "dist/commands/index.js" } }, "sha512-Es59Dvq3/eF726+SOHPiKtlJ87UFmyJZI4gpeciW/fA/3ZwOWws2Mm3oD6eZnOj9BP/zlBKOWA9DPTl35IP3lg=="],
 
     "@oven/bun-darwin-aarch64": ["@oven/[email protected]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-u2wAM9RzqyF4baO5oFVhcFUVWO1CCMLG6yC5/aPWCYGZPfL5ULMbeHt+0/3I0h3yaPx1m+PKSANO/61jPtDZcQ=="],
 

dev/package.json

@@ -10,7 +10,7 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "@moduletrace/bunext": "^1.3.4",
+        "@moduletrace/bunext": "^1.3.5",
         "lucide-react": "^1.59.0"
     },
     "devDependencies": {

dev/src/pages/elements.tsx

@@ -195,6 +195,14 @@ export default function ElementsPage() {
                     <Span size="small" variant="faded">
                         Page {page} of {Math.ceil(42 / 5)}
                     </Span>
+                    <Border className="w-full max-w-xs">
+                        <Pagination
+                            page={page}
+                            setPage={setPage}
+                            count={400}
+                            limit={5}
+                        />
+                    </Border>
                 </Stack>
             </DemoSection>
 

dev/src/pages/forms.tsx

@@ -180,6 +180,31 @@ export default function FormsPage() {
                             { value: "team", title: "Team" },
                         ]}
                     />
+
+                    <Radios
+                        name="Long labels"
+                        values={[
+                            {
+                                value: "clamped",
+                                title: "This radio label is far too long to fit on a single line, so it is clamped to one line with an ellipsis - hover it to see the full text.",
+                                default: true,
+                            },
+                            { value: "short", title: "Short" },
+                        ]}
+                    />
+
+                    <Radios
+                        name="Wrapped labels"
+                        wrap
+                        values={[
+                            {
+                                value: "wrapped",
+                                title: "This radio label is far too long to fit on a single line, but the wrap prop lets it flow onto as many lines as it needs.",
+                                default: true,
+                            },
+                            { value: "short", title: "Short" },
+                        ]}
+                    />
                 </div>
             </DemoSection>
 
@@ -241,7 +266,7 @@ export default function FormsPage() {
                                 ? JSON.stringify(submitted, null, 2)
                                 : "Submit the form to see the collected data."}
                         </pre>
-                        <Row className="items-start gap-2">
+                        <Row className="items-start gap-2 flex-nowrap">
                             <Info size={16} className="mt-0.5 shrink-0" />
                             <Span size="small" variant="faded">
                                 Checkbox and Toggle are div-based and are not