diff --git a/app/page.tsx b/app/page.tsx index 416b4ae..d17a745 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,7 @@ import React from 'react'; import testImage1 from './test-images/test-image-1.jpg'; import { Card } from '../src/primitive-components/card/card'; -import { Checkbox } from '../src/primitive-components/components'; +import {Checkbox, Radio} from '../src/primitive-components/components'; import { CardBody } from '../src/primitive-components/card/card-body'; import { CardMedia } from '../src/primitive-components/card/card-media'; import { CardFooter } from '../src/primitive-components/card/card-footer'; @@ -25,7 +25,7 @@ export default function Page() { padding: '8px', }} > -
+
Header-3 @@ -54,7 +54,7 @@ export default function Page() { - + + +
diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx index 9cc1eb9..8256ccb 100644 --- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx +++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx @@ -16,7 +16,7 @@ export const SegmentedButtons = forwardRef< (Button: ReactElement, index: number) => { return cloneElement(, { ...Button.props, - toggled: toggled, + toggled: Button.props.toggled ?? toggled, key: index, }); }, diff --git a/src/primitive-components/input-components/checkbox/checkbox.tsx b/src/primitive-components/input-components/checkbox/checkbox.tsx index 2680c53..27f59ad 100644 --- a/src/primitive-components/input-components/checkbox/checkbox.tsx +++ b/src/primitive-components/input-components/checkbox/checkbox.tsx @@ -19,7 +19,7 @@ import { */ export const Checkbox = forwardRef( - ({ centralRipple, ...props }, ref) => { + ({ centralRipple = true, ...props }, ref) => { const [isActive, setIsActive] = useState(false), [checked, setChecked] = useState(props.checked ?? false), ripplesRef = useRef(null), @@ -27,7 +27,7 @@ export const Checkbox = forwardRef( events = useRippleEffect(ripplesRef, setIsActive); const extraClassStyles = - `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd(); + `m3 m3-checkbox-container ${isActive === true ? 'visible' : ''}`.trimEnd(); useImperativeHandle(ref, () => checkboxRef.current); @@ -36,7 +36,7 @@ export const Checkbox = forwardRef( }, [checkboxRef.current?.checked]); return ( -