@infinityfx/fluid 1.4.8 → 1.4.10

package/dist/components/display/timeline.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{combineClasses as r,classes as i}from"../../core/utils.js";import{Children as a}from"react";import{createStyles as n}from"../../core/style.js";const o=n("timeline",{".timeline":{display:"grid"},".d__horizontal":{gridAutoFlow:"column"},".timeline.uniform":{gridAutoColumns:"1fr",gridAutoRows:"1fr"},".event":{display:"flex",gap:"var(--f-spacing-sml)"},".d__horizontal .event":{flexDirection:"column"},".event:not(:first-child) .content":{alignSelf:"center"},".event:last-child .content":{alignSelf:"flex-end"},".d__horizontal .event:not(:first-child) .content":{paddingLeft:"var(--f-spacing-xsm)"},".d__horizontal .event:not(:last-child) .content":{paddingRight:"var(--f-spacing-xsm)"},".axis":{display:"flex",gap:"3px",alignItems:"center"},".d__vertical .axis":{flexDirection:"column"},".bullet":{position:"relative",height:"1.5em",width:"1.5em",borderRadius:"999px",border:"solid 3px var(--f-clr-grey-200)",zIndex:1,transition:"border-color .25s"},".bullet::after":{content:'""',position:"absolute",inset:"3px",borderRadius:"999px",backgroundColor:"var(--f-clr-primary-100)",opacity:0,transition:"opacity .25s"},'.bullet[data-active="true"]':{borderColor:"var(--f-clr-primary-100)"},'.bullet[data-active="true"]::after':{opacity:1},".segment":{height:"3px",backgroundColor:"var(--f-clr-grey-200)",transition:"background-color .25s",flexGrow:1},".d__horizontal .segment":{height:"3px",minWidth:"3px"},".d__vertical .segment":{width:"3px",minHeight:"3px",writingMode:"vertical-lr"},".segment:first-child":{borderStartEndRadius:"99px",borderEndEndRadius:"99px"},".segment:last-child":{borderEndStartRadius:"99px",borderStartStartRadius:"99px"},'.segment[data-active="true"]':{backgroundColor:"var(--f-clr-primary-100)"}});function l({children:n,cc:l={},active:d,direction:s="horizontal",uniform:c,reverse:m,...p}){const g=r(o,l),u=a.toArray(n);return e("div",{...p,className:i(g.timeline,g[`d__${s}`],c&&g.uniform,p.className),children:u.map(((r,i)=>{const a=m?u.length-1-i:i;return t("div",{className:g.event,children:[t("div",{className:g.axis,children:[0!==i&&e("div",{className:g.segment,"data-active":m?a+1<d:a<d}),e("div",{className:g.bullet,"data-active":a<d}),i!==u.length-1&&e("div",{className:g.segment,"data-active":m?a<d:a+1<d})]}),e("div",{className:g.content,children:r})]},i)}))})}export{l as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{combineClasses as r,classes as i}from"../../core/utils.js";import{Children as a}from"react";import{createStyles as n}from"../../core/style.js";const o=n("timeline",{".timeline":{display:"grid"},".d__horizontal":{gridAutoFlow:"column"},".timeline.uniform":{gridAutoColumns:"1fr",gridAutoRows:"1fr"},".event":{display:"flex",gap:"var(--f-spacing-sml)"},".d__horizontal .event":{flexDirection:"column"},".event:not(:first-child) .content":{alignSelf:"center"},".event:last-child .content":{alignSelf:"flex-end"},".d__horizontal .event:not(:first-child) .content":{paddingLeft:"var(--f-spacing-xsm)"},".d__horizontal .event:not(:last-child) .content":{paddingRight:"var(--f-spacing-xsm)"},".d__vertical.overflow .event:last-child .content":{alignSelf:"flex-start",paddingTop:"6px"},".axis":{display:"flex",gap:"3px",alignItems:"center"},".d__vertical .axis":{flexDirection:"column"},".bullet":{position:"relative",height:"1.5em",width:"1.5em",borderRadius:"999px",border:"solid 3px var(--f-clr-grey-200)",zIndex:1,transition:"border-color .25s"},".bullet::after":{content:'""',position:"absolute",inset:"3px",borderRadius:"999px",backgroundColor:"var(--f-clr-primary-100)",opacity:0,transition:"opacity .25s"},'.bullet[data-active="true"]':{borderColor:"var(--f-clr-primary-100)"},'.bullet[data-active="true"]::after':{opacity:1},".segment":{height:"3px",backgroundColor:"var(--f-clr-grey-200)",transition:"background-color .25s",flexGrow:1},".overflow .event:last-child .segment":{flexGrow:0},".d__horizontal .segment":{height:"3px",minWidth:"3px"},".d__vertical .segment":{width:"3px",minHeight:"3px",writingMode:"vertical-lr"},".segment:first-child":{borderStartEndRadius:"99px",borderEndEndRadius:"99px"},".segment:last-child":{borderEndStartRadius:"99px",borderStartStartRadius:"99px"},'.segment[data-active="true"]':{backgroundColor:"var(--f-clr-primary-100)"}});function l({children:n,cc:l={},active:d,direction:s="horizontal",uniform:c,reverse:m,overflow:p=!1,...v}){const f=r(o,l),g=a.toArray(n);return e("div",{...v,className:i(f.timeline,f[`d__${s}`],c&&f.uniform,p&&f.overflow,v.className),children:g.map(((r,i)=>{const a=m?g.length-1-i:i;return t("div",{className:f.event,children:[t("div",{className:f.axis,children:[0!==i&&e("div",{className:f.segment,"data-active":m?a+1<d:a<d}),e("div",{className:f.bullet,"data-active":a<d}),i!==g.length-1&&e("div",{className:f.segment,"data-active":m?a<d:a+1<d})]}),e("div",{className:f.content,children:r})]},i)}))})}export{l as default};
 //# sourceMappingURL=timeline.js.map

package/dist/components/display/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../../../src/components/display/timeline.tsx"],"sourcesContent":[null],"names":["styles","createStyles","display","gridAutoFlow","gridAutoColumns","gridAutoRows","gap","flexDirection","alignSelf","paddingLeft","paddingRight","alignItems","position","height","width","borderRadius","border","zIndex","transition","content","inset","backgroundColor","opacity","borderColor","flexGrow","minWidth","minHeight","writingMode","borderStartEndRadius","borderEndEndRadius","borderEndStartRadius","borderStartStartRadius","Timeline","children","cc","active","direction","uniform","reverse","props","style","combineClasses","childArray","Children","toArray","_jsx","className","classes","timeline","map","child","i","index","length","_jsxs","event","axis","segment","bullet"],"mappings":"wMAKA,MAAMA,EAASC,EAAa,WAAY,CACpC,YAAa,CACTC,QAAS,QAGb,iBAAkB,CACdC,aAAc,UAGlB,oBAAqB,CACjBC,gBAAiB,MACjBC,aAAc,OAGlB,SAAU,CACNH,QAAS,OACTI,IAAK,wBAGT,wBAAyB,CACrBC,cAAe,UAGnB,oCAAqC,CACjCC,UAAW,UAGf,6BAA8B,CAC1BA,UAAW,YAGf,mDAAoD,CAChDC,YAAa,wBAGjB,kDAAmD,CAC/CC,aAAc,wBAGlB,QAAS,CACLR,QAAS,OACTI,IAAK,MACLK,WAAY,UAGhB,qBAAsB,CAClBJ,cAAe,UAGnB,UAAW,CACPK,SAAU,WACVC,OAAQ,QACRC,MAAO,QACPC,aAAc,QACdC,OAAQ,kCACRC,OAAQ,EACRC,WAAY,qBAGhB,iBAAkB,CACdC,QAAS,KACTP,SAAU,WACVQ,MAAO,MACPL,aAAc,QACdM,gBAAiB,2BACjBC,QAAS,EACTJ,WAAY,gBAGhB,8BAA+B,CAC3BK,YAAa,4BAGjB,qCAAsC,CAClCD,QAAS,GAGb,WAAY,CACRT,OAAQ,MACRQ,gBAAiB,wBACjBH,WAAY,wBACZM,SAAU,GAGd,0BAA2B,CACvBX,OAAQ,MACRY,SAAU,OAGd,wBAAyB,CACrBX,MAAO,MACPY,UAAW,MACXC,YAAa,eAGjB,uBAAwB,CACpBC,qBAAsB,OACtBC,mBAAoB,QAGxB,sBAAuB,CACnBC,qBAAsB,OACtBC,uBAAwB,QAG5B,+BAAgC,CAC5BV,gBAAiB,8BAWX,SAAUW,GAASC,SAAEA,EAAQC,GAAEA,EAAK,CAAE,EAAAC,OAAEA,EAAMC,UAAEA,EAAY,aAAYC,QAAEA,EAAOC,QAAEA,KAAYC,IAsBzG,MAAMC,EAAQC,EAAezC,EAAQkC,GAC/BQ,EAAaC,EAASC,QAAQX,GAEpC,OAAOY,YAASN,EACZO,UAAWC,EACPP,EAAMQ,SACNR,EAAM,MAAMJ,KACZC,GAAWG,EAAMH,QACjBE,EAAMO,WACTb,SAEAS,EAAWO,KAAI,CAACC,EAAOC,KACpB,MAAMC,EAAQd,EAAUI,EAAWW,OAAS,EAAIF,EAAIA,EAEpD,OAAOG,EAAA,MAAA,CAAaR,UAAWN,EAAMe,MAAKtB,SAAA,CACtCqB,SAAKR,UAAWN,EAAMgB,eACX,IAANL,GAAWN,EAAA,MAAA,CAAKC,UAAWN,EAAMiB,QAAsB,cAAAnB,EAAUc,EAAQ,EAAIjB,EAASiB,EAAQjB,IAC/FU,SAAKC,UAAWN,EAAMkB,OAAM,cAAeN,EAAQjB,IAClDgB,IAAMT,EAAWW,OAAS,GAAKR,SAAKC,UAAWN,EAAMiB,sBAAsBnB,EAAUc,EAAQjB,EAASiB,EAAQ,EAAIjB,OAGvHU,EAAA,MAAA,CAAKC,UAAWN,EAAMrB,QAAOc,SACxBiB,MARQC,EAUX,KAGlB"}
+{"version":3,"file":"timeline.js","sources":["../../../../src/components/display/timeline.tsx"],"sourcesContent":[null],"names":["styles","createStyles","display","gridAutoFlow","gridAutoColumns","gridAutoRows","gap","flexDirection","alignSelf","paddingLeft","paddingRight","paddingTop","alignItems","position","height","width","borderRadius","border","zIndex","transition","content","inset","backgroundColor","opacity","borderColor","flexGrow","minWidth","minHeight","writingMode","borderStartEndRadius","borderEndEndRadius","borderEndStartRadius","borderStartStartRadius","Timeline","children","cc","active","direction","uniform","reverse","overflow","props","style","combineClasses","childArray","Children","toArray","_jsx","className","classes","timeline","map","child","i","index","length","_jsxs","event","axis","segment","bullet"],"mappings":"wMAKA,MAAMA,EAASC,EAAa,WAAY,CACpC,YAAa,CACTC,QAAS,QAGb,iBAAkB,CACdC,aAAc,UAGlB,oBAAqB,CACjBC,gBAAiB,MACjBC,aAAc,OAGlB,SAAU,CACNH,QAAS,OACTI,IAAK,wBAGT,wBAAyB,CACrBC,cAAe,UAGnB,oCAAqC,CACjCC,UAAW,UAGf,6BAA8B,CAC1BA,UAAW,YAGf,mDAAoD,CAChDC,YAAa,wBAGjB,kDAAmD,CAC/CC,aAAc,wBAGlB,mDAAoD,CAChDF,UAAW,aACXG,WAAY,OAGhB,QAAS,CACLT,QAAS,OACTI,IAAK,MACLM,WAAY,UAGhB,qBAAsB,CAClBL,cAAe,UAGnB,UAAW,CACPM,SAAU,WACVC,OAAQ,QACRC,MAAO,QACPC,aAAc,QACdC,OAAQ,kCACRC,OAAQ,EACRC,WAAY,qBAGhB,iBAAkB,CACdC,QAAS,KACTP,SAAU,WACVQ,MAAO,MACPL,aAAc,QACdM,gBAAiB,2BACjBC,QAAS,EACTJ,WAAY,gBAGhB,8BAA+B,CAC3BK,YAAa,4BAGjB,qCAAsC,CAClCD,QAAS,GAGb,WAAY,CACRT,OAAQ,MACRQ,gBAAiB,wBACjBH,WAAY,wBACZM,SAAU,GAGd,uCAAwC,CACpCA,SAAU,GAGd,0BAA2B,CACvBX,OAAQ,MACRY,SAAU,OAGd,wBAAyB,CACrBX,MAAO,MACPY,UAAW,MACXC,YAAa,eAGjB,uBAAwB,CACpBC,qBAAsB,OACtBC,mBAAoB,QAGxB,sBAAuB,CACnBC,qBAAsB,OACtBC,uBAAwB,QAG5B,+BAAgC,CAC5BV,gBAAiB,8BAWD,SAAAW,GAASC,SAAEA,EAAQC,GAAEA,EAAK,CAAE,EAAAC,OAAEA,EAAMC,UAAEA,EAAY,aAAYC,QAAEA,EAAOC,QAAEA,EAAOC,SAAEA,GAAW,KAAUC,IA4B3H,MAAMC,EAAQC,EAAe3C,EAAQmC,GAC/BS,EAAaC,EAASC,QAAQZ,GAEpC,OAAOa,EAAA,MAAA,IAASN,EACZO,UAAWC,EACPP,EAAMQ,SACNR,EAAM,MAAML,KACZC,GAAWI,EAAMJ,QACjBE,GAAYE,EAAMF,SAClBC,EAAMO,oBAGTJ,EAAWO,KAAI,CAACC,EAAOC,KACpB,MAAMC,EAAQf,EAAUK,EAAWW,OAAS,EAAIF,EAAIA,EAEpD,OAAOG,EAAA,MAAA,CAAaR,UAAWN,EAAMe,MAAKvB,SAAA,CACtCsB,SAAKR,UAAWN,EAAMgB,eACX,IAANL,GAAWN,EAAA,MAAA,CAAKC,UAAWN,EAAMiB,QAAsB,cAAApB,EAAUe,EAAQ,EAAIlB,EAASkB,EAAQlB,IAC/FW,SAAKC,UAAWN,EAAMkB,OAAM,cAAeN,EAAQlB,IAClDiB,IAAMT,EAAWW,OAAS,GAAKR,SAAKC,UAAWN,EAAMiB,sBAAsBpB,EAAUe,EAAQlB,EAASkB,EAAQ,EAAIlB,OAGvHW,EAAA,MAAA,CAAKC,UAAWN,EAAMtB,QAAOc,SACxBkB,MARQC,EAUX,KAGlB"}

package/dist/components/feedback/circular-progress.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{combineClasses as i,classes as o}from"../../core/utils.js";import{Animatable as t}from"@infinityfx/lively";import{useLink as s}from"@infinityfx/lively/hooks";import{useEffect as a}from"react";import{createStyles as l}from"../../core/style.js";const n=l("circular-progress",{".wrapper":{position:"relative",width:"3.2em",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},".track":{stroke:"var(--f-clr-fg-100)",strokeWidth:"var(--width)",strokeLinecap:"round",strokeDasharray:1},".progress":{stroke:"var(--color, var(--f-clr-primary-100))",strokeWidth:"var(--width)",strokeLinecap:"round",transition:"background-color .3s"},".label":{position:"absolute",fontSize:"0.7em",fontWeight:600},".s__xsm":{fontSize:"var(--f-font-size-xsm)"},".s__sml":{fontSize:"var(--f-font-size-sml)"},".s__med":{fontSize:"var(--f-font-size-med)"},".s__lrg":{fontSize:"var(--f-font-size-lrg)"}});function c({children:l,cc:c={},size:f="med",slice:m=0,value:d,defaultValue:p=0,color:v,...h}){const u=i(n,c),k=void 0!==d?d:p,g=s(k*(1-m));return a((()=>g.set(k*(1-m),{duration:.3})),[k,m]),e("div",{...h,"aria-label":void 0,className:o(u.wrapper,u[`s__${f}`],h.className),children:[r("div",{className:u.label,children:l}),e("svg",{overflow:"visible",viewBox:"0 0 100 100",role:"progressbar","aria-valuenow":100*k,"aria-label":h["aria-label"],style:{rotate:90+180*m+"deg",width:"100%","--color":v,"--width":"10px"},children:[r("circle",{r:45,cx:50,cy:50,fill:"none",className:u.track,pathLength:1,style:{strokeDashoffset:m}}),r(t,{animate:{strokeLength:g},initial:{strokeDashoffset:1-g()},children:r("circle",{r:45,cx:50,cy:50,fill:"none",className:u.progress})})]})]})}export{c as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{combineClasses as t,classes as s,combineRefs as a}from"../../core/utils.js";import{useRef as o,useLayoutEffect as i}from"react";import{createStyles as n}from"../../core/style.js";const l=n("circular-progress",{".wrapper":{position:"relative",minWidth:"min(100vw, 3.6em)",display:"flex",alignItems:"center",justifyContent:"center"},".track, .progress":{fill:"none",strokeDasharray:1,strokeWidth:"calc(.45em * var(--scale, 1))",strokeLinecap:"round",transformOrigin:"center",transition:"background-color .3s, stroke-dashoffset .3s, rotate .3s"},".track":{stroke:"var(--f-clr-fg-100)"},".progress":{stroke:"var(--color, var(--f-clr-primary-100))"},".label":{position:"absolute",fontSize:"0.7em",fontWeight:600},".s__xsm":{fontSize:"var(--f-font-size-xsm)"},".s__sml":{fontSize:"var(--f-font-size-sml)"},".s__med":{fontSize:"var(--f-font-size-med)"},".s__lrg":{fontSize:"var(--f-font-size-lrg)"}});function c({children:n,cc:c={},size:f="med",slice:m=0,value:p=0,color:d,gap:h=0,fixedStrokeWidth:u=!0,...v}){const g=t(l,c),k=o(null);return i((()=>{if(!u)return;const e=new ResizeObserver((function(){if(!k.current)return;const{width:e,fontSize:r}=getComputedStyle(k.current);k.current.style.setProperty("--scale",3.6*parseFloat(r)/parseFloat(e)+"")}));return k.current&&e.observe(k.current),()=>e.disconnect()}),[]),e("div",{...v,ref:a(v.ref,k),"aria-label":void 0,className:s(g.wrapper,g[`s__${f}`],v.className),children:[r("div",{className:g.label,children:n}),e("svg",{overflow:"visible",viewBox:"0 0 100 100",role:"progressbar","aria-valuenow":100*p,"aria-label":v["aria-label"],style:{rotate:90+180*m+"deg","--color":d},children:[r("circle",{r:45,cx:50,cy:50,pathLength:1,className:g.track,style:{strokeDashoffset:p?Math.min(p*(1-m)+Math.max(m,h/2)+h/2,1):m,rotate:(p?360*Math.min(p*(1-m)+h/2,1-m):0)+"deg"}}),r("circle",{r:45,cx:50,cy:50,pathLength:1,className:g.progress,style:{strokeDashoffset:p<1?Math.min(1-p*(1-m)+Math.max(h/2-m,0)+h/2,1):m,rotate:(p<1?360*Math.max(h/2-m,0):0)+"deg"}})]})]})}export{c as default};
 //# sourceMappingURL=circular-progress.js.map

package/dist/components/feedback/progress-bar.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{combineClasses as o,classes as e}from"../../core/utils.js";import{Animatable as i}from"@infinityfx/lively";import{useLink as s}from"@infinityfx/lively/hooks";import{useEffect as t}from"react";import{createStyles as a}from"../../core/style.js";const l=a("progress-bar",{".track":{height:".4em",minWidth:"min(100vw, 12em)",borderRadius:"999px",overflow:"hidden",backgroundColor:"var(--f-clr-fg-100)"},".progress":{height:"100%",backgroundColor:"var(--color, var(--f-clr-primary-100))",transformOrigin:"left",transition:"background-color .3s",borderRadius:"999px"},".s__xsm":{fontSize:"var(--f-font-size-xsm)"},".s__sml":{fontSize:"var(--f-font-size-sml)"},".s__med":{fontSize:"var(--f-font-size-med)"},".s__lrg":{fontSize:"var(--f-font-size-lrg)"}});function n({cc:a={},size:n="med",value:f,defaultValue:m=0,color:c,...d}){const v=o(l,a),u=void 0!==f?f:m,p=s(u);return t((()=>p.set(u,{duration:.3})),[u]),r("div",{...d,role:"progressbar","aria-valuenow":100*u,className:e(v.track,v[`s__${n}`],d.className),children:r(i,{animate:{scale:p((r=>`${r} 1`))},initial:{scale:`${p()} 1`},deform:!1,children:r("div",{className:v.progress,style:{"--color":c}})})})}export{n as default};
+import{jsx as r}from"react/jsx-runtime";import{combineClasses as o,classes as e}from"../../core/utils.js";import{Animatable as i}from"@infinityfx/lively";import{useLink as s}from"@infinityfx/lively/hooks";import{useEffect as t}from"react";import{createStyles as a}from"../../core/style.js";const n=a("progress-bar",{".track":{height:".4em",minWidth:"min(100vw, 12em)",borderRadius:"999px",overflow:"hidden",backgroundColor:"var(--f-clr-fg-100)"},".progress":{height:"100%",backgroundColor:"var(--color, var(--f-clr-primary-100))",transformOrigin:"left",transition:"background-color .3s",borderRadius:"999px"},".s__xsm":{fontSize:"var(--f-font-size-xsm)"},".s__sml":{fontSize:"var(--f-font-size-sml)"},".s__med":{fontSize:"var(--f-font-size-med)"},".s__lrg":{fontSize:"var(--f-font-size-lrg)"}});function l({cc:a={},size:l="med",value:f=0,color:m,...c}){const d=o(n,a),v=s(f);return t((()=>v.set(f,{duration:.3})),[f]),r("div",{...c,role:"progressbar","aria-valuenow":100*f,className:e(d.track,d[`s__${l}`],c.className),children:r(i,{animate:{scale:v((r=>`${r} 1`))},initial:{scale:`${v()} 1`},deform:!1,children:r("div",{className:d.progress,style:{"--color":m}})})})}export{l as default};
 //# sourceMappingURL=progress-bar.js.map

package/dist/components/input/color-picker.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as n,hexToRgb as t,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 2px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".wrapper .hue__handle::after":{boxSizing:"border-box",border:"solid 2px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function w({cc:f={},format:w,defaultValue:v,value:x,onChange:_,disabled:y,...k}){const C=n(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?t(x):x,D=void 0===v?[255,0,0]:"string"==typeof v?t(v):v,[E,G]=o(l(D)),[M,$]=o(null),[B,A]=R?[R]:o(D),L=function(e,r){const[a,o,i]=d(r);return a==e[0]&&o==e[1]&&i==e[2]}(B,E)?E:l(B),S=a(L);function W(e,r=!1){A?.(e),_?.("rgb"===w?e:c(e)),r&&(S.current=l(e)),G(S.current)}function z(e){if(!j.current||!N.current||y)return;const{clientX:r,clientY:a}="touches"in e?e.changedTouches[0]:e;let{x:o,y:i,width:n,height:t}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/n,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/t,1)),W(d(S.current))}return i((()=>{const e=new AbortController,r=e.signal,a=e=>{z(e),j.current=!1};return window.addEventListener("mouseup",a,{signal:r}),window.addEventListener("touchend",a,{signal:r}),window.addEventListener("mousemove",z,{signal:r}),window.addEventListener("touchmove",z,{signal:r}),()=>e.abort()}),[y]),e("div",{...k,style:{"--hue":`hsl(${L[0]}, 100%, 50%)`,"--color":`rgb(${B.join(",")})`},className:s(C.wrapper,k.className),children:[e("div",{className:C.row,children:[r("div",{ref:N,onMouseDown:e=>{j.current=!0,z(e.nativeEvent)},onTouchStart:e=>{j.current=!0,z(e.nativeEvent)},className:C.space,style:{background:`linear-gradient(90deg, transparent, hsl(${L[0]}, 100%, 50%)), linear-gradient(white, black)`},children:r("div",{"aria-disabled":y,className:C.selection,style:{left:`${L[1]}%`,top:100-L[2]+"%"}})}),e("div",{className:C.column,children:[r(u,{color:`rgb(${B.join(",")})`,cc:{swatch:C.swatch,...f}}),e("div",{className:C.fields,children:[r(h,{disabled:y,size:"sml",icon:"#",className:C.hex,value:null!==M?M:c(B),onChange:e=>{const r=e.target.value.replace(/[^\da-fA-F]/g,"").slice(0,6);$(r),W(t(r),!0)},onBlur:()=>$(null)}),r(g,{className:C.rgb,children:B.map(((e,a)=>r(p,{cc:f,disabled:y,max:255,precision:0,controls:!1,size:"sml",icon:"RGB".charAt(a),value:e,onChange:e=>{const r=B.slice();r[a]=parseInt(e.target.value)||0,W(r,!0)}},a)))})]})]})]}),r(m,{max:360,step:.25,tooltips:"never",disabled:y,value:[L[0]],onChange:e=>{S.current[0]=e[0],W(d(S.current))},cc:{progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle,...f}})]})}export{w as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as t,hexToRgb as n,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 1px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent !important"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".wrapper .hue__handle::after":{boxSizing:"border-box",border:"solid 1px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function w({cc:f={},format:w,defaultValue:v,value:x,onChange:_,disabled:y,...k}){const C=t(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?n(x):x,D=void 0===v?[255,0,0]:"string"==typeof v?n(v):v,[E,G]=o(l(D)),[M,$]=o(null),[B,A]=R?[R]:o(D),L=function(e,r){const[a,o,i]=d(r);return a==e[0]&&o==e[1]&&i==e[2]}(B,E)?E:l(B),S=a(L);function W(e,r=!1){A?.(e),_?.("rgb"===w?e:c(e)),r&&(S.current=l(e)),G(S.current)}function z(e){if(!j.current||!N.current||y)return;const{clientX:r,clientY:a}="touches"in e?e.changedTouches[0]:e;let{x:o,y:i,width:t,height:n}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/t,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/n,1)),W(d(S.current))}return i((()=>{const e=new AbortController,r=e.signal,a=e=>{z(e),j.current=!1};return window.addEventListener("mouseup",a,{signal:r}),window.addEventListener("touchend",a,{signal:r}),window.addEventListener("mousemove",z,{signal:r}),window.addEventListener("touchmove",z,{signal:r}),()=>e.abort()}),[y]),e("div",{...k,style:{"--hue":`hsl(${L[0]}, 100%, 50%)`,"--color":`rgb(${B.join(",")})`},className:s(C.wrapper,k.className),children:[e("div",{className:C.row,children:[r("div",{ref:N,onMouseDown:e=>{j.current=!0,z(e.nativeEvent)},onTouchStart:e=>{j.current=!0,z(e.nativeEvent)},className:C.space,style:{background:`linear-gradient(90deg, transparent, hsl(${L[0]}, 100%, 50%)), linear-gradient(white, black)`},children:r("div",{"aria-disabled":y,className:C.selection,style:{left:`${L[1]}%`,top:100-L[2]+"%"}})}),e("div",{className:C.column,children:[r(u,{color:`rgb(${B.join(",")})`,cc:{swatch:C.swatch,...f}}),e("div",{className:C.fields,children:[r(h,{disabled:y,size:"sml",icon:"#",className:C.hex,value:null!==M?M:c(B),onChange:e=>{const r=e.target.value.replace(/[^\da-fA-F]/g,"").slice(0,6);$(r),W(n(r),!0)},onBlur:()=>$(null)}),r(g,{className:C.rgb,children:B.map(((e,a)=>r(p,{cc:f,disabled:y,max:255,precision:0,controls:!1,size:"sml",icon:"RGB".charAt(a),value:e,onChange:e=>{const r=B.slice();r[a]=parseInt(e.target.value)||0,W(r,!0)}},a)))})]})]})]}),r(m,{max:360,step:.25,tooltips:"never",disabled:y,value:[L[0]],onChange:e=>{S.current[0]=e[0],W(d(S.current))},cc:{progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle,...f}})]})}export{w as default};
 //# sourceMappingURL=color-picker.js.map

package/dist/components/navigation/stepper.js

@@ -1,3 +1,3 @@
 "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 o}from"@infinityfx/lively";import{useId as l}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:v="default",...g}){const h=t(d,s),b=l(),x="compact"===v?p.slice(Math.min(m,p.length-1),m+1):p;return r("div",{...g,className:a(h.stepper,"default"!==v&&h.vertical,g.className),children:[x.map((({name:t,label:a,icon:l,error:c},s)=>{const d=("forwards"===u?s>=m:"backwards"===u?s<m:"both"===u)&&"compact"!==v,g="compact"===v?m===p.length:s<m;return a||(a=(s+1+"").padStart(2,"0")),r("div",{className:h.step,"data-completed":g,"data-current":"compact"===v?!g: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(o,{initial:{translate:g?"0% -25%":"0% 25%"},animate:{translate:["0% 25%","0% -25%"],duration:.35},triggers:[{on:g},{on:!g,reverse:!0}],children:r("div",{className:h.icons,children:[e("div",{className:h.icon,children:l}),e("div",{className:h.icon,children:e(n,{type:"check"})})]})})})})}),s<p.length-1&&"compact"!==v&&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"===v&&e(c,{size:"sml",value:m/p.length,cc:{track:h.track}})]})}export{p as default};
