UNPKG

@polygon.io/core

Version:

A set of themeable UI components for React

1 lines 3.43 kB
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault"),_typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=void 0;var _react=_interopRequireWildcard(require("react")),_styledComponents=_interopRequireDefault(require("styled-components")),_Button=_interopRequireDefault(require("../Button"));function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d["default"]=a,c&&c.set(a,d),d}var __jsx=_react["default"].createElement,Background=_styledComponents["default"].div.withConfig({displayName:"RadioToggle__Background",componentId:"sc-x8ltgt-0"})(["display:flex;align-items:center;background:",";border-radius:",";border:",";position:relative;box-sizing:border-box;height:",";"],function(a){var b=a.theme;return b.color.background.secondary},function(a){var b=a.theme;return b.radius},function(a){var b=a.theme;return"1px solid ".concat(b.color.border.primary)},function(a){var b=a.theme,c=a.small,d=a.large;return c?b.spacing.s4:d?b.spacing.s6:b.spacing.s5}),StyledButton=(0,_styledComponents["default"])(_Button["default"]).withConfig({displayName:"RadioToggle__StyledButton",componentId:"sc-x8ltgt-1"})(["&&&{height:100%;border:",";z-index:",";outline:",";background-color:",";color:",";font-weight:",";line-height:0;&:hover{cursor:",";background-color:",";}&:focus-visible{outline:0;z-index:2;box-shadow:0 0 0 2px hsla(220,100%,50%,80%);}}"],function(a){var b=a.theme;return"1px solid ".concat(b.color.background.secondary)},function(a){var b=a.outlined;return b?1:0},function(a){var b=a.outlined,c=a.theme;return b?"".concat(c.color.border.primary," solid 1px"):"transparent solid 1px"},function(a){var b=a.theme,c=a.unselected,d=a.disabled;return d?"".concat(b.color.button.disabled):c?"".concat(b.color.background.secondary):b.color.background.input},function(a){var b=a.theme,c=a.unselected,d=a.disabled;return d?"".concat(b.color.content.disabled):c?b.color.content.secondary:b.color.content.primary},function(a){var b=a.theme;return b.font.weight.medium},function(a){var b=a.disabled;return b?"not-allowed":"pointer"},function(a){var b=a.theme,c=a.outlined,d=a.disabled;return d?"".concat(b.color.button.disabled):c?b.color.background.input:b.color.background.secondaryHover}),RadioToggle=function(a){var b=a.className,c=a.selected,d=a.options,e=a.small,f=a.medium,g=a.large,h=a.onSelect,i=a.disabled,j=(0,_react.useId)();return __jsx(Background,{small:e,large:g},d.map(function(a){var d=a.label,k=a.value;return __jsx(StyledButton,{key:"".concat(k,"-").concat(j),className:b,small:e,medium:f,large:g,onClick:function onClick(){return h(k)},outlined:c===k,unselected:c!==k,disabled:i},d)}))};RadioToggle.defaultProps={className:void 0,small:!1,medium:!0,large:!1,disabled:!1};var _default=RadioToggle;exports["default"]=_default;