"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Group = exports.Basic = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Radio_1 = require("./Radio");
const theme_1 = require("../../theme");
const Box_1 = require("../Box");
const Template = (props) => ((0, jsx_runtime_1.jsx)(Radio_1.Radio, Object.assign({}, props), void 0));
exports.Basic = Template.bind({});
exports.Basic.args = {
    onChange: () => { },
    name: 'radio',
    value: 'opt',
    label: 'Radio',
};
exports.default = {
    title: 'Polyblocks/Radio',
    component: Radio_1.Radio,
};
const Group = () => {
    const [value, setValue] = (0, react_1.useState)('opt1');
    const [valueIcon, setValueIcon] = (0, react_1.useState)('optIcon1');
    const handleChange = (e) => {
        setValue(e.target.value);
    };
    const handleChangeIcon = (e) => {
        setValueIcon(e.target.value);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, Object.assign({ variant: "border" }, { children: [(0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ margin: "10px 0", variant: "raw" }, { children: (0, jsx_runtime_1.jsx)(Radio_1.Radio, { onChange: handleChange, checked: value === 'opt2', name: "radio1", value: "opt2", label: "Option 2 default icon" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ margin: "10px 0", variant: "raw" }, { children: (0, jsx_runtime_1.jsx)(Radio_1.Radio, { onChange: handleChange, checked: value === 'opt1', name: "radio1", value: "opt1", label: "Option 1 default icon" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(Box_1.Box, Object.assign({ margin: "10px 0", variant: "border" }, { children: [(0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ margin: "10px 0", variant: "raw" }, { children: (0, jsx_runtime_1.jsx)(Radio_1.Radio, { icon: theme_1.polyIcons.CheckboxMarkedCircle, onChange: handleChangeIcon, checked: valueIcon === 'customopt1', name: "radio2", value: "customopt1", label: "Option 2 custom icon" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ margin: "10px 0", variant: "raw" }, { children: (0, jsx_runtime_1.jsx)(Radio_1.Radio, { icon: theme_1.polyIcons.CheckboxMarkedCircle, onChange: handleChangeIcon, checked: valueIcon === 'customopt2', name: "radio2", value: "customopt2", label: "Option 1 custom icon" }, void 0) }), void 0)] }), void 0)] }, void 0));
};
exports.Group = Group;
//# sourceMappingURL=Radio.stories.js.map