✨ Add Radio input

src/components/inputs/Radio.stories.jsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Radio } from "./Radio"
+import { Box } from "../panels/Box"
+import { BaseElement } from "../BaseElement"
+
+
+export default {
+    component: Radio,
+    title: "Inputs/Radio",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Radio value={"zero"} {...props}/>
+)
+
+
+
+export const ThreeRadios = props => (
+    <BaseElement kind={"div"}>
+        <BaseElement kind={"div"} bluelibClassNames={"color-blue"}>
+            <Radio value={"articuno"} {...props}/> Articuno
+        </BaseElement>
+        <BaseElement kind={"div"} bluelibClassNames={"color-yellow"}>
+            <Radio value={"zapdos"} {...props}/> Zapdos
+        </BaseElement>
+        <BaseElement kind={"div"} bluelibClassNames={"color-red"}>
+            <Radio value={"moltres"} {...props}/> Moltres
+        </BaseElement>
+    </BaseElement>
+)
+ThreeRadios.args = {
+    name: "example"
+}

src/components/inputs/Radio.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface RadioProps {
+    disabled?: boolean,
+
+    onChange?: (checked: string) => boolean,
+
+    name: string,
+    value: string,
+
+    [props: string]: any,
+}
+
+
+export function Radio({onChange, ...props}: RadioProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-radio")
+
+    const onChangeWrapper = React.useCallback(
+
+        (event: React.ChangeEvent<HTMLInputElement>): boolean => {
+            const checked = event.target.value
+
+            if(onChange) {
+                return onChange(checked)
+            }
+
+            return false
+        },
+
+        [onChange]
+    )
+
+    return (
+        <BaseElement kind={"input"} type={"radio"} onChange={onChangeWrapper} {...props}/>
+    )
+}