@hzblj/kara-components 0.7.0 → 0.9.0

package/src/molecules/scroll-edge-container/scroll-edge-container.types.ts

@@ -5,8 +5,10 @@ import type {ReactElement, ReactNode} from 'react'
 export type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-native/swift-ui'
 
 /**
- * Bars over one React Native scroll view, with the iOS 26 scroll edge effect under them — the system's progressive
- * blur where content scrolls past a bar. The React Native tier: it needs no host.
+ * Bars over one React Native scroll view, with each platform's scroll edge under them — on iOS 26 the system's
+ * progressive blur where content scrolls past a bar; on Android a Material top app bar's behaviour, the bars stacked
+ * around the scroll view and filling with `surface.secondary` once content scrolls under them. The React Native tier:
+ * it needs no host.
  *
  * A screen-level container: wrap the screen's scroll view with it. Mounted inside a cell of a virtualized list on iOS
  * it draws only its bottom bar — the hosted scroll view and the top bar stay blank.
@@ -17,7 +19,7 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
    * content begins below the top bar and scrolls under it. On by default.
    */
   automaticInsets?: boolean
-  /** Laid over the scroll view's bottom edge on iOS; stacked below it on Android, where it wants a background. */
+  /** Laid over the scroll view's bottom edge on iOS; stacked below it on Android, filled while content continues below. */
   bottomBar?: ReactNode
   /** Exactly one React Native scroll view — `RnScrollView`, `RnFlatList`, `RnSectionList`. */
   children: ReactElement<ScrollEdgeScrollableProps>
@@ -25,7 +27,7 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
   effect?: ScrollEdgeEffect
   /** Test identifier, forwarded to the container view. */
   testID?: string
-  /** Laid over the scroll view's top edge on iOS; stacked above it on Android, where it wants a background. */
+  /** Laid over the scroll view's top edge on iOS; stacked above it on Android, filled once content scrolls under it. */
   topBar?: ReactNode
 }
 

package/src/molecules/stepper/stepper.ios.tsx

@@ -1,10 +1,46 @@
 import {Stepper as SwiftUIStepper} from '@expo/ui/swift-ui'
+import {labelsHidden} from '@expo/ui/swift-ui/modifiers'
+import {useRef} from 'react'
 
+import {HStack} from '../../atoms/h-stack'
+import {Spacer} from '../../atoms/spacer'
+import {Text} from '../../atoms/text'
 import {useHostGuard} from '../../host-context'
 import type {StepperComponent, StepperProps} from './stepper.types'
 
+/** The label stays VoiceOver's, on the control; on screen it is the row's own text. */
+const LABEL_HIDDEN = [labelsHidden()]
+
+/**
+ * SwiftUI's `Stepper` at the end of a row, the label leading and the value just before the control — the way iOS's own
+ * settings show a stepped value. The value rolls to the next one (`numericText`), up or down with the change, in
+ * monospaced digits so the row does not jump.
+ */
 export const Stepper: StepperComponent = ({label, max, min, onValueChange, step = 1, value}: StepperProps) => {
   useHostGuard('Stepper')
+  const previous = useRef(value)
+  const countsDown = value < previous.current
+  previous.current = value
 
-  return <SwiftUIStepper label={label} max={max} min={min} onValueChange={onValueChange} step={step} value={value} />
+  return (
+    <HStack align="center" spacing="s12" wide>
+      <Text>{label}</Text>
+      <Spacer />
+      <Text
+        color="content.secondary"
+        ios={{animation: {value}, contentTransition: {countsDown, type: 'numericText'}, monospacedDigit: true}}
+      >
+        {String(value)}
+      </Text>
+      <SwiftUIStepper
+        label={label}
+        max={max}
+        min={min}
+        modifiers={LABEL_HIDDEN}
+        onValueChange={onValueChange}
+        step={step}
+        value={value}
+      />
+    </HStack>
+  )
 }

package/src/molecules/stepper/stepper.types.ts

