@infinityfx/fluid
Version:
React UI library, using zero-runtime CSS-in-JS.
3 lines (2 loc) • 1.97 kB
JavaScript
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:"999px"},".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:p=!1,...b}){const v=e(i,s);return r(t,{disabled:b.disabled||p,children:o("button",{...b,type:b.type||"button",disabled:b.disabled||p,className:a(v.button,c&&v.round,d&&v.compact,v[`s__${f}`],v[`v__${m}`],b.className),style:{"--color":u,...b.style},"data-loading":p,children:[r("span",{className:v.content,children:l}),p&&r(n,{className:v.loader})]})})}export{s as default};
//# sourceMappingURL=button.js.map