@infinityfx/fluid/dist/components/navigation/stepper.js

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

"use client";
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{combineClasses as t,classes as a}from"../../core/utils.js";import{Animatable as l}from"@infinityfx/lively";import{useId as o}from"react";import i from"../feedback/halo.js";import c from"../feedback/progress-bar.js";import{createStyles as s}from"../../core/style.js";import{Icon as n}from"../../core/icons.js";const d=s("stepper",{".stepper":{display:"grid",gridAutoFlow:"column",gridAutoColumns:"1fr",gap:"6px"},".stepper.vertical":{gridAutoFlow:"row"},".step":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".stepper.vertical .step":{flexDirection:"row"},".header":{display:"flex",alignItems:"center",gap:"6px"},".stepper.vertical .header":{flexDirection:"column"},".bullet":{position:"relative",width:"2.5em",height:"2.5em",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"999px",color:"var(--f-clr-grey-300)",outline:"solid 2px transparent",outlineOffset:"-1px",transition:"background-color .25s, color .25s, outline-color .25s"},".bullet:enabled":{cursor:"pointer"},'.step[data-current="true"] .bullet':{outlineColor:"var(--f-clr-primary-200)",color:"var(--f-clr-primary-200)"},'.step[data-completed="true"] .bullet':{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},'.step[data-error="true"][data-completed="false"] .bullet':{outlineColor:"var(--f-clr-error-200)",color:"var(--f-clr-error-200)"},'.step[data-error="true"][data-completed="true"] .bullet':{backgroundColor:"var(--f-clr-error-100)"},".icon":{width:"100%",aspectRatio:1,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,overflow:"hidden"},".icons":{width:"100%",display:"flex",flexDirection:"column"},".progress":{flexGrow:1,backgroundColor:"var(--f-clr-fg-200)",borderRadius:"var(--f-radius-xsm)",transition:"background-color .25s"},".stepper:not(.vertical) .progress":{minWidth:"1em",height:"3px"},".stepper.vertical .progress":{minHeight:"1em",width:"3px"},'.step[data-completed="true"] .progress':{backgroundColor:"var(--f-clr-primary-100)"},".stepper:not(.vertical) .step:not(:last-child) .content":{paddingRight:"var(--f-spacing-sml)"},".name":{fontSize:"var(--f-font-size-sml)",color:"var(--f-clr-text-100)",fontWeight:600},".label":{fontSize:"var(--f-font-size-xsm)",color:"var(--f-clr-grey-600)"},".halo":{inset:"-.5em !important"},".track":{marginTop:"calc(var(--f-spacing-sml) - 6px)"}});function p({cc:s={},steps:p,completed:m,setCompleted:f,navigation:u="backwards",variant:g="default",...v}){const h=t(d,s),b=o();let x=p.map(((r,e)=>Object.assign({label:(e+1+"").padStart(2,"0")},r)));return"compact"===g&&(x=x.slice(Math.min(m,p.length-1),m+1)),r("div",{...v,className:a(h.stepper,"default"!==g&&h.vertical,v.className),children:[x.map((({name:t,label:a,icon:o,error:c},s)=>{const d=("forwards"===u?s>=m:"backwards"===u?s<m:"both"===u)&&"compact"!==g,v="compact"===g?m===p.length:s<m;return r("div",{className:h.step,"data-completed":v,"data-current":"compact"===g?!v:s===m,"data-error":c,children:[r("div",{className:h.header,children:[e(i,{disabled:!d,cc:{halo:h.halo},children:e("button",{type:"button",className:h.bullet,disabled:!d,onClick:()=>f?.(s),"aria-labelledby":`${b}-${s}`,children:e("div",{className:h.icon,children:e(l,{initial:{translate:v?"0% -25%":"0% 25%"},animate:{translate:["0% 25%","0% -25%"],duration:.35},triggers:[{on:v},{on:!v,reverse:!0}],children:r("div",{className:h.icons,children:[e("div",{className:h.icon,children:o}),e("div",{className:h.icon,children:e(n,{type:"check"})})]})})})})}),s<p.length-1&&"compact"!==g&&e("div",{className:h.progress})]}),r("div",{className:h.content,children:[e("div",{className:h.label,id:`${b}-${s}`,children:a}),e("div",{className:h.name,children:t})]})]},s)})),"compact"===g&&e(c,{size:"sml",value:m/p.length,cc:{track:h.track}})]})}export{p as default};
//# sourceMappingURL=stepper.js.map