@hzblj/kara-components 0.0.0-stage → 0.1.0

package/src/atoms/badge/badge.ios.tsx

@@ -0,0 +1,20 @@
+import {HStack} from '@expo/ui/swift-ui'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useHostGuard} from '../../host-context'
+import {Text} from '../text'
+import type {BadgeComponent, BadgeProps} from './badge.types'
+import {BADGE_TOKENS} from './badge-tokens'
+
+export const Badge: BadgeComponent = ({label, tone = 'neutral'}: BadgeProps) => {
+  useHostGuard('Badge')
+  const tokens = BADGE_TOKENS[tone]
+  const modifiers = useSxModifiers({bg: tokens.fill, borderRadius: 'full', px: 's8', py: 's2'})
+
+  return (
+    <HStack modifiers={modifiers}>
+      <Text color={tokens.content} variant="labelMedium">
+        {label}
+      </Text>
+    </HStack>
+  )
+}

package/src/atoms/badge/badge.types.ts

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+export type BadgeTone = 'accent' | 'destructive' | 'neutral' | 'success'
+
+export type BadgeProps = {
+  label: string
+  tone?: BadgeTone
+}
+
+export type BadgeComponent = (props: BadgeProps) => ReactNode

package/src/atoms/badge/index.ts

@@ -0,0 +1,3 @@
+export * from './badge'
+export * from './badge.types'
+export * from './badge-tokens'

package/src/atoms/box/a-box.ts

@@ -0,0 +1,5 @@
+import Animated from 'react-native-reanimated'
+
+import {Box} from './box'
+
+export const ABox = Animated.createAnimatedComponent(Box)

package/src/atoms/box/box.tsx

@@ -0,0 +1,8 @@
+import {sx} from '@hzblj/kara-sx'
+import {View} from 'react-native'
+
+/**
+ * A React Native `View` that takes the design system's `sx` props. The `sx()` HOC is the whole
+ * implementation — Box is just its first caller, and any other style-taking component gets the same.
+ */
+export const Box = sx(View)

package/src/atoms/box/box.types.ts

@@ -0,0 +1,6 @@
+import type {ComponentProps} from 'react'
+
+import type {Box} from './box'
+
+/** Derived from the component itself, so it cannot drift from what `sx(View)` actually accepts. */
+export type BoxProps = ComponentProps<typeof Box>

package/src/atoms/box/index.ts

@@ -0,0 +1,3 @@
+export * from './a-box'
+export * from './box'
+export * from './box.types'

package/src/atoms/button/button-tokens.ts

@@ -0,0 +1,35 @@
+import type {ColorToken, ShadowName, Theme} from '@hzblj/kara-theme'
+
+import type {ButtonVariant} from './button.types'
+
+type ButtonTokens = {
+  content: ColorToken
+  fill: ColorToken
+  shadow: ShadowName
+}
+
+const TOKENS = {
+  accent: {content: 'content.on.bg', fill: 'fill.accent.primary', shadow: 'btn.accent'},
+  destructive: {content: 'content.on.destructive', fill: 'fill.destructive.primary', shadow: 'btn.destructive'},
+  glass: {content: 'content.primary', fill: 'btn.bg.glass.base', shadow: 'btn.glass'},
+  secondary: {content: 'content.primary', fill: 'btn.bg.secondary.base', shadow: 'btn.secondary'},
+} as const satisfies Record<ButtonVariant, ButtonTokens>
+
+export const buttonTokens = (variant: ButtonVariant, disabled: boolean, theme: Theme) => {
+  const tokens = TOKENS[variant]
+
+  if (!disabled) {
+    return tokens
+  }
+
+  const disabledFill = {
+    accent: 'fill.accent.disabled',
+    destructive: 'fill.destructive.disabled',
+    glass: 'btn.bg.glass.disabled',
+    secondary: 'btn.bg.secondary.disabled',
+  } as const satisfies Record<ButtonVariant, ColorToken>
+
+  void theme
+
+  return {content: 'btn.content.disabled', fill: disabledFill[variant], shadow: tokens.shadow} as const
+}

package/src/atoms/button/button.android.tsx

