@hzblj/kara-components 0.7.0 → 0.9.0

package/lib/module/molecules/pager/pager.android.js

@@ -5,28 +5,29 @@ import { fillMaxSize, testID as testIdModifier, weight } from '@expo/ui/jetpack-
 import { spacing } from '@hzblj/kara-theme';
 import { Children, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { HStack } from "../../atoms/h-stack/index.js";
+import { Spacer } from "../../atoms/spacer/index.js";
 import { VStack } from "../../atoms/v-stack/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DOT_SIZE = 6;
 
-/** Compose ships no page indicator, so the dots are composed out of atoms. */
+/** Compose ships no page indicator, so the dots are composed out of atoms — centred between two spacers. */
 const PagerDots = ({
   count,
   current
-}) => /*#__PURE__*/_jsx(HStack, {
+}) => /*#__PURE__*/_jsxs(HStack, {
   align: "center",
   py: "s12",
   spacing: "s6",
   wide: true,
-  children: Array.from({
+  children: [/*#__PURE__*/_jsx(Spacer, {}), Array.from({
     length: count
   }, (_, index) => /*#__PURE__*/_jsx(VStack, {
     bg: index === current ? 'content.primary' : 'fill.tertiary',
     borderRadius: "full",
     h: DOT_SIZE,
     w: DOT_SIZE
-  }, index))
+  }, index)), /*#__PURE__*/_jsx(Spacer, {})]
 });
 export const Pager = ({
   children,

package/lib/module/molecules/pager/pager.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["HorizontalPager","fillMaxSize","testID","testIdModifier","weight","spacing","Children","useCallback","useEffect","useMemo","useRef","useState","HStack","VStack","useHostGuard","jsx","_jsx","jsxs","_jsxs","DOT_SIZE","PagerDots","count","current","align","py","wide","children","Array","from","length","_","index","bg","borderRadius","h","w","Pager","indicators","onPageChange","page","pageSpacing","scrollEnabled","pagerRef","settledPage","currentPage","setCurrentPage","undefined","animateScrollToPage","onSettledPageChange","next","modifiers","pager","initialPage","onCurrentPageChange","ref","userScrollEnabled","tall"],"sourceRoot":"../../../../src","sources":["molecules/pager/pager.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["HorizontalPager","fillMaxSize","testID","testIdModifier","weight","spacing","Children","useCallback","useEffect","useMemo","useRef","useState","HStack","Spacer","VStack","useHostGuard","jsx","_jsx","jsxs","_jsxs","DOT_SIZE","PagerDots","count","current","align","py","wide","children","Array","from","length","_","index","bg","borderRadius","h","w","Pager","indicators","onPageChange","page","pageSpacing","scrollEnabled","pagerRef","settledPage","currentPage","setCurrentPage","undefined","animateScrollToPage","onSettledPageChange","next","modifiers","pager","initialPage","onCurrentPageChange","ref","userScrollEnabled","tall"],"sourceRoot":"../../../../src","sources":["molecules/pager/pager.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/scroll-edge-container/scroll-edge-container.android.js

@@ -1,10 +1,46 @@
 "use strict";
 
-import { Box } from "../../atoms/box/index.js";
+import { duration, opacity } from '@hzblj/kara-theme';
+import { cloneElement, useCallback, useRef } from 'react';
+import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { ABox, Box } from "../../atoms/box/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Less than a pixel scrolled is not scrolled — a fling settles a fraction away from the edge. */
+const EDGE_SLOP = 0.5;
+const FILL = {
+  duration: duration.d200
+};
+/** A bar, and behind it the container colour it fills with — faded in and out, not switched. */
+const EdgeBar = ({
+  children,
+  filled
+}) => {
+  const fill = useAnimatedStyle(() => ({
+    opacity: filled.value
+  }), []);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(ABox, {
+      bg: "surface.secondary",
+      bottom: 0,
+      left: 0,
+      pointerEvents: "none",
+      position: "absolute",
+      right: 0,
+      style: fill,
+      top: 0
+    }), children]
+  });
+};
+
 /**
- * Android has no scroll edge effect, and a React Native scroll view there has no `contentInset` to slide content under
- * a bar with — so the bars stack above and below the scroll view instead of over it. Give them a background.
+ * Material's take on the scroll edge: a React Native scroll view has no `contentInset` to slide content under a bar on
+ * Android, so the bars stack above and below it, and do what a Material top app bar does on scroll — transparent at
+ * rest, filled with `surface.secondary` (the scrolled container colour, `surfaceContainer`) once content has scrolled
+ * under it. The bottom bar mirrors it: filled while there is more content below. The scroll view keeps its own
+ * `onScroll`, `onLayout` and `onContentSizeChange`.
  */
 export const ScrollEdgeContainer = ({
   automaticInsets: _automaticInsets,
@@ -14,12 +50,79 @@ export const ScrollEdgeContainer = ({
   testID,
   topBar,
   ...sx
-}) => /*#__PURE__*/_jsxs(Box, {
-  ...sx,
-  testID: testID,
-  children: [topBar, /*#__PURE__*/_jsx(Box, {
-    flex: 1,
-    children: children
-  }), bottomBar]
-});
+}) => {
+  const topFilled = useSharedValue(opacity.o0);
+  const bottomFilled = useSharedValue(opacity.o0);
+  const metrics = useRef({
+    content: 0,
+    offset: 0,
+    viewport: 0
+  });
+  const state = useRef({
+    bottom: false,
+    top: false
+  });
+  const {
+    flex,
+    onContentSizeChange,
+    onLayout,
+    onScroll,
+    scrollEventThrottle
+  } = children.props;
+
+  // Only a change of state animates; a scroll event restating the same one would restart the fade.
+  const update = useCallback(() => {
+    const {
+      content,
+      offset,
+      viewport
+    } = metrics.current;
+    const top = offset > EDGE_SLOP;
+    const bottom = viewport > 0 && offset + viewport < content - EDGE_SLOP;
+    if (top !== state.current.top) {
+      state.current.top = top;
+      topFilled.value = withTiming(top ? opacity.o100 : opacity.o0, FILL);
+    }
+    if (bottom !== state.current.bottom) {
+      state.current.bottom = bottom;
+      bottomFilled.value = withTiming(bottom ? opacity.o100 : opacity.o0, FILL);
+    }
+  }, [bottomFilled, topFilled]);
+
+  // `flex` so the scroll view takes the room between the bars — left to its content, it grew to the content's height,
+  // ran under the bottom bar and had nothing to scroll.
+  const scrollable = /*#__PURE__*/cloneElement(children, {
+    flex: flex ?? 1,
+    onContentSizeChange: (width, height) => {
+      metrics.current.content = height;
+      update();
+      onContentSizeChange?.(width, height);
+    },
+    onLayout: event => {
+      metrics.current.viewport = event.nativeEvent.layout.height;
+      update();
+      onLayout?.(event);
+    },
+    onScroll: event => {
+      metrics.current.offset = event.nativeEvent.contentOffset.y;
+      update();
+      onScroll?.(event);
+    },
+    scrollEventThrottle: scrollEventThrottle ?? 16
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    ...sx,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(EdgeBar, {
+      filled: topFilled,
+      children: topBar
+    }), /*#__PURE__*/_jsx(Box, {
+      flex: 1,
+      children: scrollable
+    }), /*#__PURE__*/_jsx(EdgeBar, {
+      filled: bottomFilled,
+      children: bottomBar
+    })]
+  });
+};
 //# sourceMappingURL=scroll-edge-container.android.js.map

