@hzblj/kara-components 0.17.0 → 0.19.0

package/lib/module/organisms/menu/menu.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","useAppTheme","useCallback","useState","HStack","Icon","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","MenuItem","action","onDismiss","theme","color","destructive","elementColors","leadingIconColor","textColor","onClick","onPress","children","colorString","style","typography","body","label","icon","LeadingIcon","name","size","Menu","actions","expanded","setExpanded","dismiss","onDismissRequest","Trigger","align","spacing","Items","map"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","useAppTheme","useCallback","useState","HStack","Icon","IconButton","Glyph","useHostGuard","isIconOnly","menuActionColor","jsx","_jsx","jsxs","_jsxs","MenuItem","action","onDismiss","theme","color","elementColors","leadingIconColor","textColor","enabled","disabled","onClick","onPress","children","colorString","style","typography","body","label","icon","LeadingIcon","name","size","triggerOf","props","open","accessibilityLabel","testID","align","spacing","Menu","expanded","setExpanded","dismiss","onDismissRequest","Trigger","Items","actions","map"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/menu/menu.ios.js

@@ -1,19 +1,82 @@
 "use strict";
 
-import { Button, Menu as SwiftUIMenu } from '@expo/ui/swift-ui';
+import { Button, Image, Label, Menu as SwiftUIMenu } from '@expo/ui/swift-ui';
+import { contentShape, disabled, frame, resizable, shapes } from '@expo/ui/swift-ui/modifiers';
+import { iconResourceName } from '@hzblj/expo-native-icons';
+import { useAccessibilityModifiers } from '@hzblj/kara-sx';
+import { spacing } from '@hzblj/kara-theme';
+import { Icon } from "../../atoms/icon/index.js";
+import { ZStack } from "../../atoms/z-stack/index.js";
 import { useHostGuard } from "../../host-context.js";
