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]>

src/elements/Pagination.tsx

@@ -16,8 +16,9 @@ type Props = ComponentProps<typeof Row> & {
 
 /**
  * # Pagination Component
- * @param param0
- * @returns
+ * Stays within its parent's width: the page buttons scroll horizontally
+ * when there are too many to fit.
+ * @className twui-pagination
  */
 export default function Pagination({
     count,
@@ -44,7 +45,7 @@ export default function Pagination({
             }}
             variant="outlined"
             size="small"
-            className="p-1"
+            className="p-1 shrink-0"
             disabled={isLimit}
         >
             <ChevronRight size={20} />
@@ -55,7 +56,7 @@ export default function Pagination({
         <Row
             {...props}
             className={twMerge(
-                "w-full justify-between md:flex-nowrap",
+                "w-full min-w-0 max-w-full justify-between md:flex-nowrap twui-pagination",
                 props.className,
             )}
         >
@@ -68,7 +69,7 @@ export default function Pagination({
                     }}
                     variant="outlined"
                     size="small"
-                    className="p-1"
+                    className="p-1 shrink-0"
                     disabled={page == 1}
                 >
                     <ChevronLeft size={20} />
@@ -79,20 +80,20 @@ export default function Pagination({
 
             <Row
                 className={twMerge(
-                    "gap-6 w-full md:flex-nowrap justify-center",
+                    "gap-6 w-full min-w-0 flex-1 md:flex-nowrap justify-center",
                 )}
             >
                 <Span
                     size="small"
                     variant="faded"
-                    className="whitespace-nowrap"
+                    className="whitespace-nowrap shrink-0"
                 >
                     Page {page} / {pages}
                 </Span>
                 {pages > 1 && (
                     <Row
                         className={twMerge(
-                            "flex-nowrap overflow-x-auto p-1 max-w-[90%]",
+                            "flex-nowrap overflow-x-auto p-1 min-w-0 max-w-[90%]",
                         )}
                     >
                         {Array(pages)