package/lib/module/molecules/scroll-edge-container/scroll-edge-container.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Box","jsx","_jsx","jsxs","_jsxs","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","children","effect","_effect","testID","topBar","sx","flex"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":";;AAAA,SAAQA,GAAG,QAAO,0BAAiB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAiD,GAAGA,CAAC;EAChEC,eAAe,EAAEC,gBAAgB;EACjCC,SAAS;EACTC,QAAQ;EACRC,MAAM,EAAEC,OAAO;EACfC,MAAM;EACNC,MAAM;EACN,GAAGC;AACqB,CAAC,kBACzBV,KAAA,CAACJ,GAAG;EAAA,GAAKc,EAAE;EAAEF,MAAM,EAAEA,MAAO;EAAAH,QAAA,GACzBI,MAAM,eACPX,IAAA,CAACF,GAAG;IAACe,IAAI,EAAE,CAAE;IAAAN,QAAA,EAAEA;EAAQ,CAAM,CAAC,EAC7BD,SAAS;AAAA,CACP,CACN","ignoreList":[]}
+{"version":3,"names":["duration","opacity","cloneElement","useCallback","useRef","useAnimatedStyle","useSharedValue","withTiming","ABox","Box","jsx","_jsx","jsxs","_jsxs","EDGE_SLOP","FILL","d200","EdgeBar","children","filled","fill","value","bg","bottom","left","pointerEvents","position","right","style","top","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","effect","_effect","testID","topBar","sx","topFilled","o0","bottomFilled","metrics","content","offset","viewport","state","flex","onContentSizeChange","onLayout","onScroll","scrollEventThrottle","props","update","current","o100","scrollable","width","height","event","nativeEvent","layout","contentOffset","y"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/stepper/stepper.ios.js

@@ -1,8 +1,21 @@
 "use strict";
 
 import { Stepper as SwiftUIStepper } from '@expo/ui/swift-ui';
+import { labelsHidden } from '@expo/ui/swift-ui/modifiers';
+import { useRef } from 'react';
+import { HStack } from "../../atoms/h-stack/index.js";
+import { Spacer } from "../../atoms/spacer/index.js";
+import { Text } from "../../atoms/text/index.js";
 import { useHostGuard } from "../../host-context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The label stays VoiceOver's, on the control; on screen it is the row's own text. */
+const LABEL_HIDDEN = [labelsHidden()];
+
+/**
+ * SwiftUI's `Stepper` at the end of a row, the label leading and the value just before the control — the way iOS's own
+ * settings show a stepped value. The value rolls to the next one (`numericText`), up or down with the change, in
+ * monospaced digits so the row does not jump.
+ */
 export const Stepper = ({
   label,
   max,
@@ -12,13 +25,37 @@ export const Stepper = ({
   value
 }) => {
   useHostGuard('Stepper');
-  return /*#__PURE__*/_jsx(SwiftUIStepper, {
-    label: label,
-    max: max,
-    min: min,
-    onValueChange: onValueChange,
-    step: step,
-    value: value
+  const previous = useRef(value);
+  const countsDown = value < previous.current;
+  previous.current = value;
+  return /*#__PURE__*/_jsxs(HStack, {
+    align: "center",
+    spacing: "s12",
+    wide: true,
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: label
+    }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(Text, {
+      color: "content.secondary",
+      ios: {
+        animation: {
+          value
+        },
+        contentTransition: {
+          countsDown,
+          type: 'numericText'
+        },
+        monospacedDigit: true
+      },
+      children: String(value)
+    }), /*#__PURE__*/_jsx(SwiftUIStepper, {
+      label: label,
+      max: max,
+      min: min,
+      modifiers: LABEL_HIDDEN,
+      onValueChange: onValueChange,
+      step: step,
+      value: value
+    })]
   });
 };
 //# sourceMappingURL=stepper.ios.js.map

package/lib/module/molecules/stepper/stepper.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Stepper","SwiftUIStepper","useHostGuard","jsx","_jsx","label","max","min","onValueChange","step","value"],"sourceRoot":"../../../../src","sources":["molecules/stepper/stepper.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAE3D,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMJ,OAAyB,GAAGA,CAAC;EAACK,KAAK;EAAEC,GAAG;EAAEC,GAAG;EAAEC,aAAa;EAAEC,IAAI,GAAG,CAAC;EAAEC;AAAmB,CAAC,KAAK;EAC5GR,YAAY,CAAC,SAAS,CAAC;EAEvB,oBAAOE,IAAA,CAACH,cAAc;IAACI,KAAK,EAAEA,KAAM;IAACC,GAAG,EAAEA,GAAI;IAACC,GAAG,EAAEA,GAAI;IAACC,aAAa,EAAEA,aAAc;IAACC,IAAI,EAAEA,IAAK;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC;AACrH,CAAC","ignoreList":[]}
+{"version":3,"names":["Stepper","SwiftUIStepper","labelsHidden","useRef","HStack","Spacer","Text","useHostGuard","jsx","_jsx","jsxs","_jsxs","LABEL_HIDDEN","label","max","min","onValueChange","step","value","previous","countsDown","current","align","spacing","wide","children","color","ios","animation","contentTransition","type","monospacedDigit","String","modifiers"],"sourceRoot":"../../../../src","sources":["molecules/stepper/stepper.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAC3D,SAAQC,YAAY,QAAO,6BAA6B;AACxD,SAAQC,MAAM,QAAO,OAAO;AAE5B,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,YAAY,GAAG,CAACV,YAAY,CAAC,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMF,OAAyB,GAAGA,CAAC;EAACa,KAAK;EAAEC,GAAG;EAAEC,GAAG;EAAEC,aAAa;EAAEC,IAAI,GAAG,CAAC;EAAEC;AAAmB,CAAC,KAAK;EAC5GX,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMY,QAAQ,GAAGhB,MAAM,CAACe,KAAK,CAAC;EAC9B,MAAME,UAAU,GAAGF,KAAK,GAAGC,QAAQ,CAACE,OAAO;EAC3CF,QAAQ,CAACE,OAAO,GAAGH,KAAK;EAExB,oBACEP,KAAA,CAACP,MAAM;IAACkB,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACC,IAAI;IAAAC,QAAA,gBACvChB,IAAA,CAACH,IAAI;MAAAmB,QAAA,EAAEZ;IAAK,CAAO,CAAC,eACpBJ,IAAA,CAACJ,MAAM,IAAE,CAAC,eACVI,IAAA,CAACH,IAAI;MACHoB,KAAK,EAAC,mBAAmB;MACzBC,GAAG,EAAE;QAACC,SAAS,EAAE;UAACV;QAAK,CAAC;QAAEW,iBAAiB,EAAE;UAACT,UAAU;UAAEU,IAAI,EAAE;QAAa,CAAC;QAAEC,eAAe,EAAE;MAAI,CAAE;MAAAN,QAAA,EAEtGO,MAAM,CAACd,KAAK;IAAC,CACV,CAAC,eACPT,IAAA,CAACR,cAAc;MACbY,KAAK,EAAEA,KAAM;MACbC,GAAG,EAAEA,GAAI;MACTC,GAAG,EAAEA,GAAI;MACTkB,SAAS,EAAErB,YAAa;MACxBI,aAAa,EAAEA,aAAc;MAC7BC,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACI,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/ripple-clip.js

@@ -8,6 +8,9 @@ const FILL = {
   flexGrow: 1
 };
 
+/** What gives the outer view a height of its own, rather than its content's. */
+const SIZING_KEYS = ['aspectRatio', 'flex', 'flexBasis', 'flexGrow', 'height', 'minHeight'];
+
 /**
  * Splits a resolved style for a pressable with an Android ripple. The ripple is drawn as the pressable's foreground,
  * which its own `overflow: hidden` does not clip — so it would spill past rounded corners. A parent clips its
@@ -28,8 +31,13 @@ export const splitForRipple = style => {
       outer[key] = value;
     }
   }
+
+  // Only a sized outer view needs the pressable stretched to it. Sized by its content it must not be: Yoga grows a
+  // `flexGrow` child of a fit-content parent to the most it may take — inside a row centred on its cross axis, the
+  // pressable would stretch to the row's full height and leave its content at the top.
+  const sized = SIZING_KEYS.some(key => flat[key] !== undefined) || flat.top !== undefined && flat.bottom !== undefined;
   return {
-    inner: [FILL, inner],
+    inner: sized ? [FILL, inner] : [inner],
     outer: outer
   };
 };

package/lib/module/ripple-clip.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","CONTENT_KEYS","Set","FILL","flexGrow","splitForRipple","style","flat","flatten","outer","overflow","inner","key","value","Object","entries","has"],"sourceRoot":"../../src","sources":["ripple-clip.ts"],"mappings":";;AAAA,SAAQA,UAAU,QAAuB,cAAc;;AAEvD;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAS,CACnC,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,QAAQ,CACT,CAAC;AAEF,MAAMC,IAAe,GAAG;EAACC,QAAQ,EAAE;AAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAIC,KAA4B,IAA6C;EACtG,MAAMC,IAAI,GAAGP,UAAU,CAACQ,OAAO,CAACF,KAAK,CAAC,IAAI,CAAC,CAAC;EAC5C,MAAMG,KAA8B,GAAG;IAACC,QAAQ,EAAE;EAAQ,CAAC;EAC3D,MAAMC,KAA8B,GAAG,CAAC,CAAC;EAEzC,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACR,IAAI,CAAC,EAAE;IAC/C,IAAIN,YAAY,CAACe,GAAG,CAACJ,GAAG,CAAC,EAAE;MACzBD,KAAK,CAACC,GAAG,CAAC,GAAGC,KAAK;IACpB,CAAC,MAAM,IAAID,GAAG,KAAK,UAAU,EAAE;MAC7BH,KAAK,CAACG,GAAG,CAAC,GAAGC,KAAK;IACpB;EACF;EAEA,OAAO;IAACF,KAAK,EAAE,CAACR,IAAI,EAAEQ,KAAK,CAAc;IAAEF,KAAK,EAAEA;EAAkB,CAAC;AACvE,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","CONTENT_KEYS","Set","FILL","flexGrow","SIZING_KEYS","splitForRipple","style","flat","flatten","outer","overflow","inner","key","value","Object","entries","has","sized","some","undefined","top","bottom"],"sourceRoot":"../../src","sources":["ripple-clip.ts"],"mappings":";;AAAA,SAAQA,UAAU,QAAuB,cAAc;;AAEvD;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAS,CACnC,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,QAAQ,CACT,CAAC;AAEF,MAAMC,IAAe,GAAG;EAACC,QAAQ,EAAE;AAAC,CAAC;;AAErC;AACA,MAAMC,WAAW,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAU;;AAEpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAIC,KAA4B,IAA6C;EACtG,MAAMC,IAAI,GAAGR,UAAU,CAACS,OAAO,CAACF,KAAK,CAAC,IAAI,CAAC,CAAC;EAC5C,MAAMG,KAA8B,GAAG;IAACC,QAAQ,EAAE;EAAQ,CAAC;EAC3D,MAAMC,KAA8B,GAAG,CAAC,CAAC;EAEzC,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACR,IAAI,CAAC,EAAE;IAC/C,IAAIP,YAAY,CAACgB,GAAG,CAACJ,GAAG,CAAC,EAAE;MACzBD,KAAK,CAACC,GAAG,CAAC,GAAGC,KAAK;IACpB,CAAC,MAAM,IAAID,GAAG,KAAK,UAAU,EAAE;MAC7BH,KAAK,CAACG,GAAG,CAAC,GAAGC,KAAK;IACpB;EACF;;EAEA;EACA;EACA;EACA,MAAMI,KAAK,GACTb,WAAW,CAACc,IAAI,CAACN,GAAG,IAAIL,IAAI,CAACK,GAAG,CAAC,KAAKO,SAAS,CAAC,IAAKZ,IAAI,CAACa,GAAG,KAAKD,SAAS,IAAIZ,IAAI,CAACc,MAAM,KAAKF,SAAU;EAE3G,OAAO;IAACR,KAAK,EAAEM,KAAK,GAAG,CAACf,IAAI,EAAES,KAAK,CAAc,GAAG,CAACA,KAAK,CAAc;IAAEF,KAAK,EAAEA;EAAkB,CAAC;AACtG,CAAC","ignoreList":[]}

package/lib/typescript/atoms/activity-indicator/activity-indicator.d.ts

@@ -1,3 +1 @@
-import type { FC } from 'react';
-import { type ActivityIndicatorProps } from 'react-native';
-export declare const ActivityIndicator: FC<ActivityIndicatorProps>;
+export * from './activity-indicator.ios';

package/lib/typescript/atoms/activity-indicator/activity-indicator.ios.d.ts

@@ -0,0 +1,3 @@
+import type { ActivityIndicatorComponent } from './activity-indicator.types';
+/** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
+export declare const ActivityIndicator: ActivityIndicatorComponent;

package/lib/typescript/atoms/activity-indicator/activity-indicator.types.d.ts

@@ -0,0 +1,17 @@
+import type { ColorToken } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type ActivityIndicatorSize = 'large' | 'small';
+/**
+ * That something is loading, for as long as it takes — UIKit's spinner on iOS, Material 3's expressive
+ * `LoadingIndicator` on Android, its shapes morphing as it turns. A React Native view on iOS and a host of its own on
+ * Android, so it renders anywhere. For how far along something is, use `Progress`.
+ */
+export type ActivityIndicatorProps = {
+    /** Its colour. `fill.accent.primary` by default. */
+    color?: ColorToken;
+    /** `small` sits in a row or a button, `large` holds a screen that is loading. `small` by default. */
+    size?: ActivityIndicatorSize;
+    /** Test identifier, forwarded to the view. */
+    testID?: string;
+};
+export type ActivityIndicatorComponent = (props: ActivityIndicatorProps) => ReactNode;

package/lib/typescript/atoms/activity-indicator/index.d.ts

@@ -1 +1,2 @@
 export * from './activity-indicator';
+export * from './activity-indicator.types';

package/lib/typescript/atoms/blur-view/blur-view.d.ts

@@ -0,0 +1 @@
+export * from './blur-view.ios';

package/lib/typescript/atoms/blur-view/blur-view.ios.d.ts

@@ -0,0 +1,3 @@
+import type { BlurViewComponent } from './blur-view.types';
+/** `borderRadius` is the material's shape, so it goes to the effect view — the one that clips — not the layout box. */
+export declare const BlurView: BlurViewComponent;

package/lib/typescript/atoms/blur-view/blur-view.types.d.ts

@@ -0,0 +1,31 @@
+import type { BlurMaterial, BlurVibrancy } from '@hzblj/kara-native/swift-ui';
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { ReactNode } from 'react';
+export type { BlurMaterial, BlurVibrancy } from '@hzblj/kara-native/swift-ui';
+/**
+ * One of the system's materials behind React Native content — what sheets, bars, menus and HUDs are made of, in
+ * SwiftUI's five thicknesses. iOS: UIKit's `system*Material` blur, with optional vibrancy for the content. Android:
+ * what lies behind, blurred and saturated (Android 12+), under a Material tonal surface as thick as the material —
+ * `surface` at `ultraThin` up to `surfaceContainerHighest` at `ultraThick`; below Android 12 the surface alone. The
+ * React Native tier: it needs no host, so it suits a list cell. Shape it with `borderRadius`; it clips its children.
+ */
+export type BlurViewProps = ResponsiveViewSx & {
+    /**
+     * Pins the material to light or dark whatever the app's appearance — a dark HUD over a light screen. Unset, it follows
+     * the app theme. Android draws the opposite appearance with Material's inverse surface.
+     */
+    appearance?: 'dark' | 'light';
+    /** React Native content, over the material. */
+    children?: ReactNode;
+    /** How much of what lies behind shows through, from `ultraThin` (most) to `ultraThick` (least). `regular` by default. */
+    material?: BlurMaterial;
+    /** Test identifier, forwarded to the view. */
+    testID?: string;
+    /**
+     * iOS: draws the children vibrant at this level, the way iOS draws its own labels and fills on a material — their
+     * colour becomes the material's vibrant one and their alpha the mask. Android has no vibrancy: the children keep
+     * their colours there.
+     */
+    vibrancy?: BlurVibrancy;
+};
+export type BlurViewComponent = (props: BlurViewProps) => ReactNode;

package/lib/typescript/atoms/blur-view/index.d.ts

@@ -0,0 +1,2 @@
+export * from './blur-view';
+export * from './blur-view.types';

package/lib/typescript/atoms/box/a-box.d.ts

@@ -1,4 +1,4 @@
-export declare const ABox: import("react-native-reanimated/lib/typescript/createAnimatedComponent").AnimatedComponentType<Readonly<Omit<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>, "align" | "alignContent" | "alignSelf" | "aspectRatio" | "basis" | "bg" | "blur" | "borderColor" | "borderRadius" | "borderWidth" | "bottom" | "columnGap" | "display" | "flex" | "flexDirection" | "gap" | "grow" | "h" | "justify" | "left" | "m" | "maxH" | "maxW" | "mb" | "minH" | "minW" | "ml" | "mr" | "mt" | "mx" | "my" | "offsetX" | "offsetY" | "opacity" | "overflow" | "p" | "pb" | "pl" | "position" | "pr" | "pt" | "px" | "py" | "right" | "rotate" | "rowGap" | "scale" | "shadow" | "shrink" | "style" | "tall" | "top" | "w" | "wide" | "wrap" | "zIndex" | keyof {
+export declare const ABox: import("react-native-reanimated/lib/typescript/createAnimatedComponent").AnimatedComponentType<Readonly<Omit<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>, "align" | "alignContent" | "alignSelf" | "aspectRatio" | "basis" | "bg" | "blur" | "borderColor" | "borderRadius" | "borderWidth" | "bottom" | "columnGap" | "display" | "flex" | "flexDirection" | "gap" | "grow" | "h" | "inset" | "justify" | "left" | "m" | "maxH" | "maxW" | "mb" | "minH" | "minW" | "ml" | "mr" | "mt" | "mx" | "my" | "offsetX" | "offsetY" | "opacity" | "overflow" | "p" | "pb" | "pl" | "position" | "pr" | "pt" | "px" | "py" | "right" | "rotate" | "rowGap" | "scale" | "shadow" | "shrink" | "style" | "tall" | "top" | "w" | "wide" | "wrap" | "zIndex" | keyof {
     borderBottomWidth?: number;
     borderLeftWidth?: number;
     borderRightWidth?: number;

package/lib/typescript/atoms/glass-view/glass-view.types.d.ts

@@ -2,18 +2,25 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 /**
- * iOS 26 Liquid Glass around a React Native subtree, shaped as a capsule — the React Native tier, so it needs no host
- * and costs next to nothing in a list cell. Where there is no Liquid Glass (Android, and iOS before 26) it draws a
- * capsule of `tint` instead, or of the glass buttons' translucent fill (`btn.bg.glass.base`) when there is none.
+ * Glass around a React Native subtree, shaped as a capsule — the React Native tier, so it needs no host. iOS 26:
+ * Liquid Glass. Android: frosted glass — what lies behind, blurred on Android 12+, under a translucent tonal surface
+ * (or `tint`) and a hairline. iOS before 26 has no Liquid Glass and draws a capsule of `tint` instead, or of the glass
+ * buttons' translucent fill (`btn.bg.glass.base`) when there is none.
+ *
+ * On Android each glass re-records what lies behind it before every frame: a few buttons cost nothing, but keep it out
+ * of the cells of a long list — a plain `tint` reads as well there.
  */
 export type GlassViewProps = ResponsiveViewSx & {
     /** React Native views. Give them `pointerEvents="none"` when `interactive`, so the press reaches the `Pressable`. */
     children?: ReactNode;
-    /** Swells toward the finger on touch, carrying the children with it. Wrap the view in a `Pressable` for the press. */
+    /**
+     * iOS 26: swells toward the finger on touch, carrying the children with it. Android has no swell: wrap the view in a
+     * `Pressable` with `borderRadius="full"`, whose ripple then keeps to the capsule. The press is always the `Pressable`'s.
+     */
     interactive?: boolean;
     /** Test identifier, forwarded to the view. */
     testID?: string;
-    /** Tints the material. Unset leaves it clear. */
+    /** Tints the material. Unset leaves it clear on iOS, and the translucent surface colour on Android. */
     tint?: ColorToken;
 };
 export type GlassViewComponent = (props: GlassViewProps) => ReactNode;

package/lib/typescript/atoms/image/image.d.ts

@@ -1,4 +1,12 @@
-import { ImageProps } from 'expo-image';
-import { FC } from 'react';
-declare const Image: FC<ImageProps>;
-export { Image };
+import { Image as ExpoImage, type ImageProps as ExpoImageProps } from 'expo-image';
+import type { Ref } from 'react';
+/**
+ * `expo-image` with the `sx` props, the way `Box` is a `View` with them, and the design system's 100 ms linear fade
+ * already applied, so a loaded image never pops in. An explicit `transition` wins, and so does an explicit `style`.
+ */
+export declare const Image: import("react").MemoExoticComponent<{
+    ({ style, ...props }: import("@hzblj/kara-sx").SxProps<ExpoImageProps & {
+        ref?: Ref<ExpoImage>;
+    }>): import("react").JSX.Element;
+    displayName: string;
+}>;

package/lib/typescript/atoms/image/image.types.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+import type { Image } from './image';
+/** Derived from the component itself, so it cannot drift from what `sx(Image)` actually accepts. */
+export type ImageProps = ComponentProps<typeof Image>;

package/lib/typescript/atoms/image/index.d.ts

@@ -1 +1,2 @@
 export * from './image';
+export * from './image.types';

package/lib/typescript/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export * from './activity-indicator';
 export * from './avatar';
 export * from './badge';
+export * from './blur-view';
 export * from './box';
 export * from './button';
 export * from './card';

package/lib/typescript/atoms/island/island.types.d.ts

@@ -1,7 +1,11 @@
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-/** A host for native atoms in a React Native layout — the SwiftUI / Compose `Host` an `@expo/ui` tree mounts into. */
-export type IslandProps = {
+/**
+ * A host for native atoms in a React Native layout — the SwiftUI / Compose `Host` an `@expo/ui` tree mounts into. It
+ * sits in that layout like a `Box`, and takes `Box`'s `sx` props for it: `h`, `flex`, margins.
+ */
+export type IslandProps = ResponsiveViewSx & {
     /** The native views it hosts. */
     children?: ReactNode;
     /**
@@ -10,13 +14,13 @@ export type IslandProps = {
      * width maps to `fixedSize(horizontal: true)`, so the native side ignores the proposed width and
      * resolves a `wide` stack's ideal width as unbounded.
      *
-     * Turn it off — and give the island an explicit size via `style` — when the subtree contains an
+     * Turn it off — and give the island an explicit height, `h` — when the subtree contains an
      * `RnView`: that host drives its SwiftUI frame from the child's Yoga-laid-out bounds while this one
      * writes its measured size back into the Yoga style, and the two together spin a layout loop that
      * hangs the main thread as soon as the views lay out on screen.
      */
     matchContents?: boolean;
-    /** A React Native style for the host view — its size and placement. It needs a height when `matchContents` is off. */
+    /** A React Native style for the host view, merged over the `sx` props — for what they cannot say. */
     style?: StyleProp<ViewStyle>;
     /** Test identifier, forwarded to the host view on iOS — Android ignores it. */
     testID?: string;

package/lib/typescript/atoms/pressable/pressable.types.d.ts

@@ -2,13 +2,15 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 import type { Haptic } from '../../haptics';
 /**
- * React Native's `Pressable`, styled through `sx` like a `Box`: it springs down to 96% while pressed and takes
- * touches 8 points past its edges. The React Native tier — it needs no host.
+ * React Native's `Pressable`, styled through `sx` like a `Box`, taking touches 8 points past its edges. The press is
+ * each platform's own: iOS springs it down to 96%; Android draws Material's ripple over the content, clipped to the
+ * pressable's shape — give it the `borderRadius` of what it wraps (`full` around a `GlassView`). The React Native
+ * tier — it needs no host.
  */
 export type PressableProps = ResponsiveViewSx & {
     /** The pressable content. */
     children?: ReactNode;
-    /** Ignores presses — no `onPress`, no haptic, no spring. */
+    /** Ignores presses — no `onPress`, no haptic, no spring or ripple. */
     disabled?: boolean;
     /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
     haptic?: boolean | Haptic;

package/lib/typescript/atoms/progress/progress.types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 /**
- * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` / Compose's
- * `LinearProgressIndicator` and `CircularProgressIndicator`.
+ * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` (a capacity `Gauge` for a ring with a
+ * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
  */
 export type ProgressProps = {
     /** A circular indicator instead of a bar. Off by default. */

package/lib/typescript/atoms/rn-text/rn-text.types.d.ts

@@ -1,8 +1,13 @@
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
-/** React Native's `Text` in a theme typography variant — the React Native tier, for text outside a native host. */
-export type RnTextProps = Omit<RNTextProps, 'style'> & {
+/**
+ * React Native's `Text` in a theme typography variant — the React Native tier, for text outside a native host. It takes
+ * `Box`'s `sx` surface for its own box — margins, flex, padding, a background — all but `align`, which here aligns the
+ * lines.
+ */
+export type RnTextProps = Omit<RNTextProps, 'style'> & Omit<ResponsiveViewSx, 'align'> & {
     /** Horizontal alignment, as React Native's `textAlign`. */
     align?: 'center' | 'left' | 'right';
     /** The text's colour. `content.primary` by default. */

package/lib/typescript/atoms/skeleton/skeleton.types.d.ts

@@ -1,14 +1,18 @@
+import type { SxDimension } from '@hzblj/kara-sx';
 import type { RadiiSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-/** A loading placeholder that pulses in `fill.quaternary` — a React Native view, so it needs no host. */
+/**
+ * A loading placeholder that pulses in `fill.quaternary` — a React Native view, so it needs no host. Sized with the
+ * `sx` names: `w`, `h`, `borderRadius`.
+ */
 export type SkeletonProps = {
     /** The corner radius. `small` by default. */
     borderRadius?: RadiiSize;
     /** In points. */
-    height: number;
+    h: number;
     /** Test identifier, forwarded to the view. */
     testID?: string;
-    /** In points. Leave it unset and it fills the available width. */
-    width?: number;
+    /** In points, or a percentage of the row (`60%` for a line that ends early). Unset, it fills the row. */
+    w?: SxDimension;
 };
 export type SkeletonComponent = (props: SkeletonProps) => ReactNode;

package/lib/typescript/atoms/surface/surface.types.d.ts

@@ -1,8 +1,8 @@
 import type { ResponsiveSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 /**
- * A container padded `s16` and rounded `large` unless told otherwise — a SwiftUI `VStack` on iOS, Material's
- * `Surface` around a `Column` on Android.
+ * A container on `surface.primary`, padded `s16` and rounded `large` unless told otherwise — a SwiftUI `VStack` on
+ * iOS, Material's `Surface` around a `Column` on Android.
  */
 export type SurfaceProps = ResponsiveSx & {
     /** Stacked vertically, from the leading edge. */

package/lib/typescript/atoms/text/text.types.d.ts

@@ -1,10 +1,15 @@
+import type { ResponsiveSx } from '@hzblj/kara-sx';
 import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 export type TextAlign = 'center' | 'left' | 'right';
 export type TextDecoration = 'none' | 'strikethrough' | 'underline';
 export type TextTransform = 'lowercase' | 'uppercase';
-/** SwiftUI `Text` / Compose `Text` in a theme typography variant — a native atom; outside a host, use `RnText`. */
-export type TextProps = {
+/**
+ * SwiftUI `Text` / Compose `Text` in a theme typography variant — a native atom; outside a host, use `RnText`. It takes
+ * the native `sx` surface too: padding, a frame (`wide` lines it up by `align`), a background, and the `ios` bucket's
+ * `contentTransition`, `animation` and `monospacedDigit` for a number that changes in place.
+ */
+export type TextProps = ResponsiveSx & {
     /**
      * How its lines align. iOS reads `left` and `right` as leading and trailing, so they flip in a right-to-left
      * layout; Android keeps them as they are.