@hzblj/kara-components 0.0.0-stage → 0.1.0

package/src/molecules/scroll-edge-container/scroll-edge-container.ios.tsx

@@ -0,0 +1,32 @@
+import {ScrollEdgeContainer as NativeScrollEdgeContainer} from '@hzblj/kara-native/swift-ui'
+import {useSx} from '@hzblj/kara-sx'
+import type {ScrollEdgeContainerComponent, ScrollEdgeContainerProps} from './scroll-edge-container.types'
+
+/**
+ * Below iOS 26 the native container still lays the bars out as insets, just without the effect — so a bar wants a
+ * background of its own there; `isScrollEdgeEffectAvailable()` says which case applies.
+ */
+export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
+  automaticInsets,
+  bottomBar,
+  children,
+  effect,
+  testID,
+  topBar,
+  ...sx
+}: ScrollEdgeContainerProps) => {
+  const style = useSx(sx)
+
+  return (
+    <NativeScrollEdgeContainer
+      automaticInsets={automaticInsets}
+      bottomBar={bottomBar}
+      effect={effect}
+      style={style}
+      testID={testID}
+      topBar={topBar}
+    >
+      {children}
+    </NativeScrollEdgeContainer>
+  )
+}

package/src/molecules/scroll-edge-container/scroll-edge-container.types.ts

@@ -0,0 +1,26 @@
+import type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-native/swift-ui'
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {ReactElement, ReactNode} from 'react'
+
+export type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-native/swift-ui'
+
+/**
+ * Bars over one React Native scroll view, with the iOS 26 scroll edge effect under them — the system's progressive
+ * blur where content scrolls past a bar. The React Native tier: it needs no host.
+ */
+export type ScrollEdgeContainerProps = ResponsiveViewSx & {
+  /**
+   * iOS: adds the bars' heights to the scroll view's own `contentInset` and starts it at the top of that inset, so the
+   * content begins below the top bar and scrolls under it. On by default.
+   */
+  automaticInsets?: boolean
+  bottomBar?: ReactNode
+  /** Exactly one React Native scroll view — `RnScrollView`, `RnFlatList`, `RnSectionList`. */
+  children: ReactElement<ScrollEdgeScrollableProps>
+  /** iOS 26: how hard the edge cuts. `soft` by default. */
+  effect?: ScrollEdgeEffect
+  testID?: string
+  topBar?: ReactNode
+}
+
+export type ScrollEdgeContainerComponent = (props: ScrollEdgeContainerProps) => ReactNode

package/src/molecules/search-bar/index.ts

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

package/src/molecules/search-bar/search-bar.tsx

@@ -0,0 +1,49 @@
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {TextInput} from 'react-native'
+
+import {Box} from '../../atoms/box'
+import {Icon} from '../../atoms/icon'
+import {Island} from '../../atoms/island'
+import {Pressable} from '../../atoms/pressable'
+import type {SearchBarComponent, SearchBarProps} from './search-bar.types'
+
+export const SearchBar: SearchBarComponent = ({
+  onChangeText,
+  placeholder = 'Search',
+  testID,
+  value,
+}: SearchBarProps) => {
+  const theme = useAppTheme()
+
+  return (
+    <Box
+      align="center"
+      bg="fill.quaternary"
+      borderRadius="medium"
+      flexDirection="row"
+      gap="s8"
+      px="s12"
+      py="s8"
+      testID={testID}
+      wide
+    >
+      <Island style={{height: spacing.s20, width: spacing.s20}}>
+        <Icon color="content.tertiary" name="search" size="s20" />
+      </Island>
+      <TextInput
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={theme.color('content.quaternary')}
+        style={[theme.typography.body, {color: theme.color('content.primary'), flex: 1, padding: 0}]}
+        value={value}
+      />
+      {value.length > 0 ? (
+        <Pressable onPress={() => onChangeText?.('')}>
+          <Island style={{height: spacing.s20, width: spacing.s20}}>
+            <Icon color="content.tertiary" name="close" size="s20" />
+          </Island>
+        </Pressable>
+      ) : null}
+    </Box>
+  )
+}

