@infinityfx/fluid/dist/components/input/radio.js

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

import{jsx as r,jsxs as o}from"react/jsx-runtime";import{combineClasses as e,classes as i}from"../../core/utils.js";import a from"../feedback/halo.js";import t from"../../hooks/use-input-props.js";import{createStyles as s}from"../../core/style.js";const l=s("radio",{".wrapper":{position:"relative",width:"max-content"},".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)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:1,WebkitTapHighlightColor:"transparent"},".radio":{position:"relative",width:"1.5em",height:"1.5em",borderRadius:"999px",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",transition:"background-color .25s, border-color .25s"},".input:enabled:not(:checked)":{cursor:"pointer"},".input:checked:enabled + .radio":{backgroundColor:"var(--color, var(--f-clr-primary-300))",borderColor:"var(--color, var(--f-clr-primary-300))"},".selection":{position:"absolute",borderRadius:"999px",backgroundColor:"white",scale:0,transition:"scale .25s ease-out"},".s__xsm .selection":{inset:"4px"},".s__sml .selection":{inset:"5px"},".s__med .selection":{inset:"6px"},".s__lrg .selection":{inset:"7px"},".input:checked + .radio .selection":{scale:1},".input:disabled + .radio":{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},".input:disabled:checked + .radio":{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-200)"},".input:disabled + .radio .selection":{backgroundColor:"var(--f-clr-grey-100)"},'.wrapper[data-error="true"] .input:enabled + .radio':{borderColor:"var(--f-clr-error-200)"},'.wrapper[data-error="true"] .input:checked:enabled + .radio':{backgroundColor:"var(--f-clr-error-200)"},".wrapper .halo":{borderRadius:"999px",inset:"-.5em"}});function n({cc:s={},error:n,size:c="med",color:d,...p}){const u=e(l,s),[f,m]=t(p);return r(a,{hover:!1,cc:{...s,halo:u.halo},children:o("div",{...m,className:i(u.wrapper,u[`s__${c}`],m.className),"data-error":!!n,children:[r("input",{...f,type:"radio",className:u.input,"aria-invalid":!!n}),r("div",{className:u.radio,style:{"--color":d},children:r("div",{className:u.selection})})]})})}export{n as default};
//# sourceMappingURL=radio.js.map