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

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

"use client";
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as o,useId as a}from"react";import{Morph as n}from"@infinityfx/lively/layout";import{combineClasses as t,classes as i}from"../../core/utils.js";import l from"../feedback/halo.js";import{createStyles as d}from"../../core/style.js";const s=d("segmented",{".segmented":{display:"flex"},".v__default, .v__neutral":{borderRadius:"calc(var(--f-radius-sml) + .3em)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",padding:".3em"},".s__sml":{fontSize:"var(--f-font-size-xxs)"},".s__med":{fontSize:"var(--f-font-size-xsm)"},".s__lrg":{fontSize:"var(--f-font-size-sml)"},".segmented.round":{borderRadius:"999px"},".segmented.uniform":{display:"grid",gridAutoColumns:"1fr",gridAutoFlow:"column"},".segmented.vertical":{flexDirection:"column",gridAutoFlow:"row"},".segmented.vertical.round":{borderRadius:"calc(1.4em + 1px)"},".option":{position:"relative",border:"none",outline:"none",backgroundColor:"transparent",padding:".675em .8em",fontWeight:700,color:"var(--f-clr-text-100)",borderRadius:"var(--f-radius-sml)",flexGrow:1,transition:"color .4s",WebkitTapHighlightColor:"transparent"},".segmented.round .option":{borderRadius:"999px"},".option:enabled":{cursor:"pointer"},".option:disabled":{color:"var(--f-clr-grey-500)"},".content":{position:"relative",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--f-spacing-xsm)"},".selection":{position:"absolute",inset:"0",backgroundColor:"var(--f-clr-primary-200)",borderRadius:"var(--f-radius-sml)",boxShadow:"var(--f-shadow-sml)"},".v__neutral .selection":{backgroundColor:"var(--f-clr-text-100)"},'.v__neutral .option[aria-checked="true"]:enabled':{color:"var(--f-clr-text-200)"},".v__minimal .selection":{backgroundColor:"var(--f-clr-primary-400)"},".segmented.round .selection":{borderRadius:"999px"},'.segmented[data-error="true"]':{border:"solid 1px var(--f-clr-error-100)"},".segmented .halo":{zIndex:"0"},'.option[aria-checked="true"] .halo':{inset:"-.3em",borderRadius:"calc(var(--f-radius-sml) + .3em)"},'.segmented[data-error="true"] .ripple':{backgroundColor:"var(--f-clr-error-300)"},".segmented .container":{isolation:"unset"}});function c({cc:d={},variant:c="default",size:m="med",round:u=!1,uniform:f,vertical:p,options:g,name:v,value:b,defaultValue:x,onChange:h,error:_,...y}){const k=t(s,d),[C,z]=void 0!==b?[b]:o(x||g[0]?.value),R=a();return e("div",{...y,role:"radiogroup",className:i(k.segmented,k[`s__${m}`],k[`v__${c}`],u&&k.round,f&&k.uniform,p&&k.vertical,y.className),"data-error":!!_,children:g.map((({label:o,value:a,disabled:t=!1},i)=>e(l,{hover:!1,cc:{container:k.container,halo:k.halo,ring:k.ring,...d},children:r("button",{className:k.option,type:"button",role:"radio","aria-checked":C===a,disabled:t,onClick:()=>{z?.(a),h?.(a)},children:[e("input",{type:"radio",value:a,checked:C===a,hidden:!0,readOnly:!0,name:v}),e("span",{className:k.content,children:o}),C===a&&e(n,{group:`segmented-selection-${R}`,cachable:p?["y","sy"]:["x","sx"],deform:!1,transition:{duration:.4},children:e("div",{className:k.selection})})]})},i)))})}export{c as default};
//# sourceMappingURL=segmented.js.map