@hzblj/kara-components 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,14 +1,58 @@
 # @hzblj/kara-components
 
+## 0.11.0
+
+### Minor Changes
+
+- [#25](https://github.com/hzblj/kara-ui/pull/25) [`6828522`](https://github.com/hzblj/kara-ui/commit/68285220a725ccfcd2c2bd9a4bcc7eb3a7f8a047) Thanks [@hzblj](https://github.com/hzblj)! - Accessibility props in the engine: `accessibilityLabel`, `accessibilityHint`, `accessibilityRole` (`button`, `header`, `image`, `link`, `text`), `accessibilityValue`, `accessibilityHidden` and `accessible`, one set for both platforms. `@hzblj/kara-sx` turns them into SwiftUI's accessibility modifiers on iOS and into Compose semantics on Android, through a new `karaAccessibility` modifier in `@hzblj/kara-native` (a native rebuild picks it up). The stacks, `Text`, `Card`, `Surface`, `ListItem`, `RnListItem`, `LabeledContent`, `Link` and `Pressable` take all of them; `Button` takes a hint, and `Avatar`, `Progress` and `ActivityIndicator` a label.
+
+  What the components do by themselves: a stack with `onPress` is read as one button, `Pressable` is a button, list rows and a `LabeledContent` with a value are read as one element, `Link` is a link, and `Skeleton` and an `Avatar` without a label are hidden. `IconButton`, `Fab` and `FabMenu` now require an `accessibilityLabel`, since an icon has nothing of its own for VoiceOver or TalkBack to say; `Snackbar`'s close button is labelled.
+
+  Reduce Motion: `useReducedMotion()` follows the device's Reduce Motion (iOS) or Remove animations (Android) setting live, and `KaraProvider reduceMotion` can force it (`always`) or ignore it (`never`). With motion reduced, `Pressable` dims instead of scaling, `Snackbar` only fades, `Skeleton` holds still, Android's `Collapsible` fades and snaps its chevron, and iOS's `Stepper` cross-fades its value.
+
+- [#25](https://github.com/hzblj/kara-ui/pull/25) [`6828522`](https://github.com/hzblj/kara-ui/commit/68285220a725ccfcd2c2bd9a4bcc7eb3a7f8a047) Thanks [@hzblj](https://github.com/hzblj)! - Motion tokens on transitions.dev's scale, in place of the `d0` to `d10000` steps, of which six were ever used. Durations are named by what the motion does: `micro` (80 ms, what answers a touch), `quick` (150 ms, something leaving or swapped in place), `fast` (250 ms, something arriving), `medium` (350 ms, a larger surface leaving), `slow` (400 ms, a larger surface arriving), `verySlow` (500 ms, an emphasised moment), `stagger` (40 ms, the offset between items) and `none`. Pick a step by what the motion does, not by the number it had: as a rule of thumb, `d100` is `micro`, `d150` `quick`, `d200` `quick` or `fast`, `d250` and `d300` `fast`, `d400` `slow` and `d500` `verySlow`. `ZoomTransition`'s Android `duration` takes the same names and, unset, keeps Material's own 450 ms.
+
+  New `easing` tokens carry the curves as cubic-bézier points, ready for `Easing.bezier(...easing.smoothOut)`: `smoothOut` for arriving and leaving alike, `inOut` for a swap in place, `out` for a small fade, `linear` for what loops.
+
+  The components use them: `Pressable` eases its scale down in `quick` and back in `fast` with no bounce, and dims in `micro`; `Snackbar` arrives in `fast` and leaves in `quick` on `smoothOut`; `Image` fades in over `quick`.
+
+  `content.on.bg` is `content.on.accent`, which is what it sits on (Material's `onPrimary` under `dynamicColor`). The opacity and spacing scales keep their values and are documented now: the opacity ramp's tens and quarters, and spacing's 4 pt grid with half steps where small gaps need them.
+
+- [#25](https://github.com/hzblj/kara-ui/pull/25) [`6828522`](https://github.com/hzblj/kara-ui/commit/68285220a725ccfcd2c2bd9a4bcc7eb3a7f8a047) Thanks [@hzblj](https://github.com/hzblj)! - `Snackbar` puts its action at the trailing end, as far in from the edge as the message is from the start, and takes Material's options: `duration` (`short`, `long`, `indefinite` or milliseconds, with `onDismiss` when it runs out), `dismissible` (a close button), `actionOnNewLine`, `position` (`bottom` or `top`) and `offset`. `animation` picks how it comes and goes (`scale`, Material's own, by default on Android; `slide` on iOS; `fade`), and `entering` and `exiting` take Reanimated animations of your own. It is announced to VoiceOver and TalkBack when it appears.
+
+### Patch Changes
+
+- Updated dependencies [[`6828522`](https://github.com/hzblj/kara-ui/commit/68285220a725ccfcd2c2bd9a4bcc7eb3a7f8a047), [`6828522`](https://github.com/hzblj/kara-ui/commit/68285220a725ccfcd2c2bd9a4bcc7eb3a7f8a047)]:
+  - @hzblj/kara-sx@0.11.0
+  - @hzblj/kara-native@0.11.0
+  - @hzblj/kara-theme@0.11.0
+
+## 0.10.0
+
+### Minor Changes
+
+- [#23](https://github.com/hzblj/kara-ui/pull/23) [`26f1651`](https://github.com/hzblj/kara-ui/commit/26f1651b6a8be9fc2d7af6bbe29bd2335605a717) Thanks [@hzblj](https://github.com/hzblj)! - `ColorPicker` works on Android. Compose ships no colour picker, so kara draws its own in the iOS picker's shape: a well with a rainbow ring beside the label, and a Material bottom sheet with a grid of swatches, a spectrum and RGB sliders, an opacity slider with `supportsOpacity`, and the colour with its hex at the foot. It reports every change through `onValueChange`, as `#RRGGBB` or, with opacity, `#RRGGBBAA`. It needs no extra dependency.
+
+  `Pressable` takes a `pressEffect`: `scale` springs the content down to `pressedScale` (0.96), `opacity` dims it to `pressedOpacity` (`o60`), `none` holds it still. Each platform keeps its own by default, a spring on iOS and the ripple on Android, and Android keeps the ripple on top of any effect unless `ripple` is off.
+
+  `IconButton` on iOS sits in a 44pt tap target with the icon centred, as Android's sits in Material's 48dp, so a row of them spaces itself the same way on both. A disabled one is dimmed once, by SwiftUI, instead of twice.
+
+### Patch Changes
+
+- Updated dependencies [[`26f1651`](https://github.com/hzblj/kara-ui/commit/26f1651b6a8be9fc2d7af6bbe29bd2335605a717), [`26f1651`](https://github.com/hzblj/kara-ui/commit/26f1651b6a8be9fc2d7af6bbe29bd2335605a717)]:
+  - @hzblj/kara-native@0.10.0
+  - @hzblj/kara-theme@0.10.0
+  - @hzblj/kara-sx@0.10.0
+
 ## 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.
+- [#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.
+  `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
 
@@ -21,23 +65,23 @@
 
 ### 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`.
+- [#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`.
+  - `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; before, it grew to its content's height, ran under the bottom bar and could not scroll.
+  - New token `surface.secondary`, a step above `surface.primary`: Material's `surfaceContainer` on Android, `tertiarySystemGroupedBackgroundColor` on iOS.
 
-- [#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.
+- [#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`.
+- [#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.
+  - 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.
 
@@ -45,8 +89,8 @@
 
 - [#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.
+  - `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.
@@ -63,7 +107,7 @@
 
 ### 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:
+- [#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
@@ -75,33 +119,33 @@
   </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.
+  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)! - **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.
+- [#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.
+- [#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.
+  - `Screen` keeps its content clear of the status bar when nothing sits above it, as a SwiftUI host keeps to the safe area; it used to draw 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 used to run 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)! - `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)! - `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.
+- [#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
@@ -114,13 +158,13 @@
 
 - [#10](https://github.com/hzblj/kara-ui/pull/10) [`62b7131`](https://github.com/hzblj/kara-ui/commit/62b713143bd03872ecdd89ca8de42d98fe589617) Thanks [@hzblj](https://github.com/hzblj)! - Haptics: kara's own, native on both platforms, named for what happened.
 
-  - `haptics.success()`, `haptics.selection()`, … — one function per haptic — and `haptics.play(name)` for a name that arrives as data. `selection`, `tick`, `toggleOn`/`toggleOff`, `success`/`warning`/`error`, `longPress`, `dragStart`, `thresholdActivate`/`thresholdDeactivate`, `keyPress`, and the impacts `soft`, `light`, `medium`, `rigid`, `heavy` (`intensity` scales them on iOS). Synchronous, nothing to await.
-  - iOS: UIKit's feedback generators, kept alive and warmed up with `haptics.prepare` — `Pressable` prepares its haptic on press-in. Android: the system's own haptic feedback (`View.performHapticFeedback`), with Android 14's constants falling back to older ones — never a raw vibration. Both follow the user's system setting.
+  - One function per haptic (`haptics.success()`, `haptics.selection()`, …) and `haptics.play(name)` for a name that arrives as data. `selection`, `tick`, `toggleOn`/`toggleOff`, `success`/`warning`/`error`, `longPress`, `dragStart`, `thresholdActivate`/`thresholdDeactivate`, `keyPress`, and the impacts `soft`, `light`, `medium`, `rigid`, `heavy` (`intensity` scales them on iOS). Synchronous, nothing to await.
+  - iOS: UIKit's feedback generators, kept alive and warmed up with `haptics.prepare` (`Pressable` prepares its haptic on press-in). Android: the system's own haptic feedback (`View.performHapticFeedback`), with Android 14's constants falling back to older ones, never a raw vibration. Both follow the user's system setting.
   - `useHapticFeedback(trigger, haptic)` plays on every change of a value, never on mount; a function of the previous and next value picks a haptic per change.
   - `haptics.setEnabled(false)` silences every kara haptic, the components' own included.
   - `Pressable`'s `haptic` takes a name as well as `true` (a `light` impact); `Chip` plays `selection`.
   - On Android, where Compose's Material controls play nothing: `Switch` plays `toggleOn`/`toggleOff`, a stepped `Slider` ticks at every stop, `SegmentedControl` plays `selection`. iOS keeps its native controls' own feedback.
-  - `Slider`: `step` is the increment on Android too — it was passed to Compose as the number of stops.
+  - `Slider`: `step` is the increment on Android too. It was passed to Compose as the number of stops.
   - `expo-haptics` is no longer a peer dependency.
 
 ### Patch Changes
@@ -181,7 +225,7 @@
 
 ### Minor Changes
 
-- [`f84ffd5`](https://github.com/hzblj/kara-ui/commit/f84ffd52954a5e7052541c8682787137de205a28) Thanks [@hzblj](https://github.com/hzblj)! - Native sheets with a native header. `Sheet` is now a TrueSheet (`@lodev09/react-native-true-sheet`, a new peer dependency) with `<Sheet.Header>` — a real navigation bar with a centred, leading or large title that hands over to the bar as it scrolls away, items on either side, and on iOS 26 the content scrolls under it with the soft edge effect — plus `<Sheet.ScrollView>`, `useSheetScroll`, detents, a footer and a ref (`present`/`dismiss`/`resize`). It is React Native tier now: no host, native atoms inside go in an `Island`. `fitToContents` is replaced by `detents` (`['auto']` by default).
+- [`f84ffd5`](https://github.com/hzblj/kara-ui/commit/f84ffd52954a5e7052541c8682787137de205a28) Thanks [@hzblj](https://github.com/hzblj)! - Native sheets with a native header. `Sheet` is now a TrueSheet (`@lodev09/react-native-true-sheet`, a new peer dependency) with `<Sheet.Header>`, `<Sheet.ScrollView>`, `useSheetScroll`, detents, a footer and a ref (`present`/`dismiss`/`resize`). `<Sheet.Header>` is a real navigation bar with a centred, leading or large title that hands over to the bar as it scrolls away, items on either side, and on iOS 26 the content scrolls under it with the soft edge effect. It is React Native tier now: no host, native atoms inside go in an `Island`. `fitToContents` is replaced by `detents` (`['auto']` by default).
 
   `NavigationBar` takes `leadingItems` / `trailingItems` instead of `onBack` / `onClose`: `back`, `close` or an app `icon`, on either side and in any order; on iOS 26 neighbours share a glass capsule unless an item is `separated`. Also `titleAlignment`, `titleVisible`, `inverted` and an iOS `search` field. On Android it is now Material's native top app bar.
 
@@ -209,12 +253,12 @@
 
 - [`c30bef6`](https://github.com/hzblj/kara-ui/commit/c30bef6be2639deb6d385ad209d1a2799b5b656f) Thanks [@hzblj](https://github.com/hzblj)! - Icons are now fully native and the app's own: `plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]` turns every SVG in the folder into an iOS asset-catalog template image and an Android vector drawable at prebuild (`x.ios.svg` / `x.android.svg` for per-platform glyphs), and writes `kara-icons.d.ts` so `name` only accepts icons that exist; `npx kara-icons` does the same for CI. `Icon` draws them in a host, the new `RnIcon` anywhere, and `Tabs` passes them as `xcasset` / `drawable`. The built-in SF Symbol / Material icon names and the `@expo/vector-icons` peer dependency are gone.
 
-- [`c30bef6`](https://github.com/hzblj/kara-ui/commit/c30bef6be2639deb6d385ad209d1a2799b5b656f) Thanks [@hzblj](https://github.com/hzblj)! - Leaner, reusable-only components. `Countdown` is gone, with its native views. There is one `ContextMenu` now — the native module's long-press menu on React Native content, with a custom preview on iOS (formerly `RnContextMenu`); the `@expo/ui`-based one is removed.
+- [`c30bef6`](https://github.com/hzblj/kara-ui/commit/c30bef6be2639deb6d385ad209d1a2799b5b656f) Thanks [@hzblj](https://github.com/hzblj)! - Leaner, reusable-only components. `Countdown` is gone, with its native views. There is one `ContextMenu` now: the native module's long-press menu on React Native content, with a custom preview on iOS (formerly `RnContextMenu`); the `@expo/ui`-based one is removed.
 
   Android, reworked to look and behave like Material while honouring the theme:
 
   - `Button`, `Badge` and `Alert` render their labels; `Button` keeps Material's own shape (no iOS ring), takes `tint` as its fill with a label that contrasts with it, and draws `glass` as Material's outlined button.
-  - `Alert` is built from `AlertDialog`'s slots — title, message, the confirm action (destructive when asked) and Cancel — instead of drawing empty.
+  - `Alert` is built from `AlertDialog`'s slots instead of drawing empty: title, message, the confirm action (destructive when asked) and Cancel.
   - `Menu` presents its actions in Material's dropdown popup, with their icons, instead of laying them out over the trigger.
   - `Picker` is a themed Material exposed dropdown the width of its container.
   - `Switch`, `Checkbox` and `RadioGroup` are tinted with the accent, and with a label are full-width rows that toggle as a whole; `Form` sections span the form's width.
@@ -232,7 +276,7 @@
 
 ### Minor Changes
 
-- [`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1) Thanks [@hzblj](https://github.com/hzblj)! - First release of the kara-ui design system: theme and tokens, the `sx` engine, atoms, molecules, organisms and `Screen`, native tabs (`@hzblj/kara-ui/router`), the KaraUI native module (Liquid Glass, scroll edge effect, native countdown, context menu with preview, rich tooltip, FAB menu), and `KaraProvider` with theme overrides — colours, the app's own fonts, the Material seed, and Material You dynamic colour on Android. Text uses the platform's face by default. Install `@hzblj/kara-ui`; the scoped packages are its building blocks.
+- [`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1) Thanks [@hzblj](https://github.com/hzblj)! - First release of the kara-ui design system: theme and tokens, the `sx` engine, atoms, molecules, organisms and `Screen`, native tabs (`@hzblj/kara-ui/router`), the KaraUI native module (Liquid Glass, scroll edge effect, native countdown, context menu with preview, rich tooltip, FAB menu), and `KaraProvider` with theme overrides (colours, the app's own fonts, the Material seed, and Material You dynamic colour on Android). Text uses the platform's face by default. Install `@hzblj/kara-ui`; the scoped packages are its building blocks.
 
 ### Patch Changes
 

package/README.md

@@ -8,25 +8,25 @@
 [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://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>
+<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.
+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
+- **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.
+- **`Screen` and `Island`**: the hosts native views render in.
+- **The React Native tier**: `RnView`, `RnText`, `RnScrollView` and the rest are 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
+- [Components](https://www.kara.janblazej.dev/docs/components): every one 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)
 

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

@@ -2,6 +2,7 @@
 
 import { Host, LoadingIndicator } from '@expo/ui/jetpack-compose';
 import { fillMaxSize, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { useAccessibilityModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
@@ -23,12 +24,16 @@ const styles = StyleSheet.create({
  * anywhere and takes its place in the first frame.
  */
 export const ActivityIndicator = ({
+  accessibilityLabel,
   color = 'fill.accent.primary',
   size = 'small',
   testID
 }) => {
   const theme = useAppTheme();
-  const modifiers = useMemo(() => testID ? [fillMaxSize(), testIdModifier(testID)] : [fillMaxSize()], [testID]);
+  const accessibilityModifiers = useAccessibilityModifiers({
+    accessibilityLabel
+  });
+  const modifiers = useMemo(() => [fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, testID]);
   return /*#__PURE__*/_jsx(Host, {
     colorScheme: theme.dark ? 'dark' : 'light',
     seedColor: theme.materialSeed,

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

@@ -1 +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":[]}
+{"version":3,"names":["Host","LoadingIndicator","fillMaxSize","testID","testIdModifier","useAccessibilityModifiers","useAppTheme","useMemo","StyleSheet","jsx","_jsx","styles","create","large","height","width","small","ActivityIndicator","accessibilityLabel","color","size","theme","accessibilityModifiers","modifiers","colorScheme","dark","seedColor","materialSeed","style","children"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,gBAAgB,QAAO,0BAA0B;AAC/D,SAAQC,WAAW,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACxF,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIvC;AACA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAM,CAAC;EAC/BC,KAAK,EAAE;IAACC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EAC9BC,KAAK,EAAE;IAACF,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE;AAC/B,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA,OAAO,MAAME,iBAA6C,GAAGA,CAAC;EAC5DC,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdjB;AACsB,CAAC,KAAK;EAC5B,MAAMkB,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,sBAAsB,GAAGjB,yBAAyB,CAAC;IAACa;EAAkB,CAAC,CAAC;EAC9E,MAAMK,SAAS,GAAGhB,OAAO,CACvB,MAAM,CAACL,WAAW,CAAC,CAAC,EAAE,IAAIC,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAGmB,sBAAsB,CAAC,EAC7F,CAACA,sBAAsB,EAAEnB,MAAM,CACjC,CAAC;EAED,oBACEO,IAAA,CAACV,IAAI;IAACwB,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,SAAS,EAAEL,KAAK,CAACM,YAAa;IAACC,KAAK,EAAEjB,MAAM,CAACS,IAAI,CAAE;IAAAS,QAAA,eACnGnB,IAAA,CAACT,gBAAgB;MAACkB,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACA,KAAK,CAAE;MAACI,SAAS,EAAEA;IAAU,CAAE;EAAC,CACjE,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -5,12 +5,14 @@ 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 = ({
+  accessibilityLabel,
   color = 'fill.accent.primary',
   size = 'small',
   testID
 }) => {
   const theme = useAppTheme();
   return /*#__PURE__*/_jsx(RNActivityIndicator, {
+    accessibilityLabel: accessibilityLabel,
     color: theme.color(color),
     size: size,
     testID: testID

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

@@ -1 +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":[]}
+{"version":3,"names":["useAppTheme","ActivityIndicator","RNActivityIndicator","jsx","_jsx","accessibilityLabel","color","size","testID","theme"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.ios.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,iBAAiB,IAAIC,mBAAmB,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIrE;AACA,OAAO,MAAMH,iBAA6C,GAAGA,CAAC;EAC5DI,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,oBACEI,IAAA,CAACF,mBAAmB;IAClBG,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAC1BC,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}

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

@@ -16,6 +16,7 @@ const VARIANT = {
   sm: 'caption'
 };
 export const Avatar = ({
+  accessibilityLabel,
   initials,
   size = 'md',
   source,
@@ -23,6 +24,10 @@ export const Avatar = ({
 }) => {
   const diameter = DIAMETER[size];
   return /*#__PURE__*/_jsx(Box, {
+    "aria-hidden": accessibilityLabel === undefined,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityLabel === undefined ? undefined : 'image',
+    accessible: accessibilityLabel !== undefined,
     align: "center",
     bg: "fill.tertiary",
     borderRadius: "full",

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","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":[]}
+{"version":3,"names":["spacing","Box","Image","RnText","jsx","_jsx","DIAMETER","lg","s64","md","s40","sm","s24","VARIANT","Avatar","accessibilityLabel","initials","size","source","testID","diameter","undefined","accessibilityRole","accessible","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,kBAAkB;EAAEC,QAAQ;EAAEC,IAAI,GAAG,IAAI;EAAEC,MAAM;EAAEC;AAAmB,CAAC,KAAK;EACnH,MAAMC,QAAQ,GAAGd,QAAQ,CAACW,IAAI,CAAC;EAE/B,oBACEZ,IAAA,CAACJ,GAAG;IACF,eAAac,kBAAkB,KAAKM,SAAU;IAC9CN,kBAAkB,EAAEA,kBAAmB;IACvCO,iBAAiB,EAAEP,kBAAkB,KAAKM,SAAS,GAAGA,SAAS,GAAG,OAAQ;IAC1EE,UAAU,EAAER,kBAAkB,KAAKM,SAAU;IAC7CG,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,eAAe;IAClBC,YAAY,EAAC,MAAM;IACnBC,CAAC,EAAEP,QAAS;IACZQ,OAAO,EAAC,QAAQ;IAChBC,QAAQ,EAAC,QAAQ;IACjBV,MAAM,EAAEA,MAAO;IACfW,CAAC,EAAEV,QAAS;IAAAW,QAAA,EAEXb,MAAM,gBACLb,IAAA,CAACH,KAAK;MAACyB,CAAC,EAAEP,QAAS;MAACF,MAAM,EAAEA,MAAO;MAACY,CAAC,EAAEV;IAAS,CAAE,CAAC,gBAEnDf,IAAA,CAACF,MAAM;MAAC6B,KAAK,EAAC,mBAAmB;MAACC,OAAO,EAAEpB,OAAO,CAACI,IAAI,CAAE;MAAAc,QAAA,EACtDf,QAAQ,IAAI;IAAE,CACT;EACT,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/atoms/button/button-tokens.js

@@ -2,7 +2,7 @@
 
 const TOKENS = {
   accent: {
-    content: 'content.on.bg',
+    content: 'content.on.accent',
     fill: 'fill.accent.primary',
     shadow: 'btn.accent'
   },
@@ -78,5 +78,5 @@ const currentHex = (token, theme) => {
  * The label for a button filled with an arbitrary `tint`: the on-accent white over a strong colour, the primary
  * content colour over a pale one (`fill.accent.base`) — the light container tokens pair with it in both appearances.
  */
-export const contentOnTint = (tint, theme) => (luminance(currentHex(tint, theme)) ?? 0) > 0.4 ? 'content.primary' : 'content.on.bg';
+export const contentOnTint = (tint, theme) => (luminance(currentHex(tint, theme)) ?? 0) > 0.4 ? 'content.primary' : 'content.on.accent';
 //# sourceMappingURL=button-tokens.js.map

package/lib/module/atoms/button/button-tokens.js.map

@@ -1 +1 @@
-{"version":3,"names":["TOKENS","accent","content","fill","shadow","destructive","glass","secondary","buttonTokens","variant","disabled","theme","tokens","disabledFill","luminance","color","hex","exec","undefined","r","g","b","map","i","channel","Number","parseInt","slice","currentHex","token","resolved","entry","split","reduce","node","key","dark","light","adaptive","contentOnTint","tint"],"sourceRoot":"../../../../src","sources":["atoms/button/button-tokens.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["TOKENS","accent","content","fill","shadow","destructive","glass","secondary","buttonTokens","variant","disabled","theme","tokens","disabledFill","luminance","color","hex","exec","undefined","r","g","b","map","i","channel","Number","parseInt","slice","currentHex","token","resolved","entry","split","reduce","node","key","dark","light","adaptive","contentOnTint","tint"],"sourceRoot":"../../../../src","sources":["atoms/button/button-tokens.ts"],"mappings":"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","ignoreList":[]}

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

@@ -2,7 +2,7 @@
 
 import { Button as ComposeButton, Text as ComposeText, OutlinedButton } from '@expo/ui/jetpack-compose';
 import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
-import { useSxModifiers } from '@hzblj/kara-sx';
+import { useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
@@ -18,6 +18,7 @@ import { buttonTokens, contentOnTint } from "./button-tokens.js";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Button = ({
+  accessibilityHint,
   disabled = false,
   label,
   onPress,
@@ -32,7 +33,10 @@ export const Button = ({
   const sxModifiers = useSxModifiers({
     wide
   });
-  const modifiers = useMemo(() => testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers, [sxModifiers, testID]);
+  const accessibilityModifiers = useAccessibilityModifiers({
+    accessibilityHint
+  }, accessibilityHint !== undefined);
+  const modifiers = useMemo(() => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, sxModifiers, testID]);
   const style = theme.typography.body;
   const outlined = variant === 'glass' && !tint;
   const fill = tint && !disabled ? tint : tokens.fill;

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

@@ -1 +1 @@
-{"version":3,"names":["Button","ComposeButton","Text","ComposeText","OutlinedButton","testID","testIdModifier","useSxModifiers","useAppTheme","useMemo","useHostGuard","buttonTokens","contentOnTint","jsx","_jsx","disabled","label","onPress","tint","variant","wide","theme","tokens","sxModifiers","modifiers","style","typography","body","outlined","fill","content","MaterialButton","colors","contentColor","color","disabledContentColor","containerColor","disabledContainerColor","enabled","onClick","children","colorString","fontFamily","fontSize","fontWeight","lineHeight"],"sourceRoot":"../../../../src","sources":["atoms/button/button.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,IAAI,IAAIC,WAAW,EAAEC,cAAc,QAAO,0BAA0B;AACrG,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAE/C,SAAQC,YAAY,EAAEC,aAAa,QAAO,oBAAiB;;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA;AAQA,OAAO,MAAMd,MAAuB,GAAGA,CAAC;EACtCe,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACLC,OAAO;EACPZ,MAAM;EACNa,IAAI;EACJC,OAAO,GAAG,QAAQ;EAClBC,IAAI,GAAG;AACI,CAAC,KAAK;EACjBV,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMW,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,MAAM,GAAGX,YAAY,CAACQ,OAAO,EAAEJ,QAAQ,EAAEM,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGhB,cAAc,CAAC;IAACa;EAAI,CAAC,CAAC;EAC1C,MAAMI,SAAS,GAAGf,OAAO,CACvB,MAAOJ,MAAM,GAAG,CAAC,GAAGkB,WAAW,EAAEjB,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGkB,WAAY,EACvE,CAACA,WAAW,EAAElB,MAAM,CACtB,CAAC;EACD,MAAMoB,KAAK,GAAGJ,KAAK,CAACK,UAAU,CAACC,IAAI;EACnC,MAAMC,QAAQ,GAAGT,OAAO,KAAK,OAAO,IAAI,CAACD,IAAI;EAC7C,MAAMW,IAAI,GAAGX,IAAI,IAAI,CAACH,QAAQ,GAAGG,IAAI,GAAGI,MAAM,CAACO,IAAI;EACnD,MAAMC,OAAO,GAAGZ,IAAI,IAAI,CAACH,QAAQ,GAAGH,aAAa,CAACM,IAAI,EAAEG,KAAK,CAAC,GAAGC,MAAM,CAACQ,OAAO;EAC/E,MAAMC,cAAc,GAAGH,QAAQ,GAAGxB,cAAc,GAAGH,aAAa;EAEhE,oBACEa,IAAA,CAACiB,cAAc;IACbC,MAAM,EACJJ,QAAQ,GACJ;MAACK,YAAY,EAAEZ,KAAK,CAACa,KAAK,CAACJ,OAAO,CAAC;MAAEK,oBAAoB,EAAEd,KAAK,CAACa,KAAK,CAACJ,OAAO;IAAC,CAAC,GAChF;MACEM,cAAc,EAAEf,KAAK,CAACa,KAAK,CAACL,IAAI,CAAC;MACjCI,YAAY,EAAEZ,KAAK,CAACa,KAAK,CAACJ,OAAO,CAAC;MAClCO,sBAAsB,EAAEhB,KAAK,CAACa,KAAK,CAACL,IAAI,CAAC;MACzCM,oBAAoB,EAAEd,KAAK,CAACa,KAAK,CAACJ,OAAO;IAC3C,CACL;IACDQ,OAAO,EAAE,CAACvB,QAAS;IACnBS,SAAS,EAAEA,SAAU;IACrBe,OAAO,EAAEtB,OAAQ;IAAAuB,QAAA,eAEjB1B,IAAA,CAACX,WAAW;MACV+B,KAAK,EAAEb,KAAK,CAACoB,WAAW,CAACX,OAAO,CAAE;MAClCL,KAAK,EAAE;QACLiB,UAAU,EAAEjB,KAAK,CAACiB,UAAU;QAC5BC,QAAQ,EAAElB,KAAK,CAACkB,QAAQ;QACxBC,UAAU,EAAEnB,KAAK,CAACmB,UAAU;QAC5BC,UAAU,EAAEpB,KAAK,CAACoB;MACpB,CAAE;MAAAL,QAAA,EAEDxB;IAAK,CACK;EAAC,CACA,CAAC;AAErB,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","ComposeButton","Text","ComposeText","OutlinedButton","testID","testIdModifier","useAccessibilityModifiers","useSxModifiers","useAppTheme","useMemo","useHostGuard","buttonTokens","contentOnTint","jsx","_jsx","accessibilityHint","disabled","label","onPress","tint","variant","wide","theme","tokens","sxModifiers","accessibilityModifiers","undefined","modifiers","style","typography","body","outlined","fill","content","MaterialButton","colors","contentColor","color","disabledContentColor","containerColor","disabledContainerColor","enabled","onClick","children","colorString","fontFamily","fontSize","fontWeight","lineHeight"],"sourceRoot":"../../../../src","sources":["atoms/button/button.android.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -2,6 +2,7 @@
 
 import { Button as SwiftUIButton } from '@expo/ui/swift-ui';
 import { buttonStyle as buttonStyleModifier, controlSize as controlSizeModifier, disabled as disabledModifier, glassEffect as glassEffectModifier, tint as tintModifier } from '@expo/ui/swift-ui/modifiers';
+import { useAccessibilityModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
@@ -22,6 +23,7 @@ const TINT_BY_VARIANT = {
   secondary: undefined
 };
 export const Button = ({
+  accessibilityHint,
   buttonStyle,
   controlSize = 'large',
   disabled = false,
@@ -51,8 +53,11 @@ export const Button = ({
   const filled = Boolean(glassTint) || style === 'borderedProminent' || style === 'glassProminent';
   // A prominent style — and tinted glass — is coloured by the tint, so a caller's own tint picks the label on it.
   const content = tint && filled && !disabled ? contentOnTint(tint, theme) : tokens.content;
+  const accessibilityModifiers = useAccessibilityModifiers({
+    accessibilityHint
+  });
   const modifiers = useMemo(() => {
-    const list = [buttonStyleModifier(glassTint ? 'plain' : style), controlSizeModifier(controlSize)];
+    const list = [buttonStyleModifier(glassTint ? 'plain' : style), controlSizeModifier(controlSize), ...accessibilityModifiers];
     if (glassTint) {
       list.push(glassEffectModifier({
         glass: {
@@ -69,7 +74,7 @@ export const Button = ({
       list.push(disabledModifier(true));
     }
     return list;
-  }, [controlSize, disabled, glassTint, resolvedTint, style, theme]);
+  }, [accessibilityModifiers, controlSize, disabled, glassTint, resolvedTint, style, theme]);
   return /*#__PURE__*/_jsx(SwiftUIButton, {
     modifiers: modifiers,
     onPress: onPress,

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

@@ -1 +1 @@
-{"version":3,"names":["Button","SwiftUIButton","buttonStyle","buttonStyleModifier","controlSize","controlSizeModifier","disabled","disabledModifier","glassEffect","glassEffectModifier","tint","tintModifier","useAppTheme","useMemo","useHostGuard","Text","VStack","buttonTokens","contentOnTint","jsx","_jsx","STYLE_BY_VARIANT","accent","destructive","glass","secondary","TINT_BY_VARIANT","undefined","label","onPress","testID","variant","wide","theme","tokens","resolvedTint","style","glassTint","color","filled","Boolean","content","modifiers","list","push","interactive","shape","children","align","py"],"sourceRoot":"../../../../src","sources":["atoms/button/button.ios.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Button","SwiftUIButton","buttonStyle","buttonStyleModifier","controlSize","controlSizeModifier","disabled","disabledModifier","glassEffect","glassEffectModifier","tint","tintModifier","useAccessibilityModifiers","useAppTheme","useMemo","useHostGuard","Text","VStack","buttonTokens","contentOnTint","jsx","_jsx","STYLE_BY_VARIANT","accent","destructive","glass","secondary","TINT_BY_VARIANT","undefined","accessibilityHint","label","onPress","testID","variant","wide","theme","tokens","resolvedTint","style","glassTint","color","filled","Boolean","content","accessibilityModifiers","modifiers","list","push","interactive","shape","children","align","py"],"sourceRoot":"../../../../src","sources":["atoms/button/button.ios.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -2,16 +2,17 @@
 
 import { Column } from '@expo/ui/jetpack-compose';
 import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
-import { useSxModifiers } from '@hzblj/kara-sx';
+import { splitAccessibility, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Card = ({
   children,
   testID,
-  ...sx
+  ...props
 }) => {
   useHostGuard('Card');
+  const [accessibility, sx] = splitAccessibility(props);
   const sxModifiers = useSxModifiers({
     bg: 'surface.primary',
     borderRadius: 'large',
@@ -19,7 +20,8 @@ export const Card = ({
     shadow: 'card',
     ...sx
   });
-  const modifiers = useMemo(() => testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers, [sxModifiers, testID]);
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility);
+  const modifiers = useMemo(() => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, sxModifiers, testID]);
   return /*#__PURE__*/_jsx(Column, {
     modifiers: modifiers,
     children: children

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

@@ -1 +1 @@
-{"version":3,"names":["Column","testID","testIdModifier","useSxModifiers","useMemo","useHostGuard","jsx","_jsx","Card","children","sx","sxModifiers","bg","borderRadius","p","shadow","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/card/card.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,0BAA0B;AAC/C,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,QAAQ;EAAER,MAAM;EAAE,GAAGS;AAAa,CAAC,KAAK;EAC3EL,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMM,WAAW,GAAGR,cAAc,CAAC;IAACS,EAAE,EAAE,iBAAiB;IAAEC,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAEC,MAAM,EAAE,MAAM;IAAE,GAAGL;EAAE,CAAC,CAAC;EACnH,MAAMM,SAAS,GAAGZ,OAAO,CACvB,MAAOH,MAAM,GAAG,CAAC,GAAGU,WAAW,EAAET,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGU,WAAY,EACvE,CAACA,WAAW,EAAEV,MAAM,CACtB,CAAC;EAED,oBAAOM,IAAA,CAACP,MAAM;IAACgB,SAAS,EAAEA,SAAU;IAAAP,QAAA,EAAEA;EAAQ,CAAS,CAAC;AAC1D,CAAC","ignoreList":[]}
+{"version":3,"names":["Column","testID","testIdModifier","splitAccessibility","useAccessibilityModifiers","useSxModifiers","useMemo","useHostGuard","jsx","_jsx","Card","children","props","accessibility","sx","sxModifiers","bg","borderRadius","p","shadow","accessibilityModifiers","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/card/card.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,0BAA0B;AAC/C,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,kBAAkB,EAAEC,yBAAyB,EAAEC,cAAc,QAAO,gBAAgB;AAC5F,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,QAAQ;EAAEV,MAAM;EAAE,GAAGW;AAAgB,CAAC,KAAK;EAC9EL,YAAY,CAAC,MAAM,CAAC;EACpB,MAAM,CAACM,aAAa,EAAEC,EAAE,CAAC,GAAGX,kBAAkB,CAACS,KAAK,CAAC;EACrD,MAAMG,WAAW,GAAGV,cAAc,CAAC;IAACW,EAAE,EAAE,iBAAiB;IAAEC,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAEC,MAAM,EAAE,MAAM;IAAE,GAAGL;EAAE,CAAC,CAAC;EACnH,MAAMM,sBAAsB,GAAGhB,yBAAyB,CAACS,aAAa,CAAC;EACvE,MAAMQ,SAAS,GAAGf,OAAO,CACvB,MAAM,CAAC,GAAGS,WAAW,EAAE,IAAId,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAGmB,sBAAsB,CAAC,EAC9F,CAACA,sBAAsB,EAAEL,WAAW,EAAEd,MAAM,CAC9C,CAAC;EAED,oBAAOQ,IAAA,CAACT,MAAM;IAACqB,SAAS,EAAEA,SAAU;IAAAV,QAAA,EAAEA;EAAQ,CAAS,CAAC;AAC1D,CAAC","ignoreList":[]}

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

@@ -1,22 +1,26 @@
 "use strict";
 
 import { VStack } from '@expo/ui/swift-ui';
-import { useSxModifiers } from '@hzblj/kara-sx';
+import { splitAccessibility, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
+import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Card = ({
   children,
   testID,
-  ...sx
+  ...props
 }) => {
   useHostGuard('Card');
-  const modifiers = useSxModifiers({
+  const [accessibility, sx] = splitAccessibility(props);
+  const sxModifiers = useSxModifiers({
     bg: 'surface.primary',
     borderRadius: 'large',
     p: 's16',
     shadow: 'card',
     ...sx
   });
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility);
+  const modifiers = useMemo(() => [...sxModifiers, ...accessibilityModifiers], [accessibilityModifiers, sxModifiers]);
   return /*#__PURE__*/_jsx(VStack, {
     alignment: "leading",
     modifiers: modifiers,