@hzblj/kara-components 0.0.0-stage → 0.2.0

package/src/molecules/tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './tooltip'
+export * from './tooltip.types'

package/src/molecules/tooltip/tooltip.android.tsx

@@ -0,0 +1,25 @@
+import {Text as ComposeText, TooltipBox} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import type {TooltipComponent, TooltipProps} from './tooltip.types'
+
+export const Tooltip: TooltipComponent = ({children, text}: TooltipProps) => {
+  useHostGuard('Tooltip')
+
+  const theme = useAppTheme()
+
+  return (
+    <TooltipBox>
+      <TooltipBox.PlainTooltip
+        containerColor={theme.colorString('surface.high.contrast')}
+        contentColor={theme.colorString('content.on.high.contrast')}
+      >
+        <ComposeText color={theme.colorString('content.on.high.contrast')} style={theme.typography.footnote}>
+          {text}
+        </ComposeText>
+      </TooltipBox.PlainTooltip>
+      {children}
+    </TooltipBox>
+  )
+}

package/src/molecules/tooltip/tooltip.ios.tsx

@@ -0,0 +1,27 @@
+import {Popover} from '@expo/ui/swift-ui'
+import {Text} from '../../atoms/text'
+import {VStack} from '../../atoms/v-stack'
+import {useHostGuard} from '../../host-context'
+import type {TooltipComponent, TooltipProps} from './tooltip.types'
+
+export const Tooltip: TooltipComponent = ({children, onDismiss, text, visible}: TooltipProps) => {
+  useHostGuard('Tooltip')
+
+  return (
+    <Popover
+      isPresented={visible}
+      onIsPresentedChange={next => {
+        if (!next) {
+          onDismiss()
+        }
+      }}
+    >
+      <Popover.Trigger>{children}</Popover.Trigger>
+      <Popover.Content>
+        <VStack p="s12">
+          <Text variant="footnote">{text}</Text>
+        </VStack>
+      </Popover.Content>
+    </Popover>
+  )
+}

package/src/molecules/tooltip/tooltip.types.ts

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+export type TooltipProps = {
+  children: ReactNode
+  text: string
+  visible: boolean
+  onDismiss: () => void
+}
+
+export type TooltipComponent = (props: TooltipProps) => ReactNode

package/src/organisms/action-sheet/action-sheet.android.tsx

@@ -0,0 +1,35 @@
+import {Divider} from '../../atoms/divider'
+import {HStack} from '../../atoms/h-stack'
+import {Text} from '../../atoms/text'
+import {VStack} from '../../atoms/v-stack'
+import {useHostGuard} from '../../host-context'
+import {Sheet} from '../sheet'
+import type {ActionSheetComponent, ActionSheetProps} from './action-sheet.types'
+
+export const ActionSheet: ActionSheetComponent = ({actions, onDismiss, title, visible}: ActionSheetProps) => {
+  useHostGuard('ActionSheet')
+
+  return (
+    <Sheet onDismiss={onDismiss} visible={visible}>
+      <VStack p="s16" spacing="s4" wide>
+        <Text color="content.secondary" variant="labelMedium">
+          {title}
+        </Text>
+        <Divider />
+        {actions.map(action => (
+          <HStack
+            key={action.label}
+            onPress={() => {
+              onDismiss()
+              action.onPress()
+            }}
+            py="s12"
+            wide
+          >
+            <Text color={action.destructive ? 'content.destructive' : 'content.primary'}>{action.label}</Text>
+          </HStack>
+        ))}
+      </VStack>
+    </Sheet>
+  )
+}

package/src/organisms/action-sheet/action-sheet.ios.tsx

@@ -0,0 +1,29 @@
+import {Button, ConfirmationDialog} from '@expo/ui/swift-ui'
+
+import {useHostGuard} from '../../host-context'
+import type {ActionSheetComponent, ActionSheetProps} from './action-sheet.types'
+
+export const ActionSheet: ActionSheetComponent = ({actions, onDismiss, title, visible}: ActionSheetProps) => {
+  useHostGuard('ActionSheet')
+
+  return (
+    <ConfirmationDialog
+      isPresented={visible}
+      onIsPresentedChange={next => {
+        if (!next) {
+          onDismiss()
+        }
+      }}
+      title={title}
+    >
+      {actions.map(action => (
+        <Button
+          key={action.label}
+          label={action.label}
+          onPress={action.onPress}
+          role={action.destructive ? 'destructive' : 'default'}
+        />
+      ))}
+    </ConfirmationDialog>
+  )
+}

