@cavilha/toggle
Version:
A basic select component that allows the selection of a single option
2 lines (1 loc) • 2.83 kB
JavaScript
"use strict";var e=require("react"),t=require("@cavilha/theme"),a=require("@radix-ui/react-toggle");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r,n,l,i=o(e),s=function(){return s=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},s.apply(this,arguments)};var c=t.styled("span",{fontFamily:"$untitled",fontSize:"$bodySmall",fontWeight:"$regular",color:"$neutral5"}),d=t.styled(a.Root,{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:(r={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)"}}},r["& + ".concat(c)]={fontSize:"$bodyRegular"},r)},variation:{count:(n={},n["& + ".concat(c)]={mr:"$small1"},n),alternative:{ml:"$small3"}}},"&:focus":{outline:"none",boxShadow:"$focusPressed"},"&:disabled":(l={bc:"$neutral4",pointerEvents:"none",cursor:"not-allowed"},l["& + ".concat(c)]={color:"$neutral4"},l),"&:hover":{bc:"$secondary4Hover"},"&[data-state=on]":{bc:"$secondary4"},"&[data-state=on][data-disabled]":{bc:"$neutral4"},defaultVariants:{size:"small",variation:"count"}}),u=t.styled("div",{display:"flex",alignItems:"center"}),b=t.styled("span",{bc:"$neutral2",br:"$small",p:"1px $small2",fontSize:"$bodyXSmall",fontWeight:"$semibold",fontFamily:"$untitled"});module.exports=function(e){var t=e.label,a=e.count,o=e.alternativeLabel,r=e.variation,n=e.onChange,l=e.isDisabled,f=e.isPressed,p=e.size,m=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}(e,["label","count","alternativeLabel","variation","onChange","isDisabled","isPressed","size"]);return i.default.createElement(u,null,"alternative"===r&&i.default.createElement(c,null,o),i.default.createElement(d,s({title:t,variation:r,size:p,pressed:f,disabled:l,onPressedChange:n},m)),i.default.createElement(c,null,t),"count"===r&&i.default.createElement(b,null,a))};