retro-react/dist/cjs/components/togglebutton/ToggleButton.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),s=require("react"),r=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),t=require("../../utils/classNames.js"),o=require("../../constants/commonClassNames.js"),n=require("../button/Button.js");const l=s.forwardRef(((s,t)=>{var{selected:o=!1}=s,l=e.__rest(s,["selected"]);return r.jsx(n.Button,Object.assign({},l,{sx:Object.assign(Object.assign({},l.sx),{minWidth:"fit-content",borderColor:o?"#808080 #FFFFFF #FFFFFF #808080":"#FFFFFF #808080 #808080 #FFFFFF",backgroundColor:o?"#A0A0A0":"#C0C0C0",transform:"none",filter:"none","&:hover":{backgroundColor:o?"#909090":"#B0B0B0",transform:"none"},"&:active":{borderColor:"#808080 #FFFFFF #FFFFFF #808080",backgroundColor:"#A0A0A0"}}),ref:t}),void 0)}));l.displayName="ToggleButton";const i=s.forwardRef(((n,i)=>{var{id:a,className:u,children:F,size:c="medium",value:d,onValueChange:m,multiple:g=!1,sx:f}=n,j=e.__rest(n,["id","className","children","size","value","onValueChange","multiple","sx"]);const[p,C]=s.useState(d||[]);return r.jsx("div",Object.assign({ref:i,id:a,className:t.classNames("toggle-button-group-root",u,o.default),sx:f},j,{children:s.Children.map(F,(e=>{if(!s.isValidElement(e)||e.type!==l)return e;const r=e.props.value,t=p.includes(r);return s.cloneElement(e,{size:c,selected:t,onClick:()=>(e=>{let s;s=g?p.includes(e)?p.filter((s=>s!==e)):[...p,e]:[e],C(s),null==m||m(s)})(r)})}))}),void 0)}));i.displayName="ToggleButtonGroup",exports.ToggleButton=l,exports.ToggleButtonGroup=i;