@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 6.87 kB
Source Map (JSON)
{"version":3,"file":"checkbox-card.cjs","names":["createSlotComponent","checkboxCardStyle","useCheckbox","useInputBorder","MinusIcon","CheckIcon","styled"],"sources":["../../../../src/components/checkbox-card/checkbox-card.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseCheckboxProps } from \"../checkbox\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useCheckbox } from \"../checkbox\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxCardStyle } from \"./checkbox-card.style\"\n\nexport interface CheckboxCardRootProps<Y extends string = string>\n extends Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n ThemeProps<CheckboxCardStyle>,\n UseInputBorderProps {\n /**\n * The addon of the checkbox card.\n */\n addon?: ReactNode\n /**\n * The icon to display in the checkbox when it is checked.\n */\n checkedIcon?: ReactNode\n /**\n * The description of the checkbox card.\n */\n description?: ReactNode\n /**\n * The icon to display in the checkbox when it is indeterminate.\n */\n indeterminateIcon?: ReactNode\n /**\n * The label of the checkbox card.\n */\n label?: ReactNode\n /**\n * If `true`, the indicator will be displayed.\n *\n * @default true\n */\n withIndicator?: boolean\n /**\n * Props for the addon component.\n */\n addonProps?: CheckboxCardAddonProps\n /**\n * Props for the description component.\n */\n descriptionProps?: CheckboxCardDescriptionProps\n /**\n * Props for the indicator component.\n */\n indicatorProps?: CheckboxCardIndicatorProps\n /**\n * Props for the input element.\n */\n inputProps?: HTMLStyledProps<\"input\">\n /**\n * Props for the label component.\n */\n labelProps?: CheckboxCardLabelProps\n /**\n * Props for the label element.\n */\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: CheckboxCardPropsContext,\n usePropsContext: useCheckboxCardPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<CheckboxCardRootProps, CheckboxCardStyle>(\n \"checkbox-card\",\n checkboxCardStyle,\n)\n\nexport {\n CheckboxCardPropsContext,\n component,\n useCheckboxCardPropsContext,\n useRootComponentProps,\n}\n\n/**\n * `CheckboxCard` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardRoot = withProvider<\"label\", CheckboxCardRootProps>(\n ({\n addon,\n checkedIcon,\n children,\n description,\n errorBorderColor,\n focusBorderColor,\n indeterminateIcon,\n label,\n withIndicator = true,\n addonProps,\n descriptionProps,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n } = useCheckbox(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const icon = useMemo(() => {\n if (indeterminate) {\n return indeterminateIcon || <MinusIcon />\n } else if (checked) {\n return checkedIcon || <CheckIcon />\n } else {\n return null\n }\n }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n {label ? (\n <CheckboxCardLabel {...labelProps}>{label}</CheckboxCardLabel>\n ) : null}\n {description ? (\n <CheckboxCardDescription {...descriptionProps}>\n {description}\n </CheckboxCardDescription>\n ) : null}\n {addon ? (\n <CheckboxCardAddon {...addonProps}>{addon}</CheckboxCardAddon>\n ) : null}\n </>\n )\n }, [\n addon,\n addonProps,\n children,\n description,\n descriptionProps,\n label,\n labelProps,\n ])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n <styled.input {...getInputProps(inputProps)} />\n {withIndicator ? (\n <CheckboxCardIndicator {...getIndicatorProps(indicatorProps)}>\n {icon}\n </CheckboxCardIndicator>\n ) : null}\n\n {computedChildren}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: CheckboxCardRootProps<Y>): ReactElement\n}>\n\ninterface CheckboxCardIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxCardIndicator = withContext<\"div\", CheckboxCardIndicatorProps>(\n \"div\",\n \"indicator\",\n)({ \"data-indicator\": \"\" })\n\nexport interface CheckboxCardLabelProps extends HTMLStyledProps {}\n\nexport const CheckboxCardLabel = withContext<\"span\", CheckboxCardLabelProps>(\n \"span\",\n \"label\",\n)()\n\nexport interface CheckboxCardDescriptionProps extends HTMLStyledProps {}\n\nexport const CheckboxCardDescription = withContext<\n \"span\",\n CheckboxCardDescriptionProps\n>(\"span\", \"description\")()\n\nexport interface CheckboxCardAddonProps extends HTMLStyledProps {}\n\nexport const CheckboxCardAddon = withContext<\"span\", CheckboxCardAddonProps>(\n \"span\",\n \"addon\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;AAuEA,MAAM,EACJ,WACA,cAAc,0BACd,iBAAiB,6BACjB,aACA,cACA,0BACEA,6CACF,iBACAC,8CACD;;;;;;AAcD,MAAa,mBAAmB,cAC7B,EACC,OACA,aACA,UACA,aACA,kBACA,kBACA,mBACA,OACA,gBAAgB,MAChB,YACA,kBACA,gBACA,YACA,YACA,UACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACEC,iCAAY,KAAK;CACrB,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,gCAAqB;AACzB,MAAI,cACF,QAAO,qBAAqB,2CAACC,iCAAY;WAChC,QACT,QAAO,eAAe,2CAACC,iCAAY;MAEnC,QAAO;IAER;EAAC;EAAe;EAAmB;EAAS;EAAY,CAAC;CAC5D,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SACE;GACG,QACC,2CAAC;IAAkB,GAAI;cAAa;KAA0B,GAC5D;GACH,cACC,2CAAC;IAAwB,GAAI;cAC1B;KACuB,GACxB;GACH,QACC,2CAAC;IAAkB,GAAI;cAAa;KAA0B,GAC5D;MACH;IAEJ;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,4CAACC,uBAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC3D,2CAACA,uBAAO,SAAM,GAAI,cAAc,WAAW,GAAI;GAC9C,gBACC,2CAAC;IAAsB,GAAI,kBAAkB,eAAe;cACzD;KACqB,GACtB;GAEH;;GACY;GAGnB,OACD,EAAE;AAMH,MAAM,wBAAwB,YAC5B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAa,oBAAoB,YAC/B,QACA,QACD,EAAE;AAIH,MAAa,0BAA0B,YAGrC,QAAQ,cAAc,EAAE;AAI1B,MAAa,oBAAoB,YAC/B,QACA,QACD,EAAE"}