package/src/organisms/action-sheet/action-sheet.types.ts

@@ -0,0 +1,12 @@
+import type {ReactNode} from 'react'
+
+import type {MenuAction} from '../menu'
+
+export type ActionSheetProps = {
+  actions: MenuAction[]
+  onDismiss: () => void
+  title: string
+  visible: boolean
+}
+
+export type ActionSheetComponent = (props: ActionSheetProps) => ReactNode

package/src/organisms/action-sheet/index.ts

@@ -0,0 +1,2 @@
+export * from './action-sheet'
+export * from './action-sheet.types'

package/src/organisms/alert/alert.android.tsx

@@ -0,0 +1,74 @@
+import {AlertDialog, Text as ComposeText, TextButton} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import type {AlertComponent, AlertProps} from './alert.types'
+
+/**
+ * Material's `AlertDialog`, built from its slots — title, text, confirm and dismiss buttons. Content passed as plain
+ * children has no slot to land in, and the dialog draws empty. The actions mirror the iOS alert: the confirm label
+ * (in the destructive colour when asked) and Cancel.
+ */
+export const Alert: AlertComponent = ({
+  confirmLabel = 'OK',
+  destructive = false,
+  message,
+  onConfirm,
+  onDismiss,
+  title,
+  visible,
+}: AlertProps) => {
+  useHostGuard('Alert')
+  const theme = useAppTheme()
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <AlertDialog
+      colors={{
+        containerColor: theme.color('surface.primary'),
+        textContentColor: theme.color('content.secondary'),
+        titleContentColor: theme.color('content.primary'),
+      }}
+      onDismissRequest={onDismiss}
+    >
+      <AlertDialog.Title>
+        <ComposeText color={theme.colorString('content.primary')} style={theme.typography.headingXs}>
+          {title}
+        </ComposeText>
+      </AlertDialog.Title>
+      {message ? (
+        <AlertDialog.Text>
+          <ComposeText color={theme.colorString('content.secondary')} style={theme.typography.body}>
+            {message}
+          </ComposeText>
+        </AlertDialog.Text>
+      ) : null}
+      <AlertDialog.ConfirmButton>
+        <TextButton
+          onClick={() => {
+            // As on iOS, where any action closes the alert and reports it through `onDismiss`.
+            onConfirm?.()
+            onDismiss()
+          }}
+        >
+          <ComposeText
+            color={theme.colorString(destructive ? 'content.destructive' : 'content.accent')}
+            style={theme.typography.body}
+          >
+            {confirmLabel}
+          </ComposeText>
+        </TextButton>
+      </AlertDialog.ConfirmButton>
+      <AlertDialog.DismissButton>
+        <TextButton onClick={onDismiss}>
+          <ComposeText color={theme.colorString('content.accent')} style={theme.typography.body}>
+            Cancel
+          </ComposeText>
+        </TextButton>
+      </AlertDialog.DismissButton>
+    </AlertDialog>
+  )
+}

package/src/organisms/alert/alert.ios.tsx

