@hzblj/kara-ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @hzblj/kara-ui
 
+## 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-components@0.6.0
+  - @hzblj/kara-router@0.6.0
+  - @hzblj/kara-theme@0.6.0
+  - @hzblj/kara-sx@0.6.0
+  - @hzblj/kara-expo-plugin@0.6.0
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -8,8 +8,8 @@ iOS and Android, Expo SDK 57, development build required.
 ## Install
 
 ```bash
-npx expo install @hzblj/kara-ui @expo/ui @lodev09/react-native-true-sheet @shopify/flash-list expo-haptics expo-image react-native-reanimated react-native-worklets
-npx expo install expo-router   # optional, for native tabs and the zoom transition
+npx expo install @hzblj/kara-ui @expo/ui @lodev09/react-native-true-sheet @shopify/flash-list expo-image react-native-reanimated react-native-worklets
+npx expo install expo-router   # optional, for @hzblj/kara-ui/router
 ```
 
 ## Use
@@ -53,74 +53,9 @@ plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]
 
 Every SVG in the folder becomes a native icon at prebuild: `bolt.svg` → `<Icon name="bolt" />`.
 
-## Sheets
-
-```tsx
-<Sheet onDismiss={close} visible={open}>
-  <Sheet.Header title="Choose a size" trailingItems={[{type: 'close', onPress: close}]} />
-  <Content />
-</Sheet>
-```
-
-The header is a real navigation bar: `back`, `close` and icon items on either side, a centred, leading or large title.
-
-## Zoom transition
-
-A push that grows out of the photo it was opened from and shrinks back into it — UIKit's zoom on iOS 18 (a slide
-below), Material's container transform on Android. Any Expo Router stack screen.
-
-```tsx
-import {
-  useZoomTransitionParam,
-  useZoomTransitionSourceId,
-  withZoomTransition,
-  ZOOM_TRANSITION_PARAM,
-  ZoomTransition,
-} from '@hzblj/kara-ui/router'
-
-// The list
-const zoomId = useZoomTransitionSourceId(product.id)
-const open = () => router.push({pathname: '/product/[id]', params: {id: product.id, [ZOOM_TRANSITION_PARAM]: zoomId}})
-
-<Pressable onPress={open}>
-  <ZoomTransition.Source identifier={zoomId} android={{borderRadius: 'large'}}>
-    <ProductPhoto />
-  </ZoomTransition.Source>
-</Pressable>
-
-// The pushed screen — the enabler first, before any loading state
-const zoomId = useZoomTransitionParam()
-
-<ZoomTransition.Enabler sourceIdentifier={zoomId} />
-<ZoomTransition.Target identifier={zoomId} android={{borderRadius: 'large'}}>
-  <ProductPhoto />
-</ZoomTransition.Target>
-
-// Its layout: on Android the push fades under the transform
-<Stack.Screen name="product/[id]" options={withZoomTransition({title: 'Product'})} />
-```
-
-Props at the top work on both platforms; the rest is typed apart under `ios` and `android`:
-
-```tsx
-<ZoomTransition.Enabler
-  sourceIdentifier={zoomId}
-  scrim="fill.accent.primary:o20"
-  ios={{dismissGesture: 'vertical', blur: 'thin'}}
-  android={{duration: 'd300', easing: 'standard', fade: 'through', path: 'linear'}}
-/>
-```
-
-Inside a `ContextMenu`, a tap on the iOS preview zooms the preview's photo straight into the pushed screen
-(`previewTransition` picks `zoom`, `pop` or `dismiss`).
-
-On iOS 18+ react-native-screens (4.30 and older) reports a zoom pop ~0.5 s late, so a tap right after it is lost —
-[react-native-screens#4711](https://github.com/software-mansion/react-native-screens/issues/4711); the example app
-carries the fix as a Yarn patch (`.yarn/patches/` in the repo).
-
 ## Entry points
 
-`@hzblj/kara-ui` (everything), `@hzblj/kara-ui/router` (native tabs, zoom transition), `@hzblj/kara-ui/swift-ui` and
+`@hzblj/kara-ui` (everything), `@hzblj/kara-ui/router` (what needs Expo Router), `@hzblj/kara-ui/swift-ui` and
 `@hzblj/kara-ui/jetpack-compose` (the raw native views).
 
 [Example app and source](https://github.com/hzblj/kara-ui) · MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A native-first design system for Expo: real SwiftUI and Jetpack Compose views through @expo/ui, styled by one token-typed sx engine.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -87,19 +87,18 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-components": "^0.5.0",
-    "@hzblj/kara-expo-plugin": "^0.5.0",
-    "@hzblj/kara-native": "^0.5.0",
-    "@hzblj/kara-router": "^0.5.0",
-    "@hzblj/kara-sx": "^0.5.0",
-    "@hzblj/kara-theme": "^0.5.0"
+    "@hzblj/kara-components": "^0.6.0",
+    "@hzblj/kara-expo-plugin": "^0.6.0",
+    "@hzblj/kara-native": "^0.6.0",
+    "@hzblj/kara-router": "^0.6.0",
+    "@hzblj/kara-sx": "^0.6.0",
+    "@hzblj/kara-theme": "^0.6.0"
   },
   "peerDependencies": {
     "@expo/ui": "~57.0.0",
     "@lodev09/react-native-true-sheet": ">=3.11.0",
     "@shopify/flash-list": ">=2.0.0",
     "expo": "~57.0.0",
-    "expo-haptics": "*",
     "expo-image": "*",
     "expo-router": "*",
     "react": "*",
@@ -117,7 +116,6 @@
     "@shopify/flash-list": "^2.3.2",
     "@types/react": "~19.2.18",
     "expo": "~57.0.22",
-    "expo-haptics": "~57.0.3",
     "expo-image": "~57.0.5",
     "expo-router": "~57.0.21",
     "react": "19.2.3",