@hzblj/kara-components 0.0.0-stage → 0.1.0

package/lib/typescript/molecules/scroll-edge-container/scroll-edge-container.types.d.ts

@@ -0,0 +1,23 @@
+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/lib/typescript/molecules/search-bar/index.d.ts

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

package/lib/typescript/molecules/search-bar/search-bar.d.ts

@@ -0,0 +1,2 @@
+import type { SearchBarComponent } from './search-bar.types';
+export declare const SearchBar: SearchBarComponent;

package/lib/typescript/molecules/search-bar/search-bar.types.d.ts

@@ -0,0 +1,8 @@
+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/lib/typescript/molecules/stepper/index.d.ts

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

package/lib/typescript/molecules/stepper/stepper.d.ts

@@ -0,0 +1 @@
+export * from './stepper.ios';

package/lib/typescript/molecules/stepper/stepper.ios.d.ts

@@ -0,0 +1,2 @@
+import type { StepperComponent } from './stepper.types';
+export declare const Stepper: StepperComponent;

package/lib/typescript/molecules/stepper/stepper.types.d.ts

@@ -0,0 +1,10 @@
+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/lib/typescript/molecules/tooltip/index.d.ts

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

package/lib/typescript/molecules/tooltip/tooltip.d.ts

@@ -0,0 +1 @@
+export * from './tooltip.ios';

package/lib/typescript/molecules/tooltip/tooltip.ios.d.ts

@@ -0,0 +1,2 @@
+import type { TooltipComponent } from './tooltip.types';
+export declare const Tooltip: TooltipComponent;

package/lib/typescript/molecules/tooltip/tooltip.types.d.ts

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

package/lib/typescript/organisms/action-sheet/action-sheet.d.ts

@@ -0,0 +1 @@
+export * from './action-sheet.ios';

package/lib/typescript/organisms/action-sheet/action-sheet.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ActionSheetComponent } from './action-sheet.types';
+export declare const ActionSheet: ActionSheetComponent;

package/lib/typescript/organisms/action-sheet/action-sheet.types.d.ts

@@ -0,0 +1,9 @@
+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/lib/typescript/organisms/action-sheet/index.d.ts

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

package/lib/typescript/organisms/alert/alert.d.ts

@@ -0,0 +1 @@
+export * from './alert.ios';

package/lib/typescript/organisms/alert/alert.ios.d.ts

@@ -0,0 +1,2 @@
+import type { AlertComponent } from './alert.types';
+export declare const Alert: AlertComponent;

package/lib/typescript/organisms/alert/alert.types.d.ts

@@ -0,0 +1,11 @@
+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/lib/typescript/organisms/alert/index.d.ts

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

package/lib/typescript/organisms/context-menu/context-menu.d.ts

@@ -0,0 +1 @@
+export * from './context-menu.ios';

package/lib/typescript/organisms/context-menu/context-menu.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ContextMenuComponent } from './context-menu.types';
+export declare const ContextMenu: ContextMenuComponent;

package/lib/typescript/organisms/context-menu/context-menu.types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { MenuAction } from '../menu';
+export type ContextMenuProps = {
+    actions: MenuAction[];
+    children: ReactNode;
+};
+export type ContextMenuComponent = (props: ContextMenuProps) => ReactNode;

package/lib/typescript/organisms/context-menu/index.d.ts

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

package/lib/typescript/organisms/fab-menu/fab-menu.d.ts

@@ -0,0 +1 @@
+export * from './fab-menu.ios';

package/lib/typescript/organisms/fab-menu/fab-menu.ios.d.ts

@@ -0,0 +1,2 @@
+import type { FabMenuComponent } from './fab-menu.types';
+export declare const FabMenu: FabMenuComponent;

package/lib/typescript/organisms/fab-menu/fab-menu.types.d.ts

@@ -0,0 +1,15 @@
+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. `add` by default. */
+    icon?: IconName;
+    testID?: string;
+};
+export type FabMenuComponent = (props: FabMenuProps) => ReactNode;

package/lib/typescript/organisms/fab-menu/index.d.ts

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

package/lib/typescript/organisms/form/form.d.ts

@@ -0,0 +1 @@
+export * from './form.ios';

package/lib/typescript/organisms/form/form.ios.d.ts

@@ -0,0 +1,2 @@
+import type { FormComponent } from './form.types';
+export declare const Form: FormComponent;