@@ -0,0 +1,36 @@
+import {Button as ComposeButton} from '@expo/ui/jetpack-compose'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useHostGuard} from '../../host-context'
+import type {ButtonComponent, ButtonProps} from './button.types'
+import {buttonTokens} from './button-tokens'
+
+export const Button: ButtonComponent = ({
+  disabled = false,
+  label,
+  onPress,
+  testID,
+  variant = 'accent',
+  wide = true,
+}: ButtonProps) => {
+  useHostGuard('Button')
+  const theme = useAppTheme()
+  const tokens = buttonTokens(variant, disabled, theme)
+  const modifiers = useSxModifiers({borderRadius: 'medium', shadow: tokens.shadow, wide})
+
+  return (
+    <ComposeButton
+      colors={{
+        containerColor: theme.color(tokens.fill),
+        contentColor: theme.color(tokens.content),
+        disabledContainerColor: theme.color(tokens.fill),
+        disabledContentColor: theme.color(tokens.content),
+      }}
+      enabled={!disabled}
+      modifiers={modifiers}
+      onClick={onPress}
+    >
+      {label}
+    </ComposeButton>
+  )
+}

package/src/atoms/button/button.ios.tsx

@@ -0,0 +1,86 @@
+import {Button as SwiftUIButton} from '@expo/ui/swift-ui'
+import {
+  buttonStyle as buttonStyleModifier,
+  controlSize as controlSizeModifier,
+  disabled as disabledModifier,
+  glassEffect as glassEffectModifier,
+  tint as tintModifier,
+} from '@expo/ui/swift-ui/modifiers'
+import {type ColorToken, useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import {Text} from '../text'
+import {VStack} from '../v-stack'
+import type {ButtonComponent, ButtonProps, ButtonStyleName, ButtonVariant} from './button.types'
+import {buttonTokens} from './button-tokens'
+
+const STYLE_BY_VARIANT = {
+  accent: 'borderedProminent',
+  destructive: 'borderedProminent',
+  glass: 'glass',
+  secondary: 'bordered',
+} as const satisfies Record<ButtonVariant, ButtonStyleName>
+
+const TINT_BY_VARIANT = {
+  accent: 'fill.accent.primary',
+  destructive: 'fill.destructive.primary',
+  glass: undefined,
+  secondary: undefined,
+} as const satisfies Record<ButtonVariant, ColorToken | undefined>
+
+export const Button: ButtonComponent = ({
+  buttonStyle,
+  controlSize = 'large',
+  disabled = false,
+  label,
+  onPress,
+  testID,
+  tint,
+  variant = 'accent',
+  wide = true,
+}: ButtonProps) => {
+  useHostGuard('Button')
+  const theme = useAppTheme()
+  const tokens = buttonTokens(variant, disabled, theme)
+  const resolvedTint = tint ?? TINT_BY_VARIANT[variant]
+  const style = buttonStyle ?? STYLE_BY_VARIANT[variant]
+
+  /**
+   * `.glass` ignores `.tint` — colouring the material is `.glassEffect(.regular.tint(…))`, a different
+   * modifier that only lands on a button once the style stops drawing its own material. So a tinted
+   * glass button is a plain one wearing the effect, and `interactive` is what buys back the press
+   * response the style would have given it.
+   *
+   * `plain` has no chrome for `controlSize` to size, so the label carries the padding that gives the
+   * button its height — without it a tinted glass button comes out shorter than every other variant.
+   */
+  const glassTint = style === 'glass' && resolvedTint ? theme.color(resolvedTint) : undefined
+
+  const modifiers = useMemo(() => {
+    const list = [buttonStyleModifier(glassTint ? 'plain' : style), controlSizeModifier(controlSize)]
+
+    if (glassTint) {
+      list.push(
+        glassEffectModifier({glass: {interactive: true, tint: glassTint, variant: 'regular'}, shape: 'capsule'})
+      )
+    } else if (resolvedTint) {
+      list.push(tintModifier(theme.color(resolvedTint)))
+    }
+
+    if (disabled) {
+      list.push(disabledModifier(true))
+    }
+
+    return list
+  }, [controlSize, disabled, glassTint, resolvedTint, style, theme])
+
+  return (
+    <SwiftUIButton modifiers={modifiers} onPress={onPress} testID={testID}>
+      <VStack align="center" py={glassTint ? 's16' : undefined} wide={wide}>
+        <Text color={tokens.content} variant="body">
+          {label}
+        </Text>
+      </VStack>
+    </SwiftUIButton>
+  )
+}

package/src/atoms/button/button.types.ts

@@ -0,0 +1,42 @@
+import type {ColorToken} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'secondary'
+
+/**
+ * SwiftUI `ButtonStyle`. iOS only — Compose has no equivalent, so Android ignores it and keeps
+ * rendering the variant's tokens.
+ */
+export type ButtonStyleName =
+  | 'automatic'
+  | 'bordered'
+  | 'borderedProminent'
+  | 'borderless'
+  | 'glass'
+  | 'glassProminent'
+  | 'plain'
+
+/**
+ * SwiftUI `ControlSize`. iOS only, and it has no `automatic` member — leave it unset to inherit
+ * whatever the surrounding SwiftUI environment provides.
+ */
+export type ButtonControlSize = 'extraLarge' | 'large' | 'mini' | 'regular' | 'small'
+
+export type ButtonProps = {
+  buttonStyle?: ButtonStyleName
+  controlSize?: ButtonControlSize
+  disabled?: boolean
+  label: string
+  onPress?: () => void
+  testID?: string
+  /**
+   * Overrides the variant's own tint. A prominent style takes it as the fill and picks a contrasting
+   * label. `glass` has to reach the material through `glassEffect` instead, so tinting one costs it
+   * the stock `.glass` style — see the iOS implementation.
+   */
+  tint?: ColorToken
+  variant?: ButtonVariant
+  wide?: boolean
+}
+
+export type ButtonComponent = (props: ButtonProps) => ReactNode

package/src/atoms/button/index.ts

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

package/src/atoms/card/card.android.tsx

@@ -0,0 +1,17 @@
+import {Column} from '@expo/ui/jetpack-compose'
+import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {CardComponent, CardProps} from './card.types'
+
+export const Card: CardComponent = ({children, testID, ...sx}: CardProps) => {
+  useHostGuard('Card')
+  const sxModifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', shadow: 'card', ...sx})
+  const modifiers = useMemo(
+    () => (testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers),
+    [sxModifiers, testID]
+  )
+
+  return <Column modifiers={modifiers}>{children}</Column>
+}

package/src/atoms/card/card.ios.tsx

@@ -0,0 +1,15 @@
+import {VStack} from '@expo/ui/swift-ui'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useHostGuard} from '../../host-context'
+import type {CardComponent, CardProps} from './card.types'
+
+export const Card: CardComponent = ({children, testID, ...sx}: CardProps) => {
+  useHostGuard('Card')
+  const modifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', shadow: 'card', ...sx})
+
+  return (
+    <VStack alignment="leading" modifiers={modifiers} testID={testID}>
+      {children}
+    </VStack>
+  )
+}

