@hzblj/kara-components 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hzblj/kara-components
 
+## 0.14.1
+
+### Patch Changes
+
+- [#40](https://github.com/hzblj/kara-ui/pull/40) [`7c06e82`](https://github.com/hzblj/kara-ui/commit/7c06e82e6380bd52388237c9fa2b49455f971aee) Thanks [@hzblj](https://github.com/hzblj)! - `SegmentedControl`, `ActivityIndicator` and `DatePicker` work inside a `Screen` or `Island`, next to other native views, the way `Picker` now does. Each is made to drop into React Native layout on its own, so it brought a host of its own or was a plain React Native view, and inside an island that broke the island. On Android a `SegmentedControl` left the views beside it no width (a multiline `TextField` vanished and the island ran past the screen), an `ActivityIndicator` emptied the island, and a `DatePicker` field did not show. On iOS the segmented control swelled and squashed the field above it, the spinner drifted off its row, and the date pill came loose from its label. Inside a host each now renders into that host; on its own nothing changes.
+
+- [#40](https://github.com/hzblj/kara-ui/pull/40) [`7c06e82`](https://github.com/hzblj/kara-ui/commit/7c06e82e6380bd52388237c9fa2b49455f971aee) Thanks [@hzblj](https://github.com/hzblj)! - `Picker` works inside a `Screen` or `Island`, next to other native views. It brought a host of its own even there, and a host nested in another one broke the island around it: on Android the nested host took the island's whole width, so the views beside the picker disappeared (a multiline `TextField` was measured a letter wide and pushed the island far past the screen), and on iOS the wheel got no height and spilled over them. Inside a host the picker now renders into that host; on its own it still brings one.
+
+- Updated dependencies []:
+  - @hzblj/kara-theme@0.14.1
+  - @hzblj/kara-sx@0.14.1
+  - @hzblj/kara-native@0.14.1
+
 ## 0.14.0
 
 ### Minor Changes

package/lib/module/atoms/activity-indicator/activity-indicator.android.js

@@ -1,11 +1,12 @@
 "use strict";
 
 import { Host, LoadingIndicator } from '@expo/ui/jetpack-compose';
-import { fillMaxSize, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { fillMaxSize, size as sizeModifier, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { useAccessibilityModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Material's 48dp for a screen; half of it in a row, about where React Native's small spinner sat. */
 const styles = StyleSheet.create({
@@ -21,7 +22,8 @@ const styles = StyleSheet.create({
 
 /**
  * Material 3's expressive `LoadingIndicator` in a host of its own, sized here rather than measured, so it renders
- * anywhere and takes its place in the first frame.
+ * anywhere and takes its place in the first frame. Inside a `Screen` or `Island` it renders into that host instead (see
+ * `useInsideHost`), the same size.
  */
 export const ActivityIndicator = ({
   accessibilityLabel,
@@ -30,18 +32,23 @@ export const ActivityIndicator = ({
   testID
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
   const accessibilityModifiers = useAccessibilityModifiers({
     accessibilityLabel
   });
-  const modifiers = useMemo(() => [fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, testID]);
+  const modifiers = useMemo(() => [insideHost ? sizeModifier(styles[size].width, styles[size].height) : fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, insideHost, size, testID]);
+  const indicator = /*#__PURE__*/_jsx(LoadingIndicator, {
+    color: theme.color(color),
+    modifiers: modifiers
+  });
+  if (insideHost) {
+    return indicator;
+  }
   return /*#__PURE__*/_jsx(Host, {
     colorScheme: theme.dark ? 'dark' : 'light',
     seedColor: theme.materialSeed,
     style: styles[size],
-    children: /*#__PURE__*/_jsx(LoadingIndicator, {
-      color: theme.color(color),
-      modifiers: modifiers
-    })
+    children: indicator
   });
 };
 //# sourceMappingURL=activity-indicator.android.js.map

package/lib/module/atoms/activity-indicator/activity-indicator.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","LoadingIndicator","fillMaxSize","testID","testIdModifier","useAccessibilityModifiers","useAppTheme","useMemo","StyleSheet","jsx","_jsx","styles","create","large","height","width","small","ActivityIndicator","accessibilityLabel","color","size","theme","accessibilityModifiers","modifiers","colorScheme","dark","seedColor","materialSeed","style","children"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,gBAAgB,QAAO,0BAA0B;AAC/D,SAAQC,WAAW,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACxF,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIvC;AACA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAM,CAAC;EAC/BC,KAAK,EAAE;IAACC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EAC9BC,KAAK,EAAE;IAACF,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE;AAC/B,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA,OAAO,MAAME,iBAA6C,GAAGA,CAAC;EAC5DC,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdjB;AACsB,CAAC,KAAK;EAC5B,MAAMkB,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,sBAAsB,GAAGjB,yBAAyB,CAAC;IAACa;EAAkB,CAAC,CAAC;EAC9E,MAAMK,SAAS,GAAGhB,OAAO,CACvB,MAAM,CAACL,WAAW,CAAC,CAAC,EAAE,IAAIC,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAGmB,sBAAsB,CAAC,EAC7F,CAACA,sBAAsB,EAAEnB,MAAM,CACjC,CAAC;EAED,oBACEO,IAAA,CAACV,IAAI;IAACwB,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,SAAS,EAAEL,KAAK,CAACM,YAAa;IAACC,KAAK,EAAEjB,MAAM,CAACS,IAAI,CAAE;IAAAS,QAAA,eACnGnB,IAAA,CAACT,gBAAgB;MAACkB,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACA,KAAK,CAAE;MAACI,SAAS,EAAEA;IAAU,CAAE;EAAC,CACjE,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["Host","LoadingIndicator","fillMaxSize","size","sizeModifier","testID","testIdModifier","useAccessibilityModifiers","useAppTheme","useMemo","StyleSheet","useInsideHost","jsx","_jsx","styles","create","large","height","width","small","ActivityIndicator","accessibilityLabel","color","theme","insideHost","accessibilityModifiers","modifiers","indicator","colorScheme","dark","seedColor","materialSeed","style","children"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,gBAAgB,QAAO,0BAA0B;AAC/D,SAAQC,WAAW,EAAEC,IAAI,IAAIC,YAAY,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC9G,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAEvC,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD;AACA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAM,CAAC;EAC/BC,KAAK,EAAE;IAACC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EAC9BC,KAAK,EAAE;IAACF,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE;AAC/B,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,iBAA6C,GAAGA,CAAC;EAC5DC,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BnB,IAAI,GAAG,OAAO;EACdE;AACsB,CAAC,KAAK;EAC5B,MAAMkB,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,UAAU,GAAGb,aAAa,CAAC,CAAC;EAClC,MAAMc,sBAAsB,GAAGlB,yBAAyB,CAAC;IAACc;EAAkB,CAAC,CAAC;EAC9E,MAAMK,SAAS,GAAGjB,OAAO,CACvB,MAAM,CACJe,UAAU,GAAGpB,YAAY,CAACU,MAAM,CAACX,IAAI,CAAC,CAACe,KAAK,EAAEJ,MAAM,CAACX,IAAI,CAAC,CAACc,MAAM,CAAC,GAAGf,WAAW,CAAC,CAAC,EAClF,IAAIG,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAC3C,GAAGoB,sBAAsB,CAC1B,EACD,CAACA,sBAAsB,EAAED,UAAU,EAAErB,IAAI,EAAEE,MAAM,CACnD,CAAC;EAED,MAAMsB,SAAS,gBAAGd,IAAA,CAACZ,gBAAgB;IAACqB,KAAK,EAAEC,KAAK,CAACD,KAAK,CAACA,KAAK,CAAE;IAACI,SAAS,EAAEA;EAAU,CAAE,CAAC;EAEvF,IAAIF,UAAU,EAAE;IACd,OAAOG,SAAS;EAClB;EAEA,oBACEd,IAAA,CAACb,IAAI;IAAC4B,WAAW,EAAEL,KAAK,CAACM,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,SAAS,EAAEP,KAAK,CAACQ,YAAa;IAACC,KAAK,EAAElB,MAAM,CAACX,IAAI,CAAE;IAAA8B,QAAA,EAClGN;EAAS,CACN,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/atoms/activity-indicator/activity-indicator.ios.js

@@ -1,9 +1,14 @@
 "use strict";
 
+import { RNHostView } from '@expo/ui/swift-ui';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { ActivityIndicator as RNActivityIndicator } from 'react-native';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-/** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
+/**
+ * React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. Inside a `Screen` or `Island` it is
+ * carried into that host by `RNHostView`, sized to the spinner (see `useInsideHost`).
+ */
 export const ActivityIndicator = ({
   accessibilityLabel,
   color = 'fill.accent.primary',
@@ -11,11 +16,16 @@ export const ActivityIndicator = ({
   testID
 }) => {
   const theme = useAppTheme();
-  return /*#__PURE__*/_jsx(RNActivityIndicator, {
+  const insideHost = useInsideHost();
+  const spinner = /*#__PURE__*/_jsx(RNActivityIndicator, {
     accessibilityLabel: accessibilityLabel,
     color: theme.color(color),
     size: size,
     testID: testID
   });
+  return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
+    matchContents: true,
+    children: spinner
+  }) : spinner;
 };
 //# sourceMappingURL=activity-indicator.ios.js.map

package/lib/module/atoms/activity-indicator/activity-indicator.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["useAppTheme","ActivityIndicator","RNActivityIndicator","jsx","_jsx","accessibilityLabel","color","size","testID","theme"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.ios.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,iBAAiB,IAAIC,mBAAmB,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIrE;AACA,OAAO,MAAMH,iBAA6C,GAAGA,CAAC;EAC5DI,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,oBACEI,IAAA,CAACF,mBAAmB;IAClBG,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAC1BC,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["RNHostView","useAppTheme","ActivityIndicator","RNActivityIndicator","useInsideHost","jsx","_jsx","accessibilityLabel","color","size","testID","theme","insideHost","spinner","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.ios.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,mBAAmB;AAC5C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,iBAAiB,IAAIC,mBAAmB,QAAO,cAAc;AAErE,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD;AACA;AACA;AACA;AACA,OAAO,MAAMJ,iBAA6C,GAAGA,CAAC;EAC5DK,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,UAAU,GAAGR,aAAa,CAAC,CAAC;EAElC,MAAMS,OAAO,gBACXP,IAAA,CAACH,mBAAmB;IAClBI,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAC1BC,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,OAAOE,UAAU,gBAAGN,IAAA,CAACN,UAAU;IAACc,aAAa;IAAAC,QAAA,EAAEF;EAAO,CAAa,CAAC,GAAGA,OAAO;AAChF,CAAC","ignoreList":[]}

package/lib/module/atoms/date-picker/date-picker.android.js

@@ -1,8 +1,11 @@
 "use strict";
 
 import { DateTimePicker } from '@expo/ui/community/datetime-picker';
+import { RNHostView } from '@expo/ui/jetpack-compose';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useState } from 'react';
+import { useInsideHost } from "../../host-context.js";
+import { Box } from "../box/index.js";
 import { Pressable } from "../pressable/index.js";
 import { RnText } from "../rn-text/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,6 +30,8 @@ const formatted = (value, mode) => {
 /**
  * The value as a field that opens Material's date picker dialog on a tap. Android's picker *is* a dialog — mounted, it
  * opens — so it is mounted only while open, and unmounted on confirm or dismiss, as the component asks its caller to.
+ * Both are React Native views; inside a `Screen` or `Island` `RNHostView` carries them into that host, sized to the
+ * field (see `useInsideHost`).
  */
 export const DatePicker = ({
   max,
@@ -37,6 +42,7 @@ export const DatePicker = ({
   value
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
   const [open, setOpen] = useState(false);
   const show = useCallback(() => setOpen(true), []);
   const hide = useCallback(() => setOpen(false), []);
@@ -44,7 +50,7 @@ export const DatePicker = ({
     setOpen(false);
     onValueChange?.(date);
   }, [onValueChange]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  const field = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       alignSelf: "flex-start",
       bg: "fill.tertiary",
@@ -68,5 +74,11 @@ export const DatePicker = ({
       value: value
     }) : null]
   });
+  return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
+    matchContents: true,
+    children: /*#__PURE__*/_jsx(Box, {
+      children: field
+    })
+  }) : field;
 };
 //# sourceMappingURL=date-picker.android.js.map

package/lib/module/atoms/date-picker/date-picker.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["DateTimePicker","useAppTheme","useCallback","useState","Pressable","RnText","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","formatted","value","mode","toLocaleTimeString","undefined","hour","minute","date","toLocaleDateString","day","month","year","DatePicker","max","min","onValueChange","testID","theme","open","setOpen","show","hide","onChange","_event","children","alignSelf","bg","borderRadius","onPress","px","py","variant","accentColor","colorString","maximumDate","minimumDate","onDismiss","presentation"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.android.tsx"],"mappings":";;AAAA,SAAQA,cAAc,QAAO,oCAAoC;AACjE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,QAAQ,QAAO,OAAO;AAE3C,SAAQC,SAAS,QAAO,uBAAc;AACtC,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjC,MAAMC,SAAS,GAAGA,CAACC,KAAW,EAAEC,IAAoB,KAAa;EAC/D,IAAIA,IAAI,KAAK,MAAM,EAAE;IACnB,OAAOD,KAAK,CAACE,kBAAkB,CAACC,SAAS,EAAE;MAACC,IAAI,EAAE,SAAS;MAAEC,MAAM,EAAE;IAAS,CAAC,CAAC;EAClF;EAEA,MAAMC,IAAI,GAAGN,KAAK,CAACO,kBAAkB,CAACJ,SAAS,EAAE;IAACK,GAAG,EAAE,SAAS;IAAEC,KAAK,EAAE,OAAO;IAAEC,IAAI,EAAE;EAAS,CAAC,CAAC;EAEnG,OAAOT,IAAI,KAAK,UAAU,GACtB,GAAGK,IAAI,IAAIN,KAAK,CAACE,kBAAkB,CAACC,SAAS,EAAE;IAACC,IAAI,EAAE,SAAS;IAAEC,MAAM,EAAE;EAAS,CAAC,CAAC,EAAE,GACtFC,IAAI;AACV,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMK,UAA+B,GAAGA,CAAC;EAC9CC,GAAG;EACHC,GAAG;EACHZ,IAAI,GAAG,MAAM;EACba,aAAa;EACbC,MAAM;EACNf;AACe,CAAC,KAAK;EACrB,MAAMgB,KAAK,GAAG5B,WAAW,CAAC,CAAC;EAC3B,MAAM,CAAC6B,IAAI,EAAEC,OAAO,CAAC,GAAG5B,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAM6B,IAAI,GAAG9B,WAAW,CAAC,MAAM6B,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EACjD,MAAME,IAAI,GAAG/B,WAAW,CAAC,MAAM6B,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAElD,MAAMG,QAAQ,GAAGhC,WAAW,CAC1B,CAACiC,MAAe,EAAEhB,IAAU,KAAK;IAC/BY,OAAO,CAAC,KAAK,CAAC;IACdJ,aAAa,GAAGR,IAAI,CAAC;EACvB,CAAC,EACD,CAACQ,aAAa,CAChB,CAAC;EAED,oBACEhB,KAAA,CAAAF,SAAA;IAAA2B,QAAA,gBACE7B,IAAA,CAACH,SAAS;MACRiC,SAAS,EAAC,YAAY;MACtBC,EAAE,EAAC,eAAe;MAClBC,YAAY,EAAC,QAAQ;MACrBC,OAAO,EAAER,IAAK;MACdS,EAAE,EAAC,KAAK;MACRC,EAAE,EAAC,IAAI;MACPd,MAAM,EAAEA,MAAO;MAAAQ,QAAA,eAEf7B,IAAA,CAACF,MAAM;QAACsC,OAAO,EAAC,MAAM;QAAAP,QAAA,EAAExB,SAAS,CAACC,KAAK,EAAEC,IAAI;MAAC,CAAS;IAAC,CAC/C,CAAC,EACXgB,IAAI,gBACHvB,IAAA,CAACP,cAAc;MACb4C,WAAW,EAAEf,KAAK,CAACgB,WAAW,CAAC,qBAAqB,CAAE;MACtDC,WAAW,EAAErB,GAAI;MACjBsB,WAAW,EAAErB,GAAI;MACjBZ,IAAI,EAAEA,IAAK;MACXkC,SAAS,EAAEf,IAAK;MAChBN,aAAa,EAAEO,QAAS;MACxBe,YAAY,EAAC,QAAQ;MACrBpC,KAAK,EAAEA;IAAM,CACd,CAAC,GACA,IAAI;EAAA,CACR,CAAC;AAEP,CAAC","ignoreList":[]}
+{"version":3,"names":["DateTimePicker","RNHostView","useAppTheme","useCallback","useState","useInsideHost","Box","Pressable","RnText","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","formatted","value","mode","toLocaleTimeString","undefined","hour","minute","date","toLocaleDateString","day","month","year","DatePicker","max","min","onValueChange","testID","theme","insideHost","open","setOpen","show","hide","onChange","_event","field","children","alignSelf","bg","borderRadius","onPress","px","py","variant","accentColor","colorString","maximumDate","minimumDate","onDismiss","presentation","matchContents"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/date-picker/date-picker.ios.js

@@ -4,6 +4,7 @@ import { Host, DatePicker as SwiftUIDatePicker } from '@expo/ui/swift-ui';
 import { datePickerStyle, labelsHidden, tint } from '@expo/ui/swift-ui/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const COMPONENTS = {
   date: ['date'],
@@ -15,7 +16,8 @@ const COMPONENTS = {
  * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
  * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
  * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
- * beside it; the calendar is in the accent.
+ * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
+ * `useInsideHost`).
  */
 export const DatePicker = ({
   max,
@@ -26,21 +28,26 @@ export const DatePicker = ({
   value
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
   const modifiers = useMemo(() => [datePickerStyle('compact'), labelsHidden(), tint(theme.color('fill.accent.primary'))], [theme]);
+  const picker = /*#__PURE__*/_jsx(SwiftUIDatePicker, {
+    displayedComponents: [...COMPONENTS[mode]],
+    modifiers: modifiers,
+    onDateChange: onValueChange,
+    range: min || max ? {
+      end: max,
+      start: min
+    } : undefined,
+    selection: value,
+    testID: testID
+  });
+  if (insideHost) {
+    return picker;
+  }
   return /*#__PURE__*/_jsx(Host, {
     colorScheme: theme.dark ? 'dark' : 'light',
     matchContents: true,
-    children: /*#__PURE__*/_jsx(SwiftUIDatePicker, {
-      displayedComponents: [...COMPONENTS[mode]],
-      modifiers: modifiers,
-      onDateChange: onValueChange,
-      range: min || max ? {
-        end: max,
-        start: min
-      } : undefined,
-      selection: value,
-      testID: testID
-    })
+    children: picker
   });
 };
 //# sourceMappingURL=date-picker.ios.js.map

package/lib/module/atoms/date-picker/date-picker.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","labelsHidden","tint","useAppTheme","useMemo","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","modifiers","color","colorScheme","dark","matchContents","children","displayedComponents","onDateChange","range","end","start","undefined","selection"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SAAQC,eAAe,EAAEC,YAAY,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMZ,UAA+B,GAAGA,CAAC;EAC9Ca,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAE3B,MAAMe,SAAS,GAAGd,OAAO,CACvB,MAAM,CAACJ,eAAe,CAAC,SAAS,CAAC,EAAEC,YAAY,CAAC,CAAC,EAAEC,IAAI,CAACe,KAAK,CAACE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5F,CAACF,KAAK,CACR,CAAC;EAED,oBACEX,IAAA,CAACT,IAAI;IAACuB,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,eAC7DjB,IAAA,CAACP,iBAAiB;MAChByB,mBAAmB,EAAE,CAAC,GAAGjB,UAAU,CAACM,IAAI,CAAC,CAAE;MAC3CK,SAAS,EAAEA,SAAU;MACrBO,YAAY,EAAEX,aAAc;MAC5BY,KAAK,EAAEd,GAAG,IAAID,GAAG,GAAG;QAACgB,GAAG,EAAEhB,GAAG;QAAEiB,KAAK,EAAEhB;MAAG,CAAC,GAAGiB,SAAU;MACvDC,SAAS,EAAEd,KAAM;MACjBD,MAAM,EAAEA;IAAO,CAChB;EAAC,CACE,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","labelsHidden","tint","useAppTheme","useMemo","useInsideHost","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","insideHost","modifiers","color","picker","displayedComponents","onDateChange","range","end","start","undefined","selection","colorScheme","dark","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SAAQC,eAAe,EAAEC,YAAY,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMb,UAA+B,GAAGA,CAAC;EAC9Cc,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,UAAU,GAAGd,aAAa,CAAC,CAAC;EAElC,MAAMe,SAAS,GAAGhB,OAAO,CACvB,MAAM,CAACJ,eAAe,CAAC,SAAS,CAAC,EAAEC,YAAY,CAAC,CAAC,EAAEC,IAAI,CAACgB,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5F,CAACH,KAAK,CACR,CAAC;EAED,MAAMI,MAAM,gBACVf,IAAA,CAACR,iBAAiB;IAChBwB,mBAAmB,EAAE,CAAC,GAAGf,UAAU,CAACM,IAAI,CAAC,CAAE;IAC3CM,SAAS,EAAEA,SAAU;IACrBI,YAAY,EAAET,aAAc;IAC5BU,KAAK,EAAEZ,GAAG,IAAID,GAAG,GAAG;MAACc,GAAG,EAAEd,GAAG;MAAEe,KAAK,EAAEd;IAAG,CAAC,GAAGe,SAAU;IACvDC,SAAS,EAAEZ,KAAM;IACjBD,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,IAAIG,UAAU,EAAE;IACd,OAAOG,MAAM;EACf;EAEA,oBACEf,IAAA,CAACV,IAAI;IAACiC,WAAW,EAAEZ,KAAK,CAACa,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,EAC5DX;EAAM,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/atoms/picker/picker.android.js

@@ -5,7 +5,7 @@ import { fillMaxWidth, menuAnchor, testID as testIdModifier } from '@expo/ui/jet
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useEffect, useMemo, useState } from 'react';
 import { Glyph } from "../../glyph/index.js";
-import { HostBoundary } from "../../host-context.js";
+import { HostBoundary, useInsideHost } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MATCH_HEIGHT_ONLY = {
   horizontal: false,
@@ -15,6 +15,8 @@ const MATCH_HEIGHT_ONLY = {
 /**
  * Material's exposed dropdown: a read-only outlined field the width of its container, opening a menu of the options
  * under it. Its own host, themed like an `Island`, so it drops into React Native layout like the iOS picker does.
+ * Inside a `Screen` or `Island` it renders into that host instead (see `useInsideHost`): a host of its own there
+ * would leave the outer one no width, and the native views beside it would disappear.
  */
 export const Picker = ({
   disabled = false,
@@ -24,6 +26,7 @@ export const Picker = ({
   value
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
   const [expanded, setExpanded] = useState(false);
   const selectedLabel = options.find(option => option.value === value)?.label ?? '';
   const label = useNativeState(selectedLabel);
@@ -36,51 +39,55 @@ export const Picker = ({
   useEffect(() => {
     label.set(selectedLabel);
   }, [label, selectedLabel]);
+  const menu = /*#__PURE__*/_jsxs(ExposedDropdownMenuBox, {
+    expanded: expanded,
+    onExpandedChange: disabled ? undefined : setExpanded,
+    children: [/*#__PURE__*/_jsx(OutlinedTextField, {
+      enabled: !disabled,
+      modifiers: fieldModifiers,
+      readOnly: true,
+      singleLine: true,
+      textStyle: {
+        color: theme.colorString('content.primary'),
+        fontFamily: theme.typography.body.fontFamily,
+        fontWeight: theme.typography.body.fontWeight
+      },
+      value: label,
+      children: /*#__PURE__*/_jsx(OutlinedTextField.TrailingIcon, {
+        children: /*#__PURE__*/_jsx(Glyph, {
+          color: "content.secondary",
+          name: "chevronDown",
+          size: "s20"
+        })
+      })
+    }), /*#__PURE__*/_jsx(ExposedDropdownMenu, {
+      containerColor: theme.color('surface.primary'),
+      expanded: expanded,
+      onDismissRequest: () => setExpanded(false),
+      children: options.map(option => /*#__PURE__*/_jsx(DropdownMenuItem, {
+        onClick: () => {
+          setExpanded(false);
+          onValueChange?.(option.value);
+        },
+        children: /*#__PURE__*/_jsx(DropdownMenuItem.Text, {
+          children: /*#__PURE__*/_jsx(ComposeText, {
+            color: theme.colorString(option.value === value ? 'content.accent' : 'content.primary'),
+            style: theme.typography.body,
+            children: option.label
+          })
+        })
+      }, option.value))
+    })]
+  });
+  if (insideHost) {
+    return menu;
+  }
   return /*#__PURE__*/_jsx(Host, {
     colorScheme: theme.dark ? 'dark' : 'light',
     matchContents: MATCH_HEIGHT_ONLY,
     seedColor: theme.materialSeed,
     children: /*#__PURE__*/_jsx(HostBoundary, {
-      children: /*#__PURE__*/_jsxs(ExposedDropdownMenuBox, {
-        expanded: expanded,
-        onExpandedChange: disabled ? undefined : setExpanded,
-        children: [/*#__PURE__*/_jsx(OutlinedTextField, {
-          enabled: !disabled,
-          modifiers: fieldModifiers,
-          readOnly: true,
-          singleLine: true,
-          textStyle: {
-            color: theme.colorString('content.primary'),
-            fontFamily: theme.typography.body.fontFamily,
-            fontWeight: theme.typography.body.fontWeight
-          },
-          value: label,
-          children: /*#__PURE__*/_jsx(OutlinedTextField.TrailingIcon, {
-            children: /*#__PURE__*/_jsx(Glyph, {
-              color: "content.secondary",
-              name: "chevronDown",
-              size: "s20"
-            })
-          })
-        }), /*#__PURE__*/_jsx(ExposedDropdownMenu, {
-          containerColor: theme.color('surface.primary'),
-          expanded: expanded,
-          onDismissRequest: () => setExpanded(false),
-          children: options.map(option => /*#__PURE__*/_jsx(DropdownMenuItem, {
-            onClick: () => {
-              setExpanded(false);
-              onValueChange?.(option.value);
-            },
-            children: /*#__PURE__*/_jsx(DropdownMenuItem.Text, {
-              children: /*#__PURE__*/_jsx(ComposeText, {
-                color: theme.colorString(option.value === value ? 'content.accent' : 'content.primary'),
-                style: theme.typography.body,
-                children: option.label
-              })
-            })
-          }, option.value))
-        })]
-      })
+      children: menu
     })
   });
 };

package/lib/module/atoms/picker/picker.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","DropdownMenuItem","ExposedDropdownMenu","ExposedDropdownMenuBox","Host","OutlinedTextField","useNativeState","fillMaxWidth","menuAnchor","testID","testIdModifier","useAppTheme","useEffect","useMemo","useState","Glyph","HostBoundary","jsx","_jsx","jsxs","_jsxs","MATCH_HEIGHT_ONLY","horizontal","vertical","Picker","disabled","onValueChange","options","value","theme","expanded","setExpanded","selectedLabel","find","option","label","fieldModifiers","list","set","colorScheme","dark","matchContents","seedColor","materialSeed","children","onExpandedChange","undefined","enabled","modifiers","readOnly","singleLine","textStyle","color","colorString","fontFamily","typography","body","fontWeight","TrailingIcon","name","size","containerColor","onDismissRequest","map","onClick","style"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","DropdownMenuItem","ExposedDropdownMenu","ExposedDropdownMenuBox","Host","OutlinedTextField","useNativeState","fillMaxWidth","menuAnchor","testID","testIdModifier","useAppTheme","useEffect","useMemo","useState","Glyph","HostBoundary","useInsideHost","jsx","_jsx","jsxs","_jsxs","MATCH_HEIGHT_ONLY","horizontal","vertical","Picker","disabled","onValueChange","options","value","theme","insideHost","expanded","setExpanded","selectedLabel","find","option","label","fieldModifiers","list","set","menu","onExpandedChange","undefined","children","enabled","modifiers","readOnly","singleLine","textStyle","color","colorString","fontFamily","typography","body","fontWeight","TrailingIcon","name","size","containerColor","onDismissRequest","map","onClick","style","colorScheme","dark","matchContents","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/picker/picker.ios.js

@@ -1,9 +1,17 @@
 "use strict";
 
 import { Picker as NativePicker } from '@expo/ui/community/picker';
+import { Picker as SwiftUIPicker, Text as SwiftUIText } from '@expo/ui/swift-ui';
+import { disabled as disabledModifier, foregroundStyle, pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
+ * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
+ * stack is given no height there, and the wheel spills over the views around it.
+ */
 export const Picker = ({
   disabled = false,
   onValueChange,
@@ -12,14 +20,29 @@ export const Picker = ({
   value
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
+  const color = theme.colorString('content.primary');
   const onChange = useCallback(next => onValueChange?.(String(next)), [onValueChange]);
+  const wheelModifiers = useMemo(() => [pickerStyle('wheel'), ...(disabled ? [disabledModifier(true)] : [])], [disabled]);
+  if (insideHost) {
+    return /*#__PURE__*/_jsx(SwiftUIPicker, {
+      modifiers: wheelModifiers,
+      onSelectionChange: onChange,
+      selection: value,
+      testID: testID,
+      children: options.map(option => /*#__PURE__*/_jsx(SwiftUIText, {
+        modifiers: [tag(option.value), foregroundStyle(color)],
+        children: option.label
+      }, option.value))
+    });
+  }
   return /*#__PURE__*/_jsx(NativePicker, {
     enabled: !disabled,
     onValueChange: onChange,
     selectedValue: value,
     testID: testID,
     children: options.map(option => /*#__PURE__*/_jsx(NativePicker.Item, {
-      color: theme.colorString('content.primary'),
+      color: color,
       label: option.label,
       value: option.value
     }, option.value))

package/lib/module/atoms/picker/picker.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Picker","NativePicker","useAppTheme","useCallback","jsx","_jsx","disabled","onValueChange","options","testID","value","theme","onChange","next","String","enabled","selectedValue","children","map","option","Item","color","colorString","label"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,YAAY,QAAO,2BAA2B;AAChE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjC,OAAO,MAAML,MAAuB,GAAGA,CAAC;EAACM,QAAQ,GAAG,KAAK;EAAEC,aAAa;EAAEC,OAAO;EAAEC,MAAM;EAAEC;AAAkB,CAAC,KAAK;EACjH,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,MAAMU,QAAQ,GAAGT,WAAW,CAAEU,IAA4B,IAAKN,aAAa,GAAGO,MAAM,CAACD,IAAI,CAAC,CAAC,EAAE,CAACN,aAAa,CAAC,CAAC;EAE9G,oBACEF,IAAA,CAACJ,YAAY;IAACc,OAAO,EAAE,CAACT,QAAS;IAACC,aAAa,EAAEK,QAAS;IAACI,aAAa,EAAEN,KAAM;IAACD,MAAM,EAAEA,MAAO;IAAAQ,QAAA,EAC7FT,OAAO,CAACU,GAAG,CAACC,MAAM,iBACjBd,IAAA,CAACJ,YAAY,CAACmB,IAAI;MAChBC,KAAK,EAAEV,KAAK,CAACW,WAAW,CAAC,iBAAiB,CAAE;MAE5CC,KAAK,EAAEJ,MAAM,CAACI,KAAM;MACpBb,KAAK,EAAES,MAAM,CAACT;IAAM,GAFfS,MAAM,CAACT,KAGb,CACF;EAAC,CACU,CAAC;AAEnB,CAAC","ignoreList":[]}
+{"version":3,"names":["Picker","NativePicker","SwiftUIPicker","Text","SwiftUIText","disabled","disabledModifier","foregroundStyle","pickerStyle","tag","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","onValueChange","options","testID","value","theme","insideHost","color","colorString","onChange","next","String","wheelModifiers","modifiers","onSelectionChange","selection","children","map","option","label","enabled","selectedValue","Item"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,YAAY,QAAO,2BAA2B;AAChE,SAAQD,MAAM,IAAIE,aAAa,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAC9E,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,eAAe,EAAEC,WAAW,EAAEC,GAAG,QAAO,6BAA6B;AAC3G,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMf,MAAuB,GAAGA,CAAC;EAACK,QAAQ,GAAG,KAAK;EAAEW,aAAa;EAAEC,OAAO;EAAEC,MAAM;EAAEC;AAAkB,CAAC,KAAK;EACjH,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,UAAU,GAAGR,aAAa,CAAC,CAAC;EAClC,MAAMS,KAAK,GAAGF,KAAK,CAACG,WAAW,CAAC,iBAAiB,CAAC;EAElD,MAAMC,QAAQ,GAAGb,WAAW,CAAEc,IAA4B,IAAKT,aAAa,GAAGU,MAAM,CAACD,IAAI,CAAC,CAAC,EAAE,CAACT,aAAa,CAAC,CAAC;EAC9G,MAAMW,cAAc,GAAGf,OAAO,CAC5B,MAAM,CAACJ,WAAW,CAAC,OAAO,CAAC,EAAE,IAAIH,QAAQ,GAAG,CAACC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC3E,CAACD,QAAQ,CACX,CAAC;EAED,IAAIgB,UAAU,EAAE;IACd,oBACEN,IAAA,CAACb,aAAa;MAAC0B,SAAS,EAAED,cAAe;MAACE,iBAAiB,EAAEL,QAAS;MAACM,SAAS,EAAEX,KAAM;MAACD,MAAM,EAAEA,MAAO;MAAAa,QAAA,EACrGd,OAAO,CAACe,GAAG,CAACC,MAAM,iBACjBlB,IAAA,CAACX,WAAW;QAAoBwB,SAAS,EAAE,CAACnB,GAAG,CAACwB,MAAM,CAACd,KAAK,CAAC,EAAEZ,eAAe,CAACe,KAAK,CAAC,CAAE;QAAAS,QAAA,EACpFE,MAAM,CAACC;MAAK,GADGD,MAAM,CAACd,KAEZ,CACd;IAAC,CACW,CAAC;EAEpB;EAEA,oBACEJ,IAAA,CAACd,YAAY;IAACkC,OAAO,EAAE,CAAC9B,QAAS;IAACW,aAAa,EAAEQ,QAAS;IAACY,aAAa,EAAEjB,KAAM;IAACD,MAAM,EAAEA,MAAO;IAAAa,QAAA,EAC7Fd,OAAO,CAACe,GAAG,CAACC,MAAM,iBACjBlB,IAAA,CAACd,YAAY,CAACoC,IAAI;MAACf,KAAK,EAAEA,KAAM;MAAoBY,KAAK,EAAED,MAAM,CAACC,KAAM;MAACf,KAAK,EAAEc,MAAM,CAACd;IAAM,GAAvDc,MAAM,CAACd,KAAkD,CAChG;EAAC,CACU,CAAC;AAEnB,CAAC","ignoreList":[]}

package/lib/module/atoms/segmented-control/segmented-control.android.js

@@ -5,6 +5,7 @@ import { fillMaxWidth, testID as testIdModifier, weight } from '@expo/ui/jetpack
 import { haptics } from '@hzblj/expo-rich-haptics';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MATCH_HEIGHT_ONLY = {
   horizontal: false,
@@ -16,8 +17,9 @@ const SEGMENT = [weight(1)];
 
 /**
  * Material's single-choice segmented buttons, the selected one filled with the accent like a checked `Switch`. Its own
- * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Material plays
- * nothing on a new segment, so this plays `selection`.
+ * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Inside a `Screen`
+ * or `Island` it renders into that host instead (see `useInsideHost`). Material plays nothing on a new segment, so this
+ * plays `selection`.
  */
 export const SegmentedControl = ({
   disabled = false,
@@ -27,6 +29,7 @@ export const SegmentedControl = ({
   values
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
 
   // Every segment keeps the same outline, the selected one too: an accent border would run its fill out over the line
   // the others draw inside, and make it look taller than its neighbours.
@@ -52,26 +55,30 @@ export const SegmentedControl = ({
     haptics.selection();
     onChange?.(index, values[index] ?? '');
   }, [onChange, selectedIndex, values]);
+  const row = /*#__PURE__*/_jsx(SingleChoiceSegmentedButtonRow, {
+    modifiers: rowModifiers,
+    children: values.map((label, index) => /*#__PURE__*/_jsx(SegmentedButton, {
+      colors: colors,
+      enabled: !disabled,
+      modifiers: SEGMENT,
+      onClick: () => select(index),
+      selected: index === selectedIndex,
+      children: /*#__PURE__*/_jsx(SegmentedButton.Label, {
+        children: /*#__PURE__*/_jsx(Text, {
+          style: theme.typography.subheadlineMedium,
+          children: label
+        })
+      })
+    }, index))
+  });
+  if (insideHost) {
+    return row;
+  }
   return /*#__PURE__*/_jsx(Host, {
     colorScheme: theme.dark ? 'dark' : 'light',
     matchContents: MATCH_HEIGHT_ONLY,
     seedColor: theme.materialSeed,
-    children: /*#__PURE__*/_jsx(SingleChoiceSegmentedButtonRow, {
-      modifiers: rowModifiers,
-      children: values.map((label, index) => /*#__PURE__*/_jsx(SegmentedButton, {
-        colors: colors,
-        enabled: !disabled,
-        modifiers: SEGMENT,
-        onClick: () => select(index),
-        selected: index === selectedIndex,
-        children: /*#__PURE__*/_jsx(SegmentedButton.Label, {
-          children: /*#__PURE__*/_jsx(Text, {
-            style: theme.typography.subheadlineMedium,
-            children: label
-          })
-        })
-      }, index))
-    })
+    children: row
   });
 };
 //# sourceMappingURL=segmented-control.android.js.map

package/lib/module/atoms/segmented-control/segmented-control.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","SegmentedButton","SingleChoiceSegmentedButtonRow","Text","fillMaxWidth","testID","testIdModifier","weight","haptics","useAppTheme","useCallback","useMemo","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","SEGMENT","SegmentedControl","disabled","onChange","selectedIndex","values","theme","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContentColor","rowModifiers","select","index","selection","colorScheme","dark","matchContents","seedColor","materialSeed","children","modifiers","map","label","enabled","onClick","selected","Label","style","typography","subheadlineMedium"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Host","SegmentedButton","SingleChoiceSegmentedButtonRow","Text","fillMaxWidth","testID","testIdModifier","weight","haptics","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","SEGMENT","SegmentedControl","disabled","onChange","selectedIndex","values","theme","insideHost","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContentColor","rowModifiers","select","index","selection","row","modifiers","children","map","label","enabled","onClick","selected","Label","style","typography","subheadlineMedium","colorScheme","dark","matchContents","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/segmented-control/segmented-control.ios.js

@@ -1,13 +1,21 @@
 "use strict";
 
+import { RNHostView } from '@expo/ui/swift-ui';
 import { SegmentedControl as NativeSegmentedControl } from '@hzblj/kara-native/swift-ui';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const MATCH_HEIGHT_ONLY = {
+  horizontal: false,
+  vertical: true
+};
+
 /**
  * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
  * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
- * the width it is given and UIKit's height. UIKit plays the control's own feedback.
+ * the width it is given and UIKit's height. Inside a `Screen` or `Island` it is carried into that host by `RNHostView`
+ * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback.
  */
 export const SegmentedControl = ({
   disabled = false,
@@ -17,6 +25,7 @@ export const SegmentedControl = ({
   values
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
   const face = theme.typography.footnoteMedium;
 
   // The native control speaks in values; a segment's is its index, so two labels may read the same.
@@ -28,7 +37,7 @@ export const SegmentedControl = ({
     const index = Number(value);
     onChange?.(index, values[index] ?? '');
   }, [onChange, values]);
-  return /*#__PURE__*/_jsx(NativeSegmentedControl, {
+  const control = /*#__PURE__*/_jsx(NativeSegmentedControl, {
     activePillColor: theme.color('fill.accent.primary'),
     activeTextColor: theme.color('content.on.accent'),
     disabled: disabled,
@@ -40,5 +49,9 @@ export const SegmentedControl = ({
     selectedValue: String(selectedIndex),
     testID: testID
   });
+  return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
+    matchContents: MATCH_HEIGHT_ONLY,
+    children: control
+  }) : control;
 };
 //# sourceMappingURL=segmented-control.ios.js.map