UNPKG

@infinityfx/fluid

Version:

React UI library, using zero-runtime CSS-in-JS.

3 lines (2 loc) 2.02 kB
import{jsx as r,jsxs as o}from"react/jsx-runtime";import t from"../feedback/halo.js";import{combineClasses as e,classes as a}from"../../core/utils.js";import n from"../feedback/spinner.js";import{createStyles as l}from"../../core/style.js";const i=l("button",{".button":{position:"relative",border:"none",outline:"none",borderRadius:"var(--f-radius-sml)",padding:".8em",backgroundColor:"var(--color, var(--f-clr-primary-100))",color:"var(--f-clr-text-100)",fontWeight:600,display:"flex",alignItems:"center",justifyContent:"center",WebkitTapHighlightColor:"transparent"},".button.compact":{padding:".6em"},".button.round":{borderRadius:"calc(1.4em + 1px)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".v__default":{color:"var(--f-clr-text-200)"},".v__light":{backgroundColor:"var(--color, var(--f-clr-primary-500))"},".v__neutral":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},'.button[data-loading="false"]:disabled':{color:"var(--f-clr-grey-400)",backgroundColor:"var(--f-clr-grey-100)"},".v__minimal":{backgroundColor:"transparent",color:"var(--color, var(--f-clr-text-100))"},".button:enabled:hover":{cursor:"pointer"},".content":{display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",lineHeight:1},'.button[data-loading="true"] .content':{opacity:0},".loader":{position:"absolute"}});function s({children:l,cc:s={},round:c=!1,compact:d=!1,size:f="med",variant:m="default",color:u,loading:b=!1,...p}){const v=e(i,s);return r(t,{disabled:p.disabled||b,children:o("button",{...p,type:p.type||"button",disabled:p.disabled||b,className:a(v.button,c&&v.round,d&&v.compact,v[`s__${f}`],v[`v__${m}`],p.className),style:{"--color":u,...p.style},"data-loading":b,"data-fb":"neutral"===m?"true":void 0,children:[r("span",{className:v.content,children:l}),b&&r(n,{className:v.loader})]})})}export{s as default}; //# sourceMappingURL=button.js.map