@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.25 kB
JavaScript
import{jsx as o,jsxs as e}from"react/jsx-runtime";import{useTheme as t,Box as r,Grid as i}from"@mui/material";import{margin as a}from"../../BrandCore/primitiveVariables.js";import n from"./LikertContainer.js";import l from"./LikertLabel.js";import s from"./LikertRadio.js";const u=({options:u=[],disabled:c=!1,sizing:d="lg",onChange:m,internalChange:p,value:b})=>{const h=t();function f(o){m(o.value),p&&p()}return o(r,{children:o(n,{children:o(i,{container:!0,justifyContent:"space-between",children:u.map(t=>e(i,{size:"grow",onClick:()=>f(t),sx:{...!c&&{cursor:"pointer"},textAlign:"center","&:hover":{"& .MuiButtonBase-root.MuiRadio-root":{"&:before":{...!c&&{backgroundColor:h.custom.palette.interaction.hover}}}},"&:active":{"& .MuiButtonBase-root.MuiRadio-root":{...!c&&{backgroundColor:h.custom.palette.input.default,borderColor:h.custom.palette.stroke.focus,boxShadow:h.custom.boxShadow.input.focus},"&:before":{...!c&&{backgroundColor:h.custom.palette.interaction.press}},"&.Mui-checked":{backgroundColor:h.custom.palette.purple[500]}}}},children:[o(s,{sizing:d,disabled:c,onChange:o=>f(t),checked:b===t.value},t.value),o(r,{sx:{mt:a.xs,width:"100%"},children:o(l,{disabled:c,children:t.label})})]},t.value))})})})};export{u as default};