package/src/molecules/search-bar/search-bar.types.ts

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+export type SearchBarProps = {
+  onChangeText?: (text: string) => void
+  placeholder?: string
+  testID?: string
+  value: string
+}
+
+export type SearchBarComponent = (props: SearchBarProps) => ReactNode

package/src/molecules/stepper/index.ts

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

package/src/molecules/stepper/stepper.android.tsx

@@ -0,0 +1,31 @@
+import {useCallback} from 'react'
+import {HStack} from '../../atoms/h-stack'
+import {IconButton} from '../../atoms/icon-button'
+import {Spacer} from '../../atoms/spacer'
+import {Text} from '../../atoms/text'
+import {useHostGuard} from '../../host-context'
+import type {StepperComponent, StepperProps} from './stepper.types'
+
+export const Stepper: StepperComponent = ({
+  label,
+  max = Number.MAX_SAFE_INTEGER,
+  min = Number.MIN_SAFE_INTEGER,
+  onValueChange,
+  step = 1,
+  value,
+}: StepperProps) => {
+  useHostGuard('Stepper')
+
+  const onDecrement = useCallback(() => onValueChange(Math.max(min, value - step)), [min, onValueChange, step, value])
+  const onIncrement = useCallback(() => onValueChange(Math.min(max, value + step)), [max, onValueChange, step, value])
+
+  return (
+    <HStack align="center" spacing="s8" wide>
+      <Text>{label}</Text>
+      <Spacer />
+      <IconButton disabled={value <= min} name="close" onPress={onDecrement} />
+      <Text variant="labelMedium">{String(value)}</Text>
+      <IconButton disabled={value >= max} name="add" onPress={onIncrement} />
+    </HStack>
+  )
+}

package/src/molecules/stepper/stepper.ios.tsx

@@ -0,0 +1,10 @@
+import {Stepper as SwiftUIStepper} from '@expo/ui/swift-ui'
+
+import {useHostGuard} from '../../host-context'
+import type {StepperComponent, StepperProps} from './stepper.types'
+
+export const Stepper: StepperComponent = ({label, max, min, onValueChange, step = 1, value}: StepperProps) => {
+  useHostGuard('Stepper')
+
+  return <SwiftUIStepper label={label} max={max} min={min} onValueChange={onValueChange} step={step} value={value} />
+}

package/src/molecules/stepper/stepper.types.ts

