{"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":[]}