@hzblj/kara-ui 0.5.0 → 0.7.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 +81 -0
  2. package/README.md +41 -96
  3. package/package.json +8 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,86 @@
1
1
  # @hzblj/kara-ui
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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:
8
+
9
+ ```tsx
10
+ <SwipeActions
11
+ trailing={[
12
+ { destructive: true, icon: "trash", label: "Delete", onPress: remove },
13
+ ]}
14
+ >
15
+ <ListItem title="Order [#1024](https://github.com/hzblj/kara-ui/issues/1024)" />
16
+ </SwipeActions>
17
+ ```
18
+
19
+ 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.
20
+
21
+ - [#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.
22
+
23
+ - [#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.
24
+
25
+ `TooltipBox` (`@hzblj/kara-native/jetpack-compose`) takes `plain` for that style, and hides when `isPresented` turns false.
26
+
27
+ ### Patch Changes
28
+
29
+ - [#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.
30
+
31
+ `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`.
32
+
33
+ - [#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:
34
+
35
+ - `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.
36
+ - `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.
37
+ - 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.
38
+
39
+ - [#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.
40
+
41
+ - [#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.
42
+
43
+ - [#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.
44
+
45
+ - [#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.
46
+
47
+ - [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `NavigationBar` and `Sheet.Header` on iOS 26 centre their title and glass items. UIKit's bar is 54 pt with its 44 pt row of items at the top, so centring the bar left the row 5 pt high; it is the row that is centred now.
48
+
49
+ - [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `sx` costs less on every render. The style cache, the responsive flattening and the key behind `useSxModifiers` used to go through every key the surface has, about seventy for a `Box`, even when a component set two or three of them. Now they go through only the props that are set, and the theme's part of the cache key is worked out once per theme rather than on every render. Without a JIT, as on Hermes, an `sx()` view resolves its style 2.5–5× faster and a native atom 2–4.5× faster.
50
+
51
+ - 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), [`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), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490)]:
52
+ - @hzblj/kara-components@0.7.0
53
+ - @hzblj/kara-native@0.7.0
54
+ - @hzblj/kara-sx@0.7.0
55
+ - @hzblj/kara-router@0.7.0
56
+ - @hzblj/kara-theme@0.7.0
57
+ - @hzblj/kara-expo-plugin@0.7.0
58
+
59
+ ## 0.6.0
60
+
61
+ ### Minor Changes
62
+
63
+ - [#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.
64
+
65
+ - `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.
66
+ - 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.
67
+ - `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.
68
+ - `haptics.setEnabled(false)` silences every kara haptic, the components' own included.
69
+ - `Pressable`'s `haptic` takes a name as well as `true` (a `light` impact); `Chip` plays `selection`.
70
+ - 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.
71
+ - `Slider`: `step` is the increment on Android too — it was passed to Compose as the number of stops.
72
+ - `expo-haptics` is no longer a peer dependency.
73
+
74
+ ### Patch Changes
75
+
76
+ - Updated dependencies [[`62b7131`](https://github.com/hzblj/kara-ui/commit/62b713143bd03872ecdd89ca8de42d98fe589617)]:
77
+ - @hzblj/kara-native@0.6.0
78
+ - @hzblj/kara-components@0.6.0
79
+ - @hzblj/kara-router@0.6.0
80
+ - @hzblj/kara-theme@0.6.0
81
+ - @hzblj/kara-sx@0.6.0
82
+ - @hzblj/kara-expo-plugin@0.6.0
83
+
3
84
  ## 0.5.0
4
85
 
5
86
  ### Minor Changes
package/README.md CHANGED
@@ -1,18 +1,39 @@
1
- # @hzblj/kara-ui
1
+ # Kara UI
2
2
 
3
- A native-first design system for Expo. Components render real SwiftUI and Jetpack Compose views, styled through one
4
- token-typed `sx` surface. Platform colours and typeface by default, your own through the theme.
3
+ [![npm version][npm-badge]][npm-url]
4
+ [![License: MIT][license-badge]][license-url]
5
+ [![Platforms: iOS · Android][platforms-badge]][docs-url]
5
6
 
6
- iOS and Android, Expo SDK 57, development build required.
7
+ [npm-badge]: https://img.shields.io/npm/v/@hzblj/kara-ui?labelColor=27272a&color=ff5700&label=%40hzblj%2Fkara-ui
8
+ [npm-url]: https://www.npmjs.com/package/@hzblj/kara-ui
9
+ [license-badge]: https://img.shields.io/badge/license-MIT-ff5700?labelColor=27272a
10
+ [license-url]: https://github.com/hzblj/kara-ui/blob/main/LICENSE
11
+ [platforms-badge]: https://img.shields.io/badge/platforms-iOS%20%C2%B7%20Android-ff5700?labelColor=27272a
12
+ [docs-url]: https://kara.janblazej.dev/docs
13
+
14
+ <a href="https://kara.janblazej.dev"><img src="https://kara.janblazej.dev/og.png" alt="Kara — native UI for Expo: real SwiftUI and Jetpack Compose views" width="720"></a>
15
+
16
+ A native-first design system for Expo. Kara's components render **real SwiftUI and Jetpack Compose views** — a
17
+ `Switch` is a SwiftUI `Toggle` on iOS and a Material `Switch` on Android — styled through one token-typed `sx`
18
+ surface. The platform's colours and typeface by default, yours through the theme.
19
+
20
+ ## Documentation
21
+
22
+ **[kara.janblazej.dev/docs](https://kara.janblazej.dev/docs)** — the guides, the design tokens, and every component
23
+ photographed on iOS and Android, in light and dark.
7
24
 
8
25
  ## Install
9
26
 
10
27
  ```bash
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 and the zoom transition
28
+ npx expo install @hzblj/kara-ui @expo/ui @lodev09/react-native-true-sheet \
29
+ expo-image react-native-reanimated react-native-worklets
13
30
  ```
14
31
 
15
- ## Use
32
+ Expo SDK 57 and a [development build](https://docs.expo.dev/develop/development-builds/introduction/) — Kara ships
33
+ native code, so it does not run in Expo Go. The [installation guide](https://kara.janblazej.dev/docs/installation)
34
+ covers the config plugin and the provider.
35
+
36
+ ## Quick start
16
37
 
17
38
  ```tsx
18
39
  import {Button, KaraProvider, Screen, Text, VStack} from '@hzblj/kara-ui'
@@ -29,98 +50,22 @@ export const App = () => (
29
50
  )
30
51
  ```
31
52
 
32
- Native components render inside `<Screen>` or `<Island>`. The `Rn*` components (`RnText`, `RnScrollView`, …) are plain
33
- React Native views with the same `sx` props.
34
-
35
- ## Theme
36
-
37
- ```tsx
38
- const theme = defineTheme({
39
- colors: {fill: {accent: {primary: '#4f46e5'}}},
40
- fonts: {text: {regular: 'Inter-Regular', medium: 'Inter-Medium'}},
41
- dynamicColor: true, // Material You on Android 12+
42
- })
43
-
44
- <KaraProvider theme={theme} themePreference="system">…</KaraProvider>
45
- ```
46
-
47
- ## Icons
48
-
49
- ```ts
50
- // app.config.ts
51
- plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]
52
- ```
53
-
54
- Every SVG in the folder becomes a native icon at prebuild: `bolt.svg` → `<Icon name="bolt" />`.
53
+ Native views render inside a [`Screen` or an `Island`](https://kara.janblazej.dev/docs/hosts); the `Rn*` components
54
+ are plain React Native views with the same `sx` props.
55
55
 
56
- ## Sheets
57
-
58
- ```tsx
59
- <Sheet onDismiss={close} visible={open}>
60
- <Sheet.Header title="Choose a size" trailingItems={[{type: 'close', onPress: close}]} />
61
- <Content />
62
- </Sheet>
63
- ```
64
-
65
- The header is a real navigation bar: `back`, `close` and icon items on either side, a centred, leading or large title.
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
- ```
56
+ ## Learn more
113
57
 
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`).
58
+ - [Styling with `sx`](https://kara.janblazej.dev/docs/styling) — tokens in place of raw values
59
+ - [Theming](https://kara.janblazej.dev/docs/theming) — your colours, your typefaces, Material You
60
+ - [Icons](https://kara.janblazej.dev/docs/icons) — your own SVGs, as native icons on both platforms
61
+ - [Expo Router](https://kara.janblazej.dev/docs/router) — native tabs and the zoom transition
62
+ - [Components](https://kara.janblazej.dev/docs/components) — the whole catalogue
63
+ - [Changelog](https://kara.janblazej.dev/docs/changelog)
116
64
 
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).
65
+ ## Sponsorship
120
66
 
121
- ## Entry points
67
+ <a href="https://www.buymeacoffee.com/hzblj"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me a Coffee" height="48"></a>
122
68
 
123
- `@hzblj/kara-ui` (everything), `@hzblj/kara-ui/router` (native tabs, zoom transition), `@hzblj/kara-ui/swift-ui` and
124
- `@hzblj/kara-ui/jetpack-compose` (the raw native views).
69
+ ## License
125
70
 
126
- [Example app and source](https://github.com/hzblj/kara-ui) · MIT
71
+ MIT © Jan Blazej
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hzblj/kara-ui",
3
- "version": "0.5.0",
3
+ "version": "0.7.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",
@@ -12,7 +12,7 @@
12
12
  "bugs": {
13
13
  "url": "https://github.com/hzblj/kara-ui/issues"
14
14
  },
15
- "homepage": "https://github.com/hzblj/kara-ui#readme",
15
+ "homepage": "https://kara.janblazej.dev",
16
16
  "keywords": [
17
17
  "react-native",
18
18
  "expo",
@@ -87,19 +87,17 @@
87
87
  ]
88
88
  },
89
89
  "dependencies": {
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"
90
+ "@hzblj/kara-components": "^0.7.0",
91
+ "@hzblj/kara-expo-plugin": "^0.7.0",
92
+ "@hzblj/kara-native": "^0.7.0",
93
+ "@hzblj/kara-router": "^0.7.0",
94
+ "@hzblj/kara-sx": "^0.7.0",
95
+ "@hzblj/kara-theme": "^0.7.0"
96
96
  },
97
97
  "peerDependencies": {
98
98
  "@expo/ui": "~57.0.0",
99
99
  "@lodev09/react-native-true-sheet": ">=3.11.0",
100
- "@shopify/flash-list": ">=2.0.0",
101
100
  "expo": "~57.0.0",
102
- "expo-haptics": "*",
103
101
  "expo-image": "*",
104
102
  "expo-router": "*",
105
103
  "react": "*",
@@ -114,10 +112,8 @@
114
112
  "devDependencies": {
115
113
  "@expo/ui": "~57.0.18",
116
114
  "@lodev09/react-native-true-sheet": "3.11.18",
117
- "@shopify/flash-list": "^2.3.2",
118
115
  "@types/react": "~19.2.18",
119
116
  "expo": "~57.0.22",
120
- "expo-haptics": "~57.0.3",
121
117
  "expo-image": "~57.0.5",
122
118
  "expo-router": "~57.0.21",
123
119
  "react": "19.2.3",