UNPKG

@cavilha/toggle

Version:

A basic select component that allows the selection of a single option

2 lines (1 loc) 2.7 kB
import e from"react";import{styled as t}from"@cavilha/theme";import{Root as a}from"@radix-ui/react-toggle";var o,r,n,l=function(){return l=Object.assign||function(e){for(var t,a=1,o=arguments.length;a<o;a++)for(var r in t=arguments[a])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},l.apply(this,arguments)};var i=t("span",{fontFamily:"$untitled",fontSize:"$bodySmall",fontWeight:"$regular",color:"$neutral5"}),s=t(a,{position:"relative",display:"inline-block",appearance:"none",backgroundColor:"$neutral3",border:"none",overflow:"hidden",br:"$large",cursor:"pointer",mr:"$small3","&:before":{content:"",position:"absolute",cursor:"pointer",br:"$circle",top:2,left:2,right:2,bottom:2,bc:"transparent",transition:"all ease-in 0.123s"},variants:{size:{small:{height:16,width:32,"&:before":{height:12,width:12,boxShadow:"inset 0 0 0 3px $colors$background1"},"&[data-state=on]":{"&:before":{boxShadow:"inset 0 0 0 12px $colors$background1 !important",transform:"translateX(16px)"}}},medium:(o={height:24,width:48,"&:before":{height:20,width:20,boxShadow:"inset 0 0 0 5px $colors$background1"},"&[data-state=on]":{"&:before":{boxShadow:"inset 0 0 0 12px $colors$background1 !important",transform:"translateX(24px)"}}},o["& + ".concat(i)]={fontSize:"$bodyRegular"},o)},variation:{count:(r={},r["& + ".concat(i)]={mr:"$small1"},r),alternative:{ml:"$small3"}}},"&:focus":{outline:"none",boxShadow:"$focusPressed"},"&:disabled":(n={bc:"$neutral4",pointerEvents:"none",cursor:"not-allowed"},n["& + ".concat(i)]={color:"$neutral4"},n),"&:hover":{bc:"$secondary4Hover"},"&[data-state=on]":{bc:"$secondary4"},"&[data-state=on][data-disabled]":{bc:"$neutral4"},defaultVariants:{size:"small",variation:"count"}}),c=t("div",{display:"flex",alignItems:"center"}),d=t("span",{bc:"$neutral2",br:"$small",p:"1px $small2",fontSize:"$bodyXSmall",fontWeight:"$semibold",fontFamily:"$untitled"}),b=function(t){var a=t.label,o=t.count,r=t.alternativeLabel,n=t.variation,b=t.onChange,u=t.isDisabled,p=t.isPressed,m=t.size,f=function(e,t){var a={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(a[o[r]]=e[o[r]])}return a}(t,["label","count","alternativeLabel","variation","onChange","isDisabled","isPressed","size"]);return e.createElement(c,null,"alternative"===n&&e.createElement(i,null,r),e.createElement(s,l({title:a,variation:n,size:m,pressed:p,disabled:u,onPressedChange:b},f)),e.createElement(i,null,a),"count"===n&&e.createElement(d,null,o))};export{b as default};