react-segmented-choice 1.0.10 → 1.0.11

package/lib/index.umd.js

@@ -1,3 +1,3 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactSegmentedChoice={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);function l(...e){return e.filter(Boolean).join(` `)}function u({description:e,descriptionId:n,label:r,slots:i}){return t.default.createElement(t.default.Fragment,null,t.default.createElement(`span`,{...i.optionLabel.props,className:l(`rsc-option-label`,i.optionLabel.className)},r),e?t.default.createElement(`span`,{...i.optionDescription.props,className:l(`rsc-option-description`,i.optionDescription.className),id:n},e):null)}function d({descriptionBaseId:e,handlers:n,index:r,option:i,refs:a,slots:o,state:s}){let c=i.value===s.currentValue,d=s.disabled||!!i.disabled,f=i.description?`${e}-${r}`:void 0;return s.shouldRenderAnchor||(a.anchorRefs.current[r]=null),t.default.createElement(`label`,{...o.option.props,ref:e=>{a.optionRefs.current[r]=e},className:l(`rsc-option`,o.option.className),onPointerEnter:o.option.props.onPointerEnter,onPointerLeave:o.option.props.onPointerLeave,"data-disabled":d?`true`:`false`,"data-focus-visible":s.focusVisibleIndex===r?`true`:`false`,"data-has-description":i.description?`true`:`false`,"data-previewed":s.dragging&&s.previewIndex===r?`true`:`false`,"data-selected":c?`true`:`false`},t.default.createElement(`input`,{ref:e=>{a.inputRefs.current[r]=e},"aria-describedby":f,"aria-label":i.ariaLabel,checked:c,className:`rsc-option-input`,disabled:d,name:s.resolvedName,onBlur:n.createInputBlurHandler(r),onChange:()=>{n.onCommitIndex(r)},onFocus:n.createInputFocusHandler(r),onKeyDown:n.createInputKeyDownHandler(r),required:s.required,type:`radio`,value:i.value}),t.default.createElement(`span`,{...o.optionContent.props,className:l(`rsc-option-content`,o.optionContent.className),ref:e=>{a.optionContentRefs.current[r]=e}},s.shouldRenderAnchor?t.default.createElement(`span`,{...o.optionAnchor.props,"aria-hidden":`true`,className:l(`rsc-option-anchor`,o.optionAnchor.className),ref:e=>{a.anchorRefs.current[r]=e}}):null,t.default.createElement(u,{description:i.description,descriptionId:f,label:i.label,slots:o})))}let f=new Set;function p(){return globalThis.process?.env?.NODE_ENV!==`production`}function m(e,t){!p()||f.has(e)||(f.add(e),console.warn(t))}function h(e){m(`too-few-options`,`[react-segmented-choice] SegmentedChoice requires at least 2 options. Received ${e}.`)}function g(e){m(`duplicate-values:${e.join(`|`)}`,`[react-segmented-choice] SegmentedChoice option values must be unique. Duplicate values: ${e.join(`, `)}.`)}function _(e){m(`non-string-option-values:${e.join(`|`)}`,`[react-segmented-choice] SegmentedChoice option values must be strings. Invalid values at indexes: ${e.join(`, `)}.`)}function v(e){m(`invalid-controlled:${e}`,`[react-segmented-choice] The controlled value "${e}" does not match an enabled option. No option will be selected until the parent supplies a valid value.`)}function ee(e){m(`invalid-default:${e}`,`[react-segmented-choice] The defaultValue "${e}" does not match an enabled option. Falling back to the first enabled option.`)}function y(e){m(`missing-aria-label:${e}`,`[react-segmented-choice] Option "${e}" appears to use non-text visible content without ariaLabel. Provide ariaLabel for icon-only or thumbnail-only options.`)}function te(){m(`missing-group-label`,`[react-segmented-choice] SegmentedChoice requires either ariaLabel or ariaLabelledby for the radiogroup.`)}function b(e){m(`controlled-mode-switch:${e}`,`[react-segmented-choice] SegmentedChoice changed to ${e} mode after mount. Avoid switching between controlled and uncontrolled usage.`)}function ne(e){m(`invalid-accent-color:${e}`,`[react-segmented-choice] SegmentedChoice received an unsupported accentColor "${e}". Supported formats are hex, named colors, rgb(a), hsl(a) and var(--token). Ignoring accentColor.`)}function x({value:e,defaultValue:n,fallbackValue:r,isValueSelectable:i,onValueChange:a}){let o=e!==void 0,s=(0,t.useRef)(o),[c,l]=(0,t.useState)(()=>i(n)?n:r);(0,t.useEffect)(()=>{s.current!==o&&(b(o?`controlled`:`uncontrolled`),s.current=o)},[o]),(0,t.useEffect)(()=>{o||i(c)||r!==void 0&&l(r)},[r,o,i,c]);let u=o?e:c,d=(0,t.useCallback)(()=>{o||l(i(n)?n:r)},[n,r,o,i]),f=(0,t.useCallback)(e=>{!i(e)||u===e||(o||l(e),a?.(e))},[u,o,i,a]);return{currentValue:i(u)?u:void 0,commitValue:f,isControlled:o,resetValue:d}}function S(e,t){return Math.abs(e-t)}function C(e,t,n){return Math.min(Math.max(e,t),n)}function re(e,t){return e===`horizontal`?t.clientX:t.clientY}function w(e,t){let n=e===`horizontal`?t.left:t.top,r=e===`horizontal`?t.right:t.bottom;return{index:-1,start:n,end:r,center:n+(r-n)/2,size:r-n}}function T({containerRect:e,height:t,left:n,scrollLeft:r,scrollTop:i,top:a,width:o}){return{height:t,width:o,x:n-e.left+r,y:a-e.top+i}}function E({anchorRect:e,containerRect:t,height:n,scrollLeft:r,scrollTop:i,width:a}){return{height:n,width:a,x:e.left-t.left+r+e.width/2-a/2,y:e.top-t.top+i+e.height/2-n/2}}function ie(e,t){if(t.length===0)return-1;let n=t[0],r=S(e,n.center);for(let i of t.slice(1)){let t=S(e,i.center);t<r&&(n=i,r=t)}return n.index}function D(e,t,{currentIndex:n=-1,lastDirection:r=0,tieThreshold:i=.5}={}){if(t.length===0)return-1;let a=1/0,o=[];for(let n of t){let t=S(e,n.center);if(t<a-i){a=t,o=[n];continue}S(t,a)<=i&&o.push(n)}if(o.length===1)return o[0]?.index??-1;if(r>0)return o.reduce((e,t)=>t.center>e.center?t:e).index;if(r<0)return o.reduce((e,t)=>t.center<e.center?t:e).index;let s=o.find(e=>e.index===n);return s?s.index:o[0]?.index??-1}function O({layout:e,listRect:t,orientation:n,scrollLeft:r,scrollTop:i}){return n===`horizontal`?t.left-r+e.x+e.width/2:t.top-i+e.y+e.height/2}function k({coordinate:e,currentIndex:t,enabledBounds:n,initialCoordinate:r,initialLayout:i,lastDirection:a,listRect:o,measurePreviewLayout:s,orientation:c,scrollLeft:l,scrollTop:u}){let d=e-r,f=c===`horizontal`?i.width:i.height,p=(c===`horizontal`?i.x:i.y)+f/2+d,m=Math.max(c===`horizontal`?o.width-i.width:o.height-i.height,0),h=C(p-f/2,0,m),g={...i,x:c===`horizontal`?h:i.x,y:c===`vertical`?h:i.y},_=D(O({layout:g,listRect:o,orientation:c,scrollLeft:l,scrollTop:u}),n,{currentIndex:t,lastDirection:a});if(s&&_>=0){let e=s(_);if(e){let t=c===`horizontal`?e.width:e.height,n=Math.max(c===`horizontal`?o.width-e.width:o.height-e.height,0),r=C(p-t/2,0,n);g={...e,x:c===`horizontal`?r:e.x,y:c===`vertical`?r:e.y}}}return{layout:g,resolvedIndex:D(O({layout:g,listRect:o,orientation:c,scrollLeft:l,scrollTop:u}),n,{currentIndex:t,lastDirection:a})}}function A({index:e,measureRefs:t,optionRefs:n}){let r=t.current[e];if(r){let e=r.getBoundingClientRect();if(e.width>0&&e.height>0)return e}let i=n.current[e];return i?i.getBoundingClientRect():null}function j({measure:e,observeElements:n}){(0,t.useLayoutEffect)(()=>{e()},[e]),(0,t.useLayoutEffect)(()=>{if(typeof window>`u`)return;let t=0,r=()=>{t!==0&&window.cancelAnimationFrame(t),t=window.requestAnimationFrame(()=>{t=0,e()})};if(r(),typeof ResizeObserver<`u`){let e=new ResizeObserver(()=>{r()});for(let t of n())t&&e.observe(t);return()=>{e.disconnect(),t!==0&&window.cancelAnimationFrame(t)}}return window.addEventListener(`resize`,r),()=>{window.removeEventListener(`resize`,r),t!==0&&window.cancelAnimationFrame(t)}},[e,n])}function ae({activeIndex:e,centerToOption:t,indicatorRef:n,inset:r,listRef:i,measureRefs:a,optionRefs:o,sizeAdjustment:s,useRenderedIndicatorSize:c}){let l=i.current;if(!l)return null;let u=A({index:e,measureRefs:a,optionRefs:o});if(!u)return null;let d=l.getBoundingClientRect(),f=n?.current,p=f?.offsetWidth??0,m=f?.offsetHeight??0,h=t&&c&&p>0?p:Math.max(u.width+s,0),g=t&&c&&m>0?m:Math.max(u.height+s,0);return t?E({anchorRect:u,containerRect:d,height:g,scrollLeft:l.scrollLeft,scrollTop:l.scrollTop,width:h}):T({containerRect:d,height:Math.max(u.height-r*2,0),left:u.left+r,scrollLeft:l.scrollLeft,scrollTop:l.scrollTop,top:u.top+r,width:Math.max(u.width-r*2,0)})}function M(){return{height:0,isVisible:!1,width:0,x:0,y:0}}function oe({activeIndex:e,centerToOption:n,indicatorRef:r,inset:i,listRef:a,measureRefs:o,optionCount:s,optionRefs:c,overrideLayout:l,sizeAdjustment:u,useRenderedIndicatorSize:d}){let[f,p]=(0,t.useState)(M);return j({measure:(0,t.useCallback)(()=>{let t=ae({activeIndex:e,centerToOption:n,indicatorRef:r,inset:i,listRef:a,measureRefs:o,optionRefs:c,sizeAdjustment:u,useRenderedIndicatorSize:d});if(!t){p(e=>e.isVisible?M():e);return}p({...t,isVisible:!0})},[e,n,r,i,a,o,s,c,u,d]),observeElements:(0,t.useCallback)(()=>[a.current,...c.current.slice(0,s),...o.current.slice(0,s)],[a,o,s,c])}),l?{...l,isVisible:!0}:f}function N({layout:e,listElement:t,orientation:n}){let r=t.getBoundingClientRect();return n===`horizontal`?r.left-t.scrollLeft+e.x+e.width/2:r.top-t.scrollTop+e.y+e.height/2}function se({centerToOption:e,disabled:n,draggable:r,indicatorRef:i,inset:a,listRef:o,measureRefs:s,onCommitIndex:c,optionRefs:l,options:u,orientation:d,selectionMode:f,selectedIndex:p,sizeAdjustment:m,useRenderedIndicatorSize:h}){let[g,_]=(0,t.useState)(null),[v,ee]=(0,t.useState)(!1),[y,te]=(0,t.useState)(!1),[b,ne]=(0,t.useState)(!1),[x,S]=(0,t.useState)(null),C=(0,t.useRef)(null),T=(0,t.useRef)(null),E=(0,t.useRef)(null),D=(0,t.useRef)(!1),O=(0,t.useRef)(-1),j=(0,t.useRef)(null),M=(0,t.useRef)(null),oe=(0,t.useRef)(0),se=(0,t.useRef)(null),ce=(0,t.useMemo)(()=>u.map(e=>`${e.value}:${e.disabled?`1`:`0`}`).join(`|`),[u]),P=(0,t.useCallback)(()=>{E.current!==null&&(window.clearTimeout(E.current),E.current=null)},[]),F=(0,t.useCallback)(()=>{P(),ne(!0),E.current=window.setTimeout(()=>{E.current=null,ne(!1)},320)},[P]),le=(0,t.useCallback)(()=>{let e=[];for(let[t,n]of u.entries()){if(n.disabled)continue;let r=A({index:t,measureRefs:s,optionRefs:l});r&&e.push({...w(d,r),index:t})}return e},[s,l,u,d]),I=(0,t.useCallback)(t=>{let n=o.current,r=se.current,c=j.current;return!n||!r||c===null?null:k({coordinate:t,currentIndex:O.current,enabledBounds:le(),initialCoordinate:c,initialLayout:r,lastDirection:oe.current,listRect:n.getBoundingClientRect(),measurePreviewLayout:h?void 0:t=>ae({activeIndex:t,centerToOption:e,indicatorRef:i,inset:a,listRef:o,measureRefs:s,optionRefs:l,sizeAdjustment:m,useRenderedIndicatorSize:h}),orientation:d,scrollLeft:n.scrollLeft,scrollTop:n.scrollTop})},[e,le,i,a,o,s,l,u.length,d,m,h]),ue=(0,t.useCallback)(({preserveLayout:e=!1}={})=>{C.current=null,j.current=null,O.current=-1,se.current=null,M.current=null,oe.current=0,T.current=null,ee(!1),D.current=!1,te(!1),e||S(null),_(null)},[]),L=(0,t.useCallback)(e=>{if(e===null)return;let t=T.current??o.current;if(!(!t||typeof t.releasePointerCapture!=`function`))try{t.releasePointerCapture(e)}catch{}},[o]),R=(0,t.useCallback)(()=>{C.current!==null&&(L(C.current),ue())},[L,ue]),z=(0,t.useCallback)(t=>{if(n||!r||t.button!==0)return;let c=t.target,g=c?.closest(`.rsc-option`),v=c?.closest(`.rsc-indicator`),y=!g&&!v,b=re(d,t.nativeEvent),x=g?l.current.findIndex(e=>e===g):f===`overlay`&&v?p:ie(b,le());if(Number.isNaN(x)||x<0||u[x]?.disabled||f===`overlay`&&g&&!v&&x!==(p>=0?p:x))return;let w=(f===`overlay`||y)&&p>=0?p:x,E=ae({activeIndex:w,centerToOption:e,indicatorRef:i,inset:a,listRef:o,measureRefs:s,optionRefs:l,sizeAdjustment:m,useRenderedIndicatorSize:h});if(!E)return;P(),ne(!1),t.preventDefault();try{t.currentTarget.setPointerCapture(t.pointerId)}catch{}C.current=t.pointerId,T.current=t.currentTarget,O.current=w,j.current=y?N({layout:E,listElement:t.currentTarget,orientation:d}):b,M.current=j.current,se.current=E;let k=y?I(b):null,A=k!==null;S(k?.layout??se.current),ee(!0),D.current=A,te(A),_(k?.resolvedIndex!==void 0&&k.resolvedIndex>=0?k.resolvedIndex:x)},[e,P,n,r,le,I,i,a,o,s,l,u,d,p,f,m,h]),B=(0,t.useCallback)(e=>{if(C.current!==e.pointerId)return;e.cancelable&&e.preventDefault();let t=re(d,e.nativeEvent),n=M.current;if(n!==null){let e=t-n;Math.abs(e)>=2&&(oe.current=e>0?1:-1)}M.current=t;let r=I(t);r&&(D.current=!0,te(!0),S(r.layout),r.resolvedIndex>=0&&_(r.resolvedIndex))},[I,d]),de=(0,t.useCallback)(e=>{if(C.current!==e.pointerId)return;let t=I(re(d,e.nativeEvent)),n=D.current;t?.resolvedIndex!==void 0&&t.resolvedIndex>=0&&(S(t.layout),c(t.resolvedIndex)),L(C.current),ue({preserveLayout:t!==null}),n&&F()},[I,c,d,L,ue,F]),fe=(0,t.useCallback)(e=>{if(C.current!==e.pointerId)return;let t=D.current;R(),t&&F()},[R,F]);return(0,t.useEffect)(()=>()=>{P(),R()},[R,P]),(0,t.useEffect)(()=>{if(v||x===null)return;let e=window.requestAnimationFrame(()=>{S(null)});return()=>{window.cancelAnimationFrame(e)}},[x,v]),(0,t.useEffect)(()=>{let e=()=>{R()},t=()=>{document.visibilityState===`hidden`&&R()};return window.addEventListener(`blur`,e),document.addEventListener(`visibilitychange`,t),()=>{window.removeEventListener(`blur`,e),document.removeEventListener(`visibilitychange`,t)}},[R]),(0,t.useEffect)(()=>{R()},[R,e,n,r,a,ce,d,f,m,h]),{dragLayout:x,dragReleased:b,dragPreviewing:y,dragging:v,previewIndex:g,handlePointerCancel:fe,handlePointerDown:z,handlePointerMove:B,handlePointerUp:de}}function ce(e){return{blockSize:0,inlineSize:0,measurementKey:e,visible:!1}}function P(e){let t=e.getBoundingClientRect();return{blockSize:Math.max(e.scrollHeight,t.height),inlineSize:Math.max(e.scrollWidth,t.width)}}function F({optionContentRefs:e,optionCount:t,optionSizing:n}){if(n!==`equal`)return null;let r=e.current.slice(0,t).flatMap(e=>{if(!e)return[];let t=P(e);return t.inlineSize<=0&&t.blockSize<=0?[]:[t]});return r.length===0?null:{blockSize:Math.max(...r.map(e=>e.blockSize)),inlineSize:Math.max(...r.map(e=>e.inlineSize))}}function le({measurementKey:e,optionSizing:n,optionContentRefs:r,optionCount:i}){let[a,o]=(0,t.useState)(()=>ce(e)),s=a.measurementKey===e,c=s?a:ce(e);return(0,t.useEffect)(()=>{s||o(ce(e))},[s,e]),j({measure:(0,t.useCallback)(()=>{if(!s)return;let t=F({optionSizing:n,optionContentRefs:r,optionCount:i});if(!t){o(t=>t.visible||t.measurementKey!==e?ce(e):t);return}o({...t,measurementKey:e,visible:!0})},[s,e,n,r,i]),observeElements:(0,t.useCallback)(()=>r.current.slice(0,i),[r,i])}),c}function I(e,t){return!e[t]?.disabled}function ue(e){return e.findIndex(e=>!e.disabled)}function L(e){for(let t=e.length-1;t>=0;--t)if(!e[t]?.disabled)return t;return-1}function R({options:e,startIndex:t,loop:n}){for(let n=t+1;n<e.length;n+=1)if(I(e,n))return n;if(!n)return-1;for(let n=0;n<t;n+=1)if(I(e,n))return n;return-1}function z({options:e,startIndex:t,loop:n}){for(let n=t-1;n>=0;--n)if(I(e,n))return n;if(!n)return-1;for(let n=e.length-1;n>t;--n)if(I(e,n))return n;return-1}function B(){let e=(0,t.useRef)(!1),n=(0,t.useRef)(!1);return(0,t.useEffect)(()=>{if(typeof window>`u`)return;let t=()=>{e.current=!0,n.current=!1},r=()=>{e.current=!1,n.current=!0};return window.addEventListener(`keydown`,t,!0),window.addEventListener(`pointerdown`,r,!0),()=>{window.removeEventListener(`keydown`,t,!0),window.removeEventListener(`pointerdown`,r,!0)}},[]),{keyboardModalityRef:e,suppressFocusVisibleRef:n,markKeyboardInteraction:(0,t.useCallback)(()=>{e.current=!0,n.current=!1},[]),markPointerInteraction:(0,t.useCallback)(()=>{e.current=!1,n.current=!0},[])}}function de({commitValue:e,committedIndex:n,isControlled:r,loop:i,optionRefs:a,options:o,orientation:s,resetValue:c}){let l=(0,t.useRef)(null),u=(0,t.useRef)([]),{keyboardModalityRef:d,markKeyboardInteraction:f,markPointerInteraction:p,suppressFocusVisibleRef:m}=B(),[h,g]=(0,t.useState)(null),[_,v]=(0,t.useState)(null),ee=(0,t.useCallback)(e=>{if(e<0)return;let t=u.current[e];!t||t.disabled||t.focus()},[]),y=(0,t.useCallback)((t,{focus:n=!1}={})=>{let r=o[t]?.value;r!==void 0&&(g(t),n&&v(t),e(r),n&&u.current[t]?.focus())},[e,o]),te=(0,t.useCallback)(e=>{p(),v(null);let t=e.target,r=t?.closest(`.rsc-option`),i=t?.closest(`.rsc-indicator`),o=r?a.current.findIndex(e=>e===r):i?n:-1;Number.isNaN(o)||ee(o)},[n,ee,p,a]),b=(0,t.useCallback)(e=>t=>{let n=t.relatedTarget;n instanceof HTMLElement&&l.current?.contains(n)||(g(t=>t===e?null:t),v(t=>t===e?null:t))},[]),ne=(0,t.useCallback)(e=>t=>{let n=!m.current&&d.current||typeof t.currentTarget.matches==`function`&&!m.current&&t.currentTarget.matches(`:focus-visible`);m.current=!1,g(t=>t===e?t:e),v(t=>n?t===e?t:e:t===e?null:t)},[d,m]),x=(0,t.useCallback)(e=>t=>{f();let n=-1;if(t.key===`Home`)n=ue(o);else if(t.key===`End`)n=L(o);else if(s===`horizontal`&&t.key===`ArrowRight`)n=R({options:o,startIndex:e,loop:i});else if(s===`horizontal`&&t.key===`ArrowLeft`)n=z({options:o,startIndex:e,loop:i});else if(s===`vertical`&&t.key===`ArrowDown`)n=R({options:o,startIndex:e,loop:i});else if(s===`vertical`&&t.key===`ArrowUp`)n=z({options:o,startIndex:e,loop:i});else return;if(n<0){t.preventDefault();return}t.preventDefault(),y(n,{focus:!0})},[y,i,f,o,s]);return(0,t.useEffect)(()=>{if(r)return;let e=u.current.find(Boolean)?.form;if(!e)return;let t=()=>{queueMicrotask(()=>{c(),g(null),v(null)})};return e.addEventListener(`reset`,t),()=>{e.removeEventListener(`reset`,t)}},[r,c]),{commitIndex:y,createInputBlurHandler:b,createInputFocusHandler:ne,createInputKeyDownHandler:x,focusVisibleIndex:_,focusedIndex:h,handleListPointerDown:te,inputRefs:u,rootRef:l}}function fe(){return{visible:!1}}function V({listRef:e,measureRefs:t,optionRefs:n,options:r,orientation:i}){let a=e.current;if(!a||r.length===0)return null;let o=r.length-1,s=A({index:0,measureRefs:t,optionRefs:n}),c=A({index:o,measureRefs:t,optionRefs:n});if(!s||!c)return null;let l=a.getBoundingClientRect();if(i===`horizontal`){let e=s.left-l.left+a.scrollLeft+s.width/2,t=c.left-l.left+a.scrollLeft+c.width/2,n=s.top-l.top+a.scrollTop+s.height/2;return{height:0,visible:!0,width:Math.max(t-e,0),x:e,y:n}}let u=s.top-l.top+a.scrollTop+s.height/2,d=c.top-l.top+a.scrollTop+c.height/2,f=s.left-l.left+a.scrollLeft+s.width/2;return{height:Math.max(d-u,0),visible:!0,width:0,x:f,y:u}}function pe({listRef:e,measureRefs:n,optionCount:r,optionRefs:i,options:a,orientation:o,trackLayout:s}){let[c,l]=(0,t.useState)(fe);return j({measure:(0,t.useCallback)(()=>{if(s!==`center-span`){l(e=>e.visible?fe():e);return}let t=V({listRef:e,measureRefs:n,optionRefs:i,options:a,orientation:o});if(!t){l(e=>e.visible?fe():e);return}l(t)},[e,n,i,a,o,s]),observeElements:(0,t.useCallback)(()=>[e.current,...i.current.slice(0,r),...n.current.slice(0,r)],[e,n,r,i])}),c}let me=new WeakMap,he=`__rsc-no-nonce__`,ge=/^#[0-9a-fA-F]{3,8}$/,_e=/^[a-zA-Z]+$/,ve=/^rgba?\(\s*[-+0-9.%\s,/]+\)$/,ye=/^hsla?\(\s*[-+0-9.%\s,/]*(?:deg|grad|rad|turn)?[-+0-9.%\s,/]*\)$/,be=/^var\(\s*--[a-zA-Z0-9_-]+\s*\)$/;function H(e){if(e!==void 0)return typeof e==`number`?`${e}px`:e}function xe(e){return`rsc-${e.replace(/[^a-zA-Z0-9_-]/g,`_`)}`}function Se(e){let t=e?.trim();if(t&&(ge.test(t)||_e.test(t)||ve.test(t)||ye.test(t)||be.test(t)))return t}function U({declarations:e,instanceId:t}){let n=e.filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${t};`).join(`
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactSegmentedChoice={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t,1);function l(...e){return e.filter(Boolean).join(` `)}function u({description:e,descriptionId:n,label:r,slots:i}){return t.default.createElement(t.default.Fragment,null,t.default.createElement(`span`,{...i.optionLabel.props,className:l(`rsc-option-label`,i.optionLabel.className)},r),e?t.default.createElement(`span`,{...i.optionDescription.props,className:l(`rsc-option-description`,i.optionDescription.className),id:n},e):null)}function d({descriptionBaseId:e,handlers:n,index:r,option:i,refs:a,slots:o,state:s}){let c=i.value===s.currentValue,d=s.disabled||!!i.disabled,f=i.description?`${e}-${r}`:void 0;return s.shouldRenderAnchor||(a.anchorRefs.current[r]=null),t.default.createElement(`label`,{...o.option.props,ref:e=>{a.optionRefs.current[r]=e},className:l(`rsc-option`,o.option.className),onPointerEnter:o.option.props.onPointerEnter,onPointerLeave:o.option.props.onPointerLeave,"data-disabled":d?`true`:`false`,"data-focus-visible":s.focusVisibleIndex===r?`true`:`false`,"data-has-description":i.description?`true`:`false`,"data-previewed":s.dragging&&s.previewIndex===r?`true`:`false`,"data-selected":c?`true`:`false`},t.default.createElement(`input`,{ref:e=>{a.inputRefs.current[r]=e},"aria-describedby":f,"aria-label":i.ariaLabel,checked:c,className:`rsc-option-input`,disabled:d,name:s.resolvedName,onBlur:n.createInputBlurHandler(r),onChange:()=>{n.onCommitIndex(r)},onFocus:n.createInputFocusHandler(r),onKeyDown:n.createInputKeyDownHandler(r),required:s.required,type:`radio`,value:i.value}),t.default.createElement(`span`,{...o.optionContent.props,className:l(`rsc-option-content`,o.optionContent.className),ref:e=>{a.optionContentRefs.current[r]=e}},s.shouldRenderAnchor?t.default.createElement(`span`,{...o.optionAnchor.props,"aria-hidden":`true`,className:l(`rsc-option-anchor`,o.optionAnchor.className),ref:e=>{a.anchorRefs.current[r]=e}}):null,t.default.createElement(u,{description:i.description,descriptionId:f,label:i.label,slots:o})))}let f=new Set;function p(){return globalThis.process?.env?.NODE_ENV!==`production`}function m(e,t){!p()||f.has(e)||(f.add(e),console.warn(t))}function h(e){m(`too-few-options`,`[react-segmented-choice] SegmentedChoice requires at least 2 options. Received ${e}.`)}function g(e){m(`duplicate-values:${e.join(`|`)}`,`[react-segmented-choice] SegmentedChoice option values must be unique. Duplicate values: ${e.join(`, `)}.`)}function _(e){m(`non-string-option-values:${e.join(`|`)}`,`[react-segmented-choice] SegmentedChoice option values must be strings. Invalid values at indexes: ${e.join(`, `)}.`)}function v(e){m(`invalid-controlled:${e}`,`[react-segmented-choice] The controlled value "${e}" does not match an enabled option. No option will be selected until the parent supplies a valid value.`)}function ee(e){m(`invalid-default:${e}`,`[react-segmented-choice] The defaultValue "${e}" does not match an enabled option. Falling back to the first enabled option.`)}function y(e){m(`missing-aria-label:${e}`,`[react-segmented-choice] Option "${e}" appears to use non-text visible content without ariaLabel. Provide ariaLabel for icon-only or thumbnail-only options.`)}function te(){m(`missing-group-label`,`[react-segmented-choice] SegmentedChoice requires either ariaLabel or ariaLabelledby for the radiogroup.`)}function b(e){m(`controlled-mode-switch:${e}`,`[react-segmented-choice] SegmentedChoice changed to ${e} mode after mount. Avoid switching between controlled and uncontrolled usage.`)}function ne(e){m(`invalid-accent-color:${e}`,`[react-segmented-choice] SegmentedChoice received an unsupported accentColor "${e}". Supported formats are hex, named colors, rgb(a), hsl(a) and var(--token). Ignoring accentColor.`)}function x({value:e,defaultValue:n,fallbackValue:r,isValueSelectable:i,onValueChange:a}){let o=e!==void 0,s=(0,t.useRef)(o),[c,l]=(0,t.useState)(()=>i(n)?n:r);(0,t.useEffect)(()=>{s.current!==o&&(b(o?`controlled`:`uncontrolled`),s.current=o)},[o]),(0,t.useEffect)(()=>{o||i(c)||r!==void 0&&l(r)},[r,o,i,c]);let u=o?e:c,d=(0,t.useCallback)(()=>{o||l(i(n)?n:r)},[n,r,o,i]),f=(0,t.useCallback)(e=>{!i(e)||u===e||(o||l(e),a?.(e))},[u,o,i,a]);return{currentValue:i(u)?u:void 0,commitValue:f,isControlled:o,resetValue:d}}function S(e,t){return Math.abs(e-t)}function C(e,t,n){return Math.min(Math.max(e,t),n)}function re(e,t){return e===`horizontal`?t.clientX:t.clientY}function w(e,t){let n=e===`horizontal`?t.left:t.top,r=e===`horizontal`?t.right:t.bottom;return{index:-1,start:n,end:r,center:n+(r-n)/2,size:r-n}}function T({containerRect:e,height:t,left:n,scrollLeft:r,scrollTop:i,top:a,width:o}){return{height:t,width:o,x:n-e.left+r,y:a-e.top+i}}function E({anchorRect:e,containerRect:t,height:n,scrollLeft:r,scrollTop:i,width:a}){return{height:n,width:a,x:e.left-t.left+r+e.width/2-a/2,y:e.top-t.top+i+e.height/2-n/2}}function ie(e,t){if(t.length===0)return-1;let n=t[0],r=S(e,n.center);for(let i of t.slice(1)){let t=S(e,i.center);t<r&&(n=i,r=t)}return n.index}function D(e,t,{currentIndex:n=-1,lastDirection:r=0,tieThreshold:i=.5}={}){if(t.length===0)return-1;let a=1/0,o=[];for(let n of t){let t=S(e,n.center);if(t<a-i){a=t,o=[n];continue}S(t,a)<=i&&o.push(n)}if(o.length===1)return o[0]?.index??-1;if(r>0)return o.reduce((e,t)=>t.center>e.center?t:e).index;if(r<0)return o.reduce((e,t)=>t.center<e.center?t:e).index;let s=o.find(e=>e.index===n);return s?s.index:o[0]?.index??-1}function O({layout:e,listRect:t,orientation:n,scrollLeft:r,scrollTop:i}){return n===`horizontal`?t.left-r+e.x+e.width/2:t.top-i+e.y+e.height/2}function k({coordinate:e,currentIndex:t,enabledBounds:n,initialCoordinate:r,initialLayout:i,lastDirection:a,listRect:o,measurePreviewLayout:s,orientation:c,scrollLeft:l,scrollTop:u}){let d=e-r,f=c===`horizontal`?i.width:i.height,p=(c===`horizontal`?i.x:i.y)+f/2+d,m=Math.max(c===`horizontal`?o.width-i.width:o.height-i.height,0),h=C(p-f/2,0,m),g={...i,x:c===`horizontal`?h:i.x,y:c===`vertical`?h:i.y},_=D(O({layout:g,listRect:o,orientation:c,scrollLeft:l,scrollTop:u}),n,{currentIndex:t,lastDirection:a});if(s&&_>=0){let e=s(_);if(e){let t=c===`horizontal`?e.width:e.height,n=Math.max(c===`horizontal`?o.width-e.width:o.height-e.height,0),r=C(p-t/2,0,n);g={...e,x:c===`horizontal`?r:e.x,y:c===`vertical`?r:e.y}}}return{layout:g,resolvedIndex:D(O({layout:g,listRect:o,orientation:c,scrollLeft:l,scrollTop:u}),n,{currentIndex:t,lastDirection:a})}}function A({index:e,measureRefs:t,optionRefs:n}){let r=t.current[e];if(r){let e=r.getBoundingClientRect();if(e.width>0&&e.height>0)return e}let i=n.current[e];return i?i.getBoundingClientRect():null}function j({measure:e,observeElements:n}){(0,t.useLayoutEffect)(()=>{e()},[e]),(0,t.useLayoutEffect)(()=>{if(typeof window>`u`)return;let t=0,r=()=>{t!==0&&window.cancelAnimationFrame(t),t=window.requestAnimationFrame(()=>{t=0,e()})};if(r(),typeof ResizeObserver<`u`){let e=new ResizeObserver(()=>{r()});for(let t of n())t&&e.observe(t);return()=>{e.disconnect(),t!==0&&window.cancelAnimationFrame(t)}}return window.addEventListener(`resize`,r),()=>{window.removeEventListener(`resize`,r),t!==0&&window.cancelAnimationFrame(t)}},[e,n])}function ae({activeIndex:e,centerToOption:t,indicatorRef:n,inset:r,listRef:i,measureRefs:a,optionRefs:o,sizeAdjustment:s,useRenderedIndicatorSize:c}){let l=i.current;if(!l)return null;let u=A({index:e,measureRefs:a,optionRefs:o});if(!u)return null;let d=l.getBoundingClientRect(),f=n?.current,p=f?.offsetWidth??0,m=f?.offsetHeight??0,h=t&&c&&p>0?p:Math.max(u.width+s,0),g=t&&c&&m>0?m:Math.max(u.height+s,0);return t?E({anchorRect:u,containerRect:d,height:g,scrollLeft:l.scrollLeft,scrollTop:l.scrollTop,width:h}):T({containerRect:d,height:Math.max(u.height-r*2,0),left:u.left+r,scrollLeft:l.scrollLeft,scrollTop:l.scrollTop,top:u.top+r,width:Math.max(u.width-r*2,0)})}function M(){return{height:0,isVisible:!1,width:0,x:0,y:0}}function oe({activeIndex:e,centerToOption:n,indicatorRef:r,inset:i,listRef:a,measureRefs:o,optionCount:s,optionRefs:c,overrideLayout:l,sizeAdjustment:u,useRenderedIndicatorSize:d}){let[f,p]=(0,t.useState)(M);return j({measure:(0,t.useCallback)(()=>{let t=ae({activeIndex:e,centerToOption:n,indicatorRef:r,inset:i,listRef:a,measureRefs:o,optionRefs:c,sizeAdjustment:u,useRenderedIndicatorSize:d});if(!t){p(e=>e.isVisible?M():e);return}p({...t,isVisible:!0})},[e,n,r,i,a,o,s,c,u,d]),observeElements:(0,t.useCallback)(()=>[a.current,...c.current.slice(0,s),...o.current.slice(0,s)],[a,o,s,c])}),l?{...l,isVisible:!0}:f}function N({layout:e,listElement:t,orientation:n}){let r=t.getBoundingClientRect();return n===`horizontal`?r.left-t.scrollLeft+e.x+e.width/2:r.top-t.scrollTop+e.y+e.height/2}function se({centerToOption:e,disabled:n,draggable:r,indicatorRef:i,inset:a,listRef:o,measureRefs:s,onCommitIndex:c,optionRefs:l,options:u,orientation:d,selectionMode:f,selectedIndex:p,sizeAdjustment:m,useRenderedIndicatorSize:h}){let[g,_]=(0,t.useState)(null),[v,ee]=(0,t.useState)(!1),[y,te]=(0,t.useState)(!1),[b,ne]=(0,t.useState)(!1),[x,S]=(0,t.useState)(null),C=(0,t.useRef)(null),T=(0,t.useRef)(null),E=(0,t.useRef)(null),D=(0,t.useRef)(!1),O=(0,t.useRef)(-1),j=(0,t.useRef)(null),M=(0,t.useRef)(null),oe=(0,t.useRef)(0),se=(0,t.useRef)(null),ce=(0,t.useMemo)(()=>u.map(e=>`${e.value}:${e.disabled?`1`:`0`}`).join(`|`),[u]),P=(0,t.useCallback)(()=>{E.current!==null&&(window.clearTimeout(E.current),E.current=null)},[]),F=(0,t.useCallback)(()=>{P(),ne(!0),E.current=window.setTimeout(()=>{E.current=null,ne(!1)},320)},[P]),le=(0,t.useCallback)(()=>{let e=[];for(let[t,n]of u.entries()){if(n.disabled)continue;let r=A({index:t,measureRefs:s,optionRefs:l});r&&e.push({...w(d,r),index:t})}return e},[s,l,u,d]),I=(0,t.useCallback)(t=>{let n=o.current,r=se.current,c=j.current;return!n||!r||c===null?null:k({coordinate:t,currentIndex:O.current,enabledBounds:le(),initialCoordinate:c,initialLayout:r,lastDirection:oe.current,listRect:n.getBoundingClientRect(),measurePreviewLayout:h?void 0:t=>ae({activeIndex:t,centerToOption:e,indicatorRef:i,inset:a,listRef:o,measureRefs:s,optionRefs:l,sizeAdjustment:m,useRenderedIndicatorSize:h}),orientation:d,scrollLeft:n.scrollLeft,scrollTop:n.scrollTop})},[e,le,i,a,o,s,l,u.length,d,m,h]),ue=(0,t.useCallback)(({preserveLayout:e=!1}={})=>{C.current=null,j.current=null,O.current=-1,se.current=null,M.current=null,oe.current=0,T.current=null,ee(!1),D.current=!1,te(!1),e||S(null),_(null)},[]),L=(0,t.useCallback)(e=>{if(e===null)return;let t=T.current??o.current;if(!(!t||typeof t.releasePointerCapture!=`function`))try{t.releasePointerCapture(e)}catch{}},[o]),R=(0,t.useCallback)(()=>{C.current!==null&&(L(C.current),ue())},[L,ue]),z=(0,t.useCallback)(t=>{if(n||!r||t.button!==0)return;let c=t.target,g=c?.closest(`.rsc-option`),v=c?.closest(`.rsc-indicator`),y=!g&&!v,b=re(d,t.nativeEvent),x=g?l.current.findIndex(e=>e===g):f===`overlay`&&v?p:ie(b,le());if(Number.isNaN(x)||x<0||u[x]?.disabled||f===`overlay`&&g&&!v&&x!==(p>=0?p:x))return;let w=(f===`overlay`||y)&&p>=0?p:x,E=ae({activeIndex:w,centerToOption:e,indicatorRef:i,inset:a,listRef:o,measureRefs:s,optionRefs:l,sizeAdjustment:m,useRenderedIndicatorSize:h});if(!E)return;P(),ne(!1),t.preventDefault();try{t.currentTarget.setPointerCapture(t.pointerId)}catch{}C.current=t.pointerId,T.current=t.currentTarget,O.current=w,j.current=y?N({layout:E,listElement:t.currentTarget,orientation:d}):b,M.current=j.current,se.current=E;let k=y?I(b):null,A=k!==null;S(k?.layout??se.current),ee(!0),D.current=A,te(A),_(k?.resolvedIndex!==void 0&&k.resolvedIndex>=0?k.resolvedIndex:x)},[e,P,n,r,le,I,i,a,o,s,l,u,d,p,f,m,h]),B=(0,t.useCallback)(e=>{if(C.current!==e.pointerId)return;e.cancelable&&e.preventDefault();let t=re(d,e.nativeEvent),n=M.current;if(n!==null){let e=t-n;Math.abs(e)>=2&&(oe.current=e>0?1:-1)}M.current=t;let r=I(t);r&&(D.current=!0,te(!0),S(r.layout),r.resolvedIndex>=0&&_(r.resolvedIndex))},[I,d]),de=(0,t.useCallback)(e=>{if(C.current!==e.pointerId)return;let t=I(re(d,e.nativeEvent)),n=D.current;t?.resolvedIndex!==void 0&&t.resolvedIndex>=0&&(S(t.layout),c(t.resolvedIndex)),L(C.current),ue({preserveLayout:t!==null}),n&&F()},[I,c,d,L,ue,F]),fe=(0,t.useCallback)(e=>{if(C.current!==e.pointerId)return;let t=D.current;R(),t&&F()},[R,F]);return(0,t.useEffect)(()=>()=>{P(),R()},[R,P]),(0,t.useEffect)(()=>{if(v||x===null)return;let e=window.requestAnimationFrame(()=>{S(null)});return()=>{window.cancelAnimationFrame(e)}},[x,v]),(0,t.useEffect)(()=>{let e=()=>{R()},t=()=>{document.visibilityState===`hidden`&&R()};return window.addEventListener(`blur`,e),document.addEventListener(`visibilitychange`,t),()=>{window.removeEventListener(`blur`,e),document.removeEventListener(`visibilitychange`,t)}},[R]),(0,t.useEffect)(()=>{R()},[R,e,n,r,a,ce,d,f,m,h]),{dragLayout:x,dragReleased:b,dragPreviewing:y,dragging:v,previewIndex:g,handlePointerCancel:fe,handlePointerDown:z,handlePointerMove:B,handlePointerUp:de}}function ce(e){return{blockSize:0,inlineSize:0,measurementKey:e,visible:!1}}function P(e){let t=e.getBoundingClientRect();return{blockSize:Math.max(e.scrollHeight,t.height),inlineSize:Math.max(e.scrollWidth,t.width)}}function F({optionContentRefs:e,optionCount:t,optionSizing:n}){if(n!==`equal`)return null;let r=e.current.slice(0,t).flatMap(e=>{if(!e)return[];let t=P(e);return t.inlineSize<=0&&t.blockSize<=0?[]:[t]});return r.length===0?null:{blockSize:Math.max(...r.map(e=>e.blockSize)),inlineSize:Math.max(...r.map(e=>e.inlineSize))}}function le({measurementKey:e,optionSizing:n,optionContentRefs:r,optionCount:i}){let[a,o]=(0,t.useState)(()=>ce(e)),s=a.measurementKey===e,c=s?a:ce(e);return(0,t.useEffect)(()=>{s||o(ce(e))},[s,e]),j({measure:(0,t.useCallback)(()=>{if(!s)return;let t=F({optionSizing:n,optionContentRefs:r,optionCount:i});if(!t){o(t=>t.visible||t.measurementKey!==e?ce(e):t);return}o({...t,measurementKey:e,visible:!0})},[s,e,n,r,i]),observeElements:(0,t.useCallback)(()=>r.current.slice(0,i),[r,i])}),c}function I(e,t){return!e[t]?.disabled}function ue(e){return e.findIndex(e=>!e.disabled)}function L(e){for(let t=e.length-1;t>=0;--t)if(!e[t]?.disabled)return t;return-1}function R({options:e,startIndex:t,loop:n}){for(let n=t+1;n<e.length;n+=1)if(I(e,n))return n;if(!n)return-1;for(let n=0;n<t;n+=1)if(I(e,n))return n;return-1}function z({options:e,startIndex:t,loop:n}){for(let n=t-1;n>=0;--n)if(I(e,n))return n;if(!n)return-1;for(let n=e.length-1;n>t;--n)if(I(e,n))return n;return-1}function B(){let e=(0,t.useRef)(!1),n=(0,t.useRef)(!1);return(0,t.useEffect)(()=>{if(typeof window>`u`)return;let t=()=>{e.current=!0,n.current=!1},r=()=>{e.current=!1,n.current=!0};return window.addEventListener(`keydown`,t,!0),window.addEventListener(`pointerdown`,r,!0),()=>{window.removeEventListener(`keydown`,t,!0),window.removeEventListener(`pointerdown`,r,!0)}},[]),{keyboardModalityRef:e,suppressFocusVisibleRef:n,markKeyboardInteraction:(0,t.useCallback)(()=>{e.current=!0,n.current=!1},[]),markPointerInteraction:(0,t.useCallback)(()=>{e.current=!1,n.current=!0},[])}}function de({commitValue:e,committedIndex:n,isControlled:r,loop:i,optionRefs:a,options:o,orientation:s,resetValue:c}){let l=(0,t.useRef)(null),u=(0,t.useRef)([]),{keyboardModalityRef:d,markKeyboardInteraction:f,markPointerInteraction:p,suppressFocusVisibleRef:m}=B(),[h,g]=(0,t.useState)(null),[_,v]=(0,t.useState)(null),ee=(0,t.useCallback)(e=>{if(e<0)return;let t=u.current[e];!t||t.disabled||t.focus()},[]),y=(0,t.useCallback)((t,{focus:n=!1}={})=>{let r=o[t]?.value;r!==void 0&&(g(t),n&&v(t),e(r),n&&u.current[t]?.focus())},[e,o]),te=(0,t.useCallback)(e=>{p(),v(null);let t=e.target,r=t?.closest(`.rsc-option`),i=t?.closest(`.rsc-indicator`),o=r?a.current.findIndex(e=>e===r):i?n:-1;Number.isNaN(o)||ee(o)},[n,ee,p,a]),b=(0,t.useCallback)(e=>t=>{let n=t.relatedTarget;n instanceof HTMLElement&&l.current?.contains(n)||(g(t=>t===e?null:t),v(t=>t===e?null:t))},[]),ne=(0,t.useCallback)(e=>t=>{let n=!m.current&&d.current||typeof t.currentTarget.matches==`function`&&!m.current&&t.currentTarget.matches(`:focus-visible`);m.current=!1,g(t=>t===e?t:e),v(t=>n?t===e?t:e:t===e?null:t)},[d,m]),x=(0,t.useCallback)(e=>t=>{f();let n=-1;if(t.key===`Home`)n=ue(o);else if(t.key===`End`)n=L(o);else if(s===`horizontal`&&t.key===`ArrowRight`)n=R({options:o,startIndex:e,loop:i});else if(s===`horizontal`&&t.key===`ArrowLeft`)n=z({options:o,startIndex:e,loop:i});else if(s===`vertical`&&t.key===`ArrowDown`)n=R({options:o,startIndex:e,loop:i});else if(s===`vertical`&&t.key===`ArrowUp`)n=z({options:o,startIndex:e,loop:i});else return;if(n<0){t.preventDefault();return}t.preventDefault(),y(n,{focus:!0})},[y,i,f,o,s]);return(0,t.useEffect)(()=>{if(r)return;let e=u.current.find(Boolean)?.form;if(!e)return;let t=()=>{queueMicrotask(()=>{c(),g(null),v(null)})};return e.addEventListener(`reset`,t),()=>{e.removeEventListener(`reset`,t)}},[r,c]),{commitIndex:y,createInputBlurHandler:b,createInputFocusHandler:ne,createInputKeyDownHandler:x,focusVisibleIndex:_,focusedIndex:h,handleListPointerDown:te,inputRefs:u,rootRef:l}}function fe(){return{visible:!1}}function V({listRef:e,measureRefs:t,optionRefs:n,options:r,orientation:i}){let a=e.current;if(!a||r.length===0)return null;let o=r.length-1,s=A({index:0,measureRefs:t,optionRefs:n}),c=A({index:o,measureRefs:t,optionRefs:n});if(!s||!c)return null;let l=a.getBoundingClientRect();if(i===`horizontal`){let e=s.left-l.left+a.scrollLeft+s.width/2,t=c.left-l.left+a.scrollLeft+c.width/2,n=s.top-l.top+a.scrollTop+s.height/2;return{height:0,visible:!0,width:Math.max(t-e,0),x:e,y:n}}let u=s.top-l.top+a.scrollTop+s.height/2,d=c.top-l.top+a.scrollTop+c.height/2,f=s.left-l.left+a.scrollLeft+s.width/2;return{height:Math.max(d-u,0),visible:!0,width:0,x:f,y:u}}function pe({listRef:e,measureRefs:n,optionCount:r,optionRefs:i,options:a,orientation:o,trackLayout:s}){let[c,l]=(0,t.useState)(fe);return j({measure:(0,t.useCallback)(()=>{if(s!==`center-span`){l(e=>e.visible?fe():e);return}let t=V({listRef:e,measureRefs:n,optionRefs:i,options:a,orientation:o});if(!t){l(e=>e.visible?fe():e);return}l(t)},[e,n,i,a,o,s]),observeElements:(0,t.useCallback)(()=>[e.current,...i.current.slice(0,r),...n.current.slice(0,r)],[e,n,r,i])}),c}let me=new WeakMap,he=`__rsc-no-nonce__`,ge=/^#[0-9a-fA-F]{3,8}$/,_e=/^[a-zA-Z]+$/,ve=/^rgba?\(\s*[-+0-9.%\s,/]+\)$/,ye=/^hsla?\(\s*[-+0-9.%\s,/]*(?:deg|grad|rad|turn)?[-+0-9.%\s,/]*\)$/,be=/^var\(\s*--[a-zA-Z0-9_-]+\s*\)$/;function H(e){if(e!==void 0)return typeof e==`number`?`${e}px`:e}function xe(e){return`rsc-${e.replace(/[^a-zA-Z0-9_-]/g,`_`)}`}function Se(e){let t=e?.trim();if(t&&(ge.test(t)||_e.test(t)||ve.test(t)||ye.test(t)||be.test(t)))return t}function U({declarations:e,instanceId:t}){let n=e.filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${t};`).join(`
 `);return n?`[data-rsc-instance="${t}"] {\n${n}\n}`:``}function W(e){e.styleElement.textContent=Array.from(e.rules.values()).filter(Boolean).join(`
 `)}function G(e,t){let n=e.createElement(`style`);return n.dataset.rscRuntime=`true`,t&&(n.nonce=t),e.head.appendChild(n),n}function Ce(e){let t=me.get(e);if(t)return t;let n=new Map;return me.set(e,n),n}function K(e,t){let n=t??null,r=n??he,i=Ce(e),a=i.get(r);if(a)return a;let o={nonce:n,rules:new Map,styleElement:G(e,n)};return i.set(r,o),o}function we({instanceId:e,ownerDocument:n,ruleText:r,styleNonce:i}){(0,t.useLayoutEffect)(()=>{if(!n)return;let t=i??he,a=K(n,i);return a.rules.set(e,r),W(a),()=>{let r=me.get(n),i=r?.get(t);if(!(!r||!i)){if(i.rules.delete(e),i.rules.size===0){i.styleElement.remove(),r.delete(t),r.size===0&&me.delete(n);return}W(i)}}},[e,n,r,i])}function Te({anchorHeight:e,anchorWidth:t,equalDistributionLayout:n,indicatorBorderWidth:r,indicatorColor:i,indicatorCursor:a,indicatorHeight:o,indicatorLayout:s,indicatorScale:c,indicatorWidth:l,instanceId:u,listCursor:d,listTouchAction:f,optionSize:p,resolvedOptionSizing:m,resolvedTrackLayout:h,trackLayout:g}){let _=H(l===void 0?s.width:l),v=H(o===void 0?s.height:o);return U({instanceId:u,declarations:[[`--_rsc-anchor-width`,H(t)],[`--_rsc-anchor-height`,H(e)],[`--_rsc-option-size`,H(p)],[`--_rsc-indicator-border-width`,H(r)],[`--_rsc-indicator-width`,_],[`--_rsc-indicator-height`,v],[`--_rsc-indicator-opacity`,s.isVisible?`1`:`0`],[`--_rsc-indicator-transform`,`translate3d(${s.x}px, ${s.y}px, 0px) scale(${c})`],[`--_rsc-indicator-cursor`,a],[`--_rsc-indicator-color`,Se(i)],[`--_rsc-list-cursor`,d],[`--_rsc-list-touch-action`,f],[`--_rsc-track-x`,h===`center-span`&&g.visible?`${g.x}px`:void 0],[`--_rsc-track-y`,h===`center-span`&&g.visible?`${g.y}px`:void 0],[`--_rsc-track-width`,h===`center-span`&&g.visible?`${g.width}px`:void 0],[`--_rsc-track-height`,h===`center-span`&&g.visible?`${g.height}px`:void 0],[`--_rsc-equal-option-inline-size`,m===`equal`&&n.visible?`${n.inlineSize}px`:void 0],[`--_rsc-equal-option-block-size`,m===`equal`&&n.visible?`${n.blockSize}px`:void 0]]})}function Ee(e){let t=e?.width??e?.size;return{height:e?.height??e?.size,width:t}}function De(e){let t=Ee(e?.anchor),n=Ee(e?.indicator);return{anchorHeight:t.height,anchorWidth:t.width,dragScale:e?.dragScale,indicatorBorderWidth:e?.indicator?.borderWidth,indicatorContentMode:e?.indicator?.content??`none`,indicatorHeight:n.height,indicatorInset:e?.indicator?.inset,indicatorStyle:e?.indicator?.style??`fill`,indicatorTransition:e?.indicator?.transition??`smooth`,indicatorWidth:n.width,mode:e?.mode??`underlay`,optionSize:e?.optionSize,trackLayout:e?.track?.layout??`container`,trackStyle:e?.track?.style??`surface`}}function Oe(e){return typeof e==`number`?e:e?1.1:1}function q(e){let{className:t,style:n,...r}=e??{};return{className:t,props:r}}function ke(e){return{root:q(e?.root),list:q(e?.list),track:q(e?.track),indicator:q(e?.indicator),indicatorContent:q(e?.indicatorContent),option:q(e?.option),optionAnchor:q(e?.optionAnchor),optionContent:q(e?.optionContent),optionLabel:q(e?.optionLabel),optionDescription:q(e?.optionDescription)}}function Ae(e){return String(e)}function J(e){if(typeof e==`string`)return e.trim().length>0;if(typeof e==`number`)return!0;if(Array.isArray(e))return e.some(J);if(t.default.isValidElement(e)){let t=e.props;return J(t.children)}return!1}function Y(e){return e.find(e=>!e.disabled)?.value}function X(e,t){return e.find(e=>e.value===t)}function je(e,t){if(t===void 0)return!1;let n=X(e,t);return!!(n&&!n.disabled)}function Me(e){return e.filter(e=>!J(e.label)&&!e.ariaLabel).map(e=>e.value)}function Ne(e){let t=new Set,n=new Set,r=[];for(let[i,a]of e.entries()){if(typeof a.value!=`string`){r.push(i);continue}let e=a.value;n.has(e)&&t.add(e),n.add(e)}return e.length<2||t.size>0||r.length>0?{valid:!1,duplicateValues:Array.from(t),invalidValueIndexes:r,optionCount:e.length}:{valid:!0,firstEnabledValue:Y(e)}}function Pe(...e){return(...t)=>{for(let n of e)n?.(...t)}}function Fe(e,t){if(typeof e==`function`){e(t);return}e&&(e.current=t)}function Ie({anchorHeight:e,anchorWidth:t,hasExplicitAnchorSlot:n,indicatorStyle:r,selectionMode:i,trackLayout:a}){return n||t!==void 0||e!==void 0||i===`overlay`||a===`center-span`||r===`ring`}function Le(e,t){return Math.abs(e-t)<.5}function Re(e){return[e.x,e.y,e.width,e.height].join(`|`)}function ze({ariaDescribedby:e,ariaLabel:n,ariaLabelledby:r,className:i,defaultValue:a,disabled:o=!1,draggable:s=!0,loop:c=!0,name:f,onValueChange:p,optionDistribution:m=`space-between`,optionSizing:b=`equal`,options:S,orientation:C=`horizontal`,required:re=!1,size:w=`md`,slotProps:T,styleNonce:E,unstyled:ie=!1,value:D,geometry:O},k){let A=(0,t.useMemo)(()=>Ne(S),[S]);(0,t.useEffect)(()=>{A.valid||(A.optionCount<2&&h(A.optionCount),A.invalidValueIndexes.length>0&&_(A.invalidValueIndexes),A.duplicateValues.length>0&&g(A.duplicateValues))},[A]),(0,t.useEffect)(()=>{!n&&!r&&te()},[n,r]),(0,t.useEffect)(()=>{for(let e of Me(S))y(Ae(e))},[S]),(0,t.useEffect)(()=>{for(let e of S)e.accentColor&&Se(e.accentColor)===void 0&&ne(e.accentColor)},[S]);let j=(0,t.useMemo)(()=>e=>je(S,e),[S]);(0,t.useEffect)(()=>{D!==void 0&&!j(D)&&v(Ae(D))},[j,D]),(0,t.useEffect)(()=>{a!==void 0&&!j(a)&&ee(Ae(a))},[a,j]);let M=(0,t.useId)(),N=(0,t.useMemo)(()=>xe(M),[M]),ce=f??N,P=`${N}-description`,F=(0,t.useMemo)(()=>De(O),[O]),I=(0,t.useMemo)(()=>ke(T),[T]),L=F.mode,R={layout:F.trackLayout,style:F.trackStyle},z={width:F.anchorWidth,height:F.anchorHeight},B={borderWidth:F.indicatorBorderWidth,contentMode:F.indicatorContentMode,height:F.indicatorHeight,inset:F.indicatorInset,style:F.indicatorStyle,transition:F.indicatorTransition,width:F.indicatorWidth},fe=F.optionSize===void 0?b:`fixed`,V={distribution:m,size:F.optionSize,sizing:fe},me=F.dragScale??!1,{currentValue:he,commitValue:ge,isControlled:_e,resetValue:ve}=x({value:D,defaultValue:a,fallbackValue:A.valid?A.firstEnabledValue:void 0,isValueSelectable:j,onValueChange:p}),ye=(0,t.useMemo)(()=>S.findIndex(e=>e.value===he),[he,S]),be=(0,t.useMemo)(()=>ue(S),[S]),H=ye>=0?ye:_e?-1:be,U=(0,t.useRef)(null),W=(0,t.useRef)(null),G=(0,t.useRef)([]),Ce=(0,t.useRef)([]),K=(0,t.useRef)([]),Ee=B.borderWidth??0,q=B.inset??0,J=q*2+(B.style===`ring`?Ee*2:0),Y=B.width!==void 0||B.height!==void 0,X=L===`overlay`||Y,ze=Ie({anchorHeight:z.height,anchorWidth:z.width,hasExplicitAnchorSlot:T?.optionAnchor!==void 0,indicatorStyle:B.style,selectionMode:L,trackLayout:R.layout}),Be=V.size!==void 0&&!Y?Math.max(V.size+(X?J:-q*2),0):void 0,{commitIndex:Ve,createInputBlurHandler:Z,createInputFocusHandler:He,createInputKeyDownHandler:Ue,focusVisibleIndex:We,handleListPointerDown:Ge,inputRefs:Ke,rootRef:qe}=de({commitValue:ge,committedIndex:H,isControlled:_e,loop:c,optionRefs:G,options:S,orientation:C,resetValue:ve}),{dragLayout:Je,dragReleased:Ye,dragPreviewing:Xe,dragging:Ze,previewIndex:Qe,handlePointerCancel:$e,handlePointerDown:et,handlePointerMove:tt,handlePointerUp:nt}=se({centerToOption:X,disabled:o,draggable:s,indicatorRef:W,inset:X?0:q,listRef:U,measureRefs:K,onCommitIndex:Ve,optionRefs:G,options:S,orientation:C,selectionMode:L,selectedIndex:ye,sizeAdjustment:J,useRenderedIndicatorSize:Y}),rt=L===`underlay`?Qe??H:H,Q=oe({activeIndex:rt,centerToOption:X,indicatorRef:W,inset:X?0:q,listRef:U,measureRefs:K,optionCount:S.length,optionRefs:G,overrideLayout:Je,sizeAdjustment:J,useRenderedIndicatorSize:Y}),[it,at]=(0,t.useState)(`initial`),ot=(0,t.useRef)(``),st=(0,t.useRef)(null),ct=pe({listRef:U,measureRefs:K,optionCount:S.length,optionRefs:G,options:S,orientation:C,trackLayout:R.layout}),lt=le({measurementKey:(0,t.useMemo)(()=>[V.sizing,w,C,ie?`unstyled`:`styled`,S.map(e=>`${e.value}:${typeof e.label==`string`?e.label:``}:${e.description?`description`:``}`).join(`|`)].join(`|`),[V.sizing,S,C,w,ie]),optionSizing:V.sizing,optionContentRefs:Ce,optionCount:S.length}),ut=rt>=0?S[rt]:void 0,dt=Ze&&Xe,ft=L===`overlay`&&dt?S[Qe??H]:ut,pt=Oe(me),mt=dt?pt:1,ht=L===`overlay`&&B.contentMode===`clone-active`&&ft!==void 0,gt=o?void 0:dt&&s?`grabbing`:s?`grab`:`pointer`,_t=!o&&s?`none`:void 0,$=Re(Q);ot.current=$,(0,t.useLayoutEffect)(()=>{G.current.length=S.length,Ce.current.length=S.length,K.current.length=S.length,Ke.current.length=S.length},[Ke,S.length]),(0,t.useEffect)(()=>{let e=Q.isVisible&&Q.width>0&&Q.height>0,t=Be===void 0||Le(Q.width,Be)&&Le(Q.height,Be);if(it===`settled`){let e=0;return e=window.requestAnimationFrame(()=>{at(`ready`)}),()=>{window.cancelAnimationFrame(e)}}if(it!==`initial`||!e||!t||typeof window>`u`){it!==`ready`&&(st.current=null);return}let n=0,r=()=>{n=window.requestAnimationFrame(()=>{let e=ae({activeIndex:rt,centerToOption:X,indicatorRef:W,inset:X?0:q,listRef:U,measureRefs:K,optionRefs:G,sizeAdjustment:J,useRenderedIndicatorSize:Y});if(!e){st.current=null,r();return}if(Re(e)!==$||ot.current!==$){st.current=null,r();return}let t=st.current,n=t?.signature===$?{frameCount:t.frameCount+1,signature:$}:{frameCount:1,signature:$};if(st.current=n,n.frameCount>=2){at(`settled`);return}r()})};return r(),()=>{window.cancelAnimationFrame(n)}},[rt,K,Be,Y,X,q,Q.height,Q.isVisible,Q.width,$,it,W,J,U,G]);let vt={anchorRefs:K,inputRefs:Ke,optionContentRefs:Ce,optionRefs:G},yt={createInputBlurHandler:Z,createInputFocusHandler:He,createInputKeyDownHandler:Ue,onCommitIndex:Ve},bt={currentValue:he,disabled:o,dragging:dt,focusVisibleIndex:We,previewIndex:Qe,required:re,resolvedName:ce,shouldRenderAnchor:ze},xt={...Q,isVisible:it!==`initial`&&Q.isVisible},St=Te({anchorHeight:z.height,anchorWidth:z.width,equalDistributionLayout:lt,indicatorBorderWidth:B.borderWidth,indicatorColor:ft?.accentColor,indicatorCursor:gt,indicatorHeight:B.height===void 0?void 0:B.height,indicatorLayout:xt,indicatorScale:mt,indicatorWidth:B.width===void 0?void 0:B.width,instanceId:N,listCursor:gt,listTouchAction:_t,optionSize:V.size,resolvedOptionSizing:V.sizing,resolvedTrackLayout:R.layout,trackLayout:ct});return we({instanceId:N,ownerDocument:typeof document>`u`?null:document,ruleText:St,styleNonce:E}),A.valid?t.default.createElement(`div`,{...I.root.props,ref:e=>{qe.current=e,Fe(k,e)},role:`radiogroup`,"aria-describedby":e,"aria-label":n,"aria-labelledby":r,"aria-orientation":C,className:l(`rsc-root`,i,I.root.className),"data-disabled":o?`true`:`false`,"data-drag-released":Ye?`true`:`false`,"data-dragging":dt?`true`:`false`,"data-orientation":C,"data-rsc-anchor-sizing":z.width!==void 0||z.height!==void 0?`explicit`:`fill`,"data-rsc-drag-previewing":Xe?`true`:`false`,"data-rsc-indicator-content-mode":B.contentMode,"data-rsc-indicator-motion":it===`ready`?void 0:`initial`,"data-rsc-indicator-style":B.style,"data-rsc-indicator-transition":B.transition,"data-rsc-instance":N,"data-rsc-option-distribution":V.distribution,"data-rsc-option-sizing":V.sizing,"data-rsc-selection-mode":L,"data-rsc-track-layout":R.layout,"data-rsc-track-style":R.style,"data-size":w,"data-unstyled":ie?`true`:`false`},t.default.createElement(`div`,{...I.list.props,ref:U,className:l(`rsc-list`,I.list.className),onPointerCancel:Pe($e,I.list.props.onPointerCancel),onPointerDown:Pe(Ge,et,I.list.props.onPointerDown),onPointerMove:Pe(tt,I.list.props.onPointerMove),onPointerUp:Pe(nt,I.list.props.onPointerUp)},t.default.createElement(`span`,{...I.track.props,"aria-hidden":`true`,className:l(`rsc-track`,I.track.className)}),t.default.createElement(`span`,{...I.indicator.props,"aria-hidden":`true`,className:l(`rsc-indicator`,I.indicator.className),"data-rsc-focused":L===`overlay`&&We!==null&&We===H?`true`:`false`,ref:W},ht?t.default.createElement(`span`,{...I.indicatorContent.props,className:l(`rsc-indicator-content`,I.indicatorContent.className)},t.default.createElement(u,{description:ft.description,label:ft.label,slots:I})):null),S.map((e,n)=>t.default.createElement(d,{key:e.value,descriptionBaseId:P,handlers:yt,index:n,option:e,refs:vt,slots:I,state:bt})))):null}let Be=(0,t.forwardRef)(ze),Ve=`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif`,Z={fontFamily:Ve,fontSizes:{sm:`12px`,md:`14px`,lg:`16px`},descriptionFontSizes:{sm:`10px`,md:`12px`,lg:`14px`},fontWeight:500,lineHeight:1.45,letterSpacing:`0px`};Z.descriptionFontSizes.sm,Z.fontSizes.sm,Z.descriptionFontSizes.md,Z.fontSizes.md,Z.descriptionFontSizes.lg,Z.fontSizes.lg;function He(){return Z}e.SEGMENTED_CHOICE_FONT_FAMILY=Ve,e.SEGMENTED_CHOICE_TYPOGRAPHY_TOKENS=Z,e.SegmentedChoice=Be,e.getSegmentedChoiceTypographyTokens=He});

package/package.json

@@ -1,22 +1,32 @@
 {
   "name": "react-segmented-choice",
-  "version": "1.0.10",
-  "description": "Accessible React segmented control with CSS-first customization, native radio semantics, drag-to-select interaction and customizable indicator geometry.",
+  "version": "1.0.11",
+  "description": "Customizable, animated React segmented control with a sliding indicator, accessible radio-group semantics, drag-to-select and CSS-first theming. TypeScript-first, zero-dependency.",
   "keywords": [
     "a11y",
     "accessible",
+    "animated",
     "css-first",
     "customizable",
     "design-system",
-    "drag-select",
+    "drag-to-select",
     "form-controls",
+    "option-selector",
+    "pill",
     "radio-group",
     "react",
     "react-component",
-    "segment-control",
+    "react-segmented-control",
+    "segmented",
+    "segmented-button",
     "segmented-control",
+    "switch",
+    "tabs",
+    "toggle",
     "toggle-group",
-    "ui"
+    "typescript",
+    "ui",
+    "unstyled"
   ],
   "homepage": "https://segmentedchoice.visiofutura.com",
   "bugs": {
@@ -76,29 +86,29 @@
   },
   "devDependencies": {
     "@codecov/rollup-plugin": "^1.9.1",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-vitest": "10.3.5",
-    "@storybook/react-vite": "10.3.5",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "@tsdown/css": "^0.21.7",
-    "@types/node": "^20.19.0",
-    "@types/react": "^19.0.12",
+    "@tsdown/css": "^0.22.3",
+    "@types/node": "^22.19.21",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser-playwright": "4.1.4",
-    "@vitest/coverage-v8": "4.1.4",
-    "jsdom": "^29.0.1",
-    "oxfmt": "^0.44.0",
-    "oxlint": "^1.59.0",
-    "playwright": "^1.59.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "storybook": "10.3.5",
-    "tsdown": "^0.21.7",
+    "@vitest/browser-playwright": "4.1.9",
+    "@vitest/coverage-v8": "4.1.9",
+    "jsdom": "^29.1.1",
+    "oxfmt": "^0.55.0",
+    "oxlint": "^1.70.0",
+    "playwright": "^1.61.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "storybook": "10.4.6",
+    "tsdown": "^0.22.3",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
-    "vite": "^6.4.2",
-    "vitest": "^4.1.4"
+    "vite": "^6.4.3",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -107,5 +117,5 @@
   "engines": {
     "node": ">=22.13.0"
   },
-  "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499"
+  "packageManager": "pnpm@11.7.0+sha512.19cc852c120c7125760f2443ee6be0ca5b40f9f50598de1a09a1f177503e010e57c23c77646e01e761de59bf874fb22a3398c33ab9691fc13eb946b6f0f4d620"
 }