@infinityfx/fluid 1.4.20 → 1.4.22

package/dist/components/display/tooltip.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as t,Fragment as e,jsx as n}from"react/jsx-runtime";import{combineClasses as r,combineRefs as i,getAbsoluteZIndex as o}from"../../core/utils.js";import{useId as a,useRef as c,useState as s,useEffect as l,isValidElement as u,cloneElement as d}from"react";import{createPortal as f}from"react-dom";import{createStyles as m}from"../../core/style.js";const p={count:0},h=m("tooltip",{".anchor":{position:"absolute",pointerEvents:"none"},'.anchor[data-position="top"]':{bottom:"calc(100% + var(--f-spacing-sml))",left:"50%"},'.anchor[data-position="left"]':{right:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="right"]':{left:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="bottom"]':{top:"calc(100% + var(--f-spacing-sml))",left:"50%"},".tooltip":{position:"fixed",left:0,top:0,zIndex:999,backgroundColor:"var(--f-clr-grey-200)",color:"var(--f-clr-text-100)",fontSize:"var(--f-font-size-xsm)",fontWeight:600,textAlign:"center",padding:".3em .5em",borderRadius:"var(--f-radius-sml)",pointerEvents:"none",transition:"opacity .2s, translate .2s"},'.tooltip[aria-hidden="true"]':{opacity:0,translate:"0px 4px"}});function g({children:m,cc:g={},content:v,position:x="auto",visibility:b="interact",delay:y=.3,...w}){const E=r(h,g),W=a(),A=c(null),L=c(null),F=c(null),$=c({visible:!1,touchOnly:!1,timeout:void 0,maxWidth:void 0,offset:0}),[z,C]=s(!1),[M,O]=s(!1),[j,B]=s(x),[I,R]=s(0);function T(t,e=0){if(clearTimeout($.current.timeout),null!==t){if(F.current&&L.current&&(t||"always"===b)){let{left:t,top:e,right:n,bottom:r,width:i}=F.current.getBoundingClientRect();n=window.innerWidth-n,r=window.innerHeight-r;const a="auto"!==x?x:{[t]:"left",[e]:"top",[n]:"right",[r]:"bottom"}[Math.max(t,e,n,r)];if(["left","right"].includes(a))$.current.maxWidth=Math.max(t,n),$.current.offset=0;else{const e=t+i/2,n=window.innerWidth-e;$.current.maxWidth=void 0,$.current.offset=Math.max(L.current.offsetWidth-2*Math.min(e,n),0)*(e<n?1:-1)}B(a),R(o(F.current)+2)}if(!t||"never"===b){$.current.touchOnly=!1;const t="always"===b;return t!==$.current.visible&&setTimeout((()=>p.count+=t?1:-1),200),O($.current.visible=t)}p.count&&(e=0),$.current.visible||p.count++,$.current.visible=!0,$.current.timeout=setTimeout((()=>{O(!0)}),1e3*e)}}return l((()=>{z||C(!0);const t=F.current,e=new AbortController,n=e.signal;if(!t)return;let r;cancelAnimationFrame(r),r=requestAnimationFrame((function t(){if(A.current&&L.current){const{x:t,y:e}=A.current.getBoundingClientRect(),n={top:"-50%, -100%",left:"-100%, -50%",right:"0%, -50%",bottom:"-50%, 0%"}[j],r=L.current.style;r.transform=`translate(${t}px, ${e}px) translate(${n})`,r.left=`${$.current.offset}px`,r.maxWidth=`${$.current.maxWidth}px`}r=requestAnimationFrame(t)})),window.addEventListener("touchstart",(e=>{e.target===t||t.contains(e.target)?($.current.touchOnly=!0,T(!0,y+.05)):T(!1)}),{signal:n});const i=t=>{$.current.touchOnly||t instanceof FocusEvent&&t.target instanceof Element&&!t.target.matches(":focus-visible")||T(!0,y)};return t.addEventListener("mouseenter",i,{signal:n}),t.addEventListener("focus",i,{signal:n}),t.addEventListener("mouseleave",(()=>T(!1)),{signal:n}),t.addEventListener("blur",(()=>T(!1)),{signal:n}),t.addEventListener("touchend",(()=>T(null)),{signal:n}),()=>{cancelAnimationFrame(r),e.abort()}}),[b,x,j,y]),l((()=>T("always"===b)),[b]),m=Array.isArray(m)?m[0]:m,u(m)?t(e,{children:[d(m,{...w,"aria-describedby":W,ref:i(F,w.ref,m.props.ref)}),F.current&&f(n("div",{ref:A,className:E.anchor,"data-position":j}),F.current),z&&f(n("div",{ref:L,id:W,role:"tooltip",className:E.tooltip,"aria-hidden":!M,style:{zIndex:I},children:v}),document.getElementById("__fluid"))]}):m}export{g as default};
+import{jsxs as t,Fragment as e,jsx as n}from"react/jsx-runtime";import{combineClasses as r,combineRefs as i,getAbsoluteZIndex as o}from"../../core/utils.js";import{useId as a,useRef as c,useState as s,useEffect as l,isValidElement as u,cloneElement as d}from"react";import{createPortal as f}from"react-dom";import{createStyles as m}from"../../core/style.js";const p={count:0},h=m("tooltip",{".anchor":{position:"absolute",pointerEvents:"none"},'.anchor[data-position="top"]':{bottom:"calc(100% + var(--f-spacing-sml))",left:"50%"},'.anchor[data-position="left"]':{right:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="right"]':{left:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="bottom"]':{top:"calc(100% + var(--f-spacing-sml))",left:"50%"},".tooltip":{position:"fixed",left:0,top:0,zIndex:999,backgroundColor:"var(--f-clr-grey-200)",color:"var(--f-clr-text-100)",fontSize:"var(--f-font-size-xsm)",fontWeight:600,textAlign:"center",padding:".3em .5em",borderRadius:"var(--f-radius-sml)",pointerEvents:"none",transition:"opacity .2s, translate .2s"},'.tooltip[aria-hidden="true"]':{opacity:0,translate:"0px 4px"}});function g({children:m,cc:g={},content:v,position:x="auto",visibility:b="interact",delay:y=.3,...w}){const E=r(h,g),W=a(),A=c(null),L=c(null),F=c(null),$=c({visible:!1,touchOnly:!1,timeout:void 0,maxWidth:void 0,offset:0}),[z,C]=s(!1),[M,O]=s(!1),[j,B]=s(x),[I,R]=s(0);function T(t,e=0){if(clearTimeout($.current.timeout),null!==t){if(F.current&&L.current&&(t||"always"===b)){let{left:t,top:e,right:n,bottom:r,width:i}=F.current.getBoundingClientRect();n=window.innerWidth-n,r=window.innerHeight-r;const a="auto"!==x?x:{[t]:"left",[e]:"top",[n]:"right",[r]:"bottom"}[Math.max(t,e,n,r)];if(["left","right"].includes(a))$.current.maxWidth=Math.max(t,n),$.current.offset=0;else{const e=t+i/2,n=window.innerWidth-e;$.current.maxWidth=void 0,$.current.offset=Math.max(L.current.offsetWidth-2*Math.min(e,n),0)*(e<n?1:-1)}B(a),R(o(F.current)+2)}if(!t||"never"===b){$.current.touchOnly=!1;const t="always"===b;return t!==$.current.visible&&setTimeout((()=>p.count+=t?1:-1),200),O($.current.visible=t)}$.current.timeout=setTimeout((()=>{O(!0),$.current.visible||p.count++,$.current.visible=!0}),p.count?0:1e3*e)}}return l((()=>{z||C(!0);const t=F.current,e=new AbortController,n=e.signal;if(!t)return;let r;cancelAnimationFrame(r),r=requestAnimationFrame((function t(){if(A.current&&L.current){const{x:t,y:e}=A.current.getBoundingClientRect(),n={top:"-50%, -100%",left:"-100%, -50%",right:"0%, -50%",bottom:"-50%, 0%"}[j],r=L.current.style;r.transform=`translate(${t}px, ${e}px) translate(${n})`,r.left=`${$.current.offset}px`,r.maxWidth=`${$.current.maxWidth}px`}r=requestAnimationFrame(t)})),window.addEventListener("touchstart",(e=>{e.target===t||t.contains(e.target)?($.current.touchOnly=!0,T(!0,y+.05)):T(!1)}),{signal:n});const i=t=>{$.current.touchOnly||t instanceof FocusEvent&&t.target instanceof Element&&!t.target.matches(":focus-visible")||T(!0,y)};return t.addEventListener("mouseenter",i,{signal:n}),t.addEventListener("focus",i,{signal:n}),t.addEventListener("mouseleave",(()=>T(!1)),{signal:n}),t.addEventListener("blur",(()=>T(!1)),{signal:n}),t.addEventListener("touchend",(()=>T(null)),{signal:n}),()=>{cancelAnimationFrame(r),e.abort()}}),[b,x,j,y]),l((()=>T("always"===b)),[b]),m=Array.isArray(m)?m[0]:m,u(m)?t(e,{children:[d(m,{...w,"aria-describedby":W,ref:i(F,w.ref,m.props.ref)}),F.current&&f(n("div",{ref:A,className:E.anchor,"data-position":j}),F.current),z&&f(n("div",{ref:L,id:W,role:"tooltip",className:E.tooltip,"aria-hidden":!M,style:{zIndex:I},children:v}),document.getElementById("__fluid"))]}):m}export{g as default};
 //# sourceMappingURL=tooltip.js.map

