@hzblj/kara-components 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @hzblj/kara-components
 
+## 0.9.0
+
+### Minor Changes
+
+- [#21](https://github.com/hzblj/kara-ui/pull/21) [`356c00f`](https://github.com/hzblj/kara-ui/commit/356c00f76eee8323c4eb65ed4cbcda121c3af627) Thanks [@hzblj](https://github.com/hzblj)! - `TextField`'s `error` takes a message: `error="A postcode has five digits."` shows it under the field — Material's supporting text beside its error icon on Android — so an error never rests on colour alone, which in dark mode Material draws a pale red. `error` alone still marks the field. kara's glyphs gain `error` for it.
+
+  `Tabs` on iOS tint their icons: the selected one takes the accent and the rest the label colour. Expo Router tints an asset-catalog icon only when both states have an icon colour, so with the accent alone every icon kept its SVG's black, selected or not, in dark mode too.
+
+  `Surface` on iOS sits on `surface.primary` unless told otherwise, as it does on Android; a plain one drew nothing behind its content. `Progress` with `circular` and a `value` is a ring that fills on iOS — a SwiftUI capacity `Gauge` — where a circular `ProgressView` ignored the value and spun.
+
+### Patch Changes
+
+- Updated dependencies [[`356c00f`](https://github.com/hzblj/kara-ui/commit/356c00f76eee8323c4eb65ed4cbcda121c3af627)]:
+  - @hzblj/kara-native@0.9.0
+  - @hzblj/kara-theme@0.9.0
+  - @hzblj/kara-sx@0.9.0
+
+## 0.8.0
+
+### Minor Changes
+
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `ActivityIndicator` plays Material 3's expressive `LoadingIndicator` on Android — its shapes morph as it turns — in a host of its own, so it still renders anywhere; iOS keeps UIKit's spinner. It takes the design system's props now, not React Native's: `color` is a token (`fill.accent.primary` by default), `size` is `small` or `large`.
+
+  `Collapsible` on Android spans its parent, the chevron at the far end, and its row is never shorter than Material's 48dp touch target; the chevron sat right after the label. `Pager`'s dots on Android are centred under the pages.
+
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - Android gets glass and a scroll edge of its own.
+
+  - `GlassView` is frosted glass on Android: what lies behind the capsule, blurred (Android 12+), under a translucent tonal surface — or its `tint` — and a light hairline, the blurred surfaces Android 16 gives its own system UI. It was an almost clear capsule that left its content unreadable over a photo. Below Android 12 the same colours are drawn near-opaque. kara-native's new `BackdropBlurView` (`/jetpack-compose`) does the blur — blurred, then saturated, as iOS lifts the colour under its materials: a plain view, no host, and an idle screen draws no frames.
+  - `ScrollEdgeContainer` on Android behaves like a Material top app bar on scroll: the bars stay transparent at rest and fill with the scrolled container colour once content scrolls under the top one, the bottom one while there is more below. Its scroll view also takes the room between the bars now — it grew to its content's height, ran under the bottom bar and could not scroll.
+  - New token `surface.secondary`: Material's `surfaceContainer` on Android, `tertiarySystemGroupedBackgroundColor` on iOS — a step above `surface.primary`.
+
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `Pressable` on Android presses the Material way: a ripple over the content — the pressed state layer — clipped to the pressable's shape, and nothing scales. iOS keeps its spring to 96%. Give the `Pressable` the `borderRadius` of what it wraps (`full` around a `GlassView`) and the ripple follows it.
+
+  `Collapsible` on Android expands down from its row with a fade, and its chevron turns toward the content; it grew from a corner and the chevron jumped.
+
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - New `BlurView`: the system materials, by SwiftUI's names — `ultraThin`, `thin`, `regular`, `thick`, `ultraThick`.
+
+  - iOS: UIKit's `system*Material` blur as a plain view — no SwiftUI host, cheap enough for a list cell — with `vibrancy` (`primary` to `quaternary`, `fill`, `separator`) to draw the content the way iOS draws its own on a material.
+  - Android: what lies behind, blurred and saturated (Android 12+), under a Material tonal surface that rises from `surface` to `surfaceContainerHighest` as the material thickens; below Android 12 the surface alone.
+  - `appearance` pins a material to light or dark whatever the app's; `borderRadius` shapes it and clips the content.
+
+  kara-native adds `BlurView` (`/swift-ui`).
+
+- [#17](https://github.com/hzblj/kara-ui/pull/17) [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29) Thanks [@hzblj](https://github.com/hzblj)! - `sx` reaches the components that still took raw styles or none:
+
+  - `Text` takes the native `sx` surface — padding, a background, a frame (`wide` puts the text on the side `align` names) and the `ios` bucket. `ios.contentTransition` with the new `ios.animation` rolls a number to its next value, and `ios.monospacedDigit` keeps it from shifting what follows. `Stepper` on iOS is built on it.
+  - `RnText` takes `Box`'s `sx` props for its own box — margins, `flex`, padding — all but `align`, which still aligns its lines.
+  - `Image` is `sx(expo-image)`, the way `Box` is `sx(View)`: `w`, `h`, `aspectRatio`, `borderRadius`, `position`… instead of a `style` object. Its props are exported as `ImageProps`.
+  - `Island` takes the same `sx` props for where it sits in React Native layout: `<Island h={240} matchContents={false}>`. An explicit `style` still wins.
+  - `Skeleton` is sized with the `sx` names, `h` and `w` (was `height` and `width`), and `w` takes a percentage: `<Skeleton h={12} w="60%" />` for a line that ends early.
+  - The React Native surface gains `inset`, all four edges at once: `position="absolute" inset={0}` fills the parent.
+
+### Patch Changes
+
+- Updated dependencies [[`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29), [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29), [`bf2e70c`](https://github.com/hzblj/kara-ui/commit/bf2e70c8ae5a07fffb6433bd2ce08e371695ec50), [`4c7eaa0`](https://github.com/hzblj/kara-ui/commit/4c7eaa021ee4a4b0475e1dfb420fa5803c21ba29)]:
+  - @hzblj/kara-native@0.8.0
+  - @hzblj/kara-theme@0.8.0
+  - @hzblj/kara-sx@0.8.0
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -8,9 +8,9 @@
 [license-badge]: https://img.shields.io/badge/license-MIT-ff5700?labelColor=27272a
 [license-url]: https://github.com/hzblj/kara-ui/blob/main/LICENSE
 
-<a href="https://kara.janblazej.dev"><img src="https://kara.janblazej.dev/og.png" alt="Kara — native UI for Expo: real SwiftUI and Jetpack Compose views" width="720"></a>
+<a href="https://www.kara.janblazej.dev"><img src="https://www.kara.janblazej.dev/og.png" alt="Kara — native UI for Expo: real SwiftUI and Jetpack Compose views" width="720"></a>
 
-The components of [Kara UI](https://kara.janblazej.dev) — a native-first design system for Expo.
+The components of [Kara UI](https://www.kara.janblazej.dev) — a native-first design system for Expo.
 
 > **Install [`@hzblj/kara-ui`](https://www.npmjs.com/package/@hzblj/kara-ui) instead.** This package is one of its
 > building blocks, published so its types resolve; everything here is re-exported from `@hzblj/kara-ui`.
@@ -26,9 +26,9 @@ The components of [Kara UI](https://kara.janblazej.dev) — a native-first desig
 
 ## Documentation
 
-- [Components](https://kara.janblazej.dev/docs/components) — every one photographed on iOS and Android, with its props
-- [Screen and Island](https://kara.janblazej.dev/docs/hosts)
-- [Haptics](https://kara.janblazej.dev/docs/haptics)
+- [Components](https://www.kara.janblazej.dev/docs/components) — every one photographed on iOS and Android, with its props
+- [Screen and Island](https://www.kara.janblazej.dev/docs/hosts)
+- [Haptics](https://www.kara.janblazej.dev/docs/haptics)
 
 ## License
 

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

@@ -0,0 +1,42 @@
+"use strict";
+
+import { Host, LoadingIndicator } from '@expo/ui/jetpack-compose';
+import { fillMaxSize, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+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({
+  large: {
+    height: 48,
+    width: 48
+  },
+  small: {
+    height: 24,
+    width: 24
+  }
+});
+
+/**
+ * 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.
+ */
+export const ActivityIndicator = ({
+  color = 'fill.accent.primary',
+  size = 'small',
+  testID
+}) => {
+  const theme = useAppTheme();
+  const modifiers = useMemo(() => testID ? [fillMaxSize(), testIdModifier(testID)] : [fillMaxSize()], [testID]);
+  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
+    })
+  });
+};
+//# sourceMappingURL=activity-indicator.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Host","LoadingIndicator","fillMaxSize","testID","testIdModifier","useAppTheme","useMemo","StyleSheet","jsx","_jsx","styles","create","large","height","width","small","ActivityIndicator","color","size","theme","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,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,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdf;AACsB,CAAC,KAAK;EAC5B,MAAMgB,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,SAAS,GAAGd,OAAO,CAAC,MAAOH,MAAM,GAAG,CAACD,WAAW,CAAC,CAAC,EAAEE,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,CAACD,WAAW,CAAC,CAAC,CAAE,EAAE,CAACC,MAAM,CAAC,CAAC;EAE/G,oBACEM,IAAA,CAACT,IAAI;IAACqB,WAAW,EAAEF,KAAK,CAACG,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,SAAS,EAAEJ,KAAK,CAACK,YAAa;IAACC,KAAK,EAAEf,MAAM,CAACQ,IAAI,CAAE;IAAAQ,QAAA,eACnGjB,IAAA,CAACR,gBAAgB;MAACgB,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACA,KAAK,CAAE;MAACG,SAAS,EAAEA;IAAU,CAAE;EAAC,CACjE,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+import { useAppTheme } from '@hzblj/kara-theme';
+import { ActivityIndicator as RNActivityIndicator } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
+export const ActivityIndicator = ({
+  color = 'fill.accent.primary',
+  size = 'small',
+  testID
+}) => {
+  const theme = useAppTheme();
+  return /*#__PURE__*/_jsx(RNActivityIndicator, {
+    color: theme.color(color),
+    size: size,
+    testID: testID
+  });
+};
+//# sourceMappingURL=activity-indicator.ios.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","ActivityIndicator","RNActivityIndicator","jsx","_jsx","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,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,KAAK,GAAGR,WAAW,CAAC,CAAC;EAE3B,oBAAOI,IAAA,CAACF,mBAAmB;IAACG,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAACC,IAAI,EAAEA,IAAK;IAACC,MAAM,EAAEA;EAAO,CAAE,CAAC;AACvF,CAAC","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=activity-indicator.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.types.ts"],"mappings":"","ignoreList":[]}

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

@@ -1,4 +1,5 @@
 "use strict";
 
-export * from "./activity-indicator.js";
+export * from './activity-indicator';
+export * from "./activity-indicator.types.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/index.ts"],"mappings":";;AAAA,cAAc,yBAAsB","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/index.ts"],"mappings":";;AAAA,cAAc,sBAAsB;AACpC,cAAc,+BAA4B","ignoreList":[]}

package/lib/module/atoms/avatar/avatar.js

@@ -32,11 +32,9 @@ export const Avatar = ({
     testID: testID,
     w: diameter,
     children: source ? /*#__PURE__*/_jsx(Image, {
+      h: diameter,
       source: source,
-      style: {
-        height: diameter,
-        width: diameter
-      }
+      w: diameter
     }) : /*#__PURE__*/_jsx(RnText, {
       color: "content.secondary",
       variant: VARIANT[size],

package/lib/module/atoms/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"names":["spacing","Box","Image","RnText","jsx","_jsx","DIAMETER","lg","s64","md","s40","sm","s24","VARIANT","Avatar","initials","size","source","testID","diameter","align","bg","borderRadius","h","justify","overflow","w","children","style","height","width","color","variant"],"sourceRoot":"../../../../src","sources":["atoms/avatar/avatar.tsx"],"mappings":";;AAAA,SAAQA,OAAO,QAAO,mBAAmB;AAEzC,SAAQC,GAAG,QAAO,iBAAQ;AAC1B,SAAQC,KAAK,QAAO,mBAAU;AAC9B,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGjC,MAAMC,QAAQ,GAAG;EACfC,EAAE,EAAEP,OAAO,CAACQ,GAAG;EACfC,EAAE,EAAET,OAAO,CAACU,GAAG;EACfC,EAAE,EAAEX,OAAO,CAACY;AACd,CAA+C;AAE/C,MAAMC,OAAO,GAAG;EACdN,EAAE,EAAE,WAAW;EACfE,EAAE,EAAE,aAAa;EACjBE,EAAE,EAAE;AACN,CAAU;AAEV,OAAO,MAAMG,MAAuB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,IAAI,GAAG,IAAI;EAAEC,MAAM;EAAEC;AAAmB,CAAC,KAAK;EAC/F,MAAMC,QAAQ,GAAGb,QAAQ,CAACU,IAAI,CAAC;EAE/B,oBACEX,IAAA,CAACJ,GAAG;IACFmB,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,eAAe;IAClBC,YAAY,EAAC,MAAM;IACnBC,CAAC,EAAEJ,QAAS;IACZK,OAAO,EAAC,QAAQ;IAChBC,QAAQ,EAAC,QAAQ;IACjBP,MAAM,EAAEA,MAAO;IACfQ,CAAC,EAAEP,QAAS;IAAAQ,QAAA,EAEXV,MAAM,gBACLZ,IAAA,CAACH,KAAK;MAACe,MAAM,EAAEA,MAAO;MAACW,KAAK,EAAE;QAACC,MAAM,EAAEV,QAAQ;QAAEW,KAAK,EAAEX;MAAQ;IAAE,CAAE,CAAC,gBAErEd,IAAA,CAACF,MAAM;MAAC4B,KAAK,EAAC,mBAAmB;MAACC,OAAO,EAAEnB,OAAO,CAACG,IAAI,CAAE;MAAAW,QAAA,EACtDZ,QAAQ,IAAI;IAAE,CACT;EACT,CACE,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["spacing","Box","Image","RnText","jsx","_jsx","DIAMETER","lg","s64","md","s40","sm","s24","VARIANT","Avatar","initials","size","source","testID","diameter","align","bg","borderRadius","h","justify","overflow","w","children","color","variant"],"sourceRoot":"../../../../src","sources":["atoms/avatar/avatar.tsx"],"mappings":";;AAAA,SAAQA,OAAO,QAAO,mBAAmB;AAEzC,SAAQC,GAAG,QAAO,iBAAQ;AAC1B,SAAQC,KAAK,QAAO,mBAAU;AAC9B,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGjC,MAAMC,QAAQ,GAAG;EACfC,EAAE,EAAEP,OAAO,CAACQ,GAAG;EACfC,EAAE,EAAET,OAAO,CAACU,GAAG;EACfC,EAAE,EAAEX,OAAO,CAACY;AACd,CAA+C;AAE/C,MAAMC,OAAO,GAAG;EACdN,EAAE,EAAE,WAAW;EACfE,EAAE,EAAE,aAAa;EACjBE,EAAE,EAAE;AACN,CAAU;AAEV,OAAO,MAAMG,MAAuB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,IAAI,GAAG,IAAI;EAAEC,MAAM;EAAEC;AAAmB,CAAC,KAAK;EAC/F,MAAMC,QAAQ,GAAGb,QAAQ,CAACU,IAAI,CAAC;EAE/B,oBACEX,IAAA,CAACJ,GAAG;IACFmB,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,eAAe;IAClBC,YAAY,EAAC,MAAM;IACnBC,CAAC,EAAEJ,QAAS;IACZK,OAAO,EAAC,QAAQ;IAChBC,QAAQ,EAAC,QAAQ;IACjBP,MAAM,EAAEA,MAAO;IACfQ,CAAC,EAAEP,QAAS;IAAAQ,QAAA,EAEXV,MAAM,gBACLZ,IAAA,CAACH,KAAK;MAACqB,CAAC,EAAEJ,QAAS;MAACF,MAAM,EAAEA,MAAO;MAACS,CAAC,EAAEP;IAAS,CAAE,CAAC,gBAEnDd,IAAA,CAACF,MAAM;MAACyB,KAAK,EAAC,mBAAmB;MAACC,OAAO,EAAEhB,OAAO,CAACG,IAAI,CAAE;MAAAW,QAAA,EACtDZ,QAAQ,IAAI;IAAE,CACT;EACT,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/atoms/blur-view/blur-view.android.js

@@ -0,0 +1,100 @@
+"use strict";
+
+import { BackdropBlurView } from '@hzblj/kara-native/jetpack-compose';
+import { useSx } from '@hzblj/kara-sx';
+import { useAppTheme, withOpacity } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MATERIALS = {
+  regular: {
+    blur: 28,
+    fill: 'surface.secondary',
+    opacity: {
+      dark: 'o75',
+      light: 'o60'
+    },
+    saturation: 1.6
+  },
+  thick: {
+    blur: 30,
+    fill: 'surface.secondary',
+    opacity: {
+      dark: 'o85',
+      light: 'o80'
+    },
+    saturation: 1.4
+  },
+  thin: {
+    blur: 24,
+    fill: 'surface.primary',
+    opacity: {
+      dark: 'o60',
+      light: 'o40'
+    },
+    saturation: 1.7
+  },
+  ultraThick: {
+    blur: 32,
+    fill: 'fill.quaternary',
+    opacity: {
+      dark: 'o90',
+      light: 'o90'
+    },
+    saturation: 1.2
+  },
+  ultraThin: {
+    blur: 20,
+    fill: 'surface.base',
+    opacity: {
+      dark: 'o50',
+      light: 'o25'
+    },
+    saturation: 1.8
+  }
+};
+
+/**
+ * The materials in Android's terms: kara's `BackdropBlurView` — what lies behind, blurred and saturated — under a
+ * Material tonal surface that gets higher and more opaque as the material thickens. Pinned to the appearance the app
+ * is not in, the surface is Material's inverse one. `vibrancy` has no Android counterpart and is left out.
+ */
+export const BlurView = ({
+  appearance,
+  children,
+  material = 'regular',
+  testID,
+  vibrancy: _vibrancy,
+  ...sx
+}) => {
+  const theme = useAppTheme();
+  const resolved = useSx(sx);
+  const spec = MATERIALS[material];
+  const inverted = appearance !== undefined && appearance === 'dark' !== theme.dark;
+  const dark = appearance ? appearance === 'dark' : theme.dark;
+  const base = String(theme.color(inverted ? 'surface.high.contrast' : spec.fill));
+  const {
+    cornerRadius,
+    style
+  } = useMemo(() => {
+    const {
+      borderRadius,
+      ...rest
+    } = StyleSheet.flatten(resolved) ?? {};
+    return {
+      cornerRadius: typeof borderRadius === 'number' ? borderRadius : 0,
+      style: rest
+    };
+  }, [resolved]);
+  return /*#__PURE__*/_jsx(BackdropBlurView, {
+    blurRadius: spec.blur,
+    cornerRadius: cornerRadius,
+    fallbackTint: withOpacity(base, 'o95'),
+    glassTint: withOpacity(base, spec.opacity[dark ? 'dark' : 'light']),
+    saturation: spec.saturation,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+//# sourceMappingURL=blur-view.android.js.map

package/lib/module/atoms/blur-view/blur-view.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BackdropBlurView","useSx","useAppTheme","withOpacity","useMemo","StyleSheet","jsx","_jsx","MATERIALS","regular","blur","fill","opacity","dark","light","saturation","thick","thin","ultraThick","ultraThin","BlurView","appearance","children","material","testID","vibrancy","_vibrancy","sx","theme","resolved","spec","inverted","undefined","base","String","color","cornerRadius","style","borderRadius","rest","flatten","blurRadius","fallbackTint","glassTint"],"sourceRoot":"../../../../src","sources":["atoms/blur-view/blur-view.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/blur-view/blur-view.ios.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { BlurView as NativeBlurView } from '@hzblj/kara-native/swift-ui';
+import { useSx } from '@hzblj/kara-sx';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** `borderRadius` is the material's shape, so it goes to the effect view — the one that clips — not the layout box. */
+export const BlurView = ({
+  appearance,
+  children,
+  material = 'regular',
+  testID,
+  vibrancy,
+  ...sx
+}) => {
+  const theme = useAppTheme();
+  const resolved = useSx(sx);
+  const {
+    cornerRadius,
+    style
+  } = useMemo(() => {
+    const {
+      borderRadius,
+      ...rest
+    } = StyleSheet.flatten(resolved) ?? {};
+    return {
+      cornerRadius: typeof borderRadius === 'number' ? borderRadius : 0,
+      style: rest
+    };
+  }, [resolved]);
+  return /*#__PURE__*/_jsx(NativeBlurView, {
+    colorScheme: appearance ?? (theme.dark ? 'dark' : 'light'),
+    cornerRadius: cornerRadius,
+    material: material,
+    style: style,
+    testID: testID,
+    vibrancy: vibrancy,
+    children: children
+  });
+};
+//# sourceMappingURL=blur-view.ios.js.map

package/lib/module/atoms/blur-view/blur-view.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BlurView","NativeBlurView","useSx","useAppTheme","useMemo","StyleSheet","jsx","_jsx","appearance","children","material","testID","vibrancy","sx","theme","resolved","cornerRadius","style","borderRadius","rest","flatten","colorScheme","dark"],"sourceRoot":"../../../../src","sources":["atoms/blur-view/blur-view.ios.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,IAAIC,cAAc,QAAO,6BAA6B;AACtE,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIvC;AACA,OAAO,MAAMP,QAA2B,GAAGA,CAAC;EAC1CQ,UAAU;EACVC,QAAQ;EACRC,QAAQ,GAAG,SAAS;EACpBC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACU,CAAC,KAAK;EACnB,MAAMC,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,QAAQ,GAAGb,KAAK,CAACW,EAAE,CAAC;EAC1B,MAAM;IAACG,YAAY;IAAEC;EAAK,CAAC,GAAGb,OAAO,CAAC,MAAM;IAC1C,MAAM;MAACc,YAAY;MAAE,GAAGC;IAAI,CAAC,GAAGd,UAAU,CAACe,OAAO,CAACL,QAAQ,CAAC,IAAI,CAAC,CAAC;IAClE,OAAO;MAACC,YAAY,EAAE,OAAOE,YAAY,KAAK,QAAQ,GAAGA,YAAY,GAAG,CAAC;MAAED,KAAK,EAAEE;IAAI,CAAC;EACzF,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,oBACER,IAAA,CAACN,cAAc;IACboB,WAAW,EAAEb,UAAU,KAAKM,KAAK,CAACQ,IAAI,GAAG,MAAM,GAAG,OAAO,CAAE;IAC3DN,YAAY,EAAEA,YAAa;IAC3BN,QAAQ,EAAEA,QAAS;IACnBO,KAAK,EAAEA,KAAM;IACbN,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IAAAH,QAAA,EAElBA;EAAQ,CACK,CAAC;AAErB,CAAC","ignoreList":[]}

package/lib/module/atoms/blur-view/blur-view.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=blur-view.types.js.map

package/lib/module/atoms/blur-view/blur-view.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/blur-view/blur-view.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/atoms/blur-view/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from './blur-view';
+export * from "./blur-view.types.js";
+//# sourceMappingURL=index.js.map

package/lib/module/atoms/blur-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/blur-view/index.ts"],"mappings":";;AAAA,cAAc,aAAa;AAC3B,cAAc,sBAAmB","ignoreList":[]}

package/lib/module/atoms/glass-view/glass-view.android.js

@@ -1,9 +1,40 @@
 "use strict";
 
-import { GlassFallback } from "./glass-fallback.js";
+import { BackdropBlurView } from '@hzblj/kara-native/jetpack-compose';
+import { useSx } from '@hzblj/kara-sx';
+import { radii, useAppTheme, withOpacity } from '@hzblj/kara-theme';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** Android has no Liquid Glass, so this is always the fallback capsule. */
-export const GlassView = props => /*#__PURE__*/_jsx(GlassFallback, {
-  ...props
-});
+/** dp. Strong enough that a photo behind reads as colour and light, not as detail. */
+const BLUR_RADIUS = 16;
+
+/**
+ * Frosted glass, Android's way: what lies behind the capsule, blurred (Android 12+), under a tonal Material surface
+ * and a light hairline — the blurred surfaces Android 16 gives its own system UI, not a copy of iOS's lens. Without a
+ * tint it is the surface colour, translucent, so the content keeps its usual colours on it; a tint fills it with that
+ * colour instead. Below Android 12, with nothing to blur, the same colours are drawn near-opaque. Android has no swell,
+ * so `interactive` changes nothing here — the `Pressable` around it gives the press its feedback.
+ */
+export const GlassView = ({
+  children,
+  interactive: _interactive,
+  testID,
+  tint,
+  ...sx
+}) => {
+  const theme = useAppTheme();
+  const style = useSx(sx);
+  const base = String(theme.color(tint ?? 'surface.primary'));
+  return /*#__PURE__*/_jsx(BackdropBlurView, {
+    blurRadius: BLUR_RADIUS,
+    cornerRadius: radii.full,
+    fallbackTint: withOpacity(base, 'o95'),
+    glassTint: withOpacity(base, tint ? 'o85' : 'o50'),
+    hairlineColor: withOpacity(String(theme.color('content.on.bg')), theme.dark ? 'o20' : 'o60'),
+    hairlineWidth: 1,
+    saturation: 1.6,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
 //# sourceMappingURL=glass-view.android.js.map

package/lib/module/atoms/glass-view/glass-view.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["GlassFallback","jsx","_jsx","GlassView","props"],"sourceRoot":"../../../../src","sources":["atoms/glass-view/glass-view.android.tsx"],"mappings":";;AAAA,SAAQA,aAAa,QAAO,qBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG9C;AACA,OAAO,MAAMC,SAA6B,GAAIC,KAAqB,iBAAKF,IAAA,CAACF,aAAa;EAAA,GAAKI;AAAK,CAAG,CAAC","ignoreList":[]}
+{"version":3,"names":["BackdropBlurView","useSx","radii","useAppTheme","withOpacity","jsx","_jsx","BLUR_RADIUS","GlassView","children","interactive","_interactive","testID","tint","sx","theme","style","base","String","color","blurRadius","cornerRadius","full","fallbackTint","glassTint","hairlineColor","dark","hairlineWidth","saturation"],"sourceRoot":"../../../../src","sources":["atoms/glass-view/glass-view.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oCAAoC;AACnE,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,KAAK,EAAEC,WAAW,EAAEC,WAAW,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjE;AACA,MAAMC,WAAW,GAAG,EAAE;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,QAAQ;EACRC,WAAW,EAAEC,YAAY;EACzBC,MAAM;EACNC,IAAI;EACJ,GAAGC;AACW,CAAC,KAAK;EACpB,MAAMC,KAAK,GAAGZ,WAAW,CAAC,CAAC;EAC3B,MAAMa,KAAK,GAAGf,KAAK,CAACa,EAAE,CAAC;EACvB,MAAMG,IAAI,GAAGC,MAAM,CAACH,KAAK,CAACI,KAAK,CAACN,IAAI,IAAI,iBAAiB,CAAC,CAAC;EAE3D,oBACEP,IAAA,CAACN,gBAAgB;IACfoB,UAAU,EAAEb,WAAY;IACxBc,YAAY,EAAEnB,KAAK,CAACoB,IAAK;IACzBC,YAAY,EAAEnB,WAAW,CAACa,IAAI,EAAE,KAAK,CAAE;IACvCO,SAAS,EAAEpB,WAAW,CAACa,IAAI,EAAEJ,IAAI,GAAG,KAAK,GAAG,KAAK,CAAE;IACnDY,aAAa,EAAErB,WAAW,CAACc,MAAM,CAACH,KAAK,CAACI,KAAK,CAAC,eAAe,CAAC,CAAC,EAAEJ,KAAK,CAACW,IAAI,GAAG,KAAK,GAAG,KAAK,CAAE;IAC7FC,aAAa,EAAE,CAAE;IACjBC,UAAU,EAAE,GAAI;IAChBZ,KAAK,EAAEA,KAAM;IACbJ,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAEdA;EAAQ,CACO,CAAC;AAEvB,CAAC","ignoreList":[]}

package/lib/module/atoms/image/image.js

@@ -1,14 +1,21 @@
 "use strict";
 
+import { sx } from '@hzblj/kara-sx';
 import { duration } from '@hzblj/kara-theme';
 import { Image as ExpoImage } from 'expo-image';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Image = props => /*#__PURE__*/_jsx(ExpoImage, {
-  transition: {
-    duration: duration.d100,
-    timing: 'linear'
-  },
+const FADE = {
+  duration: duration.d100,
+  timing: 'linear'
+};
+const FadingImage = props => /*#__PURE__*/_jsx(ExpoImage, {
+  transition: FADE,
   ...props
 });
-export { Image };
+
+/**
+ * `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 const Image = sx(FadingImage);
 //# sourceMappingURL=image.js.map

package/lib/module/atoms/image/image.js.map

@@ -1 +1 @@
-{"version":3,"names":["duration","Image","ExpoImage","jsx","_jsx","props","transition","d100","timing"],"sourceRoot":"../../../../src","sources":["atoms/image/image.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,QAAO,mBAAmB;AAC1C,SAAQC,KAAK,IAAIC,SAAS,QAAmB,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGzD,MAAMH,KAAqB,GAAGI,KAAK,iBACjCD,IAAA,CAACF,SAAS;EACRI,UAAU,EAAE;IACVN,QAAQ,EAAEA,QAAQ,CAACO,IAAI;IACvBC,MAAM,EAAE;EACV,CAAE;EAAA,GACEH;AAAK,CACV,CACF;AAED,SAAQJ,KAAK","ignoreList":[]}
+{"version":3,"names":["sx","duration","Image","ExpoImage","jsx","_jsx","FADE","d100","timing","FadingImage","props","transition"],"sourceRoot":"../../../../src","sources":["atoms/image/image.tsx"],"mappings":";;AAAA,SAAQA,EAAE,QAAO,gBAAgB;AACjC,SAAQC,QAAQ,QAAO,mBAAmB;AAC1C,SAAQC,KAAK,IAAIC,SAAS,QAA0C,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhF,MAAMC,IAAI,GAAG;EAACL,QAAQ,EAAEA,QAAQ,CAACM,IAAI;EAAEC,MAAM,EAAE;AAAQ,CAAU;AAEjE,MAAMC,WAAW,GAAIC,KAA8C,iBAAKL,IAAA,CAACF,SAAS;EAACQ,UAAU,EAAEL,IAAK;EAAA,GAAKI;AAAK,CAAG,CAAC;;AAElH;AACA;AACA;AACA;AACA,OAAO,MAAMR,KAAK,GAAGF,EAAE,CAACS,WAAW,CAAC","ignoreList":[]}

package/lib/module/atoms/image/image.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=image.types.js.map

package/lib/module/atoms/image/image.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/image/image.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/atoms/image/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 export * from "./image.js";
+export * from "./image.types.js";
 //# sourceMappingURL=index.js.map

package/lib/module/atoms/image/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/image/index.ts"],"mappings":";;AAAA,cAAc,YAAS","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/image/index.ts"],"mappings":";;AAAA,cAAc,YAAS;AACvB,cAAc,kBAAe","ignoreList":[]}

package/lib/module/atoms/index.js

@@ -3,6 +3,7 @@
 export * from "./activity-indicator/index.js";
 export * from "./avatar/index.js";
 export * from "./badge/index.js";
+export * from "./blur-view/index.js";
 export * from "./box/index.js";
 export * from "./button/index.js";
 export * from "./card/index.js";

package/lib/module/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;AAAA,cAAc,+BAAsB;AACpC,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,gBAAO;AACrB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,yBAAgB;AAC9B,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,gBAAO;AACrB,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,qBAAY;AAC1B,cAAc,yBAAgB;AAC9B,cAAc,oBAAW;AACzB,cAAc,2BAAkB;AAChC,cAAc,4BAAmB;AACjC,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,wBAAe;AAC7B,cAAc,8BAAqB;AACnC,cAAc,qBAAY;AAC1B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,oBAAW","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;AAAA,cAAc,+BAAsB;AACpC,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,gBAAO;AACrB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,yBAAgB;AAC9B,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,gBAAO;AACrB,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,qBAAY;AAC1B,cAAc,yBAAgB;AAC9B,cAAc,oBAAW;AACzB,cAAc,2BAAkB;AAChC,cAAc,4BAAmB;AACjC,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,wBAAe;AAC7B,cAAc,8BAAqB;AACnC,cAAc,qBAAY;AAC1B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW;AACzB,cAAc,oBAAW","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 "use strict";
 
 import { Host } from '@expo/ui/jetpack-compose';
+import { useSx } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { HostBoundary } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,14 +16,17 @@ const MATCH_NEITHER = {
 export const Island = ({
   children,
   matchContents = true,
-  style
+  style,
+  testID: _testID,
+  ...sx
 }) => {
   const theme = useAppTheme();
+  const resolved = useSx(sx);
   return /*#__PURE__*/_jsx(Host, {
     colorScheme: theme.dark ? 'dark' : 'light',
     matchContents: matchContents ? MATCH_HEIGHT_ONLY : MATCH_NEITHER,
     seedColor: theme.materialSeed,
-    style: style,
+    style: style ? [resolved, style] : resolved,
     children: /*#__PURE__*/_jsx(HostBoundary, {
       children: children
     })

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

@@ -1 +1 @@
-{"version":3,"names":["Host","useAppTheme","HostBoundary","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","MATCH_NEITHER","Island","children","matchContents","style","theme","colorScheme","dark","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/island/island.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,QAAO,0BAA0B;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;AAE7D,MAAMC,aAAa,GAAG;EAACF,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAK,CAAC;AAE1D,OAAO,MAAME,MAAuB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,aAAa,GAAG,IAAI;EAAEC;AAAkB,CAAC,KAAK;EAC/F,MAAMC,KAAK,GAAGZ,WAAW,CAAC,CAAC;EAE3B,oBACEG,IAAA,CAACJ,IAAI;IACHc,WAAW,EAAED,KAAK,CAACE,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC3CJ,aAAa,EAAEA,aAAa,GAAGN,iBAAiB,GAAGG,aAAc;IACjEQ,SAAS,EAAEH,KAAK,CAACI,YAAa;IAC9BL,KAAK,EAAEA,KAAM;IAAAF,QAAA,eAEbN,IAAA,CAACF,YAAY;MAAAQ,QAAA,EAAEA;IAAQ,CAAe;EAAC,CACnC,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["Host","useSx","useAppTheme","HostBoundary","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","MATCH_NEITHER","Island","children","matchContents","style","testID","_testID","sx","theme","resolved","colorScheme","dark","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/island/island.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,QAAO,0BAA0B;AAC7C,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;AAE7D,MAAMC,aAAa,GAAG;EAACF,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAK,CAAC;AAE1D,OAAO,MAAME,MAAuB,GAAGA,CAAC;EACtCC,QAAQ;EACRC,aAAa,GAAG,IAAI;EACpBC,KAAK;EACLC,MAAM,EAAEC,OAAO;EACf,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,QAAQ,GAAGjB,KAAK,CAACe,EAAE,CAAC;EAE1B,oBACEX,IAAA,CAACL,IAAI;IACHmB,WAAW,EAAEF,KAAK,CAACG,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC3CR,aAAa,EAAEA,aAAa,GAAGN,iBAAiB,GAAGG,aAAc;IACjEY,SAAS,EAAEJ,KAAK,CAACK,YAAa;IAC9BT,KAAK,EAAEA,KAAK,GAAG,CAACK,QAAQ,EAAEL,KAAK,CAAC,GAAGK,QAAS;IAAAP,QAAA,eAE5CN,IAAA,CAACF,YAAY;MAAAQ,QAAA,EAAEA;IAAQ,CAAe;EAAC,CACnC,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -2,6 +2,7 @@
 
 import { Host } from '@expo/ui/swift-ui';
 import { dynamicTypeSize } from '@expo/ui/swift-ui/modifiers';
+import { useSx } from '@hzblj/kara-sx';
 import { MAX_DYNAMIC_TYPE_SIZE, useAppTheme } from '@hzblj/kara-theme';
 import { HostBoundary } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,15 +21,17 @@ export const Island = ({
   children,
   matchContents = true,
   style,
-  testID
+  testID,
+  ...sx
 }) => {
   const theme = useAppTheme();
+  const resolved = useSx(sx);
   return /*#__PURE__*/_jsx(Host, {
     colorScheme: theme.dark ? 'dark' : 'light',
     matchContents: matchContents ? MATCH_HEIGHT_ONLY : MATCH_NEITHER,
     modifiers: DYNAMIC_TYPE_CAP,
     seedColor: theme.materialSeed,
-    style: style,
+    style: style ? [resolved, style] : resolved,
     testID: testID,
     children: /*#__PURE__*/_jsx(HostBoundary, {
       children: children

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

@@ -1 +1 @@
-{"version":3,"names":["Host","dynamicTypeSize","MAX_DYNAMIC_TYPE_SIZE","useAppTheme","HostBoundary","jsx","_jsx","DYNAMIC_TYPE_CAP","max","MATCH_HEIGHT_ONLY","horizontal","vertical","MATCH_NEITHER","Island","children","matchContents","style","testID","theme","colorScheme","dark","modifiers","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/island/island.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,QAAO,mBAAmB;AACtC,SAAQC,eAAe,QAAO,6BAA6B;AAC3D,SAAQC,qBAAqB,EAAEC,WAAW,QAAO,mBAAmB;AAEpE,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,gBAAgB,GAAG,CAACN,eAAe,CAAC;EAACO,GAAG,EAAEN;AAAqB,CAAC,CAAC,CAAC;AAExE,MAAMO,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;AAE7D,MAAMC,aAAa,GAAG;EAACF,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAK,CAAC;AAE1D,OAAO,MAAME,MAAuB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,aAAa,GAAG,IAAI;EAAEC,KAAK;EAAEC;AAAmB,CAAC,KAAK;EACvG,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAE3B,oBACEG,IAAA,CAACN,IAAI;IACHmB,WAAW,EAAED,KAAK,CAACE,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC3CL,aAAa,EAAEA,aAAa,GAAGN,iBAAiB,GAAGG,aAAc;IACjES,SAAS,EAAEd,gBAAiB;IAC5Be,SAAS,EAAEJ,KAAK,CAACK,YAAa;IAC9BP,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IAAAH,QAAA,eAEfR,IAAA,CAACF,YAAY;MAAAU,QAAA,EAAEA;IAAQ,CAAe;EAAC,CACnC,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["Host","dynamicTypeSize","useSx","MAX_DYNAMIC_TYPE_SIZE","useAppTheme","HostBoundary","jsx","_jsx","DYNAMIC_TYPE_CAP","max","MATCH_HEIGHT_ONLY","horizontal","vertical","MATCH_NEITHER","Island","children","matchContents","style","testID","sx","theme","resolved","colorScheme","dark","modifiers","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/island/island.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,QAAO,mBAAmB;AACtC,SAAQC,eAAe,QAAO,6BAA6B;AAC3D,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,qBAAqB,EAAEC,WAAW,QAAO,mBAAmB;AAEpE,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,gBAAgB,GAAG,CAACP,eAAe,CAAC;EAACQ,GAAG,EAAEN;AAAqB,CAAC,CAAC,CAAC;AAExE,MAAMO,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;AAE7D,MAAMC,aAAa,GAAG;EAACF,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAK,CAAC;AAE1D,OAAO,MAAME,MAAuB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,aAAa,GAAG,IAAI;EAAEC,KAAK;EAAEC,MAAM;EAAE,GAAGC;AAAe,CAAC,KAAK;EAC9G,MAAMC,KAAK,GAAGhB,WAAW,CAAC,CAAC;EAC3B,MAAMiB,QAAQ,GAAGnB,KAAK,CAACiB,EAAE,CAAC;EAE1B,oBACEZ,IAAA,CAACP,IAAI;IACHsB,WAAW,EAAEF,KAAK,CAACG,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC3CP,aAAa,EAAEA,aAAa,GAAGN,iBAAiB,GAAGG,aAAc;IACjEW,SAAS,EAAEhB,gBAAiB;IAC5BiB,SAAS,EAAEL,KAAK,CAACM,YAAa;IAC9BT,KAAK,EAAEA,KAAK,GAAG,CAACI,QAAQ,EAAEJ,KAAK,CAAC,GAAGI,QAAS;IAC5CH,MAAM,EAAEA,MAAO;IAAAH,QAAA,eAEfR,IAAA,CAACF,YAAY;MAAAU,QAAA,EAAEA;IAAQ,CAAe;EAAC,CACnC,CAAC;AAEX,CAAC","ignoreList":[]}