@hzblj/kara-router 0.1.0 → 0.2.0

package/lib/module/tabs/tabs.js

@@ -1,20 +1,13 @@
 "use strict";
 
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { MATERIAL_ICONS, SF_SYMBOLS } from '@hzblj/kara-components';
+import { iconResourceName } from '@hzblj/kara-native';
 import { NativeTabs } from 'expo-router/unstable-native-tabs';
 import { Children, isValidElement } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Icon,
-  Label,
-  VectorIcon
+  Label
 } = NativeTabs.Trigger;
-const sfSymbol = name => SF_SYMBOLS[name];
-const materialIcon = name => /*#__PURE__*/_jsx(VectorIcon, {
-  family: MaterialIcons,
-  name: MATERIAL_ICONS[name]
-});
 
 /**
  * Declares one tab and renders nothing itself — `Tabs` reads these props and emits the trigger.
@@ -22,6 +15,11 @@ const materialIcon = name => /*#__PURE__*/_jsx(VectorIcon, {
  * merely *renders* a trigger is invisible to it and the tab bar comes up empty.
  */
 const TabsScreen = () => null;
+
+/**
+ * The tab's icon, natively on both sides: the app icon's image set in the iOS asset catalog, its vector drawable on
+ * Android — one name, the one the config plugin gave both. No icon font, no bitmap rendered in JavaScript.
+ */
 const renderTrigger = ({
   hidden,
   icon,
@@ -29,23 +27,27 @@ const renderTrigger = ({
   selectedIcon,
   testID,
   title
-}) => /*#__PURE__*/_jsxs(NativeTabs.Trigger, {
-  hidden: hidden,
-  name: name,
-  testID: testID,
-  children: [/*#__PURE__*/_jsx(Icon, {
-    sf: selectedIcon ? {
-      default: sfSymbol(icon),
-      selected: sfSymbol(selectedIcon)
-    } : sfSymbol(icon),
-    src: selectedIcon ? {
-      default: materialIcon(icon),
-      selected: materialIcon(selectedIcon)
-    } : materialIcon(icon)
-  }), /*#__PURE__*/_jsx(Label, {
-    children: title
-  })]
-}, name);
+}) => {
+  const asset = iconResourceName(icon);
+  const selected = selectedIcon ? iconResourceName(selectedIcon) : undefined;
+  return /*#__PURE__*/_jsxs(NativeTabs.Trigger, {
+    hidden: hidden,
+    name: name,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      drawable: selected ? {
+        default: asset,
+        selected
+      } : asset,
+      xcasset: selected ? {
+        default: asset,
+        selected
+      } : asset
+    }), /*#__PURE__*/_jsx(Label, {
+      children: title
+    })]
+  }, name);
+};
 const TabsRoot = ({
   children,
   minimizeBehavior = 'never'

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

@@ -1 +1 @@
-{"version":3,"names":["MaterialIcons","MATERIAL_ICONS","SF_SYMBOLS","NativeTabs","Children","isValidElement","jsx","_jsx","jsxs","_jsxs","Icon","Label","VectorIcon","Trigger","sfSymbol","name","materialIcon","family","TabsScreen","renderTrigger","hidden","icon","selectedIcon","testID","title","children","sf","default","selected","src","TabsRoot","minimizeBehavior","map","child","type","props","Tabs","Object","assign","Screen"],"sourceRoot":"../../../src","sources":["tabs/tabs.tsx"],"mappings":";;AAAA,OAAOA,aAAa,MAAM,kCAAkC;AAC5D,SAAuBC,cAAc,EAAEC,UAAU,QAAO,wBAAwB;AAChF,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,KAAK;EAAEC;AAAU,CAAC,GAAGT,UAAU,CAACU,OAAO;AAEpD,MAAMC,QAAQ,GAAIC,IAAc,IAAKb,UAAU,CAACa,IAAI,CAAa;AAEjE,MAAMC,YAAY,GAAID,IAAc,iBAAKR,IAAA,CAACK,UAAU;EAACK,MAAM,EAAEjB,aAAc;EAACe,IAAI,EAAEd,cAAc,CAACc,IAAI;AAAE,CAAE,CAAC;;AAE1G;AACA;AACA;AACA;AACA;AACA,MAAMG,UAAmC,GAAGA,CAAA,KAAM,IAAI;AAEtD,MAAMC,aAAa,GAAGA,CAAC;EAACC,MAAM;EAAEC,IAAI;EAAEN,IAAI;EAAEO,YAAY;EAAEC,MAAM;EAAEC;AAAsB,CAAC,kBACvFf,KAAA,CAACN,UAAU,CAACU,OAAO;EAACO,MAAM,EAAEA,MAAO;EAAYL,IAAI,EAAEA,IAAK;EAACQ,MAAM,EAAEA,MAAO;EAAAE,QAAA,gBACxElB,IAAA,CAACG,IAAI;IACHgB,EAAE,EAAEJ,YAAY,GAAG;MAACK,OAAO,EAAEb,QAAQ,CAACO,IAAI,CAAC;MAAEO,QAAQ,EAAEd,QAAQ,CAACQ,YAAY;IAAC,CAAC,GAAGR,QAAQ,CAACO,IAAI,CAAE;IAChGQ,GAAG,EAAEP,YAAY,GAAG;MAACK,OAAO,EAAEX,YAAY,CAACK,IAAI,CAAC;MAAEO,QAAQ,EAAEZ,YAAY,CAACM,YAAY;IAAC,CAAC,GAAGN,YAAY,CAACK,IAAI;EAAE,CAC9G,CAAC,eACFd,IAAA,CAACI,KAAK;IAAAc,QAAA,EAAED;EAAK,CAAQ,CAAC;AAAA,GALiBT,IAMrB,CACrB;AAED,MAAMe,QAAQ,GAAGA,CAAC;EAACL,QAAQ;EAAEM,gBAAgB,GAAG;AAAkB,CAAC,kBACjExB,IAAA,CAACJ,UAAU;EAAC4B,gBAAgB,EAAEA,gBAAiB;EAAAN,QAAA,EAC5CrB,QAAQ,CAAC4B,GAAG,CAACP,QAAQ,EAAEQ,KAAK,IAC3B,aAAA5B,cAAc,CAAkB4B,KAAK,CAAC,IAAIA,KAAK,CAACC,IAAI,KAAKhB,UAAU,GAAGC,aAAa,CAACc,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,EAAErB;AAAU,CAAC,CAAC","ignoreList":[]}
+{"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":[]}

package/lib/typescript/tabs/tabs.types.d.ts

@@ -7,9 +7,10 @@ export type TabsScreenProps = {
      * at runtime remounts the navigator, so pass a build constant.
      */
     hidden?: boolean;
+    /** One of the app's icons — the asset-catalog image on iOS, the vector drawable on Android. */
     icon: IconName;
     name: string;
-    /** Swapped in while the tab is active — the filled/solid counterpart of `icon` on iOS. */
+    /** Swapped in while the tab is active — the filled counterpart of `icon`, say. */
     selectedIcon?: IconName;
     testID?: string;
     title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-router",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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,19 +59,17 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-components": "^0.1.0",
-    "@hzblj/kara-theme": "^0.1.0",
-    "sf-symbols-typescript": "^2.2.0"
+    "@hzblj/kara-components": "workspace:^",
+    "@hzblj/kara-native": "workspace:^",
+    "@hzblj/kara-theme": "workspace:^"
   },
   "peerDependencies": {
-    "@expo/vector-icons": "*",
     "expo-router": "*",
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
     "@expo/ui": "~57.0.18",
-    "@expo/vector-icons": "^15.1.1",
     "@storybook/react-native": "^10.6.0",
     "@types/react": "~19.2.18",
     "expo": "~57.0.22",
@@ -85,4 +83,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/tabs/tabs.tsx

@@ -1,15 +1,10 @@
-import MaterialIcons from '@expo/vector-icons/MaterialIcons'
-import {type IconName, MATERIAL_ICONS, SF_SYMBOLS} from '@hzblj/kara-components'
+import {iconResourceName} from '@hzblj/kara-native'
 import {NativeTabs} from 'expo-router/unstable-native-tabs'
 import {Children, isValidElement} from 'react'
-import type {SFSymbol} from 'sf-symbols-typescript'
-import type {TabsComponent, TabsProps, TabsScreenProps} from './tabs.types'
-
-const {Icon, Label, VectorIcon} = NativeTabs.Trigger
 
-const sfSymbol = (name: IconName) => SF_SYMBOLS[name] as SFSymbol
+import type {TabsComponent, TabsProps, TabsScreenProps} from './tabs.types'
 
-const materialIcon = (name: IconName) => <VectorIcon family={MaterialIcons} name={MATERIAL_ICONS[name]} />
+const {Icon, Label} = NativeTabs.Trigger
 
 /**
  * Declares one tab and renders nothing itself — `Tabs` reads these props and emits the trigger.
@@ -18,15 +13,24 @@ const materialIcon = (name: IconName) => <VectorIcon family={MaterialIcons} name
  */
 const TabsScreen: TabsComponent['Screen'] = () => null
 
-const renderTrigger = ({hidden, icon, name, selectedIcon, testID, title}: TabsScreenProps) => (
-  <NativeTabs.Trigger hidden={hidden} key={name} name={name} testID={testID}>
-    <Icon
-      sf={selectedIcon ? {default: sfSymbol(icon), selected: sfSymbol(selectedIcon)} : sfSymbol(icon)}
-      src={selectedIcon ? {default: materialIcon(icon), selected: materialIcon(selectedIcon)} : materialIcon(icon)}
-    />
-    <Label>{title}</Label>
-  </NativeTabs.Trigger>
-)
+/**
+ * The tab's icon, natively on both sides: the app icon's image set in the iOS asset catalog, its vector drawable on
+ * Android — one name, the one the config plugin gave both. No icon font, no bitmap rendered in JavaScript.
+ */
+const renderTrigger = ({hidden, icon, name, selectedIcon, testID, title}: TabsScreenProps) => {
+  const asset = iconResourceName(icon)
+  const selected = selectedIcon ? iconResourceName(selectedIcon) : undefined
+
+  return (
+    <NativeTabs.Trigger hidden={hidden} key={name} name={name} testID={testID}>
+      <Icon
+        drawable={selected ? {default: asset, selected} : asset}
+        xcasset={selected ? {default: asset, selected} : asset}
+      />
+      <Label>{title}</Label>
+    </NativeTabs.Trigger>
+  )
+}
 
 const TabsRoot = ({children, minimizeBehavior = 'never'}: TabsProps) => (
   <NativeTabs minimizeBehavior={minimizeBehavior}>

package/src/tabs/tabs.types.ts

@@ -8,9 +8,10 @@ export type TabsScreenProps = {
    * at runtime remounts the navigator, so pass a build constant.
    */
   hidden?: boolean
+  /** One of the app's icons — the asset-catalog image on iOS, the vector drawable on Android. */
   icon: IconName
   name: string
-  /** Swapped in while the tab is active — the filled/solid counterpart of `icon` on iOS. */
+  /** Swapped in while the tab is active — the filled counterpart of `icon`, say. */
   selectedIcon?: IconName
   testID?: string
   title: string

package/CHANGELOG.md

@@ -1,13 +0,0 @@
-# @hzblj/kara-router
-
-## 0.1.0
-
-### Minor Changes
-
-- [`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1) Thanks [@hzblj](https://github.com/hzblj)! - First release of the kara-ui design system: theme and tokens, the `sx` engine, atoms, molecules, organisms and `Screen`, native tabs (`@hzblj/kara-ui/router`), the KaraUI native module (Liquid Glass, scroll edge effect, native countdown, context menu with preview, rich tooltip, FAB menu), and `KaraProvider` with theme overrides — colours, the app's own fonts, the Material seed, and Material You dynamic colour on Android. Text uses the platform's face by default. Install `@hzblj/kara-ui`; the scoped packages are its building blocks.
-
-### Patch Changes
-
-- Updated dependencies [[`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1)]:
-  - @hzblj/kara-theme@0.1.0
-  - @hzblj/kara-components@0.1.0