@@ -0,0 +1,45 @@
+import {Button, Alert as SwiftUIAlert, Text as SwiftUIText} from '@expo/ui/swift-ui'
+
+import {useHostGuard} from '../../host-context'
+import type {AlertComponent, AlertProps} from './alert.types'
+
+export const Alert: AlertComponent = ({
+  confirmLabel = 'OK',
+  destructive = false,
+  message,
+  onConfirm,
+  onDismiss,
+  title,
+  visible,
+}: AlertProps) => {
+  useHostGuard('Alert')
+
+  return (
+    <SwiftUIAlert
+      isPresented={visible}
+      onIsPresentedChange={next => {
+        if (!next) {
+          onDismiss()
+        }
+      }}
+      title={title}
+    >
+      <SwiftUIAlert.Actions>
+        <Button label={confirmLabel} onPress={onConfirm ?? onDismiss} role={destructive ? 'destructive' : 'default'} />
+        <Button label="Cancel" onPress={onDismiss} role="cancel" />
+      </SwiftUIAlert.Actions>
+      {/*
+        `Alert.Message` is a native slot view, and a SwiftUI host cannot render a bare string — it
+        becomes a `RawText` node with no component view and trips an assertion in
+        `RCTComponentViewFactory`. The alert mounts even while dismissed (`visible` only drives
+        `isPresented`), so an unwrapped string here crashes on mount, not on open. Plain SwiftUI
+        `Text` rather than the themed atom, so the message keeps system alert styling.
+      */}
+      {message ? (
+        <SwiftUIAlert.Message>
+          <SwiftUIText>{message}</SwiftUIText>
+        </SwiftUIAlert.Message>
+      ) : null}
+    </SwiftUIAlert>
+  )
+}

package/src/organisms/alert/alert.types.ts

@@ -0,0 +1,13 @@
+import type {ReactNode} from 'react'
+
+export type AlertProps = {
+  confirmLabel?: string
+  destructive?: boolean
+  message?: string
+  onConfirm?: () => void
+  onDismiss: () => void
+  title: string
+  visible: boolean
+}
+
+export type AlertComponent = (props: AlertProps) => ReactNode

package/src/organisms/alert/index.ts

@@ -0,0 +1,2 @@
+export * from './alert'
+export * from './alert.types'

package/src/organisms/context-menu/context-menu.android.tsx

@@ -0,0 +1,90 @@
+import {Text as ComposeText, DropdownMenu, DropdownMenuItem, Host} from '@expo/ui/jetpack-compose'
+import {useSx} from '@hzblj/kara-sx'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useCallback, useState} from 'react'
+import {Pressable, StyleSheet, View} from 'react-native'
+import type {MenuAction} from '../menu'
+import type {ContextMenuComponent, ContextMenuExclusionProps, ContextMenuProps} from './context-menu.types'
+
+/**
+ * The menu's anchor: a point at the trigger's bottom start, so the dropdown opens just under it. The host lies outside
+ * the touch path — the dropdown is a popup window of its own, which takes its touches regardless.
+ */
+const styles = StyleSheet.create({
+  anchor: {bottom: 0, height: 1, left: 0, position: 'absolute', width: 1},
+})
+
+type MenuRowProps = {
+  action: MenuAction
+  onDismiss: () => void
+}
+
+/** A row's `onClick` closes over its own action, so memoising it needs a component per row. */
+const MenuRow = ({action, onDismiss}: MenuRowProps) => {
+  const theme = useAppTheme()
+
+  const onClick = useCallback(() => {
+    onDismiss()
+    action.onPress()
+  }, [action, onDismiss])
+
+  return (
+    <DropdownMenuItem onClick={onClick}>
+      <DropdownMenuItem.Text>
+        <ComposeText
+          color={theme.colorString(action.destructive ? 'content.destructive' : 'content.primary')}
+          style={theme.typography.body}
+        >
+          {action.label}
+        </ComposeText>
+      </DropdownMenuItem.Text>
+    </DropdownMenuItem>
+  )
+}
+
+/**
+ * The trigger stays a plain React Native subtree; a long press on it expands a Compose `DropdownMenu` anchored under
+ * it. The host behind the menu mounts on the first long press and stays — a list of triggers that are only scrolled
+ * past never builds one. `preview` and `onPreviewPress` are iOS-only: Material has no lifted preview.
+ */
+const ContextMenuRoot = ({actions, children, testID, ...props}: ContextMenuProps) => {
+  const {onPreviewPress: _onPreviewPress, preview: _preview, ...sx} = props
+  const theme = useAppTheme()
+  const style = useSx(sx)
+  const [isHostMounted, setIsHostMounted] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+
+  const open = useCallback(() => {
+    setIsHostMounted(true)
+    setExpanded(true)
+  }, [])
+
+  const dismiss = useCallback(() => setExpanded(false), [])
+
+  return (
+    <Pressable onLongPress={open} style={style} testID={testID}>
+      {children}
+      {isHostMounted ? (
+        <Host
+          colorScheme={theme.dark ? 'dark' : 'light'}
+          pointerEvents="none"
+          seedColor={theme.materialSeed}
+          style={styles.anchor}
+        >
+          <DropdownMenu expanded={expanded} onDismissRequest={dismiss}>
+            <DropdownMenu.Items>
+              {actions.map(action => (
+                <MenuRow action={action} key={action.label} onDismiss={dismiss} />
+              ))}
+            </DropdownMenu.Items>
+          </DropdownMenu>
+        </Host>
+      ) : null}
+    </Pressable>
+  )
+}
+
+/** A touchable inside the trigger already claims its own long press on Android, so this only has to group. */
+const Exclusion = ({children}: ContextMenuExclusionProps) => <View>{children}</View>
+
+export const ContextMenu: ContextMenuComponent = Object.assign(ContextMenuRoot, {Exclusion})

