@hzblj/kara-components 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @hzblj/kara-components
 
+## 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/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/organisms/sheet/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
-export * from './sheet';
+export * from "./sheet.js";
 export * from "./sheet.types.js";
+export { useSheetScroll } from "./sheet-scroll.js";
 //# sourceMappingURL=index.js.map

package/lib/module/organisms/sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["organisms/sheet/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,kBAAe","ignoreList":[]}
+{"version":3,"names":["useSheetScroll"],"sourceRoot":"../../../../src","sources":["organisms/sheet/index.ts"],"mappings":";;AAAA,cAAc,YAAS;AACvB,cAAc,kBAAe;AAC7B,SAAQA,cAAc,QAAO,mBAAgB","ignoreList":[]}

package/lib/module/organisms/sheet/sheet-header.js

@@ -0,0 +1,7 @@
+"use strict";
+
+/** A slot, never rendered: `Sheet` reads its props and builds the header into the native sheet's own header area. */
+export const SheetHeader = _props => {
+  throw new Error('[kara-ui] <Sheet.Header> must be a direct child of <Sheet>.');
+};
+//# sourceMappingURL=sheet-header.js.map

package/lib/module/organisms/sheet/sheet-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SheetHeader","_props","Error"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet-header.tsx"],"mappings":";;AAEA;AACA,OAAO,MAAMA,WAAW,GAAIC,MAAwB,IAAY;EAC9D,MAAM,IAAIC,KAAK,CAAC,6DAA6D,CAAC;AAChF,CAAC","ignoreList":[]}

package/lib/module/organisms/sheet/sheet-scroll.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import { useSx } from '@hzblj/kara-sx';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import { ScrollView } from 'react-native';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const SheetScrollContext = /*#__PURE__*/createContext(null);
+
+/**
+ * For a scroll view of your own inside a sheet (a `RnFlatList`, say): pad its content by `topInset`, render
+ * `largeTitle` first, and forward `onScroll` — which is what `<Sheet.ScrollView>` does.
+ */
+export const useSheetScroll = () => {
+  const context = useContext(SheetScrollContext);
+  if (context === null) {
+    throw new Error('[kara-ui] useSheetScroll and <Sheet.ScrollView> must be used inside <Sheet>.');
+  }
+  return context;
+};
+const NO_SX = {};
+
+/** The sheet's scrolling body: starts below the header on iOS 26, carries a large title, and reports its scroll. */
+export const SheetScrollView = ({
+  children,
+  content,
+  keyboardShouldPersistTaps,
+  onScroll,
+  testID
+}) => {
+  const {
+    largeTitle,
+    onScroll: onSheetScroll,
+    topInset
+  } = useSheetScroll();
+  const contentStyle = useSx(content ?? NO_SX);
+  // The header's room goes on top of the content's own top padding, not in place of it.
+  const containerStyle = useMemo(() => {
+    if (topInset === 0) {
+      return contentStyle;
+    }
+    const ownTop = typeof contentStyle.paddingTop === 'number' ? contentStyle.paddingTop : 0;
+    return [contentStyle, {
+      paddingTop: topInset + ownTop
+    }];
+  }, [contentStyle, topInset]);
+  const handleScroll = useCallback(event => {
+    onSheetScroll?.(event);
+    onScroll?.(event);
+  }, [onScroll, onSheetScroll]);
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: containerStyle,
+    contentInsetAdjustmentBehavior: "never",
+    keyboardShouldPersistTaps: keyboardShouldPersistTaps,
+    nestedScrollEnabled: true,
+    onScroll: onSheetScroll || onScroll ? handleScroll : undefined,
+    overScrollMode: "always",
+    scrollEventThrottle: 16,
+    testID: testID,
+    children: [largeTitle, children]
+  });
+};
+//# sourceMappingURL=sheet-scroll.js.map

