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]>
This commit is contained in:
Claude Opus 5.5
@@ -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)
|
||||
|
||||
+69
-15
@@ -28,11 +28,23 @@ export type TWUI_FORM_RADIO_PROPS = {
|
||||
>;
|
||||
wrapperProps?: ComponentProps<typeof Row>;
|
||||
changeHandler?: (value: string) => void;
|
||||
/**
|
||||
* Let each radio's label wrap onto multiple lines. By default every
|
||||
* radio stays on one line with its label clamped to a single line with
|
||||
* an ellipsis, and the full text is shown as the radio's `title` on
|
||||
* hover.
|
||||
*/
|
||||
wrap?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* # Form Radios Component
|
||||
* @className twui-textarea
|
||||
* @className twui-radios
|
||||
* @className twui-radio
|
||||
* @className twui-radio-label
|
||||
* @className twui-radio-indicator - the custom circle; the native input is
|
||||
* visually hidden right before it, so target the checked state with
|
||||
* `.twui-radio input:checked + .twui-radio-indicator`
|
||||
*/
|
||||
export default function Radios({
|
||||
values,
|
||||
@@ -41,6 +53,7 @@ export default function Radios({
|
||||
labelProps,
|
||||
wrapperProps,
|
||||
changeHandler,
|
||||
wrap,
|
||||
}: TWUI_FORM_RADIO_PROPS) {
|
||||
const finalName = twuiSlugify(name);
|
||||
const finalTitle = twuiSlugToNormalText(finalName);
|
||||
@@ -49,26 +62,67 @@ export default function Radios({
|
||||
<Row
|
||||
title={finalTitle}
|
||||
{...wrapperProps}
|
||||
className={twMerge("gap-4", wrapperProps?.className)}
|
||||
className={twMerge(
|
||||
"gap-4 min-w-0 max-w-full twui-radios",
|
||||
wrapperProps?.className,
|
||||
)}
|
||||
>
|
||||
{values.map((v, i) => {
|
||||
const valueName = twuiSlugify(`${finalName}-${v.value}`);
|
||||
const valueTitle = v.title || twuiSlugToNormalText(v.value);
|
||||
|
||||
return (
|
||||
<Row key={i} className="gap-1.5">
|
||||
<input
|
||||
id={valueName}
|
||||
type="radio"
|
||||
defaultChecked={v.default}
|
||||
name={finalName}
|
||||
onChange={(e) => {
|
||||
const targetValue = v.value;
|
||||
changeHandler?.(targetValue);
|
||||
}}
|
||||
{...inputProps}
|
||||
/>
|
||||
<label htmlFor={valueName} {...labelProps}>
|
||||
<Row
|
||||
key={i}
|
||||
title={valueTitle}
|
||||
className={twMerge(
|
||||
"gap-1.5 flex-nowrap min-w-0 max-w-full twui-radio",
|
||||
wrap ? "items-start" : "items-center",
|
||||
)}
|
||||
>
|
||||
<label
|
||||
htmlFor={valueName}
|
||||
className="relative flex items-center shrink-0 h-[1lh] cursor-pointer"
|
||||
>
|
||||
<input
|
||||
id={valueName}
|
||||
type="radio"
|
||||
defaultChecked={v.default}
|
||||
name={finalName}
|
||||
onChange={(e) => {
|
||||
const targetValue = v.value;
|
||||
changeHandler?.(targetValue);
|
||||
}}
|
||||
{...inputProps}
|
||||
className={twMerge(
|
||||
"peer sr-only",
|
||||
inputProps?.className,
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
aria-hidden
|
||||
className={twMerge(
|
||||
"flex items-center justify-center size-[18px] rounded-full",
|
||||
"border-2 border-current dark:border-white/50",
|
||||
"after:size-1.5 after:rounded-full after:bg-white after:scale-0 after:transition-transform",
|
||||
"peer-checked:bg-primary peer-checked:border-primary peer-checked:after:scale-100",
|
||||
"peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2",
|
||||
"peer-disabled:opacity-50 peer-disabled:cursor-not-allowed",
|
||||
"twui-radio-indicator",
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
htmlFor={valueName}
|
||||
{...labelProps}
|
||||
className={twMerge(
|
||||
"select-none min-w-0 max-w-full cursor-pointer twui-radio-label",
|
||||
wrap
|
||||
? "whitespace-normal break-words"
|
||||
: "line-clamp-1 break-all",
|
||||
labelProps?.className,
|
||||
)}
|
||||
>
|
||||
{valueTitle}
|
||||
</label>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user