retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.55 kB
JavaScript
import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as o,useState as t,Children as r,isValidElement as s,cloneElement as n}from"react";import{jsx as i}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as l}from"../../utils/classNames.js";import a from"../../constants/commonClassNames.js";import{Button as F}from"../button/Button.js";const m=o(((o,t)=>{var{selected:r=!1}=o,s=e(o,["selected"]);return i(F,Object.assign({},s,{sx:Object.assign(Object.assign({},s.sx),{minWidth:"fit-content",borderColor:r?"#808080 #FFFFFF #FFFFFF #808080":"#FFFFFF #808080 #808080 #FFFFFF",backgroundColor:r?"#A0A0A0":"#C0C0C0",transform:"none",filter:"none","&:hover":{backgroundColor:r?"#909090":"#B0B0B0",transform:"none"},"&:active":{borderColor:"#808080 #FFFFFF #FFFFFF #808080",backgroundColor:"#A0A0A0"}}),ref:t}),void 0)}));m.displayName="ToggleButton";const u=o(((o,F)=>{var{id:u,className:c,children:d,size:p="medium",value:g,onValueChange:f,multiple:b=!1,sx:C}=o,j=e(o,["id","className","children","size","value","onValueChange","multiple","sx"]);const[v,h]=t(g||[]);return i("div",Object.assign({ref:F,id:u,className:l("toggle-button-group-root",c,a),sx:C},j,{children:r.map(d,(e=>{if(!s(e)||e.type!==m)return e;const o=e.props.value,t=v.includes(o);return n(e,{size:p,selected:t,onClick:()=>(e=>{let o;o=b?v.includes(e)?v.filter((o=>o!==e)):[...v,e]:[e],h(o),null==f||f(o)})(o)})}))}),void 0)}));u.displayName="ToggleButtonGroup";export{m as ToggleButton,u as ToggleButtonGroup};