@hzblj/kara-components 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @hzblj/kara-components
 
+## 0.20.0
+
+### Minor Changes
+
+- [#60](https://github.com/hzblj/kara-ui/pull/60) [`a93a723`](https://github.com/hzblj/kara-ui/commit/a93a72369a166f22d7aed19b99d5c889b61739aa) Thanks [@hzblj](https://github.com/hzblj)! - `SegmentedControl` takes its track and its labels through the `sx` names: `bg` colours the track, `p` is the room between the track's edge and the selected pill, and `variant` sets the labels in a typography variant, as `Text` does. On iOS a `bg` track is kara-native's own view, a capsule in exactly that colour under a clear `UISegmentedControl`, because UIKit renders a control's own background translucent; the pill stays the system's (Liquid Glass on iOS 26) and the track grows by `p`. Android fills the unselected segments with `bg`; Material draws no pill to inset. kara-native's `SegmentedControl` binding gains `trackPadding`, `fontWeight` (the system face's weight, so a regular variant is no longer drawn medium) and `letterSpacing`. On iOS 26 the titles under a held or dragged pill keep their colours instead of turning the system black.
+
+### Patch Changes
+
+- Updated dependencies [[`a93a723`](https://github.com/hzblj/kara-ui/commit/a93a72369a166f22d7aed19b99d5c889b61739aa)]:
+  - @hzblj/kara-native@0.20.0
+  - @hzblj/kara-sx@0.20.0
+  - @hzblj/kara-theme@0.20.0
+
+## 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,35 +1,92 @@
 "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,
+  variant
+}) => {
+  const theme = useAppTheme();
+  const face = theme.typography[variant];
+  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
  * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Inside a `Screen`
  * or `Island` it renders into that host instead (see `useInsideHost`). Material plays nothing on a new segment, so this
- * plays `selection`.
+ * plays `selection`. `bg` fills the unselected segments; `p` has nothing to inset, as Material draws no pill.
  */
 export const SegmentedControl = ({
+  bg,
   disabled = false,
+  iconSize = 's20',
   onChange,
   selectedIndex,
+  spacing,
   testID,
-  values
+  values,
+  variant = 'subheadlineMedium'
 }) => {
   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[variant].lineHeight, iconPoints);
+    return [weight(1), height(Math.max(MATERIAL_HEIGHT, content + 2 * spacingTokens[spacing]))];
+  }, [iconPoints, spacing, theme, variant]);
 
   // 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.
@@ -43,8 +100,9 @@ export const SegmentedControl = ({
     disabledInactiveBorderColor: theme.color('border.tertiary'),
     disabledInactiveContentColor: theme.color('btn.content.disabled'),
     inactiveBorderColor: theme.color('border.secondary.base'),
+    inactiveContainerColor: bg === undefined ? undefined : theme.color(bg),
     inactiveContentColor: theme.color('content.primary')
-  }), [theme]);
+  }), [bg, theme]);
   const rowModifiers = useMemo(() => testID ? [fillMaxWidth(), testIdModifier(testID)] : [fillMaxWidth()], [testID]);
 
   // Material reports a tap on the segment that is already selected too; iOS does not, and neither does this.
@@ -53,20 +111,21 @@ 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,
+          variant: variant
         })
       })
     }, 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","variant","theme","face","typography","image","undefined","fontFamily","fontSize","fontWeight","String","imageHeight","label","source","style","children","icon","align","resourceName","SegmentedControl","bg","disabled","onChange","selectedIndex","values","insideHost","segments","map","iconPoints","segmentModifiers","content","Math","max","lineHeight","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContainerColor","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,55 @@ 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`. With `bg` the
+ * track is kara-native's own view under a clear control, inset by `p`, so the pill stays the system's.
  */
 export const SegmentedControl = ({
+  bg,
   disabled = false,
+  iconSize = 's20',
   onChange,
+  p,
   selectedIndex,
+  spacing,
   testID,
-  values
+  values,
+  variant = 'footnoteMedium'
 }) => {
   const theme = useAppTheme();
   const insideHost = useInsideHost();
-  const face = theme.typography.footnoteMedium;
+  const face = theme.typography[variant];
+  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,
+    fontWeight: face.fontWeight,
+    iconSize: spacingTokens[iconSize],
     inactiveTextColor: theme.color('content.primary'),
     onValueChange: onValueChange,
     options: options,
     selectedValue: String(selectedIndex),
-    testID: testID
+    testID: testID,
+    trackColor: bg === undefined ? undefined : theme.color(bg),
+    trackPadding: p === undefined ? undefined : spacingTokens[p],
+    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","bg","disabled","iconSize","onChange","p","selectedIndex","testID","values","variant","theme","insideHost","face","typography","segments","map","options","segment","index","icon","undefined","image","label","value","String","onValueChange","Number","control","activePillColor","color","activeTextColor","fontFamily","fontSize","fontWeight","inactiveTextColor","selectedValue","trackColor","trackPadding","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,9 @@ 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`. With `bg` the
+ * track is kara-native's own view under a clear control, inset by `p`, so the pill stays the system's.
  */
 export declare const SegmentedControl: SegmentedControlComponent;

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

