@hzblj/kara-components 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @hzblj/kara-components
 
+## 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
+
+- [#8](https://github.com/hzblj/kara-ui/pull/8) [`3b0a6fb`](https://github.com/hzblj/kara-ui/commit/3b0a6fbc49559720023fece2b5c6189ad4d88bc8) Thanks [@hzblj](https://github.com/hzblj)! - `ZoomTransition`: a push that grows out of the photo it was opened from and shrinks back into it.
+
+  - iOS 18: UIKit's zoom transition, with the interactive dismissal (swipe down, edge swipe, pinch) gated on the scroll views under the finger. Below iOS 18 the push stays a slide. Android: Material's container transform, both ways.
+  - Three pieces from `@hzblj/kara-ui/router`, tied by one identifier: `ZoomTransition.Source` on the list, `ZoomTransition.Enabler` and `ZoomTransition.Target` on the pushed screen; `useZoomTransitionSourceId`, `ZOOM_TRANSITION_PARAM`, `useZoomTransitionParam` and `withZoomTransition` (an Android fade under the transform) around them.
+  - Settings both platforms honour sit at the top (`scrim`); the rest is typed apart under `ios` (`dismissGesture`, `blur`, the target's `fit`) and `android` (`duration`, `easing`, `fade`, `path`, corner radii, the target's `fit` and `flex`).
+  - `ContextMenu`: with a `ZoomTransition.Source` in the trigger, a tap on the iOS preview zooms the preview's photo straight into the pushed screen. `previewTransition` (`zoom`, `pop`, `dismiss`) picks how the preview leaves.
+  - `DurationSize`, the keys of `duration`.
+
+### Patch Changes
+
+- Updated dependencies [[`3b0a6fb`](https://github.com/hzblj/kara-ui/commit/3b0a6fbc49559720023fece2b5c6189ad4d88bc8)]:
+  - @hzblj/kara-native@0.5.0
+  - @hzblj/kara-theme@0.5.0
+  - @hzblj/kara-sx@0.5.0
+
 ## 0.4.1
 
 ### Patch Changes

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/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/segmented-control/segmented-control.js

@@ -3,7 +3,13 @@
 import { SegmentedControl as NativeSegmentedControl } from '@expo/ui/community/segmented-control';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback } from 'react';
+import { Platform } from 'react-native';
+import { haptics } from "../../haptics/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `UISegmentedControl` on iOS, Material's single-choice segmented buttons on Android. A new segment plays `selection`
+ * on Android, whose buttons play nothing of their own; iOS 26's control already gives its own feedback.
+ */
 export const SegmentedControl = ({
   disabled = false,
   onChange,
@@ -13,8 +19,14 @@ export const SegmentedControl = ({
 }) => {
   const theme = useAppTheme();
   const onNativeChange = useCallback(event => {
-    onChange?.(event.nativeEvent.selectedSegmentIndex, event.nativeEvent.value);
-  }, [onChange]);
+    const index = event.nativeEvent.selectedSegmentIndex;
+
+    // Material reports a tap on the segment that is already selected too.
+    if (Platform.OS === 'android' && index !== selectedIndex) {
+      haptics.selection();
+    }
+    onChange?.(index, event.nativeEvent.value);
+  }, [onChange, selectedIndex]);
   return /*#__PURE__*/_jsx(NativeSegmentedControl, {
     appearance: theme.dark ? 'dark' : 'light',
     enabled: !disabled,

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

@@ -1 +1 @@
-{"version":3,"names":["SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","jsx","_jsx","disabled","onChange","selectedIndex","testID","values","theme","onNativeChange","event","nativeEvent","selectedSegmentIndex","value","appearance","dark","enabled","tintColor","colorString"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,IAAIC,sBAAsB,QAAO,sCAAsC;AAC/F,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjC,OAAO,MAAML,gBAA2C,GAAGA,CAAC;EAC1DM,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,MAAMU,cAAc,GAAGT,WAAW,CAC/BU,KAAmE,IAAK;IACvEN,QAAQ,GAAGM,KAAK,CAACC,WAAW,CAACC,oBAAoB,EAAEF,KAAK,CAACC,WAAW,CAACE,KAAK,CAAC;EAC7E,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,oBACEF,IAAA,CAACJ,sBAAsB;IACrBgB,UAAU,EAAEN,KAAK,CAACO,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC1CC,OAAO,EAAE,CAACb,QAAS;IACnBC,QAAQ,EAAEK,cAAe;IACzBJ,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEA,MAAO;IACfW,SAAS,EAAET,KAAK,CAACU,WAAW,CAAC,iBAAiB,CAAE;IAChDX,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","Platform","haptics","jsx","_jsx","disabled","onChange","selectedIndex","testID","values","theme","onNativeChange","event","index","nativeEvent","selectedSegmentIndex","OS","selection","value","appearance","dark","enabled","tintColor","colorString"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,IAAIC,sBAAsB,QAAO,sCAAsC;AAC/F,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,QAAO,OAAO;AACjC,SAAQC,QAAQ,QAAO,cAAc;AAErC,SAAQC,OAAO,QAAO,wBAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrC;AACA;AACA;AACA;AACA,OAAO,MAAMP,gBAA2C,GAAGA,CAAC;EAC1DQ,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGX,WAAW,CAAC,CAAC;EAE3B,MAAMY,cAAc,GAAGX,WAAW,CAC/BY,KAAmE,IAAK;IACvE,MAAMC,KAAK,GAAGD,KAAK,CAACE,WAAW,CAACC,oBAAoB;;IAEpD;IACA,IAAId,QAAQ,CAACe,EAAE,KAAK,SAAS,IAAIH,KAAK,KAAKN,aAAa,EAAE;MACxDL,OAAO,CAACe,SAAS,CAAC,CAAC;IACrB;IAEAX,QAAQ,GAAGO,KAAK,EAAED,KAAK,CAACE,WAAW,CAACI,KAAK,CAAC;EAC5C,CAAC,EACD,CAACZ,QAAQ,EAAEC,aAAa,CAC1B,CAAC;EAED,oBACEH,IAAA,CAACN,sBAAsB;IACrBqB,UAAU,EAAET,KAAK,CAACU,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC1CC,OAAO,EAAE,CAAChB,QAAS;IACnBC,QAAQ,EAAEK,cAAe;IACzBJ,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEA,MAAO;IACfc,SAAS,EAAEZ,KAAK,CAACa,WAAW,CAAC,iBAAiB,CAAE;IAChDd,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
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["Slider","ComposeSlider","useAppTheme","useHostGuard","jsx","_jsx","disabled","max","min","onValueChange","step","value","theme","colors","activeTrackColor","color","thumbColor","enabled","steps"],"sourceRoot":"../../../../src","sources":["atoms/slider/slider.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,QAAO,0BAA0B;AAChE,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAML,MAAuB,GAAGA,CAAC;EACtCM,QAAQ,GAAG,KAAK;EAChBC,GAAG,GAAG,CAAC;EACPC,GAAG,GAAG,CAAC;EACPC,aAAa;EACbC,IAAI;EACJC;AACW,CAAC,KAAK;EACjBR,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMS,KAAK,GAAGV,WAAW,CAAC,CAAC;EAE3B,oBACEG,IAAA,CAACJ,aAAa;IACZY,MAAM,EAAE;MACNC,gBAAgB,EAAEF,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC;MACpDC,UAAU,EAAEJ,KAAK,CAACG,KAAK,CAAC,qBAAqB;IAC/C,CAAE;IACFE,OAAO,EAAE,CAACX,QAAS;IACnBC,GAAG,EAAEA,GAAI;IACTC,GAAG,EAAEA,GAAI;IACTC,aAAa,EAAEA,aAAc;IAC7BS,KAAK,EAAER,IAAK;IACZC,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["Slider","ComposeSlider","useAppTheme","useCallback","useEffect","useRef","haptics","useHostGuard","jsx","_jsx","disabled","max","min","onValueChange","step","value","theme","steps","Math","round","stopOf","at","stop","current","onChange","next","reached","tick","colors","activeTrackColor","color","thumbColor","enabled"],"sourceRoot":"../../../../src","sources":["atoms/slider/slider.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,QAAO,0BAA0B;AAChE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAO,OAAO;AAEpD,SAAQC,OAAO,QAAO,wBAAe;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMT,MAAuB,GAAGA,CAAC;EACtCU,QAAQ,GAAG,KAAK;EAChBC,GAAG,GAAG,CAAC;EACPC,GAAG,GAAG,CAAC;EACPC,aAAa;EACbC,IAAI;EACJC;AACW,CAAC,KAAK;EACjBR,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMS,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,KAAK,GAAGH,IAAI,GAAGI,IAAI,CAACP,GAAG,CAAC,CAAC,EAAEO,IAAI,CAACC,KAAK,CAAC,CAACR,GAAG,GAAGC,GAAG,IAAIE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;;EAExE;EACA;EACA,MAAMM,MAAM,GAAGjB,WAAW,CAAEkB,EAAU,IAAMP,IAAI,GAAGI,IAAI,CAACC,KAAK,CAAC,CAACE,EAAE,GAAGT,GAAG,IAAIE,IAAI,CAAC,GAAG,CAAE,EAAE,CAACF,GAAG,EAAEE,IAAI,CAAC,CAAC;EACnG,MAAMQ,IAAI,GAAGjB,MAAM,CAACe,MAAM,CAACL,KAAK,CAAC,CAAC;EAElCX,SAAS,CAAC,MAAM;IACdkB,IAAI,CAACC,OAAO,GAAGH,MAAM,CAACL,KAAK,CAAC;EAC9B,CAAC,EAAE,CAACK,MAAM,EAAEL,KAAK,CAAC,CAAC;EAEnB,MAAMS,QAAQ,GAAGrB,WAAW,CACzBsB,IAAY,IAAK;IAChB,MAAMC,OAAO,GAAGN,MAAM,CAACK,IAAI,CAAC;IAE5B,IAAIR,KAAK,GAAG,CAAC,IAAIS,OAAO,KAAKJ,IAAI,CAACC,OAAO,EAAE;MACzCjB,OAAO,CAACqB,IAAI,CAAC,CAAC;IAChB;IAEAL,IAAI,CAACC,OAAO,GAAGG,OAAO;IACtBb,aAAa,GAAGY,IAAI,CAAC;EACvB,CAAC,EACD,CAACZ,aAAa,EAAEO,MAAM,EAAEH,KAAK,CAC/B,CAAC;EAED,oBACER,IAAA,CAACR,aAAa;IACZ2B,MAAM,EAAE;MACNC,gBAAgB,EAAEb,KAAK,CAACc,KAAK,CAAC,qBAAqB,CAAC;MACpDC,UAAU,EAAEf,KAAK,CAACc,KAAK,CAAC,qBAAqB;IAC/C,CAAE;IACFE,OAAO,EAAE,CAACtB,QAAS;IACnBC,GAAG,EAAEA,GAAI;IACTC,GAAG,EAAEA,GAAI;IACTC,aAAa,EAAEW,QAAS;IACxBP,KAAK,EAAEA,KAAM;IACbF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}

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

@@ -3,12 +3,15 @@
 import { Switch as ComposeSwitch, Row, Text } from '@expo/ui/jetpack-compose';
 import { clickable, fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
+import { haptics } from "../../haptics/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Material's switch, tinted with the accent like SwiftUI's toggle. With a label it is a full-width row — label at the
- * start, switch at the end — and the whole row toggles, the way a Material settings row does.
+ * start, switch at the end — and the whole row toggles, the way a Material settings row does. A flip plays
+ * `toggleOn`/`toggleOff` — Android 14's constants made for switches — since Compose's Material switch plays nothing
+ * of its own. iOS stays silent, as `UISwitch` does.
  */
 export const Switch = ({
   disabled = false,
@@ -18,7 +21,11 @@ export const Switch = ({
 }) => {
   useHostGuard('Switch');
   const theme = useAppTheme();
-  const rowModifiers = useMemo(() => disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => onValueChange(!value))], [disabled, onValueChange, value]);
+  const toggle = useCallback(next => {
+    haptics.play(next ? 'toggleOn' : 'toggleOff');
+    onValueChange?.(next);
+  }, [onValueChange]);
+  const rowModifiers = useMemo(() => disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => toggle(!value))], [disabled, onValueChange, toggle, value]);
   const control = /*#__PURE__*/_jsx(ComposeSwitch, {
     colors: {
       checkedBorderColor: theme.color('fill.accent.primary'),
@@ -26,7 +33,7 @@ export const Switch = ({
       checkedTrackColor: theme.color('fill.accent.primary')
     },
     enabled: !disabled,
-    onCheckedChange: onValueChange,
+    onCheckedChange: onValueChange ? toggle : undefined,
     value: value
   });
   if (!label) {

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

@@ -1 +1 @@
-{"version":3,"names":["Switch","ComposeSwitch","Row","Text","clickable","fillMaxWidth","useAppTheme","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","rowModifiers","control","colors","checkedBorderColor","color","checkedThumbColor","checkedTrackColor","enabled","onCheckedChange","horizontalArrangement","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC3E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMZ,MAAuB,GAAGA,CAAC;EAACa,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAkB,CAAC,KAAK;EACvGR,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMS,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,YAAY,GAAGX,OAAO,CAC1B,MAAOM,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACV,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMW,aAAa,CAAC,CAACC,KAAK,CAAC,CAAC,CAAE,EAChH,CAACH,QAAQ,EAAEE,aAAa,EAAEC,KAAK,CACjC,CAAC;EACD,MAAMG,OAAO,gBACXT,IAAA,CAACT,aAAa;IACZmB,MAAM,EAAE;MACNC,kBAAkB,EAAEJ,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC;MACtDC,iBAAiB,EAAEN,KAAK,CAACK,KAAK,CAAC,eAAe,CAAC;MAC/CE,iBAAiB,EAAEP,KAAK,CAACK,KAAK,CAAC,qBAAqB;IACtD,CAAE;IACFG,OAAO,EAAE,CAACZ,QAAS;IACnBa,eAAe,EAAEX,aAAc;IAC/BC,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOK,OAAO;EAChB;EAEA,oBACEP,KAAA,CAACV,GAAG;IAACyB,qBAAqB,EAAC,cAAc;IAACC,SAAS,EAAEV,YAAa;IAACW,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,gBAC3FpB,IAAA,CAACP,IAAI;MAACmB,KAAK,EAAEL,KAAK,CAACc,WAAW,CAAClB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACmB,KAAK,EAAEf,KAAK,CAACgB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GhB;IAAK,CACF,CAAC,EACNK,OAAO;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Switch","ComposeSwitch","Row","Text","clickable","fillMaxWidth","useAppTheme","useCallback","useMemo","haptics","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","toggle","next","play","rowModifiers","control","colors","checkedBorderColor","color","checkedThumbColor","checkedTrackColor","enabled","onCheckedChange","undefined","horizontalArrangement","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC3E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,OAAO,QAAO,wBAAe;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMd,MAAuB,GAAGA,CAAC;EAACe,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAkB,CAAC,KAAK;EACvGR,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMS,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,MAAM,GAAGb,WAAW,CACvBc,IAAa,IAAK;IACjBZ,OAAO,CAACa,IAAI,CAACD,IAAI,GAAG,UAAU,GAAG,WAAW,CAAC;IAC7CJ,aAAa,GAAGI,IAAI,CAAC;EACvB,CAAC,EACD,CAACJ,aAAa,CAChB,CAAC;EACD,MAAMM,YAAY,GAAGf,OAAO,CAC1B,MAAOO,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACZ,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMgB,MAAM,CAAC,CAACF,KAAK,CAAC,CAAC,CAAE,EACzG,CAACH,QAAQ,EAAEE,aAAa,EAAEG,MAAM,EAAEF,KAAK,CACzC,CAAC;EACD,MAAMM,OAAO,gBACXZ,IAAA,CAACX,aAAa;IACZwB,MAAM,EAAE;MACNC,kBAAkB,EAAEP,KAAK,CAACQ,KAAK,CAAC,qBAAqB,CAAC;MACtDC,iBAAiB,EAAET,KAAK,CAACQ,KAAK,CAAC,eAAe,CAAC;MAC/CE,iBAAiB,EAAEV,KAAK,CAACQ,KAAK,CAAC,qBAAqB;IACtD,CAAE;IACFG,OAAO,EAAE,CAACf,QAAS;IACnBgB,eAAe,EAAEd,aAAa,GAAGG,MAAM,GAAGY,SAAU;IACpDd,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOQ,OAAO;EAChB;EAEA,oBACEV,KAAA,CAACZ,GAAG;IAAC+B,qBAAqB,EAAC,cAAc;IAACC,SAAS,EAAEX,YAAa;IAACY,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,gBAC3FxB,IAAA,CAACT,IAAI;MAACwB,KAAK,EAAER,KAAK,CAACkB,WAAW,CAACtB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACuB,KAAK,EAAEnB,KAAK,CAACoB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GpB;IAAK,CACF,CAAC,EACNQ,OAAO;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/haptics/haptics.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import { HAPTICS, playHaptic, prepareHaptic } from '@hzblj/kara-native';
+let enabled = true;
+const play = (haptic, options) => {
+  if (enabled) {
+    playHaptic(haptic, options?.intensity);
+  }
+};
+const prepare = haptic => {
+  if (enabled) {
+    prepareHaptic(haptic);
+  }
+};
+const shorthands = Object.fromEntries(HAPTICS.map(haptic => [haptic, options => play(haptic, options)]));
+
+/**
+ * The platform's own haptic feedback, named for what happened: UIKit's feedback generators on iOS, the system's
+ * `HapticFeedbackConstants` on Android — never a raw vibration. Both follow the user's system haptics setting, and
+ * every call is synchronous, with nothing to await.
+ *
+ * ```ts
+ * haptics.success()                    // a name you know: one function per haptic
+ * haptics.play(haptic)                 // a name that arrives as data
+ * haptics.light({intensity: 0.6})      // impacts scale on iOS
+ * haptics.prepare('selection')         // iOS: warm the Taptic Engine as a gesture begins
+ * haptics.setEnabled(userPreference)   // silences every kara haptic, the components' own too
+ * ```
+ *
+ * - `selection` — a choice changed: a segment, a chip, a picker row.
+ * - `tick` — one step of a continuous gesture: a slider detent, a scrubbed value.
+ * - `toggleOn` / `toggleOff` — a switch flipped.
+ * - `success` / `warning` / `error` — how a task ended. Android has no warning of its own; it plays a rejection.
+ * - `longPress` / `dragStart` — a long press was recognised; an item lifted to be dragged.
+ * - `thresholdActivate` / `thresholdDeactivate` — a gesture crossed its commit point, or went back over it.
+ * - `keyPress` — a key of the app's own keypad.
+ * - `soft`, `light`, `medium`, `rigid`, `heavy` — a collision none of the names above describes.
+ *
+ * On Android the names that came with Android 14's constants fall back to the nearest older feedback, so every name
+ * plays on every version. Haptics are silent in a build without kara's native module.
+ */
+export const haptics = {
+  ...shorthands,
+  /** Whether kara plays haptics — `true` until `setEnabled(false)`. */
+  isEnabled: () => enabled,
+  play,
+  prepare,
+  /**
+   * Switches every kara haptic on or off, the ones its components play included — for an app's own "Haptics" setting.
+   * Not persisted: call it at start-up with the stored preference. The system setting applies either way.
+   */
+  setEnabled: value => {
+    enabled = value;
+  }
+};
+//# sourceMappingURL=haptics.js.map

package/lib/module/haptics/haptics.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HAPTICS","playHaptic","prepareHaptic","enabled","play","haptic","options","intensity","prepare","shorthands","Object","fromEntries","map","haptics","isEnabled","setEnabled","value"],"sourceRoot":"../../../src","sources":["haptics/haptics.ts"],"mappings":";;AAAA,SAAQA,OAAO,EAAeC,UAAU,EAAEC,aAAa,QAAO,oBAAoB;AAWlF,IAAIC,OAAO,GAAG,IAAI;AAElB,MAAMC,IAAI,GAAGA,CAACC,MAAc,EAAEC,OAAuB,KAAW;EAC9D,IAAIH,OAAO,EAAE;IACXF,UAAU,CAACI,MAAM,EAAEC,OAAO,EAAEC,SAAS,CAAC;EACxC;AACF,CAAC;AAED,MAAMC,OAAO,GAAIH,MAAc,IAAW;EACxC,IAAIF,OAAO,EAAE;IACXD,aAAa,CAACG,MAAM,CAAC;EACvB;AACF,CAAC;AAED,MAAMI,UAAU,GAAGC,MAAM,CAACC,WAAW,CACnCX,OAAO,CAACY,GAAG,CAACP,MAAM,IAAI,CAACA,MAAM,EAAGC,OAAuB,IAAKF,IAAI,CAACC,MAAM,EAAEC,OAAO,CAAC,CAAC,CACpF,CAAqB;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMO,OAAO,GAAG;EACrB,GAAGJ,UAAU;EACb;EACAK,SAAS,EAAEA,CAAA,KAAeX,OAAO;EACjCC,IAAI;EACJI,OAAO;EACP;AACF;AACA;AACA;EACEO,UAAU,EAAGC,KAAc,IAAW;IACpCb,OAAO,GAAGa,KAAK;EACjB;AACF,CAAC","ignoreList":[]}

package/lib/module/haptics/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { haptics } from "./haptics.js";
+export { useHapticFeedback } from "./use-haptic-feedback.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["haptics","useHapticFeedback"],"sourceRoot":"../../../src","sources":["haptics/index.ts"],"mappings":";;AAAA,SAAyCA,OAAO,QAAO,cAAW;AAClE,SAA6BC,iBAAiB,QAAO,0BAAuB","ignoreList":[]}

package/lib/module/haptics/use-haptic-feedback.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { haptics } from "./haptics.js";
+
+/** Picks the haptic for one change of a trigger — or none, to stay silent for that change. */
+
+/**
+ * Plays a haptic whenever `trigger` changes — never on mount — like SwiftUI's `sensoryFeedback(_:trigger:)`. Give it
+ * a haptic, or a function of the previous and next value that picks one per change. Changes are compared with
+ * `Object.is`, so a trigger is a primitive or a stable reference.
+ *
+ * ```ts
+ * useHapticFeedback(tab, 'selection')
+ * useHapticFeedback(quantity, (before, after) => (after > before ? 'tick' : 'soft'))
+ * useHapticFeedback(payment.status, (_, status) => status === 'paid' ? 'success' : status === 'failed' && 'error')
+ * ```
+ */
+export const useHapticFeedback = (trigger, feedback) => {
+  const previous = useRef(trigger);
+  useEffect(() => {
+    const before = previous.current;
+    if (Object.is(before, trigger)) {
+      return;
+    }
+    previous.current = trigger;
+    const haptic = typeof feedback === 'function' ? feedback(before, trigger) : feedback;
+    if (haptic) {
+      haptics.play(haptic);
+    }
+  }, [feedback, trigger]);
+};
+//# sourceMappingURL=use-haptic-feedback.js.map

package/lib/module/haptics/use-haptic-feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","haptics","useHapticFeedback","trigger","feedback","previous","before","current","Object","is","haptic","play"],"sourceRoot":"../../../src","sources":["haptics/use-haptic-feedback.ts"],"mappings":";;AAAA,SAAQA,SAAS,EAAEC,MAAM,QAAO,OAAO;AAEvC,SAAqBC,OAAO,QAAO,cAAW;;AAE9C;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAIC,OAAU,EAAEC,QAAoC,KAAW;EAC9F,MAAMC,QAAQ,GAAGL,MAAM,CAACG,OAAO,CAAC;EAEhCJ,SAAS,CAAC,MAAM;IACd,MAAMO,MAAM,GAAGD,QAAQ,CAACE,OAAO;IAE/B,IAAIC,MAAM,CAACC,EAAE,CAACH,MAAM,EAAEH,OAAO,CAAC,EAAE;MAC9B;IACF;IAEAE,QAAQ,CAACE,OAAO,GAAGJ,OAAO;IAC1B,MAAMO,MAAM,GAAG,OAAON,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAACE,MAAM,EAAEH,OAAO,CAAC,GAAGC,QAAQ;IAEpF,IAAIM,MAAM,EAAE;MACVT,OAAO,CAACU,IAAI,CAACD,MAAM,CAAC;IACtB;EACF,CAAC,EAAE,CAACN,QAAQ,EAAED,OAAO,CAAC,CAAC;AACzB,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 export * from "./atoms/index.js";
+export * from "./haptics/index.js";
 export * from "./molecules/index.js";
 export * from "./organisms/index.js";
 export * from "./templates/index.js";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,sBAAa","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,sBAAa","ignoreList":[]}

package/lib/module/organisms/context-menu/context-menu.android.js

@@ -3,10 +3,10 @@
 import { Text as ComposeText, DropdownMenu, DropdownMenuItem, Host } from '@expo/ui/jetpack-compose';
 import { useSx } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
-import * as Haptics from 'expo-haptics';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import { Icon } from "../../atoms/icon/index.js";
+import { haptics } from "../../haptics/index.js";
 import { HostBoundary } from "../../host-context.js";
 import { splitForRipple } from "../../ripple-clip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -51,7 +51,7 @@ const MenuRow = ({
  * Android's own take on a context menu, since Material has no lifted preview: a long press ripples the trigger, ticks
  * the long-press haptic, and opens a Material dropdown where the finger is — the trigger stays highlighted while the
  * menu is up. The host behind the menu mounts on the first long press and stays, so a list of triggers that are only
- * scrolled past never builds one. `preview` and `onPreviewPress` are iOS-only.
+ * scrolled past never builds one. `preview`, `onPreviewPress` and `previewTransition` are iOS-only.
  */
 const ContextMenuRoot = ({
   actions,
@@ -62,6 +62,7 @@ const ContextMenuRoot = ({
   const {
     onPreviewPress: _onPreviewPress,
     preview: _preview,
+    previewTransition: _previewTransition,
     ...sx
   } = props;
   const theme = useAppTheme();
@@ -86,7 +87,7 @@ const ContextMenuRoot = ({
       pageX,
       pageY
     } = event.nativeEvent;
-    Haptics.performAndroidHapticsAsync(Haptics.AndroidHaptics.Long_Press).catch(() => undefined);
+    haptics.longPress();
     // The touch in the trigger's own coordinates: `locationX/Y` are relative to whichever child was touched.
     trigger.current?.measure((_x, _y, _width, _height, left, top) => {
       setAnchor({

package/lib/module/organisms/context-menu/context-menu.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","Host","useSx","useAppTheme","Haptics","useCallback","useMemo","useRef","useState","Pressable","StyleSheet","View","Icon","HostBoundary","splitForRipple","jsx","_jsx","jsxs","_jsxs","styles","create","anchor","height","position","width","MenuRow","action","onDismiss","theme","color","destructive","onClick","onPress","children","colorString","style","typography","body","label","icon","LeadingIcon","name","size","ContextMenuRoot","actions","testID","props","onPreviewPress","_onPreviewPress","preview","_preview","sx","resolved","trigger","setAnchor","expanded","setExpanded","inner","outer","ripple","highlight","backgroundColor","open","event","pageX","pageY","nativeEvent","performAndroidHapticsAsync","AndroidHaptics","Long_Press","catch","undefined","current","measure","_x","_y","_width","_height","left","top","x","y","dismiss","android_ripple","onLongPress","ref","pointerEvents","absoluteFill","colorScheme","dark","seedColor","materialSeed","onDismissRequest","Items","map","Exclusion","ContextMenu","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","Host","useSx","useAppTheme","useCallback","useMemo","useRef","useState","Pressable","StyleSheet","View","Icon","haptics","HostBoundary","splitForRipple","jsx","_jsx","jsxs","_jsxs","styles","create","anchor","height","position","width","MenuRow","action","onDismiss","theme","color","destructive","onClick","onPress","children","colorString","style","typography","body","label","icon","LeadingIcon","name","size","ContextMenuRoot","actions","testID","props","onPreviewPress","_onPreviewPress","preview","_preview","previewTransition","_previewTransition","sx","resolved","trigger","setAnchor","expanded","setExpanded","inner","outer","ripple","highlight","backgroundColor","open","event","pageX","pageY","nativeEvent","longPress","current","measure","_x","_y","_width","_height","left","top","x","y","dismiss","android_ripple","onLongPress","ref","pointerEvents","absoluteFill","colorScheme","dark","seedColor","materialSeed","onDismissRequest","Items","map","Exclusion","ContextMenu","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/context-menu/context-menu.ios.js

@@ -10,6 +10,7 @@ const ContextMenuRoot = ({
   children,
   onPreviewPress,
   preview,
+  previewTransition,
   testID,
   ...sx
 }) => {
@@ -28,6 +29,7 @@ const ContextMenuRoot = ({
     onPreviewPress: onPreviewPress,
     onSelectItem: onSelectItem,
     preview: preview,
+    previewTransition: previewTransition,
     style: style,
     testID: testID,
     children: children

package/lib/module/organisms/context-menu/context-menu.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconResourceName","ContextMenu","NativeContextMenu","ContextMenuExclusion","NativeContextMenuExclusion","useSx","useCallback","useMemo","jsx","_jsx","ContextMenuRoot","actions","children","onPreviewPress","preview","testID","sx","style","items","map","action","index","destructive","id","String","image","icon","undefined","title","label","onSelectItem","Number","onPress","Exclusion","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAEEC,WAAW,IAAIC,iBAAiB,EAChCC,oBAAoB,IAAIC,0BAA0B,QAC7C,6BAA6B;AACpC,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG1C,MAAMC,eAAe,GAAGA,CAAC;EAACC,OAAO;EAAEC,QAAQ;EAAEC,cAAc;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAoB,CAAC,KAAK;EACzG,MAAMC,KAAK,GAAGZ,KAAK,CAACW,EAAE,CAAC;;EAEvB;EACA,MAAME,KAAK,GAAGX,OAAO,CACnB,MACEI,OAAO,CAACQ,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,MAAM;IAC9BC,WAAW,EAAEF,MAAM,CAACE,WAAW;IAC/BC,EAAE,EAAEC,MAAM,CAACH,KAAK,CAAC;IACjBI,KAAK,EAAEL,MAAM,CAACM,IAAI,GAAG1B,gBAAgB,CAACoB,MAAM,CAACM,IAAI,CAAC,GAAGC,SAAS;IAC9DC,KAAK,EAAER,MAAM,CAACS;EAChB,CAAC,CAAC,CAAC,EACL,CAAClB,OAAO,CACV,CAAC;EAED,MAAMmB,YAAY,GAAGxB,WAAW,CAAEiB,EAAU,IAAKZ,OAAO,CAACoB,MAAM,CAACR,EAAE,CAAC,CAAC,EAAES,OAAO,CAAC,CAAC,EAAE,CAACrB,OAAO,CAAC,CAAC;EAE3F,oBACEF,IAAA,CAACP,iBAAiB;IAChBgB,KAAK,EAAEA,KAAM;IACbL,cAAc,EAAEA,cAAe;IAC/BiB,YAAY,EAAEA,YAAa;IAC3BhB,OAAO,EAAEA,OAAQ;IACjBG,KAAK,EAAEA,KAAM;IACbF,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAEdA;EAAQ,CACQ,CAAC;AAExB,CAAC;AAED,MAAMqB,SAAS,GAAGA,CAAC;EAACrB;AAAmC,CAAC,kBACtDH,IAAA,CAACL,0BAA0B;EAAAQ,QAAA,EAAEA;AAAQ,CAA6B,CACnE;AAED,OAAO,MAAMX,WAAiC,GAAGiC,MAAM,CAACC,MAAM,CAACzB,eAAe,EAAE;EAACuB;AAAS,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["iconResourceName","ContextMenu","NativeContextMenu","ContextMenuExclusion","NativeContextMenuExclusion","useSx","useCallback","useMemo","jsx","_jsx","ContextMenuRoot","actions","children","onPreviewPress","preview","previewTransition","testID","sx","style","items","map","action","index","destructive","id","String","image","icon","undefined","title","label","onSelectItem","Number","onPress","Exclusion","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAEEC,WAAW,IAAIC,iBAAiB,EAChCC,oBAAoB,IAAIC,0BAA0B,QAC7C,6BAA6B;AACpC,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG1C,MAAMC,eAAe,GAAGA,CAAC;EACvBC,OAAO;EACPC,QAAQ;EACRC,cAAc;EACdC,OAAO;EACPC,iBAAiB;EACjBC,MAAM;EACN,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGb,KAAK,CAACY,EAAE,CAAC;;EAEvB;EACA,MAAME,KAAK,GAAGZ,OAAO,CACnB,MACEI,OAAO,CAACS,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,MAAM;IAC9BC,WAAW,EAAEF,MAAM,CAACE,WAAW;IAC/BC,EAAE,EAAEC,MAAM,CAACH,KAAK,CAAC;IACjBI,KAAK,EAAEL,MAAM,CAACM,IAAI,GAAG3B,gBAAgB,CAACqB,MAAM,CAACM,IAAI,CAAC,GAAGC,SAAS;IAC9DC,KAAK,EAAER,MAAM,CAACS;EAChB,CAAC,CAAC,CAAC,EACL,CAACnB,OAAO,CACV,CAAC;EAED,MAAMoB,YAAY,GAAGzB,WAAW,CAAEkB,EAAU,IAAKb,OAAO,CAACqB,MAAM,CAACR,EAAE,CAAC,CAAC,EAAES,OAAO,CAAC,CAAC,EAAE,CAACtB,OAAO,CAAC,CAAC;EAE3F,oBACEF,IAAA,CAACP,iBAAiB;IAChBiB,KAAK,EAAEA,KAAM;IACbN,cAAc,EAAEA,cAAe;IAC/BkB,YAAY,EAAEA,YAAa;IAC3BjB,OAAO,EAAEA,OAAQ;IACjBC,iBAAiB,EAAEA,iBAAkB;IACrCG,KAAK,EAAEA,KAAM;IACbF,MAAM,EAAEA,MAAO;IAAAJ,QAAA,EAEdA;EAAQ,CACQ,CAAC;AAExB,CAAC;AAED,MAAMsB,SAAS,GAAGA,CAAC;EAACtB;AAAmC,CAAC,kBACtDH,IAAA,CAACL,0BAA0B;EAAAQ,QAAA,EAAEA;AAAQ,CAA6B,CACnE;AAED,OAAO,MAAMX,WAAiC,GAAGkC,MAAM,CAACC,MAAM,CAAC1B,eAAe,EAAE;EAACwB;AAAS,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/atoms/pressable/pressable.types.d.ts

@@ -1,9 +1,11 @@
 import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
+import type { Haptic } from '../../haptics';
 export type PressableProps = ResponsiveViewSx & {
     children?: ReactNode;
     disabled?: boolean;
-    haptic?: boolean;
+    /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
+    haptic?: boolean | Haptic;
     onPress?: () => void;
     testID?: string;
 };

package/lib/typescript/atoms/segmented-control/segmented-control.d.ts

@@ -1,2 +1,6 @@
 import type { SegmentedControlComponent } from './segmented-control.types';
+/**
+ * `UISegmentedControl` on iOS, Material's single-choice segmented buttons on Android. A new segment plays `selection`
+ * on Android, whose buttons play nothing of their own; iOS 26's control already gives its own feedback.
+ */
 export declare const SegmentedControl: SegmentedControlComponent;

package/lib/typescript/haptics/haptics.d.ts

@@ -0,0 +1,61 @@
+import { type Haptic } from '@hzblj/kara-native';
+export type { Haptic };
+export type HapticOptions = {
+    /** iOS: scales an impact — `soft`, `light`, `medium`, `rigid`, `heavy` — from 0 to 1. Everything else ignores it. */
+    intensity?: number;
+};
+declare const play: (haptic: Haptic, options?: HapticOptions) => void;
+declare const prepare: (haptic: Haptic) => void;
+/**
+ * The platform's own haptic feedback, named for what happened: UIKit's feedback generators on iOS, the system's
+ * `HapticFeedbackConstants` on Android — never a raw vibration. Both follow the user's system haptics setting, and
+ * every call is synchronous, with nothing to await.
+ *
+ * ```ts
+ * haptics.success()                    // a name you know: one function per haptic
+ * haptics.play(haptic)                 // a name that arrives as data
+ * haptics.light({intensity: 0.6})      // impacts scale on iOS
+ * haptics.prepare('selection')         // iOS: warm the Taptic Engine as a gesture begins
+ * haptics.setEnabled(userPreference)   // silences every kara haptic, the components' own too
+ * ```
+ *
+ * - `selection` — a choice changed: a segment, a chip, a picker row.
+ * - `tick` — one step of a continuous gesture: a slider detent, a scrubbed value.
+ * - `toggleOn` / `toggleOff` — a switch flipped.
+ * - `success` / `warning` / `error` — how a task ended. Android has no warning of its own; it plays a rejection.
+ * - `longPress` / `dragStart` — a long press was recognised; an item lifted to be dragged.
+ * - `thresholdActivate` / `thresholdDeactivate` — a gesture crossed its commit point, or went back over it.
+ * - `keyPress` — a key of the app's own keypad.
+ * - `soft`, `light`, `medium`, `rigid`, `heavy` — a collision none of the names above describes.
+ *
+ * On Android the names that came with Android 14's constants fall back to the nearest older feedback, so every name
+ * plays on every version. Haptics are silent in a build without kara's native module.
+ */
+export declare const haptics: {
+    /** Whether kara plays haptics — `true` until `setEnabled(false)`. */
+    isEnabled: () => boolean;
+    play: typeof play;
+    prepare: typeof prepare;
+    /**
+     * Switches every kara haptic on or off, the ones its components play included — for an app's own "Haptics" setting.
+     * Not persisted: call it at start-up with the stored preference. The system setting applies either way.
+     */
+    setEnabled: (value: boolean) => void;
+    dragStart: (options?: HapticOptions) => void;
+    error: (options?: HapticOptions) => void;
+    heavy: (options?: HapticOptions) => void;
+    keyPress: (options?: HapticOptions) => void;
+    light: (options?: HapticOptions) => void;
+    longPress: (options?: HapticOptions) => void;
+    medium: (options?: HapticOptions) => void;
+    rigid: (options?: HapticOptions) => void;
+    selection: (options?: HapticOptions) => void;
+    soft: (options?: HapticOptions) => void;
+    success: (options?: HapticOptions) => void;
+    thresholdActivate: (options?: HapticOptions) => void;
+    thresholdDeactivate: (options?: HapticOptions) => void;
+    tick: (options?: HapticOptions) => void;
+    toggleOff: (options?: HapticOptions) => void;
+    toggleOn: (options?: HapticOptions) => void;
+    warning: (options?: HapticOptions) => void;
+};

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

@@ -0,0 +1,2 @@
+export { type Haptic, type HapticOptions, haptics } from './haptics';
+export { type HapticResolver, useHapticFeedback } from './use-haptic-feedback';

package/lib/typescript/haptics/use-haptic-feedback.d.ts

@@ -0,0 +1,15 @@
+import { type Haptic } from './haptics';
+/** Picks the haptic for one change of a trigger — or none, to stay silent for that change. */
+export type HapticResolver<T> = (previous: T, next: T) => Haptic | false | null | undefined;
+/**
+ * Plays a haptic whenever `trigger` changes — never on mount — like SwiftUI's `sensoryFeedback(_:trigger:)`. Give it
+ * a haptic, or a function of the previous and next value that picks one per change. Changes are compared with
+ * `Object.is`, so a trigger is a primitive or a stable reference.
+ *
+ * ```ts
+ * useHapticFeedback(tab, 'selection')
+ * useHapticFeedback(quantity, (before, after) => (after > before ? 'tick' : 'soft'))
+ * useHapticFeedback(payment.status, (_, status) => status === 'paid' ? 'success' : status === 'failed' && 'error')
+ * ```
+ */
+export declare const useHapticFeedback: <T>(trigger: T, feedback: Haptic | HapticResolver<T>) => void;

package/lib/typescript/index.d.ts

@@ -1,4 +1,5 @@
 export * from './atoms';
+export * from './haptics';
 export * from './molecules';
 export * from './organisms';
 export * from './templates';

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

@@ -20,6 +20,14 @@ export type ContextMenuProps = ResponsiveViewSx & {
      * every preview up front.
      */
     preview?: ReactNode;
+    /**
+     * iOS: how the preview leaves once tapped, before `onPreviewPress`. `zoom`: its photo grows straight into the pushed
+     * screen, the way the App Store expands a preview — needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in the
+     * trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
+     * flies out. `dismiss`: it shrinks back onto the trigger first. Default: `zoom` when the trigger holds a
+     * `ZoomTransition.Source`, `pop` otherwise.
+     */
+    previewTransition?: 'dismiss' | 'pop' | 'zoom';
     testID?: string;
 };
 export type ContextMenuExclusionProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -59,9 +59,9 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.4.1",
-    "@hzblj/kara-sx": "^0.4.1",
-    "@hzblj/kara-theme": "^0.4.1",
+    "@hzblj/kara-native": "^0.6.0",
+    "@hzblj/kara-sx": "^0.6.0",
+    "@hzblj/kara-theme": "^0.6.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {
@@ -69,7 +69,6 @@
     "@lodev09/react-native-true-sheet": ">=3.11.0",
     "@shopify/flash-list": ">=2.0.0",
     "expo": "~57.0.0",
-    "expo-haptics": "*",
     "expo-image": "*",
     "react": "*",
     "react-native": "*",
@@ -82,7 +81,6 @@
     "@storybook/react-native": "^10.6.0",
     "@types/react": "~19.2.18",
     "expo": "~57.0.22",
-    "expo-haptics": "~57.0.3",
     "expo-image": "~57.0.5",
     "react": "19.2.3",
     "react-native": "0.86.3",

package/src/atoms/chip/chip.tsx

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

package/src/atoms/pressable/pressable.tsx

@@ -1,8 +1,9 @@
 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'
 import type {PressableComponent, PressableProps} from './pressable.types'
 
 const SPRING = {damping: 20, stiffness: 400}
@@ -19,24 +20,30 @@ export const Pressable: PressableComponent = ({
 }: PressableProps) => {
   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 (
     <AnimatedPressable

package/src/atoms/pressable/pressable.types.ts

@@ -1,10 +1,13 @@
 import type {ResponsiveViewSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
 
+import type {Haptic} from '../../haptics'
+
 export type PressableProps = ResponsiveViewSx & {
   children?: ReactNode
   disabled?: boolean
-  haptic?: boolean
+  /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
+  haptic?: boolean | Haptic
   onPress?: () => void
   testID?: string
 }

package/src/atoms/segmented-control/segmented-control.tsx

@@ -1,9 +1,15 @@
 import {SegmentedControl as NativeSegmentedControl} from '@expo/ui/community/segmented-control'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback} from 'react'
+import {Platform} from 'react-native'
 
+import {haptics} from '../../haptics'
 import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
 
+/**
+ * `UISegmentedControl` on iOS, Material's single-choice segmented buttons on Android. A new segment plays `selection`
+ * on Android, whose buttons play nothing of their own; iOS 26's control already gives its own feedback.
+ */
 export const SegmentedControl: SegmentedControlComponent = ({
   disabled = false,
   onChange,
@@ -15,9 +21,16 @@ export const SegmentedControl: SegmentedControlComponent = ({
 
   const onNativeChange = useCallback(
     (event: {nativeEvent: {selectedSegmentIndex: number; value: string}}) => {
-      onChange?.(event.nativeEvent.selectedSegmentIndex, event.nativeEvent.value)
+      const index = event.nativeEvent.selectedSegmentIndex
+
+      // Material reports a tap on the segment that is already selected too.
+      if (Platform.OS === 'android' && index !== selectedIndex) {
+        haptics.selection()
+      }
+
+      onChange?.(index, event.nativeEvent.value)
     },
-    [onChange]
+    [onChange, selectedIndex]
   )
 
   return (

package/src/atoms/slider/slider.android.tsx

@@ -1,9 +1,16 @@
 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'
 import {useHostGuard} from '../../host-context'
 import type {SliderComponent, SliderProps} from './slider.types'
 
+/**
+ * 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: SliderComponent = ({
   disabled = false,
   max = 1,
@@ -14,6 +21,30 @@ export const Slider: SliderComponent = ({
 }: SliderProps) => {
   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: number) => (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: number) => {
+      const reached = stopOf(next)
+
+      if (steps > 0 && reached !== stop.current) {
+        haptics.tick()
+      }
+
+      stop.current = reached
+      onValueChange?.(next)
+    },
+    [onValueChange, stopOf, steps]
+  )
 
   return (
     <ComposeSlider
@@ -24,8 +55,8 @@ export const Slider: SliderComponent = ({
       enabled={!disabled}
       max={max}
       min={min}
-      onValueChange={onValueChange}
-      steps={step}
+      onValueChange={onChange}
+      steps={steps}
       value={value}
     />
   )

package/src/atoms/switch/switch.android.tsx

@@ -1,21 +1,31 @@
 import {Switch as ComposeSwitch, Row, Text} from '@expo/ui/jetpack-compose'
 import {clickable, fillMaxWidth} from '@expo/ui/jetpack-compose/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
-import {useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 
+import {haptics} from '../../haptics'
 import {useHostGuard} from '../../host-context'
 import type {SwitchComponent, SwitchProps} from './switch.types'
 
 /**
  * Material's switch, tinted with the accent like SwiftUI's toggle. With a label it is a full-width row — label at the
- * start, switch at the end — and the whole row toggles, the way a Material settings row does.
+ * start, switch at the end — and the whole row toggles, the way a Material settings row does. A flip plays
+ * `toggleOn`/`toggleOff` — Android 14's constants made for switches — since Compose's Material switch plays nothing
+ * of its own. iOS stays silent, as `UISwitch` does.
  */
 export const Switch: SwitchComponent = ({disabled = false, label, onValueChange, value}: SwitchProps) => {
   useHostGuard('Switch')
   const theme = useAppTheme()
+  const toggle = useCallback(
+    (next: boolean) => {
+      haptics.play(next ? 'toggleOn' : 'toggleOff')
+      onValueChange?.(next)
+    },
+    [onValueChange]
+  )
   const rowModifiers = useMemo(
-    () => (disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => onValueChange(!value))]),
-    [disabled, onValueChange, value]
+    () => (disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => toggle(!value))]),
+    [disabled, onValueChange, toggle, value]
   )
   const control = (
     <ComposeSwitch
@@ -25,7 +35,7 @@ export const Switch: SwitchComponent = ({disabled = false, label, onValueChange,
         checkedTrackColor: theme.color('fill.accent.primary'),
       }}
       enabled={!disabled}
-      onCheckedChange={onValueChange}
+      onCheckedChange={onValueChange ? toggle : undefined}
       value={value}
     />
   )

package/src/haptics/haptics.ts

@@ -0,0 +1,68 @@
+import {HAPTICS, type Haptic, playHaptic, prepareHaptic} from '@hzblj/kara-native'
+
+export type {Haptic}
+
+export type HapticOptions = {
+  /** iOS: scales an impact — `soft`, `light`, `medium`, `rigid`, `heavy` — from 0 to 1. Everything else ignores it. */
+  intensity?: number
+}
+
+type HapticShorthands = {readonly [K in Haptic]: (options?: HapticOptions) => void}
+
+let enabled = true
+
+const play = (haptic: Haptic, options?: HapticOptions): void => {
+  if (enabled) {
+    playHaptic(haptic, options?.intensity)
+  }
+}
+
+const prepare = (haptic: Haptic): void => {
+  if (enabled) {
+    prepareHaptic(haptic)
+  }
+}
+
+const shorthands = Object.fromEntries(
+  HAPTICS.map(haptic => [haptic, (options?: HapticOptions) => play(haptic, options)])
+) as HapticShorthands
+
+/**
+ * The platform's own haptic feedback, named for what happened: UIKit's feedback generators on iOS, the system's
+ * `HapticFeedbackConstants` on Android — never a raw vibration. Both follow the user's system haptics setting, and
+ * every call is synchronous, with nothing to await.
+ *
+ * ```ts
+ * haptics.success()                    // a name you know: one function per haptic
+ * haptics.play(haptic)                 // a name that arrives as data
+ * haptics.light({intensity: 0.6})      // impacts scale on iOS
+ * haptics.prepare('selection')         // iOS: warm the Taptic Engine as a gesture begins
+ * haptics.setEnabled(userPreference)   // silences every kara haptic, the components' own too
+ * ```
+ *
+ * - `selection` — a choice changed: a segment, a chip, a picker row.
+ * - `tick` — one step of a continuous gesture: a slider detent, a scrubbed value.
+ * - `toggleOn` / `toggleOff` — a switch flipped.
+ * - `success` / `warning` / `error` — how a task ended. Android has no warning of its own; it plays a rejection.
+ * - `longPress` / `dragStart` — a long press was recognised; an item lifted to be dragged.
+ * - `thresholdActivate` / `thresholdDeactivate` — a gesture crossed its commit point, or went back over it.
+ * - `keyPress` — a key of the app's own keypad.
+ * - `soft`, `light`, `medium`, `rigid`, `heavy` — a collision none of the names above describes.
+ *
+ * On Android the names that came with Android 14's constants fall back to the nearest older feedback, so every name
+ * plays on every version. Haptics are silent in a build without kara's native module.
+ */
+export const haptics = {
+  ...shorthands,
+  /** Whether kara plays haptics — `true` until `setEnabled(false)`. */
+  isEnabled: (): boolean => enabled,
+  play,
+  prepare,
+  /**
+   * Switches every kara haptic on or off, the ones its components play included — for an app's own "Haptics" setting.
+   * Not persisted: call it at start-up with the stored preference. The system setting applies either way.
+   */
+  setEnabled: (value: boolean): void => {
+    enabled = value
+  },
+}

package/src/haptics/index.ts

@@ -0,0 +1,2 @@
+export {type Haptic, type HapticOptions, haptics} from './haptics'
+export {type HapticResolver, useHapticFeedback} from './use-haptic-feedback'

package/src/haptics/use-haptic-feedback.ts

@@ -0,0 +1,36 @@
+import {useEffect, useRef} from 'react'
+
+import {type Haptic, haptics} from './haptics'
+
+/** Picks the haptic for one change of a trigger — or none, to stay silent for that change. */
+export type HapticResolver<T> = (previous: T, next: T) => Haptic | false | null | undefined
+
+/**
+ * Plays a haptic whenever `trigger` changes — never on mount — like SwiftUI's `sensoryFeedback(_:trigger:)`. Give it
+ * a haptic, or a function of the previous and next value that picks one per change. Changes are compared with
+ * `Object.is`, so a trigger is a primitive or a stable reference.
+ *
+ * ```ts
+ * useHapticFeedback(tab, 'selection')
+ * useHapticFeedback(quantity, (before, after) => (after > before ? 'tick' : 'soft'))
+ * useHapticFeedback(payment.status, (_, status) => status === 'paid' ? 'success' : status === 'failed' && 'error')
+ * ```
+ */
+export const useHapticFeedback = <T>(trigger: T, feedback: Haptic | HapticResolver<T>): void => {
+  const previous = useRef(trigger)
+
+  useEffect(() => {
+    const before = previous.current
+
+    if (Object.is(before, trigger)) {
+      return
+    }
+
+    previous.current = trigger
+    const haptic = typeof feedback === 'function' ? feedback(before, trigger) : feedback
+
+    if (haptic) {
+      haptics.play(haptic)
+    }
+  }, [feedback, trigger])
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './atoms'
+export * from './haptics'
 export * from './molecules'
 export * from './organisms'
 export * from './templates'

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

@@ -1,10 +1,10 @@
 import {Text as ComposeText, DropdownMenu, DropdownMenuItem, Host} from '@expo/ui/jetpack-compose'
 import {useSx} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
-import * as Haptics from 'expo-haptics'
 import {useCallback, useMemo, useRef, useState} from 'react'
 import {type GestureResponderEvent, Pressable, StyleSheet, View} from 'react-native'
 import {Icon} from '../../atoms/icon'
+import {haptics} from '../../haptics'
 import {HostBoundary} from '../../host-context'
 import {splitForRipple} from '../../ripple-clip'
 import type {MenuAction} from '../menu'
@@ -52,10 +52,10 @@ const MenuRow = ({action, onDismiss}: MenuRowProps) => {
  * Android's own take on a context menu, since Material has no lifted preview: a long press ripples the trigger, ticks
  * the long-press haptic, and opens a Material dropdown where the finger is — the trigger stays highlighted while the
  * menu is up. The host behind the menu mounts on the first long press and stays, so a list of triggers that are only
- * scrolled past never builds one. `preview` and `onPreviewPress` are iOS-only.
+ * scrolled past never builds one. `preview`, `onPreviewPress` and `previewTransition` are iOS-only.
  */
 const ContextMenuRoot = ({actions, children, testID, ...props}: ContextMenuProps) => {
-  const {onPreviewPress: _onPreviewPress, preview: _preview, ...sx} = props
+  const {onPreviewPress: _onPreviewPress, preview: _preview, previewTransition: _previewTransition, ...sx} = props
   const theme = useAppTheme()
   const resolved = useSx(sx)
   const trigger = useRef<View>(null)
@@ -70,7 +70,7 @@ const ContextMenuRoot = ({actions, children, testID, ...props}: ContextMenuProps
   const open = useCallback((event: GestureResponderEvent) => {
     const {pageX, pageY} = event.nativeEvent
 
-    Haptics.performAndroidHapticsAsync(Haptics.AndroidHaptics.Long_Press).catch(() => undefined)
+    haptics.longPress()
     // The touch in the trigger's own coordinates: `locationX/Y` are relative to whichever child was touched.
     trigger.current?.measure((_x, _y, _width, _height, left, top) => {
       setAnchor({x: pageX - left, y: pageY - top})

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

@@ -8,7 +8,15 @@ import {useSx} from '@hzblj/kara-sx'
 import {useCallback, useMemo} from 'react'
 import type {ContextMenuComponent, ContextMenuExclusionProps, ContextMenuProps} from './context-menu.types'
 
-const ContextMenuRoot = ({actions, children, onPreviewPress, preview, testID, ...sx}: ContextMenuProps) => {
+const ContextMenuRoot = ({
+  actions,
+  children,
+  onPreviewPress,
+  preview,
+  previewTransition,
+  testID,
+  ...sx
+}: ContextMenuProps) => {
   const style = useSx(sx)
 
   /** The native side hands back an id; the index is the one identity every action has. */
@@ -31,6 +39,7 @@ const ContextMenuRoot = ({actions, children, onPreviewPress, preview, testID, ..
       onPreviewPress={onPreviewPress}
       onSelectItem={onSelectItem}
       preview={preview}
+      previewTransition={previewTransition}
       style={style}
       testID={testID}
     >

package/src/organisms/context-menu/context-menu.types.ts

@@ -21,6 +21,14 @@ export type ContextMenuProps = ResponsiveViewSx & {
    * every preview up front.
    */
   preview?: ReactNode
+  /**
+   * iOS: how the preview leaves once tapped, before `onPreviewPress`. `zoom`: its photo grows straight into the pushed
+   * screen, the way the App Store expands a preview — needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in the
+   * trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
+   * flies out. `dismiss`: it shrinks back onto the trigger first. Default: `zoom` when the trigger holds a
+   * `ZoomTransition.Source`, `pop` otherwise.
+   */
+  previewTransition?: 'dismiss' | 'pop' | 'zoom'
   testID?: string
 }