@raid-ui/checkbox/lib/rk-checkbox.js

@raid-ui checkbox component

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types"),r=require("styled-components"),n=require("@styled-system/css"),o=require("@styled-system/theme-get"),i=require("clsx"),a=require("@raid-ui/core"),s=require("@raid-ui/icons/Check"),c=require("@raid-ui/container");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e),u=l(r),b=l(i);function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){p(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function g(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const m={standard:e=>({bg:"white",color:o.themeGet("tokens.type.body.main")(e),border:"base.300","&.disabled":{bg:"dark.100",border:"2px solid "+e.theme.colors.dark[100],cursor:"not-allowed"}}),primary:{bg:"white",color:"white",border:"base.300","&.disabled":{bg:"dark.100",border:e=>"2px solid "+e.colors.dark[100],cursor:"not-allowed"},"&.selected":{bg:"primary",borderColor:"primary"}}},O=a.context({prop:"variant",scale:"variants.checkboxes",variants:m}),v=u.default("input")({cursor:"inherit",margin:0,opacity:0,padding:0},a.fill),k=u.default(c.Box)(e=>n.css({opacity:e.isChecked?1:0,transition:a.getTransition("opacity","main")(e)}),{"> span svg, > span":{display:"block"}});k.defaultProps={size:"100%"};const w=u.default(c.Box)(e=>n.css({position:"relative",boxSizing:"border-box",display:"inline-block",verticalAlign:"middle",transition:`${a.getTransition("box-shadow","main")(e)}, ${a.getTransition("background","main")(e)}`,borderRadius:o.themeGet("tokens.layout.rounding")(e)}),O,e=>e.isFocussed&&a.focusStyle,a.sx),j=t=>{let{value:r,onChange:n,id:o,name:i,width:a,height:s,color:c,size:l,sx:u,disabled:p,children:h,icon:m}=t,O=g(t,["value","onChange","id","name","width","height","color","size","sx","disabled","children","icon"]);const j=void 0===r;let[x,P]=[r,n];const[C,q]=e.useState(!1);if(j){const[t,r]=e.useState(!1);x=t,P=e=>{r(!t),n(!t)}}const S=j?P:e=>P(!x);return d.default.createElement(d.default.Fragment,null,d.default.createElement(w,f({},O,{className:b.default({disabled:p,selected:x}),isFocussed:C,isSelected:x,sx:y({width:l||a,height:l||s},u||{})}),d.default.createElement(k,{color:c,isChecked:x},d.default.createElement(m,{size:"full",color:c})),d.default.createElement(v,{type:"checkbox",disabled:p,"aria-checked":x,checked:x,value:x,onChange:S,onFocus:e=>q(!0),onBlur:e=>q(!1),id:o,name:i})))};j.propTypes={value:t.bool,onChange:t.func,id:t.string,name:t.string,width:t.number,height:t.number,color:t.string,size:t.number},j.defaultProps={onChange:()=>{},width:5,height:5,size:5,variant:"standard",icon:s.Check},j.displayName="CheckItOut",exports.Checkbox=j;