package/src/organisms/context-menu/context-menu.ios.tsx

@@ -0,0 +1,46 @@
+import {iconResourceName} from '@hzblj/kara-native'
+import {
+  type ContextMenuItem,
+  ContextMenu as NativeContextMenu,
+  ContextMenuExclusion as NativeContextMenuExclusion,
+} from '@hzblj/kara-native/swift-ui'
+import {useSx} from '@hzblj/kara-sx'
+import {useCallback, useMemo} from 'react'
+import type {ContextMenuComponent, ContextMenuExclusionProps, ContextMenuProps} from './context-menu.types'
+
+const ContextMenuRoot = ({actions, children, onPreviewPress, preview, testID, ...sx}: ContextMenuProps) => {
+  const style = useSx(sx)
+
+  /** The native side hands back an id; the index is the one identity every action has. */
+  const items = useMemo<ContextMenuItem[]>(
+    () =>
+      actions.map((action, index) => ({
+        destructive: action.destructive,
+        id: String(index),
+        image: action.icon ? iconResourceName(action.icon) : undefined,
+        title: action.label,
+      })),
+    [actions]
+  )
+
+  const onSelectItem = useCallback((id: string) => actions[Number(id)]?.onPress(), [actions])
+
+  return (
+    <NativeContextMenu
+      items={items}
+      onPreviewPress={onPreviewPress}
+      onSelectItem={onSelectItem}
+      preview={preview}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </NativeContextMenu>
+  )
+}
+
+const Exclusion = ({children}: ContextMenuExclusionProps) => (
+  <NativeContextMenuExclusion>{children}</NativeContextMenuExclusion>
+)
+
+export const ContextMenu: ContextMenuComponent = Object.assign(ContextMenuRoot, {Exclusion})

package/src/organisms/context-menu/context-menu.types.ts

@@ -0,0 +1,36 @@
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {ReactNode} from 'react'
+import type {MenuAction} from '../menu'
+
+/**
+ * A context menu on a React Native subtree — a card in a list, say — opened by a long press. iOS: a
+ * `UIContextMenuInteraction`, with an optional React Native `preview` lifted while the menu is open and a callback for
+ * a tap on it. Android: a Material dropdown under the subtree. The trigger is ordinary React Native layout, so it
+ * needs no `Screen` or `Island`.
+ */
+export type ContextMenuProps = ResponsiveViewSx & {
+  actions: MenuAction[]
+  /** The trigger, laid out as usual. */
+  children: ReactNode
+  /** iOS: the user tapped the lifted preview, committing to it — open the detail the card stands for. */
+  onPreviewPress?: () => void
+  /**
+   * iOS: lifted in place of the trigger while the menu is open — a larger version of the card, say. A snapshot of the
+   * trigger when unset. Mounted only once a finger has rested on the trigger, so a list of cards does not pay for
+   * every preview up front.
+   */
+  preview?: ReactNode
+  testID?: string
+}
+
+export type ContextMenuExclusionProps = {
+  children: ReactNode
+}
+
+export type ContextMenuComponent = ((props: ContextMenuProps) => ReactNode) & {
+  /**
+   * A region of the trigger that must not open the menu — a button inside the card. On iOS the interaction covers the
+   * whole trigger, so a long press on that button would otherwise open the card's menu.
+   */
+  Exclusion: (props: ContextMenuExclusionProps) => ReactNode
+}

