@hzblj/kara-components 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @hzblj/kara-components
 
+## 0.18.0
+
+### Minor Changes
+
+- [#57](https://github.com/hzblj/kara-ui/pull/57) [`262bf11`](https://github.com/hzblj/kara-ui/commit/262bf1130730001da9390df0671bc2c16f7026a7) Thanks [@hzblj](https://github.com/hzblj)! - `Button` takes `variant="plain"`, a text button in the accent with no fill, for the lesser action beside a prominent one ("Skip", "Forgot password?"): SwiftUI's `borderless` style on iOS, padded to a 44pt tap target that the whole label area takes, and Material's `TextButton` on Android. A `tint` colours its label. `Button` also takes `icon`, one of the app's icons before the label and in its colour: a SwiftUI `Label` in the button on iOS, the icon in the button's content row on Android, with Material's tighter padding on the icon side. Screen readers still read the label alone.
+
+  `IconButton` takes `variant`: `plain` (as before, and the default), `filled`, `tonal`, `outlined` or `glass`. iOS draws them as SwiftUI's `borderedProminent`, `bordered` and `glass` styles in a circle, and `outlined` as a plain button in a hairline ring, since SwiftUI has no outlined style; below iOS 26 `glass` is the `bordered` circle. Android draws Material's `FilledIconButton`, `FilledTonalIconButton` and `OutlinedIconButton`, and `glass` as the tonal one: Material has no glass, and a contained button still reads over a photo where an outline would not. A new `color` is the icon's colour, or on `filled` the fill, with the icon picking a colour that reads on it, as a `Button`'s `tint` does.
+
+  `List` takes `variant` and `separators`. `insetGrouped` sets the rows in a rounded card inset from the edges (SwiftUI's `insetGrouped` list style; on Android a `Card` inside the column, as `Form` draws a section), `plain` runs them edge to edge. Each platform keeps its own list by default, `insetGrouped` on iOS and `plain` on Android, so nothing changes until you ask. `separators={false}` drops the lines between rows: iOS hides each row's separator, Android draws no `Divider`.
+
+  `Fab` takes `label`, which makes it an extended FAB with the text beside the icon: Material's `ExtendedFloatingActionButton` on Android, and on iOS kara's own FAB as a 56pt accent capsule. Screen readers say `accessibilityLabel` for the whole button, so give it the label's words. It also takes `size`: `small` (40), `regular` (56, the default) or `large` (96, with a 36 icon), Material's `SmallFloatingActionButton` and `LargeFloatingActionButton` on Android and circles of the same sizes on iOS.
+
+- [#57](https://github.com/hzblj/kara-ui/pull/57) [`262bf11`](https://github.com/hzblj/kara-ui/commit/262bf1130730001da9390df0671bc2c16f7026a7) Thanks [@hzblj](https://github.com/hzblj)! - `DatePicker` takes `datePickerStyle` and `disabled`. `compact`, the pill that opens a calendar, stays the default; `graphical` is the calendar in place, a month at a time (with the time under it in `datetime` mode on iOS), and `wheel` puts the value on wheels. Android shows Material's calendar in place for `graphical` in `date` and `datetime` modes, without its title and headline and in the accent; for `wheel`, and in `time` mode, it keeps its field and dialog, since Material has no wheel. `disabled` dims the picker and ignores taps; Material's calendar has no disabled state of its own, so a disabled `graphical` picker on Android is dimmed and offers only the selected day.
+
+  `Slider` takes `onValueChangeEnd`, called once with the final value when the user lets go, so a seek or a volume can commit on release instead of at every step of the drag: SwiftUI's `onEditingChanged` on iOS, Material's `onValueChangeFinished` on Android.
+
+  `Stepper` and `RadioGroup` take `disabled`, which dims the row and stops the value changing. `Stepper` also takes `decrementLabel` and `incrementLabel`, what TalkBack says for its minus and plus buttons on Android (`Decrement` and `Increment` unless the app passes its own words); iOS's native stepper labels its buttons itself.
+
+  `ColorPicker` takes `disabled`: SwiftUI dims the label and the well and ignores taps on iOS, and on Android kara's own well dims and does not open its sheet, the label dimmed with it.
+
+  `Divider` takes `axis`. `vertical` draws Compose's `VerticalDivider` on Android, as tall as the `HStack` around it; SwiftUI's divider already turns by itself in an `HStack`, so iOS ignores it.
+
+  `Text` ends a text cut short with an ellipsis on Android too, where `numberOfLines` used to clip it. `truncation` says where the ellipsis goes: `tail`, the default, `head` to keep the end of the text, or `middle` to keep both of its ends, for a path or a file name. Android puts it at the head or in the middle of a single line only, as Compose does, and ends a longer text at the tail; kara-native's `AnimatedText` takes `textOverflow` to draw it. That Compose text, which Android also draws for `animate` and `monospacedDigit`, now reads every string child, so a `Text` like `{count} items` no longer comes out empty there.
+
+- [#57](https://github.com/hzblj/kara-ui/pull/57) [`262bf11`](https://github.com/hzblj/kara-ui/commit/262bf1130730001da9390df0671bc2c16f7026a7) Thanks [@hzblj](https://github.com/hzblj)! - `Alert` takes `cancelLabel`: the cancel button's label, so an app in another language no longer shows an English "Cancel" beside its own confirm label. `Cancel` stays the default, and `null` leaves the button out, for an alert that only informs and is closed by its confirm button alone.
+
+  `ActionSheet` takes a `message`: the confirmation dialog's own message under the title on iOS, a line under the title on Android. The title now shows on iOS too, where SwiftUI hid it by default and the actions lost what they were about.
+
+  `Menu` can open from an icon. `icon` sits before the `label` in the same colour, or stands alone as an `IconButton` that opens the menu, with an `accessibilityLabel` the types require when there is no label. iOS now draws each action's `icon` in the menu, as Android already did.
+
+  `MenuAction` takes `disabled`: the action stays in the list, greyed, and does not respond. `Menu`, `ActionSheet` and `ContextMenu` honour it on both platforms (the iOS context menu marks its `UIAction` disabled in kara-native's `ContextMenuView`, so it needs a native rebuild), `FabMenu` on iOS only, since Material's FAB menu items have no disabled state.
+
+  `Progress` takes `color`, any colour token: `fill.destructive.primary` for storage nearly full, `fill.success.primary` for a goal reached. `fill.accent.primary` stays the default. On Android a bar in another colour gets a track in that colour, faded, rather than Material's pale accent under it.
+
+- [#53](https://github.com/hzblj/kara-ui/pull/53) [`d31ac23`](https://github.com/hzblj/kara-ui/commit/d31ac23ae6cdb27948148b14d7d7abb0611ab3f9) Thanks [@hzblj](https://github.com/hzblj)! - `Sheet` takes `systemBackground`: on iOS the sheet keeps the system's own background instead of `bg`, which is untinted Liquid Glass on iOS 26 and a material blur before it. Use it for a sheet that floats over content it should let through, such as a map. Android keeps `bg`.
+
+- [#57](https://github.com/hzblj/kara-ui/pull/57) [`262bf11`](https://github.com/hzblj/kara-ui/commit/262bf1130730001da9390df0671bc2c16f7026a7) Thanks [@hzblj](https://github.com/hzblj)! - `testID` works on both platforms, so Maestro and other end-to-end tests can find a control by it: the accessibility identifier on iOS, the Compose test tag (exposed as the resource id) on Android. `Switch`, `Checkbox`, `Slider`, `Stepper`, `RadioGroup`, `Menu`, `Collapsible`, `Progress` and `Badge` take it for the first time, and `TextField`, `IconButton`, `Fab`, `Divider` and `List`, which only forwarded it on iOS, now tag their Compose views too. It lands on the control a test taps or reads rather than on a row around it: the switch or the box beside its label, the field below its label, a `Menu`'s trigger, a `Stepper`'s buttons and value, a `Collapsible`'s row.
+
+- [#57](https://github.com/hzblj/kara-ui/pull/57) [`262bf11`](https://github.com/hzblj/kara-ui/commit/262bf1130730001da9390df0671bc2c16f7026a7) Thanks [@hzblj](https://github.com/hzblj)! - `TextField` can be set up for the text it takes, so a proper email, password or one-time-code field can be built. `placeholder` is a hint in the empty field; `keyboard` brings up the `email`, `url`, `number`, `decimal` or `phone` keyboard; `autoCapitalize` and `autoCorrect` say how the keyboard treats what is typed, and both turn off by themselves for an email or a URL; `contentType` offers to fill the field in, through iOS AutoFill and, on Android, an autofill service; `maxLength` cuts off what is typed past it. It submits and moves on as well: `submitLabel` names the return key (`done`, `go`, `next`, `search` or `send`), `onSubmit` is called with the text when it is pressed, `autoFocus` focuses the field as it appears, `onFocusChange` reports focus, and a `ref` (`TextFieldRef`, with `focus`, `blur` and `clear`) lets one field's `next` focus the following one. A `multiline` field keeps a return key that starts a new line. On Android a `secure` field now brings up the password keyboard, which suggests and learns nothing.
+
+  `SearchBar` takes `onSubmit`, called with the query when the keyboard's return key, which now reads Search, is pressed, and `autoFocus`. A query is taken as typed: capitals and corrections are off by default, and `autoCapitalize` and `autoCorrect` turn them back on.
+
+### Patch Changes
+
+- Updated dependencies [[`262bf11`](https://github.com/hzblj/kara-ui/commit/262bf1130730001da9390df0671bc2c16f7026a7), [`262bf11`](https://github.com/hzblj/kara-ui/commit/262bf1130730001da9390df0671bc2c16f7026a7)]:
+  - @hzblj/kara-native@0.18.0
+  - @hzblj/kara-sx@0.18.0
+  - @hzblj/kara-theme@0.18.0
+
 ## 0.17.0
 
 ### Minor Changes

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

@@ -1,7 +1,9 @@
 "use strict";
 
 import { Badge as ComposeBadge, Text as ComposeText } from '@expo/ui/jetpack-compose';
+import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { BADGE_TOKENS } from "./badge-tokens.js";
 
@@ -9,14 +11,17 @@ import { BADGE_TOKENS } from "./badge-tokens.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Badge = ({
   label,
+  testID,
   tone = 'neutral'
 }) => {
   useHostGuard('Badge');
   const theme = useAppTheme();
   const tokens = BADGE_TOKENS[tone];
+  const modifiers = useMemo(() => testID ? [testIdModifier(testID)] : undefined, [testID]);
   return /*#__PURE__*/_jsx(ComposeBadge, {
     containerColor: theme.color(tokens.fill),
     contentColor: theme.color(tokens.content),
+    modifiers: modifiers,
     children: /*#__PURE__*/_jsx(ComposeText, {
       color: theme.colorString(tokens.content),
       style: theme.typography.captionMedium,

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

@@ -1 +1 @@
-{"version":3,"names":["Badge","ComposeBadge","Text","ComposeText","useAppTheme","useHostGuard","BADGE_TOKENS","jsx","_jsx","label","tone","theme","tokens","containerColor","color","fill","contentColor","content","children","colorString","style","typography","captionMedium"],"sourceRoot":"../../../../src","sources":["atoms/badge/badge.android.tsx"],"mappings":";;AAAA,SAAQA,KAAK,IAAIC,YAAY,EAAEC,IAAI,IAAIC,WAAW,QAAO,0BAA0B;AACnF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAE/C,SAAQC,YAAY,QAAO,mBAAgB;;AAE3C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,OAAO,MAAMR,KAAqB,GAAGA,CAAC;EAACS,KAAK;EAAEC,IAAI,GAAG;AAAqB,CAAC,KAAK;EAC9EL,YAAY,CAAC,OAAO,CAAC;EACrB,MAAMM,KAAK,GAAGP,WAAW,CAAC,CAAC;EAC3B,MAAMQ,MAAM,GAAGN,YAAY,CAACI,IAAI,CAAC;EAEjC,oBACEF,IAAA,CAACP,YAAY;IAACY,cAAc,EAAEF,KAAK,CAACG,KAAK,CAACF,MAAM,CAACG,IAAI,CAAE;IAACC,YAAY,EAAEL,KAAK,CAACG,KAAK,CAACF,MAAM,CAACK,OAAO,CAAE;IAAAC,QAAA,eAChGV,IAAA,CAACL,WAAW;MAACW,KAAK,EAAEH,KAAK,CAACQ,WAAW,CAACP,MAAM,CAACK,OAAO,CAAE;MAACG,KAAK,EAAET,KAAK,CAACU,UAAU,CAACC,aAAc;MAAAJ,QAAA,EAC1FT;IAAK,CACK;EAAC,CACF,CAAC;AAEnB,CAAC","ignoreList":[]}
+{"version":3,"names":["Badge","ComposeBadge","Text","ComposeText","testID","testIdModifier","useAppTheme","useMemo","useHostGuard","BADGE_TOKENS","jsx","_jsx","label","tone","theme","tokens","modifiers","undefined","containerColor","color","fill","contentColor","content","children","colorString","style","typography","captionMedium"],"sourceRoot":"../../../../src","sources":["atoms/badge/badge.android.tsx"],"mappings":";;AAAA,SAAQA,KAAK,IAAIC,YAAY,EAAEC,IAAI,IAAIC,WAAW,QAAO,0BAA0B;AACnF,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAE/C,SAAQC,YAAY,QAAO,mBAAgB;;AAE3C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,OAAO,MAAMX,KAAqB,GAAGA,CAAC;EAACY,KAAK;EAAER,MAAM;EAAES,IAAI,GAAG;AAAqB,CAAC,KAAK;EACtFL,YAAY,CAAC,OAAO,CAAC;EACrB,MAAMM,KAAK,GAAGR,WAAW,CAAC,CAAC;EAC3B,MAAMS,MAAM,GAAGN,YAAY,CAACI,IAAI,CAAC;EACjC,MAAMG,SAAS,GAAGT,OAAO,CAAC,MAAOH,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGa,SAAU,EAAE,CAACb,MAAM,CAAC,CAAC;EAE1F,oBACEO,IAAA,CAACV,YAAY;IACXiB,cAAc,EAAEJ,KAAK,CAACK,KAAK,CAACJ,MAAM,CAACK,IAAI,CAAE;IACzCC,YAAY,EAAEP,KAAK,CAACK,KAAK,CAACJ,MAAM,CAACO,OAAO,CAAE;IAC1CN,SAAS,EAAEA,SAAU;IAAAO,QAAA,eAErBZ,IAAA,CAACR,WAAW;MAACgB,KAAK,EAAEL,KAAK,CAACU,WAAW,CAACT,MAAM,CAACO,OAAO,CAAE;MAACG,KAAK,EAAEX,KAAK,CAACY,UAAU,CAACC,aAAc;MAAAJ,QAAA,EAC1FX;IAAK,CACK;EAAC,CACF,CAAC;AAEnB,CAAC","ignoreList":[]}

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

@@ -8,6 +8,7 @@ import { BADGE_TOKENS } from "./badge-tokens.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Badge = ({
   label,
+  testID,
   tone = 'neutral'
 }) => {
   useHostGuard('Badge');
@@ -20,6 +21,7 @@ export const Badge = ({
   });
   return /*#__PURE__*/_jsx(HStack, {
     modifiers: modifiers,
+    testID: testID,
     children: /*#__PURE__*/_jsx(Text, {
       color: tokens.content,
       variant: "labelMedium",

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

@@ -1 +1 @@
-{"version":3,"names":["HStack","useSxModifiers","useHostGuard","Text","BADGE_TOKENS","jsx","_jsx","Badge","label","tone","tokens","modifiers","bg","fill","borderRadius","px","py","children","color","content","variant"],"sourceRoot":"../../../../src","sources":["atoms/badge/badge.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAE5B,SAAQC,YAAY,QAAO,mBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE3C,OAAO,MAAMC,KAAqB,GAAGA,CAAC;EAACC,KAAK;EAAEC,IAAI,GAAG;AAAqB,CAAC,KAAK;EAC9EP,YAAY,CAAC,OAAO,CAAC;EACrB,MAAMQ,MAAM,GAAGN,YAAY,CAACK,IAAI,CAAC;EACjC,MAAME,SAAS,GAAGV,cAAc,CAAC;IAACW,EAAE,EAAEF,MAAM,CAACG,IAAI;IAAEC,YAAY,EAAE,MAAM;IAAEC,EAAE,EAAE,IAAI;IAAEC,EAAE,EAAE;EAAI,CAAC,CAAC;EAE7F,oBACEV,IAAA,CAACN,MAAM;IAACW,SAAS,EAAEA,SAAU;IAAAM,QAAA,eAC3BX,IAAA,CAACH,IAAI;MAACe,KAAK,EAAER,MAAM,CAACS,OAAQ;MAACC,OAAO,EAAC,aAAa;MAAAH,QAAA,EAC/CT;IAAK,CACF;EAAC,CACD,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["HStack","useSxModifiers","useHostGuard","Text","BADGE_TOKENS","jsx","_jsx","Badge","label","testID","tone","tokens","modifiers","bg","fill","borderRadius","px","py","children","color","content","variant"],"sourceRoot":"../../../../src","sources":["atoms/badge/badge.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAE5B,SAAQC,YAAY,QAAO,mBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE3C,OAAO,MAAMC,KAAqB,GAAGA,CAAC;EAACC,KAAK;EAAEC,MAAM;EAAEC,IAAI,GAAG;AAAqB,CAAC,KAAK;EACtFR,YAAY,CAAC,OAAO,CAAC;EACrB,MAAMS,MAAM,GAAGP,YAAY,CAACM,IAAI,CAAC;EACjC,MAAME,SAAS,GAAGX,cAAc,CAAC;IAACY,EAAE,EAAEF,MAAM,CAACG,IAAI;IAAEC,YAAY,EAAE,MAAM;IAAEC,EAAE,EAAE,IAAI;IAAEC,EAAE,EAAE;EAAI,CAAC,CAAC;EAE7F,oBACEX,IAAA,CAACN,MAAM;IAACY,SAAS,EAAEA,SAAU;IAACH,MAAM,EAAEA,MAAO;IAAAS,QAAA,eAC3CZ,IAAA,CAACH,IAAI;MAACgB,KAAK,EAAER,MAAM,CAACS,OAAQ;MAACC,OAAO,EAAC,aAAa;MAAAH,QAAA,EAC/CV;IAAK,CACF;EAAC,CACD,CAAC;AAEb,CAAC","ignoreList":[]}

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

@@ -1,5 +1,7 @@
 "use strict";
 
+/** `fill` and `shadow` are unset for `plain`: a text button has no container to fill or lift. */
+
 const TOKENS = {
   accent: {
     content: 'content.on.accent',
@@ -16,6 +18,11 @@ const TOKENS = {
     fill: 'btn.bg.glass.base',
     shadow: 'btn.glass'
   },
+  plain: {
+    content: 'content.accent',
+    fill: undefined,
+    shadow: undefined
+  },
   secondary: {
     content: 'content.primary',
     fill: 'btn.bg.secondary.base',
@@ -31,6 +38,7 @@ export const buttonTokens = (variant, disabled, theme) => {
     accent: 'fill.accent.disabled',
     destructive: 'fill.destructive.disabled',
     glass: 'btn.bg.glass.disabled',
+    plain: undefined,
     secondary: 'btn.bg.secondary.disabled'
   };
   void theme;

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","plain","undefined","secondary","buttonTokens","variant","disabled","theme","tokens","disabledFill","luminance","color","hex","exec","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

@@ -1,25 +1,45 @@
 "use strict";
 
-import { Button as ComposeButton, Text as ComposeText, OutlinedButton } from '@expo/ui/jetpack-compose';
-import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { Button as ComposeButton, Spacer as ComposeSpacer, Text as ComposeText, OutlinedButton, TextButton } from '@expo/ui/jetpack-compose';
+import { testID as testIdModifier, width as widthModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
-import { useAppTheme } from '@hzblj/kara-theme';
+import { spacing, useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
+import { Icon } from "../icon/index.js";
 import { buttonTokens, contentOnTint } from "./button-tokens.js";
 
+/** Material's `ButtonDefaults.IconSpacing`: the gap between a button's icon and its label. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_GAP = [widthModifier(spacing.s8)];
+
+/**
+ * Material's padding for a button with a leading icon (`ButtonWithIconContentPadding`,
+ * `TextButtonWithIconContentPadding`): the icon side a step tighter than the label's. Top and bottom keep the defaults.
+ */
+const WITH_ICON_PADDING = {
+  end: spacing.s24,
+  start: spacing.s16
+};
+const TEXT_WITH_ICON_PADDING = {
+  end: spacing.s16,
+  start: spacing.s12
+};
+
 /**
  * Material's filled button, in its own stadium shape. No `borderRadius` or `shadow` from the tokens: those shape the
  * SwiftUI button's glossy ring, and laid over a Compose button they clip and outline a rounded rectangle around the
- * pill Material draws. The label is a Compose `Text` — `@expo/ui`'s button takes composable content, not a string.
+ * pill Material draws. The label is a Compose `Text` — `@expo/ui`'s button takes composable content, not a string —
+ * after the `icon`, when there is one, in the same row.
  *
- * Material has no glass, so `glass` is its outlined button — and a `tint` makes any variant a filled button in that
- * colour, as a prominent style does on iOS. `buttonStyle` and `controlSize` are SwiftUI's alone.
+ * Material has no glass, so `glass` is its outlined button — and a `tint` makes any variant but `plain` a filled
+ * button in that colour, as a prominent style does on iOS. `plain` is Material's `TextButton`, and a `tint` colours its
+ * label. `buttonStyle` and `controlSize` are SwiftUI's alone.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export const Button = ({
   accessibilityHint,
   disabled = false,
+  icon,
   label,
   onPress,
   testID,
@@ -38,24 +58,32 @@ export const Button = ({
   }, accessibilityHint !== undefined);
   const modifiers = useMemo(() => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, sxModifiers, testID]);
   const style = theme.typography.body;
+  const text = variant === 'plain';
   const outlined = variant === 'glass' && !tint;
   const fill = tint && !disabled ? tint : tokens.fill;
-  const content = tint && !disabled ? contentOnTint(tint, theme) : tokens.content;
-  const MaterialButton = outlined ? OutlinedButton : ComposeButton;
-  return /*#__PURE__*/_jsx(MaterialButton, {
-    colors: outlined ? {
+  const content = !tint || disabled ? tokens.content : text ? tint : contentOnTint(tint, theme);
+  const MaterialButton = text ? TextButton : outlined ? OutlinedButton : ComposeButton;
+  return /*#__PURE__*/_jsxs(MaterialButton, {
+    colors: fill && !text && !outlined ? {
+      containerColor: theme.color(fill),
       contentColor: theme.color(content),
+      disabledContainerColor: theme.color(fill),
       disabledContentColor: theme.color(content)
     } : {
-      containerColor: theme.color(fill),
       contentColor: theme.color(content),
-      disabledContainerColor: theme.color(fill),
       disabledContentColor: theme.color(content)
     },
+    contentPadding: icon ? text ? TEXT_WITH_ICON_PADDING : WITH_ICON_PADDING : undefined,
     enabled: !disabled,
     modifiers: modifiers,
     onClick: onPress,
-    children: /*#__PURE__*/_jsx(ComposeText, {
+    children: [icon ? /*#__PURE__*/_jsx(Icon, {
+      color: content,
+      name: icon,
+      size: "s20"
+    }) : null, icon ? /*#__PURE__*/_jsx(ComposeSpacer, {
+      modifiers: ICON_GAP
+    }) : null, /*#__PURE__*/_jsx(ComposeText, {
       color: theme.colorString(content),
       style: {
         fontFamily: style.fontFamily,
@@ -64,7 +92,7 @@ export const Button = ({
         lineHeight: style.lineHeight
       },
       children: label
-    })
+    })]
   });
 };
 //# sourceMappingURL=button.android.js.map

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["Button","ComposeButton","Spacer","ComposeSpacer","Text","ComposeText","OutlinedButton","TextButton","testID","testIdModifier","width","widthModifier","useAccessibilityModifiers","useSxModifiers","spacing","useAppTheme","useMemo","useHostGuard","Icon","buttonTokens","contentOnTint","jsx","_jsx","jsxs","_jsxs","ICON_GAP","s8","WITH_ICON_PADDING","end","s24","start","s16","TEXT_WITH_ICON_PADDING","s12","accessibilityHint","disabled","icon","label","onPress","tint","variant","wide","theme","tokens","sxModifiers","accessibilityModifiers","undefined","modifiers","style","typography","body","text","outlined","fill","content","MaterialButton","colors","containerColor","color","contentColor","disabledContainerColor","disabledContentColor","contentPadding","enabled","onClick","children","name","size","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

@@ -1,11 +1,12 @@
 "use strict";
 
-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 { Button as SwiftUIButton, Label as SwiftUILabel } from '@expo/ui/swift-ui';
+import { buttonStyle as buttonStyleModifier, contentShape, controlSize as controlSizeModifier, disabled as disabledModifier, glassEffect as glassEffectModifier, labelStyle, shapes, 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";
+import { Icon } from "../icon/index.js";
 import { Text } from "../text/index.js";
 import { VStack } from "../v-stack/index.js";
 import { buttonTokens, contentOnTint } from "./button-tokens.js";
@@ -14,19 +15,55 @@ const STYLE_BY_VARIANT = {
   accent: 'borderedProminent',
   destructive: 'borderedProminent',
   glass: 'glass',
+  plain: 'borderless',
   secondary: 'bordered'
 };
 const TINT_BY_VARIANT = {
   accent: 'fill.accent.primary',
   destructive: 'fill.destructive.primary',
   glass: undefined,
+  plain: undefined,
   secondary: undefined
 };
+
+/** Both, wherever the button sits: a toolbar or a menu would otherwise show the icon alone. */
+const TITLE_AND_ICON = [labelStyle('titleAndIcon')];
+
+/**
+ * `borderless` draws nothing around the label, so the label is the button: padding takes it to a 44pt tap target,
+ * and a rectangle content shape makes the whole of it (the padding, and the width `wide` gives it) take the tap,
+ * not only the glyphs.
+ */
+const TEXT_BUTTON_TARGET = {
+  modifiers: [contentShape(shapes.rectangle())]
+};
+
+/**
+ * A prominent style (and tinted glass) is coloured by the tint, so a caller's own tint picks the label on it. A text
+ * style has nothing to fill, so there the tint is the label's own colour.
+ */
+const labelColor = ({
+  disabled,
+  filled,
+  textOnly,
+  theme,
+  tint,
+  tokens
+}) => {
+  if (!tint || disabled) {
+    return tokens.content;
+  }
+  if (filled) {
+    return contentOnTint(tint, theme);
+  }
+  return textOnly ? tint : tokens.content;
+};
 export const Button = ({
   accessibilityHint,
   buttonStyle,
   controlSize = 'large',
   disabled = false,
+  icon,
   label,
   onPress,
   testID,
@@ -51,8 +88,17 @@ export const Button = ({
    */
   const glassTint = style === 'glass' && resolvedTint ? theme.color(resolvedTint) : undefined;
   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 textOnly = style === 'borderless' || style === 'plain';
+  // Only the `plain` variant's own text button is padded out; another variant restyled `plain` keeps its layout.
+  const textButton = variant === 'plain' && textOnly;
+  const content = labelColor({
+    disabled,
+    filled,
+    textOnly,
+    theme,
+    tint,
+    tokens
+  });
   const accessibilityModifiers = useAccessibilityModifiers({
     accessibilityHint
   });
@@ -75,19 +121,29 @@ export const Button = ({
     }
     return list;
   }, [accessibilityModifiers, controlSize, disabled, glassTint, resolvedTint, style, theme]);
+  const text = /*#__PURE__*/_jsx(Text, {
+    color: content,
+    variant: "body",
+    children: label
+  });
   return /*#__PURE__*/_jsx(SwiftUIButton, {
     modifiers: modifiers,
     onPress: onPress,
     testID: testID,
     children: /*#__PURE__*/_jsx(VStack, {
       align: "center",
-      py: glassTint ? 's16' : undefined,
+      ios: textButton ? TEXT_BUTTON_TARGET : undefined,
+      py: glassTint ? 's16' : textButton ? 's12' : undefined,
       wide: wide,
-      children: /*#__PURE__*/_jsx(Text, {
-        color: content,
-        variant: "body",
-        children: label
-      })
+      children: icon ? /*#__PURE__*/_jsx(SwiftUILabel, {
+        icon: /*#__PURE__*/_jsx(Icon, {
+          color: content,
+          name: icon,
+          size: "s20"
+        }),
+        modifiers: TITLE_AND_ICON,
+        children: text
+      }) : text
     })
   });
 };

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

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { Checkbox as ComposeCheckbox, Row, Text } from '@expo/ui/jetpack-compose';
-import { clickable, fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
+import { clickable, fillMaxWidth, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { spacing, useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
@@ -18,17 +18,21 @@ export const Checkbox = ({
   disabled = false,
   label,
   onValueChange,
+  testID,
   value
 }) => {
   useHostGuard('Checkbox');
   const theme = useAppTheme();
   const rowModifiers = useMemo(() => disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => onValueChange(!value))], [disabled, onValueChange, value]);
+  // On the box, not the row: the box is its own toggleable node inside the row, and the one a test reads.
+  const controlModifiers = useMemo(() => testID ? [testIdModifier(testID)] : undefined, [testID]);
   const control = /*#__PURE__*/_jsx(ComposeCheckbox, {
     colors: {
       checkedColor: theme.color('fill.accent.primary'),
       checkmarkColor: theme.color('content.on.accent')
     },
     enabled: !disabled,
+    modifiers: controlModifiers,
     onCheckedChange: onValueChange ?? NOOP,
     value: value
   });

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","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,mBAAmB;IAAC,CAAE;IAC7GE,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":[]}
+{"version":3,"names":["Checkbox","ComposeCheckbox","Row","Text","clickable","fillMaxWidth","testID","testIdModifier","spacing","useAppTheme","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","NOOP","undefined","disabled","label","onValueChange","value","theme","rowModifiers","controlModifiers","control","colors","checkedColor","color","checkmarkColor","enabled","modifiers","onCheckedChange","horizontalArrangement","spacedBy","s8","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,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACpG,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,MAAMjB,QAA2B,GAAGA,CAAC;EAACkB,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEd,MAAM;EAAEe;AAAoB,CAAC,KAAK;EACrHV,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMW,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,YAAY,GAAGb,OAAO,CAC1B,MAAOQ,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACf,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMgB,aAAa,CAAC,CAACC,KAAK,CAAC,CAAC,CAAE,EAChH,CAACH,QAAQ,EAAEE,aAAa,EAAEC,KAAK,CACjC,CAAC;EACD;EACA,MAAMG,gBAAgB,GAAGd,OAAO,CAAC,MAAOJ,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGW,SAAU,EAAE,CAACX,MAAM,CAAC,CAAC;EACjG,MAAMmB,OAAO,gBACXZ,IAAA,CAACZ,eAAe;IACdyB,MAAM,EAAE;MAACC,YAAY,EAAEL,KAAK,CAACM,KAAK,CAAC,qBAAqB,CAAC;MAAEC,cAAc,EAAEP,KAAK,CAACM,KAAK,CAAC,mBAAmB;IAAC,CAAE;IAC7GE,OAAO,EAAE,CAACZ,QAAS;IACnBa,SAAS,EAAEP,gBAAiB;IAC5BQ,eAAe,EAAEZ,aAAa,IAAIJ,IAAK;IACvCK,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOM,OAAO;EAChB;EAEA,oBACEV,KAAA,CAACb,GAAG;IAAC+B,qBAAqB,EAAE;MAACC,QAAQ,EAAE1B,OAAO,CAAC2B;IAAE,CAAE;IAACJ,SAAS,EAAER,YAAa;IAACa,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,GACpGZ,OAAO,eACRZ,IAAA,CAACV,IAAI;MAACyB,KAAK,EAAEN,KAAK,CAACgB,WAAW,CAACpB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACqB,KAAK,EAAEjB,KAAK,CAACkB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GlB;IAAK,CACF,CAAC;EAAA,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -10,6 +10,7 @@ export const Checkbox = ({
   disabled = false,
   label,
   onValueChange,
+  testID,
   value
 }) => {
   useHostGuard('Checkbox');
@@ -25,7 +26,8 @@ export const Checkbox = ({
     isOn: value,
     label: label,
     modifiers: modifiers,
-    onIsOnChange: onValueChange
+    onIsOnChange: onValueChange,
+    testID: testID
   });
 };
 //# sourceMappingURL=checkbox.ios.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Toggle","disabled","disabledModifier","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Checkbox","label","onValueChange","value","theme","modifiers","list","color","push","isOn","onIsOnChange"],"sourceRoot":"../../../../src","sources":["atoms/checkbox/checkbox.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,IAAI,QAAO,6BAA6B;AAC9E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACR,QAAQ,GAAG,KAAK;EAAES,KAAK;EAAEC,aAAa;EAAEC;AAAoB,CAAC,KAAK;EAC7GN,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMO,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,MAAMU,SAAS,GAAGT,OAAO,CAAC,MAAM;IAC9B,MAAMU,IAAI,GAAG,CAACZ,IAAI,CAACU,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEvD,IAAIf,QAAQ,EAAE;MACZc,IAAI,CAACE,IAAI,CAACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC;IAEA,OAAOa,IAAI;EACb,CAAC,EAAE,CAACd,QAAQ,EAAEY,KAAK,CAAC,CAAC;EAErB,oBAAOL,IAAA,CAACR,MAAM;IAACkB,IAAI,EAAEN,KAAM;IAACF,KAAK,EAAEA,KAAM;IAACI,SAAS,EAAEA,SAAU;IAACK,YAAY,EAAER;EAAc,CAAE,CAAC;AACjG,CAAC","ignoreList":[]}
+{"version":3,"names":["Toggle","disabled","disabledModifier","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Checkbox","label","onValueChange","testID","value","theme","modifiers","list","color","push","isOn","onIsOnChange"],"sourceRoot":"../../../../src","sources":["atoms/checkbox/checkbox.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,IAAI,QAAO,6BAA6B;AAC9E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACR,QAAQ,GAAG,KAAK;EAAES,KAAK;EAAEC,aAAa;EAAEC,MAAM;EAAEC;AAAoB,CAAC,KAAK;EACrHP,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMQ,KAAK,GAAGV,WAAW,CAAC,CAAC;EAE3B,MAAMW,SAAS,GAAGV,OAAO,CAAC,MAAM;IAC9B,MAAMW,IAAI,GAAG,CAACb,IAAI,CAACW,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEvD,IAAIhB,QAAQ,EAAE;MACZe,IAAI,CAACE,IAAI,CAAChB,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC;IAEA,OAAOc,IAAI;EACb,CAAC,EAAE,CAACf,QAAQ,EAAEa,KAAK,CAAC,CAAC;EAErB,oBAAON,IAAA,CAACR,MAAM;IAACmB,IAAI,EAAEN,KAAM;IAACH,KAAK,EAAEA,KAAM;IAACK,SAAS,EAAEA,SAAU;IAACK,YAAY,EAAET,aAAc;IAACC,MAAM,EAAEA;EAAO,CAAE,CAAC;AACjH,CAAC","ignoreList":[]}

package/lib/module/atoms/color-picker/color-picker.android.js

@@ -9,8 +9,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The row SwiftUI's `ColorPicker` lays out on iOS, the label leading and the well trailing, around kara's own Compose
  * well: Compose ships no colour picker, so the sheet behind it draws the iOS picker's grid, spectrum and sliders.
+ * `disabled` dims the label and the well, which then does not open its sheet.
  */
 export const ColorPicker = ({
+  disabled = false,
   label,
   onValueChange,
   supportsOpacity = false,
@@ -24,8 +26,10 @@ export const ColorPicker = ({
     testID: testID,
     wide: true,
     children: [label ? /*#__PURE__*/_jsx(Text, {
+      color: disabled ? 'content.tertiary' : undefined,
       children: label
     }) : null, /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(ColorWell, {
+      enabled: !disabled,
       onValueChange: onValueChange,
       supportsOpacity: supportsOpacity,
       title: label,

package/lib/module/atoms/color-picker/color-picker.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["ColorWell","useHostGuard","HStack","Spacer","Text","jsx","_jsx","jsxs","_jsxs","ColorPicker","label","onValueChange","supportsOpacity","testID","value","align","spacing","wide","children","title"],"sourceRoot":"../../../../src","sources":["atoms/color-picker/color-picker.android.tsx"],"mappings":";;AAAA,SAAQA,SAAS,QAAO,oCAAoC;AAE5D,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,MAAM,QAAO,qBAAY;AACjC,SAAQC,MAAM,QAAO,oBAAW;AAChC,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAiC,GAAGA,CAAC;EAChDC,KAAK;EACLC,aAAa;EACbC,eAAe,GAAG,KAAK;EACvBC,MAAM;EACNC;AACgB,CAAC,KAAK;EACtBb,YAAY,CAAC,aAAa,CAAC;EAE3B,oBACEO,KAAA,CAACN,MAAM;IAACa,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACH,MAAM,EAAEA,MAAO;IAACI,IAAI;IAAAC,QAAA,GACtDR,KAAK,gBAAGJ,IAAA,CAACF,IAAI;MAAAc,QAAA,EAAER;IAAK,CAAO,CAAC,GAAG,IAAI,eACpCJ,IAAA,CAACH,MAAM,IAAE,CAAC,eACVG,IAAA,CAACN,SAAS;MAACW,aAAa,EAAEA,aAAc;MAACC,eAAe,EAAEA,eAAgB;MAACO,KAAK,EAAET,KAAM;MAACI,KAAK,EAAEA;IAAM,CAAE,CAAC;EAAA,CACnG,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["ColorWell","useHostGuard","HStack","Spacer","Text","jsx","_jsx","jsxs","_jsxs","ColorPicker","disabled","label","onValueChange","supportsOpacity","testID","value","align","spacing","wide","children","color","undefined","enabled","title"],"sourceRoot":"../../../../src","sources":["atoms/color-picker/color-picker.android.tsx"],"mappings":";;AAAA,SAAQA,SAAS,QAAO,oCAAoC;AAE5D,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,MAAM,QAAO,qBAAY;AACjC,SAAQC,MAAM,QAAO,oBAAW;AAChC,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACLC,aAAa;EACbC,eAAe,GAAG,KAAK;EACvBC,MAAM;EACNC;AACgB,CAAC,KAAK;EACtBd,YAAY,CAAC,aAAa,CAAC;EAE3B,oBACEO,KAAA,CAACN,MAAM;IAACc,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACH,MAAM,EAAEA,MAAO;IAACI,IAAI;IAAAC,QAAA,GACtDR,KAAK,gBAAGL,IAAA,CAACF,IAAI;MAACgB,KAAK,EAAEV,QAAQ,GAAG,kBAAkB,GAAGW,SAAU;MAAAF,QAAA,EAAER;IAAK,CAAO,CAAC,GAAG,IAAI,eACtFL,IAAA,CAACH,MAAM,IAAE,CAAC,eACVG,IAAA,CAACN,SAAS;MACRsB,OAAO,EAAE,CAACZ,QAAS;MACnBE,aAAa,EAAEA,aAAc;MAC7BC,eAAe,EAAEA,eAAgB;MACjCU,KAAK,EAAEZ,KAAM;MACbI,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACI,CAAC;AAEb,CAAC","ignoreList":[]}

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

@@ -1,9 +1,18 @@
 "use strict";
 
 import { ColorPicker as SwiftUIColorPicker } from '@expo/ui/swift-ui';
+import { disabled as disabledModifier, labelsHidden, opacity as opacityModifier } from '@expo/ui/swift-ui/modifiers';
+import { opacity } from '@hzblj/kara-theme';
 import { useHostGuard } from "../../host-context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { HStack } from "../h-stack/index.js";
+import { Spacer } from "../spacer/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// iOS 27 stops a disabled picker but draws its label and well at full strength: the label is then kara's own text,
+// dimmed, and the well takes the opacity.
+const DISABLED = [labelsHidden(), disabledModifier(true), opacityModifier(opacity.o40)];
 export const ColorPicker = ({
+  disabled = false,
   label,
   onValueChange,
   supportsOpacity = false,
@@ -11,12 +20,25 @@ export const ColorPicker = ({
   value
 }) => {
   useHostGuard('ColorPicker');
-  return /*#__PURE__*/_jsx(SwiftUIColorPicker, {
+  const picker = /*#__PURE__*/_jsx(SwiftUIColorPicker, {
     label: label,
+    modifiers: disabled ? DISABLED : undefined,
     onSelectionChange: onValueChange,
     selection: value,
     supportsOpacity: supportsOpacity,
     testID: testID
   });
+  if (!disabled) {
+    return picker;
+  }
+  return /*#__PURE__*/_jsxs(HStack, {
+    align: "center",
+    spacing: "s12",
+    wide: true,
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      color: "content.tertiary",
+      children: label
+    }) : null, /*#__PURE__*/_jsx(Spacer, {}), picker]
+  });
 };
 //# sourceMappingURL=color-picker.ios.js.map