package/lib/module/organisms/sheet/sheet-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSx","createContext","useCallback","useContext","useMemo","ScrollView","jsxs","_jsxs","SheetScrollContext","useSheetScroll","context","Error","NO_SX","SheetScrollView","children","content","keyboardShouldPersistTaps","onScroll","testID","largeTitle","onSheetScroll","topInset","contentStyle","containerStyle","ownTop","paddingTop","handleScroll","event","contentContainerStyle","contentInsetAdjustmentBehavior","nestedScrollEnabled","undefined","overScrollMode","scrollEventThrottle"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet-scroll.tsx"],"mappings":";;AAAA,SAAQA,KAAK,QAAO,gBAAgB;AACpC,SAAQC,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAO,OAAO;AACrE,SAAQC,UAAU,QAAO,cAAc;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIvC,OAAO,MAAMC,kBAAkB,gBAAGP,aAAa,CAAiC,IAAI,CAAC;;AAErF;AACA;AACA;AACA;AACA,OAAO,MAAMQ,cAAc,GAAGA,CAAA,KAA+B;EAC3D,MAAMC,OAAO,GAAGP,UAAU,CAACK,kBAAkB,CAAC;EAE9C,IAAIE,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIC,KAAK,CAAC,8EAA8E,CAAC;EACjG;EAEA,OAAOD,OAAO;AAChB,CAAC;AAED,MAAME,KAAK,GAAG,CAAC,CAAC;;AAEhB;AACA,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,QAAQ;EACRC,OAAO;EACPC,yBAAyB;EACzBC,QAAQ;EACRC;AACoB,CAAC,KAAK;EAC1B,MAAM;IAACC,UAAU;IAAEF,QAAQ,EAAEG,aAAa;IAAEC;EAAQ,CAAC,GAAGZ,cAAc,CAAC,CAAC;EACxE,MAAMa,YAAY,GAAGtB,KAAK,CAACe,OAAO,IAAIH,KAAK,CAAC;EAC5C;EACA,MAAMW,cAAc,GAAGnB,OAAO,CAAC,MAAM;IACnC,IAAIiB,QAAQ,KAAK,CAAC,EAAE;MAClB,OAAOC,YAAY;IACrB;IAEA,MAAME,MAAM,GAAG,OAAOF,YAAY,CAACG,UAAU,KAAK,QAAQ,GAAGH,YAAY,CAACG,UAAU,GAAG,CAAC;IAExF,OAAO,CAACH,YAAY,EAAE;MAACG,UAAU,EAAEJ,QAAQ,GAAGG;IAAM,CAAC,CAAC;EACxD,CAAC,EAAE,CAACF,YAAY,EAAED,QAAQ,CAAC,CAAC;EAE5B,MAAMK,YAAY,GAAGxB,WAAW,CAC9ByB,KAAK,IAAI;IACPP,aAAa,GAAGO,KAAK,CAAC;IACtBV,QAAQ,GAAGU,KAAK,CAAC;EACnB,CAAC,EACD,CAACV,QAAQ,EAAEG,aAAa,CAC1B,CAAC;EAED,oBACEb,KAAA,CAACF,UAAU;IACTuB,qBAAqB,EAAEL,cAAe;IACtCM,8BAA8B,EAAC,OAAO;IACtCb,yBAAyB,EAAEA,yBAA0B;IACrDc,mBAAmB;IACnBb,QAAQ,EAAEG,aAAa,IAAIH,QAAQ,GAAGS,YAAY,GAAGK,SAAU;IAC/DC,cAAc,EAAC,QAAQ;IACvBC,mBAAmB,EAAE,EAAG;IACxBf,MAAM,EAAEA,MAAO;IAAAJ,QAAA,GAEdK,UAAU,EACVL,QAAQ;EAAA,CACC,CAAC;AAEjB,CAAC","ignoreList":[]}

package/lib/module/organisms/sheet/sheet.js