package/src/organisms/context-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './context-menu'
+export * from './context-menu.types'

package/src/organisms/fab-menu/fab-menu.android.tsx

@@ -0,0 +1,79 @@
+import {Text as ComposeText} from '@expo/ui/jetpack-compose'
+import {
+  FloatingActionButtonMenu,
+  FloatingActionButtonMenuItem,
+  ToggleFloatingActionButton,
+} from '@hzblj/kara-native/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useCallback, useState} from 'react'
+import {Icon} from '../../atoms/icon'
+import {Glyph} from '../../glyph'
+import {useHostGuard} from '../../host-context'
+import type {MenuAction} from '../menu'
+import type {FabMenuComponent, FabMenuProps} from './fab-menu.types'
+
+type FabMenuRowProps = {
+  action: MenuAction
+  onSelect: (action: MenuAction) => void
+}
+
+/** A row's `onClick` closes over its own action, so memoising it needs a component per row. */
+const FabMenuRow = ({action, onSelect}: FabMenuRowProps) => {
+  const theme = useAppTheme()
+  const onClick = useCallback(() => onSelect(action), [action, onSelect])
+
+  return (
+    <FloatingActionButtonMenuItem
+      containerColor={theme.color('fill.accent.primary')}
+      contentColor={theme.color('content.on.bg')}
+      onClick={onClick}
+    >
+      {action.icon ? (
+        <FloatingActionButtonMenuItem.Icon>
+          <Icon color="content.on.bg" name={action.icon} />
+        </FloatingActionButtonMenuItem.Icon>
+      ) : null}
+      <FloatingActionButtonMenuItem.Text>
+        <ComposeText color={theme.colorString('content.on.bg')} style={theme.typography.labelMedium}>
+          {action.label}
+        </ComposeText>
+      </FloatingActionButtonMenuItem.Text>
+    </FloatingActionButtonMenuItem>
+  )
+}
+
+/**
+ * The menu fills its host and pins itself to the bottom end, so give it the corner of a screen — a `ZStack` over the
+ * content — rather than a row of its own. The pills take the button's colours, so the menu reads as the button
+ * unfolding rather than a second surface.
+ */
+export const FabMenu: FabMenuComponent = ({actions, icon}: FabMenuProps) => {
+  useHostGuard('FabMenu')
+
+  const theme = useAppTheme()
+  const [expanded, setExpanded] = useState(false)
+
+  const onSelect = useCallback((action: MenuAction) => {
+    setExpanded(false)
+    action.onPress()
+  }, [])
+
+  return (
+    <FloatingActionButtonMenu expanded={expanded} horizontalAlignment="end">
+      <FloatingActionButtonMenu.Button>
+        <ToggleFloatingActionButton
+          checked={expanded}
+          containerColor={theme.color('fill.accent.primary')}
+          onCheckedChange={setExpanded}
+        >
+          <ToggleFloatingActionButton.Icon>
+            {icon ? <Icon color="content.on.bg" name={icon} /> : <Glyph color="content.on.bg" name="plus" />}
+          </ToggleFloatingActionButton.Icon>
+        </ToggleFloatingActionButton>
+      </FloatingActionButtonMenu.Button>
+      {actions.map(action => (
+        <FabMenuRow action={action} key={action.label} onSelect={onSelect} />
+      ))}
+    </FloatingActionButtonMenu>
+  )
+}

package/src/organisms/fab-menu/fab-menu.ios.tsx

