@hzblj/kara-ui 0.6.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 +56 -0
  2. package/README.md +41 -31
  3. package/package.json +8 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,61 @@
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
+
3
59
  ## 0.6.0
4
60
 
5
61
  ### 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-image react-native-reanimated react-native-worklets
12
- npx expo install expo-router # optional, for @hzblj/kara-ui/router
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,33 +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.
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.
34
55
 
35
- ## Theme
56
+ ## Learn more
36
57
 
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
- ```
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)
53
64
 
54
- Every SVG in the folder becomes a native icon at prebuild: `bolt.svg` → `<Icon name="bolt" />`.
65
+ ## Sponsorship
55
66
 
56
- ## 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>
57
68
 
58
- `@hzblj/kara-ui` (everything), `@hzblj/kara-ui/router` (what needs Expo Router), `@hzblj/kara-ui/swift-ui` and
59
- `@hzblj/kara-ui/jetpack-compose` (the raw native views).
69
+ ## License
60
70
 
61
- [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.6.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,17 +87,16 @@
87
87
  ]
88
88
  },
89
89
  "dependencies": {
90
- "@hzblj/kara-components": "^0.6.0",
91
- "@hzblj/kara-expo-plugin": "^0.6.0",
92
- "@hzblj/kara-native": "^0.6.0",
93
- "@hzblj/kara-router": "^0.6.0",
94
- "@hzblj/kara-sx": "^0.6.0",
95
- "@hzblj/kara-theme": "^0.6.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
101
  "expo-image": "*",
103
102
  "expo-router": "*",
@@ -113,7 +112,6 @@
113
112
  "devDependencies": {
114
113
  "@expo/ui": "~57.0.18",
115
114
  "@lodev09/react-native-true-sheet": "3.11.18",
116
- "@shopify/flash-list": "^2.3.2",
117
115
  "@types/react": "~19.2.18",
118
116
  "expo": "~57.0.22",
119
117
  "expo-image": "~57.0.5",