@hzblj/kara-components 0.1.0 → 0.2.0

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

@@ -1,11 +1,17 @@
-import {AlertDialog, Button, Column, Text as ComposeText} from '@expo/ui/jetpack-compose'
+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,
@@ -20,18 +26,49 @@ export const Alert: AlertComponent = ({
   }
 
   return (
-    <AlertDialog onDismissRequest={onDismiss}>
-      <Column verticalArrangement={{spacedBy: 8}}>
+    <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>
-        {message ? (
+      </AlertDialog.Title>
+      {message ? (
+        <AlertDialog.Text>
           <ComposeText color={theme.colorString('content.secondary')} style={theme.typography.body}>
             {message}
           </ComposeText>
-        ) : null}
-        <Button onClick={onConfirm ?? onDismiss}>{confirmLabel}</Button>
-      </Column>
+        </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/context-menu/context-menu.android.tsx

@@ -1,56 +1,90 @@
-import {Column, Text as ComposeText, DropdownMenu} from '@expo/ui/jetpack-compose'
-import {clickable, combinedClickable} from '@expo/ui/jetpack-compose/modifiers'
+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, useMemo, useState} from 'react'
-
-import {useHostGuard} from '../../host-context'
+import {useCallback, useState} from 'react'
+import {Pressable, StyleSheet, View} from 'react-native'
 import type {MenuAction} from '../menu'
-import type {ContextMenuComponent, ContextMenuProps} from './context-menu.types'
+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 MenuItemProps = {
+type MenuRowProps = {
   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) => {
+/** 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 modifiers = useMemo(
-    () => [
-      clickable(() => {
-        onDismiss()
-        action.onPress()
-      }),
-    ],
-    [action, onDismiss]
-  )
+
+  const onClick = useCallback(() => {
+    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>
+    <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>
   )
 }
 
-export const ContextMenu: ContextMenuComponent = ({actions, children}: ContextMenuProps) => {
-  useHostGuard('ContextMenu')
-
+/**
+ * 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), [])
-  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>
+    <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

@@ -1,24 +1,46 @@
-import {Button, ContextMenu as SwiftUIContextMenu} from '@expo/ui/swift-ui'
+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'
 
-import {useHostGuard} from '../../host-context'
-import type {ContextMenuComponent, ContextMenuProps} from './context-menu.types'
+const ContextMenuRoot = ({actions, children, onPreviewPress, preview, testID, ...sx}: ContextMenuProps) => {
+  const style = useSx(sx)
 
-export const ContextMenu: ContextMenuComponent = ({actions, children}: ContextMenuProps) => {
-  useHostGuard('ContextMenu')
+  /** 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 (
-    <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>
+    <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

@@ -1,10 +1,36 @@
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
-
 import type {MenuAction} from '../menu'
 
-export type ContextMenuProps = {
+/**
+ * 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 ContextMenuComponent = (props: ContextMenuProps) => ReactNode
+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/fab-menu/fab-menu.android.tsx

@@ -7,6 +7,7 @@ import {
 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'
@@ -46,7 +47,7 @@ const FabMenuRow = ({action, onSelect}: FabMenuRowProps) => {
  * 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) => {
+export const FabMenu: FabMenuComponent = ({actions, icon}: FabMenuProps) => {
   useHostGuard('FabMenu')
 
   const theme = useAppTheme()
@@ -66,7 +67,7 @@ export const FabMenu: FabMenuComponent = ({actions, icon = 'add'}: FabMenuProps)
           onCheckedChange={setExpanded}
         >
           <ToggleFloatingActionButton.Icon>
-            <Icon color="content.on.bg" name={icon} />
+            {icon ? <Icon color="content.on.bg" name={icon} /> : <Glyph color="content.on.bg" name="plus" />}
           </ToggleFloatingActionButton.Icon>
         </ToggleFloatingActionButton>
       </FloatingActionButtonMenu.Button>

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

@@ -1,15 +1,16 @@
-import {Button, Menu} from '@expo/ui/swift-ui'
-import type {SFSymbol} from 'sf-symbols-typescript'
+import {Button, Image, Label, Menu} from '@expo/ui/swift-ui'
+import {iconResourceName} from '@hzblj/kara-native'
 
-import {Icon, SF_SYMBOLS} from '../../atoms/icon'
+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 = 'add', testID}: FabMenuProps) => {
+export const FabMenu: FabMenuComponent = ({actions, icon, testID}: FabMenuProps) => {
   useHostGuard('FabMenu')
 
   return (
@@ -24,19 +25,19 @@ export const FabMenu: FabMenuComponent = ({actions, icon = 'add', testID}: FabMe
           shadow="btn.accent"
           w={FAB_SIZE}
         >
-          <Icon color="content.on.bg" name={icon} />
+          {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}
-          label={action.label}
-          onPress={action.onPress}
-          role={action.destructive ? 'destructive' : 'default'}
-          systemImage={action.icon ? (SF_SYMBOLS[action.icon] as SFSymbol) : undefined}
-        />
+        <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

@@ -10,7 +10,7 @@ import type {MenuAction} from '../menu'
  */
 export type FabMenuProps = {
   actions: MenuAction[]
-  /** The closed button's icon. `add` by default. */
+  /** The closed button's icon — one of the app's. A plus by default. */
   icon?: IconName
   testID?: string
 }

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

@@ -21,7 +21,7 @@ const FormSection = ({children, footer, title}: FormSectionProps) => (
         {title}
       </Text>
     ) : null}
-    <Card>{children}</Card>
+    <Card wide>{children}</Card>
     {footer ? (
       <Text color="content.tertiary" variant="footnote">
         {footer}

package/src/organisms/form/form.types.ts

@@ -1,5 +1,10 @@
 import type {ReactNode} from 'react'
 
+/**
+ * A settings form — SwiftUI `Form` with its grouped sections, Material cards on Android. On iOS it scrolls like a
+ * `List`, so it needs a height from outside: a `Screen`, or an `Island` with `matchContents={false}` and a height. In
+ * an island that sizes itself to its content it has no height and shows nothing.
+ */
 export type FormProps = {
   children: ReactNode
   testID?: string

package/src/organisms/index.ts

@@ -4,7 +4,6 @@ export * from './context-menu'
 export * from './fab-menu'
 export * from './form'
 export * from './menu'
-export * from './rn-context-menu'
 export * from './sheet'
 export * from './snackbar'
 export * from './swipe-actions'

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

@@ -1,12 +1,10 @@
-import {Text as ComposeText, DropdownMenu} from '@expo/ui/jetpack-compose'
-import {clickable} from '@expo/ui/jetpack-compose/modifiers'
+import {Text as ComposeText, DropdownMenu, DropdownMenuItem} from '@expo/ui/jetpack-compose'
 import {useAppTheme} from '@hzblj/kara-theme'
-import {useCallback, useMemo, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {HStack} from '../../atoms/h-stack'
 import {Icon} from '../../atoms/icon'
-import {Spacer} from '../../atoms/spacer'
 import {Text} from '../../atoms/text'
-import {VStack} from '../../atoms/v-stack'
+import {Glyph} from '../../glyph'
 import {useHostGuard} from '../../host-context'
 import type {MenuAction, MenuComponent, MenuProps} from './menu.types'
 
@@ -15,48 +13,56 @@ type MenuItemProps = {
   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]
-  )
+  const color = action.destructive ? 'content.destructive' : 'content.primary'
 
   return (
-    <ComposeText
-      color={theme.colorString(action.destructive ? 'content.destructive' : 'content.primary')}
-      modifiers={modifiers}
-      style={theme.typography.body}
+    <DropdownMenuItem
+      elementColors={{leadingIconColor: theme.color(color), textColor: theme.color(color)}}
+      onClick={() => {
+        onDismiss()
+        action.onPress()
+      }}
     >
-      {action.label}
-    </ComposeText>
+      <DropdownMenuItem.Text>
+        <ComposeText color={theme.colorString(color)} style={theme.typography.body}>
+          {action.label}
+        </ComposeText>
+      </DropdownMenuItem.Text>
+      {action.icon ? (
+        <DropdownMenuItem.LeadingIcon>
+          <Icon color={color} name={action.icon} size="s20" />
+        </DropdownMenuItem.LeadingIcon>
+      ) : null}
+    </DropdownMenuItem>
   )
 }
 
+/**
+ * Material's dropdown menu, anchored to its trigger. The items live in the `Items` slot, which Compose presents in
+ * its own popup — anywhere else they would be laid out in place, on top of the trigger.
+ */
 export const Menu: MenuComponent = ({actions, label}: MenuProps) => {
   useHostGuard('Menu')
 
+  const theme = useAppTheme()
   const [expanded, setExpanded] = useState(false)
   const dismiss = useCallback(() => setExpanded(false), [])
 
   return (
-    <VStack>
-      <HStack align="center" onPress={() => setExpanded(true)} spacing="s4">
-        <Text color="content.accent">{label}</Text>
-        <Icon color="content.accent" name="chevronDown" size="s16" />
-      </HStack>
-      <DropdownMenu expanded={expanded} onDismissRequest={dismiss}>
+    <DropdownMenu color={theme.color('surface.primary')} expanded={expanded} onDismissRequest={dismiss}>
+      <DropdownMenu.Trigger>
+        <HStack align="center" onPress={() => setExpanded(true)} spacing="s4">
+          <Text color="content.accent">{label}</Text>
+          <Glyph color="content.accent" name="chevronDown" size="s16" />
+        </HStack>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Items>
         {actions.map(action => (
           <MenuItem action={action} key={action.label} onDismiss={dismiss} />
         ))}
-      </DropdownMenu>
-      <Spacer min="s0" />
-    </VStack>
+      </DropdownMenu.Items>
+    </DropdownMenu>
   )
 }

package/CHANGELOG.md

@@ -1,14 +0,0 @@
-# @hzblj/kara-components
-
-## 0.1.0
-
-### Minor Changes
-
-- [`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1) Thanks [@hzblj](https://github.com/hzblj)! - First release of the kara-ui design system: theme and tokens, the `sx` engine, atoms, molecules, organisms and `Screen`, native tabs (`@hzblj/kara-ui/router`), the KaraUI native module (Liquid Glass, scroll edge effect, native countdown, context menu with preview, rich tooltip, FAB menu), and `KaraProvider` with theme overrides — colours, the app's own fonts, the Material seed, and Material You dynamic colour on Android. Text uses the platform's face by default. Install `@hzblj/kara-ui`; the scoped packages are its building blocks.
-
-### Patch Changes
-
-- Updated dependencies [[`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1)]:
-  - @hzblj/kara-theme@0.1.0
-  - @hzblj/kara-sx@0.1.0
-  - @hzblj/kara-native@0.1.0

package/lib/module/atoms/countdown/countdown-frame.js

@@ -1,115 +0,0 @@
-"use strict";
-
-import { MAX_FONT_SCALE, useAppTheme } from '@hzblj/kara-theme';
-import { useEffect, useMemo, useState } from 'react';
-import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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;
-const remainingSeconds = endsAt => Math.max(0, Math.round((endsAt - Date.now()) / SECOND_MS));
-const countdownShape = endsAt => {
-  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, {
-  days,
-  hasHours
-}) => {
-  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 => {
-  const [shape, setShape] = useState(() => countdownShape(endsAt));
-  useEffect(() => {
-    let timeout;
-    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
-}, [day, hour, minute, second]) => {
-  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
-  }
-});
-/**
- * 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
-}) => {
-  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 /*#__PURE__*/_jsxs(View, {
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(View, {
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      style: styles.template,
-      children: /*#__PURE__*/_jsx(Text, {
-        maxFontSizeMultiplier: MAX_FONT_SCALE,
-        numberOfLines: 1,
-        style: [style, {
-          fontVariant: ['tabular-nums'],
-          lineHeight
-        }],
-        children: template
-      })
-    }), children]
-  });
-};
-//# sourceMappingURL=countdown-frame.js.map