Add size prop to Checkbox component (#2684)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [ ] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [ ] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

## Summary

<!-- Please brief explanation of the changes made -->
- Checkbox 컴포넌트에 size prop을 추가합니다.
- 더 작은 s 사이즈가 추가되었습니다.(기존 사이즈는 m사이즈)

## Details
- s 사이즈 Checkbox는 컴포넌트 사이즈는 16x16, 아이콘 사이즈는 xxs(12x12), border-radius는
4.6px 입니다.
-
[피그마](https://www.figma.com/design/99k33ZxchcPKTz2tzJlZeE/Components?node-id=1307-312&m=dev)
<!-- Please elaborate description of the changes -->

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->
- No (기본값으로 m 사이즈를 넣어주고 있어 기존 사용처들은 동일하게 사용 가능)
## References

<!-- Please list any other resources or points the reviewer should be
aware of -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Checkbox에 사이즈 옵션 추가(s, m) — 기본값은 m이며 s 선택 시 더 작게 표시됩니다.
  * 체크 표시 아이콘이 선택된 사이즈에 따라 자동으로 크기 조정됩니다.
  * 공개 API에 사이즈 타입과 size prop이 추가되어 타입 안전한 사이즈 지정이 가능합니다.
* **Chores**
  *마이너 릴리스용 변경로그 항목(changeset) 추가됨.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: annie1229

.changeset/floppy-moments-sink.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': minor
+---
+
+Add size prop to Checkbox component

packages/bezier-react/src/components/Checkbox/Checkbox.module.scss

@@ -23,8 +23,6 @@
   box-shadow: inset 0 0 0 2px var(--bdr-black-dark);
 
   /* stylelint-disable-next-line order/order */
-  @include dimension.square(18px);
-
   @include interaction.touchable-hover {
     &:where(:not([data-disabled], [data-state='unchecked'])) {
       background-color: var(--bgtxt-green-dark);
@@ -35,6 +33,17 @@
     }
   }
 
+  &:where(.size-s) {
+    border-radius: 4.6px;
+
+    /* stylelint-disable-next-line order/order */
+    @include dimension.square(16px);
+  }
+
+  &:where(.size-m) {
+    @include dimension.square(18px);
+  }
+
   &:where([data-disabled]) {
     background-color: var(--bg-black-dark);
     box-shadow: none;

packages/bezier-react/src/components/Checkbox/Checkbox.tsx

@@ -37,7 +37,6 @@ const CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(
         className={styles.CheckIcon}
         ref={forwardedRef}
         source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}
-        size="xs"
         color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}
         {...props}
       />
@@ -46,7 +45,7 @@ const CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(
 )
 
 function CheckboxImpl<Checked extends CheckedState>(
-  { children, className, checked, id: idProp, ...rest }: CheckboxProps<Checked>,
+  { children, className, checked, size = 'm', id: idProp, ...rest }: CheckboxProps<Checked>,
   forwardedRef: React.Ref<HTMLButtonElement>
 ) {
   const {
@@ -56,14 +55,15 @@ function CheckboxImpl<Checked extends CheckedState>(
   } = useFormFieldProps(rest)
 
   const id = useId(idProp ?? formFieldId, 'bezier-checkbox')
+  const iconSize = size === 's' ? 'xxs' : 'xs'
 
   return (
     <div
       className={classNames(styles.Container, getFormFieldSizeClassName('m'))}
     >
       <CheckboxPrimitive.Root
         asChild
-        className={classNames(styles.Checkbox, className)}
+        className={classNames(styles.Checkbox, styles[`size-${size}`], className)}
         ref={forwardedRef}
         id={id}
         checked={checked}
@@ -77,7 +77,7 @@ function CheckboxImpl<Checked extends CheckedState>(
             forceMount
           >
             {/* @ts-expect-error */}
-            <CheckIcon />
+            <CheckIcon size={iconSize} />
           </CheckboxPrimitive.Indicator>
         </BaseButton>
       </CheckboxPrimitive.Root>

packages/bezier-react/src/components/Checkbox/Checkbox.types.ts

@@ -2,10 +2,13 @@ import {
   type BezierComponentProps,
   type ChildrenProps,
   type FormFieldProps,
+  type SizeProps,
 } from '~/src/types/props'
 
 export type CheckedState = boolean | 'indeterminate'
 
+export type CheckboxSize = 's' | 'm'
+
 interface CheckboxOwnProps<Checked extends CheckedState> {
   /**
    * The controlled checked state of the checkbox.
@@ -42,4 +45,5 @@ export interface CheckboxProps<Checked extends CheckedState>
   extends Omit<BezierComponentProps<'button'>, keyof CheckboxOwnProps<Checked>>,
     ChildrenProps,
     FormFieldProps,
+    SizeProps<CheckboxSize>,
     CheckboxOwnProps<Checked> {}

packages/bezier-react/src/components/Checkbox/index.ts

@@ -1,2 +1,6 @@
 export { Checkbox } from './Checkbox'
-export type { CheckboxProps, CheckedState } from './Checkbox.types'
+export type {
+  CheckboxProps,
+  CheckedState,
+  CheckboxSize,
+} from './Checkbox.types'