react-native-terra-ui 0.11.16 → 0.12.0

package/src/components/accordion/parts/AccordionContent.tsx

@@ -0,0 +1,96 @@
+import { Children, type ComponentRef, forwardRef, type ReactNode, useEffect, useState } from "react";
+import { type LayoutChangeEvent, View, type ViewProps } from "react-native";
+
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+import { scheduleOnRN } from "react-native-worklets";
+
+import { Text } from "../../text";
+import { useAccordionItem } from "../context";
+import { ACCORDION_TIMING } from "../utils";
+
+export interface AccordionContentProps extends ViewProps {
+  /** The panel body. Strings and numbers are wrapped in body text. */
+  children?: ReactNode;
+}
+
+function renderBody(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (typeof child === "string") {
+      return child.trim().length > 0 ? (
+        <Text variant="body-md" color="text.secondary">
+          {child}
+        </Text>
+      ) : null;
+    }
+    if (typeof child === "number") {
+      return (
+        <Text variant="body-md" color="text.secondary">
+          {child}
+        </Text>
+      );
+    }
+    return child;
+  });
+}
+
+export const AccordionContent = forwardRef<ComponentRef<typeof View>, AccordionContentProps>(
+  function AccordionContent({ children, style, onLayout: onLayoutProp, ...rest }, ref) {
+    const { isExpanded } = useAccordionItem();
+
+    // The body stays mounted while open and while the close animation runs,
+    // then unmounts so a long list of closed items costs nothing.
+    const [isMounted, setIsMounted] = useState(isExpanded);
+    const progress = useSharedValue(isExpanded ? 1 : 0);
+    // The body's natural height, read from its own layout. 0 until the first
+    // measurement lands.
+    const measured = useSharedValue(0);
+
+    useEffect(() => {
+      if (isExpanded) setIsMounted(true);
+      progress.value = withTiming(isExpanded ? 1 : 0, ACCORDION_TIMING, (finished) => {
+        if (finished && !isExpanded) scheduleOnRN(setIsMounted, false);
+      });
+    }, [isExpanded, progress]);
+
+    const onLayout = (event: LayoutChangeEvent) => {
+      measured.value = event.nativeEvent.layout.height;
+      onLayoutProp?.(event);
+    };
+
+    const clip = useAnimatedStyle(() => {
+      // Before the first measurement an item that starts open takes its auto
+      // height, and one that is just opening holds at 0 for the frame it takes
+      // to measure.
+      if (measured.value === 0) {
+        return { height: progress.value === 1 ? undefined : 0, opacity: progress.value };
+      }
+      return { height: measured.value * progress.value, opacity: progress.value };
+    });
+
+    if (!isMounted) return null;
+
+    return (
+      <Animated.View style={[styles.clip, clip]}>
+        {/* Not absolutely positioned: RN children do not shrink by default, so
+            this keeps its natural height inside the clipping parent and its
+            layout reports the height to animate towards. */}
+        <View ref={ref} {...rest} onLayout={onLayout} style={[styles.body, style]}>
+          {renderBody(children)}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create((theme) => ({
+  clip: {
+    overflow: "hidden",
+  },
+  body: {
+    gap: theme.spacing["2"],
+    paddingBottom: theme.spacing["4"],
+  },
+}));

package/src/components/accordion/parts/AccordionIndicator.tsx

@@ -0,0 +1,67 @@
+import { type ComponentRef, forwardRef, type ReactNode, useEffect } from "react";
+import type { View, ViewProps } from "react-native";
+
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+
+import type { ColorToken } from "#theme/types";
+import { Icon } from "../../icon";
+import { useAccordionItem } from "../context";
+import { ACCORDION_TIMING } from "../utils";
+
+export interface AccordionIndicatorProps extends Omit<ViewProps, "children"> {
+  /** Chevron color. Ignored with custom `children`. Defaults to `'text.secondary'`. */
+  color?: ColorToken;
+  /** Chevron size in dp. Ignored with custom `children`. Defaults to `20`. */
+  size?: number;
+  /**
+   * Replaces the chevron. Custom content does not rotate — read `isExpanded`
+   * from the item's render function or `useAccordionItem()` to swap it instead.
+   */
+  children?: ReactNode;
+}
+
+export const AccordionIndicator = forwardRef<ComponentRef<typeof View>, AccordionIndicatorProps>(
+  function AccordionIndicator({ color = "text.secondary", size = 20, children, style, ...rest }, ref) {
+    const { isExpanded } = useAccordionItem();
+    // Seeded from the current state so an item that starts open shows its
+    // chevron already turned, with no animation on mount.
+    const progress = useSharedValue(isExpanded ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = withTiming(isExpanded ? 1 : 0, ACCORDION_TIMING);
+    }, [isExpanded, progress]);
+
+    // `terra.chevron-right` is the chevron the library ships, so it is turned a
+    // quarter to point down when closed and a further half to point up when open.
+    const rotation = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${90 + progress.value * 180}deg` }],
+    }));
+
+    const hasCustomContent = children !== undefined && children !== null;
+
+    return (
+      <Animated.View
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        style={[styles.indicator, hasCustomContent ? null : rotation, style]}
+        {...rest}
+      >
+        {hasCustomContent ? children : <Icon name="terra.chevron-right" color={color} size={size} />}
+      </Animated.View>
+    );
+  }
+);
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create(() => ({
+  // Pushes the indicator to the row's end even when the title is a custom node
+  // that does not take the free space itself.
+  indicator: {
+    marginStart: "auto",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+}));

package/src/components/accordion/parts/AccordionItem.tsx

@@ -0,0 +1,55 @@
+import { type ComponentRef, forwardRef, type ReactNode, useCallback, useMemo } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { AccordionItemContext, useAccordionContext } from "../context";
+import type { AccordionItemState } from "../types";
+
+export interface AccordionItemProps extends Omit<ViewProps, "children"> {
+  /** Identifies the item in the accordion's `value`. Unique within one accordion. */
+  value: string;
+  /** Disables this item only. Defaults to `false`. */
+  isDisabled?: boolean;
+  /**
+   * The item's trigger and content, or a function that receives the item's
+   * `{ isExpanded, isDisabled }` and returns them.
+   */
+  children?: ReactNode | ((state: AccordionItemState) => ReactNode);
+}
+
+export const AccordionItem = forwardRef<ComponentRef<typeof View>, AccordionItemProps>(function AccordionItem(
+  { value, isDisabled: isDisabledProp = false, children, style, ...rest },
+  ref
+) {
+  const { expanded, toggle: toggleValue, isDisabled: isAccordionDisabled } = useAccordionContext();
+
+  const isExpanded = expanded.includes(value);
+  const isDisabled = isAccordionDisabled || isDisabledProp;
+
+  const toggle = useCallback(() => {
+    if (!isDisabled) toggleValue(value);
+  }, [isDisabled, toggleValue, value]);
+
+  const context = useMemo(
+    () => ({ value, isExpanded, isDisabled, toggle }),
+    [value, isExpanded, isDisabled, toggle]
+  );
+
+  return (
+    <AccordionItemContext.Provider value={context}>
+      <View ref={ref} style={[styles.item, style]} {...rest}>
+        {typeof children === "function" ? children({ isExpanded, isDisabled }) : children}
+      </View>
+    </AccordionItemContext.Provider>
+  );
+});
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+// Present so the Unistyles Babel plugin rewrites the `View` above; a themed
+// style passed in through `style` would otherwise freeze at the theme it was
+// created under.
+const styles = StyleSheet.create(() => ({
+  item: {},
+}));

package/src/components/accordion/parts/AccordionTrigger.tsx

@@ -0,0 +1,88 @@
+import { Children, type ComponentRef, forwardRef, type ReactNode } from "react";
+import { type GestureResponderEvent, Pressable, type PressableProps } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { Text } from "../../text";
+import { useAccordionItem } from "../context";
+
+export interface AccordionTriggerProps extends Omit<PressableProps, "children" | "disabled"> {
+  /**
+   * The header row. Strings and numbers become the item's title; put an
+   * `Accordion.Indicator` last to show the open state.
+   */
+  children?: ReactNode;
+}
+
+function renderTitle(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (typeof child === "string") {
+      return child.trim().length > 0 ? (
+        <Text variant="body-lg" weight="medium" style={styles.title}>
+          {child}
+        </Text>
+      ) : null;
+    }
+    if (typeof child === "number") {
+      return (
+        <Text variant="body-lg" weight="medium" style={styles.title}>
+          {child}
+        </Text>
+      );
+    }
+    return child;
+  });
+}
+
+export const AccordionTrigger = forwardRef<ComponentRef<typeof Pressable>, AccordionTriggerProps>(
+  function AccordionTrigger({ children, onPress, style, ...rest }, ref) {
+    const { isExpanded, isDisabled, toggle } = useAccordionItem();
+
+    const handlePress = (event: GestureResponderEvent) => {
+      onPress?.(event);
+      toggle();
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isExpanded, disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={handlePress}
+        style={(state) => [
+          styles.trigger,
+          state.pressed && styles.pressed,
+          isDisabled && styles.disabled,
+          typeof style === "function" ? style(state) : style,
+        ]}
+        {...rest}
+      >
+        {renderTitle(children)}
+      </Pressable>
+    );
+  }
+);
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing["3"],
+    minHeight: 48,
+    paddingVertical: theme.spacing["4"],
+  },
+  pressed: {
+    opacity: theme.opacity.pressed,
+  },
+  disabled: {
+    opacity: theme.opacity.disabled,
+  },
+  // Takes the free space so an indicator after it sits at the row's end, and
+  // wraps a long title instead of pushing the indicator off.
+  title: {
+    flex: 1,
+  },
+}));

package/src/components/accordion/types.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+
+export type AccordionSelectionMode = "single" | "multiple";
+
+export type AccordionVariant = "plain" | "surface";
+
+interface AccordionBaseProps extends Omit<ViewProps, "children"> {
+  /**
+   * Visual treatment. `'plain'` draws the items straight onto whatever sits
+   * behind the accordion; `'surface'` puts them in a filled, rounded container.
+   * Defaults to `'plain'`.
+   */
+  variant?: AccordionVariant;
+  /** Draws a hairline rule between items. Defaults to `true`. */
+  divided?: boolean;
+  /** Disables every item. Defaults to `false`. */
+  isDisabled?: boolean;
+  /** `Accordion.Item` elements. */
+  children?: ReactNode;
+}
+
+export interface AccordionSingleProps extends AccordionBaseProps {
+  /**
+   * `'single'` keeps at most one item open; opening another closes the current
+   * one. Defaults to `'single'`.
+   */
+  selectionMode?: "single";
+  /**
+   * The open item, controlled. `null` means none is open — `undefined` leaves
+   * the accordion uncontrolled.
+   */
+  value?: string | null;
+  /** The item open on first render, uncontrolled. Defaults to `undefined`. */
+  defaultValue?: string;
+  /** Called with the newly open item, or `null` when the open item closes. */
+  onValueChange?: (value: string | null) => void;
+  /**
+   * Lets the open item close by pressing its trigger again. `false` keeps one
+   * item open at all times once any has been opened. Defaults to `true`.
+   */
+  isCollapsible?: boolean;
+}
+
+export interface AccordionMultipleProps extends AccordionBaseProps {
+  /** `'multiple'` lets any number of items be open at once. */
+  selectionMode: "multiple";
+  /** The open items, controlled. */
+  value?: string[];
+  /** The items open on first render, uncontrolled. Defaults to `[]`. */
+  defaultValue?: string[];
+  /** Called with every open item after one is toggled. */
+  onValueChange?: (value: string[]) => void;
+  /** Multiple mode can always close an item. */
+  isCollapsible?: never;
+}
+
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+
+export interface AccordionItemState {
+  /** Whether the item's content is open. */
+  isExpanded: boolean;
+  /** Whether the item, or the whole accordion, is disabled. */
+  isDisabled: boolean;
+}
+
+export interface AccordionItemContextValue extends AccordionItemState {
+  value: string;
+  /** Opens or closes this item, following the accordion's selection rules. */
+  toggle: () => void;
+}

package/src/components/accordion/utils.ts

@@ -0,0 +1,12 @@
+import { Easing, ReduceMotion, type WithTimingConfig } from "react-native-reanimated";
+
+/**
+ * Shared by the content's height and the indicator's rotation so the chevron
+ * finishes turning as the panel finishes opening. Honours the system
+ * reduce-motion setting, which makes both jump straight to their end state.
+ */
+export const ACCORDION_TIMING: WithTimingConfig = {
+  duration: 250,
+  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+  reduceMotion: ReduceMotion.System,
+};

package/src/components/badge/Badge.tsx

@@ -1,78 +1,196 @@
-import { type ComponentRef, forwardRef } from "react";
-import { View } from "react-native";
+import { Text as RNText, View } from "react-native";
 
-import { StyleSheet } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { BadgeIndicator } from "./parts/BadgeIndicator";
-import type { BadgeProps } from "./types";
-import { getAnchorPosition } from "./utils";
+import type { ColorToken, RoleTextVariant } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
+import type { BadgeProps, BadgeSize } from "./types";
+import { getCustomBadgeColors, hasLabel } from "./utils";
+
+const SCHEME_NAMES = new Set(["primary", "secondary", "success", "warning", "danger"]);
+
+type BadgeScheme = "primary" | "secondary" | "success" | "warning" | "danger";
+
+/** Label foreground per scheme — mirrors the spec's token table. */
+const FG_TOKEN: Record<BadgeScheme, ColorToken> = {
+  primary: "accent.solid.fg",
+  secondary: "neutral.solid.fg",
+  success: "success.solid.fg",
+  warning: "warning.solid.fg",
+  danger: "danger.solid.fg",
+};
+
+const LABEL_VARIANT: Record<BadgeSize, RoleTextVariant> = {
+  sm: "label-sm",
+  md: "label-md",
+  lg: "label-lg",
+};
 
 /**
- * Overlays a count or status indicator on one corner of the element it wraps.
+ * A dot, or a pill carrying a count or short label.
  *
  * ```tsx
- * <Badge placement="top-right" color="danger" label={3}>
- *   <Toolbar.Button icon="bell" accessibilityLabel="Notifications" />
- * </Badge>
+ * <Text>Appearing</Text>
+ * <Badge color="secondary" size="sm" label={56} />
  * ```
  *
- * The child renders untouched — `Badge` contributes the positioning context and
- * the overlay, nothing else. A round child usually wants a negative `offset`,
- * since the corner being anchored to is the bounding box's, not the circle's.
+ * Stands on its own, inline in a row beside the text it counts. To pin one to
+ * the corner of an icon or button, wrap that element in `WithBadge`, which
+ * renders this and owns only the position.
+ *
+ * `useUnistyles` is called unconditionally, which is what subscribes this
+ * component to theme changes. The background below comes from a variant, which
+ * unistyles applies straight to the native node on a theme switch; without a
+ * re-render React would go on believing the node holds the previous theme's
+ * value. `Chip` documents the same hazard on its root.
  */
-const Badge = forwardRef<ComponentRef<typeof View>, BadgeProps>(function Badge(
-  {
-    children,
-    placement = "top-right",
-    label,
-    color = "danger",
-    size = "md",
-    offset = 0,
-    isVisible = true,
-    fullWidth = false,
-    accessibilityLabel,
-    style,
-    ...rest
-  },
-  ref
-) {
-  styles.useVariants({ fullWidth });
+export const Badge = ({
+  label,
+  color = "danger",
+  size = "md",
+  ring = false,
+  accessibilityLabel,
+  style,
+  ...rest
+}: BadgeProps) => {
+  const { theme } = useUnistyles();
+  // A literal never matches one of the five variant options, so it's cast to
+  // satisfy `useVariants`'s literal-union type while still being compared
+  // against the real value below.
+  styles.useVariants({ color: color as BadgeScheme, size, ring });
+
+  const custom = SCHEME_NAMES.has(color) ? null : getCustomBadgeColors(color);
+  const labelled = hasLabel(label);
+  const foreground = custom ? custom.fg : FG_TOKEN[color as BadgeScheme];
+
+  // An explicit label wins even on a dot; a dot with nothing to announce is
+  // decorative and hidden rather than read out as an unlabelled element.
+  const announced = accessibilityLabel ?? (labelled ? String(label) : undefined);
+  const accessibility = announced
+    ? { accessible: true, accessibilityLabel: announced }
+    : {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants" as const,
+        "aria-hidden": true,
+      };
 
   return (
-    // `style` last so an explicit `alignSelf` beats `fullWidth`.
-    <View ref={ref} style={[styles.wrapper, style]} {...rest}>
-      {children}
-      {isVisible ? (
-        <View pointerEvents="box-none" style={[styles.anchor, getAnchorPosition(placement, size, offset)]}>
-          <BadgeIndicator label={label} color={color} size={size} accessibilityLabel={accessibilityLabel} />
-        </View>
+    <View
+      style={[
+        styles.indicator,
+        labelled ? styles.pill : styles.dot,
+        custom ? { backgroundColor: custom.bg } : null,
+        style,
+      ]}
+      {...rest}
+      {...accessibility}
+    >
+      {labelled ? (
+        <RNText
+          style={[styles.label, { color: resolveThemeColor(foreground, theme) }]}
+          maxFontSizeMultiplier={theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier}
+          numberOfLines={1}
+        >
+          {label}
+        </RNText>
       ) : null}
     </View>
   );
-});
-
-export { Badge };
+};
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //
-// The indicator's insets are computed in `getAnchorPosition`, not declared here:
-// `offset` is an open-ended number, so it could never be a variant condition,
-// and the position involves no theme tokens at all. That leaves this stylesheet
-// with only what genuinely varies declaratively.
-const styles = StyleSheet.create(() => ({
-  wrapper: {
-    position: "relative",
-    variants: {
-      // `alignSelf: 'flex-start'` hugs the child, so the indicator anchors to
-      // the child's bounds rather than the surrounding container's. A child
-      // that was stretching needs `fullWidth` to go on doing so.
-      fullWidth: {
-        true: { alignSelf: "stretch" },
-        false: { alignSelf: "flex-start" },
+// `color` is a plain variant rather than a compound one: `Badge` renders solid
+// only, so there is no second paint axis for it to interact with.
+//
+// React Native's box model is border-box, so the ring below eats into the
+// badge rather than growing it — the dot's outer diameter stays exactly what
+// `size` declares, with no compensation arithmetic, ring or not.
+const styles = StyleSheet.create((theme) => {
+  const c = theme.color;
+  // A custom font encodes its weight in the family name, so only the system
+  // font takes a numeric `fontWeight` — the same branch `Chip` makes. Inlined
+  // rather than extracted: the unistyles Babel plugin rewrites this factory,
+  // and an imported function called from inside it is not in scope at runtime.
+  const labelFont = theme.typography.fonts.semibold;
+  const isSystemLabelFont = labelFont === SYSTEM_FONT;
+
+  return {
+    indicator: {
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.radius.full,
+      borderColor: c["surface.canvas"],
+      variants: {
+        // No styles of its own; it only has to exist for the compound rows
+        // below to match on. The ring's width depends on size as well.
+        size: { sm: {}, md: {}, lg: {} },
+        ring: {
+          true: {},
+          false: { borderWidth: 0 },
+        },
+        color: {
+          primary: { backgroundColor: c["accent.solid.bg"] },
+          secondary: { backgroundColor: c["neutral.solid.bg"] },
+          success: { backgroundColor: c["success.solid.bg"] },
+          warning: { backgroundColor: c["warning.solid.bg"] },
+          danger: { backgroundColor: c["danger.solid.bg"] },
+        },
       },
+      compoundVariants: [
+        { ring: true, size: "sm", styles: { borderWidth: 1.5 } },
+        { ring: true, size: "md", styles: { borderWidth: 2 } },
+        { ring: true, size: "lg", styles: { borderWidth: 2 } },
+      ],
     },
-  },
-  anchor: {
-    position: "absolute",
-  },
-}));
+    // These diameters are mirrored by `DOT_SIZE` in `./utils.ts`, which the
+    // anchor arithmetic reads. The Babel plugin needs them literal here, so a
+    // test asserts the two stay equal.
+    dot: {
+      variants: {
+        size: {
+          sm: { width: 12, height: 12 },
+          md: { width: 16, height: 16 },
+          lg: { width: 20, height: 20 },
+        },
+      },
+    },
+    pill: {
+      variants: {
+        size: {
+          sm: { height: 18, minWidth: 18, paddingHorizontal: 5 },
+          md: { height: 22, minWidth: 22, paddingHorizontal: 6 },
+          lg: { height: 26, minWidth: 26, paddingHorizontal: 8 },
+        },
+      },
+    },
+    // Spelled out rather than derived from `LABEL_VARIANT`: the unistyles Babel
+    // plugin reads this object statically, so computed variant keys are not
+    // safe here even though they would resolve correctly under test.
+    label: {
+      textAlign: "center",
+      fontFamily: isSystemLabelFont ? undefined : labelFont,
+      fontWeight: isSystemLabelFont ? FONT_WEIGHT_VALUE.semibold : undefined,
+      variants: {
+        size: {
+          sm: {
+            fontSize: theme.typography.variants["label-sm"].fontSize,
+            lineHeight: theme.typography.variants["label-sm"].lineHeight,
+            letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
+          },
+          md: {
+            fontSize: theme.typography.variants["label-md"].fontSize,
+            lineHeight: theme.typography.variants["label-md"].lineHeight,
+            letterSpacing: theme.typography.variants["label-md"].letterSpacing,
+          },
+          lg: {
+            fontSize: theme.typography.variants["label-lg"].fontSize,
+            lineHeight: theme.typography.variants["label-lg"].lineHeight,
+            letterSpacing: theme.typography.variants["label-lg"].letterSpacing,
+          },
+        },
+      },
+    },
+  };
+});