@hzblj/kara-router 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @hzblj/kara-router
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`d14bdd3`](https://github.com/hzblj/kara-ui/commit/d14bdd37bede9fef80f4d3af4621ea5d60b2b16b)]:
+  - @hzblj/kara-native@0.4.1
+  - @hzblj/kara-theme@0.4.1
+  - @hzblj/kara-components@0.4.1
+
+## 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 [[`6e7903a`](https://github.com/hzblj/kara-ui/commit/6e7903afa3d3442e04a48a6e24399f9f03559a03)]:
+  - @hzblj/kara-components@0.4.0
+  - @hzblj/kara-theme@0.4.0
+  - @hzblj/kara-native@0.4.0
+
 ## 0.3.0
 
 ### Patch Changes

package/lib/module/tabs/tabs.js

@@ -1,8 +1,10 @@
 "use strict";
 
 import { iconResourceName } from '@hzblj/kara-native';
+import { useAppTheme } from '@hzblj/kara-theme';
 import { NativeTabs } from 'expo-router/unstable-native-tabs';
-import { Children, isValidElement } from 'react';
+import { Children, isValidElement, useMemo } from 'react';
+import { Platform } from 'react-native';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Icon,
@@ -48,13 +50,58 @@ const renderTrigger = ({
     })]
   }, name);
 };
