ToggleButton styles

src/components/forms/Toggle.tsx

@@ -60,6 +60,10 @@ export type ItemProps = {
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
 }
 
+export function useItemContext() {
+  return React.useContext(ItemContext)
+}
+
 function Group({
   children,
   values: providedValues,
@@ -228,7 +232,7 @@ function Item({
 
 function Label({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
-  const {disabled} = React.useContext(ItemContext)
+  const {disabled} = useItemContext()
   return (
     <Text
       style={[
@@ -319,8 +323,7 @@ function createSharedToggleStyles({
 
 function Checkbox() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, hasError} =
+  const {selected, hovered, focused, disabled, hasError} = useItemContext()
-    React.useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
@@ -368,8 +371,7 @@ function Checkbox() {
 
 function Switch() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, hasError} =
+  const {selected, hovered, focused, disabled, hasError} = useItemContext()
-    React.useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,

src/components/forms/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {View, AccessibilityProps} from 'react-native'
+import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
@@ -7,6 +7,7 @@ import {Text} from '#/components/Typography'
 import Toggle, {
   GroupProps as BaseGroupProps,
   ItemProps as BaseItemProps,
+  useItemContext,
 } from '#/components/forms/Toggle'
 
 export type ItemProps = Omit<BaseItemProps, 'style' | 'role' | 'children'> &
@@ -36,10 +37,60 @@ export function Group({children, multiple, ...props}: GroupProps) {
 }
 
 export function Button({children, ...props}: ItemProps) {
-  const t = useTheme()
   return (
     <Toggle.Item {...props}>
-      {state => (
+      <ButtonInner>{children}</ButtonInner>
+    </Toggle.Item>
+  )
+}
+
+function ButtonInner({children}: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+  const state = useItemContext()
+
+  const {baseStyles, hoverStyles, activeStyles, textStyles} =
+    React.useMemo(() => {
+      const base: ViewStyle[] = []
+      const hover: ViewStyle[] = []
+      const active: ViewStyle[] = []
+      const text: TextStyle[] = []
+
+      hover.push(t.atoms.bg_contrast_100)
+
+      if (state.selected) {
+        active.push({
+          backgroundColor: t.palette.contrast_800,
+        })
+        text.push(t.atoms.text_inverted)
+        hover.push({
+          backgroundColor: t.palette.contrast_800,
+        })
+
+        if (state.disabled) {
+          active.push({
+            backgroundColor: t.palette.contrast_500,
+          })
+        }
+      }
+
+      if (state.disabled) {
+        base.push({
+          backgroundColor: t.palette.contrast_100,
+        })
+        text.push({
+          opacity: 0.5,
+        })
+      }
+
+      return {
+        baseStyles: base,
+        hoverStyles: hover,
+        activeStyles: active,
+        textStyles: text,
+      }
+    }, [t, state])
+
+  return (
     <View
       style={[
         a.px_lg,
@@ -48,18 +99,19 @@ export function Button({children, ...props}: ItemProps) {
         t.atoms.border,
         {
           borderLeftWidth: 1,
-              marginLeft: -1, // TODO yuck
+          marginLeft: -1,
-              backgroundColor: state.selected ? t.palette.black : undefined,
         },
+        baseStyles,
+        activeStyles,
+        (state.hovered || state.focused || state.pressed) && hoverStyles,
       ]}>
       {typeof children === 'string' ? (
         <Text
           style={[
             a.text_center,
             a.font_bold,
-                state.selected
+            t.atoms.text_contrast_500,
-                  ? t.atoms.text_inverted
+            textStyles,
-                  : t.atoms.text_contrast_500,
           ]}>
           {children}
         </Text>
@@ -67,8 +119,6 @@ export function Button({children, ...props}: ItemProps) {
         children
       )}
     </View>
-      )}
-    </Toggle.Item>
   )
 }
 

src/view/screens/Storybook/Forms.tsx

@@ -15,6 +15,7 @@ export function Forms() {
   const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a'])
   const [toggleGroupBValues, setToggleGroupBValues] = React.useState(['a', 'b'])
   const [toggleGroupCValues, setToggleGroupCValues] = React.useState(['a', 'b'])
+  const [toggleGroupDValues, setToggleGroupDValues] = React.useState(['warn'])
 
   return (
     <View style={[a.gap_4xl, a.align_start]}>
@@ -240,8 +241,8 @@ export function Forms() {
 
         <ToggleButton.Group
           label="Preferences"
-          values={['warn']}
+          values={toggleGroupDValues}
-          onChange={e => console.log(e)}>
+          onChange={setToggleGroupDValues}>
           <ToggleButton.Button name="hide" label="Hide">
             Hide
           </ToggleButton.Button>