https://patrickxin.dev/assets/toggle-group-DHNFyi7d.js

1import{$ as g,bJ as fe,an as G,bK as B,bL as Y,bM as U,aj as ge,ar as J,bN as pe,bO as he,bP as F,aP as me,bQ as xe,aS as $,a0 as K,bR as be,bm as Ie,ak as ve,al as Ce,a8 as ye,bS as Re}from"./index-CO3Hoviq.js";import{u as se}from"./useControlled-BcuNGrEo.js";import{C as Ee}from"./useCompositeListItem-COYHrqZ0.js";import{i as Pe}from"./isElementDisabled-CwHw_lZC.js";import{s as q,H as Q,E as X,C as Me,i as Z,A as ee,a as te,b as ne,c as oe,M as Te}from"./composite-BuqxgKOc.js";import{u as ke}from"./ToolbarRootContext-DTpgbUfM.js";import{u as Oe}from"./useBaseUiId-Bf724d0f.js";import{C as je}from"./CompositeItem-DOBVnLMG.js";const re="data-composite-item-active";function we(c){const{loopFocus:l=!0,orientation:n="both",grid:r,onLoop:a,direction:x,highlightedIndex:I,onHighlightedIndexChange:v,rootRef:O,enableHomeAndEndKeys:E=!1,stopEventPropagation:S,disabledIndices:d,modifierKeys:H=F}=c,[j,P]=g.useState(0),C=r!=null,f=g.useRef(null),w=fe(f,O),o=g.useRef([]),h=g.useRef(!1),y=g.useRef(null),i=I??j,p=G((e,s=!1)=>{if(y.current=o.current[e]??null,(v??P)(e),s){const t=o.current[e];q(f.current,t,x,n)}}),z=G(e=>{if(e.size===0)return;if(h.current){const m=o.current,k=m.indexOf(y.current);if(k===-1){const V=m[i];!V||B(m,i,d)?p(ze(m,d)):y.current=V}else k!==i&&p(k);return}h.current=!0;const s=Array.from(e.keys()),t=s.find(m=>m?.hasAttribute(re))??null,b=t?e.get(t)?.index??-1:-1;if(b!==-1)p(b);else if(B(s,i,d)){const m=Y(s,{disabledIndices:d});U(s,m)||p(m)}q(f.current,t,x,n)});ge(()=>{if(d==null||I!=null||!h.current)return;const e=o.current;if(B(e,i,d)){const s=Y(e,{disabledIndices:d});U(e,s)||p(s)}},[d,I,i,o,p]);const M=G((e,s,t)=>a?a(e,s,t,o):t),R=G(e=>{const s=e.key===Q||e.key===X;if(!Me.has(e.key)||!E&&s||Ke(e,H)||!f.current)return;const b=x==="rtl",m=b?ne:oe,k=b?oe:ne,V=n==="vertical"?ee:m,de=n==="vertical"?te:k,A=J(e.nativeEvent);if(A!=null&&Z(A)&&!Pe(A)){const N=A.selectionStart,ue=A.selectionEnd,ce=A.value;if(N==null||e.shiftKey||N!==ue||e.key!==de&&N<ce.length||e.key!==V&&N>0)return}let u=i;const L=pe(o,d),_=he(o,d);r!=null&&(u=r({disabledIndices:d,elementsRef:o,event:e,highlightedIndex:i,loopFocus:l,maxIndex:_,minIndex:L,onLoop:M,orientation:n,rtl:b}));const W=n!=="vertical"&&e.key===m||n!=="horizontal"&&e.key===ee,D=n!=="vertical"&&e.key===k||n!=="horizontal"&&e.key===te;E&&(e.key===Q?u=L:e.key===X&&(u=_)),u===i&&(W||D)&&(l&&u===_&&W?(u=L,a&&(u=a(e,i,u,o))):l&&u===L&&D?(u=_,a&&(u=a(e,i,u,o))):u=Y(o.current,{startingIndex:u,decrement:D,disabledIndices:d})),u!==i&&!U(o.current,u)&&(S&&e.stopPropagation(),(C||s||W||D)&&e.preventDefault(),p(u,!0),queueMicrotask(()=>{o.current[u]?.focus()}))});return{props:{ref:w,onFocus(e){const s=f.current,t=J(e.nativeEvent);!s||t==null||!Z(t)||t.setSelectionRange(0,t.value.length)},onKeyDown:R},highlightedIndex:i,onHighlightedIndexChange:p,elementsRef:o,onMapChange:z,relayKeyboardEvent:R}}function ze(c,l){let n=-1;for(let r=0;r<c.length;r+=1){const a=c[r];if(!(!a||B(c,r,l))){if(a.hasAttribute(re))return r;n===-1&&(n=r)}}return Math.max(n,0)}function Ke(c,l){for(const n of Te)if(!l.includes(n)&&c.getModifierState(n))return!0;return!1}function He(c){const{render:l,className:n,style:r,refs:a=F,props:x=F,state:I=me,stateAttributesMapping:v,highlightedIndex:O,onHighlightedIndexChange:E,orientation:S,grid:d,loopFocus:H,onLoop:j,enableHomeAndEndKeys:P,onMapChange:C,stopEventPropagation:f=!0,rootRef:w,disabledIndices:o,modifierKeys:h,highlightItemOnHover:y=!1,tag:i="div",...p}=c,z=xe(),{props:M,highlightedIndex:R,onHighlightedIndexChange:T,elementsRef:e,onMapChange:s,relayKeyboardEvent:t}=we({grid:d,loopFocus:H,onLoop:j,orientation:S,highlightedIndex:O,onHighlightedIndexChange:E,rootRef:w,stopEventPropagation:f,enableHomeAndEndKeys:P,direction:z,disabledIndices:o,modifierKeys:h}),b=$(i,c,{state:I,ref:a,props:[M,...x,p],stateAttributesMapping:v}),m=g.useMemo(()=>({highlightedIndex:R,onHighlightedIndexChange:T,highlightItemOnHover:y,relayKeyboardEvent:t}),[R,T,y,t]);return K.jsx(be.Provider,{value:m,children:K.jsx(Ee,{elementsRef:e,onMapChange:k=>{C?.(k),s(k)},children:b})})}const ae=g.createContext(void 0);function Se(){return g.useContext(ae)}const Ae=g.forwardRef(function(l,n){const{className:r,defaultPressed:a=!1,disabled:x=!1,form:I,onPressedCh

1ange:v,pressed:O,render:E,type:S,value:d,nativeButton:H=!0,style:j,...P}=l,C=Oe(d||void 0),f=Se(),w=f?.value??[],o=(x||f?.disabled)??!1,[h,y]=se({controlled:f?C!==void 0&&w.indexOf(C)>-1:O,default:a,name:"Toggle",state:"pressed"}),{getButtonProps:i,buttonRef:p}=Ie({disabled:o,native:H}),z={disabled:o,pressed:h},M=[p,n],R=[{"aria-pressed":h,onClick(s){const t=!h,b=ve(Ce,s.nativeEvent);v?.(t,b),!b.isCanceled&&(C&&f?.setGroupValue?.(C,t,b),!b.isCanceled&&y(t))}},P,i],T=$("button",l,{enabled:!f,state:z,ref:M,props:R}),e=g.useMemo(()=>({disabled:o,focusableWhenDisabled:!1}),[o]);return f?K.jsx(je,{tag:"button",render:E,className:r,style:j,metadata:e,state:z,refs:M,props:R}):T}),Ge=g.createContext(void 0);function Ve(){return g.useContext(Ge)}const Le=g.forwardRef(function(l,n){const{defaultValue:r,disabled:a=!1,loopFocus:x=!0,onValueChange:I,orientation:v="horizontal",multiple:O=!1,value:E,className:S,render:d,style:H,...j}=l,P=ke(),C=Ve(),f=r??F,w=E!==void 0||r!==void 0,o=(P?.disabled??!1)||(C?.disabled??!1)||a,[h,y]=se({controlled:E,default:f,name:"ToggleGroup",state:"value"}),i=G((T,e,s)=>{let t;O?(t=h.slice(),e?t.push(T):t.splice(h.indexOf(T),1)):t=e?[T]:[],I?.(t,s),!s.isCanceled&&y(t)}),p={disabled:o,multiple:O,orientation:v},z=g.useMemo(()=>({disabled:o,setGroupValue:i,value:h,isValueInitialized:w}),[o,i,h,w]),M={role:"group"},R=$("div",l,{enabled:!!P,state:p,ref:n,props:[M,j]});return K.jsx(ae.Provider,{value:z,children:P?R:K.jsx(He,{render:d,className:S,style:H,state:p,refs:[n],props:[M,j],loopFocus:x,enableHomeAndEndKeys:!0,orientation:v})})}),ie=g.createContext({variant:"default",size:"default",spacing:0,orientation:"horizontal"}),le=ye({slots:{root:"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md",item:["shrink-0 inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap rounded-md transition-all border border-transparent","disabled:pointer-events-none disabled:opacity-50","[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",Re,"bg-transparent hover:bg-primary/8 data-pressed:text-on-secondary-container data-pressed:bg-secondary-container data-pressed:hover:bg-secondary-container"]},variants:{size:{default:{item:"h-9 px-2 min-w-9"},sm:{root:"rounded-[min(var(--radius-md),10px)]",item:"h-8 px-1.5 min-w-8"},lg:{item:"h-10 px-2.5 min-w-10"},xs:{item:"h-7 px-1 min-w-7 text-xs"}},variant:{default:{},outline:{item:"border border-outline-variant shadow-xs data-pressed:border-primary/12"},ghost:{}},orientation:{horizontal:{root:"flex-row"},vertical:{root:"flex-col items-stretch"}},joined:{true:{item:"rounded-none px-2"}}},compoundVariants:[{joined:!0,orientation:"horizontal",class:{item:"first:rounded-l-lg last:rounded-r-lg"}},{joined:!0,orientation:"vertical",class:{item:"first:rounded-t-lg last:rounded-b-lg"}},{joined:!0,variant:"outline",orientation:"horizontal",class:{item:"[&:not(:first-child)]:border-l-0"}},{joined:!0,variant:"outline",orientation:"vertical",class:{item:"[&:not(:first-child)]:border-t-0"}}],defaultVariants:{size:"default",variant:"default",orientation:"horizontal",joined:!0}});function $e({className:c,variant:l="default",size:n="default",spacing:r=0,orientation:a="horizontal",children:x,...I}){const{root:v}=le({variant:l,size:n,orientation:a,joined:r===0});return K.jsx(ie.Provider,{value:{variant:l??"default",size:n??"default",spacing:r,orientation:a},children:K.jsx(Le,{"data-slot":"toggle-group",style:{"--gap":r},className:v({className:c}),...I,children:x})})}function Je({className:c,children:l,...n}

1){const{variant:r,size:a,spacing:x,orientation:I}=g.useContext(ie),{item:v}=le({variant:r,size:a,orientation:I,joined:x===0});return K.jsx(Ae,{"data-slot":"toggle-group-item",className:v({className:c}),...n,children:l})}export{$e as T,Je as a};