From 2f044666629004f5cabfec72712c5d393f48b7c9 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 18 Jun 2024 17:19:20 +0900
Subject: [PATCH 01/27] feat(toggle-emoji-button-group): add component

---
 .../ToggleEmojiButtonGroup.module.scss        | 66 +++++++++++++++++++
 .../ToggleEmojiButtonGroup.tsx                | 57 ++++++++++++++++
 .../ToggleEmojiButtonGroup.types.ts           | 48 ++++++++++++++
 3 files changed, 171 insertions(+)
 create mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
 create mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
 create mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
new file mode 100644
index 0000000000..0355e76f2b
--- /dev/null
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -0,0 +1,66 @@
+@use '../../styles/mixins/dimension';
+
+.ToggleEmojiButtonGroup {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+
+  &:where(.fillDirection-horizontal) {
+    width: 100%;
+
+    & :where(.ToggleEmojiButtonSource) {
+      flex-grow: 1;
+    }
+  }
+
+  &:where(.fillDirection-all) {
+    width: 100%;
+    height: 100%;
+
+    & :is(.ToggleEmojiButtonSource) {
+      aspect-ratio: 1/1;
+      width: auto;
+      height: 100%;
+    }
+  }
+}
+
+.ToggleEmojiButtonSource {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 12px;
+  border-radius: var(--radius-12);
+
+  &:where(.size-m) {
+    @include dimension.square(54px);
+  }
+
+  &:where(.variant-primary) {
+    box-shadow: var(--alpha-shadow-input-default);
+    background-color: var(--alpha-color-bg-grey-lightest);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-grey-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-bg-blue-lightest);
+      box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset;
+    }
+  }
+
+  &:where(.variant-secondary) {
+    background-color: var(--alpha-color-bg-black-lightest);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-black-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-primary-bg-lighter);
+    }
+  }
+}
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
new file mode 100644
index 0000000000..1177783ae7
--- /dev/null
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -0,0 +1,57 @@
+import React, { forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import { BaseButton } from '~/src/components/BaseButton'
+import {
+  ToggleEmojiButtonGroupProps as ToggleEmojiButtonGroupProps,
+  ToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+import * as Toggle from '@radix-ui/react-toggle'
+
+import styles from './ToggleEmojiButtonGroup.module.scss'
+
+export const ToggleEmojiButtonSource = forwardRef<
+  HTMLButtonElement,
+  ToggleEmojiButtonSourceProps
+>(function ToggleEmojiButtonSource(
+  { content, variant, className, selected, size = 'm', ...rest },
+  forwardedRef
+) {
+  return (
+    <Toggle.Root asChild>
+      <BaseButton
+        ref={forwardedRef}
+        className={classNames(
+          styles.ToggleEmojiButtonSource,
+          styles[`size-${size}`],
+          styles[`variant-${variant}`],
+          className
+        )}
+        {...rest}
+      >
+        {content}
+      </BaseButton>
+    </Toggle.Root>
+  )
+})
+
+export const ToggleEmojiButtonGroup = forwardRef<
+  HTMLDivElement,
+  ToggleEmojiButtonGroupProps
+>(function ToggleEmojiButtonGroup(
+  { fillDirection, className, ...rest },
+  forwardedRef
+) {
+  return (
+    <div
+      ref={forwardedRef}
+      className={classNames(
+        styles.ToggleEmojiButtonGroup,
+        fillDirection && styles[`fillDirection-${fillDirection}`],
+        className
+      )}
+      {...rest}
+    ></div>
+  )
+})
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
new file mode 100644
index 0000000000..afd500ec9f
--- /dev/null
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react'
+
+import { type BezierComponentProps, type SizeProps } from '~/src/types/props'
+
+interface ToggleEmojiButtonSourceOwnProps {
+  /**
+   * Types of visual styles for button.
+   * @default 'primary'
+   */
+  variant: 'primary' | 'secondary'
+
+  /**
+   * If `loading` is true, spinner will be shown, replacing the content.
+   * @default false
+   */
+  loading?: boolean
+
+  /**
+   * Props that shows whether the button is selected.
+   * @default false
+   */
+  selected?: boolean
+
+  /**
+   * Emoji in the button.
+   */
+  content: ReactNode
+}
+
+interface ToggleEmojiButtonGroupOwnProps {
+  /**
+   * Growing direction of button.
+   * @default undefined
+   */
+  fillDirection?: 'horizontal' | 'all'
+}
+
+export interface ToggleEmojiButtonGroupProps
+  extends BezierComponentProps<'div'>,
+    ToggleEmojiButtonGroupOwnProps {}
+
+export interface ToggleEmojiButtonSourceProps
+  extends Omit<
+      BezierComponentProps<'button'>,
+      keyof ToggleEmojiButtonSourceOwnProps
+    >,
+    SizeProps<'m'>,
+    ToggleEmojiButtonSourceOwnProps {}

From c215c60fb179b0cf6dd9eed3221a49d2c68c40e5 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 18 Jun 2024 17:19:39 +0900
Subject: [PATCH 02/27] feat(toggle-emoji-button-group): add export

---
 .../src/components/AlphaToggleEmojiButtonGroup/index.ts  | 9 +++++++++
 packages/bezier-react/src/index.ts                       | 1 +
 2 files changed, 10 insertions(+)
 create mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/index.ts

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/index.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/index.ts
new file mode 100644
index 0000000000..d70cb21f2a
--- /dev/null
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/index.ts
@@ -0,0 +1,9 @@
+export type {
+  ToggleEmojiButtonGroupProps as AlphaToggleEmojiButtonGroupProps,
+  ToggleEmojiButtonSourceProps as AlphaToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+
+export {
+  ToggleEmojiButtonGroup as AlphaToggleEmojiButtonGroup,
+  ToggleEmojiButtonSource as AlphaToggleEmojiButtonSource,
+} from './ToggleEmojiButtonGroup'
diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts
index b6484b3e05..ee3cc11ea3 100644
--- a/packages/bezier-react/src/index.ts
+++ b/packages/bezier-react/src/index.ts
@@ -8,6 +8,7 @@ export { tokens } from '@channel.io/bezier-tokens'
 export * from '~/src/components/AlphaAvatar'
 export * from '~/src/components/AlphaAvatarGroup'
 export * from '~/src/components/AlphaButton'
+export * from '~/src/components/AlphaToggleEmojiButton'
 export * from '~/src/components/AlphaDialogPrimitive'
 export * from '~/src/components/AlphaFloatingButton'
 export * from '~/src/components/AlphaFloatingIconButton'

From 9fa434f5965c4024366f1efc1104a84c23617f0d Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 18 Jun 2024 17:20:02 +0900
Subject: [PATCH 03/27] feat(toggle-emoji-button-group): add storybook

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx   | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
new file mode 100644
index 0000000000..edff8fe9b1
--- /dev/null
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import {
+  ToggleEmojiButtonGroup,
+  ToggleEmojiButtonSource,
+} from './ToggleEmojiButtonGroup'
+import type {
+  ToggleEmojiButtonGroupProps,
+  ToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+import { Emoji } from '~/src/components/Emoji'
+import { Center } from '~/src/components/Center'
+
+const meta: Meta<typeof ToggleEmojiButtonGroup> = {
+  component: ToggleEmojiButtonGroup,
+}
+export default meta
+
+type ToggleButtonCompositionType = ToggleEmojiButtonGroupProps &
+  Pick<ToggleEmojiButtonSourceProps, 'variant'>
+
+const Template: StoryFn<ToggleButtonCompositionType> = ({
+  fillDirection,
+  variant,
+}) => (
+  <Center
+    width={400}
+    height={100}
+    backgroundColor="bg-lounge"
+  >
+    <ToggleEmojiButtonGroup fillDirection={fillDirection}>
+      <ToggleEmojiButtonSource
+        variant={variant}
+        content={
+          <Emoji
+            name="channel"
+            size="30"
+            imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/blush.png"
+          />
+        }
+      />
+      <ToggleEmojiButtonSource
+        variant={variant}
+        content={
+          <Emoji
+            name="channel"
+            size="30"
+            imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/blush.png"
+          />
+        }
+      />
+    </ToggleEmojiButtonGroup>
+  </Center>
+)
+
+export const Primary = {
+  render: Template,
+
+  args: {
+    fillDirection: 'all',
+    variant: 'primary',
+  },
+} satisfies StoryObj<ToggleButtonCompositionType>

From 7d91e92f36a06f113cf7b29cf10ba0f56bc62813 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 18 Jun 2024 17:41:28 +0900
Subject: [PATCH 04/27] feat(toggle-emoji-button-group): add spinner

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx   |  6 ++++-
 .../ToggleEmojiButtonGroup.module.scss        | 25 +++++++++++++++++++
 .../ToggleEmojiButtonGroup.tsx                | 21 ++++++++++++++--
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index edff8fe9b1..7e51237430 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -19,11 +19,12 @@ const meta: Meta<typeof ToggleEmojiButtonGroup> = {
 export default meta
 
 type ToggleButtonCompositionType = ToggleEmojiButtonGroupProps &
-  Pick<ToggleEmojiButtonSourceProps, 'variant'>
+  Pick<ToggleEmojiButtonSourceProps, 'variant' | 'loading'>
 
 const Template: StoryFn<ToggleButtonCompositionType> = ({
   fillDirection,
   variant,
+  loading,
 }) => (
   <Center
     width={400}
@@ -33,6 +34,7 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
     <ToggleEmojiButtonGroup fillDirection={fillDirection}>
       <ToggleEmojiButtonSource
         variant={variant}
+        loading={loading}
         content={
           <Emoji
             name="channel"
@@ -43,6 +45,7 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
       />
       <ToggleEmojiButtonSource
         variant={variant}
+        loading={loading}
         content={
           <Emoji
             name="channel"
@@ -61,5 +64,6 @@ export const Primary = {
   args: {
     fillDirection: 'all',
     variant: 'primary',
+    loading: false,
   },
 } satisfies StoryObj<ToggleButtonCompositionType>
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index 0355e76f2b..f2bee77519 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -30,6 +30,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 
   padding: 12px;
   border-radius: var(--radius-12);
@@ -63,4 +64,28 @@
       background-color: var(--alpha-color-primary-bg-lighter);
     }
   }
+
+  & :where(.ButtonContent) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:where(.loading) {
+      visibility: hidden;
+    }
+  }
+
+  & :where(.ButtonLoader) {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & :is(.Spinner) {
+      --b-emoji-size: 30px;
+      @include dimension.square(var(--b-emoji-size));
+    }
+  }
 }
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 1177783ae7..27cc568902 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -10,12 +10,13 @@ import {
 import * as Toggle from '@radix-ui/react-toggle'
 
 import styles from './ToggleEmojiButtonGroup.module.scss'
+import { AlphaSpinner } from '~/src/components/AlphaSpinner'
 
 export const ToggleEmojiButtonSource = forwardRef<
   HTMLButtonElement,
   ToggleEmojiButtonSourceProps
 >(function ToggleEmojiButtonSource(
-  { content, variant, className, selected, size = 'm', ...rest },
+  { content, variant, className, selected, size = 'm', loading, ...rest },
   forwardedRef
 ) {
   return (
@@ -30,7 +31,23 @@ export const ToggleEmojiButtonSource = forwardRef<
         )}
         {...rest}
       >
-        {content}
+        <div
+          className={classNames(
+            styles.ButtonContent,
+            loading && styles.loading
+          )}
+        >
+          {content}
+        </div>
+
+        {loading && (
+          <div className={classNames(styles.ButtonLoader)}>
+            <AlphaSpinner
+              className={styles.Spinner}
+              variant="secondary"
+            />
+          </div>
+        )}
       </BaseButton>
     </Toggle.Root>
   )

From 5d7775ebf34397025a5c48fdb9fe022392738c09 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 18 Jun 2024 17:55:29 +0900
Subject: [PATCH 05/27] docs(toggle-emoji-button-group): add jsdoc

---
 .../ToggleEmojiButtonGroup.tsx                | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 27cc568902..c005ecd307 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -12,6 +12,23 @@ import * as Toggle from '@radix-ui/react-toggle'
 import styles from './ToggleEmojiButtonGroup.module.scss'
 import { AlphaSpinner } from '~/src/components/AlphaSpinner'
 
+/**
+ * Toggle Button that contains `Emoji` component inside.
+ * It should be used with `ToggleEmojiButtonGroup` component.
+ *
+ * @example
+ * ```tsx
+ * <ToggleEmojiButtonSource
+ *   content={
+ *     <Emoji
+ *       size="30"
+ *       imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
+ *       name="A"
+ *    />
+ *   }
+ * />
+ * ```
+ */
 export const ToggleEmojiButtonSource = forwardRef<
   HTMLButtonElement,
   ToggleEmojiButtonSourceProps
@@ -53,6 +70,19 @@ export const ToggleEmojiButtonSource = forwardRef<
   )
 })
 
+/**
+ * Component for grouping `ToggleEmojiButtonSource`.
+ *
+ * @example
+ * ```tsx
+ * <ToggleEmojiButtonGroup
+ *   fillDirection="horizontal"
+ * >
+ *   <ToggleEmojiButtonSource content={<Emoji />} />
+ *   <ToggleEmojiButtonSource content={<Emoji />} />
+ * </ToggleEmojiButtonGroup>
+ * ```
+ */
 export const ToggleEmojiButtonGroup = forwardRef<
   HTMLDivElement,
   ToggleEmojiButtonGroupProps

From 3e577cf1ea644f2abb0affa736ff4df974b6818f Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 19 Jun 2024 13:39:51 +0900
Subject: [PATCH 06/27] feat(toggle-emoji-button): calculate button size by js
 and add resizeObserver

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx   |   9 +-
 .../ToggleEmojiButtonGroup.module.scss        |   5 +-
 .../ToggleEmojiButtonGroup.tsx                | 113 +++++++++++++++---
 3 files changed, 103 insertions(+), 24 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index 7e51237430..8dc5d6cfb5 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
+import { Center } from '~/src/components/Center'
+import { Emoji } from '~/src/components/Emoji'
+
 import {
   ToggleEmojiButtonGroup,
   ToggleEmojiButtonSource,
@@ -10,8 +13,6 @@ import type {
   ToggleEmojiButtonGroupProps,
   ToggleEmojiButtonSourceProps,
 } from './ToggleEmojiButtonGroup.types'
-import { Emoji } from '~/src/components/Emoji'
-import { Center } from '~/src/components/Center'
 
 const meta: Meta<typeof ToggleEmojiButtonGroup> = {
   component: ToggleEmojiButtonGroup,
@@ -27,8 +28,8 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
   loading,
 }) => (
   <Center
-    width={400}
-    height={100}
+    width="25vw"
+    height="15vh"
     backgroundColor="bg-lounge"
   >
     <ToggleEmojiButtonGroup fillDirection={fillDirection}>
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index f2bee77519..aebb8f1f20 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -19,9 +19,8 @@
     height: 100%;
 
     & :is(.ToggleEmojiButtonSource) {
-      aspect-ratio: 1/1;
-      width: auto;
-      height: 100%;
+      max-width: 160px;
+      max-height: 160px;
     }
   }
 }
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index c005ecd307..5e84ca38af 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -1,21 +1,39 @@
-import React, { forwardRef } from 'react'
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
+import * as Toggle from '@radix-ui/react-toggle'
 import classNames from 'classnames'
 
+import useMergeRefs from '~/src/hooks/useMergeRefs'
+import { createContext } from '~/src/utils/react'
+
+import { AlphaSpinner } from '~/src/components/AlphaSpinner'
 import { BaseButton } from '~/src/components/BaseButton'
+
 import {
-  ToggleEmojiButtonGroupProps as ToggleEmojiButtonGroupProps,
-  ToggleEmojiButtonSourceProps,
+  type ToggleEmojiButtonGroupProps,
+  type ToggleEmojiButtonSourceProps,
 } from './ToggleEmojiButtonGroup.types'
-import * as Toggle from '@radix-ui/react-toggle'
 
 import styles from './ToggleEmojiButtonGroup.module.scss'
-import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+
+const [ToggleEmojiButtonProvider, useToggleEmojiButtonContext] = createContext<{
+  container: HTMLDivElement | null
+  childrenSize: number
+}>({
+  container: null,
+  childrenSize: -1,
+})
 
 /**
  * Toggle Button that contains `Emoji` component inside.
  * It should be used with `ToggleEmojiButtonGroup` component.
- *
  * @example
  * ```tsx
  * <ToggleEmojiButtonSource
@@ -36,10 +54,56 @@ export const ToggleEmojiButtonSource = forwardRef<
   { content, variant, className, selected, size = 'm', loading, ...rest },
   forwardedRef
 ) {
+  const { container, childrenSize } = useToggleEmojiButtonContext()
+
+  const ref = useRef<HTMLButtonElement | null>(null)
+  const mergedRefs = useMergeRefs(ref, forwardedRef)
+
+  const adjustButtonSizes = useCallback(() => {
+    if (!container || !ref.current) {
+      return
+    }
+
+    const containerWidth = container.clientWidth
+    const containerHeight = container.clientHeight
+    const size = Math.max(
+      Math.min(
+        (containerWidth - 6 * (childrenSize - 1)) / childrenSize,
+        containerHeight - 6
+      ),
+      54
+    )
+
+    ref.current.style.width = `${size}px`
+    ref.current.style.height = `${size}px`
+  }, [childrenSize, container])
+
+  useEffect(
+    function setResizeObserver() {
+      const resizeObserver = new ResizeObserver(() => {
+        adjustButtonSizes()
+      })
+
+      if (container) {
+        resizeObserver.observe(container)
+        container.addEventListener('resize', adjustButtonSizes)
+      }
+
+      return () => {
+        if (container) {
+          resizeObserver.unobserve(container)
+          container.removeEventListener('resize', adjustButtonSizes)
+        }
+      }
+    },
+    [adjustButtonSizes, container]
+  )
+
   return (
     <Toggle.Root asChild>
       <BaseButton
-        ref={forwardedRef}
+        ref={mergedRefs}
+        onResize={adjustButtonSizes}
         className={classNames(
           styles.ToggleEmojiButtonSource,
           styles[`size-${size}`],
@@ -72,7 +136,6 @@ export const ToggleEmojiButtonSource = forwardRef<
 
 /**
  * Component for grouping `ToggleEmojiButtonSource`.
- *
  * @example
  * ```tsx
  * <ToggleEmojiButtonGroup
@@ -87,18 +150,34 @@ export const ToggleEmojiButtonGroup = forwardRef<
   HTMLDivElement,
   ToggleEmojiButtonGroupProps
 >(function ToggleEmojiButtonGroup(
-  { fillDirection, className, ...rest },
+  { fillDirection, className, children, ...rest },
   forwardedRef
 ) {
+  const [ref, setRef] = useState<null | HTMLDivElement>(null)
+  const mergedRefs = useMergeRefs(setRef, forwardedRef)
+
   return (
-    <div
-      ref={forwardedRef}
-      className={classNames(
-        styles.ToggleEmojiButtonGroup,
-        fillDirection && styles[`fillDirection-${fillDirection}`],
-        className
+    <ToggleEmojiButtonProvider
+      value={useMemo(
+        () => ({
+          container: ref,
+          childrenSize: React.Children.count(children),
+        }),
+        [children, ref]
       )}
-      {...rest}
-    ></div>
+    >
+      <div
+        ref={mergedRefs}
+        id="container"
+        className={classNames(
+          styles.ToggleEmojiButtonGroup,
+          fillDirection && styles[`fillDirection-${fillDirection}`],
+          className
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    </ToggleEmojiButtonProvider>
   )
 })

From 9899b0369c1eeb2704212569e322421a8b6dec83 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 13:54:02 +0900
Subject: [PATCH 07/27] chore(toggle-emoji-button): stylelint

---
 .../ToggleEmojiButtonGroup.module.scss             | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index aebb8f1f20..d7f8473ea5 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -2,10 +2,11 @@
 
 .ToggleEmojiButtonGroup {
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 6px;
+  align-items: center;
+  justify-content: center;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   &:where(.fillDirection-horizontal) {
     width: 100%;
 
@@ -14,6 +15,7 @@
     }
   }
 
+  /* stylelint-disable-next-line selector-class-pattern */
   &:where(.fillDirection-all) {
     width: 100%;
     height: 100%;
@@ -26,12 +28,14 @@
 }
 
 .ToggleEmojiButtonSource {
+  position: relative;
+
   display: flex;
-  justify-content: center;
   align-items: center;
-  position: relative;
+  justify-content: center;
 
   padding: 12px;
+
   border-radius: var(--radius-12);
 
   &:where(.size-m) {
@@ -39,8 +43,8 @@
   }
 
   &:where(.variant-primary) {
-    box-shadow: var(--alpha-shadow-input-default);
     background-color: var(--alpha-color-bg-grey-lightest);
+    box-shadow: var(--alpha-shadow-input-default);
 
     &:where(&:hover) {
       background-color: var(--alpha-color-bg-grey-lighter);

From 394b649f5707b9ca25a99076d1d28da9897f5bbc Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 14:01:50 +0900
Subject: [PATCH 08/27] feat(toggle-emoji-button): remove magic number and
 assign as css var

---
 .../ToggleEmojiButtonGroup.module.scss        |  4 +-
 .../ToggleEmojiButtonGroup.tsx                | 37 ++++++++++++++++---
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index d7f8473ea5..829b994299 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -2,7 +2,7 @@
 
 .ToggleEmojiButtonGroup {
   display: flex;
-  gap: 6px;
+  gap: var(--b-toggle-emoji-button-group-gap);
   align-items: center;
   justify-content: center;
 
@@ -39,7 +39,7 @@
   border-radius: var(--radius-12);
 
   &:where(.size-m) {
-    @include dimension.square(54px);
+    @include dimension.square(var(--b-toggle-emoji-button-size));
   }
 
   &:where(.variant-primary) {
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 5e84ca38af..2b81fa99b9 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -1,4 +1,5 @@
 import React, {
+  type CSSProperties,
   forwardRef,
   useCallback,
   useEffect,
@@ -12,6 +13,7 @@ import classNames from 'classnames'
 
 import useMergeRefs from '~/src/hooks/useMergeRefs'
 import { createContext } from '~/src/utils/react'
+import { cssDimension } from '~/src/utils/style'
 
 import { AlphaSpinner } from '~/src/components/AlphaSpinner'
 import { BaseButton } from '~/src/components/BaseButton'
@@ -23,6 +25,9 @@ import {
 
 import styles from './ToggleEmojiButtonGroup.module.scss'
 
+const GAP = 6
+const SIZE = 54
+
 const [ToggleEmojiButtonProvider, useToggleEmojiButtonContext] = createContext<{
   container: HTMLDivElement | null
   childrenSize: number
@@ -51,7 +56,16 @@ export const ToggleEmojiButtonSource = forwardRef<
   HTMLButtonElement,
   ToggleEmojiButtonSourceProps
 >(function ToggleEmojiButtonSource(
-  { content, variant, className, selected, size = 'm', loading, ...rest },
+  {
+    content,
+    variant,
+    className,
+    selected,
+    size = 'm',
+    loading,
+    style,
+    ...rest
+  },
   forwardedRef
 ) {
   const { container, childrenSize } = useToggleEmojiButtonContext()
@@ -68,10 +82,10 @@ export const ToggleEmojiButtonSource = forwardRef<
     const containerHeight = container.clientHeight
     const size = Math.max(
       Math.min(
-        (containerWidth - 6 * (childrenSize - 1)) / childrenSize,
-        containerHeight - 6
+        (containerWidth - GAP * (childrenSize - 1)) / childrenSize,
+        containerHeight - GAP
       ),
-      54
+      SIZE
     )
 
     ref.current.style.width = `${size}px`
@@ -104,6 +118,12 @@ export const ToggleEmojiButtonSource = forwardRef<
       <BaseButton
         ref={mergedRefs}
         onResize={adjustButtonSizes}
+        style={
+          {
+            '--b-toggle-emoji-button-size': cssDimension(SIZE),
+            ...style,
+          } as CSSProperties
+        }
         className={classNames(
           styles.ToggleEmojiButtonSource,
           styles[`size-${size}`],
@@ -150,7 +170,7 @@ export const ToggleEmojiButtonGroup = forwardRef<
   HTMLDivElement,
   ToggleEmojiButtonGroupProps
 >(function ToggleEmojiButtonGroup(
-  { fillDirection, className, children, ...rest },
+  { fillDirection, className, children, style, ...rest },
   forwardedRef
 ) {
   const [ref, setRef] = useState<null | HTMLDivElement>(null)
@@ -168,7 +188,12 @@ export const ToggleEmojiButtonGroup = forwardRef<
     >
       <div
         ref={mergedRefs}
-        id="container"
+        style={
+          {
+            '--b-toggle-emoji-button-group-gap': cssDimension(GAP),
+            ...style,
+          } as CSSProperties
+        }
         className={classNames(
           styles.ToggleEmojiButtonGroup,
           fillDirection && styles[`fillDirection-${fillDirection}`],

From 344b0047c4b203958211a539b25e3da050a1a456 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 14:03:23 +0900
Subject: [PATCH 09/27] refactor(toggle-emoji-button): split context

---
 .../ToggleEmojiButtonGroup.tsx                      | 13 ++++---------
 .../ToggleEmojiButtonGroupContext.ts                | 10 ++++++++++
 2 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 2b81fa99b9..0ad5476e10 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -12,10 +12,13 @@ import * as Toggle from '@radix-ui/react-toggle'
 import classNames from 'classnames'
 
 import useMergeRefs from '~/src/hooks/useMergeRefs'
-import { createContext } from '~/src/utils/react'
 import { cssDimension } from '~/src/utils/style'
 
 import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+import {
+  ToggleEmojiButtonProvider,
+  useToggleEmojiButtonContext,
+} from '~/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext'
 import { BaseButton } from '~/src/components/BaseButton'
 
 import {
@@ -28,14 +31,6 @@ import styles from './ToggleEmojiButtonGroup.module.scss'
 const GAP = 6
 const SIZE = 54
 
-const [ToggleEmojiButtonProvider, useToggleEmojiButtonContext] = createContext<{
-  container: HTMLDivElement | null
-  childrenSize: number
-}>({
-  container: null,
-  childrenSize: -1,
-})
-
 /**
  * Toggle Button that contains `Emoji` component inside.
  * It should be used with `ToggleEmojiButtonGroup` component.
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts
new file mode 100644
index 0000000000..49d72cf394
--- /dev/null
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from '~/src/utils/react'
+
+export const [ToggleEmojiButtonProvider, useToggleEmojiButtonContext] =
+  createContext<{
+    container: HTMLDivElement | null
+    childrenSize: number
+  }>({
+    container: null,
+    childrenSize: -1,
+  })

From 5392f33d7c9f8cdaad388e02f397642f434695ef Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 14:38:12 +0900
Subject: [PATCH 10/27] refactor(toggle-emoji-button): split resize hook

---
 .../ToggleEmojiButtonGroup.tsx                | 72 ++++++-------------
 .../ToggleEmojiButtonGroupContext.ts          |  4 ++
 .../useResizeButton.ts                        | 62 ++++++++++++++++
 3 files changed, 89 insertions(+), 49 deletions(-)
 create mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 0ad5476e10..28bd40fced 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -1,8 +1,7 @@
 import React, {
   type CSSProperties,
+  type ReactEventHandler,
   forwardRef,
-  useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
@@ -19,6 +18,11 @@ import {
   ToggleEmojiButtonProvider,
   useToggleEmojiButtonContext,
 } from '~/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext'
+import {
+  EMOJI_BUTTON_GROUP_GAP,
+  EMOJI_BUTTON_SIZE,
+  useResizeButton,
+} from '~/src/components/AlphaToggleEmojiButtonGroup/useResizeButton'
 import { BaseButton } from '~/src/components/BaseButton'
 
 import {
@@ -28,9 +32,6 @@ import {
 
 import styles from './ToggleEmojiButtonGroup.module.scss'
 
-const GAP = 6
-const SIZE = 54
-
 /**
  * Toggle Button that contains `Emoji` component inside.
  * It should be used with `ToggleEmojiButtonGroup` component.
@@ -59,63 +60,33 @@ export const ToggleEmojiButtonSource = forwardRef<
     size = 'm',
     loading,
     style,
+    onResize,
     ...rest
   },
   forwardedRef
 ) {
-  const { container, childrenSize } = useToggleEmojiButtonContext()
-
-  const ref = useRef<HTMLButtonElement | null>(null)
+  const ref = useRef<HTMLButtonElement>(null)
   const mergedRefs = useMergeRefs(ref, forwardedRef)
+  const { fillDirection } = useToggleEmojiButtonContext()
 
-  const adjustButtonSizes = useCallback(() => {
-    if (!container || !ref.current) {
-      return
-    }
-
-    const containerWidth = container.clientWidth
-    const containerHeight = container.clientHeight
-    const size = Math.max(
-      Math.min(
-        (containerWidth - GAP * (childrenSize - 1)) / childrenSize,
-        containerHeight - GAP
-      ),
-      SIZE
-    )
+  const { adjustButtonSize } = useResizeButton({ button: ref.current })
 
-    ref.current.style.width = `${size}px`
-    ref.current.style.height = `${size}px`
-  }, [childrenSize, container])
+  const handleResize: ReactEventHandler<HTMLButtonElement> = (e) => {
+    onResize?.(e)
 
-  useEffect(
-    function setResizeObserver() {
-      const resizeObserver = new ResizeObserver(() => {
-        adjustButtonSizes()
-      })
-
-      if (container) {
-        resizeObserver.observe(container)
-        container.addEventListener('resize', adjustButtonSizes)
-      }
-
-      return () => {
-        if (container) {
-          resizeObserver.unobserve(container)
-          container.removeEventListener('resize', adjustButtonSizes)
-        }
-      }
-    },
-    [adjustButtonSizes, container]
-  )
+    if (fillDirection === 'all') {
+      adjustButtonSize()
+    }
+  }
 
   return (
     <Toggle.Root asChild>
       <BaseButton
         ref={mergedRefs}
-        onResize={adjustButtonSizes}
+        onResize={handleResize}
         style={
           {
-            '--b-toggle-emoji-button-size': cssDimension(SIZE),
+            '--b-toggle-emoji-button-size': cssDimension(EMOJI_BUTTON_SIZE),
             ...style,
           } as CSSProperties
         }
@@ -176,16 +147,19 @@ export const ToggleEmojiButtonGroup = forwardRef<
       value={useMemo(
         () => ({
           container: ref,
+          fillDirection,
           childrenSize: React.Children.count(children),
         }),
-        [children, ref]
+        [children, fillDirection, ref]
       )}
     >
       <div
         ref={mergedRefs}
         style={
           {
-            '--b-toggle-emoji-button-group-gap': cssDimension(GAP),
+            '--b-toggle-emoji-button-group-gap': cssDimension(
+              EMOJI_BUTTON_GROUP_GAP
+            ),
             ...style,
           } as CSSProperties
         }
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts
index 49d72cf394..764444e0f4 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts
@@ -1,10 +1,14 @@
 import { createContext } from '~/src/utils/react'
 
+import { type ToggleEmojiButtonGroupProps } from '~/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types'
+
 export const [ToggleEmojiButtonProvider, useToggleEmojiButtonContext] =
   createContext<{
     container: HTMLDivElement | null
     childrenSize: number
+    fillDirection: ToggleEmojiButtonGroupProps['fillDirection']
   }>({
     container: null,
     childrenSize: -1,
+    fillDirection: undefined,
   })
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
new file mode 100644
index 0000000000..f5faf0efc8
--- /dev/null
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
@@ -0,0 +1,62 @@
+import { useCallback, useEffect } from 'react'
+
+import { useToggleEmojiButtonContext } from '~/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext'
+
+export const EMOJI_BUTTON_GROUP_GAP = 6
+export const EMOJI_BUTTON_SIZE = 54
+
+interface UseResizeButtonProps {
+  button: HTMLButtonElement | null
+}
+
+export function useResizeButton({ button }: UseResizeButtonProps) {
+  const { container, childrenSize, fillDirection } =
+    useToggleEmojiButtonContext()
+
+  const adjustButtonSize = useCallback(() => {
+    if (!container || !button || fillDirection !== 'all') {
+      return
+    }
+
+    const containerWidth = container.clientWidth
+    const containerHeight = container.clientHeight
+    const size = Math.max(
+      Math.min(
+        (containerWidth - EMOJI_BUTTON_GROUP_GAP * (childrenSize - 1)) /
+          childrenSize,
+        containerHeight - EMOJI_BUTTON_GROUP_GAP
+      ),
+      EMOJI_BUTTON_SIZE
+    )
+
+    button.style.width = `${size}px`
+    button.style.height = `${size}px`
+  }, [button, childrenSize, container, fillDirection])
+
+  useEffect(
+    function setResizeObserver() {
+      if (fillDirection !== 'all') {
+        return
+      }
+
+      const resizeObserver = new ResizeObserver(() => {
+        adjustButtonSize()
+      })
+
+      if (container) {
+        resizeObserver.observe(container)
+        container.addEventListener('resize', adjustButtonSize)
+      }
+
+      return () => {
+        if (container) {
+          resizeObserver.unobserve(container)
+          container.removeEventListener('resize', adjustButtonSize)
+        }
+      }
+    },
+    [adjustButtonSize, container, fillDirection]
+  )
+
+  return { adjustButtonSize }
+}

From 659c59073548fc81f6efb47dd762f481666cb9cd Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 14:43:13 +0900
Subject: [PATCH 11/27] chore(toggle-emoji-button): reorder export, set
 fillDirection to horizontal in storybook

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx                     | 2 +-
 packages/bezier-react/src/index.ts                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index 8dc5d6cfb5..87c29900b3 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -63,7 +63,7 @@ export const Primary = {
   render: Template,
 
   args: {
-    fillDirection: 'all',
+    fillDirection: 'horizontal',
     variant: 'primary',
     loading: false,
   },
diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts
index ee3cc11ea3..42e2b7c316 100644
--- a/packages/bezier-react/src/index.ts
+++ b/packages/bezier-react/src/index.ts
@@ -8,7 +8,6 @@ export { tokens } from '@channel.io/bezier-tokens'
 export * from '~/src/components/AlphaAvatar'
 export * from '~/src/components/AlphaAvatarGroup'
 export * from '~/src/components/AlphaButton'
-export * from '~/src/components/AlphaToggleEmojiButton'
 export * from '~/src/components/AlphaDialogPrimitive'
 export * from '~/src/components/AlphaFloatingButton'
 export * from '~/src/components/AlphaFloatingIconButton'
@@ -17,6 +16,7 @@ export * from '~/src/components/AlphaLoader'
 export * from '~/src/components/AlphaStatusBadge'
 export * from '~/src/components/AlphaToggleButton'
 export * from '~/src/components/AlphaToggleButtonGroup'
+export * from '~/src/components/AlphaToggleEmojiButtonGroup'
 export * from '~/src/components/AlphaTooltipPrimitive'
 export * from '~/src/components/AppProvider'
 export * from '~/src/components/AutoFocus'

From e52d5b9cc98cc8daee54ad96bc71d1729390bbd1 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 15:26:12 +0900
Subject: [PATCH 12/27] chore(changeset): add

---
 .changeset/wild-ducks-nail.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wild-ducks-nail.md

diff --git a/.changeset/wild-ducks-nail.md b/.changeset/wild-ducks-nail.md
new file mode 100644
index 0000000000..49483acc9f
--- /dev/null
+++ b/.changeset/wild-ducks-nail.md
@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Add `ToggleEmojiButtonGroup` and `ToggleEmojiButtonSource` component.

From 20c98bb574d9cbfdfa29884a3e2917bf56931415 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 16:22:30 +0900
Subject: [PATCH 13/27] feat(toggle-emoji-button): fix emoji sie of content to
 30

---
 .../ToggleEmojiButtonGroup.tsx                  | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 28bd40fced..1b8801ce63 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -1,6 +1,7 @@
 import React, {
   type CSSProperties,
   type ReactEventHandler,
+  type ReactNode,
   forwardRef,
   useMemo,
   useRef,
@@ -24,6 +25,7 @@ import {
   useResizeButton,
 } from '~/src/components/AlphaToggleEmojiButtonGroup/useResizeButton'
 import { BaseButton } from '~/src/components/BaseButton'
+import { type EmojiProps } from '~/src/components/Emoji'
 
 import {
   type ToggleEmojiButtonGroupProps,
@@ -32,15 +34,16 @@ import {
 
 import styles from './ToggleEmojiButtonGroup.module.scss'
 
+const EMOJI_SIZE = '30'
+
 /**
- * Toggle Button that contains `Emoji` component inside.
+ * Toggle Button that contains `Emoji` component with size fixed to 30.
  * It should be used with `ToggleEmojiButtonGroup` component.
  * @example
  * ```tsx
  * <ToggleEmojiButtonSource
  *   content={
  *     <Emoji
- *       size="30"
  *       imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
  *       name="A"
  *    />
@@ -79,6 +82,14 @@ export const ToggleEmojiButtonSource = forwardRef<
     }
   }
 
+  const renderEmojiWithFixedSize = (content: ReactNode) => {
+    if (!React.isValidElement<EmojiProps>(content)) {
+      return null
+    }
+
+    return React.cloneElement(content, { ...content.props, size: EMOJI_SIZE })
+  }
+
   return (
     <Toggle.Root asChild>
       <BaseButton
@@ -104,7 +115,7 @@ export const ToggleEmojiButtonSource = forwardRef<
             loading && styles.loading
           )}
         >
-          {content}
+          {renderEmojiWithFixedSize(content)}
         </div>
 
         {loading && (

From 9ecd6e33539f1fac9c68b22ed7e192eaa3c0e6bb Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Fri, 21 Jun 2024 16:31:59 +0900
Subject: [PATCH 14/27] refactor(toggle-emoji-button): refer to emoji size as
 css variabe

---
 .../ToggleEmojiButtonGroup.module.scss                         | 3 +--
 .../AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx     | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index 829b994299..1cd6c30a52 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -87,8 +87,7 @@
     justify-content: center;
 
     & :is(.Spinner) {
-      --b-emoji-size: 30px;
-      @include dimension.square(var(--b-emoji-size));
+      @include dimension.square(var(--b-toggle-emoji-button-emoji-size));
     }
   }
 }
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 1b8801ce63..4e03bd40aa 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -98,6 +98,7 @@ export const ToggleEmojiButtonSource = forwardRef<
         style={
           {
             '--b-toggle-emoji-button-size': cssDimension(EMOJI_BUTTON_SIZE),
+            '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),
             ...style,
           } as CSSProperties
         }

From 2b92d46bfe35bdeb85a3c13649068458e15c8c05 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 29 Oct 2024 18:06:38 +0900
Subject: [PATCH 15/27] feat(toggle-emoji-button): rename AlphaSpinner to
 AlphaLoader

---
 .../ToggleEmojiButtonGroup.module.scss                     | 2 +-
 .../AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index 1cd6c30a52..0d32987b65 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -86,7 +86,7 @@
     align-items: center;
     justify-content: center;
 
-    & :is(.Spinner) {
+    & :is(.Loader) {
       @include dimension.square(var(--b-toggle-emoji-button-emoji-size));
     }
   }
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 4e03bd40aa..a361f3a888 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -14,7 +14,7 @@ import classNames from 'classnames'
 import useMergeRefs from '~/src/hooks/useMergeRefs'
 import { cssDimension } from '~/src/utils/style'
 
-import { AlphaSpinner } from '~/src/components/AlphaSpinner'
+import { AlphaLoader } from '~/src/components/AlphaLoader'
 import {
   ToggleEmojiButtonProvider,
   useToggleEmojiButtonContext,
@@ -121,8 +121,9 @@ export const ToggleEmojiButtonSource = forwardRef<
 
         {loading && (
           <div className={classNames(styles.ButtonLoader)}>
-            <AlphaSpinner
-              className={styles.Spinner}
+            <AlphaLoader
+              className={styles.Loader}
+              size="s"
               variant="secondary"
             />
           </div>

From 20dbb2a0cc590d79cd0dcbeada45e183be4fdcb7 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 29 Oct 2024 18:07:23 +0900
Subject: [PATCH 16/27] feat(toggle-emoji-button): replace content props with
 name props

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx   | 17 ++--------------
 .../ToggleEmojiButtonGroup.tsx                | 20 +++++++------------
 .../ToggleEmojiButtonGroup.types.ts           |  6 ++----
 3 files changed, 11 insertions(+), 32 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index 87c29900b3..5f366679de 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
 import { Center } from '~/src/components/Center'
-import { Emoji } from '~/src/components/Emoji'
 
 import {
   ToggleEmojiButtonGroup,
@@ -36,24 +35,12 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
       <ToggleEmojiButtonSource
         variant={variant}
         loading={loading}
-        content={
-          <Emoji
-            name="channel"
-            size="30"
-            imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/blush.png"
-          />
-        }
+        name="blush"
       />
       <ToggleEmojiButtonSource
         variant={variant}
         loading={loading}
-        content={
-          <Emoji
-            name="channel"
-            size="30"
-            imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/blush.png"
-          />
-        }
+        name="blush"
       />
     </ToggleEmojiButtonGroup>
   </Center>
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index a361f3a888..f2735ea47e 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -1,7 +1,6 @@
 import React, {
   type CSSProperties,
   type ReactEventHandler,
-  type ReactNode,
   forwardRef,
   useMemo,
   useRef,
@@ -25,7 +24,7 @@ import {
   useResizeButton,
 } from '~/src/components/AlphaToggleEmojiButtonGroup/useResizeButton'
 import { BaseButton } from '~/src/components/BaseButton'
-import { type EmojiProps } from '~/src/components/Emoji'
+import { Emoji } from '~/src/components/Emoji'
 
 import {
   type ToggleEmojiButtonGroupProps,
@@ -34,7 +33,7 @@ import {
 
 import styles from './ToggleEmojiButtonGroup.module.scss'
 
-const EMOJI_SIZE = '30'
+const EMOJI_SIZE = 30
 
 /**
  * Toggle Button that contains `Emoji` component with size fixed to 30.
@@ -56,7 +55,7 @@ export const ToggleEmojiButtonSource = forwardRef<
   ToggleEmojiButtonSourceProps
 >(function ToggleEmojiButtonSource(
   {
-    content,
+    name,
     variant,
     className,
     selected,
@@ -82,14 +81,6 @@ export const ToggleEmojiButtonSource = forwardRef<
     }
   }
 
-  const renderEmojiWithFixedSize = (content: ReactNode) => {
-    if (!React.isValidElement<EmojiProps>(content)) {
-      return null
-    }
-
-    return React.cloneElement(content, { ...content.props, size: EMOJI_SIZE })
-  }
-
   return (
     <Toggle.Root asChild>
       <BaseButton
@@ -116,7 +107,10 @@ export const ToggleEmojiButtonSource = forwardRef<
             loading && styles.loading
           )}
         >
-          {renderEmojiWithFixedSize(content)}
+          <Emoji
+            name={name}
+            size={`${EMOJI_SIZE}`}
+          />
         </div>
 
         {loading && (
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
index afd500ec9f..4a9b7e2f49 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
@@ -1,5 +1,3 @@
-import { type ReactNode } from 'react'
-
 import { type BezierComponentProps, type SizeProps } from '~/src/types/props'
 
 interface ToggleEmojiButtonSourceOwnProps {
@@ -22,9 +20,9 @@ interface ToggleEmojiButtonSourceOwnProps {
   selected?: boolean
 
   /**
-   * Emoji in the button.
+   * Name of emoji in the button.
    */
-  content: ReactNode
+  name: string
 }
 
 interface ToggleEmojiButtonGroupOwnProps {

From 4e115ba96043dc53eb19daae3ed948455afffc7e Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 30 Oct 2024 10:44:39 +0900
Subject: [PATCH 17/27] feat(toggle-emoji-button): only allow single type

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx   | 52 ++++++++------
 .../ToggleEmojiButtonGroup.tsx                | 72 +++++++++++--------
 .../ToggleEmojiButtonGroup.types.ts           | 14 ++++
 3 files changed, 86 insertions(+), 52 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index 5f366679de..b3f9708302 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
@@ -25,26 +25,36 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
   fillDirection,
   variant,
   loading,
-}) => (
-  <Center
-    width="25vw"
-    height="15vh"
-    backgroundColor="bg-lounge"
-  >
-    <ToggleEmojiButtonGroup fillDirection={fillDirection}>
-      <ToggleEmojiButtonSource
-        variant={variant}
-        loading={loading}
-        name="blush"
-      />
-      <ToggleEmojiButtonSource
-        variant={variant}
-        loading={loading}
-        name="blush"
-      />
-    </ToggleEmojiButtonGroup>
-  </Center>
-)
+}) => {
+  const [value, setValue] = useState('blush')
+
+  return (
+    <Center
+      width="25vw"
+      height="15vh"
+      backgroundColor="bg-lounge"
+    >
+      <ToggleEmojiButtonGroup
+        value={value}
+        onValueChange={setValue}
+        fillDirection={fillDirection}
+      >
+        <ToggleEmojiButtonSource
+          variant={variant}
+          loading={loading}
+          value="blush"
+          name="blush"
+        />
+        <ToggleEmojiButtonSource
+          variant={variant}
+          loading={loading}
+          value="grinning"
+          name="grinning"
+        />
+      </ToggleEmojiButtonGroup>
+    </Center>
+  )
+}
 
 export const Primary = {
   render: Template,
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index f2735ea47e..2e30e3f5bb 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -7,7 +7,7 @@ import React, {
   useState,
 } from 'react'
 
-import * as Toggle from '@radix-ui/react-toggle'
+import * as ToggleGroup from '@radix-ui/react-toggle-group'
 import classNames from 'classnames'
 
 import useMergeRefs from '~/src/hooks/useMergeRefs'
@@ -62,6 +62,7 @@ export const ToggleEmojiButtonSource = forwardRef<
     size = 'm',
     loading,
     style,
+    value,
     onResize,
     ...rest
   },
@@ -82,7 +83,10 @@ export const ToggleEmojiButtonSource = forwardRef<
   }
 
   return (
-    <Toggle.Root asChild>
+    <ToggleGroup.Item
+      value={value}
+      asChild
+    >
       <BaseButton
         ref={mergedRefs}
         onResize={handleResize}
@@ -123,7 +127,7 @@ export const ToggleEmojiButtonSource = forwardRef<
           </div>
         )}
       </BaseButton>
-    </Toggle.Root>
+    </ToggleGroup.Item>
   )
 })
 
@@ -143,42 +147,48 @@ export const ToggleEmojiButtonGroup = forwardRef<
   HTMLDivElement,
   ToggleEmojiButtonGroupProps
 >(function ToggleEmojiButtonGroup(
-  { fillDirection, className, children, style, ...rest },
+  { fillDirection, value, className, children, style, onValueChange, ...rest },
   forwardedRef
 ) {
   const [ref, setRef] = useState<null | HTMLDivElement>(null)
   const mergedRefs = useMergeRefs(setRef, forwardedRef)
 
   return (
-    <ToggleEmojiButtonProvider
-      value={useMemo(
-        () => ({
-          container: ref,
-          fillDirection,
-          childrenSize: React.Children.count(children),
-        }),
-        [children, fillDirection, ref]
-      )}
+    <ToggleGroup.Root
+      type="single"
+      onValueChange={onValueChange}
+      value={value}
     >
-      <div
-        ref={mergedRefs}
-        style={
-          {
-            '--b-toggle-emoji-button-group-gap': cssDimension(
-              EMOJI_BUTTON_GROUP_GAP
-            ),
-            ...style,
-          } as CSSProperties
-        }
-        className={classNames(
-          styles.ToggleEmojiButtonGroup,
-          fillDirection && styles[`fillDirection-${fillDirection}`],
-          className
+      <ToggleEmojiButtonProvider
+        value={useMemo(
+          () => ({
+            container: ref,
+            fillDirection,
+            childrenSize: React.Children.count(children),
+          }),
+          [children, fillDirection, ref]
         )}
-        {...rest}
       >
-        {children}
-      </div>
-    </ToggleEmojiButtonProvider>
+        <div
+          ref={mergedRefs}
+          style={
+            {
+              '--b-toggle-emoji-button-group-gap': cssDimension(
+                EMOJI_BUTTON_GROUP_GAP
+              ),
+              ...style,
+            } as CSSProperties
+          }
+          className={classNames(
+            styles.ToggleEmojiButtonGroup,
+            fillDirection && styles[`fillDirection-${fillDirection}`],
+            className
+          )}
+          {...rest}
+        >
+          {children}
+        </div>
+      </ToggleEmojiButtonProvider>
+    </ToggleGroup.Root>
   )
 })
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
index 4a9b7e2f49..ea9fbec351 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
@@ -23,6 +23,11 @@ interface ToggleEmojiButtonSourceOwnProps {
    * Name of emoji in the button.
    */
   name: string
+
+  /**
+   * Controlled value of the button.
+   */
+  value: string
 }
 
 interface ToggleEmojiButtonGroupOwnProps {
@@ -31,6 +36,15 @@ interface ToggleEmojiButtonGroupOwnProps {
    * @default undefined
    */
   fillDirection?: 'horizontal' | 'all'
+  /**
+   * Controlled value of the button item to select.
+   * should be used with `onValueChange`.
+   */
+  value: string
+  /**
+   * Event handler called when the value changes.
+   */
+  onValueChange?: (value: string) => void
 }
 
 export interface ToggleEmojiButtonGroupProps

From fc971b774c686b49c9df60f14303da12bcb3461c Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 30 Oct 2024 10:45:12 +0900
Subject: [PATCH 18/27] chore(toggle-emoji-button): rm new line, add figma link

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx                 | 6 ++++++
 .../ToggleEmojiButtonGroup.types.ts                         | 4 ----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index b3f9708302..23b62c5b0b 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -64,4 +64,10 @@ export const Primary = {
     variant: 'primary',
     loading: false,
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=425-281&t=ktusTVyr8cD3cTlt-1',
+    },
+  },
 } satisfies StoryObj<ToggleButtonCompositionType>
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
index ea9fbec351..856a73f9c2 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
@@ -6,24 +6,20 @@ interface ToggleEmojiButtonSourceOwnProps {
    * @default 'primary'
    */
   variant: 'primary' | 'secondary'
-
   /**
    * If `loading` is true, spinner will be shown, replacing the content.
    * @default false
    */
   loading?: boolean
-
   /**
    * Props that shows whether the button is selected.
    * @default false
    */
   selected?: boolean
-
   /**
    * Name of emoji in the button.
    */
   name: string
-
   /**
    * Controlled value of the button.
    */

From e493b5a8e85ffa02e52b344b1016d271695a4f1c Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 30 Oct 2024 10:56:18 +0900
Subject: [PATCH 19/27] feat(toggle-emoji-button): support uncontrolled

---
 .../AlphaToggleEmojiButtonGroup.stories.tsx          |  7 ++-----
 .../ToggleEmojiButtonGroup.tsx                       | 12 +++++++++++-
 .../ToggleEmojiButtonGroup.types.ts                  |  9 +++++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index 23b62c5b0b..adb43c7901 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
@@ -26,8 +26,6 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
   variant,
   loading,
 }) => {
-  const [value, setValue] = useState('blush')
-
   return (
     <Center
       width="25vw"
@@ -35,8 +33,7 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
       backgroundColor="bg-lounge"
     >
       <ToggleEmojiButtonGroup
-        value={value}
-        onValueChange={setValue}
+        defaultValue="blush"
         fillDirection={fillDirection}
       >
         <ToggleEmojiButtonSource
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 2e30e3f5bb..5b97983793 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -147,7 +147,16 @@ export const ToggleEmojiButtonGroup = forwardRef<
   HTMLDivElement,
   ToggleEmojiButtonGroupProps
 >(function ToggleEmojiButtonGroup(
-  { fillDirection, value, className, children, style, onValueChange, ...rest },
+  {
+    fillDirection,
+    value,
+    className,
+    defaultValue,
+    children,
+    style,
+    onValueChange,
+    ...rest
+  },
   forwardedRef
 ) {
   const [ref, setRef] = useState<null | HTMLDivElement>(null)
@@ -156,6 +165,7 @@ export const ToggleEmojiButtonGroup = forwardRef<
   return (
     <ToggleGroup.Root
       type="single"
+      defaultValue={defaultValue}
       onValueChange={onValueChange}
       value={value}
     >
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
index 856a73f9c2..88d7338834 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
@@ -36,7 +36,12 @@ interface ToggleEmojiButtonGroupOwnProps {
    * Controlled value of the button item to select.
    * should be used with `onValueChange`.
    */
-  value: string
+  value?: string
+  /**
+   * The value of the button to show as selected when initially rendered.
+   * Use when you do not need to control the state of the items.
+   */
+  defaultValue?: string
   /**
    * Event handler called when the value changes.
    */
@@ -44,7 +49,7 @@ interface ToggleEmojiButtonGroupOwnProps {
 }
 
 export interface ToggleEmojiButtonGroupProps
-  extends BezierComponentProps<'div'>,
+  extends Omit<BezierComponentProps<'div'>, 'defaultValue'>,
     ToggleEmojiButtonGroupOwnProps {}
 
 export interface ToggleEmojiButtonSourceProps

From 2f1e503f02a22ff3275fae3fe0f79ae9a6c98f4c Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 11:33:07 +0900
Subject: [PATCH 20/27] feat(toggle-emoji-button): rm redundant div

---
 .../ToggleEmojiButtonGroup.tsx                | 67 +++++++++----------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 5b97983793..78bd6ef600 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -154,6 +154,7 @@ export const ToggleEmojiButtonGroup = forwardRef<
     defaultValue,
     children,
     style,
+    dir,
     onValueChange,
     ...rest
   },
@@ -163,42 +164,40 @@ export const ToggleEmojiButtonGroup = forwardRef<
   const mergedRefs = useMergeRefs(setRef, forwardedRef)
 
   return (
-    <ToggleGroup.Root
-      type="single"
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-      value={value}
+    <ToggleEmojiButtonProvider
+      value={useMemo(
+        () => ({
+          container: ref,
+          fillDirection,
+          childrenSize: React.Children.count(children),
+        }),
+        [children, fillDirection, ref]
+      )}
     >
-      <ToggleEmojiButtonProvider
-        value={useMemo(
-          () => ({
-            container: ref,
-            fillDirection,
-            childrenSize: React.Children.count(children),
-          }),
-          [children, fillDirection, ref]
+      <ToggleGroup.Root
+        type="single"
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        value={value}
+        ref={mergedRefs}
+        style={
+          {
+            '--b-toggle-emoji-button-group-gap': cssDimension(
+              EMOJI_BUTTON_GROUP_GAP
+            ),
+            ...style,
+          } as CSSProperties
+        }
+        className={classNames(
+          styles.ToggleEmojiButtonGroup,
+          fillDirection && styles[`fillDirection-${fillDirection}`],
+          className
         )}
+        dir={dir as 'ltr' | 'rtl'}
+        {...rest}
       >
-        <div
-          ref={mergedRefs}
-          style={
-            {
-              '--b-toggle-emoji-button-group-gap': cssDimension(
-                EMOJI_BUTTON_GROUP_GAP
-              ),
-              ...style,
-            } as CSSProperties
-          }
-          className={classNames(
-            styles.ToggleEmojiButtonGroup,
-            fillDirection && styles[`fillDirection-${fillDirection}`],
-            className
-          )}
-          {...rest}
-        >
-          {children}
-        </div>
-      </ToggleEmojiButtonProvider>
-    </ToggleGroup.Root>
+        {children}
+      </ToggleGroup.Root>
+    </ToggleEmojiButtonProvider>
   )
 })

From d7967fe5e8e3b82f78c910571d8210844ef6392b Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 12:09:23 +0900
Subject: [PATCH 21/27] refactor(toggle-emoji-button): remove context, set css
 variable in container instead

---
 .../ToggleEmojiButtonGroup.tsx                | 104 ++++++------------
 .../ToggleEmojiButtonGroupContext.ts          |  14 ---
 .../useResizeButton.ts                        |  44 ++++----
 3 files changed, 56 insertions(+), 106 deletions(-)
 delete mode 100644 packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 78bd6ef600..b29a07e00f 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -1,11 +1,4 @@
-import React, {
-  type CSSProperties,
-  type ReactEventHandler,
-  forwardRef,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { type CSSProperties, forwardRef, useState } from 'react'
 
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
 import classNames from 'classnames'
@@ -14,13 +7,8 @@ import useMergeRefs from '~/src/hooks/useMergeRefs'
 import { cssDimension } from '~/src/utils/style'
 
 import { AlphaLoader } from '~/src/components/AlphaLoader'
-import {
-  ToggleEmojiButtonProvider,
-  useToggleEmojiButtonContext,
-} from '~/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext'
 import {
   EMOJI_BUTTON_GROUP_GAP,
-  EMOJI_BUTTON_SIZE,
   useResizeButton,
 } from '~/src/components/AlphaToggleEmojiButtonGroup/useResizeButton'
 import { BaseButton } from '~/src/components/BaseButton'
@@ -61,42 +49,19 @@ export const ToggleEmojiButtonSource = forwardRef<
     selected,
     size = 'm',
     loading,
-    style,
     value,
     onResize,
     ...rest
   },
   forwardedRef
 ) {
-  const ref = useRef<HTMLButtonElement>(null)
-  const mergedRefs = useMergeRefs(ref, forwardedRef)
-  const { fillDirection } = useToggleEmojiButtonContext()
-
-  const { adjustButtonSize } = useResizeButton({ button: ref.current })
-
-  const handleResize: ReactEventHandler<HTMLButtonElement> = (e) => {
-    onResize?.(e)
-
-    if (fillDirection === 'all') {
-      adjustButtonSize()
-    }
-  }
-
   return (
     <ToggleGroup.Item
       value={value}
       asChild
     >
       <BaseButton
-        ref={mergedRefs}
-        onResize={handleResize}
-        style={
-          {
-            '--b-toggle-emoji-button-size': cssDimension(EMOJI_BUTTON_SIZE),
-            '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),
-            ...style,
-          } as CSSProperties
-        }
+        ref={forwardedRef}
         className={classNames(
           styles.ToggleEmojiButtonSource,
           styles[`size-${size}`],
@@ -162,42 +127,41 @@ export const ToggleEmojiButtonGroup = forwardRef<
 ) {
   const [ref, setRef] = useState<null | HTMLDivElement>(null)
   const mergedRefs = useMergeRefs(setRef, forwardedRef)
+  const shouldResizeButton = fillDirection === 'all'
+  const buttonSize = useResizeButton({
+    container: ref,
+    enable: shouldResizeButton,
+    childrenSize: React.Children.count(children),
+  })
 
   return (
-    <ToggleEmojiButtonProvider
-      value={useMemo(
-        () => ({
-          container: ref,
-          fillDirection,
-          childrenSize: React.Children.count(children),
-        }),
-        [children, fillDirection, ref]
+    <ToggleGroup.Root
+      type="single"
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      value={value}
+      ref={mergedRefs}
+      style={
+        {
+          '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),
+          '--b-toggle-emoji-button-size': shouldResizeButton
+            ? cssDimension(buttonSize)
+            : undefined,
+          '--b-toggle-emoji-button-group-gap': cssDimension(
+            EMOJI_BUTTON_GROUP_GAP
+          ),
+          ...style,
+        } as CSSProperties
+      }
+      className={classNames(
+        styles.ToggleEmojiButtonGroup,
+        fillDirection && styles[`fillDirection-${fillDirection}`],
+        className
       )}
+      dir={dir as 'ltr' | 'rtl'}
+      {...rest}
     >
-      <ToggleGroup.Root
-        type="single"
-        defaultValue={defaultValue}
-        onValueChange={onValueChange}
-        value={value}
-        ref={mergedRefs}
-        style={
-          {
-            '--b-toggle-emoji-button-group-gap': cssDimension(
-              EMOJI_BUTTON_GROUP_GAP
-            ),
-            ...style,
-          } as CSSProperties
-        }
-        className={classNames(
-          styles.ToggleEmojiButtonGroup,
-          fillDirection && styles[`fillDirection-${fillDirection}`],
-          className
-        )}
-        dir={dir as 'ltr' | 'rtl'}
-        {...rest}
-      >
-        {children}
-      </ToggleGroup.Root>
-    </ToggleEmojiButtonProvider>
+      {children}
+    </ToggleGroup.Root>
   )
 })
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts
deleted file mode 100644
index 764444e0f4..0000000000
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext } from '~/src/utils/react'
-
-import { type ToggleEmojiButtonGroupProps } from '~/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types'
-
-export const [ToggleEmojiButtonProvider, useToggleEmojiButtonContext] =
-  createContext<{
-    container: HTMLDivElement | null
-    childrenSize: number
-    fillDirection: ToggleEmojiButtonGroupProps['fillDirection']
-  }>({
-    container: null,
-    childrenSize: -1,
-    fillDirection: undefined,
-  })
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
index f5faf0efc8..49e9cfa0a1 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
@@ -1,20 +1,23 @@
-import { useCallback, useEffect } from 'react'
-
-import { useToggleEmojiButtonContext } from '~/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroupContext'
+import { useCallback, useEffect, useState } from 'react'
 
 export const EMOJI_BUTTON_GROUP_GAP = 6
 export const EMOJI_BUTTON_SIZE = 54
 
 interface UseResizeButtonProps {
-  button: HTMLButtonElement | null
+  container: HTMLDivElement | null
+  enable: boolean
+  childrenSize: number
 }
 
-export function useResizeButton({ button }: UseResizeButtonProps) {
-  const { container, childrenSize, fillDirection } =
-    useToggleEmojiButtonContext()
+export function useResizeButton({
+  container,
+  enable,
+  childrenSize,
+}: UseResizeButtonProps) {
+  const [buttonSize, setButtonSize] = useState(EMOJI_BUTTON_SIZE)
 
   const adjustButtonSize = useCallback(() => {
-    if (!container || !button || fillDirection !== 'all') {
+    if (!container || !enable) {
       return
     }
 
@@ -29,34 +32,31 @@ export function useResizeButton({ button }: UseResizeButtonProps) {
       EMOJI_BUTTON_SIZE
     )
 
-    button.style.width = `${size}px`
-    button.style.height = `${size}px`
-  }, [button, childrenSize, container, fillDirection])
+    setButtonSize(size)
+  }, [childrenSize, container, enable])
 
   useEffect(
     function setResizeObserver() {
-      if (fillDirection !== 'all') {
-        return
-      }
+      let resizeObserver: ResizeObserver | null = null
 
-      const resizeObserver = new ResizeObserver(() => {
-        adjustButtonSize()
-      })
+      if (enable && container) {
+        resizeObserver = new ResizeObserver(() => {
+          adjustButtonSize()
+        })
 
-      if (container) {
         resizeObserver.observe(container)
         container.addEventListener('resize', adjustButtonSize)
       }
 
       return () => {
         if (container) {
-          resizeObserver.unobserve(container)
-          container.removeEventListener('resize', adjustButtonSize)
+          resizeObserver?.unobserve(container)
+          container?.removeEventListener('resize', adjustButtonSize)
         }
       }
     },
-    [adjustButtonSize, container, fillDirection]
+    [adjustButtonSize, container, enable]
   )
 
-  return { adjustButtonSize }
+  return buttonSize
 }

From d4fb0323c012edf6ad4bd30bc816092a56661e00 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 12:10:06 +0900
Subject: [PATCH 22/27] refactor(toggle-emoji-button): rename variable

---
 .../ToggleEmojiButtonGroup.tsx                         |  2 +-
 .../AlphaToggleEmojiButtonGroup/useResizeButton.ts     | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index b29a07e00f..4a8faac498 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -131,7 +131,7 @@ export const ToggleEmojiButtonGroup = forwardRef<
   const buttonSize = useResizeButton({
     container: ref,
     enable: shouldResizeButton,
-    childrenSize: React.Children.count(children),
+    buttonCount: React.Children.count(children),
   })
 
   return (
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
index 49e9cfa0a1..2106146302 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
@@ -6,13 +6,13 @@ export const EMOJI_BUTTON_SIZE = 54
 interface UseResizeButtonProps {
   container: HTMLDivElement | null
   enable: boolean
-  childrenSize: number
+  buttonCount: number
 }
 
 export function useResizeButton({
   container,
   enable,
-  childrenSize,
+  buttonCount,
 }: UseResizeButtonProps) {
   const [buttonSize, setButtonSize] = useState(EMOJI_BUTTON_SIZE)
 
@@ -25,15 +25,15 @@ export function useResizeButton({
     const containerHeight = container.clientHeight
     const size = Math.max(
       Math.min(
-        (containerWidth - EMOJI_BUTTON_GROUP_GAP * (childrenSize - 1)) /
-          childrenSize,
+        (containerWidth - EMOJI_BUTTON_GROUP_GAP * (buttonCount - 1)) /
+          buttonCount,
         containerHeight - EMOJI_BUTTON_GROUP_GAP
       ),
       EMOJI_BUTTON_SIZE
     )
 
     setButtonSize(size)
-  }, [childrenSize, container, enable])
+  }, [buttonCount, container, enable])
 
   useEffect(
     function setResizeObserver() {

From c815a3b62aa7de5676f3b941ef0969058056d2d3 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 13:14:34 +0900
Subject: [PATCH 23/27] refactor(toggle-emoji-button): give default value to
 button size

---
 .../ToggleEmojiButtonGroup.tsx                           | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 4a8faac498..8749dee942 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -9,6 +9,7 @@ import { cssDimension } from '~/src/utils/style'
 import { AlphaLoader } from '~/src/components/AlphaLoader'
 import {
   EMOJI_BUTTON_GROUP_GAP,
+  EMOJI_BUTTON_SIZE,
   useResizeButton,
 } from '~/src/components/AlphaToggleEmojiButtonGroup/useResizeButton'
 import { BaseButton } from '~/src/components/BaseButton'
@@ -128,7 +129,7 @@ export const ToggleEmojiButtonGroup = forwardRef<
   const [ref, setRef] = useState<null | HTMLDivElement>(null)
   const mergedRefs = useMergeRefs(setRef, forwardedRef)
   const shouldResizeButton = fillDirection === 'all'
-  const buttonSize = useResizeButton({
+  const resizedButtonSize = useResizeButton({
     container: ref,
     enable: shouldResizeButton,
     buttonCount: React.Children.count(children),
@@ -144,9 +145,9 @@ export const ToggleEmojiButtonGroup = forwardRef<
       style={
         {
           '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),
-          '--b-toggle-emoji-button-size': shouldResizeButton
-            ? cssDimension(buttonSize)
-            : undefined,
+          '--b-toggle-emoji-button-size': cssDimension(
+            shouldResizeButton ? resizedButtonSize : EMOJI_BUTTON_SIZE
+          ),
           '--b-toggle-emoji-button-group-gap': cssDimension(
             EMOJI_BUTTON_GROUP_GAP
           ),

From 32c77b8cc5011100f2f8ff936cfb5e753bf60784 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 13:21:16 +0900
Subject: [PATCH 24/27] feat(toggle-emoji-button): remove loader

---
 .../ToggleButton.module.scss                  | 24 ---------------
 .../AlphaToggleButton/ToggleButton.tsx        | 25 +---------------
 .../AlphaToggleButton/ToggleButton.types.ts   |  6 ----
 .../ToggleEmojiButtonGroup.module.scss        | 17 -----------
 .../ToggleEmojiButtonGroup.tsx                | 30 ++-----------------
 .../ToggleEmojiButtonGroup.types.ts           |  5 ----
 6 files changed, 3 insertions(+), 104 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
index 1216d7122e..cb24ff9a07 100644
--- a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
@@ -1,8 +1,3 @@
-@use '../../styles/mixins/dimension';
-@use 'sass:map';
-
-@import '../Icon/Icon.module';
-
 .Button {
   position: relative;
 
@@ -89,25 +84,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    &:where(.loading) {
-      visibility: hidden;
-    }
-  }
-
-  & :where(.ButtonLoader) {
-    position: absolute;
-    inset: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:where(.size-s) {
-      & :is(.Loader) {
-        @include dimension.square(#{map.get($size-map, 's')}px);
-      }
-    }
   }
 
   /* NOTE: this fixes container width when bold toggles */
diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx
index 2e69e6cc2f..8bcc4e232b 100644
--- a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx
@@ -6,7 +6,6 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import classNames from 'classnames'
 
-import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
@@ -45,7 +44,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
       shape: shapeProps,
       size = 'm',
       className,
-      loading,
       onSelectedChange,
       ...rest
     },
@@ -72,12 +70,7 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
             className
           )}
         >
-          <div
-            className={classNames(
-              styles.ButtonContent,
-              loading && styles.loading
-            )}
-          >
+          <div className={classNames(styles.ButtonContent)}>
             <SideContent
               size={ICON_SIZE}
               content={prefixContent}
@@ -98,22 +91,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
               content={suffixContent}
             />
           </div>
-
-          {loading && (
-            <div
-              className={classNames(
-                styles.ButtonLoader,
-                // NOTE: Loader size is the same as icon size
-                styles[`size-${ICON_SIZE}`]
-              )}
-            >
-              <AlphaLoader
-                size="s"
-                className={styles.Loader}
-                variant="secondary"
-              />
-            </div>
-          )}
         </Comp>
       </TogglePrimitive.Root>
     )
diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.types.ts b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.types.ts
index 055ce20a31..b0aa26995c 100644
--- a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.types.ts
+++ b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.types.ts
@@ -17,12 +17,6 @@ interface ToggleButtonOwnProps {
    */
   text: string
 
-  /**
-   * If `loading` is true, spinner will be shown, replacing the content.
-   * @default false
-   */
-  loading?: boolean
-
   /**
    * Props that shows whether the button is selected.
    * @default false
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
index 0d32987b65..70a76542b3 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -72,22 +72,5 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    &:where(.loading) {
-      visibility: hidden;
-    }
-  }
-
-  & :where(.ButtonLoader) {
-    position: absolute;
-    inset: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    & :is(.Loader) {
-      @include dimension.square(var(--b-toggle-emoji-button-emoji-size));
-    }
   }
 }
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 8749dee942..ba5e0938a2 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -6,7 +6,6 @@ import classNames from 'classnames'
 import useMergeRefs from '~/src/hooks/useMergeRefs'
 import { cssDimension } from '~/src/utils/style'
 
-import { AlphaLoader } from '~/src/components/AlphaLoader'
 import {
   EMOJI_BUTTON_GROUP_GAP,
   EMOJI_BUTTON_SIZE,
@@ -43,17 +42,7 @@ export const ToggleEmojiButtonSource = forwardRef<
   HTMLButtonElement,
   ToggleEmojiButtonSourceProps
 >(function ToggleEmojiButtonSource(
-  {
-    name,
-    variant,
-    className,
-    selected,
-    size = 'm',
-    loading,
-    value,
-    onResize,
-    ...rest
-  },
+  { name, variant, className, selected, size = 'm', value, onResize, ...rest },
   forwardedRef
 ) {
   return (
@@ -71,27 +60,12 @@ export const ToggleEmojiButtonSource = forwardRef<
         )}
         {...rest}
       >
-        <div
-          className={classNames(
-            styles.ButtonContent,
-            loading && styles.loading
-          )}
-        >
+        <div className={classNames(styles.ButtonContent)}>
           <Emoji
             name={name}
             size={`${EMOJI_SIZE}`}
           />
         </div>
-
-        {loading && (
-          <div className={classNames(styles.ButtonLoader)}>
-            <AlphaLoader
-              className={styles.Loader}
-              size="s"
-              variant="secondary"
-            />
-          </div>
-        )}
       </BaseButton>
     </ToggleGroup.Item>
   )
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
index 88d7338834..4ee1c5fd48 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
@@ -6,11 +6,6 @@ interface ToggleEmojiButtonSourceOwnProps {
    * @default 'primary'
    */
   variant: 'primary' | 'secondary'
-  /**
-   * If `loading` is true, spinner will be shown, replacing the content.
-   * @default false
-   */
-  loading?: boolean
   /**
    * Props that shows whether the button is selected.
    * @default false

From cfbe5e7cb1a927f9d004c20afcd7612a23611b27 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 13:25:03 +0900
Subject: [PATCH 25/27] refactor(toggle-emoji-button): remove type assertion
 with dir

---
 .../ToggleEmojiButtonGroup.tsx                            | 3 +--
 .../ToggleEmojiButtonGroup.types.ts                       | 8 +++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index ba5e0938a2..96d1998386 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -94,7 +94,7 @@ export const ToggleEmojiButtonGroup = forwardRef<
     defaultValue,
     children,
     style,
-    dir,
+    dir = 'ltr',
     onValueChange,
     ...rest
   },
@@ -133,7 +133,6 @@ export const ToggleEmojiButtonGroup = forwardRef<
         fillDirection && styles[`fillDirection-${fillDirection}`],
         className
       )}
-      dir={dir as 'ltr' | 'rtl'}
       {...rest}
     >
       {children}
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
index 4ee1c5fd48..3ba86d11bb 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts
@@ -37,6 +37,12 @@ interface ToggleEmojiButtonGroupOwnProps {
    * Use when you do not need to control the state of the items.
    */
   defaultValue?: string
+  /**
+   *
+   * @default 'ltr'
+   * The reading direction of the toggle group.
+   */
+  dir?: 'ltr' | 'rtl'
   /**
    * Event handler called when the value changes.
    */
@@ -44,7 +50,7 @@ interface ToggleEmojiButtonGroupOwnProps {
 }
 
 export interface ToggleEmojiButtonGroupProps
-  extends Omit<BezierComponentProps<'div'>, 'defaultValue'>,
+  extends Omit<BezierComponentProps<'div'>, 'dir' | 'defaultValue'>,
     ToggleEmojiButtonGroupOwnProps {}
 
 export interface ToggleEmojiButtonSourceProps

From c2fae9537c9970ce5afcc02b815af1400c08c268 Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 13:28:45 +0900
Subject: [PATCH 26/27] fix(toggle-emoji-button): resolve typecheck failed

---
 .../AlphaToggleButton/AlphaToggleButton.stories.tsx         | 1 -
 .../AlphaToggleEmojiButtonGroup.stories.tsx                 | 6 +-----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/bezier-react/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx b/packages/bezier-react/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx
index c813659091..709ce9e536 100644
--- a/packages/bezier-react/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx
@@ -16,7 +16,6 @@ export const Primary = {
   args: {
     text: 'Invite',
     selected: false,
-    loading: false,
     prefixContent: GiftIcon,
     suffixContent: ArrowRightIcon,
     size: 'm',
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
index adb43c7901..c76096027d 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -19,12 +19,11 @@ const meta: Meta<typeof ToggleEmojiButtonGroup> = {
 export default meta
 
 type ToggleButtonCompositionType = ToggleEmojiButtonGroupProps &
-  Pick<ToggleEmojiButtonSourceProps, 'variant' | 'loading'>
+  Pick<ToggleEmojiButtonSourceProps, 'variant'>
 
 const Template: StoryFn<ToggleButtonCompositionType> = ({
   fillDirection,
   variant,
-  loading,
 }) => {
   return (
     <Center
@@ -38,13 +37,11 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
       >
         <ToggleEmojiButtonSource
           variant={variant}
-          loading={loading}
           value="blush"
           name="blush"
         />
         <ToggleEmojiButtonSource
           variant={variant}
-          loading={loading}
           value="grinning"
           name="grinning"
         />
@@ -59,7 +56,6 @@ export const Primary = {
   args: {
     fillDirection: 'horizontal',
     variant: 'primary',
-    loading: false,
   },
   parameters: {
     design: {

From f7a9162e739cf7f713bbdbfc0d559362f5f48e9e Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Wed, 6 Nov 2024 15:33:22 +0900
Subject: [PATCH 27/27] refactor(toggle-emoji-button): rename variables

---
 .../ToggleEmojiButtonGroup.tsx                 | 14 +++++++-------
 ...zeButton.ts => useToggleEmojiButtonSize.ts} | 18 +++++++++---------
 2 files changed, 16 insertions(+), 16 deletions(-)
 rename packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/{useResizeButton.ts => useToggleEmojiButtonSize.ts} (80%)

diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
index 96d1998386..855a0b1199 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx
@@ -9,8 +9,8 @@ import { cssDimension } from '~/src/utils/style'
 import {
   EMOJI_BUTTON_GROUP_GAP,
   EMOJI_BUTTON_SIZE,
-  useResizeButton,
-} from '~/src/components/AlphaToggleEmojiButtonGroup/useResizeButton'
+  useToggleEmojiButtonSize,
+} from '~/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Emoji } from '~/src/components/Emoji'
 
@@ -100,12 +100,12 @@ export const ToggleEmojiButtonGroup = forwardRef<
   },
   forwardedRef
 ) {
-  const [ref, setRef] = useState<null | HTMLDivElement>(null)
-  const mergedRefs = useMergeRefs(setRef, forwardedRef)
+  const [container, setContainer] = useState<null | HTMLDivElement>(null)
+  const mergedRefs = useMergeRefs(setContainer, forwardedRef)
   const shouldResizeButton = fillDirection === 'all'
-  const resizedButtonSize = useResizeButton({
-    container: ref,
-    enable: shouldResizeButton,
+  const resizedButtonSize = useToggleEmojiButtonSize({
+    container,
+    enabled: shouldResizeButton,
     buttonCount: React.Children.count(children),
   })
 
diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.ts
similarity index 80%
rename from packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
rename to packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.ts
index 2106146302..be8ba685af 100644
--- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useResizeButton.ts
+++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.ts
@@ -3,21 +3,21 @@ import { useCallback, useEffect, useState } from 'react'
 export const EMOJI_BUTTON_GROUP_GAP = 6
 export const EMOJI_BUTTON_SIZE = 54
 
-interface UseResizeButtonProps {
+interface UseToggleEmojiButtonSizeProps {
   container: HTMLDivElement | null
-  enable: boolean
+  enabled: boolean
   buttonCount: number
 }
 
-export function useResizeButton({
+export function useToggleEmojiButtonSize({
   container,
-  enable,
+  enabled,
   buttonCount,
-}: UseResizeButtonProps) {
+}: UseToggleEmojiButtonSizeProps) {
   const [buttonSize, setButtonSize] = useState(EMOJI_BUTTON_SIZE)
 
   const adjustButtonSize = useCallback(() => {
-    if (!container || !enable) {
+    if (!container || !enabled) {
       return
     }
 
@@ -33,13 +33,13 @@ export function useResizeButton({
     )
 
     setButtonSize(size)
-  }, [buttonCount, container, enable])
+  }, [buttonCount, container, enabled])
 
   useEffect(
     function setResizeObserver() {
       let resizeObserver: ResizeObserver | null = null
 
-      if (enable && container) {
+      if (enabled && container) {
         resizeObserver = new ResizeObserver(() => {
           adjustButtonSize()
         })
@@ -55,7 +55,7 @@ export function useResizeButton({
         }
       }
     },
-    [adjustButtonSize, container, enable]
+    [adjustButtonSize, container, enabled]
   )
 
   return buttonSize