UNPKG

@radix-ui/themes

Version:

[![Radix Themes Logo](https://radix-ui.com/social/themes.png)](https://radix-ui.com/themes)

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