fix: use new types in ToggleGroup examples

Author: michaelhazan

docs/src/app/(private)/experiments/toggle-group.tsx

@@ -5,7 +5,7 @@ import { Toggle } from '@base-ui-components/react/toggle';
 import classes from './toggle.module.css';
 
 export default function ToggleGroupDemo() {
-  const [value, setValue] = React.useState(['align-center']);
+  const [value, setValue] = React.useState('align-center');
   return (
     <div className={classes.grid}>
       <h4 style={{ margin: 0 }}>LTR</h4>
@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
         value={value}
         onValueChange={(newValue) => {
           // one button must always remain pressed
-          if (newValue.length > 0) {
+          if (newValue) {
             setValue(newValue);
           }
         }}

docs/src/app/(private)/experiments/toolbar/text-editor.tsx

@@ -275,7 +275,7 @@ export default function App() {
             <Toolbar.Separator className={styles.toolbar.Separator} />
 
             <ToggleGroup
-              defaultValue={['left']}
+              defaultValue="left"
               className={styles.toolbar.ToggleGroup}
               disabled={settings.toolbarDisabled}
             >
@@ -330,7 +330,7 @@ export default function App() {
                     </Menu.Arrow>
                     <Menu.Item className={styles.menu.Item}>Help</Menu.Item>
                     <Menu.Item className={styles.menu.Item}>Keyboard Shortcuts</Menu.Item>
-                    <Menu.Item className={styles.menu.Item}>Release Notes</Menu.Item>
+                    <Menu.Item className={syles.menu.Item}>Release Notes</Menu.Item>
                     <Menu.Separator className={styles.menu.Separator} />
                     <Menu.SubmenuRoot>
                       <Menu.SubmenuTrigger className={styles.menu.SubmenuTrigger}>

docs/src/app/(public)/(content)/react/components/toggle-group/demos/hero/css-modules/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.css';
 
 export default function ExampleToggleGroup() {
   return (
-    <ToggleGroup defaultValue={['left']} className={styles.Panel}>
+    <ToggleGroup defaultValue="left" className={styles.Panel}>
       <Toggle aria-label="Align left" value="left" className={styles.Button}>
         <AlignLeftIcon className={styles.Icon} />
       </Toggle>

docs/src/app/(public)/(content)/react/components/toggle-group/demos/hero/tailwind/index.tsx

@@ -5,7 +5,7 @@ import { ToggleGroup } from '@base-ui-components/react/toggle-group';
 export default function ExampleToggleGroup() {
   return (
     <ToggleGroup
-      defaultValue={['left']}
+      defaultValue="left"
       className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5"
     >
       <Toggle