Consistent imports

src/components/Dialog/index.web.tsx

@@ -12,11 +12,10 @@ import {Button} from '#/components/Button'
 
 import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
 import {Context, useDialogContext} from '#/components/Dialog/context'
-import TextField from '#/components/forms/TextField'
 
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
-export const Input = TextField.Input
+export {Input} from '#/components/forms/TextField'
 
 const stopPropagation = (e: any) => e.stopPropagation()
 

src/components/forms/DateField/index.android.tsx

@@ -7,7 +7,7 @@ import DateTimePicker, {
 import {useTheme, atoms} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import TextField, {useSharedInputStyles} from '#/components/forms/TextField'
+import * as TextField from '#/components/forms/TextField'
 import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
 
 import {DateFieldProps} from '#/components/forms/DateField/types'
@@ -35,7 +35,8 @@ export function DateField({
   } = useInteractionState()
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
 
-  const {chromeFocus, chromeError, chromeErrorHover} = useSharedInputStyles()
+  const {chromeFocus, chromeError, chromeErrorHover} =
+    TextField.useSharedInputStyles()
 
   const onChangeInternal = React.useCallback<
     Required<DateTimePickerProps>['onChange']

src/components/forms/DateField/index.tsx

@@ -5,7 +5,7 @@ import DateTimePicker, {
 } from '@react-native-community/datetimepicker'
 
 import {useTheme, atoms} from '#/alf'
-import TextField from '#/components/forms/TextField'
+import * as TextField from '#/components/forms/TextField'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
 import {DateFieldProps} from '#/components/forms/DateField/types'
 

src/components/forms/DateField/index.web.tsx

@@ -3,7 +3,7 @@ import {TextInput, TextInputProps, StyleSheet} from 'react-native'
 // @ts-ignore
 import {unstable_createElement} from 'react-native-web'
 
-import TextField, {createInput} from '#/components/forms/TextField'
+import * as TextField from '#/components/forms/TextField'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
 import {DateFieldProps} from '#/components/forms/DateField/types'
 
@@ -29,7 +29,7 @@ const InputBase = React.forwardRef<HTMLInputElement, TextInputProps>(
 
 InputBase.displayName = 'InputBase'
 
-const Input = createInput(InputBase as unknown as typeof TextInput)
+const Input = TextField.createInput(InputBase as unknown as typeof TextInput)
 
 export function DateField({
   value,

src/components/forms/TextField.tsx

@@ -38,7 +38,7 @@ const Context = React.createContext<{
 
 export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}>
 
-function Root({children, isInvalid = false}: RootProps) {
+export function Root({children, isInvalid = false}: RootProps) {
   const inputRef = React.useRef<TextInput>(null)
   const rootRef = React.useRef<View>(null)
   const {
@@ -226,9 +226,9 @@ export function createInput(Component: typeof TextInput) {
   }
 }
 
-const Input = createInput(TextInput)
+export const Input = createInput(TextInput)
 
-function Label({children}: React.PropsWithChildren<{}>) {
+export function Label({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   return (
     <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_600, a.mb_sm]}>
@@ -237,7 +237,7 @@ function Label({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-function Icon({icon: Comp}: {icon: React.ComponentType<SVGIconProps>}) {
+export function Icon({icon: Comp}: {icon: React.ComponentType<SVGIconProps>}) {
   const t = useTheme()
   const ctx = React.useContext(Context)
   const {hover, focus, errorHover, errorFocus} = React.useMemo(() => {
@@ -286,7 +286,7 @@ function Icon({icon: Comp}: {icon: React.ComponentType<SVGIconProps>}) {
   )
 }
 
-function Suffix({
+export function Suffix({
   children,
   label,
   accessibilityHint,
@@ -322,11 +322,3 @@ function Suffix({
     </Text>
   )
 }
-
-export default {
-  Root,
-  Input,
-  Label,
-  Icon,
-  Suffix,
-}

src/components/forms/Toggle.tsx

@@ -5,11 +5,11 @@ import {useTheme, atoms as a, web} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 
-type ItemState = {
+export type ItemState = {
   name: string
   selected: boolean
   disabled: boolean
-  hasError: boolean
+  isInvalid: boolean
   hovered: boolean
   pressed: boolean
   focused: boolean
@@ -19,7 +19,7 @@ const ItemContext = React.createContext<ItemState>({
   name: '',
   selected: false,
   disabled: false,
-  hasError: false,
+  isInvalid: false,
   hovered: false,
   pressed: false,
   focused: false,
@@ -55,7 +55,7 @@ export type ItemProps = {
   value?: boolean
   disabled?: boolean
   onChange?: (selected: boolean) => void
-  hasError?: boolean
+  isInvalid?: boolean
   style?: (state: ItemState) => ViewStyle
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
 }
@@ -64,7 +64,7 @@ export function useItemContext() {
   return React.useContext(ItemContext)
 }
 
-function Group({
+export function Group({
   children,
   values: providedValues,
   onChange,
@@ -138,13 +138,13 @@ function Group({
   )
 }
 
-function Item({
+export function Item({
   children,
   name,
   value = false,
   disabled: itemDisabled = false,
   onChange,
-  hasError,
+  isInvalid,
   style,
   type = 'checkbox',
   label,
@@ -185,12 +185,12 @@ function Item({
       name,
       selected,
       disabled: disabled ?? false,
-      hasError: hasError ?? false,
+      isInvalid: isInvalid ?? false,
       hovered,
       pressed,
       focused,
     }),
-    [name, selected, disabled, hovered, pressed, focused, hasError],
+    [name, selected, disabled, hovered, pressed, focused, isInvalid],
   )
 
   return (
@@ -201,7 +201,7 @@ function Item({
         disabled={disabled}
         aria-disabled={disabled ?? false}
         aria-checked={selected}
-        aria-invalid={hasError}
+        aria-invalid={isInvalid}
         aria-label={label}
         role={role}
         accessibilityRole={role}
@@ -230,7 +230,7 @@ function Item({
   )
 }
 
-function Label({children}: React.PropsWithChildren<{}>) {
+export function Label({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   const {disabled} = useItemContext()
   return (
@@ -247,20 +247,20 @@ function Label({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-function createSharedToggleStyles({
+export function createSharedToggleStyles({
   theme: t,
   hovered,
   focused,
   selected,
   disabled,
-  hasError,
+  isInvalid,
 }: {
   theme: ReturnType<typeof useTheme>
   selected: boolean
   hovered: boolean
   focused: boolean
   disabled: boolean
-  hasError: boolean
+  isInvalid: boolean
 }) {
   const base: ViewStyle[] = []
   const baseHover: ViewStyle[] = []
@@ -290,7 +290,7 @@ function createSharedToggleStyles({
     }
   }
 
-  if (hasError) {
+  if (isInvalid) {
     base.push({
       backgroundColor:
         t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
@@ -321,9 +321,9 @@ function createSharedToggleStyles({
   }
 }
 
-function Checkbox() {
+export function Checkbox() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, hasError} = useItemContext()
+  const {selected, hovered, focused, disabled, isInvalid} = useItemContext()
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
@@ -331,7 +331,7 @@ function Checkbox() {
       focused,
       selected,
       disabled,
-      hasError,
+      isInvalid,
     })
   return (
     <View
@@ -369,9 +369,9 @@ function Checkbox() {
   )
 }
 
-function Switch() {
+export function Switch() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, hasError} = useItemContext()
+  const {selected, hovered, focused, disabled, isInvalid} = useItemContext()
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
@@ -379,7 +379,7 @@ function Switch() {
       focused,
       selected,
       disabled,
-      hasError,
+      isInvalid,
     })
   return (
     <View
@@ -420,9 +420,9 @@ function Switch() {
   )
 }
 
-function Radio() {
+export function Radio() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, hasError} =
+  const {selected, hovered, focused, disabled, isInvalid} =
     React.useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
@@ -431,7 +431,7 @@ function Radio() {
       focused,
       selected,
       disabled,
-      hasError,
+      isInvalid,
     })
   return (
     <View
@@ -468,12 +468,3 @@ function Radio() {
     </View>
   )
 }
-
-export default {
-  Item,
-  Checkbox,
-  Label,
-  Switch,
-  Radio,
-  Group,
-}

src/components/forms/ToggleButton.tsx

@@ -4,17 +4,13 @@ import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
-import Toggle, {
-  GroupProps as BaseGroupProps,
-  ItemProps as BaseItemProps,
-  useItemContext,
-} from '#/components/forms/Toggle'
+import * as Toggle from '#/components/forms/Toggle'
 
-export type ItemProps = Omit<BaseItemProps, 'style' | 'role' | 'children'> &
+export type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
   AccessibilityProps &
   React.PropsWithChildren<{}>
 
-export type GroupProps = Omit<BaseGroupProps, 'style' | 'type'> & {
+export type GroupProps = Omit<Toggle.GroupProps, 'style' | 'type'> & {
   multiple?: boolean
 }
 
@@ -46,7 +42,7 @@ export function Button({children, ...props}: ItemProps) {
 
 function ButtonInner({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
-  const state = useItemContext()
+  const state = Toggle.useItemContext()
 
   const {baseStyles, hoverStyles, activeStyles, textStyles} =
     React.useMemo(() => {
@@ -123,8 +119,3 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
     </View>
   )
 }
-
-export default {
-  Group,
-  Button,
-}

src/components/forms/types.ts

@@ -1,11 +0,0 @@
-import {AccessibilityProps} from 'react-native'
-
-export type RequiredAccessibilityProps = Required<AccessibilityProps>
-
-export type BaseProps<T = string> = AccessibilityProps & {
-  value: T
-  onChange: (value: T) => void
-  testID?: string
-  label: string
-  hasError?: boolean
-}

src/view/screens/Storybook/Forms.tsx

@@ -3,10 +3,10 @@ import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'
 import {H1, H3} from '#/components/Typography'
-import TextField from '#/components/forms/TextField'
+import * as TextField from '#/components/forms/TextField'
 import {DateField, Label} from '#/components/forms/DateField'
-import Toggle from '#/components/forms/Toggle'
-import ToggleButton from '#/components/forms/ToggleButton'
+import * as Toggle from '#/components/forms/Toggle'
+import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Button} from '#/components/Button'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 
@@ -113,7 +113,7 @@ export function Forms() {
               <Toggle.Switch />
               <Toggle.Label>Click me</Toggle.Label>
             </Toggle.Item>
-            <Toggle.Item name="e" hasError label="Click me">
+            <Toggle.Item name="e" isInvalid label="Click me">
               <Toggle.Switch />
               <Toggle.Label>Click me</Toggle.Label>
             </Toggle.Item>
@@ -143,7 +143,7 @@ export function Forms() {
               <Toggle.Checkbox />
               <Toggle.Label>Click me</Toggle.Label>
             </Toggle.Item>
-            <Toggle.Item name="e" hasError label="Click me">
+            <Toggle.Item name="e" isInvalid label="Click me">
               <Toggle.Checkbox />
               <Toggle.Label>Click me</Toggle.Label>
             </Toggle.Item>
@@ -172,7 +172,7 @@ export function Forms() {
               <Toggle.Radio />
               <Toggle.Label>Click me</Toggle.Label>
             </Toggle.Item>
-            <Toggle.Item name="e" hasError label="Click me">
+            <Toggle.Item name="e" isInvalid label="Click me">
               <Toggle.Radio />
               <Toggle.Label>Click me</Toggle.Label>
             </Toggle.Item>

src/view/screens/Storybook/index.tsx

@@ -30,8 +30,7 @@ export function Storybook() {
               variant="outline"
               color="primary"
               size="small"
-              accessibilityLabel='Set theme to "system"'
-              accessibilityHint="Set theme to system default"
+              label='Set theme to "system"'
               onPress={() => setColorMode('system')}>
               System
             </Button>
@@ -39,8 +38,7 @@ export function Storybook() {
               variant="solid"
               color="secondary"
               size="small"
-              accessibilityLabel='Set theme to "system"'
-              accessibilityHint="Set theme to system default"
+              label='Set theme to "system"'
               onPress={() => setColorMode('light')}>
               Light
             </Button>
@@ -48,8 +46,7 @@ export function Storybook() {
               variant="solid"
               color="secondary"
               size="small"
-              accessibilityLabel='Set theme to "system"'
-              accessibilityHint="Set theme to system default"
+              label='Set theme to "system"'
               onPress={() => setColorMode('dark')}>
               Dark
             </Button>