@hzblj/kara-components 0.19.0 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @hzblj/kara-components
 
+## 0.20.1
+
+### Patch Changes
+
+- [#62](https://github.com/hzblj/kara-ui/pull/62) [`0c62a1f`](https://github.com/hzblj/kara-ui/commit/0c62a1f5950d679d2d87a0351081f78154c54704) Thanks [@hzblj](https://github.com/hzblj)! - A `SegmentedControl` with `bg` now shows exactly that colour on iOS. UIKit drew its own track over a grey system fill on top of kara's, whatever colour the control was given, so a white track showed grey inside a white rim. The control now hides those track images (alpha 0 after each of its layouts) while kara draws the track, and the Liquid Glass pill stays the system's.
+
+- Updated dependencies [[`0c62a1f`](https://github.com/hzblj/kara-ui/commit/0c62a1f5950d679d2d87a0351081f78154c54704)]:
+  - @hzblj/kara-native@0.20.1
+  - @hzblj/kara-theme@0.20.1
+  - @hzblj/kara-sx@0.20.1
+
+## 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

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

@@ -24,10 +24,11 @@ const MATERIAL_HEIGHT = 40;
  */
 const SegmentLabel = ({
   iconSize,
-  segment
+  segment,
+  variant
 }) => {
   const theme = useAppTheme();
-  const face = theme.typography.subheadlineMedium;
+  const face = theme.typography[variant];
   if (segment.image !== undefined) {
     return /*#__PURE__*/_jsx(NativeImage, {
       fontFamily: face.fontFamily,
@@ -59,16 +60,18 @@ const SegmentLabel = ({
  * 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();
@@ -81,9 +84,9 @@ export const SegmentedControl = ({
     if (spacing === undefined) {
       return [weight(1)];
     }
-    const content = Math.max(theme.typography.subheadlineMedium.lineHeight, iconPoints);
+    const content = Math.max(theme.typography[variant].lineHeight, iconPoints);
     return [weight(1), height(Math.max(MATERIAL_HEIGHT, content + 2 * spacingTokens[spacing]))];
-  }, [iconPoints, spacing, theme]);
+  }, [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.
@@ -97,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.
@@ -120,7 +124,8 @@ export const SegmentedControl = ({
       children: /*#__PURE__*/_jsx(SegmentedButton.Label, {
         children: /*#__PURE__*/_jsx(SegmentLabel, {
           iconSize: iconPoints,
-          segment: segment
+          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","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":[]}
+{"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

@@ -19,20 +19,24 @@ const MATCH_HEIGHT_ONLY = {
  * 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. 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`.
+ * 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.
@@ -52,12 +56,15 @@ export const SegmentedControl = ({
     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]
   });
   return insideHost ? /*#__PURE__*/_jsx(RNHostView, {

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

@@ -1 +1 @@
-{"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":[]}
+{"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/typescript/atoms/segmented-control/segmented-control.ios.d.ts

@@ -5,6 +5,7 @@ import type { SegmentedControlComponent } from './segmented-control.types';
  * 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. 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`.
+ * 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,4 +1,4 @@
-import type { SpaceSize } from '@hzblj/kara-theme';
+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';
@@ -20,8 +20,16 @@ export type SegmentedControlSegment = {
  * 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, 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. */
@@ -31,6 +39,11 @@ export type SegmentedControlProps = {
      * 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;
     /**
@@ -42,5 +55,10 @@ export type SegmentedControlProps = {
     testID?: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "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.19.0",
-    "@hzblj/kara-sx": "^0.19.0",
-    "@hzblj/kara-theme": "^0.19.0",
+    "@hzblj/kara-native": "^0.20.1",
+    "@hzblj/kara-sx": "^0.20.1",
+    "@hzblj/kara-theme": "^0.20.1",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

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

@@ -3,7 +3,7 @@ import {fillMaxWidth, height, testID as testIdModifier, weight} from '@expo/ui/j
 import {iconResourceName} from '@hzblj/expo-native-icons'
 import {haptics} from '@hzblj/expo-rich-haptics'
 import {DrawableIcon, NativeImage} from '@hzblj/kara-native/jetpack-compose'
-import {spacing as spacingTokens, useAppTheme} from '@hzblj/kara-theme'
+import {spacing as spacingTokens, type TextVariant, useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
 import {useInsideHost} from '../../host-context'
@@ -19,15 +19,16 @@ 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}: SegmentLabelProps) => {
+const SegmentLabel = ({iconSize, segment, variant}: SegmentLabelProps) => {
   const theme = useAppTheme()
-  const face = theme.typography.subheadlineMedium
+  const face = theme.typography[variant]
 
   if (segment.image !== undefined) {
     return (
@@ -60,9 +61,10 @@ const SegmentLabel = ({iconSize, segment}: SegmentLabelProps) => {
  * 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,
@@ -70,6 +72,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
   spacing,
   testID,
   values,
+  variant = 'subheadlineMedium',
 }: SegmentedControlProps) => {
   const theme = useAppTheme()
   const insideHost = useInsideHost()
@@ -83,9 +86,9 @@ export const SegmentedControl: SegmentedControlComponent = ({
       return [weight(1)]
     }
 
-    const content = Math.max(theme.typography.subheadlineMedium.lineHeight, iconPoints)
+    const content = Math.max(theme.typography[variant].lineHeight, iconPoints)
     return [weight(1), height(Math.max(MATERIAL_HEIGHT, content + 2 * spacingTokens[spacing]))]
-  }, [iconPoints, spacing, theme])
+  }, [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.
@@ -100,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])
@@ -132,7 +136,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
           selected={index === selectedIndex}
         >
           <SegmentedButton.Label>
-            <SegmentLabel iconSize={iconPoints} segment={segment} />
+            <SegmentLabel iconSize={iconPoints} segment={segment} variant={variant} />
           </SegmentedButton.Label>
         </SegmentedButton>
       ))}

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

@@ -16,20 +16,24 @@ const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
  * 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. 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`.
+ * 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])
 
@@ -60,12 +64,15 @@ 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,4 +1,4 @@
-import type {SpaceSize} from '@hzblj/kara-theme'
+import type {ColorToken, SpaceSize, TextVariant} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 import type {ImageSourcePropType} from 'react-native'
 
@@ -23,8 +23,16 @@ export type SegmentedControlSegment = {
  * 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, 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. */
@@ -34,6 +42,11 @@ export type SegmentedControlProps = {
    * 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
   /**
@@ -45,6 +58,11 @@ export type SegmentedControlProps = {
   testID?: 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