package/lib/typescript/organisms/form/form.types.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export type FormProps = {
+    children: ReactNode;
+    testID?: string;
+};
+export type FormSectionProps = {
+    children: ReactNode;
+    footer?: string;
+    title?: string;
+};
+export type FormComponent = ((props: FormProps) => ReactNode) & {
+    Section: (props: FormSectionProps) => ReactNode;
+};

package/lib/typescript/organisms/form/index.d.ts

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

package/lib/typescript/organisms/index.d.ts

@@ -0,0 +1,10 @@
+export * from './action-sheet';
+export * from './alert';
+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/lib/typescript/organisms/menu/index.d.ts

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

package/lib/typescript/organisms/menu/menu.d.ts

@@ -0,0 +1 @@
+export * from './menu.ios';

package/lib/typescript/organisms/menu/menu.ios.d.ts

@@ -0,0 +1,2 @@
+import type { MenuComponent } from './menu.types';
+export declare const Menu: MenuComponent;

package/lib/typescript/organisms/menu/menu.types.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../../atoms/icon';
+export type MenuAction = {
+    destructive?: boolean;
+    icon?: IconName;
+    label: string;
+    onPress: () => void;
+};
+export type MenuProps = {
+    actions: MenuAction[];
+    label: string;
+};
+export type MenuComponent = (props: MenuProps) => ReactNode;

package/lib/typescript/organisms/rn-context-menu/index.d.ts

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

package/lib/typescript/organisms/rn-context-menu/rn-context-menu.d.ts

@@ -0,0 +1 @@
+export * from './rn-context-menu.ios';

package/lib/typescript/organisms/rn-context-menu/rn-context-menu.ios.d.ts

@@ -0,0 +1,2 @@
+import type { RnContextMenuComponent } from './rn-context-menu.types';
+export declare const RnContextMenu: RnContextMenuComponent;

package/lib/typescript/organisms/rn-context-menu/rn-context-menu.types.d.ts

@@ -0,0 +1,33 @@
+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 React Native tier, unlike `ContextMenu`, whose
+ * trigger is a native view inside a host.
+ */
+export type RnContextMenuProps = 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 RnContextMenuExclusionProps = {
+    children: ReactNode;
+};
+export type RnContextMenuComponent = ((props: RnContextMenuProps) => 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: RnContextMenuExclusionProps) => ReactNode;
+};

package/lib/typescript/organisms/sheet/index.d.ts

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

package/lib/typescript/organisms/sheet/sheet.d.ts

@@ -0,0 +1 @@
+export * from './sheet.ios';

package/lib/typescript/organisms/sheet/sheet.ios.d.ts

@@ -0,0 +1,2 @@
+import type { SheetComponent } from './sheet.types';
+export declare const Sheet: SheetComponent;

package/lib/typescript/organisms/sheet/sheet.types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type SheetProps = {
+    children: ReactNode;
+    fitToContents?: boolean;
+    onDismiss: () => void;
+    visible: boolean;
+};
+export type SheetComponent = (props: SheetProps) => ReactNode;

package/lib/typescript/organisms/snackbar/index.d.ts

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

package/lib/typescript/organisms/snackbar/snackbar.d.ts

@@ -0,0 +1,2 @@
+import type { SnackbarComponent } from './snackbar.types';
+export declare const Snackbar: SnackbarComponent;

package/lib/typescript/organisms/snackbar/snackbar.types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type SnackbarProps = {
+    actionLabel?: string;
+    message: string;
+    onAction?: () => void;
+    visible: boolean;
+};
+export type SnackbarComponent = (props: SnackbarProps) => ReactNode;

package/lib/typescript/organisms/swipe-actions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './swipe-actions';
+export * from './swipe-actions.types';

package/lib/typescript/organisms/swipe-actions/swipe-actions.d.ts

@@ -0,0 +1 @@
+export * from './swipe-actions.ios';

package/lib/typescript/organisms/swipe-actions/swipe-actions.ios.d.ts

@@ -0,0 +1,2 @@
+import type { SwipeActionsComponent } from './swipe-actions.types';
+export declare const SwipeActions: SwipeActionsComponent;

