diff --git a/dev/src/pages/forms.tsx b/dev/src/pages/forms.tsx index 1af0137..a903758 100644 --- a/dev/src/pages/forms.tsx +++ b/dev/src/pages/forms.tsx @@ -147,6 +147,15 @@ export default function FormsPage() { title="Beta features" label="Opt into experimental components." /> + + Notifications are {notifications ? "on" : "off"} diff --git a/package.json b/package.json index 5e17d89..734a018 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@moduletrace/twui", - "version": "0.1.8", + "version": "0.1.9", "description": "A modular skeletal React component framework for Tailwind CSS v4", "author": "Benjamin Toby", "type": "module", diff --git a/src/form/Checkbox.tsx b/src/form/Checkbox.tsx index ba92dcd..2c5794a 100644 --- a/src/form/Checkbox.tsx +++ b/src/form/Checkbox.tsx @@ -39,6 +39,12 @@ export type CheckboxProps = Omit< clickDispatchHandler?: (value: boolean) => void; info?: string | ReactNode; wrapperWrapperProps?: ComponentProps; + /** + * Let the label wrap onto multiple lines. By default the label is + * clamped to a single line with an ellipsis, and the full text is + * shown as the wrapper's `title` on hover. + */ + wrap?: boolean; }; /** @@ -46,6 +52,7 @@ export type CheckboxProps = Omit< * @className twui-checkbox * @className twui-checkbox-checked * @className twui-checkbox-unchecked + * @className twui-checkbox-label */ export default function Checkbox({ wrapperProps, @@ -63,6 +70,7 @@ export default function Checkbox({ noLabel, title, clickDispatchHandler, + wrap, ...props }: CheckboxProps) { const finalSize = size || 20; @@ -72,6 +80,15 @@ export default function Checkbox({ ); const finalTitle = title; + const labelContent = label || finalTitle; + + const hoverTitle = + wrapperProps?.title ?? + (typeof labelContent == "string" || typeof labelContent == "number" + ? String(labelContent) + : typeof finalTitle == "string" + ? finalTitle + : undefined); React.useEffect(() => { if (typeof externalChecked == "undefined") return; @@ -85,12 +102,17 @@ export default function Checkbox({ return ( } {!noLabel && ( - + - {label || finalTitle} + {labelContent} )}