@@ -0,0 +1,136 @@
+"use strict";
+
+import { useAppTheme } from '@hzblj/kara-theme';
+import { TrueSheet } from '@lodev09/react-native-true-sheet';
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { SheetHeader } from "./sheet-header.js";
+import { SheetScrollContext, SheetScrollView } from "./sheet-scroll.js";
+import { splitSheetChildren } from "./split-sheet-children.js";
+import { useSheetHeader } from "./use-sheet-header.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const FIT_CONTENT = ['auto'];
+
+/** Material's extra-large shape for a bottom sheet; iOS keeps the system's own, which follows the device's corners. */
+const CORNER_RADIUS = Platform.OS === 'android' ? 28 : undefined;
+
+/** Keeps the sheet's own native view out of the layout it is declared in. */
+const styles = StyleSheet.create({
+  host: {
+    position: 'absolute'
+  }
+});
+const SheetRoot = ({
+  bg = 'surface.primary',
+  children,
+  detents = FIT_CONTENT,
+  dimmed = true,
+  dismissible = true,
+  draggable = true,
+  footer,
+  grabber = true,
+  onDetentChange,
+  onDismiss,
+  onPresent,
+  ref,
+  scrollable = false,
+  testID,
+  visible
+}) => {
+  const theme = useAppTheme();
+  const {
+    content,
+    header: headerProps
+  } = useMemo(() => splitSheetChildren(children), [children]);
+  const sheetHeader = useSheetHeader({
+    header: headerProps,
+    scrollable
+  });
+  const sheetRef = useRef(null);
+  const presented = useRef(false);
+  /** A dismissal we asked for: `onDismiss` reports the user's, never ours. */
+  const programmaticDismiss = useRef(false);
+  useImperativeHandle(ref, () => ({
+    dismiss: () => {
+      presented.current = false;
+      programmaticDismiss.current = true;
+      return sheetRef.current?.dismiss() ?? Promise.resolve();
+    },
+    present: detentIndex => {
+      presented.current = true;
+      return sheetRef.current?.present(detentIndex) ?? Promise.resolve();
+    },
+    resize: detentIndex => sheetRef.current?.resize(detentIndex) ?? Promise.resolve()
+  }), []);
+  useEffect(() => {
+    if (visible && !presented.current) {
+      presented.current = true;
+      void sheetRef.current?.present();
+    } else if (!visible && presented.current) {
+      presented.current = false;
+      programmaticDismiss.current = true;
+      void sheetRef.current?.dismiss();
+    }
+  }, [visible]);
+
+  // A sheet unmounted while presented would otherwise stay on screen, blocking everything under it.
+  useLayoutEffect(() => {
+    const sheet = sheetRef.current;
+    return () => {
+      if (!presented.current) {
+        return;
+      }
+      presented.current = false;
+      programmaticDismiss.current = true;
+      void sheet?.dismiss();
+    };
+  }, []);
+  const handleDidDismiss = useCallback(() => {
+    presented.current = false;
+    if (programmaticDismiss.current) {
+      programmaticDismiss.current = false;
+      return;
+    }
+    onDismiss();
+  }, [onDismiss]);
+  const handleDetentChange = useCallback(event => onDetentChange?.(event.nativeEvent.index), [onDetentChange]);
+  return /*#__PURE__*/_jsx(View, {
+    collapsable: false,
+    pointerEvents: "box-none",
+    style: styles.host,
+    children: /*#__PURE__*/_jsx(TrueSheet, {
+      backgroundColor: theme.color(bg),
+      cornerRadius: CORNER_RADIUS,
+      detents: detents,
+      dimmed: dimmed,
+      dismissible: dismissible,
+      draggable: draggable,
+      footer: footer,
+      grabber: grabber,
+      header: sheetHeader.header,
+      headerStyle: sheetHeader.headerStyle,
+      onDetentChange: handleDetentChange,
+      onDidDismiss: handleDidDismiss,
+      onDidPresent: onPresent,
+      ref: sheetRef,
+      scrollable: scrollable,
+      scrollableOptions: sheetHeader.scrollableOptions,
+      testID: testID,
+      children: /*#__PURE__*/_jsxs(SheetScrollContext.Provider, {
+        value: sheetHeader.scrollContext,
+        children: [sheetHeader.staticLargeTitle, content]
+      })
+    })
+  });
+};
+
+/**
+ * A native sheet with an optional native header. `visible` presents and dismisses it; a swipe or a tap outside calls
+ * `onDismiss`, which should set `visible` back. `<Sheet.Header>` (a direct child) gives it a bar with a title and
+ * items; `<Sheet.ScrollView>` is the body of a `scrollable` sheet.
+ */
+export const Sheet = Object.assign(SheetRoot, {
+  Header: SheetHeader,
+  ScrollView: SheetScrollView
+});
+//# sourceMappingURL=sheet.js.map

