@hzblj/kara-components 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # @hzblj/kara-components
 
+## 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
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `SwipeActions` works on Android, and takes its buttons as data. **Breaking:** `SwipeActions.Actions` and its `Button` children are gone — pass `leading` and/or `trailing`, each a list of `{icon, label, onPress, destructive?, tint?}`, and `allowsFullSwipe` on the row:
+
+  ```tsx
+  <SwipeActions
+    trailing={[
+      { destructive: true, icon: "trash", label: "Delete", onPress: remove },
+    ]}
+  >
+    <ListItem title="Order [#1024](https://github.com/hzblj/kara-ui/issues/1024)" />
+  </SwipeActions>
+  ```
+
+  iOS renders SwiftUI's `swipeActions`, each action its icon on a button in its tint — round, with the label under it, on iOS 26. Android, where Compose has no swipe actions, gets kara's own `SwipeActionsBox` (`@hzblj/kara-native/jetpack-compose`): the row slides on an anchored drag, and filled icon buttons with their labels show in the strip it leaves. One row is open at a time on both, and a tap on an open row closes it.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - **Breaking:** `FlashList` is gone, and `@shopify/flash-list` is no longer a peer dependency. kara's list for React Native content is `RnFlatList` (and `RnSectionList`): React Native's own virtualized lists, whose cells stay in normal flow, so rows that host native views keep them in place — a recycling list moves its cells, which an `@expo/ui` host does not survive. An app that wants FlashList for plain data rows installs and imports it itself.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `Tooltip` is controlled on Android too: `visible` shows Material's plain tooltip, centred above the anchor and kept inside the window, and `onDismiss` reports a touch outside it or the anchor scrolling away. It used to open only on a long press and hide itself, ignoring both props — and Material's own placement let it run off the edge of the screen. Nothing opens it on a long press any more; wire one to `visible` if you want it.
+
+  `TooltipBox` (`@hzblj/kara-native/jetpack-compose`) takes `plain` for that style, and hides when `isPresented` turns false.
+
+### Patch Changes
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `ActionSheet` on Android renders its rows in a host of its own — they were Compose views straight inside the sheet, which has none, and threw "must be rendered inside a Host". The rows are Material's bottom-sheet menu now: full width, with each action's `icon` before its label.
+
+  `SearchBar` on iOS centres its text beside the magnifier. The type scale's line height sat the text at the bottom of a taller line in a single-line `UITextField`.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - Android layout fixes:
+
+  - `Screen` keeps its content clear of the status bar when nothing sits above it, as a SwiftUI host keeps to the safe area — it drew under it. Under a navigation bar nothing changes; the background still runs to the edges.
+  - `Form` is inset from its container on every side, with section titles and footers indented to the cards' content, like SwiftUI's grouped form — in a `Screen` its cards ran into the screen's edges.
+  - A disabled or read-only `Checkbox` or `Switch` keeps Material's 48dp touch target, so it lines up with the enabled ones instead of shifting toward the edge.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `DatePicker` on iOS sizes itself to its value. Its host took the width it was given and laid the compact field out against the far edge of it — past its container's, in a row. The calendar is in the accent now.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `Alert` and `ActionSheet` appear on iOS. Both hung their SwiftUI presentation on an `EmptyView` — `@expo/ui` uses one when there is no trigger, and SwiftUI never presents from it — so `visible` changed nothing. Each now has a trigger that takes no room, and `ActionSheet` passes its buttons through the dialog's `Actions` slot.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `RnFlatList` and `RnSectionList` keep rows that host native views on Android. React Native's Android default, `removeClippedSubviews`, detached a host measured at zero height before its first layout, and the row stayed empty; it is off unless you turn it on.
+
+- [#12](https://github.com/hzblj/kara-ui/pull/12) [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490) Thanks [@hzblj](https://github.com/hzblj)! - `SegmentedControl` draws its selected segment in the accent on both platforms. iOS renders kara's own `UISegmentedControl` (`SegmentedControl` in `@hzblj/kara-native/swift-ui`), whose pill, labels and track take colours — the system control tints only the pill, SwiftUI's segmented picker not even that. Android colours Material's segmented buttons, equal widths. `onChange` now fires for a new segment only on Android too.
+
+- Updated dependencies [[`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490), [`2a6595f`](https://github.com/hzblj/kara-ui/commit/2a6595f79176a3450610d361a02001aac9530490)]:
+  - @hzblj/kara-native@0.7.0
+  - @hzblj/kara-sx@0.7.0
+  - @hzblj/kara-theme@0.7.0
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -1,7 +1,35 @@
 # @hzblj/kara-components
 
-The components of kara-ui.
+[![npm version][npm-badge]][npm-url]
+[![License: MIT][license-badge]][license-url]
 
-Install [`@hzblj/kara-ui`](https://www.npmjs.com/package/@hzblj/kara-ui) instead — this is one of its building blocks.
+[npm-badge]: https://img.shields.io/npm/v/@hzblj/kara-components?labelColor=27272a&color=ff5700&label=%40hzblj%2Fkara-components
+[npm-url]: https://www.npmjs.com/package/@hzblj/kara-components
+[license-badge]: https://img.shields.io/badge/license-MIT-ff5700?labelColor=27272a
+[license-url]: https://github.com/hzblj/kara-ui/blob/main/LICENSE
 
-MIT
+<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://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`.
+
+## What's inside
+
+- **Native components** — real SwiftUI views on iOS and Jetpack Compose on Android, through `@expo/ui`: a `Switch` is
+  a SwiftUI `Toggle` on one and a Material `Switch` on the other.
+- **`Screen` and `Island`** — the hosts native views render in.
+- **The React Native tier** — `RnView`, `RnText`, `RnScrollView` and the rest: plain React Native views with the same
+  `sx` props, for long lists and for content around the native islands.
+- **Haptics** — the platform's own feedback, named for what happened.
+
+## Documentation
+
+- [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
+
+MIT © Jan Blazej

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/checkbox/checkbox.android.js

@@ -6,9 +6,13 @@ import { spacing, useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Stands in for a missing handler: Material drops its 48dp touch target without one, and the box moves. */
+const NOOP = () => undefined;
+
 /**
- * Material's checkbox, tinted with the accent. With a label it is a full-width row that toggles as a whole; the gap is
- * explicit because a checkbox without a handler drops Material's 48dp touch target, and with it the space around it.
+ * Material's checkbox, tinted with the accent. With a label it is a full-width row that toggles as a whole. It always
+ * gets a handler, so a disabled or read-only box keeps the touch target an enabled one has, and lines up with it;
+ * `enabled` is what stops the input.
  */
 export const Checkbox = ({
   disabled = false,
@@ -25,7 +29,7 @@ export const Checkbox = ({
       checkmarkColor: theme.color('content.on.bg')
     },
     enabled: !disabled,
-    onCheckedChange: onValueChange,
+    onCheckedChange: onValueChange ?? NOOP,
     value: value
   });
   if (!label) {

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

@@ -1 +1 @@
-{"version":3,"names":["Checkbox","ComposeCheckbox","Row","Text","clickable","fillMaxWidth","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","rowModifiers","control","colors","checkedColor","color","checkmarkColor","enabled","onCheckedChange","horizontalArrangement","spacedBy","s8","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/checkbox/checkbox.android.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,IAAIC,eAAe,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC/E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMb,QAA2B,GAAGA,CAAC;EAACc,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAoB,CAAC,KAAK;EAC7GR,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMS,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,YAAY,GAAGX,OAAO,CAC1B,MAAOM,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACX,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMY,aAAa,CAAC,CAACC,KAAK,CAAC,CAAC,CAAE,EAChH,CAACH,QAAQ,EAAEE,aAAa,EAAEC,KAAK,CACjC,CAAC;EACD,MAAMG,OAAO,gBACXT,IAAA,CAACV,eAAe;IACdoB,MAAM,EAAE;MAACC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC;MAAEC,cAAc,EAAEN,KAAK,CAACK,KAAK,CAAC,eAAe;IAAC,CAAE;IACzGE,OAAO,EAAE,CAACX,QAAS;IACnBY,eAAe,EAAEV,aAAc;IAC/BC,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOK,OAAO;EAChB;EAEA,oBACEP,KAAA,CAACX,GAAG;IAACyB,qBAAqB,EAAE;MAACC,QAAQ,EAAEtB,OAAO,CAACuB;IAAE,CAAE;IAACC,SAAS,EAAEX,YAAa;IAACY,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,GACpGZ,OAAO,eACRT,IAAA,CAACR,IAAI;MAACoB,KAAK,EAAEL,KAAK,CAACe,WAAW,CAACnB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACoB,KAAK,EAAEhB,KAAK,CAACiB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GjB;IAAK,CACF,CAAC;EAAA,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Checkbox","ComposeCheckbox","Row","Text","clickable","fillMaxWidth","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","NOOP","undefined","disabled","label","onValueChange","value","theme","rowModifiers","control","colors","checkedColor","color","checkmarkColor","enabled","onCheckedChange","horizontalArrangement","spacedBy","s8","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/checkbox/checkbox.android.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,IAAIC,eAAe,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC/E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,IAAI,GAAGA,CAAA,KAAMC,SAAS;;AAE5B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMf,QAA2B,GAAGA,CAAC;EAACgB,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAoB,CAAC,KAAK;EAC7GV,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMW,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,YAAY,GAAGb,OAAO,CAC1B,MAAOQ,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACb,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMc,aAAa,CAAC,CAACC,KAAK,CAAC,CAAC,CAAE,EAChH,CAACH,QAAQ,EAAEE,aAAa,EAAEC,KAAK,CACjC,CAAC;EACD,MAAMG,OAAO,gBACXX,IAAA,CAACV,eAAe;IACdsB,MAAM,EAAE;MAACC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC;MAAEC,cAAc,EAAEN,KAAK,CAACK,KAAK,CAAC,eAAe;IAAC,CAAE;IACzGE,OAAO,EAAE,CAACX,QAAS;IACnBY,eAAe,EAAEV,aAAa,IAAIJ,IAAK;IACvCK,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOK,OAAO;EAChB;EAEA,oBACET,KAAA,CAACX,GAAG;IAAC2B,qBAAqB,EAAE;MAACC,QAAQ,EAAExB,OAAO,CAACyB;IAAE,CAAE;IAACC,SAAS,EAAEX,YAAa;IAACY,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,GACpGZ,OAAO,eACRX,IAAA,CAACR,IAAI;MAACsB,KAAK,EAAEL,KAAK,CAACe,WAAW,CAACnB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACoB,KAAK,EAAEhB,KAAK,CAACiB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GjB;IAAK,CACF,CAAC;EAAA,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -1,9 +1,22 @@
 "use strict";
 
-import { DateTimePicker } from '@expo/ui/community/datetime-picker';
-import { useCallback } from 'react';
+import { Host, DatePicker as SwiftUIDatePicker } from '@expo/ui/swift-ui';
+import { datePickerStyle, labelsHidden, tint } from '@expo/ui/swift-ui/modifiers';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** The system's compact date picker, inline: a tap on it opens the calendar popover UIKit owns. */
+const COMPONENTS = {
+  date: ['date'],
+  datetime: ['date', 'hourAndMinute'],
+  time: ['hourAndMinute']
+};
+
+/**
+ * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
+ * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
+ * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
+ * beside it; the calendar is in the accent.
+ */
 export const DatePicker = ({
   max,
   min,
@@ -12,14 +25,22 @@ export const DatePicker = ({
   testID,
   value
 }) => {
-  const onChange = useCallback((_event, date) => onValueChange?.(date), [onValueChange]);
-  return /*#__PURE__*/_jsx(DateTimePicker, {
-    maximumDate: max,
-    minimumDate: min,
-    mode: mode,
-    onValueChange: onChange,
-    testID: testID,
-    value: value
+  const theme = useAppTheme();
+  const modifiers = useMemo(() => [datePickerStyle('compact'), labelsHidden(), tint(theme.color('fill.accent.primary'))], [theme]);
+  return /*#__PURE__*/_jsx(Host, {
+    colorScheme: theme.dark ? 'dark' : 'light',
+    matchContents: true,
+    children: /*#__PURE__*/_jsx(SwiftUIDatePicker, {
+      displayedComponents: [...COMPONENTS[mode]],
+      modifiers: modifiers,
+      onDateChange: onValueChange,
+      range: min || max ? {
+        end: max,
+        start: min
+      } : undefined,
+      selection: value,
+      testID: testID
+    })
   });
 };
 //# sourceMappingURL=date-picker.ios.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["DateTimePicker","useCallback","jsx","_jsx","DatePicker","max","min","mode","onValueChange","testID","value","onChange","_event","date","maximumDate","minimumDate"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,cAAc,QAAO,oCAAoC;AACjE,SAAQC,WAAW,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjC;AACA,OAAO,MAAMC,UAA+B,GAAGA,CAAC;EAC9CC,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,QAAQ,GAAGV,WAAW,CAAC,CAACW,MAAe,EAAEC,IAAU,KAAKL,aAAa,GAAGK,IAAI,CAAC,EAAE,CAACL,aAAa,CAAC,CAAC;EAErG,oBACEL,IAAA,CAACH,cAAc;IACbc,WAAW,EAAET,GAAI;IACjBU,WAAW,EAAET,GAAI;IACjBC,IAAI,EAAEA,IAAK;IACXC,aAAa,EAAEG,QAAS;IACxBF,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","labelsHidden","tint","useAppTheme","useMemo","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","modifiers","color","colorScheme","dark","matchContents","children","displayedComponents","onDateChange","range","end","start","undefined","selection"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SAAQC,eAAe,EAAEC,YAAY,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMZ,UAA+B,GAAGA,CAAC;EAC9Ca,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAE3B,MAAMe,SAAS,GAAGd,OAAO,CACvB,MAAM,CAACJ,eAAe,CAAC,SAAS,CAAC,EAAEC,YAAY,CAAC,CAAC,EAAEC,IAAI,CAACe,KAAK,CAACE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5F,CAACF,KAAK,CACR,CAAC;EAED,oBACEX,IAAA,CAACT,IAAI;IAACuB,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,eAC7DjB,IAAA,CAACP,iBAAiB;MAChByB,mBAAmB,EAAE,CAAC,GAAGjB,UAAU,CAACM,IAAI,CAAC,CAAE;MAC3CK,SAAS,EAAEA,SAAU;MACrBO,YAAY,EAAEX,aAAc;MAC5BY,KAAK,EAAEd,GAAG,IAAID,GAAG,GAAG;QAACgB,GAAG,EAAEhB,GAAG;QAAEiB,KAAK,EAAEhB;MAAG,CAAC,GAAGiB,SAAU;MACvDC,SAAS,EAAEd,KAAM;MACjBD,MAAM,EAAEA;IAAO,CAChB;EAAC,CACE,CAAC;AAEX,CAAC","ignoreList":[]}

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":[]}