feat(Button): add single-select to button group

Author: codeacme17

example/src/components/controls/EchoButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ChevronDown } from 'lucide-react'
 import { Button, SineIcon, SquareIcon, SawtoothIcon, TriangleIcon } from '@echo-ui'
 
@@ -14,6 +14,10 @@ export const EchoButton = () => {
     setToggled(toggled)
   }
 
+  useEffect(() => {
+    console.log(values)
+  }, [values])
+
   return (
     <section className="flex flex-col">
       <Button className="mb-4 w-20" size="sm">

packages/components/controller/Button/Button.tsx

@@ -26,7 +26,9 @@ export const Button = forwardRef<ButtonRef, ButtonProps>((props, ref) => {
 
   let toggled = _toggled
   if (isInGroup) {
-    toggled = groupContext.value?.length ? groupContext.value.includes(value) : _toggled
+    if (Array.isArray(groupContext.value)) {
+      toggled = groupContext.value?.length ? groupContext.value.includes(value) : _toggled
+    } else toggled = groupContext.value === value
   }
 
   useEffect(() => {

packages/components/controller/Button/Group.tsx

@@ -21,9 +21,13 @@ export const ButtonGroup = forwardRef<ButtonGroupRef, ButtonGroupProps>((props,
 
   const handleGroupChange = (v: any) => {
     const newValue = v
-    const updatedValue = value.includes(newValue)
-      ? value.filter((val) => val !== newValue)
-      : [...value, newValue]
+
+    let updatedValue
+    if (Array.isArray(value)) {
+      updatedValue = value.includes(newValue)
+        ? value.filter((val) => val !== newValue)
+        : [...value, newValue]
+    } else updatedValue = newValue
 
     onChange?.(updatedValue)
   }

packages/components/controller/Button/types.ts

@@ -36,7 +36,7 @@ export interface ButtonGroupProps extends Omit<AbstractButtonProps<ButtonGroupRe
   /**
    * @description The values associated with the button group.
    */
-  value?: any[]
+  value?: any
 
   /**
    * @description Allows to set custom class names for the button and toggled state.
@@ -51,7 +51,7 @@ export interface ButtonGroupProps extends Omit<AbstractButtonProps<ButtonGroupRe
   /**
    * @description Callback function when the values in the button group change.
    */
-  onChange?: (values: any[]) => void
+  onChange?: (values: any) => void
 }
 
 export interface ButtonRef extends HTMLButtonElement {}