@yamada-ui/checkbox
Version:
Yamada UI checkbox component
1 lines • 13 kB
Source Map (JSON)
{"version":3,"sources":["../src/checkbox.tsx"],"sourcesContent":["import type {\n ComponentArgs,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n CSSProperties,\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n ReactNode,\n Ref,\n} from \"react\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport { cx, funcAll } from \"@yamada-ui/utils\"\nimport { cloneElement, forwardRef } from \"react\"\nimport { useCheckboxGroupContext } from \"./checkbox-context\"\nimport { useCheckbox } from \"./use-checkbox\"\n\ninterface CheckboxOptions {\n /**\n * The label of the checkbox.\n */\n label?: ReactNode\n /**\n * Props for icon component.\n */\n iconProps?: { children: ReactElement } & Omit<HTMLUIProps, \"children\">\n /**\n * Props for input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n /**\n * Props for label element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface CheckboxProps<Y extends number | string = string>\n extends Merge<HTMLUIProps<\"label\">, UseCheckboxProps<Y>>,\n ThemeProps<\"Checkbox\">,\n CheckboxOptions {}\n\n/**\n * `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see Docs https://yamada-ui.com/components/forms/checkbox\n */\nexport const Checkbox = forwardRef(\n <Y extends number | string = string>(\n props: CheckboxProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useCheckboxGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"Checkbox\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n children,\n disabled = groupProps.disabled ?? control.disabled,\n gap = \"0.5rem\",\n invalid = groupProps.invalid ?? control.invalid,\n label,\n readOnly = groupProps.readOnly ?? control.readOnly,\n required = groupProps.required ?? control.required,\n iconProps,\n inputProps,\n labelProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n computedProps.checked ??= computedProps.isChecked\n\n const checkedProp =\n groupValue && computedProps.value\n ? groupValue.includes(computedProps.value)\n : computedProps.checked\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n checked,\n indeterminate,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n } = useCheckbox({\n ...computedProps,\n checked: checkedProp,\n disabled,\n invalid,\n readOnly,\n required,\n onChange,\n })\n\n const { children: customIcon, ...resolvedIconProps } = { ...iconProps }\n const icon = cloneElement(customIcon ?? <CheckboxIcon />, {\n checked,\n disabled,\n indeterminate,\n invalid,\n isDisabled: disabled,\n isIndeterminate: indeterminate,\n isInvalid: invalid,\n isReadOnly: readOnly,\n isRequired: required,\n readOnly,\n required,\n __css: {\n opacity: checked || indeterminate ? 1 : 0,\n transform: checked || indeterminate ? \"scale(1)\" : \"scale(0.95)\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n },\n })\n\n return (\n <ui.label\n className={cx(\"ui-checkbox\", className)}\n {...getContainerProps()}\n __css={{\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n gap,\n position: \"relative\",\n verticalAlign: \"top\",\n ...styles.container,\n }}\n {...rest}\n >\n <ui.input\n className=\"ui-checkbox__input\"\n {...getInputProps(inputProps, ref)}\n />\n\n <ui.div\n className=\"ui-checkbox__icon\"\n __css={{\n display: \"inline-block\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n {...getIconProps(resolvedIconProps)}\n >\n {icon}\n </ui.div>\n\n <ui.span\n className=\"ui-checkbox__label\"\n __css={{ ...styles.label }}\n {...getLabelProps(labelProps)}\n >\n {children ?? label}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: { ref?: Ref<HTMLInputElement> } & CheckboxProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nCheckbox.displayName = \"Checkbox\"\nCheckbox.__ui__ = \"Checkbox\"\n\nexport type CheckboxIconProps = {\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n */\n checked?: boolean\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n */\n indeterminate?: boolean\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n *\n * @deprecated Use `checked` instead.\n */\n isChecked?: boolean\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n *\n * @deprecated Use `indeterminate` instead.\n */\n isIndeterminate?: boolean\n} & FormControlOptions &\n MotionProps<\"svg\">\n\nexport const CheckboxIcon: FC<CheckboxIconProps> = ({\n isChecked,\n checked = isChecked,\n disabled: _disabled,\n isIndeterminate,\n indeterminate = isIndeterminate,\n invalid: _invalid,\n isDisabled: _isDisabled,\n isInvalid: _isInvalid,\n isReadOnly: _isReadOnly,\n isRequired: _isRequired,\n readOnly: _readOnly,\n required: _required,\n ...rest\n}) => {\n return (\n <AnimatePresence initial={false}>\n {indeterminate || checked ? (\n <ui.div\n __css={{\n left: \"50%\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <motion.div\n style={\n {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n } as CSSProperties\n }\n animate=\"checked\"\n exit=\"unchecked\"\n initial=\"unchecked\"\n variants={{\n checked: { scale: 1 },\n unchecked: { scale: 0.5 },\n }}\n >\n {indeterminate ? (\n <CheckboxIndeterminateIcon {...rest} />\n ) : (\n <CheckboxCheckIcon {...rest} />\n )}\n </motion.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nCheckboxIcon.displayName = \"CheckboxIcon\"\nCheckboxIcon.__ui__ = \"CheckboxIcon\"\n\ninterface CheckboxCheckIconProps extends MotionProps<\"svg\"> {}\n\nconst CheckboxCheckIcon: FC<CheckboxCheckIconProps> = (props) => {\n return (\n <motion.svg\n style={{\n fill: \"none\",\n stroke: \"currentColor\",\n strokeDasharray: 16,\n strokeWidth: 2,\n }}\n variants={{\n checked: {\n opacity: 1,\n strokeDashoffset: 0,\n transition: { duration: 0.2 },\n },\n unchecked: {\n opacity: 0,\n strokeDashoffset: 16,\n },\n }}\n viewBox=\"0 0 12 10\"\n width=\"1.2em\"\n {...props}\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </motion.svg>\n )\n}\n\nCheckboxCheckIcon.displayName = \"CheckboxCheckIcon\"\nCheckboxCheckIcon.__ui__ = \"CheckboxCheckIcon\"\n\ninterface CheckboxIndeterminateIconProps extends MotionProps<\"svg\"> {}\n\nconst CheckboxIndeterminateIcon: FC<CheckboxIndeterminateIconProps> = (\n props,\n) => {\n return (\n <motion.svg\n style={{ stroke: \"currentColor\", strokeWidth: 4 }}\n variants={{\n checked: {\n opacity: 1,\n scaleX: 1,\n transition: {\n opacity: { duration: 0.02 },\n scaleX: { duration: 0 },\n },\n },\n unchecked: {\n opacity: 0,\n scaleX: 0.65,\n },\n }}\n viewBox=\"0 0 24 24\"\n width=\"1.2em\"\n {...props}\n >\n <line x1=\"21\" x2=\"3\" y1=\"12\" y2=\"12\" />\n </motion.svg>\n )\n}\n\nCheckboxIndeterminateIcon.displayName = \"CheckboxIndeterminateIcon\"\nCheckboxIndeterminateIcon.__ui__ = \"CheckboxIndeterminateIcon\"\n"],"mappings":"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","names":[]}