package/src/atoms/card/card.types.ts

@@ -0,0 +1,9 @@
+import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {ReactNode} from 'react'
+
+export type CardProps = ResponsiveSx & {
+  children?: ReactNode
+  testID?: string
+}
+
+export type CardComponent = (props: CardProps) => ReactNode

package/src/atoms/card/index.ts

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

package/src/atoms/checkbox/checkbox.android.tsx

@@ -0,0 +1,24 @@
+import {Checkbox as ComposeCheckbox, Row, Text} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import type {CheckboxComponent, CheckboxProps} from './checkbox.types'
+
+export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueChange, value}: CheckboxProps) => {
+  useHostGuard('Checkbox')
+  const theme = useAppTheme()
+  const control = <ComposeCheckbox enabled={!disabled} onCheckedChange={onValueChange} value={value} />
+
+  if (!label) {
+    return control
+  }
+
+  return (
+    <Row verticalAlignment="center">
+      {control}
+      <Text color={theme.colorString('content.primary')} style={theme.typography.body}>
+        {label}
+      </Text>
+    </Row>
+  )
+}

package/src/atoms/checkbox/checkbox.ios.tsx

@@ -0,0 +1,24 @@
+import {Toggle} from '@expo/ui/swift-ui'
+import {disabled as disabledModifier, tint} from '@expo/ui/swift-ui/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {CheckboxComponent, CheckboxProps} from './checkbox.types'
+
+export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueChange, value}: CheckboxProps) => {
+  useHostGuard('Checkbox')
+  const theme = useAppTheme()
+
+  const modifiers = useMemo(() => {
+    const list = [tint(theme.color('fill.accent.primary'))]
+
+    if (disabled) {
+      list.push(disabledModifier(true))
+    }
+
+    return list
+  }, [disabled, theme])
+
+  return <Toggle isOn={value} label={label} modifiers={modifiers} onIsOnChange={onValueChange} />
+}

package/src/atoms/checkbox/checkbox.types.ts

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+export type CheckboxProps = {
+  disabled?: boolean
+  label?: string
+  onValueChange?: (value: boolean) => void
+  value: boolean
+}
+
+export type CheckboxComponent = (props: CheckboxProps) => ReactNode

package/src/atoms/checkbox/index.ts

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

package/src/atoms/chip/chip.tsx