package/lib/module/organisms/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","TrueSheet","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","Platform","StyleSheet","View","SheetHeader","SheetScrollContext","SheetScrollView","splitSheetChildren","useSheetHeader","jsxs","_jsxs","jsx","_jsx","FIT_CONTENT","CORNER_RADIUS","OS","undefined","styles","create","host","position","SheetRoot","bg","children","detents","dimmed","dismissible","draggable","footer","grabber","onDetentChange","onDismiss","onPresent","ref","scrollable","testID","visible","theme","content","header","headerProps","sheetHeader","sheetRef","presented","programmaticDismiss","dismiss","current","Promise","resolve","present","detentIndex","resize","sheet","handleDidDismiss","handleDetentChange","event","nativeEvent","index","collapsable","pointerEvents","style","backgroundColor","color","cornerRadius","headerStyle","onDidDismiss","onDidPresent","scrollableOptions","Provider","value","scrollContext","staticLargeTitle","Sheet","Object","assign","Header","ScrollView"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/sheet/split-sheet-children.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import { Children, isValidElement } from 'react';
+import { SheetHeader } from "./sheet-header.js";
+const isSheetHeader = child => /*#__PURE__*/isValidElement(child) && child.type === SheetHeader;
+
+/** Takes `<Sheet.Header>` out of the children: its props become the native header, the rest is the content. */
+export const splitSheetChildren = children => {
+  const nodes = Children.toArray(children);
+  const header = nodes.find(isSheetHeader);
+  if (!header) {
+    return {
+      content: children
+    };
+  }
+  return {
+    content: nodes.filter(node => node !== header),
+    header: header.props
+  };
+};
+//# sourceMappingURL=split-sheet-children.js.map

package/lib/module/organisms/sheet/split-sheet-children.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","isValidElement","SheetHeader","isSheetHeader","child","type","splitSheetChildren","children","nodes","toArray","header","find","content","filter","node","props"],"sourceRoot":"../../../../src","sources":["organisms/sheet/split-sheet-children.ts"],"mappings":";;AAAA,SAAQA,QAAQ,EAAEC,cAAc,QAA0C,OAAO;AAEjF,SAAQC,WAAW,QAAO,mBAAgB;AAO1C,MAAMC,aAAa,GAAIC,KAAgB,IACrC,aAAAH,cAAc,CAACG,KAAK,CAAC,IAAIA,KAAK,CAACC,IAAI,KAAKH,WAAW;;AAErD;AACA,OAAO,MAAMI,kBAAkB,GAAIC,QAAmB,IAAoB;EACxE,MAAMC,KAAK,GAAGR,QAAQ,CAACS,OAAO,CAACF,QAAQ,CAAC;EACxC,MAAMG,MAAM,GAAGF,KAAK,CAACG,IAAI,CAACR,aAAa,CAAC;EAExC,IAAI,CAACO,MAAM,EAAE;IACX,OAAO;MAACE,OAAO,EAAEL;IAAQ,CAAC;EAC5B;EAEA,OAAO;IAACK,OAAO,EAAEJ,KAAK,CAACK,MAAM,CAACC,IAAI,IAAIA,IAAI,KAAKJ,MAAM,CAAC;IAAEA,MAAM,EAAEA,MAAM,CAACK;EAAK,CAAC;AAC/E,CAAC","ignoreList":[]}

package/lib/module/organisms/sheet/use-sheet-header.js

