@hzblj/kara-ui 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +56 -2
  3. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # @hzblj/kara-ui
2
2
 
3
+ ## 0.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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.
8
+
9
+ - 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.
10
+ - 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.
11
+ - 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`).
12
+ - `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.
13
+ - `DurationSize`, the keys of `duration`.
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [[`3b0a6fb`](https://github.com/hzblj/kara-ui/commit/3b0a6fbc49559720023fece2b5c6189ad4d88bc8)]:
18
+ - @hzblj/kara-router@0.5.0
19
+ - @hzblj/kara-native@0.5.0
20
+ - @hzblj/kara-components@0.5.0
21
+ - @hzblj/kara-theme@0.5.0
22
+ - @hzblj/kara-sx@0.5.0
23
+ - @hzblj/kara-expo-plugin@0.5.0
24
+
25
+ ## 0.4.1
26
+
27
+ ### Patch Changes
28
+
29
+ - [#6](https://github.com/hzblj/kara-ui/pull/6) [`d14bdd3`](https://github.com/hzblj/kara-ui/commit/d14bdd37bede9fef80f4d3af4621ea5d60b2b16b) Thanks [@hzblj](https://github.com/hzblj)! - `GlassView` always shows its glass. Glass mounted under a React Native view at opacity 0 — the first row of a Legend List opened from cache, content fading in from 0 — used to stay without it, because React Native changes opacity past UIKit, which then kept the subtree marked as hidden. React Native opacity changes that cross UIKit's hidden threshold now go through `UIView.alpha`, so this holds for every Liquid Glass view in the app. The glass is also set at once instead of polling until every ancestor is fully opaque, and its content no longer waits for it.
30
+
31
+ - Updated dependencies [[`d14bdd3`](https://github.com/hzblj/kara-ui/commit/d14bdd37bede9fef80f4d3af4621ea5d60b2b16b)]:
32
+ - @hzblj/kara-native@0.4.1
33
+ - @hzblj/kara-theme@0.4.1
34
+ - @hzblj/kara-sx@0.4.1
35
+ - @hzblj/kara-components@0.4.1
36
+ - @hzblj/kara-router@0.4.1
37
+ - @hzblj/kara-expo-plugin@0.4.1
38
+
3
39
  ## 0.4.0
4
40
 
5
41
  ### Minor Changes
package/README.md CHANGED
@@ -9,7 +9,7 @@ iOS and Android, Expo SDK 57, development build required.
9
9
 
10
10
  ```bash
11
11
  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
12
- npx expo install expo-router # optional, for native tabs
12
+ npx expo install expo-router # optional, for native tabs and the zoom transition
13
13
  ```
14
14
 
15
15
  ## Use
@@ -64,9 +64,63 @@ Every SVG in the folder becomes a native icon at prebuild: `bolt.svg` → `<Icon
64
64
 
65
65
  The header is a real navigation bar: `back`, `close` and icon items on either side, a centred, leading or large title.
66
66
 
67
+ ## Zoom transition
68
+
69
+ 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
70
+ below), Material's container transform on Android. Any Expo Router stack screen.
71
+
72
+ ```tsx
73
+ import {
74
+ useZoomTransitionParam,
75
+ useZoomTransitionSourceId,
76
+ withZoomTransition,
77
+ ZOOM_TRANSITION_PARAM,
78
+ ZoomTransition,
79
+ } from '@hzblj/kara-ui/router'
80
+
81
+ // The list
82
+ const zoomId = useZoomTransitionSourceId(product.id)
83
+ const open = () => router.push({pathname: '/product/[id]', params: {id: product.id, [ZOOM_TRANSITION_PARAM]: zoomId}})
84
+
85
+ <Pressable onPress={open}>
86
+ <ZoomTransition.Source identifier={zoomId} android={{borderRadius: 'large'}}>
87
+ <ProductPhoto />
88
+ </ZoomTransition.Source>
89
+ </Pressable>
90
+
91
+ // The pushed screen — the enabler first, before any loading state
92
+ const zoomId = useZoomTransitionParam()
93
+
94
+ <ZoomTransition.Enabler sourceIdentifier={zoomId} />
95
+ <ZoomTransition.Target identifier={zoomId} android={{borderRadius: 'large'}}>
96
+ <ProductPhoto />
97
+ </ZoomTransition.Target>
98
+
99
+ // Its layout: on Android the push fades under the transform
100
+ <Stack.Screen name="product/[id]" options={withZoomTransition({title: 'Product'})} />
101
+ ```
102
+
103
+ Props at the top work on both platforms; the rest is typed apart under `ios` and `android`:
104
+
105
+ ```tsx
106
+ <ZoomTransition.Enabler
107
+ sourceIdentifier={zoomId}
108
+ scrim="fill.accent.primary:o20"
109
+ ios={{dismissGesture: 'vertical', blur: 'thin'}}
110
+ android={{duration: 'd300', easing: 'standard', fade: 'through', path: 'linear'}}
111
+ />
112
+ ```
113
+
114
+ Inside a `ContextMenu`, a tap on the iOS preview zooms the preview's photo straight into the pushed screen
115
+ (`previewTransition` picks `zoom`, `pop` or `dismiss`).
116
+
117
+ 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 —
118
+ [react-native-screens#4711](https://github.com/software-mansion/react-native-screens/issues/4711); the example app
119
+ carries the fix as a Yarn patch (`.yarn/patches/` in the repo).
120
+
67
121
  ## Entry points
68
122
 
69
- `@hzblj/kara-ui` (everything), `@hzblj/kara-ui/router` (native tabs), `@hzblj/kara-ui/swift-ui` and
123
+ `@hzblj/kara-ui` (everything), `@hzblj/kara-ui/router` (native tabs, zoom transition), `@hzblj/kara-ui/swift-ui` and
70
124
  `@hzblj/kara-ui/jetpack-compose` (the raw native views).
71
125
 
72
126
  [Example app and source](https://github.com/hzblj/kara-ui) · MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hzblj/kara-ui",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "A native-first design system for Expo: real SwiftUI and Jetpack Compose views through @expo/ui, styled by one token-typed sx engine.",
5
5
  "author": "Jan Blazej",
6
6
  "license": "MIT",
@@ -87,12 +87,12 @@
87
87
  ]
88
88
  },
89
89
  "dependencies": {
90
- "@hzblj/kara-components": "^0.4.0",
91
- "@hzblj/kara-expo-plugin": "^0.4.0",
92
- "@hzblj/kara-native": "^0.4.0",
93
- "@hzblj/kara-router": "^0.4.0",
94
- "@hzblj/kara-sx": "^0.4.0",
95
- "@hzblj/kara-theme": "^0.4.0"
90
+ "@hzblj/kara-components": "^0.5.0",
91
+ "@hzblj/kara-expo-plugin": "^0.5.0",
92
+ "@hzblj/kara-native": "^0.5.0",
93
+ "@hzblj/kara-router": "^0.5.0",
94
+ "@hzblj/kara-sx": "^0.5.0",
95
+ "@hzblj/kara-theme": "^0.5.0"
96
96
  },
97
97
  "peerDependencies": {
98
98
  "@expo/ui": "~57.0.0",