@hzblj/kara-components 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hzblj/kara-components
 
+## 0.19.0
+
+### Minor Changes
+
+- [#58](https://github.com/hzblj/kara-ui/pull/58) [`024f36b`](https://github.com/hzblj/kara-ui/commit/024f36b58b3ceca20f04889b876eb7905ed7b540) Thanks [@hzblj](https://github.com/hzblj)! - `SegmentedControl` segments can show more than a label: `{label, icon}` leads with one of the app's icons in the label's colour, and `{label, image}` shows an image in its own colours instead, such as a carrier's logo from a URL, raster or SVG. `iconSize` sets their height (`s20` by default) and `spacing` the space above and below the content, for a taller control. The images load natively, as Footshop's platform-ui loads them: kara-native now depends on SDWebImage and SDWebImageSVGCoder on iOS and on androidsvg on Android, and its new `NativeImage` draws such an image in a Compose host. The label stays what screen readers say, and is shown if the image cannot be loaded.
+
+### Patch Changes
+
+- Updated dependencies [[`024f36b`](https://github.com/hzblj/kara-ui/commit/024f36b58b3ceca20f04889b876eb7905ed7b540)]:
+  - @hzblj/kara-native@0.19.0
+  - @hzblj/kara-sx@0.19.0
+  - @hzblj/kara-theme@0.19.0
+
 ## 0.18.0
 
 ### Minor Changes

package/lib/module/atoms/segmented-control/segmented-control.android.js

@@ -1,19 +1,59 @@
 "use strict";
 
 import { Host, SegmentedButton, SingleChoiceSegmentedButtonRow, Text } from '@expo/ui/jetpack-compose';
-import { fillMaxWidth, testID as testIdModifier, weight } from '@expo/ui/jetpack-compose/modifiers';
+import { fillMaxWidth, height, testID as testIdModifier, weight } from '@expo/ui/jetpack-compose/modifiers';
+import { iconResourceName } from '@hzblj/expo-native-icons';
 import { haptics } from '@hzblj/expo-rich-haptics';
-import { useAppTheme } from '@hzblj/kara-theme';
+import { DrawableIcon, NativeImage } from '@hzblj/kara-native/jetpack-compose';
+import { spacing as spacingTokens, useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
 import { useInsideHost } from "../../host-context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { HStack } from "../h-stack/index.js";
+import { imageUri, segmentOf } from "./segments.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MATCH_HEIGHT_ONLY = {
   horizontal: false,
   vertical: true
 };
 
-/** Every segment the same width, like UIKit's: Material's would size each to its label. */
-const SEGMENT = [weight(1)];
+/** Material's own segment height, which `spacing` only ever adds to. */
+const MATERIAL_HEIGHT = 40;
+/**
+ * What a segment shows: its label, one of the app's icons before it, or an image loaded by kara-native. The icon and a
+ * label the image falls back to take the segment's content colour, so they follow the selection and `disabled`.
+ */
+const SegmentLabel = ({
+  iconSize,
+  segment
+}) => {
+  const theme = useAppTheme();
+  const face = theme.typography.subheadlineMedium;
+  if (segment.image !== undefined) {
+    return /*#__PURE__*/_jsx(NativeImage, {
+      fontFamily: face.fontFamily,
+      fontSize: face.fontSize,
+      fontWeight: String(face.fontWeight),
+      imageHeight: iconSize,
+      label: segment.label,
+      source: imageUri(segment.image)
+    });
+  }
+  const label = /*#__PURE__*/_jsx(Text, {
+    style: face,
+    children: segment.label
+  });
+  if (segment.icon === undefined) {
+    return label;
+  }
+  return /*#__PURE__*/_jsxs(HStack, {
+    align: "center",
+    spacing: "s6",
+    children: [/*#__PURE__*/_jsx(DrawableIcon, {
+      iconSize: iconSize,
+      resourceName: iconResourceName(segment.icon)
+    }), label]
+  });
+};
 
 /**
  * Material's single-choice segmented buttons, the selected one filled with the accent like a checked `Switch`. Its own
@@ -23,13 +63,27 @@ const SEGMENT = [weight(1)];
  */
 export const SegmentedControl = ({
   disabled = false,
+  iconSize = 's20',
   onChange,
   selectedIndex,
+  spacing,
   testID,
   values
 }) => {
   const theme = useAppTheme();
   const insideHost = useInsideHost();
+  const segments = useMemo(() => values.map(segmentOf), [values]);
+  const iconPoints = spacingTokens[iconSize];
+
+  // Every segment the same width, like UIKit's: Material's would size each to its label. With `spacing`, as tall as
+  // the content and that space, and never shorter than Material's own segment.
+  const segmentModifiers = useMemo(() => {
+    if (spacing === undefined) {
+      return [weight(1)];
+    }
+    const content = Math.max(theme.typography.subheadlineMedium.lineHeight, iconPoints);
+    return [weight(1), height(Math.max(MATERIAL_HEIGHT, content + 2 * spacingTokens[spacing]))];
+  }, [iconPoints, spacing, theme]);
 
   // Every segment keeps the same outline, the selected one too: an accent border would run its fill out over the line
   // the others draw inside, and make it look taller than its neighbours.
@@ -53,20 +107,20 @@ export const SegmentedControl = ({
       return;
     }
     haptics.selection();
-    onChange?.(index, values[index] ?? '');
-  }, [onChange, selectedIndex, values]);
+    onChange?.(index, segments[index]?.label ?? '');
+  }, [onChange, segments, selectedIndex]);
   const row = /*#__PURE__*/_jsx(SingleChoiceSegmentedButtonRow, {
     modifiers: rowModifiers,
-    children: values.map((label, index) => /*#__PURE__*/_jsx(SegmentedButton, {
+    children: segments.map((segment, index) => /*#__PURE__*/_jsx(SegmentedButton, {
       colors: colors,
       enabled: !disabled,
-      modifiers: SEGMENT,
+      modifiers: segmentModifiers,
       onClick: () => select(index),
       selected: index === selectedIndex,
       children: /*#__PURE__*/_jsx(SegmentedButton.Label, {
-        children: /*#__PURE__*/_jsx(Text, {
-          style: theme.typography.subheadlineMedium,
-          children: label
+        children: /*#__PURE__*/_jsx(SegmentLabel, {
+          iconSize: iconPoints,
+          segment: segment
         })
       })
     }, index))

package/lib/module/atoms/segmented-control/segmented-control.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","SegmentedButton","SingleChoiceSegmentedButtonRow","Text","fillMaxWidth","testID","testIdModifier","weight","haptics","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","SEGMENT","SegmentedControl","disabled","onChange","selectedIndex","values","theme","insideHost","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContentColor","rowModifiers","select","index","selection","row","modifiers","children","map","label","enabled","onClick","selected","Label","style","typography","subheadlineMedium","colorScheme","dark","matchContents","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Host","SegmentedButton","SingleChoiceSegmentedButtonRow","Text","fillMaxWidth","height","testID","testIdModifier","weight","iconResourceName","haptics","DrawableIcon","NativeImage","spacing","spacingTokens","useAppTheme","useCallback","useMemo","useInsideHost","HStack","imageUri","segmentOf","jsx","_jsx","jsxs","_jsxs","MATCH_HEIGHT_ONLY","horizontal","vertical","MATERIAL_HEIGHT","SegmentLabel","iconSize","segment","theme","face","typography","subheadlineMedium","image","undefined","fontFamily","fontSize","fontWeight","String","imageHeight","label","source","style","children","icon","align","resourceName","SegmentedControl","disabled","onChange","selectedIndex","values","insideHost","segments","map","iconPoints","segmentModifiers","content","Math","max","lineHeight","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContentColor","rowModifiers","select","index","selection","row","modifiers","enabled","onClick","selected","Label","colorScheme","dark","matchContents","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/segmented-control/segmented-control.ios.js

@@ -1,10 +1,12 @@
 "use strict";
 
 import { RNHostView } from '@expo/ui/swift-ui';
+import { iconResourceName } from '@hzblj/expo-native-icons';
 import { SegmentedControl as NativeSegmentedControl } from '@hzblj/kara-native/swift-ui';
-import { useAppTheme } from '@hzblj/kara-theme';
+import { spacing as spacingTokens, useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
 import { useInsideHost } from "../../host-context.js";
+import { imageUri, segmentOf } from "./segments.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MATCH_HEIGHT_ONLY = {
   horizontal: false,
@@ -15,39 +17,48 @@ const MATCH_HEIGHT_ONLY = {
  * 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 const SegmentedControl = ({
   disabled = false,
+  iconSize = 's20',
   onChange,
   selectedIndex,
+  spacing,
   testID,
   values
 }) => {
   const theme = useAppTheme();
   const insideHost = useInsideHost();
   const face = theme.typography.footnoteMedium;
+  const segments = useMemo(() => values.map(segmentOf), [values]);
 
   // The native control speaks in values; a segment's is its index, so two labels may read the same.
-  const options = useMemo(() => values.map((label, index) => ({
-    label,
+  const options = useMemo(() => segments.map((segment, index) => ({
+    icon: segment.icon ? iconResourceName(segment.icon) : undefined,
+    image: imageUri(segment.image),
+    label: segment.label,
     value: String(index)
-  })), [values]);
+  })), [segments]);
   const onValueChange = useCallback(value => {
     const index = Number(value);
-    onChange?.(index, values[index] ?? '');
-  }, [onChange, values]);
+    onChange?.(index, segments[index]?.label ?? '');
+  }, [onChange, segments]);
   const control = /*#__PURE__*/_jsx(NativeSegmentedControl, {
     activePillColor: theme.color('fill.accent.primary'),
     activeTextColor: theme.color('content.on.accent'),
     disabled: disabled,
     fontFamily: face.fontFamily,
     fontSize: face.fontSize,
+    iconSize: spacingTokens[iconSize],
     inactiveTextColor: theme.color('content.primary'),
     onValueChange: onValueChange,
     options: options,
     selectedValue: String(selectedIndex),
-    testID: testID
+    testID: testID,
+    verticalPadding: spacing === undefined ? undefined : spacingTokens[spacing]
   });
   return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
     matchContents: MATCH_HEIGHT_ONLY,

package/lib/module/atoms/segmented-control/segmented-control.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["RNHostView","SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","disabled","onChange","selectedIndex","testID","values","theme","insideHost","face","typography","footnoteMedium","options","map","label","index","value","String","onValueChange","Number","control","activePillColor","color","activeTextColor","fontFamily","fontSize","inactiveTextColor","selectedValue","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.ios.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,mBAAmB;AAC5C,SAAQC,gBAAgB,IAAIC,sBAAsB,QAAO,6BAA6B;AACtF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMV,gBAA2C,GAAGA,CAAC;EAC1DW,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,UAAU,GAAGZ,aAAa,CAAC,CAAC;EAClC,MAAMa,IAAI,GAAGF,KAAK,CAACG,UAAU,CAACC,cAAc;;EAE5C;EACA,MAAMC,OAAO,GAAGjB,OAAO,CAAC,MAAMW,MAAM,CAACO,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,MAAM;IAACD,KAAK;IAAEE,KAAK,EAAEC,MAAM,CAACF,KAAK;EAAC,CAAC,CAAC,CAAC,EAAE,CAACT,MAAM,CAAC,CAAC;EAEtG,MAAMY,aAAa,GAAGxB,WAAW,CAC9BsB,KAAa,IAAK;IACjB,MAAMD,KAAK,GAAGI,MAAM,CAACH,KAAK,CAAC;IAC3Bb,QAAQ,GAAGY,KAAK,EAAET,MAAM,CAACS,KAAK,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC,EACD,CAACZ,QAAQ,EAAEG,MAAM,CACnB,CAAC;EAED,MAAMc,OAAO,gBACXtB,IAAA,CAACN,sBAAsB;IACrB6B,eAAe,EAAEd,KAAK,CAACe,KAAK,CAAC,qBAAqB,CAAE;IACpDC,eAAe,EAAEhB,KAAK,CAACe,KAAK,CAAC,mBAAmB,CAAE;IAClDpB,QAAQ,EAAEA,QAAS;IACnBsB,UAAU,EAAEf,IAAI,CAACe,UAAW;IAC5BC,QAAQ,EAAEhB,IAAI,CAACgB,QAAS;IACxBC,iBAAiB,EAAEnB,KAAK,CAACe,KAAK,CAAC,iBAAiB,CAAE;IAClDJ,aAAa,EAAEA,aAAc;IAC7BN,OAAO,EAAEA,OAAQ;IACjBe,aAAa,EAAEV,MAAM,CAACb,aAAa,CAAE;IACrCC,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,OAAOG,UAAU,gBAAGV,IAAA,CAACR,UAAU;IAACsC,aAAa,EAAE7B,iBAAkB;IAAA8B,QAAA,EAAET;EAAO,CAAa,CAAC,GAAGA,OAAO;AACpG,CAAC","ignoreList":[]}
+{"version":3,"names":["RNHostView","iconResourceName","SegmentedControl","NativeSegmentedControl","spacing","spacingTokens","useAppTheme","useCallback","useMemo","useInsideHost","imageUri","segmentOf","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","disabled","iconSize","onChange","selectedIndex","testID","values","theme","insideHost","face","typography","footnoteMedium","segments","map","options","segment","index","icon","undefined","image","label","value","String","onValueChange","Number","control","activePillColor","color","activeTextColor","fontFamily","fontSize","inactiveTextColor","selectedValue","verticalPadding","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/segmented-control/segments.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import { Image } from 'react-native';
+/** A plain label is a segment with nothing else. */
+export const segmentOf = value => typeof value === 'string' ? {
+  label: value
+} : value;
+
+/** What the native loaders take: a `require()`d file's packager or file URL, or the URI itself. */
+export const imageUri = source => {
+  if (source === undefined) {
+    return undefined;
+  }
+  return Image.resolveAssetSource(Array.isArray(source) ? source[0] : source)?.uri;
+};
+//# sourceMappingURL=segments.js.map

package/lib/module/atoms/segmented-control/segments.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","segmentOf","value","label","imageUri","source","undefined","resolveAssetSource","Array","isArray","uri"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segments.ts"],"mappings":";;AAAA,SAAQA,KAAK,QAAiC,cAAc;AAI5D;AACA,OAAO,MAAMC,SAAS,GAAIC,KAAuC,IAC/D,OAAOA,KAAK,KAAK,QAAQ,GAAG;EAACC,KAAK,EAAED;AAAK,CAAC,GAAGA,KAAK;;AAEpD;AACA,OAAO,MAAME,QAAQ,GAAIC,MAAuC,IAAyB;EACvF,IAAIA,MAAM,KAAKC,SAAS,EAAE;IACxB,OAAOA,SAAS;EAClB;EAEA,OAAON,KAAK,CAACO,kBAAkB,CAACC,KAAK,CAACC,OAAO,CAACJ,MAAM,CAAC,GAAGA,MAAM,CAAC,CAAC,CAAC,GAAGA,MAAM,CAAC,EAAEK,GAAG;AAClF,CAAC","ignoreList":[]}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -61,9 +61,9 @@
   "dependencies": {
     "@hzblj/expo-native-icons": "^0.1.0",
     "@hzblj/expo-rich-haptics": "^0.1.0",
-    "@hzblj/kara-native": "^0.18.0",
-    "@hzblj/kara-sx": "^0.18.0",
-    "@hzblj/kara-theme": "^0.18.0",
+    "@hzblj/kara-native": "^0.19.0",
+    "@hzblj/kara-sx": "^0.19.0",
+    "@hzblj/kara-theme": "^0.19.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/segmented-control/segmented-control.android.tsx

@@ -1,16 +1,60 @@
 import {Host, SegmentedButton, SingleChoiceSegmentedButtonRow, Text} from '@expo/ui/jetpack-compose'
-import {fillMaxWidth, testID as testIdModifier, weight} from '@expo/ui/jetpack-compose/modifiers'
+import {fillMaxWidth, height, testID as testIdModifier, weight} from '@expo/ui/jetpack-compose/modifiers'
+import {iconResourceName} from '@hzblj/expo-native-icons'
 import {haptics} from '@hzblj/expo-rich-haptics'
-import {useAppTheme} from '@hzblj/kara-theme'
+import {DrawableIcon, NativeImage} from '@hzblj/kara-native/jetpack-compose'
+import {spacing as spacingTokens, useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
 import {useInsideHost} from '../../host-context'
-import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
+import {HStack} from '../h-stack'
+import type {SegmentedControlComponent, SegmentedControlProps, SegmentedControlSegment} from './segmented-control.types'
+import {imageUri, segmentOf} from './segments'
 
 const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
 
-/** Every segment the same width, like UIKit's: Material's would size each to its label. */
-const SEGMENT = [weight(1)]
+/** Material's own segment height, which `spacing` only ever adds to. */
+const MATERIAL_HEIGHT = 40
+
+type SegmentLabelProps = {
+  iconSize: number
+  segment: SegmentedControlSegment
+}
+
+/**
+ * What a segment shows: its label, one of the app's icons before it, or an image loaded by kara-native. The icon and a
+ * label the image falls back to take the segment's content colour, so they follow the selection and `disabled`.
+ */
+const SegmentLabel = ({iconSize, segment}: SegmentLabelProps) => {
+  const theme = useAppTheme()
+  const face = theme.typography.subheadlineMedium
+
+  if (segment.image !== undefined) {
+    return (
+      <NativeImage
+        fontFamily={face.fontFamily}
+        fontSize={face.fontSize}
+        fontWeight={String(face.fontWeight)}
+        imageHeight={iconSize}
+        label={segment.label}
+        source={imageUri(segment.image)}
+      />
+    )
+  }
+
+  const label = <Text style={face}>{segment.label}</Text>
+
+  if (segment.icon === undefined) {
+    return label
+  }
+
+  return (
+    <HStack align="center" spacing="s6">
+      <DrawableIcon iconSize={iconSize} resourceName={iconResourceName(segment.icon)} />
+      {label}
+    </HStack>
+  )
+}
 
 /**
  * Material's single-choice segmented buttons, the selected one filled with the accent like a checked `Switch`. Its own
@@ -20,13 +64,28 @@ const SEGMENT = [weight(1)]
  */
 export const SegmentedControl: SegmentedControlComponent = ({
   disabled = false,
+  iconSize = 's20',
   onChange,
   selectedIndex,
+  spacing,
   testID,
   values,
 }: SegmentedControlProps) => {
   const theme = useAppTheme()
   const insideHost = useInsideHost()
+  const segments = useMemo(() => values.map(segmentOf), [values])
+  const iconPoints = spacingTokens[iconSize]
+
+  // Every segment the same width, like UIKit's: Material's would size each to its label. With `spacing`, as tall as
+  // the content and that space, and never shorter than Material's own segment.
+  const segmentModifiers = useMemo(() => {
+    if (spacing === undefined) {
+      return [weight(1)]
+    }
+
+    const content = Math.max(theme.typography.subheadlineMedium.lineHeight, iconPoints)
+    return [weight(1), height(Math.max(MATERIAL_HEIGHT, content + 2 * spacingTokens[spacing]))]
+  }, [iconPoints, spacing, theme])
 
   // Every segment keeps the same outline, the selected one too: an accent border would run its fill out over the line
   // the others draw inside, and make it look taller than its neighbours.
@@ -56,24 +115,24 @@ export const SegmentedControl: SegmentedControlComponent = ({
       }
 
       haptics.selection()
-      onChange?.(index, values[index] ?? '')
+      onChange?.(index, segments[index]?.label ?? '')
     },
-    [onChange, selectedIndex, values]
+    [onChange, segments, selectedIndex]
   )
 
   const row = (
     <SingleChoiceSegmentedButtonRow modifiers={rowModifiers}>
-      {values.map((label, index) => (
+      {segments.map((segment, index) => (
         <SegmentedButton
           colors={colors}
           enabled={!disabled}
           key={index}
-          modifiers={SEGMENT}
+          modifiers={segmentModifiers}
           onClick={() => select(index)}
           selected={index === selectedIndex}
         >
           <SegmentedButton.Label>
-            <Text style={theme.typography.subheadlineMedium}>{label}</Text>
+            <SegmentLabel iconSize={iconPoints} segment={segment} />
           </SegmentedButton.Label>
         </SegmentedButton>
       ))}

package/src/atoms/segmented-control/segmented-control.ios.tsx

@@ -1,10 +1,12 @@
 import {RNHostView} from '@expo/ui/swift-ui'
+import {iconResourceName} from '@hzblj/expo-native-icons'
 import {SegmentedControl as NativeSegmentedControl} from '@hzblj/kara-native/swift-ui'
-import {useAppTheme} from '@hzblj/kara-theme'
+import {spacing as spacingTokens, useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
 import {useInsideHost} from '../../host-context'
 import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
+import {imageUri, segmentOf} from './segments'
 
 const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
 
@@ -12,12 +14,16 @@ const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
  * 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 const SegmentedControl: SegmentedControlComponent = ({
   disabled = false,
+  iconSize = 's20',
   onChange,
   selectedIndex,
+  spacing,
   testID,
   values,
 }: SegmentedControlProps) => {
@@ -25,15 +31,26 @@ export const SegmentedControl: SegmentedControlComponent = ({
   const insideHost = useInsideHost()
   const face = theme.typography.footnoteMedium
 
+  const segments = useMemo(() => values.map(segmentOf), [values])
+
   // The native control speaks in values; a segment's is its index, so two labels may read the same.
-  const options = useMemo(() => values.map((label, index) => ({label, value: String(index)})), [values])
+  const options = useMemo(
+    () =>
+      segments.map((segment, index) => ({
+        icon: segment.icon ? iconResourceName(segment.icon) : undefined,
+        image: imageUri(segment.image),
+        label: segment.label,
+        value: String(index),
+      })),
+    [segments]
+  )
 
   const onValueChange = useCallback(
     (value: string) => {
       const index = Number(value)
-      onChange?.(index, values[index] ?? '')
+      onChange?.(index, segments[index]?.label ?? '')
     },
-    [onChange, values]
+    [onChange, segments]
   )
 
   const control = (
@@ -43,11 +60,13 @@ export const SegmentedControl: SegmentedControlComponent = ({
       disabled={disabled}
       fontFamily={face.fontFamily}
       fontSize={face.fontSize}
+      iconSize={spacingTokens[iconSize]}
       inactiveTextColor={theme.color('content.primary')}
       onValueChange={onValueChange}
       options={options}
       selectedValue={String(selectedIndex)}
       testID={testID}
+      verticalPadding={spacing === undefined ? undefined : spacingTokens[spacing]}
     />
   )
 

package/src/atoms/segmented-control/segmented-control.types.ts

@@ -1,14 +1,34 @@
+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.
@@ -16,10 +36,15 @@ 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/src/atoms/segmented-control/segments.ts

@@ -0,0 +1,16 @@
+import {Image, type ImageSourcePropType} from 'react-native'
+
+import type {SegmentedControlSegment} from './segmented-control.types'
+
+/** A plain label is a segment with nothing else. */
+export const segmentOf = (value: string | SegmentedControlSegment): SegmentedControlSegment =>
+  typeof value === 'string' ? {label: value} : value
+
+/** What the native loaders take: a `require()`d file's packager or file URL, or the URI itself. */
+export const imageUri = (source: ImageSourcePropType | undefined): string | undefined => {
+  if (source === undefined) {
+    return undefined
+  }
+
+  return Image.resolveAssetSource(Array.isArray(source) ? source[0] : source)?.uri
+}