@@ -0,0 +1,23 @@
+import {Pressable} from '../pressable'
+import {RnText} from '../rn-text'
+import type {ChipComponent, ChipProps} from './chip.types'
+
+export const Chip: ChipComponent = ({label, onPress, selected = false, testID}: ChipProps) => (
+  <Pressable
+    align="center"
+    bg={selected ? 'fill.accent.base' : 'fill.tertiary'}
+    borderColor={selected ? 'border.accent' : 'border.tertiary'}
+    borderRadius="full"
+    borderWidth={1}
+    haptic
+    justify="center"
+    onPress={onPress}
+    px="s12"
+    py="s6"
+    testID={testID}
+  >
+    <RnText color={selected ? 'content.accent' : 'content.secondary'} variant="labelMedium">
+      {label}
+    </RnText>
+  </Pressable>
+)

package/src/atoms/chip/chip.types.ts

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+export type ChipProps = {
+  label: string
+  onPress?: () => void
+  selected?: boolean
+  testID?: string
+}
+
+export type ChipComponent = (props: ChipProps) => ReactNode

package/src/atoms/chip/index.ts

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

package/src/atoms/color-picker/color-picker.android.tsx

@@ -0,0 +1,9 @@
+import {warnUnsupported} from '../../platform-support'
+import type {ColorPickerComponent} from './color-picker.types'
+
+/** Compose has no colour picker, and there is nothing sane to degrade a colour wheel into. */
+export const ColorPicker: ColorPickerComponent = () => {
+  warnUnsupported('ColorPicker', 'Android')
+
+  return null
+}

package/src/atoms/color-picker/color-picker.ios.tsx

@@ -0,0 +1,24 @@
+import {ColorPicker as SwiftUIColorPicker} from '@expo/ui/swift-ui'
+
+import {useHostGuard} from '../../host-context'
+import type {ColorPickerComponent, ColorPickerProps} from './color-picker.types'
+
+export const ColorPicker: ColorPickerComponent = ({
+  label,
+  onValueChange,
+  supportsOpacity = false,
+  testID,
+  value,
+}: ColorPickerProps) => {
+  useHostGuard('ColorPicker')
+
+  return (
+    <SwiftUIColorPicker
+      label={label}
+      onSelectionChange={onValueChange}
+      selection={value}
+      supportsOpacity={supportsOpacity}
+      testID={testID}
+    />
+  )
+}

package/src/atoms/color-picker/color-picker.types.ts

@@ -0,0 +1,16 @@
+import type {ReactNode} from 'react'
+
+/**
+ * The system colour picker. iOS only — Compose ships no equivalent, so on Android this
+ * renders nothing and says so in dev. Branch on `Platform.OS` if the screen needs a fallback.
+ */
+export type ColorPickerProps = {
+  label?: string
+  onValueChange?: (color: string) => void
+  supportsOpacity?: boolean
+  testID?: string
+  /** `#RRGGBB` or `#RRGGBBAA`. */
+  value: string | null
+}
+
+export type ColorPickerComponent = (props: ColorPickerProps) => ReactNode

package/src/atoms/color-picker/index.ts

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

package/src/atoms/countdown/countdown-frame.tsx