package/lib/typescript/organisms/swipe-actions/swipe-actions.types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type SwipeActionsEdge = 'leading' | 'trailing';
+/**
+ * Swipe-to-reveal buttons on a row. iOS only — Compose ships no equivalent, so on Android the
+ * row renders exactly as it would without this wrapper and the action buttons are dropped.
+ * Degrading that way rather than to `null` keeps the content on screen.
+ */
+export type SwipeActionsProps = {
+    children: ReactNode;
+    testID?: string;
+};
+export type SwipeActionsGroupProps = {
+    /** Whether swiping all the way performs the first action in the group. */
+    allowsFullSwipe?: boolean;
+    children: ReactNode;
+    edge?: SwipeActionsEdge;
+};
+export type SwipeActionsComponent = ((props: SwipeActionsProps) => ReactNode) & {
+    Actions: (props: SwipeActionsGroupProps) => ReactNode;
+};

package/lib/typescript/platform-support.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Announces an atom that only one platform can implement. The stub still satisfies the shared
+ * component type, so `contract.check.ts` keeps both files honest — this just makes the gap loud
+ * in dev instead of leaving a control that mysteriously never appears.
+ *
+ * Warns once per atom: the gap is permanent, so repeating it every render would be noise.
+ */
+export declare const warnUnsupported: (atom: string, platform: 'Android' | 'iOS') => void;

package/lib/typescript/templates/index.d.ts

@@ -0,0 +1 @@
+export * from './screen';

package/lib/typescript/templates/screen/index.d.ts

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

package/lib/typescript/templates/screen/screen.d.ts

@@ -0,0 +1 @@
+export * from './screen.ios';

package/lib/typescript/templates/screen/screen.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ScreenComponent } from './screen.types';
+export declare const Screen: ScreenComponent;

package/lib/typescript/templates/screen/screen.types.d.ts

@@ -0,0 +1,9 @@
+import type { Sx } from '@hzblj/kara-sx';
+import type { ReactNode } from 'react';
+export type ScreenProps = {
+    bg?: Sx['bg'];
+    children?: ReactNode;
+    ignoreKeyboardInset?: boolean;
+    testID?: string;
+};
+export type ScreenComponent = (props: ScreenProps) => ReactNode;

package/lib/typescript/use-refresh-state.d.ts

@@ -0,0 +1,15 @@
+export type RefreshState = {
+    isRefreshing: boolean;
+    refresh: () => void;
+};
+/**
+ * Bridges the two platforms' opposite takes on pull-to-refresh so both can expose one async
+ * `onRefresh`. SwiftUI's `refreshable` takes the promise and spins until it settles, so iOS hands the
+ * handler straight over; Compose's `PullToRefreshBox` is controlled and keeps spinning until
+ * `isRefreshing` goes false, which is the flag this derives.
+ *
+ * Errors are left to the caller: `Promise.resolve().then` turns even a synchronous throw into a
+ * rejection the caller still sees, while `finally` stops the spinner either way. Swallowing it here
+ * would leave a failed refresh looking like a successful one.
+ */
+export declare const useRefreshState: (onRefresh: (() => Promise<void>) | undefined) => RefreshState;

package/package.json