@@ -5,10 +5,7 @@ import type {ReactNode} from 'react'
  * two icon buttons in a row. A native atom — it renders inside `<Screen>` or `<Island>`.
  */
 export type StepperProps = {
-  /**
-   * The leading text. iOS shows only the label, not the value — put the value in it if it should be seen. Android
-   * shows the value between its buttons.
-   */
+  /** The leading text. The value is shown too — before the control on iOS, between the buttons on Android. */
   label: string
   /** The highest value. When unset, Android has no upper limit and iOS stops at `100`. */
   max?: number

package/src/ripple-clip.ts

@@ -23,6 +23,9 @@ const CONTENT_KEYS = new Set<string>([
 
 const FILL: ViewStyle = {flexGrow: 1}
 
+/** What gives the outer view a height of its own, rather than its content's. */
+const SIZING_KEYS = ['aspectRatio', 'flex', 'flexBasis', 'flexGrow', 'height', 'minHeight'] as const
+
 /**
  * Splits a resolved style for a pressable with an Android ripple. The ripple is drawn as the pressable's foreground,
  * which its own `overflow: hidden` does not clip — so it would spill past rounded corners. A parent clips its
@@ -43,5 +46,11 @@ export const splitForRipple = (style: ViewStyle | undefined): {inner: ViewStyle[
     }
   }
 
-  return {inner: [FILL, inner as ViewStyle], outer: outer as ViewStyle}
+  // Only a sized outer view needs the pressable stretched to it. Sized by its content it must not be: Yoga grows a
+  // `flexGrow` child of a fit-content parent to the most it may take — inside a row centred on its cross axis, the
+  // pressable would stretch to the row's full height and leave its content at the top.
+  const sized =
+    SIZING_KEYS.some(key => flat[key] !== undefined) || (flat.top !== undefined && flat.bottom !== undefined)
+
+  return {inner: sized ? [FILL, inner as ViewStyle] : [inner as ViewStyle], outer: outer as ViewStyle}
 }

package/lib/module/atoms/activity-indicator/activity-indicator.js

@@ -1,14 +0,0 @@
-"use strict";
-
-import { useAppTheme } from '@hzblj/kara-theme';
-import { ActivityIndicator as RNActivityIndicator } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ActivityIndicator = props => {
-  const theme = useAppTheme();
-  return /*#__PURE__*/_jsx(RNActivityIndicator, {
-    color: theme.color('fill.accent.primary'),
-    size: "small",
-    ...props
-  });
-};
-//# sourceMappingURL=activity-indicator.js.map

package/lib/module/atoms/activity-indicator/activity-indicator.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useAppTheme","ActivityIndicator","RNActivityIndicator","jsx","_jsx","props","theme","color","size"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAE7C,SAAqCC,iBAAiB,IAAIC,mBAAmB,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElG,OAAO,MAAMH,iBAA6C,GAAGI,KAAK,IAAI;EACpE,MAAMC,KAAK,GAAGN,WAAW,CAAC,CAAC;EAE3B,oBAAOI,IAAA,CAACF,mBAAmB;IAACK,KAAK,EAAED,KAAK,CAACC,KAAK,CAAC,qBAAqB,CAAE;IAACC,IAAI,EAAC,OAAO;IAAA,GAAKH;EAAK,CAAG,CAAC;AACnG,CAAC","ignoreList":[]}

package/src/atoms/activity-indicator/activity-indicator.tsx

@@ -1,9 +0,0 @@
-import {useAppTheme} from '@hzblj/kara-theme'
-import type {FC} from 'react'
-import {type ActivityIndicatorProps, ActivityIndicator as RNActivityIndicator} from 'react-native'
-
-export const ActivityIndicator: FC<ActivityIndicatorProps> = props => {
-  const theme = useAppTheme()
-
-  return <RNActivityIndicator color={theme.color('fill.accent.primary')} size="small" {...props} />
-}