@@ -1,23 +1,64 @@
+import type { ColorToken, SpaceSize, TextVariant } 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).
+ * The track takes the `sx` names a component sized by props uses: `bg` for its colour, `p` for the room around the
+ * pill, and `variant` sets the labels like `Text`.
  */
 export type SegmentedControlProps = {
+    /**
+     * The track's colour, a palette token. iOS draws it itself as a capsule under the control, in exactly this colour
+     * (UIKit renders a control's own background translucent); Android fills the unselected segments with it. The
+     * platform's own track when unset.
+     */
+    bg?: ColorToken;
     /** 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.
      */
     onChange?: (index: number, value: string) => void;
+    /**
+     * Room between the track's edge and the selected pill, a spacing token, with `bg`: the track grows by it and the pill
+     * keeps its height. iOS only, UIKit's own `s2` when unset; Material's segments have no pill to inset.
+     */
+    p?: SpaceSize;
     /** 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)[];
+    /**
+     * The labels' typography variant, the app's face if it has one. `footnoteMedium` on iOS and `subheadlineMedium` on
+     * Android by default, each platform's own segmented size. Not scaled with Dynamic Type on iOS.
+     */
+    variant?: TextVariant;
 };
 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.20.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.20.0",
+    "@hzblj/kara-sx": "^0.20.0",
+    "@hzblj/kara-theme": "^0.20.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

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

@@ -1,32 +1,94 @@
 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, type TextVariant, 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
+  variant: TextVariant
+}
+
+/**
+ * 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, variant}: SegmentLabelProps) => {
+  const theme = useAppTheme()
+  const face = theme.typography[variant]
+
+  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
  * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Inside a `Screen`
  * or `Island` it renders into that host instead (see `useInsideHost`). Material plays nothing on a new segment, so this
- * plays `selection`.
+ * plays `selection`. `bg` fills the unselected segments; `p` has nothing to inset, as Material draws no pill.
  */
 export const SegmentedControl: SegmentedControlComponent = ({
+  bg,
   disabled = false,
+  iconSize = 's20',
   onChange,
   selectedIndex,
+  spacing,
   testID,
   values,
+  variant = 'subheadlineMedium',
 }: 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[variant].lineHeight, iconPoints)
+    return [weight(1), height(Math.max(MATERIAL_HEIGHT, content + 2 * spacingTokens[spacing]))]
+  }, [iconPoints, spacing, theme, variant])
 
   // 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.
@@ -41,9 +103,10 @@ export const SegmentedControl: SegmentedControlComponent = ({
       disabledInactiveBorderColor: theme.color('border.tertiary'),
       disabledInactiveContentColor: theme.color('btn.content.disabled'),
       inactiveBorderColor: theme.color('border.secondary.base'),
+      inactiveContainerColor: bg === undefined ? undefined : theme.color(bg),
       inactiveContentColor: theme.color('content.primary'),
     }),
-    [theme]
+    [bg, theme]
   )
 
   const rowModifiers = useMemo(() => (testID ? [fillMaxWidth(), testIdModifier(testID)] : [fillMaxWidth()]), [testID])
@@ -56,24 +119,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} variant={variant} />
           </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,28 +14,47 @@ 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`. With `bg` the
+ * track is kara-native's own view under a clear control, inset by `p`, so the pill stays the system's.
  */
 export const SegmentedControl: SegmentedControlComponent = ({
+  bg,
   disabled = false,
+  iconSize = 's20',
   onChange,
+  p,
   selectedIndex,
+  spacing,
   testID,
   values,
+  variant = 'footnoteMedium',
 }: SegmentedControlProps) => {
   const theme = useAppTheme()
   const insideHost = useInsideHost()
-  const face = theme.typography.footnoteMedium
+  const face = theme.typography[variant]
+
+  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 +64,16 @@ export const SegmentedControl: SegmentedControlComponent = ({
       disabled={disabled}
       fontFamily={face.fontFamily}
       fontSize={face.fontSize}
+      fontWeight={face.fontWeight}
+      iconSize={spacingTokens[iconSize]}
       inactiveTextColor={theme.color('content.primary')}
       onValueChange={onValueChange}
       options={options}
       selectedValue={String(selectedIndex)}
       testID={testID}
+      trackColor={bg === undefined ? undefined : theme.color(bg)}
+      trackPadding={p === undefined ? undefined : spacingTokens[p]}
+      verticalPadding={spacing === undefined ? undefined : spacingTokens[spacing]}
     />
   )
 

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

@@ -1,25 +1,68 @@
+import type {ColorToken, SpaceSize, TextVariant} 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).
+ * The track takes the `sx` names a component sized by props uses: `bg` for its colour, `p` for the room around the
+ * pill, and `variant` sets the labels like `Text`.
  */
 export type SegmentedControlProps = {
+  /**
+   * The track's colour, a palette token. iOS draws it itself as a capsule under the control, in exactly this colour
+   * (UIKit renders a control's own background translucent); Android fills the unselected segments with it. The
+   * platform's own track when unset.
+   */
+  bg?: ColorToken
   /** 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.
    */
   onChange?: (index: number, value: string) => void
+  /**
+   * Room between the track's edge and the selected pill, a spacing token, with `bg`: the track grows by it and the pill
+   * keeps its height. iOS only, UIKit's own `s2` when unset; Material's segments have no pill to inset.
+   */
+  p?: SpaceSize
   /** 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)[]
+  /**
+   * The labels' typography variant, the app's face if it has one. `footnoteMedium` on iOS and `subheadlineMedium` on
+   * Android by default, each platform's own segmented size. Not scaled with Dynamic Type on iOS.
+   */
+  variant?: TextVariant
 }
 
 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
+}