@hzblj/kara-components 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @hzblj/kara-components
 
+## 0.7.0
+
+### Minor Changes
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `SwipeActions` works on Android, and takes its buttons as data. **Breaking:** `SwipeActions.Actions` and its `Button` children are gone — pass `leading` and/or `trailing`, each a list of `{icon, label, onPress, destructive?, tint?}`, and `allowsFullSwipe` on the row:
+
+  ```tsx
+  <SwipeActions
+    trailing={[
+      { destructive: true, icon: "trash", label: "Delete", onPress: remove },
+    ]}
+  >
+    <ListItem title="Order [#1024](https://github.com/hzblj/kara-ui/issues/1024)" />
+  </SwipeActions>
+  ```
+
+  iOS renders SwiftUI's `swipeActions`, each action its icon on a button in its tint — round, with the label under it, on iOS 26. Android, where Compose has no swipe actions, gets kara's own `SwipeActionsBox` (`@hzblj/kara-native/jetpack-compose`): the row slides on an anchored drag, and filled icon buttons with their labels show in the strip it leaves. One row is open at a time on both, and a tap on an open row closes it.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - **Breaking:** `FlashList` is gone, and `@shopify/flash-list` is no longer a peer dependency. kara's list for React Native content is `RnFlatList` (and `RnSectionList`): React Native's own virtualized lists, whose cells stay in normal flow, so rows that host native views keep them in place — a recycling list moves its cells, which an `@expo/ui` host does not survive. An app that wants FlashList for plain data rows installs and imports it itself.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `Tooltip` is controlled on Android too: `visible` shows Material's plain tooltip, centred above the anchor and kept inside the window, and `onDismiss` reports a touch outside it or the anchor scrolling away. It used to open only on a long press and hide itself, ignoring both props — and Material's own placement let it run off the edge of the screen. Nothing opens it on a long press any more; wire one to `visible` if you want it.
+
+  `TooltipBox` (`@hzblj/kara-native/jetpack-compose`) takes `plain` for that style, and hides when `isPresented` turns false.
+
+### Patch Changes
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `ActionSheet` on Android renders its rows in a host of its own — they were Compose views straight inside the sheet, which has none, and threw "must be rendered inside a Host". The rows are Material's bottom-sheet menu now: full width, with each action's `icon` before its label.
+
+  `SearchBar` on iOS centres its text beside the magnifier. The type scale's line height sat the text at the bottom of a taller line in a single-line `UITextField`.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - Android layout fixes:
+
+  - `Screen` keeps its content clear of the status bar when nothing sits above it, as a SwiftUI host keeps to the safe area — it drew under it. Under a navigation bar nothing changes; the background still runs to the edges.
+  - `Form` is inset from its container on every side, with section titles and footers indented to the cards' content, like SwiftUI's grouped form — in a `Screen` its cards ran into the screen's edges.
+  - A disabled or read-only `Checkbox` or `Switch` keeps Material's 48dp touch target, so it lines up with the enabled ones instead of shifting toward the edge.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `DatePicker` on iOS sizes itself to its value. Its host took the width it was given and laid the compact field out against the far edge of it — past its container's, in a row. The calendar is in the accent now.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `Alert` and `ActionSheet` appear on iOS. Both hung their SwiftUI presentation on an `EmptyView` — `@expo/ui` uses one when there is no trigger, and SwiftUI never presents from it — so `visible` changed nothing. Each now has a trigger that takes no room, and `ActionSheet` passes its buttons through the dialog's `Actions` slot.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `RnFlatList` and `RnSectionList` keep rows that host native views on Android. React Native's Android default, `removeClippedSubviews`, detached a host measured at zero height before its first layout, and the row stayed empty; it is off unless you turn it on.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `SegmentedControl` draws its selected segment in the accent on both platforms. iOS renders kara's own `UISegmentedControl` (`SegmentedControl` in `@hzblj/kara-native/swift-ui`), whose pill, labels and track take colours — the system control tints only the pill, SwiftUI's segmented picker not even that. Android colours Material's segmented buttons, equal widths. `onChange` now fires for a new segment only on Android too.
+
+- Updated dependencies [[`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490)]:
+  - @hzblj/kara-native@0.7.0
+  - @hzblj/kara-sx@0.7.0
+  - @hzblj/kara-theme@0.7.0
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -1,7 +1,35 @@
 # @hzblj/kara-components
 
-The components of kara-ui.
+[![npm version][npm-badge]][npm-url]
+[![License: MIT][license-badge]][license-url]
 
-Install [`@hzblj/kara-ui`](https://www.npmjs.com/package/@hzblj/kara-ui) instead — this is one of its building blocks.
+[npm-badge]: https://img.shields.io/npm/v/@hzblj/kara-components?labelColor=27272a&color=ff5700&label=%40hzblj%2Fkara-components
+[npm-url]: https://www.npmjs.com/package/@hzblj/kara-components
+[license-badge]: https://img.shields.io/badge/license-MIT-ff5700?labelColor=27272a
+[license-url]: https://github.com/hzblj/kara-ui/blob/main/LICENSE
 
-MIT
+<a href="https://kara.janblazej.dev"><img src="https://kara.janblazej.dev/og.png" alt="Kara — native UI for Expo: real SwiftUI and Jetpack Compose views" width="720"></a>
+
+The components of [Kara UI](https://kara.janblazej.dev) — a native-first design system for Expo.
+
+> **Install [`@hzblj/kara-ui`](https://www.npmjs.com/package/@hzblj/kara-ui) instead.** This package is one of its
+> building blocks, published so its types resolve; everything here is re-exported from `@hzblj/kara-ui`.
+
+## What's inside
+
+- **Native components** — real SwiftUI views on iOS and Jetpack Compose on Android, through `@expo/ui`: a `Switch` is
+  a SwiftUI `Toggle` on one and a Material `Switch` on the other.
+- **`Screen` and `Island`** — the hosts native views render in.
+- **The React Native tier** — `RnView`, `RnText`, `RnScrollView` and the rest: plain React Native views with the same
+  `sx` props, for long lists and for content around the native islands.
+- **Haptics** — the platform's own feedback, named for what happened.
+
+## Documentation
+
+- [Components](https://kara.janblazej.dev/docs/components) — every one photographed on iOS and Android, with its props
+- [Screen and Island](https://kara.janblazej.dev/docs/hosts)
+- [Haptics](https://kara.janblazej.dev/docs/haptics)
+
+## License
+
+MIT © Jan Blazej

package/lib/module/atoms/checkbox/checkbox.android.js

@@ -6,9 +6,13 @@ import { spacing, useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Stands in for a missing handler: Material drops its 48dp touch target without one, and the box moves. */
+const NOOP = () => undefined;
+
 /**
- * Material's checkbox, tinted with the accent. With a label it is a full-width row that toggles as a whole; the gap is
- * explicit because a checkbox without a handler drops Material's 48dp touch target, and with it the space around it.
+ * Material's checkbox, tinted with the accent. With a label it is a full-width row that toggles as a whole. It always
+ * gets a handler, so a disabled or read-only box keeps the touch target an enabled one has, and lines up with it;
+ * `enabled` is what stops the input.
  */
 export const Checkbox = ({
   disabled = false,
@@ -25,7 +29,7 @@ export const Checkbox = ({
       checkmarkColor: theme.color('content.on.bg')
     },
     enabled: !disabled,
-    onCheckedChange: onValueChange,
+    onCheckedChange: onValueChange ?? NOOP,
     value: value
   });
   if (!label) {

package/lib/module/atoms/checkbox/checkbox.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Checkbox","ComposeCheckbox","Row","Text","clickable","fillMaxWidth","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","rowModifiers","control","colors","checkedColor","color","checkmarkColor","enabled","onCheckedChange","horizontalArrangement","spacedBy","s8","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/checkbox/checkbox.android.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,IAAIC,eAAe,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC/E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMb,QAA2B,GAAGA,CAAC;EAACc,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAoB,CAAC,KAAK;EAC7GR,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMS,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,YAAY,GAAGX,OAAO,CAC1B,MAAOM,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACX,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMY,aAAa,CAAC,CAACC,KAAK,CAAC,CAAC,CAAE,EAChH,CAACH,QAAQ,EAAEE,aAAa,EAAEC,KAAK,CACjC,CAAC;EACD,MAAMG,OAAO,gBACXT,IAAA,CAACV,eAAe;IACdoB,MAAM,EAAE;MAACC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC;MAAEC,cAAc,EAAEN,KAAK,CAACK,KAAK,CAAC,eAAe;IAAC,CAAE;IACzGE,OAAO,EAAE,CAACX,QAAS;IACnBY,eAAe,EAAEV,aAAc;IAC/BC,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOK,OAAO;EAChB;EAEA,oBACEP,KAAA,CAACX,GAAG;IAACyB,qBAAqB,EAAE;MAACC,QAAQ,EAAEtB,OAAO,CAACuB;IAAE,CAAE;IAACC,SAAS,EAAEX,YAAa;IAACY,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,GACpGZ,OAAO,eACRT,IAAA,CAACR,IAAI;MAACoB,KAAK,EAAEL,KAAK,CAACe,WAAW,CAACnB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACoB,KAAK,EAAEhB,KAAK,CAACiB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GjB;IAAK,CACF,CAAC;EAAA,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Checkbox","ComposeCheckbox","Row","Text","clickable","fillMaxWidth","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","NOOP","undefined","disabled","label","onValueChange","value","theme","rowModifiers","control","colors","checkedColor","color","checkmarkColor","enabled","onCheckedChange","horizontalArrangement","spacedBy","s8","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/checkbox/checkbox.android.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,IAAIC,eAAe,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC/E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,IAAI,GAAGA,CAAA,KAAMC,SAAS;;AAE5B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMf,QAA2B,GAAGA,CAAC;EAACgB,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAoB,CAAC,KAAK;EAC7GV,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMW,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,YAAY,GAAGb,OAAO,CAC1B,MAAOQ,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACb,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMc,aAAa,CAAC,CAACC,KAAK,CAAC,CAAC,CAAE,EAChH,CAACH,QAAQ,EAAEE,aAAa,EAAEC,KAAK,CACjC,CAAC;EACD,MAAMG,OAAO,gBACXX,IAAA,CAACV,eAAe;IACdsB,MAAM,EAAE;MAACC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC;MAAEC,cAAc,EAAEN,KAAK,CAACK,KAAK,CAAC,eAAe;IAAC,CAAE;IACzGE,OAAO,EAAE,CAACX,QAAS;IACnBY,eAAe,EAAEV,aAAa,IAAIJ,IAAK;IACvCK,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOK,OAAO;EAChB;EAEA,oBACET,KAAA,CAACX,GAAG;IAAC2B,qBAAqB,EAAE;MAACC,QAAQ,EAAExB,OAAO,CAACyB;IAAE,CAAE;IAACC,SAAS,EAAEX,YAAa;IAACY,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,GACpGZ,OAAO,eACRX,IAAA,CAACR,IAAI;MAACsB,KAAK,EAAEL,KAAK,CAACe,WAAW,CAACnB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACoB,KAAK,EAAEhB,KAAK,CAACiB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GjB;IAAK,CACF,CAAC;EAAA,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/atoms/date-picker/date-picker.ios.js

@@ -1,9 +1,22 @@
 "use strict";
 
-import { DateTimePicker } from '@expo/ui/community/datetime-picker';
-import { useCallback } from 'react';
+import { Host, DatePicker as SwiftUIDatePicker } from '@expo/ui/swift-ui';
+import { datePickerStyle, labelsHidden, tint } from '@expo/ui/swift-ui/modifiers';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** The system's compact date picker, inline: a tap on it opens the calendar popover UIKit owns. */
+const COMPONENTS = {
+  date: ['date'],
+  datetime: ['date', 'hourAndMinute'],
+  time: ['hourAndMinute']
+};
+
+/**
+ * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
+ * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
+ * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
+ * beside it; the calendar is in the accent.
+ */
 export const DatePicker = ({
   max,
   min,
@@ -12,14 +25,22 @@ export const DatePicker = ({
   testID,
   value
 }) => {
-  const onChange = useCallback((_event, date) => onValueChange?.(date), [onValueChange]);
-  return /*#__PURE__*/_jsx(DateTimePicker, {
-    maximumDate: max,
-    minimumDate: min,
-    mode: mode,
-    onValueChange: onChange,
-    testID: testID,
-    value: value
+  const theme = useAppTheme();
+  const modifiers = useMemo(() => [datePickerStyle('compact'), labelsHidden(), tint(theme.color('fill.accent.primary'))], [theme]);
+  return /*#__PURE__*/_jsx(Host, {
+    colorScheme: theme.dark ? 'dark' : 'light',
+    matchContents: true,
+    children: /*#__PURE__*/_jsx(SwiftUIDatePicker, {
+      displayedComponents: [...COMPONENTS[mode]],
+      modifiers: modifiers,
+      onDateChange: onValueChange,
+      range: min || max ? {
+        end: max,
+        start: min
+      } : undefined,
+      selection: value,
+      testID: testID
+    })
   });
 };
 //# sourceMappingURL=date-picker.ios.js.map

package/lib/module/atoms/date-picker/date-picker.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["DateTimePicker","useCallback","jsx","_jsx","DatePicker","max","min","mode","onValueChange","testID","value","onChange","_event","date","maximumDate","minimumDate"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,cAAc,QAAO,oCAAoC;AACjE,SAAQC,WAAW,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjC;AACA,OAAO,MAAMC,UAA+B,GAAGA,CAAC;EAC9CC,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,QAAQ,GAAGV,WAAW,CAAC,CAACW,MAAe,EAAEC,IAAU,KAAKL,aAAa,GAAGK,IAAI,CAAC,EAAE,CAACL,aAAa,CAAC,CAAC;EAErG,oBACEL,IAAA,CAACH,cAAc;IACbc,WAAW,EAAET,GAAI;IACjBU,WAAW,EAAET,GAAI;IACjBC,IAAI,EAAEA,IAAK;IACXC,aAAa,EAAEG,QAAS;IACxBF,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","labelsHidden","tint","useAppTheme","useMemo","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","modifiers","color","colorScheme","dark","matchContents","children","displayedComponents","onDateChange","range","end","start","undefined","selection"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SAAQC,eAAe,EAAEC,YAAY,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMZ,UAA+B,GAAGA,CAAC;EAC9Ca,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAE3B,MAAMe,SAAS,GAAGd,OAAO,CACvB,MAAM,CAACJ,eAAe,CAAC,SAAS,CAAC,EAAEC,YAAY,CAAC,CAAC,EAAEC,IAAI,CAACe,KAAK,CAACE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5F,CAACF,KAAK,CACR,CAAC;EAED,oBACEX,IAAA,CAACT,IAAI;IAACuB,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,eAC7DjB,IAAA,CAACP,iBAAiB;MAChByB,mBAAmB,EAAE,CAAC,GAAGjB,UAAU,CAACM,IAAI,CAAC,CAAE;MAC3CK,SAAS,EAAEA,SAAU;MACrBO,YAAY,EAAEX,aAAc;MAC5BY,KAAK,EAAEd,GAAG,IAAID,GAAG,GAAG;QAACgB,GAAG,EAAEhB,GAAG;QAAEiB,KAAK,EAAEhB;MAAG,CAAC,GAAGiB,SAAU;MACvDC,SAAS,EAAEd,KAAM;MACjBD,MAAM,EAAEA;IAAO,CAChB;EAAC,CACE,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/atoms/index.js

@@ -12,7 +12,6 @@ export * from "./color-picker/index.js";
 export * from "./date-picker/index.js";
 export * from "./divider/index.js";
 export * from "./fab/index.js";
-export * from "./flash-list/index.js";
 export * from "./glass-view/index.js";
 export * from "./h-stack/index.js";
 export * from "./icon/index.js";

package/lib/module/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;AAAA,cAAc,+BAAsB;AACpC,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,gBAAO;AACrB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,yBAAgB;AAC9B,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,gBAAO;AACrB,cAAc,uBAAc;AAC5B,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,qBAAY;AAC1B,cAAc,yBAAgB;AAC9B,cAAc,oBAAW;AACzB,cAAc,2BAAkB;AAChC,cAAc,4BAAmB;AACjC,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,wBAAe;AAC7B,cAAc,8BAAqB;AACnC,cAAc,qBAAY;AAC1B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,oBAAW","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;AAAA,cAAc,+BAAsB;AACpC,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,gBAAO;AACrB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,yBAAgB;AAC9B,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,gBAAO;AACrB,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,qBAAY;AAC1B,cAAc,yBAAgB;AAC9B,cAAc,oBAAW;AACzB,cAAc,2BAAkB;AAChC,cAAc,4BAAmB;AACjC,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,wBAAe;AAC7B,cAAc,8BAAqB;AACnC,cAAc,qBAAY;AAC1B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,oBAAW","ignoreList":[]}

package/lib/module/atoms/rn-flat-list/rn-flat-list.js

@@ -7,14 +7,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const NO_SX = {};
 
 /**
- * Flat list built on React Native's own `VirtualizedList` rather than FlashList.
- *
- * FlashList is the default for lists in this codebase and should stay that way for data rows — reach
- * for this only for the case it cannot serve: content that hosts native views. FlashList positions its
- * rows absolutely and recycles their cells, and an `@expo/ui` host survives neither — the hosted view
- * ends up drawn where the layout no longer is. `VirtualizedList` renders its cells in normal flow
- * inside a scroll view, using blank spacers for the range it has not rendered, so a hosted view stays
- * exactly where the layout put it. This is `SectionList`'s reason to exist too, without the sections.
+ * kara's list for React Native content: React Native's own `VirtualizedList`, styled through `sx`. It renders its
+ * cells in normal flow inside a scroll view, with blank spacers for the range it has not rendered, so a row that hosts
+ * native views keeps them where the layout put it. A recycling list (absolutely positioned, reused cells) cannot
+ * promise that — an `@expo/ui` host survives neither, and draws where the layout no longer is — which is why kara
+ * ships none.
  */
 export const RnFlatList = ({
   content,
@@ -25,7 +22,11 @@ export const RnFlatList = ({
   const [style, rest] = useSplitSx(props);
   const contentStyle = useSx(content ?? NO_SX);
   return /*#__PURE__*/_jsx(RNFlatList, {
-    data: data,
+    data: data
+    // Android clips by default, and a host is measured after its first layout — at zero height it counts as
+    // off-screen, is detached, and its native view never comes back.
+    ,
+    removeClippedSubviews: false,
     renderItem: renderItem,
     ...rest,
     contentContainerStyle: content === undefined ? undefined : contentStyle,

package/lib/module/atoms/rn-flat-list/rn-flat-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSplitSx","useSx","FlatList","RNFlatList","jsx","_jsx","NO_SX","RnFlatList","content","data","renderItem","props","style","rest","contentStyle","contentContainerStyle","undefined"],"sourceRoot":"../../../../src","sources":["atoms/rn-flat-list/rn-flat-list.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,KAAK,QAAO,gBAAgB;AAChD,SAAQC,QAAQ,IAAIC,UAAU,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAInD;AACA,MAAMC,KAAK,GAAG,CAAC,CAAC;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAGA,CAAS;EAACC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAE,GAAGC;AAA6B,CAAC,KAAK;EACnG,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGb,UAAU,CAACW,KAAgC,CAAC;EAClE,MAAMG,YAAY,GAAGb,KAAK,CAACO,OAAO,IAAIF,KAAK,CAAC;EAE5C,oBACED,IAAA,CAACF,UAAU;IACTM,IAAI,EAAEA,IAAK;IACXC,UAAU,EAAEA,UAAW;IAAA,GACnBG,IAAI;IACRE,qBAAqB,EAAEP,OAAO,KAAKQ,SAAS,GAAGA,SAAS,GAAGF,YAAa;IACxEF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["useSplitSx","useSx","FlatList","RNFlatList","jsx","_jsx","NO_SX","RnFlatList","content","data","renderItem","props","style","rest","contentStyle","removeClippedSubviews","contentContainerStyle","undefined"],"sourceRoot":"../../../../src","sources":["atoms/rn-flat-list/rn-flat-list.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,KAAK,QAAO,gBAAgB;AAChD,SAAQC,QAAQ,IAAIC,UAAU,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAInD;AACA,MAAMC,KAAK,GAAG,CAAC,CAAC;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAGA,CAAS;EAACC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAE,GAAGC;AAA6B,CAAC,KAAK;EACnG,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGb,UAAU,CAACW,KAAgC,CAAC;EAClE,MAAMG,YAAY,GAAGb,KAAK,CAACO,OAAO,IAAIF,KAAK,CAAC;EAE5C,oBACED,IAAA,CAACF,UAAU;IACTM,IAAI,EAAEA;IACN;IACA;IAAA;IACAM,qBAAqB,EAAE,KAAM;IAC7BL,UAAU,EAAEA,UAAW;IAAA,GACnBG,IAAI;IACRG,qBAAqB,EAAER,OAAO,KAAKS,SAAS,GAAGA,SAAS,GAAGH,YAAa;IACxEF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/atoms/rn-section-list/rn-section-list.js

@@ -7,14 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const NO_SX = {};
 
 /**
- * Sectioned list built on React Native's own `VirtualizedList` rather than FlashList.
- *
- * FlashList is the default for lists in this codebase and should stay that way for data rows. This
- * exists for the case it cannot serve: content that hosts native views. FlashList positions its rows
- * absolutely and recycles their cells, and an `@expo/ui` host does not survive either — the hosted
- * view ends up drawn where the layout no longer is. `VirtualizedList` renders its cells in normal flow
- * inside a scroll view, using blank spacers for the range it has not rendered, so a hosted view stays
- * exactly where the layout put it.
+ * `RnFlatList` with sections: React Native's own `VirtualizedList`, cells in normal flow inside a scroll view, so a
+ * row that hosts native views keeps them where the layout put it.
  *
  * Sticky headers default off, unlike React Native, where they are on for vertical lists. A header that
  * detaches and floats over the content is a deliberate effect, not something a list should do unasked.
@@ -28,6 +22,9 @@ export const RnSectionList = ({
   const [style, rest] = useSplitSx(props);
   const contentStyle = useSx(content ?? NO_SX);
   return /*#__PURE__*/_jsx(RNSectionList, {
+    // Android clips by default, and a host is measured after its first layout — at zero height it counts as
+    // off-screen, is detached, and its native view never comes back.
+    removeClippedSubviews: false,
     sections: sections,
     ...rest,
     contentContainerStyle: content === undefined ? undefined : contentStyle,

package/lib/module/atoms/rn-section-list/rn-section-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSplitSx","useSx","SectionList","RNSectionList","jsx","_jsx","NO_SX","RnSectionList","content","sections","stickySectionHeadersEnabled","props","style","rest","contentStyle","contentContainerStyle","undefined"],"sourceRoot":"../../../../src","sources":["atoms/rn-section-list/rn-section-list.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,KAAK,QAAO,gBAAgB;AAChD,SAA8BC,WAAW,IAAIC,aAAa,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI/E;AACA,MAAMC,KAAK,GAAG,CAAC,CAAC;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGA,CAAoC;EAC/DC,OAAO;EACPC,QAAQ;EACRC,2BAA2B,GAAG,KAAK;EACnC,GAAGC;AACgC,CAAC,KAAK;EACzC,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGb,UAAU,CAACW,KAAgC,CAAC;EAClE,MAAMG,YAAY,GAAGb,KAAK,CAACO,OAAO,IAAIF,KAAK,CAAC;EAE5C,oBACED,IAAA,CAACF,aAAa;IACZM,QAAQ,EAAEA,QAAS;IAAA,GACfI,IAAI;IACRE,qBAAqB,EAAEP,OAAO,KAAKQ,SAAS,GAAGA,SAAS,GAAGF,YAAa;IACxEJ,2BAA2B,EAAEA,2BAA4B;IACzDE,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["useSplitSx","useSx","SectionList","RNSectionList","jsx","_jsx","NO_SX","RnSectionList","content","sections","stickySectionHeadersEnabled","props","style","rest","contentStyle","removeClippedSubviews","contentContainerStyle","undefined"],"sourceRoot":"../../../../src","sources":["atoms/rn-section-list/rn-section-list.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,KAAK,QAAO,gBAAgB;AAChD,SAA8BC,WAAW,IAAIC,aAAa,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI/E;AACA,MAAMC,KAAK,GAAG,CAAC,CAAC;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGA,CAAoC;EAC/DC,OAAO;EACPC,QAAQ;EACRC,2BAA2B,GAAG,KAAK;EACnC,GAAGC;AACgC,CAAC,KAAK;EACzC,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGb,UAAU,CAACW,KAAgC,CAAC;EAClE,MAAMG,YAAY,GAAGb,KAAK,CAACO,OAAO,IAAIF,KAAK,CAAC;EAE5C,oBACED,IAAA,CAACF,aAAa;IACZ;IACA;IACAY,qBAAqB,EAAE,KAAM;IAC7BN,QAAQ,EAAEA,QAAS;IAAA,GACfI,IAAI;IACRG,qBAAqB,EAAER,OAAO,KAAKS,SAAS,GAAGA,SAAS,GAAGH,YAAa;IACxEJ,2BAA2B,EAAEA,2BAA4B;IACzDE,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/atoms/segmented-control/index.js

@@ -1,5 +1,5 @@
 "use strict";
 
-export * from "./segmented-control.js";
+export * from './segmented-control';
 export * from "./segmented-control.types.js";
 //# sourceMappingURL=index.js.map

package/lib/module/atoms/segmented-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/index.ts"],"mappings":";;AAAA,cAAc,wBAAqB;AACnC,cAAc,8BAA2B","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/index.ts"],"mappings":";;AAAA,cAAc,qBAAqB;AACnC,cAAc,8BAA2B","ignoreList":[]}

package/lib/module/atoms/segmented-control/segmented-control.android.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import { Host, SegmentedButton, SingleChoiceSegmentedButtonRow, Text } from '@expo/ui/jetpack-compose';
+import { fillMaxWidth, testID as testIdModifier, weight } from '@expo/ui/jetpack-compose/modifiers';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useCallback, useMemo } from 'react';
+import { haptics } from "../../haptics/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MATCH_HEIGHT_ONLY = {
+  horizontal: false,
+  vertical: true
+};
+
+/** Every segment the same width, like UIKit's: Material's would size each to its label. */
+const SEGMENT = [weight(1)];
+
+/**
+ * Material's single-choice segmented buttons, the selected one filled with the accent like a checked `Switch`. Its own
+ * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Material plays
+ * nothing on a new segment, so this plays `selection`.
+ */
+export const SegmentedControl = ({
+  disabled = false,
+  onChange,
+  selectedIndex,
+  testID,
+  values
+}) => {
+  const theme = useAppTheme();
+  const colors = useMemo(() => ({
+    activeBorderColor: theme.color('fill.accent.primary'),
+    activeContainerColor: theme.color('fill.accent.primary'),
+    activeContentColor: theme.color('content.on.bg'),
+    disabledActiveBorderColor: theme.color('fill.accent.disabled'),
+    disabledActiveContainerColor: theme.color('fill.accent.disabled'),
+    disabledActiveContentColor: theme.color('btn.content.disabled'),
+    disabledInactiveBorderColor: theme.color('border.tertiary'),
+    disabledInactiveContentColor: theme.color('btn.content.disabled'),
+    inactiveBorderColor: theme.color('border.secondary.base'),
+    inactiveContentColor: theme.color('content.primary')
+  }), [theme]);
+  const rowModifiers = useMemo(() => testID ? [fillMaxWidth(), testIdModifier(testID)] : [fillMaxWidth()], [testID]);
+
+  // Material reports a tap on the segment that is already selected too; iOS does not, and neither does this.
+  const select = useCallback(index => {
+    if (index === selectedIndex) {
+      return;
+    }
+    haptics.selection();
+    onChange?.(index, values[index] ?? '');
+  }, [onChange, selectedIndex, values]);
+  return /*#__PURE__*/_jsx(Host, {
+    colorScheme: theme.dark ? 'dark' : 'light',
+    matchContents: MATCH_HEIGHT_ONLY,
+    seedColor: theme.materialSeed,
+    children: /*#__PURE__*/_jsx(SingleChoiceSegmentedButtonRow, {
+      modifiers: rowModifiers,
+      children: values.map((label, index) => /*#__PURE__*/_jsx(SegmentedButton, {
+        colors: colors,
+        enabled: !disabled,
+        modifiers: SEGMENT,
+        onClick: () => select(index),
+        selected: index === selectedIndex,
+        children: /*#__PURE__*/_jsx(SegmentedButton.Label, {
+          children: /*#__PURE__*/_jsx(Text, {
+            style: theme.typography.subheadlineMedium,
+            children: label
+          })
+        })
+      }, index))
+    })
+  });
+};
+//# sourceMappingURL=segmented-control.android.js.map

package/lib/module/atoms/segmented-control/segmented-control.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Host","SegmentedButton","SingleChoiceSegmentedButtonRow","Text","fillMaxWidth","testID","testIdModifier","weight","useAppTheme","useCallback","useMemo","haptics","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","SEGMENT","SegmentedControl","disabled","onChange","selectedIndex","values","theme","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContentColor","rowModifiers","select","index","selection","colorScheme","dark","matchContents","seedColor","materialSeed","children","modifiers","map","label","enabled","onClick","selected","Label","style","typography","subheadlineMedium"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,eAAe,EAAEC,8BAA8B,EAAEC,IAAI,QAAO,0BAA0B;AACpG,SAAQC,YAAY,EAAEC,MAAM,IAAIC,cAAc,EAAEC,MAAM,QAAO,oCAAoC;AACjG,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,OAAO,QAAO,wBAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrC,MAAMC,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;;AAE7D;AACA,MAAMC,OAAO,GAAG,CAACV,MAAM,CAAC,CAAC,CAAC,CAAC;;AAE3B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMW,gBAA2C,GAAGA,CAAC;EAC1DC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbhB,MAAM;EACNiB;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAE3B,MAAMgB,MAAM,GAAGd,OAAO,CACpB,OAAO;IACLe,iBAAiB,EAAEF,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC;IACrDC,oBAAoB,EAAEJ,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC;IACxDE,kBAAkB,EAAEL,KAAK,CAACG,KAAK,CAAC,eAAe,CAAC;IAChDG,yBAAyB,EAAEN,KAAK,CAACG,KAAK,CAAC,sBAAsB,CAAC;IAC9DI,4BAA4B,EAAEP,KAAK,CAACG,KAAK,CAAC,sBAAsB,CAAC;IACjEK,0BAA0B,EAAER,KAAK,CAACG,KAAK,CAAC,sBAAsB,CAAC;IAC/DM,2BAA2B,EAAET,KAAK,CAACG,KAAK,CAAC,iBAAiB,CAAC;IAC3DO,4BAA4B,EAAEV,KAAK,CAACG,KAAK,CAAC,sBAAsB,CAAC;IACjEQ,mBAAmB,EAAEX,KAAK,CAACG,KAAK,CAAC,uBAAuB,CAAC;IACzDS,oBAAoB,EAAEZ,KAAK,CAACG,KAAK,CAAC,iBAAiB;EACrD,CAAC,CAAC,EACF,CAACH,KAAK,CACR,CAAC;EAED,MAAMa,YAAY,GAAG1B,OAAO,CAAC,MAAOL,MAAM,GAAG,CAACD,YAAY,CAAC,CAAC,EAAEE,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,CAACD,YAAY,CAAC,CAAC,CAAE,EAAE,CAACC,MAAM,CAAC,CAAC;;EAEpH;EACA,MAAMgC,MAAM,GAAG5B,WAAW,CACvB6B,KAAa,IAAK;IACjB,IAAIA,KAAK,KAAKjB,aAAa,EAAE;MAC3B;IACF;IAEAV,OAAO,CAAC4B,SAAS,CAAC,CAAC;IACnBnB,QAAQ,GAAGkB,KAAK,EAAEhB,MAAM,CAACgB,KAAK,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC,EACD,CAAClB,QAAQ,EAAEC,aAAa,EAAEC,MAAM,CAClC,CAAC;EAED,oBACET,IAAA,CAACb,IAAI;IAACwC,WAAW,EAAEjB,KAAK,CAACkB,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa,EAAE5B,iBAAkB;IAAC6B,SAAS,EAAEpB,KAAK,CAACqB,YAAa;IAAAC,QAAA,eAChHhC,IAAA,CAACX,8BAA8B;MAAC4C,SAAS,EAAEV,YAAa;MAAAS,QAAA,EACrDvB,MAAM,CAACyB,GAAG,CAAC,CAACC,KAAK,EAAEV,KAAK,kBACvBzB,IAAA,CAACZ,eAAe;QACduB,MAAM,EAAEA,MAAO;QACfyB,OAAO,EAAE,CAAC9B,QAAS;QAEnB2B,SAAS,EAAE7B,OAAQ;QACnBiC,OAAO,EAAEA,CAAA,KAAMb,MAAM,CAACC,KAAK,CAAE;QAC7Ba,QAAQ,EAAEb,KAAK,KAAKjB,aAAc;QAAAwB,QAAA,eAElChC,IAAA,CAACZ,eAAe,CAACmD,KAAK;UAAAP,QAAA,eACpBhC,IAAA,CAACV,IAAI;YAACkD,KAAK,EAAE9B,KAAK,CAAC+B,UAAU,CAACC,iBAAkB;YAAAV,QAAA,EAAEG;UAAK,CAAO;QAAC,CAC1C;MAAC,GAPnBV,KAQU,CAClB;IAAC,CAC4B;EAAC,CAC7B,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/atoms/segmented-control/segmented-control.ios.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { SegmentedControl as NativeSegmentedControl } from '@hzblj/kara-native/swift-ui';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useCallback, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
+ * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
+ * the width it is given and UIKit's height. UIKit plays the control's own feedback.
+ */
+export const SegmentedControl = ({
+  disabled = false,
+  onChange,
+  selectedIndex,
+  testID,
+  values
+}) => {
+  const theme = useAppTheme();
+  const face = theme.typography.footnoteMedium;
+
+  // The native control speaks in values; a segment's is its index, so two labels may read the same.
+  const options = useMemo(() => values.map((label, index) => ({
+    label,
+    value: String(index)
+  })), [values]);
+  const onValueChange = useCallback(value => {
+    const index = Number(value);
+    onChange?.(index, values[index] ?? '');
+  }, [onChange, values]);
+  return /*#__PURE__*/_jsx(NativeSegmentedControl, {
+    activePillColor: theme.color('fill.accent.primary'),
+    activeTextColor: theme.color('content.on.bg'),
+    disabled: disabled,
+    fontFamily: face.fontFamily,
+    fontSize: face.fontSize,
+    inactiveTextColor: theme.color('content.primary'),
+    onValueChange: onValueChange,
+    options: options,
+    selectedValue: String(selectedIndex),
+    testID: testID
+  });
+};
+//# sourceMappingURL=segmented-control.ios.js.map

package/lib/module/atoms/segmented-control/segmented-control.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","useMemo","jsx","_jsx","disabled","onChange","selectedIndex","testID","values","theme","face","typography","footnoteMedium","options","map","label","index","value","String","onValueChange","Number","activePillColor","color","activeTextColor","fontFamily","fontSize","inactiveTextColor","selectedValue"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,IAAIC,sBAAsB,QAAO,6BAA6B;AACtF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI1C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMN,gBAA2C,GAAGA,CAAC;EAC1DO,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,IAAI,GAAGD,KAAK,CAACE,UAAU,CAACC,cAAc;;EAE5C;EACA,MAAMC,OAAO,GAAGZ,OAAO,CAAC,MAAMO,MAAM,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,MAAM;IAACD,KAAK;IAAEE,KAAK,EAAEC,MAAM,CAACF,KAAK;EAAC,CAAC,CAAC,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEtG,MAAMW,aAAa,GAAGnB,WAAW,CAC9BiB,KAAa,IAAK;IACjB,MAAMD,KAAK,GAAGI,MAAM,CAACH,KAAK,CAAC;IAC3BZ,QAAQ,GAAGW,KAAK,EAAER,MAAM,CAACQ,KAAK,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC,EACD,CAACX,QAAQ,EAAEG,MAAM,CACnB,CAAC;EAED,oBACEL,IAAA,CAACL,sBAAsB;IACrBuB,eAAe,EAAEZ,KAAK,CAACa,KAAK,CAAC,qBAAqB,CAAE;IACpDC,eAAe,EAAEd,KAAK,CAACa,KAAK,CAAC,eAAe,CAAE;IAC9ClB,QAAQ,EAAEA,QAAS;IACnBoB,UAAU,EAAEd,IAAI,CAACc,UAAW;IAC5BC,QAAQ,EAAEf,IAAI,CAACe,QAAS;IACxBC,iBAAiB,EAAEjB,KAAK,CAACa,KAAK,CAAC,iBAAiB,CAAE;IAClDH,aAAa,EAAEA,aAAc;IAC7BN,OAAO,EAAEA,OAAQ;IACjBc,aAAa,EAAET,MAAM,CAACZ,aAAa,CAAE;IACrCC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/atoms/switch/switch.android.js

@@ -7,6 +7,9 @@ import { useCallback, useMemo } from 'react';
 import { haptics } from "../../haptics/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Stands in for a missing handler: Material drops its 48dp touch target without one, and the switch moves. */
+const NOOP = () => undefined;
+
 /**
  * Material's switch, tinted with the accent like SwiftUI's toggle. With a label it is a full-width row — label at the
  * start, switch at the end — and the whole row toggles, the way a Material settings row does. A flip plays
@@ -33,7 +36,7 @@ export const Switch = ({
       checkedTrackColor: theme.color('fill.accent.primary')
     },
     enabled: !disabled,
-    onCheckedChange: onValueChange ? toggle : undefined,
+    onCheckedChange: onValueChange ? toggle : NOOP,
     value: value
   });
   if (!label) {

package/lib/module/atoms/switch/switch.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Switch","ComposeSwitch","Row","Text","clickable","fillMaxWidth","useAppTheme","useCallback","useMemo","haptics","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","toggle","next","play","rowModifiers","control","colors","checkedBorderColor","color","checkedThumbColor","checkedTrackColor","enabled","onCheckedChange","undefined","horizontalArrangement","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC3E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,OAAO,QAAO,wBAAe;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMd,MAAuB,GAAGA,CAAC;EAACe,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAkB,CAAC,KAAK;EACvGR,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMS,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,MAAM,GAAGb,WAAW,CACvBc,IAAa,IAAK;IACjBZ,OAAO,CAACa,IAAI,CAACD,IAAI,GAAG,UAAU,GAAG,WAAW,CAAC;IAC7CJ,aAAa,GAAGI,IAAI,CAAC;EACvB,CAAC,EACD,CAACJ,aAAa,CAChB,CAAC;EACD,MAAMM,YAAY,GAAGf,OAAO,CAC1B,MAAOO,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACZ,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMgB,MAAM,CAAC,CAACF,KAAK,CAAC,CAAC,CAAE,EACzG,CAACH,QAAQ,EAAEE,aAAa,EAAEG,MAAM,EAAEF,KAAK,CACzC,CAAC;EACD,MAAMM,OAAO,gBACXZ,IAAA,CAACX,aAAa;IACZwB,MAAM,EAAE;MACNC,kBAAkB,EAAEP,KAAK,CAACQ,KAAK,CAAC,qBAAqB,CAAC;MACtDC,iBAAiB,EAAET,KAAK,CAACQ,KAAK,CAAC,eAAe,CAAC;MAC/CE,iBAAiB,EAAEV,KAAK,CAACQ,KAAK,CAAC,qBAAqB;IACtD,CAAE;IACFG,OAAO,EAAE,CAACf,QAAS;IACnBgB,eAAe,EAAEd,aAAa,GAAGG,MAAM,GAAGY,SAAU;IACpDd,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOQ,OAAO;EAChB;EAEA,oBACEV,KAAA,CAACZ,GAAG;IAAC+B,qBAAqB,EAAC,cAAc;IAACC,SAAS,EAAEX,YAAa;IAACY,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,gBAC3FxB,IAAA,CAACT,IAAI;MAACwB,KAAK,EAAER,KAAK,CAACkB,WAAW,CAACtB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACuB,KAAK,EAAEnB,KAAK,CAACoB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GpB;IAAK,CACF,CAAC,EACNQ,OAAO;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Switch","ComposeSwitch","Row","Text","clickable","fillMaxWidth","useAppTheme","useCallback","useMemo","haptics","useHostGuard","jsx","_jsx","jsxs","_jsxs","NOOP","undefined","disabled","label","onValueChange","value","theme","toggle","next","play","rowModifiers","control","colors","checkedBorderColor","color","checkedThumbColor","checkedTrackColor","enabled","onCheckedChange","horizontalArrangement","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC3E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,OAAO,QAAO,wBAAe;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,IAAI,GAAGA,CAAA,KAAMC,SAAS;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMhB,MAAuB,GAAGA,CAAC;EAACiB,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAkB,CAAC,KAAK;EACvGV,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMW,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,MAAM,GAAGf,WAAW,CACvBgB,IAAa,IAAK;IACjBd,OAAO,CAACe,IAAI,CAACD,IAAI,GAAG,UAAU,GAAG,WAAW,CAAC;IAC7CJ,aAAa,GAAGI,IAAI,CAAC;EACvB,CAAC,EACD,CAACJ,aAAa,CAChB,CAAC;EACD,MAAMM,YAAY,GAAGjB,OAAO,CAC1B,MAAOS,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACd,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMkB,MAAM,CAAC,CAACF,KAAK,CAAC,CAAC,CAAE,EACzG,CAACH,QAAQ,EAAEE,aAAa,EAAEG,MAAM,EAAEF,KAAK,CACzC,CAAC;EACD,MAAMM,OAAO,gBACXd,IAAA,CAACX,aAAa;IACZ0B,MAAM,EAAE;MACNC,kBAAkB,EAAEP,KAAK,CAACQ,KAAK,CAAC,qBAAqB,CAAC;MACtDC,iBAAiB,EAAET,KAAK,CAACQ,KAAK,CAAC,eAAe,CAAC;MAC/CE,iBAAiB,EAAEV,KAAK,CAACQ,KAAK,CAAC,qBAAqB;IACtD,CAAE;IACFG,OAAO,EAAE,CAACf,QAAS;IACnBgB,eAAe,EAAEd,aAAa,GAAGG,MAAM,GAAGP,IAAK;IAC/CK,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOQ,OAAO;EAChB;EAEA,oBACEZ,KAAA,CAACZ,GAAG;IAACgC,qBAAqB,EAAC,cAAc;IAACC,SAAS,EAAEV,YAAa;IAACW,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,gBAC3FzB,IAAA,CAACT,IAAI;MAAC0B,KAAK,EAAER,KAAK,CAACiB,WAAW,CAACrB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACsB,KAAK,EAAElB,KAAK,CAACmB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GnB;IAAK,CACF,CAAC,EACNQ,OAAO;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/molecules/search-bar/search-bar.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useAppTheme } from '@hzblj/kara-theme';
-import { TextInput } from 'react-native';
+import { Platform, TextInput } from 'react-native';
 import { Box } from "../../atoms/box/index.js";
 import { Pressable } from "../../atoms/pressable/index.js";
 import { RnGlyph } from "../../glyph/index.js";
@@ -13,6 +13,19 @@ export const SearchBar = ({
   value
 }) => {
   const theme = useAppTheme();
+  const {
+    lineHeight,
+    ...face
+  } = theme.typography.body;
+  /**
+   * A single-line `UITextField` sets its text against the bottom of a line taller than the font, so the variant's
+   * `lineHeight` pushed the text below the magnifier beside it. iOS takes the face without it, in a field as tall as
+   * the line would have been; Android centres the line and keeps it.
+   */
+  const text = Platform.OS === 'ios' ? {
+    ...face,
+    height: lineHeight
+  } : theme.typography.body;
   return /*#__PURE__*/_jsxs(Box, {
     align: "center",
     bg: "fill.quaternary",
@@ -31,7 +44,7 @@ export const SearchBar = ({
       onChangeText: onChangeText,
       placeholder: placeholder,
       placeholderTextColor: theme.color('content.quaternary'),
-      style: [theme.typography.body, {
+      style: [text, {
         color: theme.color('content.primary'),
         flex: 1,
         padding: 0

package/lib/module/molecules/search-bar/search-bar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useAppTheme","TextInput","Box","Pressable","RnGlyph","jsx","_jsx","jsxs","_jsxs","SearchBar","onChangeText","placeholder","testID","value","theme","align","bg","borderRadius","flexDirection","gap","px","py","wide","children","color","name","size","placeholderTextColor","style","typography","body","flex","padding","length","onPress"],"sourceRoot":"../../../../src","sources":["molecules/search-bar/search-bar.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,SAAS,QAAO,cAAc;AAEtC,SAAQC,GAAG,QAAO,0BAAiB;AACnC,SAAQC,SAAS,QAAO,gCAAuB;AAC/C,SAAQC,OAAO,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY;EACZC,WAAW,GAAG,QAAQ;EACtBC,MAAM;EACNC;AACc,CAAC,KAAK;EACpB,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAE3B,oBACEQ,KAAA,CAACN,GAAG;IACFa,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,iBAAiB;IACpBC,YAAY,EAAC,QAAQ;IACrBC,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAC,IAAI;IACRC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAC,IAAI;IACPT,MAAM,EAAEA,MAAO;IACfU,IAAI;IAAAC,QAAA,gBAEJjB,IAAA,CAACF,OAAO;MAACoB,KAAK,EAAC,kBAAkB;MAACC,IAAI,EAAC,QAAQ;MAACC,IAAI,EAAC;IAAK,CAAE,CAAC,eAC7DpB,IAAA,CAACL,SAAS;MACRS,YAAY,EAAEA,YAAa;MAC3BC,WAAW,EAAEA,WAAY;MACzBgB,oBAAoB,EAAEb,KAAK,CAACU,KAAK,CAAC,oBAAoB,CAAE;MACxDI,KAAK,EAAE,CAACd,KAAK,CAACe,UAAU,CAACC,IAAI,EAAE;QAACN,KAAK,EAAEV,KAAK,CAACU,KAAK,CAAC,iBAAiB,CAAC;QAAEO,IAAI,EAAE,CAAC;QAAEC,OAAO,EAAE;MAAC,CAAC,CAAE;MAC7FnB,KAAK,EAAEA;IAAM,CACd,CAAC,EACDA,KAAK,CAACoB,MAAM,GAAG,CAAC,gBACf3B,IAAA,CAACH,SAAS;MAAC+B,OAAO,EAAEA,CAAA,KAAMxB,YAAY,GAAG,EAAE,CAAE;MAAAa,QAAA,eAC3CjB,IAAA,CAACF,OAAO;QAACoB,KAAK,EAAC,kBAAkB;QAACC,IAAI,EAAC,OAAO;QAACC,IAAI,EAAC;MAAK,CAAE;IAAC,CACnD,CAAC,GACV,IAAI;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["useAppTheme","Platform","TextInput","Box","Pressable","RnGlyph","jsx","_jsx","jsxs","_jsxs","SearchBar","onChangeText","placeholder","testID","value","theme","lineHeight","face","typography","body","text","OS","height","align","bg","borderRadius","flexDirection","gap","px","py","wide","children","color","name","size","placeholderTextColor","style","flex","padding","length","onPress"],"sourceRoot":"../../../../src","sources":["molecules/search-bar/search-bar.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,QAAQ,EAAEC,SAAS,QAAO,cAAc;AAEhD,SAAQC,GAAG,QAAO,0BAAiB;AACnC,SAAQC,SAAS,QAAO,gCAAuB;AAC/C,SAAQC,OAAO,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY;EACZC,WAAW,GAAG,QAAQ;EACtBC,MAAM;EACNC;AACc,CAAC,KAAK;EACpB,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAM;IAACgB,UAAU;IAAE,GAAGC;EAAI,CAAC,GAAGF,KAAK,CAACG,UAAU,CAACC,IAAI;EACnD;AACF;AACA;AACA;AACA;EACE,MAAMC,IAAI,GAAGnB,QAAQ,CAACoB,EAAE,KAAK,KAAK,GAAG;IAAC,GAAGJ,IAAI;IAAEK,MAAM,EAAEN;EAAU,CAAC,GAAGD,KAAK,CAACG,UAAU,CAACC,IAAI;EAE1F,oBACEV,KAAA,CAACN,GAAG;IACFoB,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,iBAAiB;IACpBC,YAAY,EAAC,QAAQ;IACrBC,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAC,IAAI;IACRC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAC,IAAI;IACPhB,MAAM,EAAEA,MAAO;IACfiB,IAAI;IAAAC,QAAA,gBAEJxB,IAAA,CAACF,OAAO;MAAC2B,KAAK,EAAC,kBAAkB;MAACC,IAAI,EAAC,QAAQ;MAACC,IAAI,EAAC;IAAK,CAAE,CAAC,eAC7D3B,IAAA,CAACL,SAAS;MACRS,YAAY,EAAEA,YAAa;MAC3BC,WAAW,EAAEA,WAAY;MACzBuB,oBAAoB,EAAEpB,KAAK,CAACiB,KAAK,CAAC,oBAAoB,CAAE;MACxDI,KAAK,EAAE,CAAChB,IAAI,EAAE;QAACY,KAAK,EAAEjB,KAAK,CAACiB,KAAK,CAAC,iBAAiB,CAAC;QAAEK,IAAI,EAAE,CAAC;QAAEC,OAAO,EAAE;MAAC,CAAC,CAAE;MAC5ExB,KAAK,EAAEA;IAAM,CACd,CAAC,EACDA,KAAK,CAACyB,MAAM,GAAG,CAAC,gBACfhC,IAAA,CAACH,SAAS;MAACoC,OAAO,EAAEA,CAAA,KAAM7B,YAAY,GAAG,EAAE,CAAE;MAAAoB,QAAA,eAC3CxB,IAAA,CAACF,OAAO;QAAC2B,KAAK,EAAC,kBAAkB;QAACC,IAAI,EAAC,OAAO;QAACC,IAAI,EAAC;MAAK,CAAE;IAAC,CACnD,CAAC,GACV,IAAI;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/molecules/tooltip/tooltip.android.js

@@ -1,19 +1,30 @@
 "use strict";
 
-import { Text as ComposeText, TooltipBox } from '@expo/ui/jetpack-compose';
+import { Text as ComposeText } from '@expo/ui/jetpack-compose';
+import { TooltipBox } from '@hzblj/kara-native/jetpack-compose';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { useCallback } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Material's plain tooltip in kara's controlled `TooltipBox`: shown while `visible`, centred above the anchor and kept
+ * inside the window. Material's own would open on a long press and hide itself without a word to JS.
+ */
 export const Tooltip = ({
   children,
-  text
+  onDismiss,
+  text,
+  visible
 }) => {
   useHostGuard('Tooltip');
   const theme = useAppTheme();
+  const onDismissRequest = useCallback(() => onDismiss(), [onDismiss]);
   return /*#__PURE__*/_jsxs(TooltipBox, {
-    children: [/*#__PURE__*/_jsx(TooltipBox.PlainTooltip, {
-      containerColor: theme.colorString('surface.high.contrast'),
-      contentColor: theme.colorString('content.on.high.contrast'),
+    containerColor: theme.color('surface.high.contrast'),
+    isPresented: visible,
+    onDismissRequest: onDismissRequest,
+    plain: true,
+    children: [/*#__PURE__*/_jsx(TooltipBox.Text, {
       children: /*#__PURE__*/_jsx(ComposeText, {
         color: theme.colorString('content.on.high.contrast'),
         style: theme.typography.footnote,

package/lib/module/molecules/tooltip/tooltip.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","TooltipBox","useAppTheme","useHostGuard","jsx","_jsx","jsxs","_jsxs","Tooltip","children","text","theme","PlainTooltip","containerColor","colorString","contentColor","color","style","typography","footnote"],"sourceRoot":"../../../../src","sources":["molecules/tooltip/tooltip.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,EAAEC,UAAU,QAAO,0BAA0B;AACxE,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,QAAQ;EAAEC;AAAkB,CAAC,KAAK;EAC3EP,YAAY,CAAC,SAAS,CAAC;EAEvB,MAAMQ,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,oBACEK,KAAA,CAACN,UAAU;IAAAQ,QAAA,gBACTJ,IAAA,CAACJ,UAAU,CAACW,YAAY;MACtBC,cAAc,EAAEF,KAAK,CAACG,WAAW,CAAC,uBAAuB,CAAE;MAC3DC,YAAY,EAAEJ,KAAK,CAACG,WAAW,CAAC,0BAA0B,CAAE;MAAAL,QAAA,eAE5DJ,IAAA,CAACL,WAAW;QAACgB,KAAK,EAAEL,KAAK,CAACG,WAAW,CAAC,0BAA0B,CAAE;QAACG,KAAK,EAAEN,KAAK,CAACO,UAAU,CAACC,QAAS;QAAAV,QAAA,EACjGC;MAAI,CACM;IAAC,CACS,CAAC,EACzBD,QAAQ;EAAA,CACC,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","TooltipBox","useAppTheme","useCallback","useHostGuard","jsx","_jsx","jsxs","_jsxs","Tooltip","children","onDismiss","text","visible","theme","onDismissRequest","containerColor","color","isPresented","plain","colorString","style","typography","footnote"],"sourceRoot":"../../../../src","sources":["molecules/tooltip/tooltip.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,QAAO,0BAA0B;AAC5D,SAAQC,UAAU,QAAO,oCAAoC;AAC7D,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,QAAO,OAAO;AAEjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,SAAS;EAAEC,IAAI;EAAEC;AAAqB,CAAC,KAAK;EAC/FT,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMU,KAAK,GAAGZ,WAAW,CAAC,CAAC;EAC3B,MAAMa,gBAAgB,GAAGZ,WAAW,CAAC,MAAMQ,SAAS,CAAC,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEpE,oBACEH,KAAA,CAACP,UAAU;IACTe,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC,uBAAuB,CAAE;IACrDC,WAAW,EAAEL,OAAQ;IACrBE,gBAAgB,EAAEA,gBAAiB;IACnCI,KAAK;IAAAT,QAAA,gBAELJ,IAAA,CAACL,UAAU,CAACF,IAAI;MAAAW,QAAA,eACdJ,IAAA,CAACN,WAAW;QAACiB,KAAK,EAAEH,KAAK,CAACM,WAAW,CAAC,0BAA0B,CAAE;QAACC,KAAK,EAAEP,KAAK,CAACQ,UAAU,CAACC,QAAS;QAAAb,QAAA,EACjGE;MAAI,CACM;IAAC,CACC,CAAC,EACjBF,QAAQ;EAAA,CACC,CAAC;AAEjB,CAAC","ignoreList":[]}