Clean up Toggles storybook

src/components/forms/Toggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
+import {Pressable, View, ViewStyle} from 'react-native'
 
 import {useTheme, atoms as a, web} from '#/alf'
 import {Text} from '#/components/Typography'
@@ -48,14 +48,12 @@ export type GroupProps = React.PropsWithChildren<{
   label: string
 }>
 
-export type ItemProps = Omit<
+export type ItemProps = {
-  PressableProps,
-  'children' | 'style' | 'onPress' | 'role'
-> & {
   type?: 'radio' | 'checkbox'
   name: string
   label: string
   value?: boolean
+  disabled?: boolean
   onChange?: (selected: boolean) => void
   hasError?: boolean
   style?: (state: ItemState) => ViewStyle
@@ -314,7 +312,7 @@ function createSharedToggleStyles({
 
   return {
     baseStyles: base,
-    baseHoverStyles: baseHover,
+    baseHoverStyles: disabled ? [] : baseHover,
     indicatorStyles: indicator,
   }
 }

src/view/screens/Storybook/Forms.tsx

@@ -12,7 +12,9 @@ import ToggleButton from '#/components/forms/ToggleButton'
 import {Button} from '#/components/Button'
 
 export function Forms() {
-  const [toggleGroupValues, setToggleGroupValues] = React.useState(['a'])
+  const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a'])
+  const [toggleGroupBValues, setToggleGroupBValues] = React.useState(['a', 'b'])
+  const [toggleGroupCValues, setToggleGroupCValues] = React.useState(['a', 'b'])
 
   return (
     <View style={[a.gap_4xl, a.align_start]}>
@@ -137,38 +139,8 @@ export function Forms() {
           label="Toggle"
           type="checkbox"
           maxSelections={2}
-          values={['a', 'b']}
+          values={toggleGroupAValues}
-          onChange={e => console.log(e)}>
+          onChange={setToggleGroupAValues}>
-          <View style={[a.gap_md]}>
-            <Toggle.Item name="a" label="Click me">
-              <Toggle.Checkbox />
-              <Toggle.Label>Click me</Toggle.Label>
-            </Toggle.Item>
-            <Toggle.Item name="b" label="Click me">
-              <Toggle.Checkbox />
-              <Toggle.Label>Click me</Toggle.Label>
-            </Toggle.Item>
-            <Toggle.Item name="c" label="Click me">
-              <Toggle.Checkbox />
-              <Toggle.Label>Click me</Toggle.Label>
-            </Toggle.Item>
-            <Toggle.Item name="d" disabled label="Click me">
-              <Toggle.Checkbox />
-              <Toggle.Label>Click me</Toggle.Label>
-            </Toggle.Item>
-            <Toggle.Item name="e" hasError label="Click me">
-              <Toggle.Checkbox />
-              <Toggle.Label>Click me</Toggle.Label>
-            </Toggle.Item>
-          </View>
-        </Toggle.Group>
-
-        <Toggle.Group
-          label="Toggle"
-          type="checkbox"
-          maxSelections={2}
-          values={toggleGroupValues}
-          onChange={setToggleGroupValues}>
           <View style={[a.gap_md]}>
             <Toggle.Item name="a" label="Click me">
               <Toggle.Switch />
@@ -197,17 +169,47 @@ export function Forms() {
               size="small"
               accessibilityLabel="Reset"
               accessibilityHint="Reset"
-              onPress={() => setToggleGroupValues(['a'])}>
+              onPress={() => setToggleGroupAValues(['a'])}>
               Reset
             </Button>
           </View>
         </Toggle.Group>
 
+        <Toggle.Group
+          label="Toggle"
+          type="checkbox"
+          maxSelections={2}
+          values={toggleGroupBValues}
+          onChange={setToggleGroupBValues}>
+          <View style={[a.gap_md]}>
+            <Toggle.Item name="a" label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="b" label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="c" label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="d" disabled label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="e" hasError label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+          </View>
+        </Toggle.Group>
+
         <Toggle.Group
           label="Toggle"
           type="radio"
-          values={['a']}
+          values={toggleGroupCValues}
-          onChange={e => console.log(e)}>
+          onChange={setToggleGroupCValues}>
           <View style={[a.gap_md]}>
             <Toggle.Item name="a" label="Click me">
               <Toggle.Radio />