+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

package/dist/types/src/components/display/timeline.d.ts

@@ -1,11 +1,11 @@
 import { Selectors } from '../../../src/types';
-export type TimelineSelectors = Selectors<'timeline' | 'uniform' | 'd__horizontal' | 'd__vertical' | 'event' | 'content' | 'axis' | 'bullet' | 'segment'>;
+export type TimelineSelectors = Selectors<'timeline' | 'uniform' | 'overflow' | 'd__horizontal' | 'd__vertical' | 'event' | 'content' | 'axis' | 'bullet' | 'segment'>;
 /**
  * An ordered timeline of events.
  *
  * @see {@link https://fluid.infinityfx.dev/docs/components/timeline}
  */
-export default function Timeline({ children, cc, active, direction, uniform, reverse, ...props }: {
+export default function Timeline({ children, cc, active, direction, uniform, reverse, overflow, ...props }: {
     ref?: React.Ref<HTMLDivElement>;
     cc?: TimelineSelectors;
     /**
@@ -25,4 +25,10 @@ export default function Timeline({ children, cc, active, direction, uniform, rev
      * @default false
      */
     reverse?: boolean;
+    /**
+     * Lets the last event's content overflow past it's bullet point.
+     *
+     * @default false
+     */
+    overflow?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/feedback/circular-progress.d.ts

@@ -5,12 +5,13 @@ export type CircularProgressSelectors = Selectors<'wrapper' | 'track' | 'progres
  *
  * @see {@link https://fluid.infinityfx.dev/docs/components/circular-progress}
  */
-export default function CircularProgress({ children, cc, size, slice, value, defaultValue, color, ...props }: {
+export default function CircularProgress({ children, cc, size, slice, value, color, gap, fixedStrokeWidth, ...props }: {
     ref?: React.Ref<HTMLDivElement>;
     cc?: CircularProgressSelectors;
     size?: FluidSize;
     slice?: number;
     value?: number;
-    defaultValue?: number;
     color?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>): import("react/jsx-runtime").JSX.Element;
+    gap?: number;
+    fixedStrokeWidth?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/feedback/progress-bar.d.ts

@@ -5,11 +5,10 @@ export type ProgressBarSelectors = Selectors<'track' | 'progress' | 's__xsm' | '
  *
  * @see {@link https://fluid.infinityfx.dev/docs/components/progress-bar}
  */
-export default function ProgressBar({ cc, size, value, defaultValue, color, ...props }: {
+export default function ProgressBar({ cc, size, value, color, ...props }: {
     ref?: React.Ref<HTMLDivElement>;
     cc?: ProgressBarSelectors;
     size?: FluidSize;
     value?: number;
-    defaultValue?: number;
     color?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue'>): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/fluid",
-	"version": "1.4.8",
+	"version": "1.4.10",
 	"type": "module",
 	"description": "React UI library, using zero-runtime CSS-in-JS.",
 	"main": "dist/index.js",