+import { isIconOnly } from "./menu-parts.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Menu = ({
-  actions,
-  label
-}) => {
+const DISABLED = [disabled(true)];
+
+/** Apple's least tap target, as `IconButton` takes it. */
+const TARGET = 44;
+
+/** The whole square takes the tap, not only the glyph's own pixels. */
+const WHOLE_TARGET = {
+  modifiers: [contentShape(shapes.circle())]
+};
+
+/**
+ * The icon beside the trigger's text, the size `Link` draws one beside body text. No colour of its own: the asset is a
+ * template image, so it takes the menu's tint with the text.
+ */
+const LABEL_ICON = [resizable(), frame({
+  height: spacing.s20,
+  width: spacing.s20
+})];
+const triggerOf = props => {
+  if (isIconOnly(props)) {
+    // An icon alone is drawn as an `IconButton`: `content.primary`, its label carried by the icon.
+    return /*#__PURE__*/_jsx(ZStack, {
+      h: TARGET,
+      ios: WHOLE_TARGET,
+      w: TARGET,
+      children: /*#__PURE__*/_jsx(Icon, {
+        accessibilityLabel: props.accessibilityLabel,
+        color: "content.primary",
+        name: props.icon
+      })
+    });
+  }
+  return props.icon ? /*#__PURE__*/_jsx(Label, {
+    icon: /*#__PURE__*/_jsx(Image, {
+      assetName: iconResourceName(props.icon),
+      modifiers: LABEL_ICON
+    }),
+    title: props.label
+  }) : props.label;
+};
+export const Menu = props => {
   useHostGuard('Menu');
+  const {
+    accessibilityLabel,
+    actions,
+    label,
+    testID
+  } = props;
+  // An icon alone carries its own label; with text, `accessibilityLabel` replaces it on the menu.
+  const modifiers = useAccessibilityModifiers({
+    accessibilityLabel: label === undefined ? undefined : accessibilityLabel
+  });
   return /*#__PURE__*/_jsx(SwiftUIMenu, {
-    label: label,
+    label: triggerOf(props),
+    modifiers: modifiers,
+    testID: testID,
     children: actions.map(action => /*#__PURE__*/_jsx(Button, {
-      label: action.label,
+      label: action.icon ? undefined : action.label,
+      modifiers: action.disabled ? DISABLED : undefined,
       onPress: action.onPress,
-      role: action.destructive ? 'destructive' : 'default'
+      role: action.destructive ? 'destructive' : 'default',
+      children: action.icon ? /*#__PURE__*/_jsx(Label, {
+        icon: /*#__PURE__*/_jsx(Image, {
+          assetName: iconResourceName(action.icon)
+        }),
+        title: action.label
+      }) : undefined
     }, action.label))
   });
 };

package/lib/module/organisms/menu/menu.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Button","Menu","SwiftUIMenu","useHostGuard","jsx","_jsx","actions","label","children","map","action","onPress","role","destructive"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAE7D,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMJ,IAAmB,GAAGA,CAAC;EAACK,OAAO;EAAEC;AAAgB,CAAC,KAAK;EAClEJ,YAAY,CAAC,MAAM,CAAC;EAEpB,oBACEE,IAAA,CAACH,WAAW;IAACK,KAAK,EAAEA,KAAM;IAAAC,QAAA,EACvBF,OAAO,CAACG,GAAG,CAACC,MAAM,iBACjBL,IAAA,CAACL,MAAM;MAELO,KAAK,EAAEG,MAAM,CAACH,KAAM;MACpBI,OAAO,EAAED,MAAM,CAACC,OAAQ;MACxBC,IAAI,EAAEF,MAAM,CAACG,WAAW,GAAG,aAAa,GAAG;IAAU,GAHhDH,MAAM,CAACH,KAIb,CACF;EAAC,CACS,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","Image","Label","Menu","SwiftUIMenu","contentShape","disabled","frame","resizable","shapes","iconResourceName","useAccessibilityModifiers","spacing","Icon","ZStack","useHostGuard","isIconOnly","jsx","_jsx","DISABLED","TARGET","WHOLE_TARGET","modifiers","circle","LABEL_ICON","height","s20","width","triggerOf","props","h","ios","w","children","accessibilityLabel","color","name","icon","assetName","title","label","actions","testID","undefined","map","action","onPress","role","destructive"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/sheet/sheet.js

@@ -34,6 +34,7 @@ const SheetRoot = ({
   onPresent,
   ref,
   scrollable = false,
+  systemBackground = false,
   testID,
   visible
 }) => {
@@ -99,7 +100,7 @@ const SheetRoot = ({
     pointerEvents: "box-none",
     style: styles.host,
     children: /*#__PURE__*/_jsx(TrueSheet, {
-      backgroundColor: theme.color(bg),
+      backgroundColor: systemBackground && Platform.OS === 'ios' ? undefined : theme.color(bg),
       cornerRadius: CORNER_RADIUS,
       detents: detents,
       dimmed: dimmed,

package/lib/module/organisms/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["useAppTheme","TrueSheet","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","Platform","StyleSheet","View","SheetHeader","SheetScrollContext","SheetScrollView","splitSheetChildren","useSheetHeader","jsxs","_jsxs","jsx","_jsx","FIT_CONTENT","CORNER_RADIUS","OS","undefined","styles","create","host","position","SheetRoot","bg","children","detents","dimmed","dismissible","draggable","footer","grabber","onDetentChange","onDismiss","onPresent","ref","scrollable","testID","visible","theme","content","header","headerProps","sheetHeader","sheetRef","presented","programmaticDismiss","dismiss","current","Promise","resolve","present","detentIndex","resize","sheet","handleDidDismiss","handleDetentChange","event","nativeEvent","index","collapsable","pointerEvents","style","backgroundColor","color","cornerRadius","headerStyle","onDidDismiss","onDidPresent","scrollableOptions","Provider","value","scrollContext","staticLargeTitle","Sheet","Object","assign","Header","ScrollView"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useAppTheme","TrueSheet","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","Platform","StyleSheet","View","SheetHeader","SheetScrollContext","SheetScrollView","splitSheetChildren","useSheetHeader","jsxs","_jsxs","jsx","_jsx","FIT_CONTENT","CORNER_RADIUS","OS","undefined","styles","create","host","position","SheetRoot","bg","children","detents","dimmed","dismissible","draggable","footer","grabber","onDetentChange","onDismiss","onPresent","ref","scrollable","systemBackground","testID","visible","theme","content","header","headerProps","sheetHeader","sheetRef","presented","programmaticDismiss","dismiss","current","Promise","resolve","present","detentIndex","resize","sheet","handleDidDismiss","handleDetentChange","event","nativeEvent","index","collapsable","pointerEvents","style","backgroundColor","color","cornerRadius","headerStyle","onDidDismiss","onDidPresent","scrollableOptions","Provider","value","scrollContext","staticLargeTitle","Sheet","Object","assign","Header","ScrollView"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -4,6 +4,8 @@ export type BadgeTone = 'accent' | 'destructive' | 'neutral' | 'success';
 export type BadgeProps = {
     /** The text inside. */
     label: string;
+    /** Test identifier, forwarded to the native view. */
+    testID?: string;
     /** The fill and text colours. `neutral` by default. */
     tone?: BadgeTone;
 };

package/lib/typescript/atoms/button/button-tokens.d.ts

@@ -12,14 +12,18 @@ export declare const buttonTokens: (variant: ButtonVariant, disabled: boolean, t
     readonly content: 'content.primary';
     readonly fill: 'btn.bg.glass.base';
     readonly shadow: 'btn.glass';
+} | {
+    readonly content: 'content.accent';
+    readonly fill: undefined;
+    readonly shadow: undefined;
 } | {
     readonly content: 'content.primary';
     readonly fill: 'btn.bg.secondary.base';
     readonly shadow: 'btn.secondary';
 } | {
     readonly content: 'btn.content.disabled';
-    readonly fill: "btn.bg.glass.disabled" | "btn.bg.secondary.disabled" | "fill.accent.disabled" | "fill.destructive.disabled";
-    readonly shadow: "btn.accent" | "btn.destructive" | "btn.glass" | "btn.secondary";
+    readonly fill: "btn.bg.glass.disabled" | "btn.bg.secondary.disabled" | "fill.accent.disabled" | "fill.destructive.disabled" | undefined;
+    readonly shadow: "btn.accent" | "btn.destructive" | "btn.glass" | "btn.secondary" | undefined;
 };
 /**
  * The label for a button filled with an arbitrary `tint`: the on-accent white over a strong colour, the primary

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

@@ -1,6 +1,7 @@
 import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'secondary';
+import type { IconName } from '../icon';
+export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'plain' | 'secondary';
 /**
  * SwiftUI `ButtonStyle`. iOS only: Compose has no equivalent, so Android ignores it and keeps
  * rendering the variant's tokens.
@@ -11,19 +12,28 @@ export type ButtonStyleName = 'automatic' | 'bordered' | 'borderedProminent' | '
  * whatever the surrounding SwiftUI environment provides.
  */
 export type ButtonControlSize = 'extraLarge' | 'large' | 'mini' | 'regular' | 'small';
-/** A text button: SwiftUI `Button` on iOS, Material's filled button (outlined for `glass`) on Android. */
+/**
+ * A text button: SwiftUI `Button` on iOS, Material's filled button on Android (outlined for `glass`, a `TextButton`
+ * for `plain`).
+ */
 export type ButtonProps = {
     /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
     accessibilityHint?: string;
     /**
      * Replaces the style the variant picks: `borderedProminent` for `accent` and `destructive`, `bordered` for
-     * `secondary`, `glass` for `glass`. iOS only. Android ignores it.
+     * `secondary`, `glass` for `glass`, `borderless` for `plain`. iOS only. Android ignores it.
      */
     buttonStyle?: ButtonStyleName;
     /** SwiftUI's control size. `large` by default. iOS only. Android ignores it. */
     controlSize?: ButtonControlSize;
     /** Draws the button in its disabled colours and stops it responding to presses. */
     disabled?: boolean;
+    /**
+     * One of the app's icons, before the label and in the label's colour. iOS sets the two as a SwiftUI `Label`; Android
+     * puts the icon in the button's content row, as Material's buttons with an icon do. Screen readers read the label
+     * only.
+     */
+    icon?: IconName;
     /** The button's text. */
     label: string;
     /** Called when the button is pressed. */
@@ -33,10 +43,14 @@ export type ButtonProps = {
     /**
      * Overrides the variant's own tint. A prominent style takes it as the fill and picks a contrasting
      * label. `glass` has to reach the material through `glassEffect` instead, so tinting one costs it
-     * the stock `.glass` style (see the iOS implementation).
+     * the stock `.glass` style (see the iOS implementation). `plain` has no fill, so there it colours the label.
      */
     tint?: ColorToken;
-    /** The look. `accent` by default. Material has no glass, so on Android `glass` is an outlined button. */
+    /**
+     * The look. `accent` by default. Material has no glass, so on Android `glass` is an outlined button. `plain` is a
+     * text button in the accent, with no fill or border, for a lesser action beside a prominent one ("Skip", "Forgot
+     * password?"): SwiftUI's `borderless` style, Material's `TextButton`.
+     */
     variant?: ButtonVariant;
     /** Stretches the button to the full width it is offered. On by default. */
     wide?: boolean;

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

@@ -7,6 +7,8 @@ export type CheckboxProps = {
     label?: string;
     /** Called with the new value when the user toggles it. */
     onValueChange?: (value: boolean) => void;
+    /** Test identifier, forwarded to the native control (on Android the box itself, not the labelled row). */
+    testID?: string;
     /** Whether it is checked. Controlled: update it from `onValueChange`. */
     value: boolean;
 };

package/lib/typescript/atoms/color-picker/color-picker.types.d.ts

@@ -5,6 +5,8 @@ import type { ReactNode } from 'react';
  * spectrum and RGB sliders.
  */
 export type ColorPickerProps = {
+    /** Stops the user picking a colour, and dims the label and the well. */
+    disabled?: boolean;
     /** Text beside the colour well, and the Android sheet's title. */
     label?: string;
     /** Called with the colour the user picks. */

package/lib/typescript/atoms/date-picker/date-picker.ios.d.ts

@@ -1,9 +1,9 @@
 import type { DatePickerComponent } from './date-picker.types';
 /**
- * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
- * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
- * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
- * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
- * `useInsideHost`).
+ * The system's date picker, in the accent. `compact` by default: the value in a pill, and a tap on it opens the
+ * calendar popover UIKit owns. `graphical` is that calendar in place, `wheel` the value on wheels. Its own host, sized
+ * to the picker on both axes (a host that took the width it was given would lay the pill out against the far edge of
+ * it, or past its container's), so it drops into a row the way a `Text` does. The label is the caller's, beside it.
+ * Inside a `Screen` or `Island` it renders into that host instead (see `useInsideHost`).
  */
 export declare const DatePicker: DatePickerComponent;

package/lib/typescript/atoms/date-picker/date-picker.types.d.ts

@@ -1,23 +1,46 @@
 import type { ReactNode } from 'react';
 export type DatePickerMode = 'date' | 'datetime' | 'time';
+/** How SwiftUI shows the picker: a pill that opens the calendar, the calendar in place, or wheels. */
+export type DatePickerStyleName = 'compact' | 'graphical' | 'wheel';
 /**
- * A date or time picker: SwiftUI's compact `DatePicker` on iOS, a field that opens Material's picker dialog on a tap
- * on Android. The React Native tier: it brings its own host and sizes itself to the value, so it sits in a row beside
- * its label like a `Text`. Inside a `Screen` or `Island` it joins that host instead, beside a native `Text` label.
+ * A date or time picker: SwiftUI's `DatePicker` on iOS (a pill by default, a calendar or wheels with
+ * `datePickerStyle`), a field that opens Material's picker dialog on a tap on Android, or Material's calendar in place
+ * with `datePickerStyle="graphical"`. The React Native tier: it brings its own host and sizes itself to the value, so it
+ * sits in a row beside its label like a `Text`. Inside a `Screen` or `Island` it joins that host instead, beside a
+ * native `Text` label.
  */
 export type DatePickerProps = {
+    /**
+     * SwiftUI's date picker style. `compact` by default: the value in a pill, which opens the calendar in a popover.
+     * `graphical` is the calendar in place, a month at a time, with the time under it in `datetime` mode: what a screen
+     * built around picking a day wants. `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); otherwise it keeps its field and
+     * dialog, since Material has no wheel.
+     */
+    datePickerStyle?: DatePickerStyleName;
+    /**
+     * Stops the user changing the date, and dims the picker. Material's calendar has no disabled state of its own, so a
+     * `graphical` picker on Android is dimmed and offers only the selected day.
+     */
+    disabled?: boolean;
     /** The latest date that can be picked. Android ignores it in `time` mode. */
     max?: Date;
     /** The earliest date that can be picked. Android ignores it in `time` mode. */
     min?: Date;
     /**
-     * What it picks. `date` by default. Android has no combined dialog, so there `datetime` picks the date and keeps
-     * `value`'s time of day.
+     * What it picks. `date` by default. Android has no combined dialog or calendar, so there `datetime` picks the date
+     * and keeps `value`'s time of day.
      */
     mode?: DatePickerMode;
-    /** Called with the new date: on iOS as it changes, on Android when the dialog is confirmed. */
+    /**
+     * Called with the new date: on iOS as it changes, on Android when the dialog is confirmed or a day in the calendar
+     * is tapped.
+     */
     onValueChange?: (date: Date) => void;
-    /** Test identifier, on the native picker on iOS and on the tappable field on Android. */
+    /**
+     * Test identifier, on the native picker on iOS and on Android's calendar, and on the tappable field elsewhere on
+     * Android.
+     */
     testID?: string;
     /** The selected date. Controlled: update it from `onValueChange`. */
     value: Date;

package/lib/typescript/atoms/divider/divider.ios.d.ts

@@ -1,2 +1,6 @@
 import type { DividerComponent } from './divider.types';
+/**
+ * SwiftUI's divider, which turns with its stack: vertical in an `HStack`, horizontal anywhere else. So `axis`, which
+ * Android needs to pick its divider, has nothing to do here.
+ */
 export declare const Divider: DividerComponent;

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

@@ -1,10 +1,21 @@
 import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-/** A horizontal hairline: SwiftUI `Divider` / Compose `HorizontalDivider`. */
+/** Which way the line runs. */
+export type DividerAxis = 'horizontal' | 'vertical';
+/**
+ * A hairline between views: SwiftUI `Divider` / Compose `HorizontalDivider`, or `VerticalDivider` with
+ * `axis="vertical"`.
+ */
 export type DividerProps = {
+    /**
+     * Which way the line runs. `horizontal` by default: across a `VStack`. `vertical` stands it up between the children
+     * of an `HStack`, as tall as the stack, so give the stack a height (`h`). iOS ignores it: SwiftUI's divider turns by
+     * itself, vertical in an `HStack` and horizontal anywhere else. Set it anyway, so Android draws the same.
+     */
+    axis?: DividerAxis;
     /** The line's colour. `border.tertiary` by default. */
     color?: ColorToken;
-    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
+    /** Test identifier, forwarded to the native view. */
     testID?: string;
 };
 export type DividerComponent = (props: DividerProps) => ReactNode;

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

@@ -1,22 +1,39 @@
 import type { ReactNode } from 'react';
 import type { IconName } from '../icon';
+/** Material's three floating action buttons: 40, 56 and 96 across. */
+export type FabSize = 'large' | 'regular' | 'small';
 /**
- * A floating action button: Material's `FloatingActionButton` on Android, a 56pt accent circle (a plain SwiftUI
- * `Button`) on iOS. It renders inline; pinning it to a corner is up to the screen.
+ * A floating action button: Material's `FloatingActionButton` on Android, an accent circle (a plain SwiftUI `Button`)
+ * on iOS. With a `label` it is the extended one, the icon and the text side by side: Material's
+ * `ExtendedFloatingActionButton`, an accent capsule on iOS. It renders inline; pinning it to a corner is up to the
+ * screen.
  */
 export type FabProps = {
     /**
      * What VoiceOver and TalkBack say for the button, since an icon has no words of its own: "Share", "Add to
-     * favourites". Required for that reason.
+     * favourites". Required for that reason. With a `label` it is still what they say, in place of the label, so give
+     * it the label's words (or words that start with them), and Voice Control finds the button by what it shows.
      */
     accessibilityLabel: string;
     /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
     accessibilityHint?: string;
+    /**
+     * Text beside the icon, which makes it an extended FAB: "Compose", "New post". For a screen whose main action needs
+     * its words. Material's `ExtendedFloatingActionButton` on Android; on iOS the same accent, 56pt tall, as a capsule.
+     */
+    label?: string;
     /** The icon, one of the app's, drawn in `content.on.accent`. */
     name: IconName;
     /** Called when the button is pressed. */
     onPress?: () => void;
-    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
+    /**
+     * `regular` by default, 56 across. `small` is 40, for a secondary action beside a regular one; `large` is 96, with a
+     * 36 icon, for a screen built around one action. Material's `SmallFloatingActionButton` and
+     * `LargeFloatingActionButton` on Android, the same sizes of circle on iOS. A FAB with a `label` has one size and
+     * ignores it.
+     */
+    size?: FabSize;
+    /** Test identifier, forwarded to the native view. */
     testID?: string;
 };
 export type FabComponent = (props: FabProps) => ReactNode;

package/lib/typescript/atoms/icon-button/icon-button.types.d.ts

@@ -1,9 +1,15 @@
+import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { IconName } from '../icon';
 /**
- * A button that is just an icon: a plain SwiftUI `Button` on iOS, Material's `IconButton` on Android. The icon sits
- * centred in a tap target the size each platform asks for, 44pt on iOS and 48dp on Android, so a row of them spaces
- * itself the same way on both.
+ * How much the button stands out: just the icon (`plain`), on a fill in the accent (`filled`), on a muted fill
+ * (`tonal`), in a ring (`outlined`) or on Liquid Glass (`glass`).
+ */
+export type IconButtonVariant = 'filled' | 'glass' | 'outlined' | 'plain' | 'tonal';
+/**
+ * A button that is just an icon: a SwiftUI `Button` on iOS, one of Material's icon buttons on Android. A `plain` one
+ * sits centred in a tap target the size each platform asks for, 44pt on iOS and 48dp on Android, so a row of them
+ * spaces itself the same way on both; the other variants draw a circle around the icon.
  */
 export type IconButtonProps = {
     /**
@@ -13,13 +19,26 @@ export type IconButtonProps = {
     accessibilityLabel: string;
     /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
     accessibilityHint?: string;
+    /**
+     * The icon's colour, `content.primary` by default. On `filled` it is the fill instead (`fill.accent.primary` by
+     * default) and the icon picks a colour that reads on it, as a `Button`'s `tint` does on a prominent style. On iOS a
+     * `tonal` button's circle takes a pale shade of it too.
+     */
+    color?: ColorToken;
     /** Dims the icon (iOS's own disabled look, `btn.content.disabled` on Android) and stops the button responding. */
     disabled?: boolean;
     /** The icon, one of the app's. */
     name: IconName;
     /** Called when the button is pressed. */
     onPress?: () => void;
-    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
+    /** Test identifier, forwarded to the native view. */
     testID?: string;
+    /**
+     * The look. `plain` by default. iOS draws the others as SwiftUI button styles in a circle: `borderedProminent` for
+     * `filled`, `bordered` for `tonal`, `glass` for `glass` (`bordered` below iOS 26), and `outlined` as a plain button
+     * in a hairline ring. Android draws Material's `IconButton`, `FilledIconButton`, `FilledTonalIconButton` and
+     * `OutlinedIconButton`; Material has no glass, so there `glass` is the tonal one.
+     */
+    variant?: IconButtonVariant;
 };
 export type IconButtonComponent = (props: IconButtonProps) => ReactNode;

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

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+/** How the rows are laid out: in a rounded card inset from the edges, or edge to edge. */
+export type ListVariant = 'insetGrouped' | 'plain';
 /**
  * A scrolling list: SwiftUI `List`, Compose `LazyColumn`. It has no height of its own, so it needs one from outside:
  * a `Screen`, or an `Island` with `matchContents={false}` and a height. In an island that sizes itself to its content
@@ -16,7 +18,19 @@ export type ListProps = {
      * until the promise settles, so neither platform needs a `refreshing` flag kept in sync by hand.
      */
     onRefresh?: () => Promise<void>;
-    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
+    /**
+     * Draws a line between rows. On by default. Off, iOS hides SwiftUI's row separators and Android draws no `Divider`,
+     * for rows that carry their own spacing (cards, media).
+     */
+    separators?: boolean;
+    /** Test identifier, forwarded to the native view. */
     testID?: string;
+    /**
+     * The layout. Each platform's own list by default: `insetGrouped` on iOS, `plain` on Android. `insetGrouped` sets
+     * the rows in a rounded card inset from the edges (SwiftUI's `insetGrouped` list style; on Android a `Card` inside the
+     * column, the way `Form` draws its sections). `plain` runs the rows edge to edge (SwiftUI's `plain` style; Android's
+     * column as it is).
+     */
+    variant?: ListVariant;
 };
 export type ListComponent = (props: ListProps) => ReactNode;

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

@@ -1,13 +1,24 @@
+import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 /**
- * A progress bar or ring, tinted `fill.accent.primary`: SwiftUI `ProgressView` (a capacity `Gauge` for a ring with a
- * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
+ * A progress bar or ring, tinted `fill.accent.primary` unless `color` names another: SwiftUI `ProgressView` (a capacity
+ * `Gauge` for a ring with a value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and
+ * `CircularProgressIndicator`.
  */
 export type ProgressProps = {
     /** What is in progress, for VoiceOver and TalkBack: "Uploading". They read how far along it is themselves. */
     accessibilityLabel?: string;
     /** A circular indicator instead of a bar. Off by default. */
     circular?: boolean;
+    /**
+     * Its colour: `fill.destructive.primary` for storage nearly full, `fill.success.primary` for a goal reached.
+     * `fill.accent.primary` by default. iOS tints the bar or ring with it. Android draws the indicator in it and, for any
+     * colour but the accent, the track in the same colour faded (Material's own track stays under the accent, and an
+     * indeterminate ring has none).
+     */
+    color?: ColorToken;
+    /** Test identifier, forwarded to the native view. */
+    testID?: string;
     /** Between `0` and `1`. Leave it unset for an indeterminate indicator. */
     value?: number;
 };

package/lib/typescript/atoms/segmented-control/segmented-control.ios.d.ts

@@ -3,6 +3,8 @@ import type { SegmentedControlComponent } from './segmented-control.types';
  * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
  * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
  * the width it is given and UIKit's height. Inside a `Screen` or `Island` it is carried into that host by `RNHostView`
- * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback.
+ * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback. A segment shows a
+ * title or an image, never both, so an icon segment is drawn natively as one image of the icon and the label, in the
+ * label's colour; an image segment is the image alone, loaded and drawn by kara-native at `iconSize`.
  */
 export declare const SegmentedControl: SegmentedControlComponent;

package/lib/typescript/atoms/segmented-control/segmented-control.types.d.ts

@@ -1,13 +1,31 @@
+import type { SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type { IconName } from '../icon';
+/** A segment that shows more than its label. */
+export type SegmentedControlSegment = {
+    /** One of the app's icons, before the label and in the label's colour, the selected segment's or the others'. */
+    icon?: IconName;
+    /**
+     * An image in its own colours instead of the label, such as a carrier's logo: a `require()`d file, or `{uri}` for a
+     * URL (raster or SVG). The label stays what screen readers say, and is shown instead if the image cannot be loaded.
+     */
+    image?: ImageSourcePropType;
+    /** What the segment says, and what `onChange` reports. */
+    label: string;
+};
 /**
  * A row of mutually exclusive segments, the selected one in the accent: kara's own `UISegmentedControl` on iOS,
  * Material's single-choice segmented buttons on Android. It needs no `Screen` or `Island`: iOS is a plain view, Android
  * brings its own host. Inside one it joins that host, so it can share a stack with other native views. It takes the
- * width it is given; the height is the platform's.
+ * width it is given; the height is the platform's, or taller with `spacing`. A segment can lead with one of the app's
+ * icons or be an image, a logo, both loaded natively (SDWebImage on iOS, androidsvg on Android, as Footshop does).
  */
 export type SegmentedControlProps = {
     /** Stops the user changing the segment, and dims the control. */
     disabled?: boolean;
+    /** The height of the segments' icons and images, a spacing token. `s20` by default. */
+    iconSize?: SpaceSize;
     /**
      * Called with the index and label of the segment the user picked, never for a tap on the one already selected.
      * Android plays `selection`; iOS's control plays its own feedback.
@@ -15,9 +33,14 @@ export type SegmentedControlProps = {
     onChange?: (index: number, value: string) => void;
     /** The selected segment. Controlled: pass back what `onChange` reports. */
     selectedIndex: number;
+    /**
+     * Space above and below the segments' content, a spacing token: a taller control, for bigger icons or an easier
+     * target. Unset keeps the platform's own height, and the control is never shorter than that.
+     */
+    spacing?: SpaceSize;
     /** Test identifier, on the whole control. Reach a segment by its label. */
     testID?: string;
-    /** The segments' labels, in order. */
-    values: string[];
+    /** The segments, in order: a label, or a segment with an icon or an image. */
+    values: (string | SegmentedControlSegment)[];
 };
 export type SegmentedControlComponent = (props: SegmentedControlProps) => ReactNode;

package/lib/typescript/atoms/segmented-control/segments.d.ts

@@ -0,0 +1,6 @@
+import { type ImageSourcePropType } from 'react-native';
+import type { SegmentedControlSegment } from './segmented-control.types';
+/** A plain label is a segment with nothing else. */
+export declare const segmentOf: (value: string | SegmentedControlSegment) => SegmentedControlSegment;
+/** What the native loaders take: a `require()`d file's packager or file URL, or the URI itself. */
+export declare const imageUri: (source: ImageSourcePropType | undefined) => string | undefined;

package/lib/typescript/atoms/slider/slider.ios.d.ts

@@ -1,2 +1,6 @@
 import type { SliderComponent } from './slider.types';
+/**
+ * SwiftUI's slider. `onValueChangeEnd` is its `onEditingChanged(false)`, with the last value the drag reported: the
+ * controlled `value` can still be a render behind when the finger lifts.
+ */
 export declare const Slider: SliderComponent;