+
+/**
+ * The bar in the theme's colours. iOS keeps the system's glass bar and only takes the accent for the selected item;
+ * Android's Material bar would otherwise colour itself from the wallpaper's dynamic scheme, whatever the theme says —
+ * so the container, the active indicator, icons, labels and ripple are all set from tokens.
+ */
+const useTabBarColors = () => {
+  const theme = useAppTheme();
+  return useMemo(() => {
+    const fontFamily = theme.typography.labelMedium.fontFamily;
+    const tintColor = theme.color('content.accent');
+    if (Platform.OS !== 'android') {
+      return {
+        labelStyle: {
+          fontFamily
+        },
+        tintColor
+      };
+    }
+    return {
+      backgroundColor: theme.color('surface.primary'),
+      iconColor: {
+        default: theme.color('content.secondary'),
+        selected: tintColor
+      },
+      indicatorColor: theme.color('fill.accent.base'),
+      labelStyle: {
+        default: {
+          color: theme.color('content.secondary'),
+          fontFamily
+        },
+        selected: {
+          color: theme.color('content.primary'),
+          fontFamily
+        }
+      },
+      rippleColor: theme.color('fill.accent.base'),
+      tintColor
+    };
+  }, [theme]);
+};
 const TabsRoot = ({
   children,
   minimizeBehavior = 'never'
-}) => /*#__PURE__*/_jsx(NativeTabs, {
-  minimizeBehavior: minimizeBehavior,
-  children: Children.map(children, child => /*#__PURE__*/isValidElement(child) && child.type === TabsScreen ? renderTrigger(child.props) : child)
-});
+}) => {
+  const colors = useTabBarColors();
+  return /*#__PURE__*/_jsx(NativeTabs, {
+    minimizeBehavior: minimizeBehavior,
+    ...colors,
+    children: Children.map(children, child => /*#__PURE__*/isValidElement(child) && child.type === TabsScreen ? renderTrigger(child.props) : child)
+  });
+};
 
 /**
  * Native bottom tabs — a SwiftUI `TabView` on iOS and a Material navigation bar on Android, both

package/lib/module/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconResourceName","NativeTabs","Children","isValidElement","jsx","_jsx","jsxs","_jsxs","Icon","Label","Trigger","TabsScreen","renderTrigger","hidden","icon","name","selectedIcon","testID","title","asset","selected","undefined","children","drawable","default","xcasset","TabsRoot","minimizeBehavior","map","child","type","props","Tabs","Object","assign","Screen"],"sourceRoot":"../../../src","sources":["tabs/tabs.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,UAAU,QAAO,kCAAkC;AAC3D,SAAQC,QAAQ,EAAEC,cAAc,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI9C,MAAM;EAACC,IAAI;EAAEC;AAAK,CAAC,GAAGR,UAAU,CAACS,OAAO;;AAExC;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAmC,GAAGA,CAAA,KAAM,IAAI;;AAEtD;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGA,CAAC;EAACC,MAAM;EAAEC,IAAI;EAAEC,IAAI;EAAEC,YAAY;EAAEC,MAAM;EAAEC;AAAsB,CAAC,KAAK;EAC5F,MAAMC,KAAK,GAAGnB,gBAAgB,CAACc,IAAI,CAAC;EACpC,MAAMM,QAAQ,GAAGJ,YAAY,GAAGhB,gBAAgB,CAACgB,YAAY,CAAC,GAAGK,SAAS;EAE1E,oBACEd,KAAA,CAACN,UAAU,CAACS,OAAO;IAACG,MAAM,EAAEA,MAAO;IAAYE,IAAI,EAAEA,IAAK;IAACE,MAAM,EAAEA,MAAO;IAAAK,QAAA,gBACxEjB,IAAA,CAACG,IAAI;MACHe,QAAQ,EAAEH,QAAQ,GAAG;QAACI,OAAO,EAAEL,KAAK;QAAEC;MAAQ,CAAC,GAAGD,KAAM;MACxDM,OAAO,EAAEL,QAAQ,GAAG;QAACI,OAAO,EAAEL,KAAK;QAAEC;MAAQ,CAAC,GAAGD;IAAM,CACxD,CAAC,eACFd,IAAA,CAACI,KAAK;MAAAa,QAAA,EAAEJ;IAAK,CAAQ,CAAC;EAAA,GALiBH,IAMrB,CAAC;AAEzB,CAAC;AAED,MAAMW,QAAQ,GAAGA,CAAC;EAACJ,QAAQ;EAAEK,gBAAgB,GAAG;AAAkB,CAAC,kBACjEtB,IAAA,CAACJ,UAAU;EAAC0B,gBAAgB,EAAEA,gBAAiB;EAAAL,QAAA,EAC5CpB,QAAQ,CAAC0B,GAAG,CAACN,QAAQ,EAAEO,KAAK,IAC3B,aAAA1B,cAAc,CAAkB0B,KAAK,CAAC,IAAIA,KAAK,CAACC,IAAI,KAAKnB,UAAU,GAAGC,aAAa,CAACiB,KAAK,CAACE,KAAK,CAAC,GAAGF,KACrG;AAAC,CACS,CACb;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,IAAmB,GAAGC,MAAM,CAACC,MAAM,CAACR,QAAQ,EAAE;EAACS,MAAM,EAAExB;AAAU,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["iconResourceName","useAppTheme","NativeTabs","Children","isValidElement","useMemo","Platform","jsx","_jsx","jsxs","_jsxs","Icon","Label","Trigger","TabsScreen","renderTrigger","hidden","icon","name","selectedIcon","testID","title","asset","selected","undefined","children","drawable","default","xcasset","useTabBarColors","theme","fontFamily","typography","labelMedium","tintColor","color","OS","labelStyle","backgroundColor","iconColor","indicatorColor","rippleColor","TabsRoot","minimizeBehavior","colors","map","child","type","props","Tabs","Object","assign","Screen"],"sourceRoot":"../../../src","sources":["tabs/tabs.tsx"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-router",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Expo Router pieces of @hzblj/kara-ui: native tabs and a navigation theme mapped from the active kara theme.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -59,9 +59,9 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-components": "^0.3.0",
-    "@hzblj/kara-native": "^0.3.0",
-    "@hzblj/kara-theme": "^0.3.0"
+    "@hzblj/kara-components": "^0.4.1",
+    "@hzblj/kara-native": "^0.4.1",
+    "@hzblj/kara-theme": "^0.4.1"
   },
   "peerDependencies": {
     "expo-router": "*",

package/src/tabs/tabs.tsx

@@ -1,6 +1,8 @@
 import {iconResourceName} from '@hzblj/kara-native'
+import {useAppTheme} from '@hzblj/kara-theme'
 import {NativeTabs} from 'expo-router/unstable-native-tabs'
-import {Children, isValidElement} from 'react'
+import {Children, isValidElement, useMemo} from 'react'
+import {Platform} from 'react-native'
 
 import type {TabsComponent, TabsProps, TabsScreenProps} from './tabs.types'
 
@@ -32,13 +34,47 @@ const renderTrigger = ({hidden, icon, name, selectedIcon, testID, title}: TabsSc
   )
 }
 
-const TabsRoot = ({children, minimizeBehavior = 'never'}: TabsProps) => (
-  <NativeTabs minimizeBehavior={minimizeBehavior}>
-    {Children.map(children, child =>
-      isValidElement<TabsScreenProps>(child) && child.type === TabsScreen ? renderTrigger(child.props) : child
-    )}
-  </NativeTabs>
-)
+/**
+ * The bar in the theme's colours. iOS keeps the system's glass bar and only takes the accent for the selected item;
+ * Android's Material bar would otherwise colour itself from the wallpaper's dynamic scheme, whatever the theme says —
+ * so the container, the active indicator, icons, labels and ripple are all set from tokens.
+ */
+const useTabBarColors = () => {
+  const theme = useAppTheme()
+
+  return useMemo(() => {
+    const fontFamily = theme.typography.labelMedium.fontFamily
+    const tintColor = theme.color('content.accent')
+
+    if (Platform.OS !== 'android') {
+      return {labelStyle: {fontFamily}, tintColor}
+    }
+
+    return {
+      backgroundColor: theme.color('surface.primary'),
+      iconColor: {default: theme.color('content.secondary'), selected: tintColor},
+      indicatorColor: theme.color('fill.accent.base'),
+      labelStyle: {
+        default: {color: theme.color('content.secondary'), fontFamily},
+        selected: {color: theme.color('content.primary'), fontFamily},
+      },
+      rippleColor: theme.color('fill.accent.base'),
+      tintColor,
+    }
+  }, [theme])
+}
+
+const TabsRoot = ({children, minimizeBehavior = 'never'}: TabsProps) => {
+  const colors = useTabBarColors()
+
+  return (
+    <NativeTabs minimizeBehavior={minimizeBehavior} {...colors}>
+      {Children.map(children, child =>
+        isValidElement<TabsScreenProps>(child) && child.type === TabsScreen ? renderTrigger(child.props) : child
+      )}
+    </NativeTabs>
+  )
+}
 
 /**
  * Native bottom tabs — a SwiftUI `TabView` on iOS and a Material navigation bar on Android, both