import React from "react"; import { Checkbox } from "../components/Checkbox"; import { Label } from "../components/Label"; import { Toaster, useToast } from "../components/Toast"; export default { title: "React/Checkbox", }; export const Default = () => { return <Checkbox />; }; export const DefaultChecked = () => { return <Checkbox defaultChecked />; }; export const Controlled = () => { const [state, setState] = React.useState(false); const { toast } = useToast(); React.useEffect(() => { toast({ title: "Checkbox Toggled", description: `Checkbox state changed to ${state}`, status: state ? "success" : "error", }); }, [state]); return ( <> <Toaster /> <Checkbox checked={state} onChange={(e) => { setState(e.currentTarget.checked); }} /> </> ); }; export const UsingWithLabel = () => { return ( <Label direction="horizontal"> <Checkbox /> <span>Check this out</span> </Label> ); }; export const Disabled = () => { return ( <Label direction="horizontal"> <Checkbox disabled /> <span>Disabled checkbox</span> </Label> ); }; export const DisabledChecked = () => { return ( <Label direction="horizontal"> <Checkbox disabled checked /> <span>Disabled checkbox</span> </Label> ); }; export const BaseSize = () => { return ( <Label direction="horizontal"> <Checkbox size="base" /> <span>Base</span> </Label> ); }; export const MediumSize = () => { return ( <Label direction="horizontal"> <Checkbox size="md" /> <span>Medium</span> </Label> ); }; export const LargeSize = () => { return ( <Label direction="horizontal"> <Checkbox size="lg" /> <span>Large</span> </Label> ); };