@@ -0,0 +1,123 @@
+import type {CountdownUnits} from '@hzblj/kara-native'
+import {MAX_FONT_SCALE, type TextVariant, useAppTheme} from '@hzblj/kara-theme'
+import {type ReactNode, useEffect, useMemo, useState} from 'react'
+import {StyleSheet, Text, useWindowDimensions, View} from 'react-native'
+
+const SECOND_MS = 1000
+const HOUR = 3600
+const DAY = 86_400
+const DIVIDER = ' / '
+
+/** Wakes a beat after the shape changes, so the frame never reads the boundary second twice. */
+const SHAPE_CHANGE_SLACK_MS = 50
+
+type CountdownShape = {
+  days: number
+  hasHours: boolean
+}
+
+const remainingSeconds = (endsAt: number) => Math.max(0, Math.round((endsAt - Date.now()) / SECOND_MS))
+
+const countdownShape = (endsAt: number): CountdownShape => {
+  const remaining = remainingSeconds(endsAt)
+
+  return {days: Math.floor(remaining / DAY), hasHours: remaining >= HOUR}
+}
+
+/** When the next segment drops out — the last day, then the last hour — or `null` once only minutes are left. */
+const nextShapeChange = (endsAt: number, {days, hasHours}: CountdownShape) => {
+  if (days > 0) {
+    return endsAt - (days * DAY - 0.5) * SECOND_MS
+  }
+
+  if (hasHours) {
+    return endsAt - (HOUR - 0.5) * SECOND_MS
+  }
+
+  return null
+}
+
+/** The countdown's shape changes twice at most, so this re-renders twice at most — never once a second. */
+const useCountdownShape = (endsAt: number) => {
+  const [shape, setShape] = useState(() => countdownShape(endsAt))
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined
+
+    const update = () => {
+      const next = countdownShape(endsAt)
+
+      setShape(current => (current.days === next.days && current.hasHours === next.hasHours ? current : next))
+
+      const changesAt = nextShapeChange(endsAt, next)
+
+      if (changesAt !== null) {
+        timeout = setTimeout(update, Math.max(0, changesAt - Date.now()) + SHAPE_CHANGE_SLACK_MS)
+      }
+    }
+
+    update()
+
+    return () => clearTimeout(timeout)
+  }, [endsAt])
+
+  return shape
+}
+
+/** The widest string the countdown can show in its current shape, with zeros standing in for the digits. */
+const countdownTemplate = ({days, hasHours}: CountdownShape, [day, hour, minute, second]: CountdownUnits) => {
+  let template = ''
+
+  if (days > 0) {
+    template += `${'0'.repeat(String(days).length)}${day}${DIVIDER}`
+  }
+
+  if (hasHours) {
+    template += `00${hour}${DIVIDER}`
+  }
+
+  return `${template}00${minute}${DIVIDER}00${second}`
+}
+
+const styles = StyleSheet.create({
+  template: {opacity: 0},
+})
+
+type CountdownFrameProps = {
+  children: ReactNode
+  endsAt: number
+  testID?: string
+  units: CountdownUnits
+  variant: TextVariant
+}
+
+/**
+ * What gives the native countdown its size: an invisible React Native text of exactly the shape it draws, set the way
+ * `RnText` sets the same variant, so the countdown takes the space any text of that variant would — and the native view
+ * laid over it has to match it to the point. Accessibility reads the native view, never this.
+ */
+export const CountdownFrame = ({children, endsAt, testID, units, variant}: CountdownFrameProps) => {
+  const theme = useAppTheme()
+  const {fontScale} = useWindowDimensions()
+  const shape = useCountdownShape(endsAt)
+  const template = useMemo(() => countdownTemplate(shape, units), [shape, units])
+  const style = theme.typography[variant]
+
+  /** As in `RnText`: React Native grows the glyphs but not the line, so the line grows here by the same capped factor. */
+  const lineHeight = style.lineHeight * Math.min(fontScale, MAX_FONT_SCALE)
+
+  return (
+    <View testID={testID}>
+      <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={styles.template}>
+        <Text
+          maxFontSizeMultiplier={MAX_FONT_SCALE}
+          numberOfLines={1}
+          style={[style, {fontVariant: ['tabular-nums'], lineHeight}]}
+        >
+          {template}
+        </Text>
+      </View>
+      {children}
+    </View>
+  )
+}

package/src/atoms/countdown/countdown-units.ts

@@ -0,0 +1,37 @@
+import type {CountdownUnits} from '@hzblj/kara-native'
+import {useMemo} from 'react'
+
+const FALLBACK_UNITS: CountdownUnits = ['d', 'h', 'm', 's']
+
+type Unit = 'day' | 'hour' | 'minute' | 'second'
+
+/** The first letter of the locale's short unit name — `d`, `h`, `m`, `s` in English, `d`, `h`, `m`, `s` in Czech too. */
+const unitInitial = (locale: string | undefined, unit: Unit, fallback: string) => {
+  try {
+    const parts = new Intl.NumberFormat(locale, {style: 'unit', unit, unitDisplay: 'short'}).formatToParts(1)
+    const initial = parts
+      .find(part => part.type === 'unit')
+      ?.value.trim()
+      .charAt(0)
+
+    return initial || fallback
+  } catch {
+    return fallback
+  }
+}
+
+/** The caller's units, else the locale's initials, else English ones. */
+export const useCountdownUnits = (locale: string | undefined, units: CountdownUnits | undefined): CountdownUnits =>
+  useMemo(
+    () =>
+      units ?? [
+        unitInitial(locale, 'day', FALLBACK_UNITS[0]),
+        unitInitial(locale, 'hour', FALLBACK_UNITS[1]),
+        unitInitial(locale, 'minute', FALLBACK_UNITS[2]),
+        unitInitial(locale, 'second', FALLBACK_UNITS[3]),
+      ],
+    [locale, units]
+  )
+
+/** `endsAt` as the epoch milliseconds the native views take. */
+export const toEpochMs = (endsAt: Date | number) => (typeof endsAt === 'number' ? endsAt : endsAt.getTime())