@radix-ui/themes/dist/esm/components/checkbox-group.primitive.js

[](https://radix-ui.com/themes)

"use client";import*as e from"react";import{Checkbox as C,Direction as q}from"radix-ui";import{Context as N,Primitive as D,useComposedRefs as W,RovingFocus as d,useControllableState as U}from"radix-ui/internal";const{useDirection:A}=q,P="CheckboxGroup",[M,O]=N.createContextScope(P,[d.createRovingFocusGroupScope,C.createCheckboxScope]),I=d.createRovingFocusGroupScope(),g=C.createCheckboxScope(),[w,T]=M(P),v=e.forwardRef((r,n)=>{const{__scopeCheckboxGroup:o,name:i,defaultValue:c,value:t,required:p=!1,disabled:s=!1,orientation:h,dir:l,loop:b=!0,onValueChange:u,...k}=r,S=I(o),R=A(l),[E=[],a]=U({prop:t,defaultProp:c,onChange:u}),F=e.useCallback(x=>a((m=[])=>[...m,x]),[a]),_=e.useCallback(x=>a((m=[])=>m.filter(V=>V!==x)),[a]);return e.createElement(w,{scope:o,name:i,required:p,disabled:s,value:E,onItemCheck:F,onItemUncheck:_},e.createElement(d.Root,{asChild:!0,...S,orientation:h,dir:R,loop:b},e.createElement(D.div,{role:"group","data-disabled":s?"":void 0,dir:R,...k,ref:n})))});v.displayName=P;const y="CheckboxGroupItem",f=e.forwardRef((r,n)=>{const{__scopeCheckboxGroup:o,disabled:i,...c}=r,t=T(y,o),p=t.disabled||i,s=I(o),h=g(o),l=e.useRef(null),b=W(n,l),u=t.value?.includes(c.value);return e.createElement(d.Item,{asChild:!0,...s,focusable:!p,active:u},e.createElement(C.Root,{name:t.name,disabled:p,required:t.required,checked:u,...h,...c,ref:b,onCheckedChange:k=>{k?t.onItemCheck(r.value):t.onItemUncheck(r.value)}}))});f.displayName=y;const B="CheckboxGroupIndicator",G=e.forwardRef((r,n)=>{const{__scopeCheckboxGroup:o,...i}=r,c=g(o);return e.createElement(C.Indicator,{...c,...i,ref:n})});G.displayName=B;const H=v,K=f,X=G;export{v as CheckboxGroup,G as CheckboxGroupIndicator,f as CheckboxGroupItem,X as Indicator,K as Item,H as Root,O as createCheckboxGroupScope};
//# sourceMappingURL=checkbox-group.primitive.js.map