package/dist/components/input/date-field.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as a}from"react";import o from"./field.js";import{Animatable as t}from"@infinityfx/lively";import i from"./calendar.js";import n from"../layout/popover/index.js";import{createStyles as l}from"../../core/style.js";import{combineClasses as d}from"../../core/utils.js";import c from"./button.js";import{Icon as s}from"../../core/icons.js";const m=l("date-field",(e=>({[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".calendar":{boxShadow:"var(--f-shadow-med)",border:"solid 1px var(--f-clr-fg-200)"}},[`@media(max-width: ${e.breakpoints.mob}px)`]:{".calendar":{background:"none !important",padding:"0 !important"},".years":{background:"var(--f-clr-bg-100) !important"}}})));function p({cc:l={},value:p,defaultValue:u,onChange:f,disabled:g,clearable:b,...h}){const y=d(m,l),[v,x]=void 0!==p?[p,f]:a(u||null),[j,C]=a(null);return e(n.Root,{position:"center",mobileContainer:"modal",children:[r(n.Trigger,{disabled:!0===g||h.readOnly,children:r(o,{...h,cc:l,inputMode:"none",role:"combobox","aria-haspopup":"listbox","aria-disabled":h.readOnly||!0===g||!1,type:"text",disabled:!0===g,value:null!==j?j:(k=v,k?`${k.getFullYear()}-${(k.getMonth()+1).toString().padStart(2,"0")}-${k.getDate().toString().padStart(2,"0")}`:""),onChange:e=>{C(function(e){const r=e.replace(/\D/g,"");return[r.slice(0,4),r.slice(4,6),r.slice(6,8)].filter((e=>e.length)).join("-")}(e.target.value))},onBlur:()=>{if(j){const e=new Date(j);isNaN(e.getTime())||x?.(e)}C(null)},right:b&&r(c,{compact:!0,"aria-label":"Clear date",round:h.round,size:h.size,disabled:!0===g||h.readOnly,variant:"minimal",style:{marginRight:".2em"},onClick:()=>x?.(null),children:r(s,{type:"close"})})})}),r(n.Content,{role:"listbox",children:r(t,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r(i,{cc:{calendar:y.calendar,years:y.years},round:h.round,size:h.size,disabled:g,value:v,onChange:e=>x?.(e)})})})]});var k}export{p as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as a}from"react";import o from"./field.js";import{Animatable as t}from"@infinityfx/lively";import i from"./calendar.js";import n from"../layout/popover/index.js";import{createStyles as l}from"../../core/style.js";import{combineClasses as d}from"../../core/utils.js";import c from"./button.js";import{Icon as s}from"../../core/icons.js";const m=l("date-field",(e=>({[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".calendar":{boxShadow:"var(--f-shadow-med)",border:"solid 1px var(--f-clr-fg-200)"}},[`@media(max-width: ${e.breakpoints.mob}px)`]:{".calendar":{background:"none !important",padding:"0 !important"},".years":{background:"var(--f-clr-bg-100) !important"}}})));function p({cc:l={},value:p,defaultValue:u,onChange:f,disabled:g,clearable:b,...h}){const y=d(m,l),[v,x]=void 0!==p?[p,f]:a(u||null),[j,C]=a(null);return e(n.Root,{position:"center",mobileContainer:"modal",children:[r(n.Trigger,{disabled:!0===g||h.readOnly,children:r(o,{...h,cc:l,inputMode:"none",role:"combobox","aria-haspopup":"listbox","aria-disabled":h.readOnly||!0===g||!1,type:"text",disabled:!0===g,value:null!==j?j:(k=v,k?`${k.getFullYear()}-${(k.getMonth()+1).toString().padStart(2,"0")}-${k.getDate().toString().padStart(2,"0")}`:""),onChange:e=>{C(function(e){const r=e.replace(/\D/g,"");return[r.slice(0,4),r.slice(4,6),r.slice(6,8)].filter((e=>e.length)).join("-")}(e.target.value))},onBlur:()=>{if(j){const e=new Date(j);isNaN(e.getTime())||x?.(e)}C(null)},right:b?r(c,{compact:!0,"aria-label":"Clear date",round:h.round,size:h.size,disabled:!0===g||h.readOnly,variant:"minimal",style:{marginRight:".2em"},onClick:()=>x?.(null),children:r(s,{type:"close"})}):h.right})}),r(n.Content,{role:"listbox",children:r(t,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r(i,{cc:{calendar:y.calendar,years:y.years},round:h.round,size:h.size,disabled:g,value:v,onChange:e=>x?.(e)})})})]});var k}export{p as default};
 //# sourceMappingURL=date-field.js.map