@@ -1,6 +1,98 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
+  "author": "Jan Blazej",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hzblj/kara-ui.git",
+    "directory": "packages/components"
+  },
+  "bugs": {
+    "url": "https://github.com/hzblj/kara-ui/issues"
+  },
+  "homepage": "https://github.com/hzblj/kara-ui/tree/main/packages/components#readme",
+  "keywords": [
+    "react-native",
+    "expo",
+    "kara-ui"
+  ],
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/*.stories.tsx",
+    "!**/contract.check.ts",
+    "!**/story-decorators.tsx",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "bob build && tsc -p ./tsconfig.build.json && node ../../scripts/fallback-declarations.mjs",
+    "clean": "rm -rf lib",
+    "prepack": "yarn run -T turbo run build --filter=$npm_package_name...",
+    "lint": "yarn run -T concurrently \"yarn biome:check\" \"yarn tsc:check\"",
+    "lint:fix": "yarn run -T biome check --write .",
+    "biome:check": "yarn run -T biome check .",
+    "tsc:check": "yarn run -T concurrently \"tsc -p ./tsconfig.ios.json\" \"tsc -p ./tsconfig.android.json\""
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "exclude": "{**/__tests__/**,**/__fixtures__/**,**/__mocks__/**,**/*.stories.tsx,**/contract.check.ts,**/story-decorators.tsx}",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@hzblj/kara-native": "^0.1.0",
+    "@hzblj/kara-sx": "^0.1.0",
+    "@hzblj/kara-theme": "^0.1.0",
+    "sf-symbols-typescript": "^2.2.0"
+  },
+  "peerDependencies": {
+    "@expo/ui": "~57.0.0",
+    "@expo/vector-icons": "*",
+    "@shopify/flash-list": ">=2.0.0",
+    "expo": "~57.0.0",
+    "expo-haptics": "*",
+    "expo-image": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@expo/ui": "~57.0.18",
+    "@expo/vector-icons": "^15.1.1",
+    "@shopify/flash-list": "^2.3.2",
+    "@storybook/react-native": "^10.6.0",
+    "@types/react": "~19.2.18",
+    "expo": "~57.0.22",
+    "expo-haptics": "~57.0.3",
+    "expo-image": "~57.0.5",
+    "react": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-worklets": "0.10.1",
+    "storybook": "^10.6.0",
+    "typescript": "~7.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/atoms/activity-indicator/activity-indicator.tsx

@@ -0,0 +1,9 @@
+import {useAppTheme} from '@hzblj/kara-theme'
+import type {FC} from 'react'
+import {type ActivityIndicatorProps, ActivityIndicator as RNActivityIndicator} from 'react-native'
+
+export const ActivityIndicator: FC<ActivityIndicatorProps> = props => {
+  const theme = useAppTheme()
+
+  return <RNActivityIndicator color={theme.color('fill.accent.primary')} size="small" {...props} />
+}

package/src/atoms/activity-indicator/index.ts

@@ -0,0 +1 @@
+export * from './activity-indicator'

package/src/atoms/avatar/avatar.tsx

@@ -0,0 +1,43 @@
+import {spacing} from '@hzblj/kara-theme'
+
+import {Box} from '../box'
+import {Image} from '../image'
+import {RnText} from '../rn-text'
+import type {AvatarComponent, AvatarProps, AvatarSize} from './avatar.types'
+
+const DIAMETER = {
+  lg: spacing.s64,
+  md: spacing.s40,
+  sm: spacing.s24,
+} as const satisfies Record<AvatarSize, number>
+
+const VARIANT = {
+  lg: 'headingXs',
+  md: 'labelMedium',
+  sm: 'caption',
+} as const
+
+export const Avatar: AvatarComponent = ({initials, size = 'md', source, testID}: AvatarProps) => {
+  const diameter = DIAMETER[size]
+
+  return (
+    <Box
+      align="center"
+      bg="fill.tertiary"
+      borderRadius="full"
+      h={diameter}
+      justify="center"
+      overflow="hidden"
+      testID={testID}
+      w={diameter}
+    >
+      {source ? (
+        <Image source={source} style={{height: diameter, width: diameter}} />
+      ) : (
+        <RnText color="content.secondary" variant={VARIANT[size]}>
+          {initials ?? ''}
+        </RnText>
+      )}
+    </Box>
+  )
+}

package/src/atoms/avatar/avatar.types.ts

@@ -0,0 +1,13 @@
+import type {ReactNode} from 'react'
+import type {ImageSourcePropType} from 'react-native'
+
+export type AvatarSize = 'lg' | 'md' | 'sm'
+
+export type AvatarProps = {
+  initials?: string
+  size?: AvatarSize
+  source?: ImageSourcePropType
+  testID?: string
+}
+
+export type AvatarComponent = (props: AvatarProps) => ReactNode

package/src/atoms/avatar/index.ts

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

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

@@ -0,0 +1,10 @@
+import type {ColorToken} from '@hzblj/kara-theme'
+
+import type {BadgeTone} from './badge.types'
+
+export const BADGE_TOKENS = {
+  accent: {content: 'content.accent', fill: 'fill.accent.base'},
+  destructive: {content: 'content.destructive', fill: 'fill.destructive.base'},
+  neutral: {content: 'content.secondary', fill: 'fill.tertiary'},
+  success: {content: 'content.success', fill: 'fill.success.base'},
+} as const satisfies Record<BadgeTone, {content: ColorToken; fill: ColorToken}>

package/src/atoms/badge/badge.android.tsx

@@ -0,0 +1,17 @@
+import {Badge as ComposeBadge} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useHostGuard} from '../../host-context'
+import type {BadgeComponent, BadgeProps} from './badge.types'
+import {BADGE_TOKENS} from './badge-tokens'
+
+export const Badge: BadgeComponent = ({label, tone = 'neutral'}: BadgeProps) => {
+  useHostGuard('Badge')
+  const theme = useAppTheme()
+  const tokens = BADGE_TOKENS[tone]
+
+  return (
+    <ComposeBadge containerColor={theme.color(tokens.fill)} contentColor={theme.color(tokens.content)}>
+      {label}
+    </ComposeBadge>
+  )
+}