@hzblj/kara-components 0.2.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @hzblj/kara-components
 
+## 0.4.0
+
+### Minor Changes
+
+- [`6e7903a`](https://github.com/hzblj/kara-ui/commit/6e7903afa3d3442e04a48a6e24399f9f03559a03) Thanks [@hzblj](https://github.com/hzblj)! - Android polish, and a new `RnListItem`.
+
+  - `ContextMenu` on Android is a proper long-press menu: a ripple and the long-press haptic, then a Material dropdown where the finger is, with the actions' icons and the trigger highlighted while it is open. The ripple and highlight stay inside rounded corners.
+  - A pressable `HStack`, `VStack` or `ZStack` ripples across its whole shape, padding included; `ListItem` and `LabeledContent` take `px` so a row in a card can carry the card's padding inside its press area.
+  - `ListItem` keeps its chevron when the subtitle fills the line.
+  - `Tabs` take the theme's colours: on Android the bar, active indicator, icons, labels and ripple come from tokens instead of the wallpaper scheme; on iOS the selected item takes the accent.
+  - New `RnListItem`: `ListItem`'s row in the React Native tier, cheap to mount by the dozen, with a full-row ripple on Android and a highlight on iOS.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hzblj/kara-theme@0.4.0
+  - @hzblj/kara-sx@0.4.0
+  - @hzblj/kara-native@0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [`f84ffd5`](https://github.com/hzblj/kara-ui/commit/f84ffd52954a5e7052541c8682787137de205a28) Thanks [@hzblj](https://github.com/hzblj)! - Native sheets with a native header. `Sheet` is now a TrueSheet (`@lodev09/react-native-true-sheet`, a new peer dependency) with `<Sheet.Header>` — a real navigation bar with a centred, leading or large title that hands over to the bar as it scrolls away, items on either side, and on iOS 26 the content scrolls under it with the soft edge effect — plus `<Sheet.ScrollView>`, `useSheetScroll`, detents, a footer and a ref (`present`/`dismiss`/`resize`). It is React Native tier now: no host, native atoms inside go in an `Island`. `fitToContents` is replaced by `detents` (`['auto']` by default).
+
+  `NavigationBar` takes `leadingItems` / `trailingItems` instead of `onBack` / `onClose`: `back`, `close` or an app `icon`, on either side and in any order; on iOS 26 neighbours share a glass capsule unless an item is `separated`. Also `titleAlignment`, `titleVisible`, `inverted` and an iOS `search` field. On Android it is now Material's native top app bar.
+
+### Patch Changes
+
+- Updated dependencies [[`f84ffd5`](https://github.com/hzblj/kara-ui/commit/f84ffd52954a5e7052541c8682787137de205a28)]:
+  - @hzblj/kara-native@0.3.0
+  - @hzblj/kara-theme@0.3.0
+  - @hzblj/kara-sx@0.3.0
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -1,8 +1,7 @@
 # @hzblj/kara-components
 
-The atoms, molecules, organisms and templates of kara-ui — real SwiftUI and Jetpack Compose views through `@expo/ui` and the KaraUI module, styled through `sx`.
+The components of kara-ui.
 
-**Install [`@hzblj/kara-ui`](https://www.npmjs.com/package/@hzblj/kara-ui) instead.** This package is one of its building
-blocks, published so the umbrella can depend on it; it is versioned together with it and has no standalone docs.
+Install [`@hzblj/kara-ui`](https://www.npmjs.com/package/@hzblj/kara-ui) instead — this is one of its building blocks.
 
 MIT

package/lib/module/atoms/h-stack/h-stack.android.js

@@ -1,11 +1,9 @@
 "use strict";
 
 import { Row } from '@expo/ui/jetpack-compose';
-import { clickable, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
-import { useSxModifiers } from '@hzblj/kara-sx';
 import { spacing } from '@hzblj/kara-theme';
-import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
+import { useStackModifiers } from "../../use-stack-modifiers.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ALIGNMENT = {
   center: 'center',
@@ -21,8 +19,7 @@ export const HStack = ({
   ...sx
 }) => {
   useHostGuard('HStack');
-  const sxModifiers = useSxModifiers(sx);
-  const modifiers = useMemo(() => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])], [onPress, sxModifiers, testID]);
+  const modifiers = useStackModifiers(sx, onPress, testID);
   return /*#__PURE__*/_jsx(Row, {
     verticalAlignment: ALIGNMENT[align],
     horizontalArrangement: gap === undefined ? undefined : {

package/lib/module/atoms/h-stack/h-stack.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Row","clickable","testID","testIdModifier","useSxModifiers","spacing","useMemo","useHostGuard","jsx","_jsx","ALIGNMENT","center","end","start","HStack","align","children","onPress","gap","sx","sxModifiers","modifiers","verticalAlignment","horizontalArrangement","undefined","spacedBy"],"sourceRoot":"../../../../src","sources":["atoms/h-stack/h-stack.android.tsx"],"mappings":";;AAAA,SAAQA,GAAG,QAAO,0BAA0B;AAC5C,SAAQC,SAAS,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACtF,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,OAAO,QAAO,mBAAmB;AACzC,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,SAAS,GAAG;EAChBC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE,QAAQ;EACbC,KAAK,EAAE;AACT,CAAgD;AAEhD,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,KAAK,GAAG,OAAO;EACfC,QAAQ;EACRC,OAAO;EACPZ,OAAO,EAAEa,GAAG;EACZhB,MAAM;EACN,GAAGiB;AACQ,CAAC,KAAK;EACjBZ,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMa,WAAW,GAAGhB,cAAc,CAACe,EAAE,CAAC;EACtC,MAAME,SAAS,GAAGf,OAAO,CACvB,MAAM,CAAC,GAAGc,WAAW,EAAE,IAAIlB,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,IAAIe,OAAO,GAAG,CAAChB,SAAS,CAACgB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC7G,CAACA,OAAO,EAAEG,WAAW,EAAElB,MAAM,CAC/B,CAAC;EAED,oBACEO,IAAA,CAACT,GAAG;IACFsB,iBAAiB,EAAEZ,SAAS,CAACK,KAAK,CAAE;IACpCQ,qBAAqB,EAAEL,GAAG,KAAKM,SAAS,GAAGA,SAAS,GAAG;MAACC,QAAQ,EAAEpB,OAAO,CAACa,GAAG;IAAC,CAAE;IAChFG,SAAS,EAAEA,SAAU;IAAAL,QAAA,EAEpBA;EAAQ,CACN,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Row","spacing","useHostGuard","useStackModifiers","jsx","_jsx","ALIGNMENT","center","end","start","HStack","align","children","onPress","gap","testID","sx","modifiers","verticalAlignment","horizontalArrangement","undefined","spacedBy"],"sourceRoot":"../../../../src","sources":["atoms/h-stack/h-stack.android.tsx"],"mappings":";;AAAA,SAAQA,GAAG,QAAO,0BAA0B;AAC5C,SAAQC,OAAO,QAAO,mBAAmB;AACzC,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,iBAAiB,QAAO,8BAA2B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3D,MAAMC,SAAS,GAAG;EAChBC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE,QAAQ;EACbC,KAAK,EAAE;AACT,CAAgD;AAEhD,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,KAAK,GAAG,OAAO;EACfC,QAAQ;EACRC,OAAO;EACPZ,OAAO,EAAEa,GAAG;EACZC,MAAM;EACN,GAAGC;AACQ,CAAC,KAAK;EACjBd,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMe,SAAS,GAAGd,iBAAiB,CAACa,EAAE,EAAEH,OAAO,EAAEE,MAAM,CAAC;EAExD,oBACEV,IAAA,CAACL,GAAG;IACFkB,iBAAiB,EAAEZ,SAAS,CAACK,KAAK,CAAE;IACpCQ,qBAAqB,EAAEL,GAAG,KAAKM,SAAS,GAAGA,SAAS,GAAG;MAACC,QAAQ,EAAEpB,OAAO,CAACa,GAAG;IAAC,CAAE;IAChFG,SAAS,EAAEA,SAAU;IAAAL,QAAA,EAEpBA;EAAQ,CACN,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/atoms/v-stack/v-stack.android.js

@@ -1,11 +1,9 @@
 "use strict";
 
 import { Column } from '@expo/ui/jetpack-compose';
-import { clickable, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
-import { useSxModifiers } from '@hzblj/kara-sx';
 import { spacing } from '@hzblj/kara-theme';
-import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
+import { useStackModifiers } from "../../use-stack-modifiers.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ALIGNMENT = {
   center: 'center',
@@ -21,8 +19,7 @@ export const VStack = ({
   ...sx
 }) => {
   useHostGuard('VStack');
-  const sxModifiers = useSxModifiers(sx);
-  const modifiers = useMemo(() => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])], [onPress, sxModifiers, testID]);
+  const modifiers = useStackModifiers(sx, onPress, testID);
   return /*#__PURE__*/_jsx(Column, {
     horizontalAlignment: ALIGNMENT[align],
     verticalArrangement: gap === undefined ? undefined : {

package/lib/module/atoms/v-stack/v-stack.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Column","clickable","testID","testIdModifier","useSxModifiers","spacing","useMemo","useHostGuard","jsx","_jsx","ALIGNMENT","center","end","start","VStack","align","children","onPress","gap","sx","sxModifiers","modifiers","horizontalAlignment","verticalArrangement","undefined","spacedBy"],"sourceRoot":"../../../../src","sources":["atoms/v-stack/v-stack.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,0BAA0B;AAC/C,SAAQC,SAAS,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACtF,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,OAAO,QAAO,mBAAmB;AACzC,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,SAAS,GAAG;EAChBC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE,KAAK;EACVC,KAAK,EAAE;AACT,CAAgD;AAEhD,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,KAAK,GAAG,OAAO;EACfC,QAAQ;EACRC,OAAO;EACPZ,OAAO,EAAEa,GAAG;EACZhB,MAAM;EACN,GAAGiB;AACQ,CAAC,KAAK;EACjBZ,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMa,WAAW,GAAGhB,cAAc,CAACe,EAAE,CAAC;EACtC,MAAME,SAAS,GAAGf,OAAO,CACvB,MAAM,CAAC,GAAGc,WAAW,EAAE,IAAIlB,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,IAAIe,OAAO,GAAG,CAAChB,SAAS,CAACgB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC7G,CAACA,OAAO,EAAEG,WAAW,EAAElB,MAAM,CAC/B,CAAC;EAED,oBACEO,IAAA,CAACT,MAAM;IACLsB,mBAAmB,EAAEZ,SAAS,CAACK,KAAK,CAAE;IACtCQ,mBAAmB,EAAEL,GAAG,KAAKM,SAAS,GAAGA,SAAS,GAAG;MAACC,QAAQ,EAAEpB,OAAO,CAACa,GAAG;IAAC,CAAE;IAC9EG,SAAS,EAAEA,SAAU;IAAAL,QAAA,EAEpBA;EAAQ,CACH,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["Column","spacing","useHostGuard","useStackModifiers","jsx","_jsx","ALIGNMENT","center","end","start","VStack","align","children","onPress","gap","testID","sx","modifiers","horizontalAlignment","verticalArrangement","undefined","spacedBy"],"sourceRoot":"../../../../src","sources":["atoms/v-stack/v-stack.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,0BAA0B;AAC/C,SAAQC,OAAO,QAAO,mBAAmB;AACzC,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,iBAAiB,QAAO,8BAA2B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3D,MAAMC,SAAS,GAAG;EAChBC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE,KAAK;EACVC,KAAK,EAAE;AACT,CAAgD;AAEhD,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,KAAK,GAAG,OAAO;EACfC,QAAQ;EACRC,OAAO;EACPZ,OAAO,EAAEa,GAAG;EACZC,MAAM;EACN,GAAGC;AACQ,CAAC,KAAK;EACjBd,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMe,SAAS,GAAGd,iBAAiB,CAACa,EAAE,EAAEH,OAAO,EAAEE,MAAM,CAAC;EAExD,oBACEV,IAAA,CAACL,MAAM;IACLkB,mBAAmB,EAAEZ,SAAS,CAACK,KAAK,CAAE;IACtCQ,mBAAmB,EAAEL,GAAG,KAAKM,SAAS,GAAGA,SAAS,GAAG;MAACC,QAAQ,EAAEpB,OAAO,CAACa,GAAG;IAAC,CAAE;IAC9EG,SAAS,EAAEA,SAAU;IAAAL,QAAA,EAEpBA;EAAQ,CACH,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/atoms/z-stack/z-stack.android.js

@@ -1,10 +1,8 @@
 "use strict";
 
 import { Box } from '@expo/ui/jetpack-compose';
-import { clickable, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
-import { useSxModifiers } from '@hzblj/kara-sx';
-import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
+import { useStackModifiers } from "../../use-stack-modifiers.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ALIGNMENT = {
   bottom: 'bottomCenter',
@@ -19,8 +17,7 @@ export const ZStack = ({
   ...sx
 }) => {
   useHostGuard('ZStack');
-  const sxModifiers = useSxModifiers(sx);
-  const modifiers = useMemo(() => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])], [onPress, sxModifiers, testID]);
+  const modifiers = useStackModifiers(sx, onPress, testID);
   return /*#__PURE__*/_jsx(Box, {
     contentAlignment: ALIGNMENT[align],
     modifiers: modifiers,

package/lib/module/atoms/z-stack/z-stack.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Box","clickable","testID","testIdModifier","useSxModifiers","useMemo","useHostGuard","jsx","_jsx","ALIGNMENT","bottom","center","top","ZStack","align","children","onPress","sx","sxModifiers","modifiers","contentAlignment"],"sourceRoot":"../../../../src","sources":["atoms/z-stack/z-stack.android.tsx"],"mappings":";;AAAA,SAAQA,GAAG,QAAO,0BAA0B;AAC5C,SAAQC,SAAS,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACtF,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,SAAS,GAAG;EAChBC,MAAM,EAAE,cAAc;EACtBC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE;AACP,CAAgD;AAEhD,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EAACC,KAAK,GAAG,QAAQ;EAAEC,QAAQ;EAAEC,OAAO;EAAEd,MAAM;EAAE,GAAGe;AAAe,CAAC,KAAK;EAC5GX,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMY,WAAW,GAAGd,cAAc,CAACa,EAAE,CAAC;EACtC,MAAME,SAAS,GAAGd,OAAO,CACvB,MAAM,CAAC,GAAGa,WAAW,EAAE,IAAIhB,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,IAAIc,OAAO,GAAG,CAACf,SAAS,CAACe,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC7G,CAACA,OAAO,EAAEE,WAAW,EAAEhB,MAAM,CAC/B,CAAC;EAED,oBACEM,IAAA,CAACR,GAAG;IAACoB,gBAAgB,EAAEX,SAAS,CAACK,KAAK,CAAE;IAACK,SAAS,EAAEA,SAAU;IAAAJ,QAAA,EAC3DA;EAAQ,CACN,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Box","useHostGuard","useStackModifiers","jsx","_jsx","ALIGNMENT","bottom","center","top","ZStack","align","children","onPress","testID","sx","modifiers","contentAlignment"],"sourceRoot":"../../../../src","sources":["atoms/z-stack/z-stack.android.tsx"],"mappings":";;AAAA,SAAQA,GAAG,QAAO,0BAA0B;AAC5C,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,iBAAiB,QAAO,8BAA2B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3D,MAAMC,SAAS,GAAG;EAChBC,MAAM,EAAE,cAAc;EACtBC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE;AACP,CAAgD;AAEhD,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EAACC,KAAK,GAAG,QAAQ;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAe,CAAC,KAAK;EAC5Gb,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMc,SAAS,GAAGb,iBAAiB,CAACY,EAAE,EAAEF,OAAO,EAAEC,MAAM,CAAC;EAExD,oBACET,IAAA,CAACJ,GAAG;IAACgB,gBAAgB,EAAEX,SAAS,CAACK,KAAK,CAAE;IAACK,SAAS,EAAEA,SAAU;IAAAJ,QAAA,EAC3DA;EAAQ,CACN,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/molecules/index.js

@@ -9,6 +9,7 @@ export * from "./list-item/index.js";
 export * from "./navigation-bar/index.js";
 export * from "./pager/index.js";
 export * from "./radio-group/index.js";
+export * from "./rn-list-item/index.js";
 export * from "./rn-tooltip/index.js";
 export * from "./scroll-edge-container/index.js";
 export * from "./search-bar/index.js";

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["molecules/index.ts"],"mappings":";;AAAA,cAAc,wBAAe;AAC7B,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,4BAAmB;AACjC,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,2BAAkB;AAChC,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,uBAAc;AAC5B,cAAc,kCAAyB;AACvC,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,oBAAW","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["molecules/index.ts"],"mappings":";;AAAA,cAAc,wBAAe;AAC7B,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,4BAAmB;AACjC,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,2BAAkB;AAChC,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,yBAAgB;AAC9B,cAAc,uBAAc;AAC5B,cAAc,kCAAyB;AACvC,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,oBAAW","ignoreList":[]}

package/lib/module/molecules/labeled-content/labeled-content.js

@@ -18,11 +18,13 @@ export const LabeledContent = ({
   icon,
   label,
   onPress,
+  px,
   testID,
   value
 }) => /*#__PURE__*/_jsxs(HStack, {
   align: "center",
   onPress: onPress,
+  px: px,
   py: "s8",
   spacing: "s12",
   testID: testID,

package/lib/module/molecules/labeled-content/labeled-content.js.map

@@ -1 +1 @@
-{"version":3,"names":["HStack","Icon","Spacer","Text","Glyph","jsx","_jsx","jsxs","_jsxs","TrailingValue","value","color","variant","children","LabeledContent","icon","label","onPress","testID","align","py","spacing","wide","name","size","undefined"],"sourceRoot":"../../../../src","sources":["molecules/labeled-content/labeled-content.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,KAAK,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjC,MAAMC,aAAa,GAAGA,CAAC;EAACC;AAAsB,CAAC,kBAC7CJ,IAAA,CAACH,IAAI;EAACQ,KAAK,EAAC,mBAAmB;EAACC,OAAO,EAAC,MAAM;EAAAC,QAAA,EAC3CH;AAAK,CACF,CACP;AAED,OAAO,MAAMI,cAAuC,GAAGA,CAAC;EACtDD,QAAQ;EACRE,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,MAAM;EACNR;AACmB,CAAC,kBACpBF,KAAA,CAACR,MAAM;EAACmB,KAAK,EAAC,QAAQ;EAACF,OAAO,EAAEA,OAAQ;EAACG,EAAE,EAAC,IAAI;EAACC,OAAO,EAAC,KAAK;EAACH,MAAM,EAAEA,MAAO;EAACI,IAAI;EAAAT,QAAA,GAChFE,IAAI,gBAAGT,IAAA,CAACL,IAAI;IAACU,KAAK,EAAC,mBAAmB;IAACY,IAAI,EAAER,IAAK;IAACS,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI,eACxElB,IAAA,CAACH,IAAI;IAACS,OAAO,EAAC,MAAM;IAAAC,QAAA,EAAEG;EAAK,CAAO,CAAC,eACnCV,IAAA,CAACJ,MAAM,IAAE,CAAC,EACTW,QAAQ,KAAKH,KAAK,KAAKe,SAAS,GAAG,IAAI,gBAAGnB,IAAA,CAACG,aAAa;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC,CAAC,EAC1EO,OAAO,gBAAGX,IAAA,CAACF,KAAK;IAACO,KAAK,EAAC,oBAAoB;IAACY,IAAI,EAAC,cAAc;IAACC,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI;AAAA,CAC/E,CACT","ignoreList":[]}
+{"version":3,"names":["HStack","Icon","Spacer","Text","Glyph","jsx","_jsx","jsxs","_jsxs","TrailingValue","value","color","variant","children","LabeledContent","icon","label","onPress","px","testID","align","py","spacing","wide","name","size","undefined"],"sourceRoot":"../../../../src","sources":["molecules/labeled-content/labeled-content.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,KAAK,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjC,MAAMC,aAAa,GAAGA,CAAC;EAACC;AAAsB,CAAC,kBAC7CJ,IAAA,CAACH,IAAI;EAACQ,KAAK,EAAC,mBAAmB;EAACC,OAAO,EAAC,MAAM;EAAAC,QAAA,EAC3CH;AAAK,CACF,CACP;AAED,OAAO,MAAMI,cAAuC,GAAGA,CAAC;EACtDD,QAAQ;EACRE,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,MAAM;EACNT;AACmB,CAAC,kBACpBF,KAAA,CAACR,MAAM;EAACoB,KAAK,EAAC,QAAQ;EAACH,OAAO,EAAEA,OAAQ;EAACC,EAAE,EAAEA,EAAG;EAACG,EAAE,EAAC,IAAI;EAACC,OAAO,EAAC,KAAK;EAACH,MAAM,EAAEA,MAAO;EAACI,IAAI;EAAAV,QAAA,GACxFE,IAAI,gBAAGT,IAAA,CAACL,IAAI;IAACU,KAAK,EAAC,mBAAmB;IAACa,IAAI,EAAET,IAAK;IAACU,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI,eACxEnB,IAAA,CAACH,IAAI;IAACS,OAAO,EAAC,MAAM;IAAAC,QAAA,EAAEG;EAAK,CAAO,CAAC,eACnCV,IAAA,CAACJ,MAAM,IAAE,CAAC,EACTW,QAAQ,KAAKH,KAAK,KAAKgB,SAAS,GAAG,IAAI,gBAAGpB,IAAA,CAACG,aAAa;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC,CAAC,EAC1EO,OAAO,gBAAGX,IAAA,CAACF,KAAK;IAACO,KAAK,EAAC,oBAAoB;IAACa,IAAI,EAAC,cAAc;IAACC,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI;AAAA,CAC/E,CACT","ignoreList":[]}

package/lib/module/molecules/list-item/list-item.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { Platform } from 'react-native';
 import { HStack } from "../../atoms/h-stack/index.js";
 import { Icon } from "../../atoms/icon/index.js";
 import { Spacer } from "../../atoms/spacer/index.js";
@@ -7,15 +8,24 @@ import { Text } from "../../atoms/text/index.js";
 import { VStack } from "../../atoms/v-stack/index.js";
 import { Glyph } from "../../glyph/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Compose measures a row's children in order, so a text column that fills the line leaves the chevron no room. With a
+ * weight it is measured last and takes only what is left; SwiftUI shares the line by itself, with a `Spacer`.
+ */
+const TEXT_FILLS_ROW = {
+  weight: 1
+};
 export const ListItem = ({
   icon,
   onPress,
+  px,
   subtitle,
   testID,
   title
 }) => /*#__PURE__*/_jsxs(HStack, {
   align: "center",
   onPress: onPress,
+  px: px,
   py: "s8",
   spacing: "s12",
   testID: testID,
@@ -25,6 +35,7 @@ export const ListItem = ({
     name: icon,
     size: "s20"
   }) : null, /*#__PURE__*/_jsxs(VStack, {
+    android: TEXT_FILLS_ROW,
     spacing: "s2",
     children: [/*#__PURE__*/_jsx(Text, {
       variant: "body",
@@ -34,7 +45,7 @@ export const ListItem = ({
       variant: "footnote",
       children: subtitle
     }) : null]
-  }), /*#__PURE__*/_jsx(Spacer, {}), onPress ? /*#__PURE__*/_jsx(Glyph, {
+  }), Platform.OS === 'ios' ? /*#__PURE__*/_jsx(Spacer, {}) : null, onPress ? /*#__PURE__*/_jsx(Glyph, {
     color: "content.quaternary",
     name: "chevronRight",
     size: "s16"

package/lib/module/molecules/list-item/list-item.js.map

@@ -1 +1 @@
-{"version":3,"names":["HStack","Icon","Spacer","Text","VStack","Glyph","jsx","_jsx","jsxs","_jsxs","ListItem","icon","onPress","subtitle","testID","title","align","py","spacing","wide","children","color","name","size","variant"],"sourceRoot":"../../../../src","sources":["molecules/list-item/list-item.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,KAAK,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjC,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACC,IAAI;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAoB,CAAC,kBACjGN,KAAA,CAACT,MAAM;EAACgB,KAAK,EAAC,QAAQ;EAACJ,OAAO,EAAEA,OAAQ;EAACK,EAAE,EAAC,IAAI;EAACC,OAAO,EAAC,KAAK;EAACJ,MAAM,EAAEA,MAAO;EAACK,IAAI;EAAAC,QAAA,GAChFT,IAAI,gBAAGJ,IAAA,CAACN,IAAI;IAACoB,KAAK,EAAC,mBAAmB;IAACC,IAAI,EAAEX,IAAK;IAACY,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI,eACxEd,KAAA,CAACL,MAAM;IAACc,OAAO,EAAC,IAAI;IAAAE,QAAA,gBAClBb,IAAA,CAACJ,IAAI;MAACqB,OAAO,EAAC,MAAM;MAAAJ,QAAA,EAAEL;IAAK,CAAO,CAAC,EAClCF,QAAQ,gBACPN,IAAA,CAACJ,IAAI;MAACkB,KAAK,EAAC,mBAAmB;MAACG,OAAO,EAAC,UAAU;MAAAJ,QAAA,EAC/CP;IAAQ,CACL,CAAC,GACL,IAAI;EAAA,CACF,CAAC,eACTN,IAAA,CAACL,MAAM,IAAE,CAAC,EACTU,OAAO,gBAAGL,IAAA,CAACF,KAAK;IAACgB,KAAK,EAAC,oBAAoB;IAACC,IAAI,EAAC,cAAc;IAACC,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI;AAAA,CAC/E,CACT","ignoreList":[]}
+{"version":3,"names":["Platform","HStack","Icon","Spacer","Text","VStack","Glyph","jsx","_jsx","jsxs","_jsxs","TEXT_FILLS_ROW","weight","ListItem","icon","onPress","px","subtitle","testID","title","align","py","spacing","wide","children","color","name","size","android","variant","OS"],"sourceRoot":"../../../../src","sources":["molecules/list-item/list-item.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,QAAO,cAAc;AAErC,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,KAAK,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjC;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAG;EAACC,MAAM,EAAE;AAAC,CAAC;AAElC,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACC,IAAI;EAAEC,OAAO;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAoB,CAAC,kBACrGT,KAAA,CAACT,MAAM;EAACmB,KAAK,EAAC,QAAQ;EAACL,OAAO,EAAEA,OAAQ;EAACC,EAAE,EAAEA,EAAG;EAACK,EAAE,EAAC,IAAI;EAACC,OAAO,EAAC,KAAK;EAACJ,MAAM,EAAEA,MAAO;EAACK,IAAI;EAAAC,QAAA,GACxFV,IAAI,gBAAGN,IAAA,CAACN,IAAI;IAACuB,KAAK,EAAC,mBAAmB;IAACC,IAAI,EAAEZ,IAAK;IAACa,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI,eACxEjB,KAAA,CAACL,MAAM;IAACuB,OAAO,EAAEjB,cAAe;IAACW,OAAO,EAAC,IAAI;IAAAE,QAAA,gBAC3ChB,IAAA,CAACJ,IAAI;MAACyB,OAAO,EAAC,MAAM;MAAAL,QAAA,EAAEL;IAAK,CAAO,CAAC,EAClCF,QAAQ,gBACPT,IAAA,CAACJ,IAAI;MAACqB,KAAK,EAAC,mBAAmB;MAACI,OAAO,EAAC,UAAU;MAAAL,QAAA,EAC/CP;IAAQ,CACL,CAAC,GACL,IAAI;EAAA,CACF,CAAC,EACRjB,QAAQ,CAAC8B,EAAE,KAAK,KAAK,gBAAGtB,IAAA,CAACL,MAAM,IAAE,CAAC,GAAG,IAAI,EACzCY,OAAO,gBAAGP,IAAA,CAACF,KAAK;IAACmB,KAAK,EAAC,oBAAoB;IAACC,IAAI,EAAC,cAAc;IAACC,IAAI,EAAC;EAAK,CAAE,CAAC,GAAG,IAAI;AAAA,CAC/E,CACT","ignoreList":[]}

package/lib/module/molecules/navigation-bar/navigation-bar.android.js

@@ -1,41 +1,71 @@
 "use strict";
 
-import { HStack } from "../../atoms/h-stack/index.js";
+import { iconResourceName } from '@hzblj/kara-native';
+import { TopAppBar } from '@hzblj/kara-native/jetpack-compose';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import { Island } from "../../atoms/island/index.js";
-import { Spacer } from "../../atoms/spacer/index.js";
-import { Text } from "../../atoms/text/index.js";
-import { GlyphButton } from "../../glyph/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Material's top bar shape — navigation icon, start-aligned title, action at the end — built from the atoms in its own
- * island. Compose's icon buttons take no accessibility identifier, so `backTestID`/`closeTestID` are iOS-only.
- */
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Material's small top app bar. */
+const BAR_HEIGHT = 64;
+const styles = StyleSheet.create({
+  bar: {
+    height: BAR_HEIGHT,
+    width: '100%'
+  }
+});
+const DEFAULT_LABELS = {
+  back: 'Back',
+  close: 'Close'
+};
+const toNativeItem = ({
+  onPress,
+  testID,
+  ...item
+}) => item.type === 'icon' ? {
+  iconName: iconResourceName(item.icon),
+  label: item.label,
+  onPress,
+  testID,
+  type: 'icon'
+} : {
+  label: item.label ?? DEFAULT_LABELS[item.type],
+  onPress,
+  testID,
+  type: item.type
+};
+
+/** Material's top app bar in its own host. `search` is iOS-only for now, and `separated` has no Material counterpart. */
 export const NavigationBar = ({
-  backLabel = 'Back',
-  closeLabel = 'Close',
-  onBack,
-  onClose,
+  inverted = false,
+  leadingItems,
   testID,
-  title
-}) => /*#__PURE__*/_jsx(Island, {
-  testID: testID,
-  children: /*#__PURE__*/_jsxs(HStack, {
-    align: "center",
-    px: "s4",
-    spacing: "s4",
-    wide: true,
-    children: [onBack ? /*#__PURE__*/_jsx(GlyphButton, {
-      accessibilityLabel: backLabel,
-      name: "back",
-      onPress: onBack
-    }) : null, title ? /*#__PURE__*/_jsx(Text, {
-      variant: "body",
-      children: title
-    }) : null, /*#__PURE__*/_jsx(Spacer, {}), onClose ? /*#__PURE__*/_jsx(GlyphButton, {
-      accessibilityLabel: closeLabel,
-      name: "close",
-      onPress: onClose
-    }) : null]
-  })
-});
+  title,
+  titleAlignment = 'center',
+  titleVisible = true,
+  trailingItems
+}) => {
+  const theme = useAppTheme();
+  const font = theme.typography.headline;
+  const color = theme.color(inverted ? 'content.on.bg' : 'content.primary');
+  const nativeLeadingItems = useMemo(() => leadingItems?.map(toNativeItem), [leadingItems]);
+  const nativeTrailingItems = useMemo(() => trailingItems?.map(toNativeItem), [trailingItems]);
+  return /*#__PURE__*/_jsx(Island, {
+    matchContents: false,
+    style: styles.bar,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(TopAppBar, {
+      fontFamily: font.fontFamily,
+      fontSize: font.fontSize,
+      itemColor: color,
+      leadingItems: nativeLeadingItems,
+      title: title,
+      titleAlignment: titleAlignment,
+      titleColor: color,
+      titleVisible: titleVisible,
+      trailingItems: nativeTrailingItems
+    })
+  });
+};
 //# sourceMappingURL=navigation-bar.android.js.map

package/lib/module/molecules/navigation-bar/navigation-bar.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["HStack","Island","Spacer","Text","GlyphButton","jsx","_jsx","jsxs","_jsxs","NavigationBar","backLabel","closeLabel","onBack","onClose","testID","title","children","align","px","spacing","wide","accessibilityLabel","name","onPress","variant"],"sourceRoot":"../../../../src","sources":["molecules/navigation-bar/navigation-bar.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,WAAW,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGvC;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAqC,GAAGA,CAAC;EACpDC,SAAS,GAAG,MAAM;EAClBC,UAAU,GAAG,OAAO;EACpBC,MAAM;EACNC,OAAO;EACPC,MAAM;EACNC;AACkB,CAAC,kBACnBT,IAAA,CAACL,MAAM;EAACa,MAAM,EAAEA,MAAO;EAAAE,QAAA,eACrBR,KAAA,CAACR,MAAM;IAACiB,KAAK,EAAC,QAAQ;IAACC,EAAE,EAAC,IAAI;IAACC,OAAO,EAAC,IAAI;IAACC,IAAI;IAAAJ,QAAA,GAC7CJ,MAAM,gBAAGN,IAAA,CAACF,WAAW;MAACiB,kBAAkB,EAAEX,SAAU;MAACY,IAAI,EAAC,MAAM;MAACC,OAAO,EAAEX;IAAO,CAAE,CAAC,GAAG,IAAI,EAC3FG,KAAK,gBAAGT,IAAA,CAACH,IAAI;MAACqB,OAAO,EAAC,MAAM;MAAAR,QAAA,EAAED;IAAK,CAAO,CAAC,GAAG,IAAI,eACnDT,IAAA,CAACJ,MAAM,IAAE,CAAC,EACTW,OAAO,gBAAGP,IAAA,CAACF,WAAW;MAACiB,kBAAkB,EAAEV,UAAW;MAACW,IAAI,EAAC,OAAO;MAACC,OAAO,EAAEV;IAAQ,CAAE,CAAC,GAAG,IAAI;EAAA,CAC1F;AAAC,CACH,CACT","ignoreList":[]}
+{"version":3,"names":["iconResourceName","TopAppBar","useAppTheme","useMemo","StyleSheet","Island","jsx","_jsx","BAR_HEIGHT","styles","create","bar","height","width","DEFAULT_LABELS","back","close","toNativeItem","onPress","testID","item","type","iconName","icon","label","NavigationBar","inverted","leadingItems","title","titleAlignment","titleVisible","trailingItems","theme","font","typography","headline","color","nativeLeadingItems","map","nativeTrailingItems","matchContents","style","children","fontFamily","fontSize","itemColor","titleColor"],"sourceRoot":"../../../../src","sources":["molecules/navigation-bar/navigation-bar.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,SAAS,QAA2B,oCAAoC;AAChF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,MAAM,QAAO,6BAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGzC;AACA,MAAMC,UAAU,GAAG,EAAE;AAErB,MAAMC,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;EAC/BC,GAAG,EAAE;IAACC,MAAM,EAAEJ,UAAU;IAAEK,KAAK,EAAE;EAAM;AACzC,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAG;EAACC,IAAI,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAO,CAAU;AAE9D,MAAMC,YAAY,GAAGA,CAAC;EAACC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAuB,CAAC,KACjEA,IAAI,CAACC,IAAI,KAAK,MAAM,GAChB;EAACC,QAAQ,EAAEtB,gBAAgB,CAACoB,IAAI,CAACG,IAAI,CAAC;EAAEC,KAAK,EAAEJ,IAAI,CAACI,KAAK;EAAEN,OAAO;EAAEC,MAAM;EAAEE,IAAI,EAAE;AAAM,CAAC,GACzF;EAACG,KAAK,EAAEJ,IAAI,CAACI,KAAK,IAAIV,cAAc,CAACM,IAAI,CAACC,IAAI,CAAC;EAAEH,OAAO;EAAEC,MAAM;EAAEE,IAAI,EAAED,IAAI,CAACC;AAAI,CAAC;;AAExF;AACA,OAAO,MAAMI,aAAqC,GAAGA,CAAC;EACpDC,QAAQ,GAAG,KAAK;EAChBC,YAAY;EACZR,MAAM;EACNS,KAAK;EACLC,cAAc,GAAG,QAAQ;EACzBC,YAAY,GAAG,IAAI;EACnBC;AACkB,CAAC,KAAK;EACxB,MAAMC,KAAK,GAAG9B,WAAW,CAAC,CAAC;EAC3B,MAAM+B,IAAI,GAAGD,KAAK,CAACE,UAAU,CAACC,QAAQ;EACtC,MAAMC,KAAK,GAAGJ,KAAK,CAACI,KAAK,CAACV,QAAQ,GAAG,eAAe,GAAG,iBAAiB,CAAC;EAEzE,MAAMW,kBAAkB,GAAGlC,OAAO,CAAC,MAAMwB,YAAY,EAAEW,GAAG,CAACrB,YAAY,CAAC,EAAE,CAACU,YAAY,CAAC,CAAC;EACzF,MAAMY,mBAAmB,GAAGpC,OAAO,CAAC,MAAM4B,aAAa,EAAEO,GAAG,CAACrB,YAAY,CAAC,EAAE,CAACc,aAAa,CAAC,CAAC;EAE5F,oBACExB,IAAA,CAACF,MAAM;IAACmC,aAAa,EAAE,KAAM;IAACC,KAAK,EAAEhC,MAAM,CAACE,GAAI;IAACQ,MAAM,EAAEA,MAAO;IAAAuB,QAAA,eAC9DnC,IAAA,CAACN,SAAS;MACR0C,UAAU,EAAEV,IAAI,CAACU,UAAW;MAC5BC,QAAQ,EAAEX,IAAI,CAACW,QAAS;MACxBC,SAAS,EAAET,KAAM;MACjBT,YAAY,EAAEU,kBAAmB;MACjCT,KAAK,EAAEA,KAAM;MACbC,cAAc,EAAEA,cAAe;MAC/BiB,UAAU,EAAEV,KAAM;MAClBN,YAAY,EAAEA,YAAa;MAC3BC,aAAa,EAAEQ;IAAoB,CACpC;EAAC,CACI,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/molecules/navigation-bar/navigation-bar.ios.js

@@ -1,33 +1,68 @@
 "use strict";
 
+import { iconResourceName } from '@hzblj/kara-native';
 import { NavigationBar as NativeNavigationBar } from '@hzblj/kara-native/swift-ui';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { useImperativeHandle, useMemo, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** UIKit's compact bar height. The bar centres itself vertically in whatever it is given. */
-const BAR_HEIGHT = 44;
+/** Fits iOS 26's 44 pt glass items with the bar's own margin; the bar centres itself vertically in it. */
+const BAR_HEIGHT = 56;
 const styles = StyleSheet.create({
   bar: {
     height: BAR_HEIGHT,
     width: '100%'
   }
 });
+const DEFAULT_LABELS = {
+  back: 'Back',
+  close: 'Close'
+};
+const toNativeItem = item => item.type === 'icon' ? {
+  ...item,
+  imageName: iconResourceName(item.icon),
+  type: 'icon'
+} : {
+  ...item,
+  label: item.label ?? DEFAULT_LABELS[item.type]
+};
+const ignoreDetachedView = () => undefined;
 export const NavigationBar = ({
-  backLabel = 'Back',
-  closeLabel = 'Close',
-  ...props
+  inverted = false,
+  leadingItems,
+  search,
+  testID,
+  title,
+  titleAlignment = 'center',
+  titleVisible = true,
+  trailingItems
 }) => {
   const theme = useAppTheme();
-  const title = theme.typography.body;
+  const barRef = useRef(null);
+  const font = theme.typography.headline;
+  const color = theme.color(inverted ? 'content.on.bg' : 'content.primary');
+  useImperativeHandle(search?.ref, () => ({
+    clear: () => barRef.current?.clearSearchText().catch(ignoreDetachedView)
+  }), []);
+  const nativeLeadingItems = useMemo(() => leadingItems?.map(toNativeItem), [leadingItems]);
+  const nativeTrailingItems = useMemo(() => trailingItems?.map(toNativeItem), [trailingItems]);
   return /*#__PURE__*/_jsx(NativeNavigationBar, {
-    ...props,
-    backLabel: backLabel,
-    closeLabel: closeLabel,
-    fontFamily: title.fontFamily,
-    fontSize: title.fontSize,
-    itemColor: theme.color('content.primary'),
+    fontFamily: font.fontFamily,
+    fontSize: font.fontSize,
+    itemColor: color,
+    leadingItems: nativeLeadingItems,
+    onSearchFocusChange: search?.onFocusChange,
+    onSearchTextChange: search?.onChangeText,
+    ref: barRef,
+    searchPlaceholder: search?.placeholder,
+    searchTestID: search?.testID,
     style: styles.bar,
-    titleColor: theme.color('content.primary')
+    testID: testID,
+    title: title,
+    titleAlignment: titleAlignment,
+    titleColor: color,
+    titleVisible: titleVisible,
+    trailingItems: nativeTrailingItems
   });
 };
 //# sourceMappingURL=navigation-bar.ios.js.map

package/lib/module/molecules/navigation-bar/navigation-bar.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["NavigationBar","NativeNavigationBar","useAppTheme","StyleSheet","jsx","_jsx","BAR_HEIGHT","styles","create","bar","height","width","backLabel","closeLabel","props","theme","title","typography","body","fontFamily","fontSize","itemColor","color","style","titleColor"],"sourceRoot":"../../../../src","sources":["molecules/navigation-bar/navigation-bar.ios.tsx"],"mappings":";;AAAA,SAAQA,aAAa,IAAIC,mBAAmB,QAAO,6BAA6B;AAChF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,UAAU,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGvC;AACA,MAAMC,UAAU,GAAG,EAAE;AAErB,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAM,CAAC;EAC/BC,GAAG,EAAE;IAACC,MAAM,EAAEJ,UAAU;IAAEK,KAAK,EAAE;EAAM;AACzC,CAAC,CAAC;AAEF,OAAO,MAAMX,aAAqC,GAAGA,CAAC;EACpDY,SAAS,GAAG,MAAM;EAClBC,UAAU,GAAG,OAAO;EACpB,GAAGC;AACe,CAAC,KAAK;EACxB,MAAMC,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,KAAK,GAAGD,KAAK,CAACE,UAAU,CAACC,IAAI;EAEnC,oBACEb,IAAA,CAACJ,mBAAmB;IAAA,GACda,KAAK;IACTF,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBM,UAAU,EAAEH,KAAK,CAACG,UAAW;IAC7BC,QAAQ,EAAEJ,KAAK,CAACI,QAAS;IACzBC,SAAS,EAAEN,KAAK,CAACO,KAAK,CAAC,iBAAiB,CAAE;IAC1CC,KAAK,EAAEhB,MAAM,CAACE,GAAI;IAClBe,UAAU,EAAET,KAAK,CAACO,KAAK,CAAC,iBAAiB;EAAE,CAC5C,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["iconResourceName","NavigationBar","NativeNavigationBar","useAppTheme","useImperativeHandle","useMemo","useRef","StyleSheet","jsx","_jsx","BAR_HEIGHT","styles","create","bar","height","width","DEFAULT_LABELS","back","close","toNativeItem","item","type","imageName","icon","label","ignoreDetachedView","undefined","inverted","leadingItems","search","testID","title","titleAlignment","titleVisible","trailingItems","theme","barRef","font","typography","headline","color","ref","clear","current","clearSearchText","catch","nativeLeadingItems","map","nativeTrailingItems","fontFamily","fontSize","itemColor","onSearchFocusChange","onFocusChange","onSearchTextChange","onChangeText","searchPlaceholder","placeholder","searchTestID","style","titleColor"],"sourceRoot":"../../../../src","sources":["molecules/navigation-bar/navigation-bar.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/rn-list-item/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./rn-list-item.js";
+export * from "./rn-list-item.types.js";
+//# sourceMappingURL=index.js.map

package/lib/module/molecules/rn-list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["molecules/rn-list-item/index.ts"],"mappings":";;AAAA,cAAc,mBAAgB;AAC9B,cAAc,yBAAsB","ignoreList":[]}

package/lib/module/molecules/rn-list-item/rn-list-item.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { Platform, Pressable } from 'react-native';
+import { Box } from "../../atoms/box/index.js";
+import { RnIcon } from "../../atoms/rn-icon/index.js";
+import { RnText } from "../../atoms/rn-text/index.js";
+import { RnGlyph } from "../../glyph/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RnListItem = ({
+  icon,
+  onPress,
+  px,
+  subtitle,
+  testID,
+  title
+}) => {
+  const theme = useAppTheme();
+  const pressedColor = theme.color('fill.tertiary');
+  const ripple = useMemo(() => ({
+    color: pressedColor
+  }), [pressedColor]);
+  const highlight = useMemo(() => Platform.OS === 'ios' ? ({
+    pressed
+  }) => pressed ? {
+    backgroundColor: pressedColor
+  } : null : undefined, [pressedColor]);
+  const row = /*#__PURE__*/_jsxs(Box, {
+    align: "center",
+    flexDirection: "row",
+    gap: "s12",
+    px: px,
+    py: "s12",
+    children: [icon ? /*#__PURE__*/_jsx(RnIcon, {
+      color: "content.secondary",
+      name: icon,
+      size: "s20"
+    }) : null, /*#__PURE__*/_jsxs(Box, {
+      flex: 1,
+      gap: "s2",
+      children: [/*#__PURE__*/_jsx(RnText, {
+        variant: "body",
+        children: title
+      }), subtitle ? /*#__PURE__*/_jsx(RnText, {
+        color: "content.secondary",
+        variant: "footnote",
+        children: subtitle
+      }) : null]
+    }), onPress ? /*#__PURE__*/_jsx(RnGlyph, {
+      color: "content.quaternary",
+      name: "chevronRight",
+      size: "s16"
+    }) : null]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(Box, {
+      testID: testID,
+      children: row
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    android_ripple: ripple,
+    onPress: onPress,
+    style: highlight,
+    testID: testID,
+    children: row
+  });
+};
+//# sourceMappingURL=rn-list-item.js.map

package/lib/module/molecules/rn-list-item/rn-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","useMemo","Platform","Pressable","Box","RnIcon","RnText","RnGlyph","jsx","_jsx","jsxs","_jsxs","RnListItem","icon","onPress","px","subtitle","testID","title","theme","pressedColor","color","ripple","highlight","OS","pressed","backgroundColor","undefined","row","align","flexDirection","gap","py","children","name","size","flex","variant","accessibilityRole","android_ripple","style"],"sourceRoot":"../../../../src","sources":["molecules/rn-list-item/rn-list-item.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,QAAQ,EAAEC,SAAS,QAAwC,cAAc;AAEjF,SAAQC,GAAG,QAAO,0BAAiB;AACnC,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,OAAO,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC,OAAO,MAAMC,UAA+B,GAAGA,CAAC;EAACC,IAAI;EAAEC,OAAO;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAsB,CAAC,KAAK;EAChH,MAAMC,KAAK,GAAGnB,WAAW,CAAC,CAAC;EAC3B,MAAMoB,YAAY,GAAGD,KAAK,CAACE,KAAK,CAAC,eAAe,CAAC;EAEjD,MAAMC,MAAM,GAAGrB,OAAO,CAAC,OAAO;IAACoB,KAAK,EAAED;EAAY,CAAC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EACrE,MAAMG,SAAS,GAAGtB,OAAO,CACvB,MACEC,QAAQ,CAACsB,EAAE,KAAK,KAAK,GACjB,CAAC;IAACC;EAAmC,CAAC,KAAMA,OAAO,GAAG;IAACC,eAAe,EAAEN;EAAY,CAAC,GAAG,IAAK,GAC7FO,SAAS,EACf,CAACP,YAAY,CACf,CAAC;EAED,MAAMQ,GAAG,gBACPjB,KAAA,CAACP,GAAG;IAACyB,KAAK,EAAC,QAAQ;IAACC,aAAa,EAAC,KAAK;IAACC,GAAG,EAAC,KAAK;IAAChB,EAAE,EAAEA,EAAG;IAACiB,EAAE,EAAC,KAAK;IAAAC,QAAA,GAC/DpB,IAAI,gBAAGJ,IAAA,CAACJ,MAAM;MAACgB,KAAK,EAAC,mBAAmB;MAACa,IAAI,EAAErB,IAAK;MAACsB,IAAI,EAAC;IAAK,CAAE,CAAC,GAAG,IAAI,eAC1ExB,KAAA,CAACP,GAAG;MAACgC,IAAI,EAAE,CAAE;MAACL,GAAG,EAAC,IAAI;MAAAE,QAAA,gBACpBxB,IAAA,CAACH,MAAM;QAAC+B,OAAO,EAAC,MAAM;QAAAJ,QAAA,EAAEf;MAAK,CAAS,CAAC,EACtCF,QAAQ,gBACPP,IAAA,CAACH,MAAM;QAACe,KAAK,EAAC,mBAAmB;QAACgB,OAAO,EAAC,UAAU;QAAAJ,QAAA,EACjDjB;MAAQ,CACH,CAAC,GACP,IAAI;IAAA,CACL,CAAC,EACLF,OAAO,gBAAGL,IAAA,CAACF,OAAO;MAACc,KAAK,EAAC,oBAAoB;MAACa,IAAI,EAAC,cAAc;MAACC,IAAI,EAAC;IAAK,CAAE,CAAC,GAAG,IAAI;EAAA,CACpF,CACN;EAED,IAAI,CAACrB,OAAO,EAAE;IACZ,oBAAOL,IAAA,CAACL,GAAG;MAACa,MAAM,EAAEA,MAAO;MAAAgB,QAAA,EAAEL;IAAG,CAAM,CAAC;EACzC;EAEA,oBACEnB,IAAA,CAACN,SAAS;IAACmC,iBAAiB,EAAC,QAAQ;IAACC,cAAc,EAAEjB,MAAO;IAACR,OAAO,EAAEA,OAAQ;IAAC0B,KAAK,EAAEjB,SAAU;IAACN,MAAM,EAAEA,MAAO;IAAAgB,QAAA,EAC9GL;EAAG,CACK,CAAC;AAEhB,CAAC","ignoreList":[]}

package/lib/module/molecules/rn-list-item/rn-list-item.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=rn-list-item.types.js.map

package/lib/module/molecules/rn-list-item/rn-list-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["molecules/rn-list-item/rn-list-item.types.ts"],"mappings":"","ignoreList":[]}