package/dist/components/input/number-field.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime";import{useState as e,useRef as r,useCallback as n}from"react";import o from"./field.js";import i from"./button.js";import{combineClasses as a,toNumber as u,round as l,combineRefs as c,changeInputValue as m}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";const f=d("number-field",{".field .button__start":{marginLeft:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".field .button__end":{marginRight:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".input":{MozAppearance:"textfield"},".input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0}});function s({cc:d={},precision:s=3,controls:b=!0,defaultValue:g,...v}){const _=a(f,d),[h,k]=void 0!==v.value?[v.value]:e(g||""),x=r(null),j=u(v.step,1),A=u(v.min,-Number.MAX_VALUE),C=u(v.max,Number.MAX_VALUE),M=n(((t,e)=>{let r=t?parseFloat(t.toString()):void 0;return void 0!==e&&(r=(r||0)+e),void 0!==r&&(r=Math.max(r,A),r=Math.min(r,C)),void 0===r?"":l(r,s).toString()}),[s,A,C]);function y(t){x.current&&m(x.current,M(h,t))}const z={compact:!0,size:v.size,disabled:v.disabled,round:v.round};return t(o,{...v,inputRef:c(x,v.inputRef),type:"number",value:h,onChange:t=>{k?.(t.target.value),v.onChange?.(t)},onBlur:t=>{t.target.value=M(t.target.value),k?.(t.target.value),v.onChange?.(t),v.onBlur?.(t)},cc:{...d,field:_.field,input:_.input},left:b?t(i,{...z,cc:{button:_.button__start},"aria-label":`-${j}`,onClick:()=>y(-j),children:t(p,{type:"remove"})}):null,right:b?t(i,{...z,cc:{button:_.button__end},"aria-label":`+${j}`,onClick:()=>y(j),children:t(p,{type:"add"})}):null})}export{s as default};
+import{jsx as t}from"react/jsx-runtime";import{useState as e,useRef as r,useCallback as n}from"react";import o from"./field.js";import i from"./button.js";import{combineClasses as a,toNumber as u,round as l,combineRefs as c,changeInputValue as m}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";const f=d("number-field",{".field .button__start":{marginLeft:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".field .button__end":{marginRight:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".input":{MozAppearance:"textfield"},".input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0}});function s({cc:d={},precision:s=3,controls:b=!0,defaultValue:g,...v}){const h=a(f,d),[_,k]=void 0!==v.value?[v.value]:e(g||""),x=r(null),j=u(v.step,1),A=u(v.min,-Number.MAX_VALUE),C=u(v.max,Number.MAX_VALUE),M=n(((t,e)=>{let r=t?parseFloat(t.toString()):void 0;return void 0!==e&&(r=(r||0)+e),void 0!==r&&(r=Math.max(r,A),r=Math.min(r,C)),void 0===r?"":l(r,s).toString()}),[s,A,C]);function y(t){x.current&&m(x.current,M(_,t))}const z={compact:!0,size:v.size,disabled:v.disabled,round:v.round};return t(o,{...v,inputRef:c(x,v.inputRef),type:"number",value:_,onChange:t=>{k?.(t.target.value),v.onChange?.(t)},onBlur:t=>{t.target.value=M(t.target.value),k?.(t.target.value),v.onChange?.(t),v.onBlur?.(t)},cc:{...d,field:h.field,input:h.input},left:b?t(i,{...z,cc:{button:h.button__start},"aria-label":`-${j}`,onClick:()=>y(-j),children:t(p,{type:"remove"})}):v.left,right:b?t(i,{...z,cc:{button:h.button__end},"aria-label":`+${j}`,onClick:()=>y(j),children:t(p,{type:"add"})}):v.right})}export{s as default};
 //# sourceMappingURL=number-field.js.map

package/dist/components/input/segmented.js

@@ -1,3 +1,3 @@
 "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":{position:"relative",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.uniform":{display:"grid",gridAutoColumns:"1fr",gridAutoFlow:"column"},".segmented.vertical":{flexDirection:"column",gridAutoFlow:"row"},".segmented.round":{borderRadius:"calc(1.6em + 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:v,name:g,value:b,defaultValue:x,onChange:h,error:_,...y}){const k=t(s,d),[C,z]=void 0!==b?[b]:o(x||v[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":!!_,"data-fb":"minimal"!==c?"true":void 0,children:v.map((({label:o,value:a,disabled:t=!1},i)=>e(l,{hover:!1,cc:{...d,container:k.container,halo:k.halo,ring:k.ring},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:g}),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};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as o,useId as a}from"react";import{Morph as i}from"@infinityfx/lively/layout";import{combineClasses as t,classes as n}from"../../core/utils.js";import l from"../feedback/halo.js";import{createStyles as d}from"../../core/style.js";import s from"../display/tooltip.js";const c=d("segmented",{".segmented":{position:"relative",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.uniform":{display:"grid",gridAutoColumns:"1fr",gridAutoFlow:"column"},".segmented.vertical":{flexDirection:"column",gridAutoFlow:"row"},".segmented.round":{borderRadius:"calc(1.6em + 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 m({cc:d={},variant:m="default",size:u="med",round:f=!1,uniform:p,vertical:v,options:g,name:b,value:h,defaultValue:x,onChange:_,error:y,...k}){const C=t(c,d),[z,R]=void 0!==h?[h]:o(x||g[0]?.value),j=a();return e("div",{...k,role:"radiogroup",className:n(C.segmented,C[`s__${u}`],C[`v__${m}`],f&&C.round,p&&C.uniform,v&&C.vertical,k.className),"data-error":!!y,"data-fb":"minimal"!==m?"true":void 0,children:g.map((({label:o,value:a,disabled:t=!1,tooltip:n},c)=>e(s,{content:n,visibility:n?"interact":"never",children:e(l,{hover:!1,disabled:t,cc:{...d,container:C.container,halo:C.halo,ring:C.ring},children:r("button",{className:C.option,type:"button",role:"radio","aria-checked":z===a,disabled:t,onClick:()=>{R?.(a),_?.(a)},children:[e("input",{type:"radio",value:a,checked:z===a,hidden:!0,readOnly:!0,name:b}),e("span",{className:C.content,children:o}),z===a&&e(i,{group:`segmented-selection-${j}`,cachable:v?["y","sy"]:["x","sx"],deform:!1,transition:{duration:.4},children:e("div",{className:C.selection})})]})})},c)))})}export{m as default};
 //# sourceMappingURL=segmented.js.map

package/dist/components/layout/group.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{combineClasses as a,classes as r}from"../../core/utils.js";import{createStyles as i}from"../../core/style.js";const o=i("group",{".group":{display:"flex","--radius":0},".split":{gap:"var(--f-spacing-xxs)","--radius":"var(--f-radius-xsm)"},".d__vertical":{flexDirection:"column"},".d__horizontal > :not(:last-child), .d__horizontal > :not(:last-child) [data-fc]":{borderTopRightRadius:"var(--radius) !important",borderBottomRightRadius:"var(--radius) !important"},".d__horizontal > :not(:first-child), .d__horizontal > :not(:first-child) [data-fc]":{borderTopLeftRadius:"var(--radius) !important",borderBottomLeftRadius:"var(--radius) !important"},".d__vertical > :not(:last-child), .d__vertical > :not(:last-child) [data-fc]":{borderBottomLeftRadius:"var(--radius) !important",borderBottomRightRadius:"var(--radius) !important"},".d__vertical > :not(:first-child), .d__vertical > :not(:first-child) [data-fc]":{borderTopLeftRadius:"var(--radius) !important",borderTopRightRadius:"var(--radius) !important"},".d__horizontal:not(.split) > :where([data-fb], :has([data-fb])) + :where([data-fb], :has([data-fb]))":{marginLeft:"-1px"},".d__vertical:not(.split) > :where([data-fb], :has([data-fb])) + :where([data-fb], :has([data-fb]))":{marginTop:"-1px"},".group > :has(:focus)":{zIndex:1}});function d({children:i,cc:d={},split:s=!1,direction:e="horizontal",...l}){const n=a(o,d);return t("div",{...l,className:r(n.group,s&&n.split,n[`d__${e}`],l.className),children:i})}export{d as default};
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Children as r,Fragment as i}from"react";import{combineClasses as o,classes as d}from"../../core/utils.js";import{createStyles as e}from"../../core/style.js";const s=e("group",{".group":{display:"flex","--radius":0},".split":{gap:"var(--f-spacing-xxs)","--radius":"var(--f-radius-xsm)"},".divider":{position:"relative",alignSelf:"stretch",zIndex:2},".divider::after":{content:'""',position:"absolute",backgroundColor:"var(--f-clr-fg-200)"},".d__horizontal > .divider::after":{width:"1px",right:"-.5px",insetBlock:"var(--f-spacing-xsm)"},".d__vertical > .divider::after":{height:"1px",bottom:"-.5px",insetInline:"var(--f-spacing-xsm)"},".d__vertical":{flexDirection:"column"},".d__horizontal > :not(:last-child), .d__horizontal > :not(:last-child) [data-fc]":{borderTopRightRadius:"var(--radius) !important",borderBottomRightRadius:"var(--radius) !important"},".d__horizontal > :not(:first-child), .d__horizontal > :not(:first-child) [data-fc]":{borderTopLeftRadius:"var(--radius) !important",borderBottomLeftRadius:"var(--radius) !important"},".d__vertical > :not(:last-child), .d__vertical > :not(:last-child) [data-fc]":{borderBottomLeftRadius:"var(--radius) !important",borderBottomRightRadius:"var(--radius) !important"},".d__vertical > :not(:first-child), .d__vertical > :not(:first-child) [data-fc]":{borderTopLeftRadius:"var(--radius) !important",borderTopRightRadius:"var(--radius) !important"},".d__horizontal:not(.split) > :where([data-fb], :has([data-fb])) + :where([data-fb], :has([data-fb]))":{marginLeft:"-1px"},".d__vertical:not(.split) > :where([data-fb], :has([data-fb])) + :where([data-fb], :has([data-fb]))":{marginTop:"-1px"},".group > :has(:focus)":{zIndex:1}});function n({children:e,cc:n={},split:l=!1,direction:c="horizontal",dividers:p,...f}){const h=o(s,n);return t("div",{...f,className:d(h.group,l&&h.split,h[`d__${c}`],f.className),children:r.map(e,((r,o)=>a(i,{children:[p&&!l&&o>0&&t("div",{className:h.divider}),r]},o)))})}export{n as default};
 //# sourceMappingURL=group.js.map

package/dist/components/layout/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","sources":["../../../../src/components/layout/group.tsx"],"sourcesContent":[null],"names":["styles","createStyles","display","gap","flexDirection","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","marginLeft","marginTop","zIndex","Group","children","cc","split","direction","props","style","combineClasses","_jsx","className","classes","group"],"mappings":"6JAIA,MAAMA,EAASC,EAAa,QAAS,CACjC,SAAU,CACNC,QAAS,OACT,WAAqB,GAGzB,SAAU,CACNC,IAAK,uBACL,WAAqB,uBAGzB,eAAgB,CACZC,cAAe,UAGnB,mFAAoF,CAChFC,qBAAsB,2BACtBC,wBAAyB,4BAG7B,qFAAsF,CAClFC,oBAAqB,2BACrBC,uBAAwB,4BAG5B,+EAAgF,CAC5EA,uBAAwB,2BACxBF,wBAAyB,4BAG7B,iFAAkF,CAC9EC,oBAAqB,2BACrBF,qBAAsB,4BAG1B,uGAAwG,CACpGI,WAAY,QAGhB,qGAAsG,CAClGC,UAAW,QAGf,wBAAyB,CACrBC,OAAQ,KAWF,SAAUC,GAAMC,SAAEA,EAAQC,GAAEA,EAAK,GAAEC,MAAEA,GAAQ,EAAKC,UAAEA,EAAY,gBAAiBC,IAc3F,MAAMC,EAAQC,EAAenB,EAAQc,GAErC,OAAOM,EAAA,MAAA,IACCH,EACJI,UAAWC,EACPJ,EAAMK,MACNR,GAASG,EAAMH,MACfG,EAAM,MAAMF,KACZC,EAAMI,WACTR,SACAA,GAET"}
+{"version":3,"file":"group.js","sources":["../../../../src/components/layout/group.tsx"],"sourcesContent":[null],"names":["styles","createStyles","display","gap","position","alignSelf","zIndex","content","backgroundColor","width","right","insetBlock","height","bottom","insetInline","flexDirection","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","marginLeft","marginTop","Group","children","cc","split","direction","dividers","props","style","combineClasses","_jsx","className","classes","group","Children","map","child","i","_jsxs","Fragment","divider"],"mappings":"sNAKA,MAAMA,EAASC,EAAa,QAAS,CACjC,SAAU,CACNC,QAAS,OACT,WAAqB,GAGzB,SAAU,CACNC,IAAK,uBACL,WAAqB,uBAGzB,WAAY,CACRC,SAAU,WACVC,UAAW,UACXC,OAAQ,GAGZ,kBAAmB,CACfC,QAAS,KACTH,SAAU,WACVI,gBAAiB,uBAGrB,mCAAoC,CAChCC,MAAO,MACPC,MAAO,QACPC,WAAY,wBAGhB,iCAAkC,CAC9BC,OAAQ,MACRC,OAAQ,QACRC,YAAa,wBAGjB,eAAgB,CACZC,cAAe,UAGnB,mFAAoF,CAChFC,qBAAsB,2BACtBC,wBAAyB,4BAG7B,qFAAsF,CAClFC,oBAAqB,2BACrBC,uBAAwB,4BAG5B,+EAAgF,CAC5EA,uBAAwB,2BACxBF,wBAAyB,4BAG7B,iFAAkF,CAC9EC,oBAAqB,2BACrBF,qBAAsB,4BAG1B,uGAAwG,CACpGI,WAAY,QAGhB,qGAAsG,CAClGC,UAAW,QAGf,wBAAyB,CACrBf,OAAQ,KAWF,SAAUgB,GAAMC,SAAEA,EAAQC,GAAEA,EAAK,CAAA,EAAEC,MAAEA,GAAQ,EAAKC,UAAEA,EAAY,aAAYC,SAAEA,KAAaC,IAoBrG,MAAMC,EAAQC,EAAe9B,EAAQwB,GAErC,OAAOO,EAAA,MAAA,IACCH,EACJI,UAAWC,EACPJ,EAAMK,MACNT,GAASI,EAAMJ,MACfI,EAAM,MAAMH,KACZE,EAAMI,WACTT,SACAY,EAASC,IAAIb,GAAU,CAACc,EAAOC,IAAMC,EAACC,EAAQ,CAAAjB,SAAA,CAC1CI,IAAaF,GAASa,EAAI,GAAKP,EAAA,MAAA,CAAKC,UAAWH,EAAMY,UACrDJ,IAFgDC,MAK7D"}

package/dist/types/src/components/input/segmented.d.ts

@@ -20,6 +20,7 @@ type SegmentedProps<T> = {
         label: React.ReactNode;
         value: FluidInputvalue;
         disabled?: boolean;
+        tooltip?: string;
     }[];
     name?: string;
     value?: T;

package/dist/types/src/components/layout/group.d.ts

@@ -1,11 +1,11 @@
 import { Selectors } from '../../../src/types';
-export type GroupSelectors = Selectors<'group' | 'split' | 'd__horizontal' | 'd__vertical'>;
+export type GroupSelectors = Selectors<'group' | 'split' | 'divider' | 'd__horizontal' | 'd__vertical'>;
 /**
  * Merges multiple toggle, button or field inputs.
  *
  * @see {@link https://fluid.infinityfx.dev/docs/components/group}
  */
-export default function Group({ children, cc, split, direction, ...props }: {
+export default function Group({ children, cc, split, direction, dividers, ...props }: {
     ref?: React.Ref<HTMLDivElement>;
     cc?: GroupSelectors;
     /**
@@ -18,4 +18,10 @@ export default function Group({ children, cc, split, direction, ...props }: {
      * @default "horizontal"
      */
     direction?: 'horizontal' | 'vertical';
+    /**
+     * Show dividers between elements.
+     *
+     * @default false
+     */
+    dividers?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/package.json

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