✨ SegmentedControl component (#8606)

* new segmented control

* fix type error

* convert server input, use CSS for web

* add segmented control to storybook

* use segmented control in embed dialog

* add to suggested text wrappers

* update change handle dialog

* update styles since button changes

* fix atom

* style updates to segmented control, add size prop

* update state in layout effect rather than in render

* set type = 'radio' as default

* prevent expansion in server dialog on iOS

* use non reactive callback in needsUpdate effect

src/components/dialogs/Embed.tsx

@@ -10,8 +10,8 @@ import {toShareUrl} from '#/lib/strings/url-helpers'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import * as TextField from '#/components/forms/TextField'
-import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
 import {
   ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottomIcon,
@@ -150,26 +150,27 @@ function EmbedDialogInner({
               <Text style={[t.atoms.text_contrast_medium, a.font_semi_bold]}>
                 <Trans>Color theme</Trans>
               </Text>
-              <ToggleButton.Group
+              <SegmentedControl.Root
                 label={_(msg`Color mode`)}
-                values={[colorMode]}
-                onChange={([value]) => setColorMode(value as ColorModeValues)}>
-                <ToggleButton.Button name="system" label={_(msg`System`)}>
-                  <ToggleButton.ButtonText>
+                type="radio"
+                value={colorMode}
+                onChange={setColorMode}>
+                <SegmentedControl.Item value="system" label={_(msg`System`)}>
+                  <SegmentedControl.ItemText>
                     <Trans>System</Trans>
-                  </ToggleButton.ButtonText>
-                </ToggleButton.Button>
-                <ToggleButton.Button name="light" label={_(msg`Light`)}>
-                  <ToggleButton.ButtonText>
+                  </SegmentedControl.ItemText>
+                </SegmentedControl.Item>
+                <SegmentedControl.Item value="light" label={_(msg`Light`)}>
+                  <SegmentedControl.ItemText>
                     <Trans>Light</Trans>
-                  </ToggleButton.ButtonText>
-                </ToggleButton.Button>
-                <ToggleButton.Button name="dark" label={_(msg`Dark`)}>
-                  <ToggleButton.ButtonText>
+                  </SegmentedControl.ItemText>
+                </SegmentedControl.Item>
+                <SegmentedControl.Item value="dark" label={_(msg`Dark`)}>
+                  <SegmentedControl.ItemText>
                     <Trans>Dark</Trans>
-                  </ToggleButton.ButtonText>
-                </ToggleButton.Button>
-              </ToggleButton.Group>
+                  </SegmentedControl.ItemText>
+                </SegmentedControl.Item>
+              </SegmentedControl.Root>
             </View>
           )}
         </View>