@@ -0,0 +1,118 @@
+"use strict";
+
+import { isScrollEdgeEffectAvailable } from '@hzblj/kara-native';
+import { spacing } from '@hzblj/kara-theme';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Platform } from 'react-native';
+import { Box } from "../../atoms/box/index.js";
+import { RnText } from "../../atoms/rn-text/index.js";
+import { NavigationBar } from "../../molecules/navigation-bar/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The bar's own height (`NavigationBar`) plus the room above it, before the header has been measured. */
+const ESTIMATED_HEADER_HEIGHT = (Platform.OS === 'ios' ? 56 : 64) + spacing.s16;
+
+/** Where a large title's bar title appears once it has scrolled away: the platform's own place for it. */
+const COLLAPSED_TITLE_ALIGNMENT = Platform.OS === 'ios' ? 'center' : 'leading';
+
+/** Lays the header over the content so the content can scroll under it — the edge effect needs it there. */
+const OVERLAY_HEADER_STYLE = {
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  zIndex: 1
+};
+const SOFT_EDGE_EFFECTS = {
+  bottomScrollEdgeEffect: 'soft',
+  topScrollEdgeEffect: 'soft'
+};
+const SheetLargeTitle = ({
+  onLayout,
+  title
+}) => /*#__PURE__*/_jsx(Box, {
+  onLayout: onLayout,
+  pb: "s8",
+  pt: "s8",
+  px: "s16",
+  children: /*#__PURE__*/_jsx(RnText, {
+    accessibilityRole: "header",
+    variant: "headingM",
+    children: title
+  })
+});
+
+/**
+ * Turns `<Sheet.Header>`'s props into what the native sheet takes: its header element, how that is laid out, the scroll
+ * edge effects, and the context a `<Sheet.ScrollView>` reads. On iOS 26 a scrollable sheet's header is laid over the
+ * content (which is then inset by the header's measured height) so the system's soft edge blurs what scrolls under it;
+ * everywhere else the header simply sits above the content.
+ */
+export const useSheetHeader = ({
+  header: headerProps,
+  scrollable
+}) => {
+  const title = headerProps?.title;
+  const titleStyle = headerProps?.titleStyle ?? 'center';
+  const leadingItems = headerProps?.leadingItems;
+  const trailingItems = headerProps?.trailingItems;
+  const inverted = headerProps?.inverted;
+  const search = headerProps?.search;
+  const accessory = headerProps?.children;
+  const hasBar = title !== undefined || !!leadingItems?.length || !!trailingItems?.length || !!search;
+  const hasHeader = hasBar || !!accessory;
+  const isOverlay = isScrollEdgeEffectAvailable() && hasHeader && scrollable;
+  const isLargeTitle = titleStyle === 'large' && !!title;
+  const [headerHeight, setHeaderHeight] = useState(hasBar ? ESTIMATED_HEADER_HEIGHT : 0);
+  const [largeTitleScrolledAway, setLargeTitleScrolledAway] = useState(false);
+  const largeTitleHeight = useRef(0);
+  const handleHeaderLayout = useCallback(event => {
+    setHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+  const handleLargeTitleLayout = useCallback(event => {
+    largeTitleHeight.current = event.nativeEvent.layout.height;
+  }, []);
+  const handleScroll = useCallback(event => {
+    if (largeTitleHeight.current === 0) {
+      return;
+    }
+    setLargeTitleScrolledAway(event.nativeEvent.contentOffset.y >= largeTitleHeight.current);
+  }, []);
+  const titleAlignment = titleStyle === 'large' ? COLLAPSED_TITLE_ALIGNMENT : titleStyle;
+  const titleVisible = !isLargeTitle || scrollable && largeTitleScrolledAway;
+  const headerElement = useMemo(() => {
+    if (!hasHeader) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsxs(Box, {
+      onLayout: isOverlay ? handleHeaderLayout : undefined,
+      pt: "s16",
+      children: [hasBar ? /*#__PURE__*/_jsx(NavigationBar, {
+        inverted: inverted,
+        leadingItems: leadingItems,
+        search: search,
+        title: title,
+        titleAlignment: titleAlignment,
+        titleVisible: titleVisible,
+        trailingItems: trailingItems
+      }) : null, accessory]
+    });
+  }, [accessory, handleHeaderLayout, hasBar, hasHeader, inverted, isOverlay, leadingItems, search, title, titleAlignment, titleVisible, trailingItems]);
+  const largeTitle = useMemo(() => title && isLargeTitle ? /*#__PURE__*/_jsx(SheetLargeTitle, {
+    onLayout: handleLargeTitleLayout,
+    title: title
+  }) : null, [handleLargeTitleLayout, isLargeTitle, title]);
+  const scrollContext = useMemo(() => ({
+    largeTitle: scrollable ? largeTitle : null,
+    onScroll: scrollable && isLargeTitle ? handleScroll : undefined,
+    topInset: isOverlay ? headerHeight : 0
+  }), [handleScroll, headerHeight, isLargeTitle, isOverlay, largeTitle, scrollable]);
+  return {
+    header: headerElement,
+    headerStyle: isOverlay ? OVERLAY_HEADER_STYLE : undefined,
+    scrollableOptions: isOverlay ? SOFT_EDGE_EFFECTS : undefined,
+    scrollContext,
+    /** Without a scroll view to carry it, a large title simply leads the content. */
+    staticLargeTitle: scrollable ? null : largeTitle
+  };
+};
+//# sourceMappingURL=use-sheet-header.js.map