@@ -0,0 +1,44 @@
+import {Button, Image, Label, Menu} from '@expo/ui/swift-ui'
+import {iconResourceName} from '@hzblj/kara-native'
+
+import {Icon} from '../../atoms/icon'
+import {VStack} from '../../atoms/v-stack'
+import {Glyph} from '../../glyph'
+import {useHostGuard} from '../../host-context'
+import type {FabMenuComponent, FabMenuProps} from './fab-menu.types'
+
+/** Matches `Fab`, so a screen can switch between the two without the button changing shape. */
+const FAB_SIZE = 56
+
+export const FabMenu: FabMenuComponent = ({actions, icon, testID}: FabMenuProps) => {
+  useHostGuard('FabMenu')
+
+  return (
+    <Menu
+      label={
+        <VStack
+          align="center"
+          bg="fill.accent.primary"
+          borderRadius="full"
+          h={FAB_SIZE}
+          p="s16"
+          shadow="btn.accent"
+          w={FAB_SIZE}
+        >
+          {icon ? <Icon color="content.on.bg" name={icon} /> : <Glyph color="content.on.bg" name="plus" />}
+        </VStack>
+      }
+      testID={testID}
+    >
+      {actions.map(action => (
+        <Button key={action.label} onPress={action.onPress} role={action.destructive ? 'destructive' : 'default'}>
+          {/* A menu row is the system's Label: our icon is its image, from the asset catalog, and UIKit sizes it. */}
+          <Label
+            icon={action.icon ? <Image assetName={iconResourceName(action.icon)} /> : undefined}
+            title={action.label}
+          />
+        </Button>
+      ))}
+    </Menu>
+  )
+}

package/src/organisms/fab-menu/fab-menu.types.ts

@@ -0,0 +1,18 @@
+import type {ReactNode} from 'react'
+
+import type {IconName} from '../../atoms/icon'
+import type {MenuAction} from '../menu'
+
+/**
+ * A floating action button that unfolds into its actions. Android: Material 3 Expressive's `FloatingActionButtonMenu`
+ * — the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the label
+ * of a SwiftUI `Menu`. A native atom — it renders inside `<Screen>` or `<Island>`.
+ */
+export type FabMenuProps = {
+  actions: MenuAction[]
+  /** The closed button's icon — one of the app's. A plus by default. */
+  icon?: IconName
+  testID?: string
+}
+
+export type FabMenuComponent = (props: FabMenuProps) => ReactNode

package/src/organisms/fab-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './fab-menu'
+export * from './fab-menu.types'

package/src/organisms/form/form.android.tsx

@@ -0,0 +1,33 @@
+import {Card} from '../../atoms/card'
+import {Text} from '../../atoms/text'
+import {VStack} from '../../atoms/v-stack'
+import {useHostGuard} from '../../host-context'
+import type {FormComponent, FormProps, FormSectionProps} from './form.types'
+
+const FormRoot = ({children, testID}: FormProps) => {
+  useHostGuard('Form')
+
+  return (
+    <VStack spacing="s16" testID={testID} wide>
+      {children}
+    </VStack>
+  )
+}
+
+const FormSection = ({children, footer, title}: FormSectionProps) => (
+  <VStack spacing="s4" wide>
+    {title ? (
+      <Text color="content.secondary" transform="uppercase" variant="labelMedium">
+        {title}
+      </Text>
+    ) : null}
+    <Card wide>{children}</Card>
+    {footer ? (
+      <Text color="content.tertiary" variant="footnote">
+        {footer}
+      </Text>
+    ) : null}
+  </VStack>
+)
+
+export const Form: FormComponent = Object.assign(FormRoot, {Section: FormSection})

package/src/organisms/form/form.ios.tsx

@@ -0,0 +1,18 @@
+import {Section, Form as SwiftUIForm} from '@expo/ui/swift-ui'
+import {Text} from '../../atoms/text'
+import {useHostGuard} from '../../host-context'
+import type {FormComponent, FormProps, FormSectionProps} from './form.types'
+
+const FormRoot = ({children, testID}: FormProps) => {
+  useHostGuard('Form')
+
+  return <SwiftUIForm testID={testID}>{children}</SwiftUIForm>
+}
+
+const FormSection = ({children, footer, title}: FormSectionProps) => (
+  <Section footer={footer ? <Text variant="footnote">{footer}</Text> : undefined} title={title}>
+    {children}
+  </Section>
+)
+
+export const Form: FormComponent = Object.assign(FormRoot, {Section: FormSection})