@oxy.so/bloom 4.16.1 → 4.18.0

package/src/rating/Rating.tsx

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { Platform, View } from 'react-native';
 
 import { RiStarFill } from '../icons/remix/RiStarFill';
+import { useDirectionProps } from '../hooks/use-is-rtl';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
@@ -21,6 +22,16 @@ import type { RatingProps, RatingSize } from './types';
  * reviews") on the row — `role="img"` on web, where a plain `div` with an
  * `aria-label` is not announced, and one `accessible` element on native — so a
  * screen reader never reads "star, 4.92, open paren, 128".
+ *
+ * `variant="stars"` draws five stars before the value instead of one, 2px
+ * apart, each filled to its share of the value: the unfilled star in
+ * `emptyStarColor` (border), and over it the filled star clipped to the
+ * fraction. The clip is anchored with a LOGICAL inset (`insetInlineStart`) so a
+ * right-to-left row fills from the right — the root carries
+ * `useDirectionProps()` for react-native-web to resolve it.
+ *
+ * `color` / `starColor` / `countColor` recolour it for a surface the theme's
+ * text pair cannot sit on (a brand-coloured hero).
  */
 
 const SIZE_CONFIG: Record<RatingSize, { star: number; value: TypeScaleVariant; count: TypeScaleVariant }> = {
@@ -37,6 +48,59 @@ export function formatRatingValue(value: number | string): string {
 
 const IS_WEB = Platform.OS === 'web';
 
+/** The number of stars in the `stars` variant. */
+const STAR_COUNT = 5;
+const STAR_GAP = 2;
+
+/** How much of star `index` (0-based) a rating fills, `0..1`. */
+export function starFill(rating: number, index: number): number {
+  if (!Number.isFinite(rating)) return 0;
+  return Math.min(1, Math.max(0, rating - index));
+}
+
+function StarRow({
+  rating,
+  size,
+  fill,
+  empty,
+  testID,
+}: {
+  rating: number;
+  size: number;
+  fill: string;
+  empty: string;
+  testID?: string;
+}) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: STAR_GAP }} testID={testID}>
+      {Array.from({ length: STAR_COUNT }, (_, index) => {
+        const share = starFill(rating, index);
+        return (
+          <View key={index} style={{ width: size, height: size }}>
+            <RiStarFill width={size} height={size} fill={empty} />
+            {share > 0 ? (
+              <View
+                testID={testID ? `${testID}-${index}` : undefined}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  bottom: 0,
+                  insetInlineStart: 0,
+                  width: size * share,
+                  overflow: 'hidden',
+                  alignItems: 'flex-start',
+                }}
+              >
+                <RiStarFill width={size} height={size} fill={fill} />
+              </View>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
 function RatingComponent({
   value,
   count,
@@ -44,11 +108,20 @@ function RatingComponent({
   reviewsLabel = 'reviews',
   newLabel = 'New',
   size = 'medium',
+  variant = 'compact',
+  color,
+  starColor,
+  countColor,
+  emptyStarColor,
   accessibilityLabel,
   style,
   testID,
 }: RatingProps) {
   const theme = useTheme();
+  const directionProps = useDirectionProps();
+  const textColor = color ?? theme.colors.text;
+  const starPaint = starColor ?? textColor;
+  const countPaint = countColor ?? color ?? theme.colors.textSecondary;
   const config = SIZE_CONFIG[size];
   const rated = value != null && value !== '';
   const shownValue = rated ? formatRatingValue(value) : newLabel;
@@ -66,18 +139,29 @@ function RatingComponent({
 
   return (
     <View
+      {...directionProps}
       testID={testID}
       accessible
       accessibilityLabel={name}
       {...(IS_WEB ? { role: 'img' as const } : null)}
       style={[{ flexDirection: 'row', alignItems: 'center', gap: 4 }, style]}
     >
-      <RiStarFill width={config.star} height={config.star} fill={theme.colors.text} />
-      <Text variant={config.value} style={{ color: theme.colors.text, fontVariant: ['tabular-nums'] }}>
+      {variant === 'stars' && rated ? (
+        <StarRow
+          rating={typeof value === 'number' ? value : Number(value)}
+          size={config.star}
+          fill={starPaint}
+          empty={emptyStarColor ?? theme.colors.border}
+          testID={testID ? `${testID}-stars` : undefined}
+        />
+      ) : variant === 'stars' ? null : (
+        <RiStarFill width={config.star} height={config.star} fill={starPaint} />
+      )}
+      <Text variant={config.value} style={{ color: textColor, fontVariant: ['tabular-nums'] }}>
         {shownValue}
       </Text>
       {countText != null && (
-        <Text variant={config.count} style={{ color: theme.colors.textSecondary }}>
+        <Text variant={config.count} style={{ color: countPaint }}>
           {countText}
         </Text>
       )}

package/src/rating/index.ts

@@ -8,4 +8,5 @@ export type {
   RatingInputSize,
   RatingProps,
   RatingSize,
+  RatingVariant,
 } from './types';

package/src/rating/types.ts

@@ -6,6 +6,13 @@ export type RatingSize = 'small' | 'medium';
 /** `parenthesis` draws "(128)"; `reviews` draws "· 128 reviews". */
 export type RatingCountStyle = 'parenthesis' | 'reviews';
 
+/**
+ * `compact` (default) is one star and the value; `stars` a full row of `max`
+ * stars (five) filled to the value — fractionally, so 4.3 fills the fifth star
+ * 30% — before the value.
+ */
+export type RatingVariant = 'compact' | 'stars';
+
 export interface RatingProps {
   /**
    * The rating on a 5 scale. A number is drawn with up to two decimals (4.9,
@@ -23,6 +30,20 @@ export interface RatingProps {
   newLabel?: string;
   /** Default `medium`. */
   size?: RatingSize;
+  /** Default `compact` — one star. `stars` draws a row of five, filled fractionally. */
+  variant?: RatingVariant;
+  /**
+   * Paints the star(s) and the value — and the count, unless `countColor` is
+   * given — e.g. white over a brand-coloured hero, where text-primary and
+   * text-secondary are illegible. Default: text-primary (count text-secondary).
+   */
+  color?: string;
+  /** The filled star(s) alone, e.g. a gold star beside neutral text. Default `color`. */
+  starColor?: string;
+  /** The count alone. Default `color` when given, else text-secondary. */
+  countColor?: string;
+  /** `stars` variant: the unfilled part of each star. Default the theme's border colour. */
+  emptyStarColor?: string;
   /**
    * Overrides the composed accessible name ("Rated 4.92 out of 5, 128
    * reviews"), which is English — pass a translated sentence here.

package/src/stepper/Stepper.tsx

@@ -5,6 +5,7 @@ import { Button } from '../button';
 import { webDataSet } from '../styles/web-data';
 import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import { RiAddLine } from '../icons/remix/RiAddLine';
+import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
 import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
 import { useRingOffsetStyle } from '../styles/surface-levels';
 import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
@@ -33,6 +34,14 @@ import { useFieldMembership } from '../field/membership';
  * the tab order, being pointer affordances for the same action. On native it
  * answers the `increment`/`decrement` accessibility actions (VoiceOver swipe
  * up/down, TalkBack volume keys).
+ *
+ * REMOVE AT THE FLOOR is opt-in (`onRemove`). With it, the `−` button at `min`
+ * turns into a trash button named `removeLabel` that calls `onRemove` — a
+ * basket line that goes from 1 to gone. Without it the button disables at
+ * `min`, as it always has. The keyboard and the accessibility actions on the
+ * value never remove: an arrow key or a volume-key swipe that deletes is a
+ * destructive action behind an arithmetic one. So that a keyboard user can
+ * still reach it, the button joins the tab order while it is the remove control.
  */
 
 const IS_WEB = Platform.OS === 'web';
@@ -83,6 +92,8 @@ function StepperComponent({
   accessibilityLabel,
   decrementLabel = 'Decrease',
   incrementLabel = 'Increase',
+  onRemove,
+  removeLabel = 'Remove',
   style,
   testID,
 }: StepperProps) {
@@ -99,6 +110,8 @@ function StepperComponent({
 
   const canDecrement = !disabled && value > min;
   const canIncrement = !disabled && (max === undefined || value < max);
+  // At the floor with `onRemove`, the decrement slot IS the remove control.
+  const removes = onRemove !== undefined && !disabled && value <= min;
 
   const change = useCallback(
     (target: number) => {
@@ -180,11 +193,11 @@ function StepperComponent({
         variant="secondary"
         size={config.button}
         iconOnly
-        icon={RiSubtractLine}
-        onPress={decrement}
-        disabled={!canDecrement}
-        accessibilityLabel={decrementLabel}
-        tabIndex={-1}
+        icon={removes ? RiDeleteBinLine : RiSubtractLine}
+        onPress={removes ? onRemove : decrement}
+        disabled={!(canDecrement || removes)}
+        accessibilityLabel={removes ? removeLabel : decrementLabel}
+        tabIndex={removes ? 0 : -1}
         testID={testID ? `${testID}-decrement` : undefined}
       />
       <View

package/src/stepper/types.ts

@@ -38,6 +38,15 @@ export interface StepperProps {
   decrementLabel?: string;
   /** Name of the `+` button. Default `"Increase"`. */
   incrementLabel?: string;
+  /**
+   * Opt-in remove at the floor: at `min` the `−` button becomes a trash button
+   * that calls this instead of disabling (a basket line going from 1 to gone).
+   * Only the button removes — the keyboard and accessibility actions on the
+   * value still stop at `min`. Without it the stepper floors at `min`.
+   */
+  onRemove?: () => void;
+  /** Name of the trash button drawn at `min` with `onRemove`. Default `"Remove"`. */
+  removeLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

package/src/tabs/Tabs.tsx

@@ -780,6 +780,9 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
           ref={scrollRef}
           {...stripA11y}
           horizontal
+          // A tab strip owns its intrinsic cross-axis height. RN ScrollView's
+          // default flexGrow: 1 otherwise consumes the list's remaining space.
+          style={{ flexGrow: 0, flexShrink: 0 }}
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={[containerStyle, style]}
           onLayout={(e) => {