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

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

"use client";import*as o from"react";import a from"classnames";import{Context as f}from"radix-ui/internal";import*as m from"./checkbox-group.primitive.js";import{createCheckboxGroupScope as h}from"./checkbox-group.primitive.js";import{checkboxCardsRootPropDefs as l}from"./checkbox-cards.props.js";import{baseCheckboxPropDefs as R}from"./_internal/base-checkbox.props.js";import{Grid as u}from"./grid.js";import{ThickCheckIcon as y}from"./icons.js";import{extractProps as n}from"../helpers/extract-props.js";import{marginPropDefs as I}from"../props/margin.props.js";const x="CheckboxCards",[G]=f.createContextScope(x,[h]),d=h(),[v,N]=G(x),b=o.forwardRef((e,s)=>{const{__scopeCheckboxCards:r,className:c,color:p,...C}=n(e,l,I),t=d(r);return o.createElement(v,{scope:r,size:e.size,highContrast:e.highContrast},o.createElement(u,{asChild:!0},o.createElement(m.Root,{...t,"data-accent-color":p,...C,ref:s,className:a("rt-CheckboxCardsRoot",c)})))});b.displayName="CheckboxCards.Root";const k=o.forwardRef(({__scopeCheckboxCards:e,children:s,className:r,style:c,...p},C)=>{const t=N("CheckboxCardsItem",e),i=d(e),{className:P}=n({size:t?.size,variant:"surface",highContrast:t?.highContrast},R);return o.createElement("label",{className:a("rt-BaseCard","rt-CheckboxCardsItem",r),style:c},s,o.createElement(m.Item,{...i,...p,ref:C,className:a("rt-reset","rt-BaseCheckboxRoot","rt-CheckboxCardCheckbox",P)},o.createElement(m.Indicator,{...i,asChild:!0,className:"rt-BaseCheckboxIndicator"},o.createElement(y,null))))});k.displayName="CheckboxCards.Item";export{k as Item,b as Root};
//# sourceMappingURL=checkbox-cards.js.map