@@ -0,0 +1,12 @@
+import type {ReactNode} from 'react'
+
+export type StepperProps = {
+  label: string
+  max?: number
+  min?: number
+  onValueChange: (value: number) => void
+  step?: number
+  value: number
+}
+
+export type StepperComponent = (props: StepperProps) => ReactNode

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,37 @@
+import {AlertDialog, Button, Column, Text as ComposeText} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import type {AlertComponent, AlertProps} from './alert.types'
+
+export const Alert: AlertComponent = ({
+  confirmLabel = 'OK',
+  message,
+  onConfirm,
+  onDismiss,
+  title,
+  visible,
+}: AlertProps) => {
+  useHostGuard('Alert')
+  const theme = useAppTheme()
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <AlertDialog onDismissRequest={onDismiss}>
+      <Column verticalArrangement={{spacedBy: 8}}>
+        <ComposeText color={theme.colorString('content.primary')} style={theme.typography.headingXs}>
+          {title}
+        </ComposeText>
+        {message ? (
+          <ComposeText color={theme.colorString('content.secondary')} style={theme.typography.body}>
+            {message}
+          </ComposeText>
+        ) : null}
+        <Button onClick={onConfirm ?? onDismiss}>{confirmLabel}</Button>
+      </Column>
+    </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,56 @@
+import {Column, Text as ComposeText, DropdownMenu} from '@expo/ui/jetpack-compose'
+import {clickable, combinedClickable} from '@expo/ui/jetpack-compose/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useCallback, useMemo, useState} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {MenuAction} from '../menu'
+import type {ContextMenuComponent, ContextMenuProps} from './context-menu.types'
+
+type MenuItemProps = {
+  action: MenuAction
+  onDismiss: () => void
+}
+
+/** A row's `clickable` closes over its own action, so memoising it needs a component per row. */
+const MenuItem = ({action, onDismiss}: MenuItemProps) => {
+  const theme = useAppTheme()
+  const modifiers = useMemo(
+    () => [
+      clickable(() => {
+        onDismiss()
+        action.onPress()
+      }),
+    ],
+    [action, onDismiss]
+  )
+
+  return (
+    <ComposeText
+      color={theme.colorString(action.destructive ? 'content.destructive' : 'content.primary')}
+      modifiers={modifiers}
+      style={theme.typography.body}
+    >
+      {action.label}
+    </ComposeText>
+  )
+}
+
+export const ContextMenu: ContextMenuComponent = ({actions, children}: ContextMenuProps) => {
+  useHostGuard('ContextMenu')
+
+  const [expanded, setExpanded] = useState(false)
+  const dismiss = useCallback(() => setExpanded(false), [])
+  const triggerModifiers = useMemo(() => [combinedClickable({onLongClick: () => setExpanded(true)})], [])
+
+  return (
+    <Column>
+      <Column modifiers={triggerModifiers}>{children}</Column>
+      <DropdownMenu expanded={expanded} onDismissRequest={dismiss}>
+        {actions.map(action => (
+          <MenuItem action={action} key={action.label} onDismiss={dismiss} />
+        ))}
+      </DropdownMenu>
+    </Column>
+  )
+}

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

@@ -0,0 +1,24 @@
+import {Button, ContextMenu as SwiftUIContextMenu} from '@expo/ui/swift-ui'
+
+import {useHostGuard} from '../../host-context'
+import type {ContextMenuComponent, ContextMenuProps} from './context-menu.types'
+
+export const ContextMenu: ContextMenuComponent = ({actions, children}: ContextMenuProps) => {
+  useHostGuard('ContextMenu')
+
+  return (
+    <SwiftUIContextMenu>
+      <SwiftUIContextMenu.Items>
+        {actions.map(action => (
+          <Button
+            key={action.label}
+            label={action.label}
+            onPress={action.onPress}
+            role={action.destructive ? 'destructive' : 'default'}
+          />
+        ))}
+      </SwiftUIContextMenu.Items>
+      <SwiftUIContextMenu.Trigger>{children}</SwiftUIContextMenu.Trigger>
+    </SwiftUIContextMenu>
+  )
+}

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

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+import type {MenuAction} from '../menu'
+
+export type ContextMenuProps = {
+  actions: MenuAction[]
+  children: ReactNode
+}
+
+export type ContextMenuComponent = (props: ContextMenuProps) => 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,78 @@
+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 {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 = 'add'}: 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 color="content.on.bg" name={icon} />
+          </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,43 @@
+import {Button, Menu} from '@expo/ui/swift-ui'
+import type {SFSymbol} from 'sf-symbols-typescript'
+
+import {Icon, SF_SYMBOLS} from '../../atoms/icon'
+import {VStack} from '../../atoms/v-stack'
+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 = 'add', 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 color="content.on.bg" name={icon} />
+        </VStack>
+      }
+      testID={testID}
+    >
+      {actions.map(action => (
+        <Button
+          key={action.label}
+          label={action.label}
+          onPress={action.onPress}
+          role={action.destructive ? 'destructive' : 'default'}
+          systemImage={action.icon ? (SF_SYMBOLS[action.icon] as SFSymbol) : undefined}
+        />
+      ))}
+    </Menu>
+  )
+}