@hzblj/kara-components 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,26 +1,60 @@
 # @hzblj/kara-components
 
+## 0.10.0
+
+### Minor Changes
+
+- [#23](https://github.com/hzblj/kara-ui/pull/23) [`26f1651`](https://github.com/hzblj/kara-ui/commit/26f1651b6a8be9fc2d7af6bbe29bd2335605a717) Thanks [@hzblj](https://github.com/hzblj)! - `ColorPicker` works on Android. Compose ships no colour picker, so kara draws its own in the iOS picker's shape: a well with a rainbow ring beside the label, and a Material bottom sheet with a grid of swatches, a spectrum and RGB sliders, an opacity slider with `supportsOpacity`, and the colour with its hex at the foot. It reports every change through `onValueChange`, as `#RRGGBB` or, with opacity, `#RRGGBBAA`. It needs no extra dependency.
+
+  `Pressable` takes a `pressEffect`: `scale` springs the content down to `pressedScale` (0.96), `opacity` dims it to `pressedOpacity` (`o60`), `none` holds it still. Each platform keeps its own by default, a spring on iOS and the ripple on Android, and Android keeps the ripple on top of any effect unless `ripple` is off.
+
+  `IconButton` on iOS sits in a 44pt tap target with the icon centred, as Android's sits in Material's 48dp, so a row of them spaces itself the same way on both. A disabled one is dimmed once, by SwiftUI, instead of twice.
+
+### Patch Changes
+
+- Updated dependencies [[`26f1651`](https://github.com/hzblj/kara-ui/commit/26f1651b6a8be9fc2d7af6bbe29bd2335605a717), [`26f1651`](https://github.com/hzblj/kara-ui/commit/26f1651b6a8be9fc2d7af6bbe29bd2335605a717)]:
+  - @hzblj/kara-native@0.10.0
+  - @hzblj/kara-theme@0.10.0
+  - @hzblj/kara-sx@0.10.0
+
+## 0.9.0
+
+### Minor Changes
+
+- [#21](https://github.com/hzblj/kara-ui/pull/21) [`356c00f`](https://github.com/hzblj/kara-ui/commit/356c00f76eee8323c4eb65ed4cbcda121c3af627) Thanks [@hzblj](https://github.com/hzblj)! - `TextField`'s `error` takes a message: `error="A postcode has five digits."` shows it under the field (Material's supporting text beside its error icon on Android), so an error never rests on colour alone, which in dark mode Material draws a pale red. `error` alone still marks the field. kara's glyphs gain `error` for it.
+
+  `Tabs` on iOS tint their icons: the selected one takes the accent and the rest the label colour. Expo Router tints an asset-catalog icon only when both states have an icon colour, so with the accent alone every icon kept its SVG's black, selected or not, in dark mode too.
+
+  `Surface` on iOS sits on `surface.primary` unless told otherwise, as it does on Android; a plain one drew nothing behind its content. `Progress` with `circular` and a `value` is a ring that fills on iOS (a SwiftUI capacity `Gauge`), where a circular `ProgressView` ignored the value and spun.
+
+### Patch Changes
+
+- Updated dependencies [[`356c00f`](https://github.com/hzblj/kara-ui/commit/356c00f76eee8323c4eb65ed4cbcda121c3af627)]:
+  - @hzblj/kara-native@0.9.0
+  - @hzblj/kara-theme@0.9.0
+  - @hzblj/kara-sx@0.9.0
+
 ## 0.8.0
 
 ### Minor Changes
 
-- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `ActivityIndicator` plays Material 3's expressive `LoadingIndicator` on Android — its shapes morph as it turns — in a host of its own, so it still renders anywhere; iOS keeps UIKit's spinner. It takes the design system's props now, not React Native's: `color` is a token (`fill.accent.primary` by default), `size` is `small` or `large`.
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `ActivityIndicator` plays Material 3's expressive `LoadingIndicator` on Android (its shapes morph as it turns), in a host of its own, so it still renders anywhere; iOS keeps UIKit's spinner. It takes the design system's props now, not React Native's: `color` is a token (`fill.accent.primary` by default), `size` is `small` or `large`.
 
   `Collapsible` on Android spans its parent, the chevron at the far end, and its row is never shorter than Material's 48dp touch target; the chevron sat right after the label. `Pager`'s dots on Android are centred under the pages.
 
 - [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - Android gets glass and a scroll edge of its own.
 
-  - `GlassView` is frosted glass on Android: what lies behind the capsule, blurred (Android 12+), under a translucent tonal surface — or its `tint` — and a light hairline, the blurred surfaces Android 16 gives its own system UI. It was an almost clear capsule that left its content unreadable over a photo. Below Android 12 the same colours are drawn near-opaque. kara-native's new `BackdropBlurView` (`/jetpack-compose`) does the blur — blurred, then saturated, as iOS lifts the colour under its materials: a plain view, no host, and an idle screen draws no frames.
-  - `ScrollEdgeContainer` on Android behaves like a Material top app bar on scroll: the bars stay transparent at rest and fill with the scrolled container colour once content scrolls under the top one, the bottom one while there is more below. Its scroll view also takes the room between the bars now — it grew to its content's height, ran under the bottom bar and could not scroll.
-  - New token `surface.secondary`: Material's `surfaceContainer` on Android, `tertiarySystemGroupedBackgroundColor` on iOS — a step above `surface.primary`.
+  - `GlassView` is frosted glass on Android: what lies behind the capsule, blurred (Android 12+), under a translucent tonal surface (or its `tint`) and a light hairline, the blurred surfaces Android 16 gives its own system UI. It was an almost clear capsule that left its content unreadable over a photo. Below Android 12 the same colours are drawn near-opaque. kara-native's new `BackdropBlurView` (`/jetpack-compose`) does the blur (blurred, then saturated, as iOS lifts the colour under its materials): a plain view, no host, and an idle screen draws no frames.
+  - `ScrollEdgeContainer` on Android behaves like a Material top app bar on scroll: the bars stay transparent at rest and fill with the scrolled container colour once content scrolls under the top one, the bottom one while there is more below. Its scroll view also takes the room between the bars now; before, it grew to its content's height, ran under the bottom bar and could not scroll.
+  - New token `surface.secondary`, a step above `surface.primary`: Material's `surfaceContainer` on Android, `tertiarySystemGroupedBackgroundColor` on iOS.
 
-- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `Pressable` on Android presses the Material way: a ripple over the content — the pressed state layer — clipped to the pressable's shape, and nothing scales. iOS keeps its spring to 96%. Give the `Pressable` the `borderRadius` of what it wraps (`full` around a `GlassView`) and the ripple follows it.
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `Pressable` on Android presses the Material way: a ripple over the content (the pressed state layer), clipped to the pressable's shape, and nothing scales. iOS keeps its spring to 96%. Give the `Pressable` the `borderRadius` of what it wraps (`full` around a `GlassView`) and the ripple follows it.
 
   `Collapsible` on Android expands down from its row with a fade, and its chevron turns toward the content; it grew from a corner and the chevron jumped.
 
-- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - New `BlurView`: the system materials, by SwiftUI's names — `ultraThin`, `thin`, `regular`, `thick`, `ultraThick`.
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - New `BlurView`: the system materials, by SwiftUI's names (`ultraThin`, `thin`, `regular`, `thick`, `ultraThick`).
 
-  - iOS: UIKit's `system*Material` blur as a plain view — no SwiftUI host, cheap enough for a list cell — with `vibrancy` (`primary` to `quaternary`, `fill`, `separator`) to draw the content the way iOS draws its own on a material.
+  - iOS: UIKit's `system*Material` blur as a plain view (no SwiftUI host, cheap enough for a list cell), with `vibrancy` (`primary` to `quaternary`, `fill`, `separator`) to draw the content the way iOS draws its own on a material.
   - Android: what lies behind, blurred and saturated (Android 12+), under a Material tonal surface that rises from `surface` to `surfaceContainerHighest` as the material thickens; below Android 12 the surface alone.
   - `appearance` pins a material to light or dark whatever the app's; `borderRadius` shapes it and clips the content.
 
@@ -28,8 +62,8 @@
 
 - [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `sx` reaches the components that still took raw styles or none:
 
-  - `Text` takes the native `sx` surface — padding, a background, a frame (`wide` puts the text on the side `align` names) and the `ios` bucket. `ios.contentTransition` with the new `ios.animation` rolls a number to its next value, and `ios.monospacedDigit` keeps it from shifting what follows. `Stepper` on iOS is built on it.
-  - `RnText` takes `Box`'s `sx` props for its own box — margins, `flex`, padding — all but `align`, which still aligns its lines.
+  - `Text` takes the native `sx` surface: padding, a background, a frame (`wide` puts the text on the side `align` names) and the `ios` bucket. `ios.contentTransition` with the new `ios.animation` rolls a number to its next value, and `ios.monospacedDigit` keeps it from shifting what follows. `Stepper` on iOS is built on it.
+  - `RnText` takes `Box`'s `sx` props for its own box (margins, `flex`, padding), all but `align`, which still aligns its lines.
   - `Image` is `sx(expo-image)`, the way `Box` is `sx(View)`: `w`, `h`, `aspectRatio`, `borderRadius`, `position`… instead of a `style` object. Its props are exported as `ImageProps`.
   - `Island` takes the same `sx` props for where it sits in React Native layout: `<Island h={240} matchContents={false}>`. An explicit `style` still wins.
   - `Skeleton` is sized with the `sx` names, `h` and `w` (was `height` and `width`), and `w` takes a percentage: `<Skeleton h={12} w="60%" />` for a line that ends early.
@@ -46,7 +80,7 @@
 
 ### 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:
+- [#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
@@ -58,33 +92,33 @@
   </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.
+  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)! - **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.
+- [#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.
+- [#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.
+  - `Screen` keeps its content clear of the status bar when nothing sits above it, as a SwiftUI host keeps to the safe area; it used to draw 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 used to run 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)! - `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)! - `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.
+- [#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
@@ -97,13 +131,13 @@
 
 - [#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.
+  - One function per haptic (`haptics.success()`, `haptics.selection()`, …) 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.
+  - `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
@@ -164,7 +198,7 @@
 
 ### Minor Changes
 
-- [`f84ffd5`](https://github.com/hzblj/kara-ui/commit/f84ffd52954a5e7052541c8682787137de205a28) Thanks [@hzblj](https://github.com/hzblj)! - Native sheets with a native header. `Sheet` is now a TrueSheet (`@lodev09/react-native-true-sheet`, a new peer dependency) with `<Sheet.Header>` — a real navigation bar with a centred, leading or large title that hands over to the bar as it scrolls away, items on either side, and on iOS 26 the content scrolls under it with the soft edge effect — plus `<Sheet.ScrollView>`, `useSheetScroll`, detents, a footer and a ref (`present`/`dismiss`/`resize`). It is React Native tier now: no host, native atoms inside go in an `Island`. `fitToContents` is replaced by `detents` (`['auto']` by default).
+- [`f84ffd5`](https://github.com/hzblj/kara-ui/commit/f84ffd52954a5e7052541c8682787137de205a28) Thanks [@hzblj](https://github.com/hzblj)! - Native sheets with a native header. `Sheet` is now a TrueSheet (`@lodev09/react-native-true-sheet`, a new peer dependency) with `<Sheet.Header>`, `<Sheet.ScrollView>`, `useSheetScroll`, detents, a footer and a ref (`present`/`dismiss`/`resize`). `<Sheet.Header>` is a real navigation bar with a centred, leading or large title that hands over to the bar as it scrolls away, items on either side, and on iOS 26 the content scrolls under it with the soft edge effect. It is React Native tier now: no host, native atoms inside go in an `Island`. `fitToContents` is replaced by `detents` (`['auto']` by default).
 
   `NavigationBar` takes `leadingItems` / `trailingItems` instead of `onBack` / `onClose`: `back`, `close` or an app `icon`, on either side and in any order; on iOS 26 neighbours share a glass capsule unless an item is `separated`. Also `titleAlignment`, `titleVisible`, `inverted` and an iOS `search` field. On Android it is now Material's native top app bar.
 
@@ -192,12 +226,12 @@
 
 - [`c30bef6`](https://github.com/hzblj/kara-ui/commit/c30bef6be2639deb6d385ad209d1a2799b5b656f) Thanks [@hzblj](https://github.com/hzblj)! - Icons are now fully native and the app's own: `plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]` turns every SVG in the folder into an iOS asset-catalog template image and an Android vector drawable at prebuild (`x.ios.svg` / `x.android.svg` for per-platform glyphs), and writes `kara-icons.d.ts` so `name` only accepts icons that exist; `npx kara-icons` does the same for CI. `Icon` draws them in a host, the new `RnIcon` anywhere, and `Tabs` passes them as `xcasset` / `drawable`. The built-in SF Symbol / Material icon names and the `@expo/vector-icons` peer dependency are gone.
 
-- [`c30bef6`](https://github.com/hzblj/kara-ui/commit/c30bef6be2639deb6d385ad209d1a2799b5b656f) Thanks [@hzblj](https://github.com/hzblj)! - Leaner, reusable-only components. `Countdown` is gone, with its native views. There is one `ContextMenu` now — the native module's long-press menu on React Native content, with a custom preview on iOS (formerly `RnContextMenu`); the `@expo/ui`-based one is removed.
+- [`c30bef6`](https://github.com/hzblj/kara-ui/commit/c30bef6be2639deb6d385ad209d1a2799b5b656f) Thanks [@hzblj](https://github.com/hzblj)! - Leaner, reusable-only components. `Countdown` is gone, with its native views. There is one `ContextMenu` now: the native module's long-press menu on React Native content, with a custom preview on iOS (formerly `RnContextMenu`); the `@expo/ui`-based one is removed.
 
   Android, reworked to look and behave like Material while honouring the theme:
 
   - `Button`, `Badge` and `Alert` render their labels; `Button` keeps Material's own shape (no iOS ring), takes `tint` as its fill with a label that contrasts with it, and draws `glass` as Material's outlined button.
-  - `Alert` is built from `AlertDialog`'s slots — title, message, the confirm action (destructive when asked) and Cancel — instead of drawing empty.
+  - `Alert` is built from `AlertDialog`'s slots instead of drawing empty: title, message, the confirm action (destructive when asked) and Cancel.
   - `Menu` presents its actions in Material's dropdown popup, with their icons, instead of laying them out over the trigger.
   - `Picker` is a themed Material exposed dropdown the width of its container.
   - `Switch`, `Checkbox` and `RadioGroup` are tinted with the accent, and with a label are full-width rows that toggle as a whole; `Form` sections span the form's width.
@@ -215,7 +249,7 @@
 
 ### Minor Changes
 
-- [`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1) Thanks [@hzblj](https://github.com/hzblj)! - First release of the kara-ui design system: theme and tokens, the `sx` engine, atoms, molecules, organisms and `Screen`, native tabs (`@hzblj/kara-ui/router`), the KaraUI native module (Liquid Glass, scroll edge effect, native countdown, context menu with preview, rich tooltip, FAB menu), and `KaraProvider` with theme overrides — colours, the app's own fonts, the Material seed, and Material You dynamic colour on Android. Text uses the platform's face by default. Install `@hzblj/kara-ui`; the scoped packages are its building blocks.
+- [`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1) Thanks [@hzblj](https://github.com/hzblj)! - First release of the kara-ui design system: theme and tokens, the `sx` engine, atoms, molecules, organisms and `Screen`, native tabs (`@hzblj/kara-ui/router`), the KaraUI native module (Liquid Glass, scroll edge effect, native countdown, context menu with preview, rich tooltip, FAB menu), and `KaraProvider` with theme overrides (colours, the app's own fonts, the Material seed, and Material You dynamic colour on Android). Text uses the platform's face by default. Install `@hzblj/kara-ui`; the scoped packages are its building blocks.
 
 ### Patch Changes
 

package/README.md

@@ -8,25 +8,25 @@
 [license-badge]: https://img.shields.io/badge/license-MIT-ff5700?labelColor=27272a
 [license-url]: https://github.com/hzblj/kara-ui/blob/main/LICENSE
 
-<a href="https://www.kara.janblazej.dev"><img src="https://www.kara.janblazej.dev/og.png" alt="Kara — native UI for Expo: real SwiftUI and Jetpack Compose views" width="720"></a>
+<a href="https://www.kara.janblazej.dev"><img src="https://www.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://www.kara.janblazej.dev) — a native-first design system for Expo.
+The components of [Kara UI](https://www.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
+- **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.
+- **`Screen` and `Island`**: the hosts native views render in.
+- **The React Native tier**: `RnView`, `RnText`, `RnScrollView` and the rest are 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://www.kara.janblazej.dev/docs/components) — every one photographed on iOS and Android, with its props
+- [Components](https://www.kara.janblazej.dev/docs/components): every one on iOS and Android, with its props
 - [Screen and Island](https://www.kara.janblazej.dev/docs/hosts)
 - [Haptics](https://www.kara.janblazej.dev/docs/haptics)
 

package/lib/module/atoms/color-picker/color-picker.android.js

@@ -1,9 +1,36 @@
 "use strict";
 
-import { warnUnsupported } from "../../platform-support.js";
-/** Compose has no colour picker, and there is nothing sane to degrade a colour wheel into. */
-export const ColorPicker = () => {
-  warnUnsupported('ColorPicker', 'Android');
-  return null;
+import { ColorWell } from '@hzblj/kara-native/jetpack-compose';
+import { useHostGuard } from "../../host-context.js";
+import { HStack } from "../h-stack/index.js";
+import { Spacer } from "../spacer/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The row SwiftUI's `ColorPicker` lays out on iOS, the label leading and the well trailing, around kara's own Compose
+ * well: Compose ships no colour picker, so the sheet behind it draws the iOS picker's grid, spectrum and sliders.
+ */
+export const ColorPicker = ({
+  label,
+  onValueChange,
+  supportsOpacity = false,
+  testID,
+  value
+}) => {
+  useHostGuard('ColorPicker');
+  return /*#__PURE__*/_jsxs(HStack, {
+    align: "center",
+    spacing: "s12",
+    testID: testID,
+    wide: true,
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      children: label
+    }) : null, /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(ColorWell, {
+      onValueChange: onValueChange,
+      supportsOpacity: supportsOpacity,
+      title: label,
+      value: value
+    })]
+  });
 };
 //# sourceMappingURL=color-picker.android.js.map

package/lib/module/atoms/color-picker/color-picker.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["warnUnsupported","ColorPicker"],"sourceRoot":"../../../../src","sources":["atoms/color-picker/color-picker.android.tsx"],"mappings":";;AAAA,SAAQA,eAAe,QAAO,2BAAwB;AAGtD;AACA,OAAO,MAAMC,WAAiC,GAAGA,CAAA,KAAM;EACrDD,eAAe,CAAC,aAAa,EAAE,SAAS,CAAC;EAEzC,OAAO,IAAI;AACb,CAAC","ignoreList":[]}
+{"version":3,"names":["ColorWell","useHostGuard","HStack","Spacer","Text","jsx","_jsx","jsxs","_jsxs","ColorPicker","label","onValueChange","supportsOpacity","testID","value","align","spacing","wide","children","title"],"sourceRoot":"../../../../src","sources":["atoms/color-picker/color-picker.android.tsx"],"mappings":";;AAAA,SAAQA,SAAS,QAAO,oCAAoC;AAE5D,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,MAAM,QAAO,qBAAY;AACjC,SAAQC,MAAM,QAAO,oBAAW;AAChC,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAiC,GAAGA,CAAC;EAChDC,KAAK;EACLC,aAAa;EACbC,eAAe,GAAG,KAAK;EACvBC,MAAM;EACNC;AACgB,CAAC,KAAK;EACtBb,YAAY,CAAC,aAAa,CAAC;EAE3B,oBACEO,KAAA,CAACN,MAAM;IAACa,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACH,MAAM,EAAEA,MAAO;IAACI,IAAI;IAAAC,QAAA,GACtDR,KAAK,gBAAGJ,IAAA,CAACF,IAAI;MAAAc,QAAA,EAAER;IAAK,CAAO,CAAC,GAAG,IAAI,eACpCJ,IAAA,CAACH,MAAM,IAAE,CAAC,eACVG,IAAA,CAACN,SAAS;MAACW,aAAa,EAAEA,aAAc;MAACC,eAAe,EAAEA,eAAgB;MAACO,KAAK,EAAET,KAAM;MAACI,KAAK,EAAEA;IAAM,CAAE,CAAC;EAAA,CACnG,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/atoms/icon-button/icon-button.ios.js

@@ -1,11 +1,19 @@
 "use strict";
 
 import { Button } from '@expo/ui/swift-ui';
-import { buttonStyle, disabled as disabledModifier } from '@expo/ui/swift-ui/modifiers';
+import { buttonStyle, contentShape, disabled as disabledModifier, shapes } from '@expo/ui/swift-ui/modifiers';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { Icon } from "../icon/index.js";
+import { ZStack } from "../z-stack/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Apple's least tap target. Android's `IconButton` is Material's 48dp; this is the same idea in points. */
+const TARGET = 44;
+
+/** The whole square takes the tap, not only the glyph's own pixels. */
+const WHOLE_TARGET = {
+  modifiers: [contentShape(shapes.circle())]
+};
 export const IconButton = ({
   disabled = false,
   name,
@@ -24,9 +32,14 @@ export const IconButton = ({
     modifiers: modifiers,
     onPress: onPress,
     testID: testID,
-    children: /*#__PURE__*/_jsx(Icon, {
-      color: disabled ? 'btn.content.disabled' : 'content.primary',
-      name: name
+    children: /*#__PURE__*/_jsx(ZStack, {
+      h: TARGET,
+      ios: WHOLE_TARGET,
+      w: TARGET,
+      children: /*#__PURE__*/_jsx(Icon, {
+        color: "content.primary",
+        name: name
+      })
     })
   });
 };

package/lib/module/atoms/icon-button/icon-button.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Button","buttonStyle","disabled","disabledModifier","useMemo","useHostGuard","Icon","jsx","_jsx","IconButton","name","onPress","testID","modifiers","list","push","children","color"],"sourceRoot":"../../../../src","sources":["atoms/icon-button/icon-button.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,WAAW,EAAEC,QAAQ,IAAIC,gBAAgB,QAAO,6BAA6B;AACrF,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG5B,OAAO,MAAMC,UAA+B,GAAGA,CAAC;EAACP,QAAQ,GAAG,KAAK;EAAEQ,IAAI;EAAEC,OAAO;EAAEC;AAAuB,CAAC,KAAK;EAC7GP,YAAY,CAAC,YAAY,CAAC;EAE1B,MAAMQ,SAAS,GAAGT,OAAO,CAAC,MAAM;IAC9B,MAAMU,IAAI,GAAG,CAACb,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAIC,QAAQ,EAAE;MACZY,IAAI,CAACC,IAAI,CAACZ,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC;IAEA,OAAOW,IAAI;EACb,CAAC,EAAE,CAACZ,QAAQ,CAAC,CAAC;EAEd,oBACEM,IAAA,CAACR,MAAM;IAACa,SAAS,EAAEA,SAAU;IAACF,OAAO,EAAEA,OAAQ;IAACC,MAAM,EAAEA,MAAO;IAAAI,QAAA,eAC7DR,IAAA,CAACF,IAAI;MAACW,KAAK,EAAEf,QAAQ,GAAG,sBAAsB,GAAG,iBAAkB;MAACQ,IAAI,EAAEA;IAAK,CAAE;EAAC,CAC5E,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","buttonStyle","contentShape","disabled","disabledModifier","shapes","useMemo","useHostGuard","Icon","ZStack","jsx","_jsx","TARGET","WHOLE_TARGET","modifiers","circle","IconButton","name","onPress","testID","list","push","children","h","ios","w","color"],"sourceRoot":"../../../../src","sources":["atoms/icon-button/icon-button.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,WAAW,EAAEC,YAAY,EAAEC,QAAQ,IAAIC,gBAAgB,EAAEC,MAAM,QAAO,6BAA6B;AAC3G,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAC5B,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGjC;AACA,MAAMC,MAAM,GAAG,EAAE;;AAEjB;AACA,MAAMC,YAAY,GAAG;EAACC,SAAS,EAAE,CAACZ,YAAY,CAACG,MAAM,CAACU,MAAM,CAAC,CAAC,CAAC;AAAC,CAAC;AAEjE,OAAO,MAAMC,UAA+B,GAAGA,CAAC;EAACb,QAAQ,GAAG,KAAK;EAAEc,IAAI;EAAEC,OAAO;EAAEC;AAAuB,CAAC,KAAK;EAC7GZ,YAAY,CAAC,YAAY,CAAC;EAE1B,MAAMO,SAAS,GAAGR,OAAO,CAAC,MAAM;IAC9B,MAAMc,IAAI,GAAG,CAACnB,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAIE,QAAQ,EAAE;MACZiB,IAAI,CAACC,IAAI,CAACjB,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC;IAEA,OAAOgB,IAAI;EACb,CAAC,EAAE,CAACjB,QAAQ,CAAC,CAAC;EAEd,oBACEQ,IAAA,CAACX,MAAM;IAACc,SAAS,EAAEA,SAAU;IAACI,OAAO,EAAEA,OAAQ;IAACC,MAAM,EAAEA,MAAO;IAAAG,QAAA,eAC7DX,IAAA,CAACF,MAAM;MAACc,CAAC,EAAEX,MAAO;MAACY,GAAG,EAAEX,YAAa;MAACY,CAAC,EAAEb,MAAO;MAAAU,QAAA,eAE9CX,IAAA,CAACH,IAAI;QAACkB,KAAK,EAAC,iBAAiB;QAACT,IAAI,EAAEA;MAAK,CAAE;IAAC,CACtC;EAAC,CACH,CAAC;AAEb,CAAC","ignoreList":[]}

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

@@ -1,10 +1,10 @@
 "use strict";
 
 import { useSplitSx } from '@hzblj/kara-sx';
-import { useAppTheme, withOpacity } from '@hzblj/kara-theme';
+import { duration, opacity, useAppTheme, withOpacity } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
-import { Platform, Pressable as RNPressable, View } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { Platform, Pressable as RNPressable } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { haptics } from "../../haptics/index.js";
 import { splitForRipple } from "../../ripple-clip.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,48 +12,70 @@ const SPRING = {
   damping: 20,
   stiffness: 400
 };
+
+/** A dim comes in quickly and leaves a little slower, as UIKit's own highlight does. */
+const DIM_IN = {
+  duration: duration.d100
+};
+const DIM_OUT = {
+  duration: duration.d200
+};
+const PLATFORM_EFFECT = Platform.OS === 'ios' ? 'scale' : 'none';
 const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
 export const Pressable = ({
   children,
   disabled = false,
   haptic = false,
   onPress,
+  pressEffect = PLATFORM_EFFECT,
+  pressedOpacity = 'o60',
+  pressedScale = 0.96,
+  ripple: withRipple = true,
   testID,
   ...props
 }) => {
   const [resolved, rest] = useSplitSx(props);
-  const scale = useSharedValue(1);
+  // 0 at rest, 1 held: one value drives whichever effect is picked, so a change of effect needs no second animation.
+  const pressed = useSharedValue(0);
   const feedback = haptic === true ? 'light' : haptic || undefined;
+  const dimmed = opacity[pressedOpacity];
   const theme = useAppTheme();
   const isAndroid = Platform.OS === 'android';
-  const rStyle = useAnimatedStyle(() => ({
-    transform: [{
-      scale: scale.value
-    }]
-  }), []);
+  const rStyle = useAnimatedStyle(() => {
+    if (pressEffect === 'scale') {
+      return {
+        transform: [{
+          scale: 1 - (1 - pressedScale) * pressed.value
+        }]
+      };
+    }
+    return pressEffect === 'opacity' ? {
+      opacity: 1 - (1 - dimmed) * pressed.value
+    } : {};
+  }, [dimmed, pressEffect, pressedScale]);
 
-  // Android's press is Material's: a ripple over the content — the pressed state layer, `onSurface` at 10 % — clipped to
-  // the shape by an outer view (`splitForRipple`), and nothing moves. iOS springs down.
-  const ripple = useMemo(() => isAndroid ? {
+  // Android's press is Material's: a ripple over the content (the pressed state layer, `onSurface` at 10 %) clipped to
+  // the shape by an outer view (`splitForRipple`). The effect, when there is one, moves that outer view, ripple and all.
+  const ripple = useMemo(() => isAndroid && withRipple ? {
     color: withOpacity(String(theme.color('content.primary')), 'o10'),
     foreground: true
-  } : undefined, [isAndroid, theme]);
+  } : undefined, [isAndroid, theme, withRipple]);
   const androidStyle = useMemo(() => isAndroid ? splitForRipple(resolved) : undefined, [isAndroid, resolved]);
 
   // The finger is down: the Taptic Engine has until the release to wake, so the haptic lands with the press.
   const onPressIn = useCallback(() => {
-    if (!isAndroid) {
-      scale.value = withSpring(0.96, SPRING);
+    if (pressEffect === 'scale') {
+      pressed.value = withSpring(1, SPRING);
+    } else if (pressEffect === 'opacity') {
+      pressed.value = withTiming(1, DIM_IN);
     }
     if (feedback) {
       haptics.prepare(feedback);
     }
-  }, [feedback, isAndroid, scale]);
+  }, [feedback, pressEffect, pressed]);
   const onPressOut = useCallback(() => {
-    if (!isAndroid) {
-      scale.value = withSpring(1, SPRING);
-    }
-  }, [isAndroid, scale]);
+    pressed.value = pressEffect === 'scale' ? withSpring(0, SPRING) : withTiming(0, DIM_OUT);
+  }, [pressEffect, pressed]);
   const onPressWithHaptic = useCallback(() => {
     if (feedback) {
       haptics.play(feedback);
@@ -61,14 +83,15 @@ export const Pressable = ({
     onPress?.();
   }, [feedback, onPress]);
   if (androidStyle) {
-    return /*#__PURE__*/_jsx(View, {
-      style: androidStyle.outer,
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [androidStyle.outer, rStyle],
       children: /*#__PURE__*/_jsx(RNPressable, {
         android_ripple: ripple,
         disabled: disabled,
         hitSlop: 8,
         onPress: onPressWithHaptic,
         onPressIn: onPressIn,
+        onPressOut: onPressOut,
         style: androidStyle.inner,
         testID: testID,
         ...rest,

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

@@ -1 +1 @@
-{"version":3,"names":["useSplitSx","useAppTheme","withOpacity","useCallback","useMemo","Platform","Pressable","RNPressable","View","Animated","useAnimatedStyle","useSharedValue","withSpring","haptics","splitForRipple","jsx","_jsx","SPRING","damping","stiffness","AnimatedPressable","createAnimatedComponent","children","disabled","haptic","onPress","testID","props","resolved","rest","scale","feedback","undefined","theme","isAndroid","OS","rStyle","transform","value","ripple","color","String","foreground","androidStyle","onPressIn","prepare","onPressOut","onPressWithHaptic","play","style","outer","android_ripple","hitSlop","inner"],"sourceRoot":"../../../../src","sources":["atoms/pressable/pressable.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useSplitSx","duration","opacity","useAppTheme","withOpacity","useCallback","useMemo","Platform","Pressable","RNPressable","Animated","useAnimatedStyle","useSharedValue","withSpring","withTiming","haptics","splitForRipple","jsx","_jsx","SPRING","damping","stiffness","DIM_IN","d100","DIM_OUT","d200","PLATFORM_EFFECT","OS","AnimatedPressable","createAnimatedComponent","children","disabled","haptic","onPress","pressEffect","pressedOpacity","pressedScale","ripple","withRipple","testID","props","resolved","rest","pressed","feedback","undefined","dimmed","theme","isAndroid","rStyle","transform","scale","value","color","String","foreground","androidStyle","onPressIn","prepare","onPressOut","onPressWithHaptic","play","View","style","outer","android_ripple","hitSlop","inner"],"sourceRoot":"../../../../src","sources":["atoms/pressable/pressable.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/progress/progress.ios.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import { ProgressView } from '@expo/ui/swift-ui';
-import { progressViewStyle, tint } from '@expo/ui/swift-ui/modifiers';
+import { Gauge, ProgressView } from '@expo/ui/swift-ui';
+import { gaugeStyle, progressViewStyle, tint } from '@expo/ui/swift-ui/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
@@ -12,8 +12,14 @@ export const Progress = ({
 }) => {
   useHostGuard('Progress');
   const theme = useAppTheme();
-  const modifiers = useMemo(() => [progressViewStyle(circular ? 'circular' : 'linear'), tint(theme.color('fill.accent.primary'))], [circular, theme]);
-  return /*#__PURE__*/_jsx(ProgressView, {
+  const ring = circular && value !== undefined;
+  const modifiers = useMemo(() => [ring ? gaugeStyle('circularCapacity') : progressViewStyle(circular ? 'circular' : 'linear'), tint(theme.color('fill.accent.primary'))], [circular, ring, theme]);
+
+  // SwiftUI's circular `ProgressView` ignores its value on iOS and spins; a ring that fills is a capacity `Gauge`.
+  return ring ? /*#__PURE__*/_jsx(Gauge, {
+    modifiers: modifiers,
+    value: value
+  }) : /*#__PURE__*/_jsx(ProgressView, {
     modifiers: modifiers,
     value: value ?? null
   });

package/lib/module/atoms/progress/progress.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["ProgressView","progressViewStyle","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Progress","circular","value","theme","modifiers","color"],"sourceRoot":"../../../../src","sources":["atoms/progress/progress.ios.tsx"],"mappings":";;AAAA,SAAQA,YAAY,QAAO,mBAAmB;AAC9C,SAAQC,iBAAiB,EAAEC,IAAI,QAAO,6BAA6B;AACnE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACC,QAAQ,GAAG,KAAK;EAAEC;AAAoB,CAAC,KAAK;EACvFL,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMM,KAAK,GAAGR,WAAW,CAAC,CAAC;EAE3B,MAAMS,SAAS,GAAGR,OAAO,CACvB,MAAM,CAACH,iBAAiB,CAACQ,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC,EAAEP,IAAI,CAACS,KAAK,CAACE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EACrG,CAACJ,QAAQ,EAAEE,KAAK,CAClB,CAAC;EAED,oBAAOJ,IAAA,CAACP,YAAY;IAACY,SAAS,EAAEA,SAAU;IAACF,KAAK,EAAEA,KAAK,IAAI;EAAK,CAAE,CAAC;AACrE,CAAC","ignoreList":[]}
+{"version":3,"names":["Gauge","ProgressView","gaugeStyle","progressViewStyle","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Progress","circular","value","theme","ring","undefined","modifiers","color"],"sourceRoot":"../../../../src","sources":["atoms/progress/progress.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,YAAY,QAAO,mBAAmB;AACrD,SAAQC,UAAU,EAAEC,iBAAiB,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACC,QAAQ,GAAG,KAAK;EAAEC;AAAoB,CAAC,KAAK;EACvFL,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMM,KAAK,GAAGR,WAAW,CAAC,CAAC;EAE3B,MAAMS,IAAI,GAAGH,QAAQ,IAAIC,KAAK,KAAKG,SAAS;EAC5C,MAAMC,SAAS,GAAGV,OAAO,CACvB,MAAM,CACJQ,IAAI,GAAGZ,UAAU,CAAC,kBAAkB,CAAC,GAAGC,iBAAiB,CAACQ,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC,EAC3FP,IAAI,CAACS,KAAK,CAACI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CACzC,EACD,CAACN,QAAQ,EAAEG,IAAI,EAAED,KAAK,CACxB,CAAC;;EAED;EACA,OAAOC,IAAI,gBACTL,IAAA,CAACT,KAAK;IAACgB,SAAS,EAAEA,SAAU;IAACJ,KAAK,EAAEA;EAAM,CAAE,CAAC,gBAE7CH,IAAA,CAACR,YAAY;IAACe,SAAS,EAAEA,SAAU;IAACJ,KAAK,EAAEA,KAAK,IAAI;EAAK,CAAE,CAC5D;AACH,CAAC","ignoreList":[]}

package/lib/module/atoms/surface/surface.ios.js

@@ -11,7 +11,10 @@ export const Surface = ({
   ...sx
 }) => {
   useHostGuard('Surface');
+
+  // `surface.primary` unless told otherwise, as Material's `Surface` is on Android — without it a plain one drew nothing.
   const modifiers = useSxModifiers({
+    bg: 'surface.primary',
     borderRadius: 'large',
     p: 's16',
     ...sx

package/lib/module/atoms/surface/surface.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["GlassEffectContainer","VStack","useSxModifiers","useHostGuard","jsx","_jsx","Surface","children","glass","testID","sx","modifiers","borderRadius","p","content","alignment"],"sourceRoot":"../../../../src","sources":["atoms/surface/surface.ios.tsx"],"mappings":";;AAAA,SAAQA,oBAAoB,EAAEC,MAAM,QAAO,mBAAmB;AAC9D,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,KAAK,GAAG,KAAK;EAAEC,MAAM;EAAE,GAAGC;AAAgB,CAAC,KAAK;EACnGP,YAAY,CAAC,SAAS,CAAC;EAEvB,MAAMQ,SAAS,GAAGT,cAAc,CAAC;IAACU,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAE,GAAGH;EAAE,CAAC,CAAC;EAC1E,MAAMI,OAAO,gBACXT,IAAA,CAACJ,MAAM;IAACc,SAAS,EAAC,SAAS;IAACJ,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAF,QAAA,EAC9DA;EAAQ,CACH,CACT;EAED,IAAI,CAACC,KAAK,EAAE;IACV,OAAOM,OAAO;EAChB;EAEA,oBAAOT,IAAA,CAACL,oBAAoB;IAAAO,QAAA,EAAEO;EAAO,CAAuB,CAAC;AAC/D,CAAC","ignoreList":[]}
+{"version":3,"names":["GlassEffectContainer","VStack","useSxModifiers","useHostGuard","jsx","_jsx","Surface","children","glass","testID","sx","modifiers","bg","borderRadius","p","content","alignment"],"sourceRoot":"../../../../src","sources":["atoms/surface/surface.ios.tsx"],"mappings":";;AAAA,SAAQA,oBAAoB,EAAEC,MAAM,QAAO,mBAAmB;AAC9D,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,KAAK,GAAG,KAAK;EAAEC,MAAM;EAAE,GAAGC;AAAgB,CAAC,KAAK;EACnGP,YAAY,CAAC,SAAS,CAAC;;EAEvB;EACA,MAAMQ,SAAS,GAAGT,cAAc,CAAC;IAACU,EAAE,EAAE,iBAAiB;IAAEC,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAE,GAAGJ;EAAE,CAAC,CAAC;EACjG,MAAMK,OAAO,gBACXV,IAAA,CAACJ,MAAM;IAACe,SAAS,EAAC,SAAS;IAACL,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAF,QAAA,EAC9DA;EAAQ,CACH,CACT;EAED,IAAI,CAACC,KAAK,EAAE;IACV,OAAOO,OAAO;EAChB;EAEA,oBAAOV,IAAA,CAACL,oBAAoB;IAAAO,QAAA,EAAEQ;EAAO,CAAuB,CAAC;AAC/D,CAAC","ignoreList":[]}

package/lib/module/atoms/text-field/text-field.android.js

@@ -3,6 +3,7 @@
 import { Column, Text as ComposeText, OutlinedTextField, useNativeState } from '@expo/ui/jetpack-compose';
 import { useSxModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { Glyph } from "../../glyph/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TextField = ({
@@ -20,17 +21,19 @@ export const TextField = ({
   const modifiers = useSxModifiers({
     wide: true
   });
+  const invalid = Boolean(error);
+  const message = typeof error === 'string' && error ? error : undefined;
   return /*#__PURE__*/_jsxs(Column, {
     verticalArrangement: {
       spacedBy: 4
     },
     children: [label ? /*#__PURE__*/_jsx(ComposeText, {
-      color: theme.colorString(error ? 'content.destructive' : 'content.secondary'),
+      color: theme.colorString(invalid ? 'content.destructive' : 'content.secondary'),
       style: theme.typography.labelMedium,
       children: label
-    }) : null, /*#__PURE__*/_jsx(OutlinedTextField, {
+    }) : null, /*#__PURE__*/_jsxs(OutlinedTextField, {
       enabled: !disabled,
-      isError: error,
+      isError: invalid,
       modifiers: modifiers,
       onValueChange: onChangeText,
       singleLine: !multiline,
@@ -40,7 +43,19 @@ export const TextField = ({
         fontWeight: theme.typography.body.fontWeight
       },
       value: value,
-      visualTransformation: secure ? 'password' : 'none'
+      visualTransformation: secure ? 'password' : 'none',
+      children: [invalid ? /*#__PURE__*/_jsx(OutlinedTextField.TrailingIcon, {
+        children: /*#__PURE__*/_jsx(Glyph, {
+          color: "content.destructive",
+          name: "error"
+        })
+      }) : null, message ? /*#__PURE__*/_jsx(OutlinedTextField.SupportingText, {
+        children: /*#__PURE__*/_jsx(ComposeText, {
+          color: theme.colorString('content.destructive'),
+          style: theme.typography.footnote,
+          children: message
+        })
+      }) : null]
     })]
   });
 };