feat(toggle-emoji-button): support uncontrolled

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,17 +26,14 @@ const Template: StoryFn<ToggleButtonCompositionType> = ({
   variant,
   loading,
 }) => {
-  const [value, setValue] = useState('blush')
-
   return (
     <Center
       width="25vw"
       height="15vh"
       backgroundColor="bg-lounge"
     >
       <ToggleEmojiButtonGroup
-        value={value}
-        onValueChange={setValue}
+        defaultValue="blush"
         fillDirection={fillDirection}
       >
         <ToggleEmojiButtonSource

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}
     >

packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts

@@ -36,15 +36,20 @@ 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.
    */
   onValueChange?: (value: string) => void
 }
 
 export interface ToggleEmojiButtonGroupProps
-  extends BezierComponentProps<'div'>,
+  extends Omit<BezierComponentProps<'div'>, 'defaultValue'>,
     ToggleEmojiButtonGroupOwnProps {}
 
 export interface ToggleEmojiButtonSourceProps