@hzblj/kara-components 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @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
+
+- [#10](https://github.com/hzblj/kara-ui/pull/10) [`62b7131`](https://github.com/hzblj/kara-ui/commit/62b713143bd03872ecdd89ca8de42d98fe589617) Thanks [@hzblj](https://github.com/hzblj)! - Haptics: kara's own, native on both platforms, named for what happened.
+
+  - `haptics.success()`, `haptics.selection()`, … — one function per haptic — and `haptics.play(name)` for a name that arrives as data. `selection`, `tick`, `toggleOn`/`toggleOff`, `success`/`warning`/`error`, `longPress`, `dragStart`, `thresholdActivate`/`thresholdDeactivate`, `keyPress`, and the impacts `soft`, `light`, `medium`, `rigid`, `heavy` (`intensity` scales them on iOS). Synchronous, nothing to await.
+  - iOS: UIKit's feedback generators, kept alive and warmed up with `haptics.prepare` — `Pressable` prepares its haptic on press-in. Android: the system's own haptic feedback (`View.performHapticFeedback`), with Android 14's constants falling back to older ones — never a raw vibration. Both follow the user's system setting.
+  - `useHapticFeedback(trigger, haptic)` plays on every change of a value, never on mount; a function of the previous and next value picks a haptic per change.
+  - `haptics.setEnabled(false)` silences every kara haptic, the components' own included.
+  - `Pressable`'s `haptic` takes a name as well as `true` (a `light` impact); `Chip` plays `selection`.
+  - On Android, where Compose's Material controls play nothing: `Switch` plays `toggleOn`/`toggleOff`, a stepped `Slider` ticks at every stop, `SegmentedControl` plays `selection`. iOS keeps its native controls' own feedback.
+  - `Slider`: `step` is the increment on Android too — it was passed to Compose as the number of stops.
+  - `expo-haptics` is no longer a peer dependency.
+
+### Patch Changes
+
+- Updated dependencies [[`62b7131`](https://github.com/hzblj/kara-ui/commit/62b713143bd03872ecdd89ca8de42d98fe589617)]:
+  - @hzblj/kara-native@0.6.0
+  - @hzblj/kara-theme@0.6.0
+  - @hzblj/kara-sx@0.6.0
+
 ## 0.5.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/chip/chip.js

@@ -14,7 +14,7 @@ export const Chip = ({
   borderColor: selected ? 'border.accent' : 'border.tertiary',
   borderRadius: "full",
   borderWidth: 1,
-  haptic: true,
+  haptic: "selection",
   justify: "center",
   onPress: onPress,
   px: "s12",

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

@@ -1 +1 @@
-{"version":3,"names":["Pressable","RnText","jsx","_jsx","Chip","label","onPress","selected","testID","align","bg","borderColor","borderRadius","borderWidth","haptic","justify","px","py","children","color","variant"],"sourceRoot":"../../../../src","sources":["atoms/chip/chip.tsx"],"mappings":";;AAAA,SAAQA,SAAS,QAAO,uBAAc;AACtC,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGjC,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,KAAK;EAAEC,OAAO;EAAEC,QAAQ,GAAG,KAAK;EAAEC;AAAiB,CAAC,kBACvFL,IAAA,CAACH,SAAS;EACRS,KAAK,EAAC,QAAQ;EACdC,EAAE,EAAEH,QAAQ,GAAG,kBAAkB,GAAG,eAAgB;EACpDI,WAAW,EAAEJ,QAAQ,GAAG,eAAe,GAAG,iBAAkB;EAC5DK,YAAY,EAAC,MAAM;EACnBC,WAAW,EAAE,CAAE;EACfC,MAAM;EACNC,OAAO,EAAC,QAAQ;EAChBT,OAAO,EAAEA,OAAQ;EACjBU,EAAE,EAAC,KAAK;EACRC,EAAE,EAAC,IAAI;EACPT,MAAM,EAAEA,MAAO;EAAAU,QAAA,eAEff,IAAA,CAACF,MAAM;IAACkB,KAAK,EAAEZ,QAAQ,GAAG,gBAAgB,GAAG,mBAAoB;IAACa,OAAO,EAAC,aAAa;IAAAF,QAAA,EACpFb;EAAK,CACA;AAAC,CACA,CACZ","ignoreList":[]}
+{"version":3,"names":["Pressable","RnText","jsx","_jsx","Chip","label","onPress","selected","testID","align","bg","borderColor","borderRadius","borderWidth","haptic","justify","px","py","children","color","variant"],"sourceRoot":"../../../../src","sources":["atoms/chip/chip.tsx"],"mappings":";;AAAA,SAAQA,SAAS,QAAO,uBAAc;AACtC,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGjC,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,KAAK;EAAEC,OAAO;EAAEC,QAAQ,GAAG,KAAK;EAAEC;AAAiB,CAAC,kBACvFL,IAAA,CAACH,SAAS;EACRS,KAAK,EAAC,QAAQ;EACdC,EAAE,EAAEH,QAAQ,GAAG,kBAAkB,GAAG,eAAgB;EACpDI,WAAW,EAAEJ,QAAQ,GAAG,eAAe,GAAG,iBAAkB;EAC5DK,YAAY,EAAC,MAAM;EACnBC,WAAW,EAAE,CAAE;EACfC,MAAM,EAAC,WAAW;EAClBC,OAAO,EAAC,QAAQ;EAChBT,OAAO,EAAEA,OAAQ;EACjBU,EAAE,EAAC,KAAK;EACRC,EAAE,EAAC,IAAI;EACPT,MAAM,EAAEA,MAAO;EAAAU,QAAA,eAEff,IAAA,CAACF,MAAM;IAACkB,KAAK,EAAEZ,QAAQ,GAAG,gBAAgB,GAAG,mBAAoB;IAACa,OAAO,EAAC,aAAa;IAAAF,QAAA,EACpFb;EAAK,CACA;AAAC,CACA,CACZ","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/pressable/pressable.js

@@ -1,10 +1,10 @@
 "use strict";
 
 import { useSplitSx } from '@hzblj/kara-sx';
-import * as Haptics from 'expo-haptics';
 import { useCallback } from 'react';
 import { Pressable as RNPressable } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { haptics } from "../../haptics/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SPRING = {
   damping: 20,
@@ -21,23 +21,29 @@ export const Pressable = ({
 }) => {
   const [resolved, rest] = useSplitSx(props);
   const scale = useSharedValue(1);
+  const feedback = haptic === true ? 'light' : haptic || undefined;
   const rStyle = useAnimatedStyle(() => ({
     transform: [{
       scale: scale.value
     }]
   }), []);
+
+  // The finger is down: the Taptic Engine has until the release to wake, so the haptic lands with the press.
   const onPressIn = useCallback(() => {
     scale.value = withSpring(0.96, SPRING);
-  }, [scale]);
+    if (feedback) {
+      haptics.prepare(feedback);
+    }
+  }, [feedback, scale]);
   const onPressOut = useCallback(() => {
     scale.value = withSpring(1, SPRING);
   }, [scale]);
   const onPressWithHaptic = useCallback(() => {
-    if (haptic) {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => undefined);
+    if (feedback) {
+      haptics.play(feedback);
     }
     onPress?.();
-  }, [haptic, onPress]);
+  }, [feedback, onPress]);
   return /*#__PURE__*/_jsx(AnimatedPressable, {
     disabled: disabled,
     hitSlop: 8,

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

@@ -1 +1 @@
-{"version":3,"names":["useSplitSx","Haptics","useCallback","Pressable","RNPressable","Animated","useAnimatedStyle","useSharedValue","withSpring","jsx","_jsx","SPRING","damping","stiffness","AnimatedPressable","createAnimatedComponent","children","disabled","haptic","onPress","testID","props","resolved","rest","scale","rStyle","transform","value","onPressIn","onPressOut","onPressWithHaptic","impactAsync","ImpactFeedbackStyle","Light","catch","undefined","hitSlop","style"],"sourceRoot":"../../../../src","sources":["atoms/pressable/pressable.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AACzC,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAAQC,WAAW,QAAO,OAAO;AACjC,SAAQC,SAAS,IAAIC,WAAW,QAAO,cAAc;AACrD,OAAOC,QAAQ,IAAGC,gBAAgB,EAAEC,cAAc,EAAEC,UAAU,QAAO,yBAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG9F,MAAMC,MAAM,GAAG;EAACC,OAAO,EAAE,EAAE;EAAEC,SAAS,EAAE;AAAG,CAAC;AAE5C,MAAMC,iBAAiB,GAAGT,QAAQ,CAACU,uBAAuB,CAACX,WAAW,CAAC;AAEvE,OAAO,MAAMD,SAA6B,GAAGA,CAAC;EAC5Ca,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,MAAM,GAAG,KAAK;EACdC,OAAO;EACPC,MAAM;EACN,GAAGC;AACW,CAAC,KAAK;EACpB,MAAM,CAACC,QAAQ,EAAEC,IAAI,CAAC,GAAGvB,UAAU,CAACqB,KAAK,CAAC;EAC1C,MAAMG,KAAK,GAAGjB,cAAc,CAAC,CAAC,CAAC;EAE/B,MAAMkB,MAAM,GAAGnB,gBAAgB,CAAC,OAAO;IAACoB,SAAS,EAAE,CAAC;MAACF,KAAK,EAAEA,KAAK,CAACG;IAAK,CAAC;EAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMC,SAAS,GAAG1B,WAAW,CAAC,MAAM;IAClCsB,KAAK,CAACG,KAAK,GAAGnB,UAAU,CAAC,IAAI,EAAEG,MAAM,CAAC;EACxC,CAAC,EAAE,CAACa,KAAK,CAAC,CAAC;EAEX,MAAMK,UAAU,GAAG3B,WAAW,CAAC,MAAM;IACnCsB,KAAK,CAACG,KAAK,GAAGnB,UAAU,CAAC,CAAC,EAAEG,MAAM,CAAC;EACrC,CAAC,EAAE,CAACa,KAAK,CAAC,CAAC;EAEX,MAAMM,iBAAiB,GAAG5B,WAAW,CAAC,MAAM;IAC1C,IAAIgB,MAAM,EAAE;MACVjB,OAAO,CAAC8B,WAAW,CAAC9B,OAAO,CAAC+B,mBAAmB,CAACC,KAAK,CAAC,CAACC,KAAK,CAAC,MAAMC,SAAS,CAAC;IAC/E;IAEAhB,OAAO,GAAG,CAAC;EACb,CAAC,EAAE,CAACD,MAAM,EAAEC,OAAO,CAAC,CAAC;EAErB,oBACET,IAAA,CAACI,iBAAiB;IAChBG,QAAQ,EAAEA,QAAS;IACnBmB,OAAO,EAAE,CAAE;IACXjB,OAAO,EAAEW,iBAAkB;IAC3BF,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBQ,KAAK,EAAE,CAACf,QAAQ,EAAEG,MAAM,CAAE;IAC1BL,MAAM,EAAEA,MAAO;IAAA,GACXG,IAAI;IAAAP,QAAA,EAEPA;EAAQ,CACQ,CAAC;AAExB,CAAC","ignoreList":[]}
+{"version":3,"names":["useSplitSx","useCallback","Pressable","RNPressable","Animated","useAnimatedStyle","useSharedValue","withSpring","haptics","jsx","_jsx","SPRING","damping","stiffness","AnimatedPressable","createAnimatedComponent","children","disabled","haptic","onPress","testID","props","resolved","rest","scale","feedback","undefined","rStyle","transform","value","onPressIn","prepare","onPressOut","onPressWithHaptic","play","hitSlop","style"],"sourceRoot":"../../../../src","sources":["atoms/pressable/pressable.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AACzC,SAAQC,WAAW,QAAO,OAAO;AACjC,SAAQC,SAAS,IAAIC,WAAW,QAAO,cAAc;AACrD,OAAOC,QAAQ,IAAGC,gBAAgB,EAAEC,cAAc,EAAEC,UAAU,QAAO,yBAAyB;AAE9F,SAAQC,OAAO,QAAO,wBAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrC,MAAMC,MAAM,GAAG;EAACC,OAAO,EAAE,EAAE;EAAEC,SAAS,EAAE;AAAG,CAAC;AAE5C,MAAMC,iBAAiB,GAAGV,QAAQ,CAACW,uBAAuB,CAACZ,WAAW,CAAC;AAEvE,OAAO,MAAMD,SAA6B,GAAGA,CAAC;EAC5Cc,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,MAAM,GAAG,KAAK;EACdC,OAAO;EACPC,MAAM;EACN,GAAGC;AACW,CAAC,KAAK;EACpB,MAAM,CAACC,QAAQ,EAAEC,IAAI,CAAC,GAAGvB,UAAU,CAACqB,KAAK,CAAC;EAC1C,MAAMG,KAAK,GAAGlB,cAAc,CAAC,CAAC,CAAC;EAC/B,MAAMmB,QAAQ,GAAGP,MAAM,KAAK,IAAI,GAAG,OAAO,GAAGA,MAAM,IAAIQ,SAAS;EAEhE,MAAMC,MAAM,GAAGtB,gBAAgB,CAAC,OAAO;IAACuB,SAAS,EAAE,CAAC;MAACJ,KAAK,EAAEA,KAAK,CAACK;IAAK,CAAC;EAAC,CAAC,CAAC,EAAE,EAAE,CAAC;;EAEhF;EACA,MAAMC,SAAS,GAAG7B,WAAW,CAAC,MAAM;IAClCuB,KAAK,CAACK,KAAK,GAAGtB,UAAU,CAAC,IAAI,EAAEI,MAAM,CAAC;IAEtC,IAAIc,QAAQ,EAAE;MACZjB,OAAO,CAACuB,OAAO,CAACN,QAAQ,CAAC;IAC3B;EACF,CAAC,EAAE,CAACA,QAAQ,EAAED,KAAK,CAAC,CAAC;EAErB,MAAMQ,UAAU,GAAG/B,WAAW,CAAC,MAAM;IACnCuB,KAAK,CAACK,KAAK,GAAGtB,UAAU,CAAC,CAAC,EAAEI,MAAM,CAAC;EACrC,CAAC,EAAE,CAACa,KAAK,CAAC,CAAC;EAEX,MAAMS,iBAAiB,GAAGhC,WAAW,CAAC,MAAM;IAC1C,IAAIwB,QAAQ,EAAE;MACZjB,OAAO,CAAC0B,IAAI,CAACT,QAAQ,CAAC;IACxB;IAEAN,OAAO,GAAG,CAAC;EACb,CAAC,EAAE,CAACM,QAAQ,EAAEN,OAAO,CAAC,CAAC;EAEvB,oBACET,IAAA,CAACI,iBAAiB;IAChBG,QAAQ,EAAEA,QAAS;IACnBkB,OAAO,EAAE,CAAE;IACXhB,OAAO,EAAEc,iBAAkB;IAC3BH,SAAS,EAAEA,SAAU;IACrBE,UAAU,EAAEA,UAAW;IACvBI,KAAK,EAAE,CAACd,QAAQ,EAAEK,MAAM,CAAE;IAC1BP,MAAM,EAAEA,MAAO;IAAA,GACXG,IAAI;IAAAP,QAAA,EAEPA;EAAQ,CACQ,CAAC;AAExB,CAAC","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":"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","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/slider/slider.android.js

@@ -2,8 +2,15 @@
 
 import { Slider as ComposeSlider } from '@expo/ui/jetpack-compose';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { useCallback, useEffect, useRef } from 'react';
+import { haptics } from "../../haptics/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Material's slider. `step` is the increment, as SwiftUI takes it; Compose counts the stops between the two ends
+ * instead, so it is converted. A stepped slider ticks at every stop the thumb reaches — Compose's Material slider
+ * plays nothing of its own, where iOS 26's slider already does.
+ */
 export const Slider = ({
   disabled = false,
   max = 1,
@@ -14,6 +21,23 @@ export const Slider = ({
 }) => {
   useHostGuard('Slider');
   const theme = useAppTheme();
+  const steps = step ? Math.max(0, Math.round((max - min) / step) - 1) : 0;
+
+  // The stop is derived from the value rather than trusting it to arrive snapped, and remembered between events:
+  // Compose reports faster than React re-renders the controlled value.
+  const stopOf = useCallback(at => step ? Math.round((at - min) / step) : 0, [min, step]);
+  const stop = useRef(stopOf(value));
+  useEffect(() => {
+    stop.current = stopOf(value);
+  }, [stopOf, value]);
+  const onChange = useCallback(next => {
+    const reached = stopOf(next);
+    if (steps > 0 && reached !== stop.current) {
+      haptics.tick();
+    }
+    stop.current = reached;
+    onValueChange?.(next);
+  }, [onValueChange, stopOf, steps]);
   return /*#__PURE__*/_jsx(ComposeSlider, {
     colors: {
       activeTrackColor: theme.color('fill.accent.primary'),
@@ -22,8 +46,8 @@ export const Slider = ({
     enabled: !disabled,
     max: max,
     min: min,
-    onValueChange: onValueChange,
-    steps: step,
+    onValueChange: onChange,
+    steps: steps,
     value: value
   });
 };