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

@raid-ui checkbox component

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