react-native-terra-ui 0.10.0 → 0.10.2

package/src/components/divider/Divider.tsx

@@ -0,0 +1,164 @@
+import { Children, type ComponentRef, forwardRef, type ReactNode } from "react";
+import { StyleSheet as RNStyleSheet, View, type ViewProps } from "react-native";
+
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import type { ColorToken, SpacingKey } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { Text } from "../text";
+
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerLabelAlign = "start" | "center" | "end";
+
+/** `number | 'hairline'`, mirroring `Box`'s `borderWidth`. */
+export type DividerThickness = number | "hairline";
+
+export interface DividerProps extends ViewProps {
+  /** Rule direction. Defaults to `'horizontal'`. */
+  orientation?: DividerOrientation;
+  /** Rule color. Defaults to `'border.default'`. */
+  color?: ColorToken;
+  /**
+   * Rule weight. `'hairline'` is the thinnest line the display can draw —
+   * a true 1px rule at any density. Defaults to `'hairline'`.
+   */
+  thickness?: DividerThickness;
+  /**
+   * Symmetric margin on the cross axis — above and below a horizontal rule,
+   * either side of a vertical one. Defaults to `undefined` (no margin).
+   */
+  spacing?: SpacingKey;
+  /**
+   * Where the label sits along the rule. Ignored without `children`.
+   * Defaults to `'center'`.
+   */
+  labelAlign?: DividerLabelAlign;
+  /**
+   * An optional label, drawn with the rule running either side of it. Strings
+   * and numbers are wrapped in `Text` automatically. Horizontal only — a
+   * vertical divider ignores children.
+   */
+  children?: ReactNode;
+}
+
+function resolveThickness(thickness: DividerThickness): number {
+  return thickness === "hairline" ? RNStyleSheet.hairlineWidth : thickness;
+}
+
+function renderLabel(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (typeof child === "string") {
+      return child.trim().length > 0 ? (
+        <Text variant="label-sm" color="text.secondary">
+          {child}
+        </Text>
+      ) : null;
+    }
+    if (typeof child === "number") {
+      return (
+        <Text variant="label-sm" color="text.secondary">
+          {child}
+        </Text>
+      );
+    }
+    return child;
+  });
+}
+
+/**
+ * A rule that separates content.
+ *
+ * Decorative by default — screen readers skip it, because the separation it
+ * expresses is already carried by the content either side. A labelled divider
+ * keeps its label readable.
+ *
+ * @example
+ * <Divider />
+ * <Divider spacing="4" />
+ * <Divider orientation="vertical" />
+ * <Divider>OR</Divider>
+ */
+export const Divider = forwardRef<ComponentRef<typeof View>, DividerProps>(function Divider(
+  {
+    orientation = "horizontal",
+    color = "border.default",
+    thickness = "hairline",
+    spacing,
+    labelAlign = "center",
+    children,
+    style,
+    ...rest
+  },
+  ref
+) {
+  const { theme } = useUnistyles();
+  const isVertical = orientation === "vertical";
+  // A vertical rule has no room to run either side of a label, so children are
+  // dropped rather than silently laid out in a direction they were not written for.
+  const label = isVertical ? null : renderLabel(children);
+  const hasLabel = Children.count(label) > 0;
+
+  const lineColor = resolveThemeColor(color, theme);
+  const weight = resolveThickness(thickness);
+  const margin = spacing !== undefined ? theme.spacing[spacing] : undefined;
+
+  const line = {
+    backgroundColor: lineColor,
+    ...(isVertical ? { width: weight } : { height: weight }),
+  };
+
+  if (!hasLabel) {
+    return (
+      <View
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        aria-hidden
+        {...rest}
+        style={[
+          styles.rule,
+          line,
+          margin !== undefined
+            ? isVertical
+              ? { marginHorizontal: margin }
+              : { marginVertical: margin }
+            : null,
+          style,
+        ]}
+      />
+    );
+  }
+
+  // The label stays readable, so the wrapper is not hidden from accessibility —
+  // only the two rule segments are, and each is a bare decorative View.
+  return (
+    <View
+      ref={ref}
+      {...rest}
+      style={[styles.labelledRoot, margin !== undefined ? { marginVertical: margin } : null, style]}
+    >
+      {labelAlign !== "start" && <View style={[styles.labelledSegment, line]} />}
+      {label}
+      {labelAlign !== "end" && <View style={[styles.labelledSegment, line]} />}
+    </View>
+  );
+});
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create((theme) => ({
+  // Stretches across its parent's cross axis: full width in a column, full
+  // height in a row. The `line` style supplies the other dimension.
+  rule: {
+    alignSelf: "stretch",
+  },
+  labelledRoot: {
+    alignSelf: "stretch",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing["3"],
+  },
+  labelledSegment: {
+    flex: 1,
+  },
+}));

package/src/components/divider/index.ts

@@ -0,0 +1,7 @@
+export type {
+  DividerLabelAlign,
+  DividerOrientation,
+  DividerProps,
+  DividerThickness,
+} from "./Divider";
+export { Divider } from "./Divider";

package/src/components/index.ts

@@ -2,12 +2,14 @@ export * from "./avatar";
 export * from "./box";
 export * from "./button";
 export * from "./chip";
+export * from "./divider";
 export * from "./empty-state";
 export * from "./header";
 export * from "./icon";
 export * from "./image";
 export * from "./page-indicator";
 export * from "./portal";
+export * from "./pressable";
 export * from "./screen";
 export * from "./slot";
 export * from "./spinner";

package/src/components/pressable/index.ts

@@ -0,0 +1,5 @@
+export type {
+  PressableScaleAnimationConfig,
+  PressableScaleProps,
+} from "./variants/PressableScale";
+export { PressableScale } from "./variants/PressableScale";

package/src/components/pressable/variants/PressableScale/index.tsx

@@ -0,0 +1,166 @@
+import { type ComponentRef, forwardRef, useCallback, useEffect, useState } from "react";
+import type {
+  GestureResponderEvent,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { Pressable } from "react-native";
+
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  type WithSpringConfig,
+  type WithTimingConfig,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+/** A 250ms ease that reads as instant on press-in but never snaps back on release. */
+const DEFAULT_TIMING: WithTimingConfig = {
+  duration: 250,
+  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+};
+
+export type PressableScaleAnimationConfig =
+  | { type: "timing"; config?: WithTimingConfig }
+  | { type: "spring"; config?: WithSpringConfig };
+
+export interface PressableScaleProps extends Omit<PressableProps, "style" | "disabled"> {
+  /** Scale held at rest. Defaults to `1`. */
+  baseScale?: number;
+  /**
+   * Scale held while pressed. Values below `baseScale` shrink, above it grow.
+   * Defaults to `0.96`.
+   */
+  minScale?: number;
+  /**
+   * Opacity held while pressed, animated on the same curve as the scale.
+   * Defaults to `undefined` — opacity is left untouched so `style` keeps
+   * ownership of it.
+   */
+  pressedOpacity?: number;
+  /**
+   * Drives the press animation. Defaults to `{ type: 'timing' }` with a 250ms
+   * ease; pass `{ type: 'spring' }` for a springy release.
+   */
+  animationConfig?: PressableScaleAnimationConfig;
+  /** Blocks presses and holds the resting scale. Defaults to `false`. */
+  isDisabled?: boolean;
+  /**
+   * Styles for the pressable itself. The function form receives `pressed`
+   * only — `hovered` and `focused` are not tracked, because the animated
+   * style has to be merged outside of `Pressable`'s own callback.
+   */
+  style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+}
+
+/**
+ * A `Pressable` that animates a scale (and optionally an opacity) between its
+ * resting and pressed states, driven by a single shared `progress` value on the
+ * UI thread.
+ *
+ * Use it anywhere a press deserves physical feedback — cards, list rows, custom
+ * controls. `Button` renders one internally via its `animation` prop.
+ */
+export const PressableScale = forwardRef<ComponentRef<typeof Pressable>, PressableScaleProps>(
+  function PressableScale(
+    {
+      baseScale = 1,
+      minScale = 0.96,
+      pressedOpacity,
+      animationConfig,
+      isDisabled = false,
+      style,
+      onPressIn,
+      onPressOut,
+      ...rest
+    },
+    ref
+  ) {
+    const progress = useSharedValue(0);
+
+    // Only the function form of `style` needs a re-render to resolve; tracking
+    // `pressed` unconditionally would re-render every consumer on every touch.
+    const isStyleFunction = typeof style === "function";
+    const [pressed, setPressed] = useState(false);
+
+    const animateTo = useCallback(
+      (to: number) => {
+        if (animationConfig?.type === "spring") {
+          progress.value = withSpring(to, animationConfig.config);
+          return;
+        }
+        progress.value = withTiming(to, { ...DEFAULT_TIMING, ...animationConfig?.config });
+      },
+      [animationConfig, progress]
+    );
+
+    const handlePressIn = useCallback(
+      (event: GestureResponderEvent) => {
+        animateTo(1);
+        if (isStyleFunction) setPressed(true);
+        onPressIn?.(event);
+      },
+      [animateTo, isStyleFunction, onPressIn]
+    );
+
+    const handlePressOut = useCallback(
+      (event: GestureResponderEvent) => {
+        animateTo(0);
+        if (isStyleFunction) setPressed(false);
+        onPressOut?.(event);
+      },
+      [animateTo, isStyleFunction, onPressOut]
+    );
+
+    // A press that disables its own pressable — `onPress` flipping a button into
+    // a loading state — never gets an `onPressOut`, so release it here instead
+    // of leaving it stuck at the pressed scale.
+    useEffect(() => {
+      if (!isDisabled) return;
+      animateTo(0);
+      setPressed(false);
+    }, [isDisabled, animateTo]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const scale = interpolate(progress.value, [0, 1], [baseScale, minScale]);
+      if (pressedOpacity === undefined) {
+        return { transform: [{ scale }] };
+      }
+      return {
+        transform: [{ scale }],
+        opacity: interpolate(progress.value, [0, 1], [1, pressedOpacity]),
+      };
+    });
+
+    const pressableState: PressableStateCallbackType = { pressed };
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        disabled={isDisabled}
+        {...rest}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        // The animated style goes first so anything the caller sets — a disabled
+        // opacity, say — still wins.
+        style={[styles.root, animatedStyle, isStyleFunction ? style(pressableState) : style]}
+      />
+    );
+  }
+);
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+//
+// PressableScale has no style of its own — this stylesheet exists so the
+// Unistyles Babel plugin swaps the `Pressable` imported above for its
+// Unistyles-aware counterpart. Without it a themed style handed in through
+// `style` freezes at whichever theme was active when it was created.
+const styles = StyleSheet.create(() => ({ root: {} }));

package/src/components/toast/ToastProvider.tsx

@@ -1,207 +1,19 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
-import { Keyboard, Platform } from "react-native";
+import { createContext, useContext } from "react";
 
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import { ToastAnimatedItem } from "./parts/ToastAnimatedItem";
-import { DefaultToast } from "./Toast";
-import type {
-  ToastComponentProps,
-  ToastDuration,
-  ToastId,
-  ToastItem,
-  ToastManager,
-  ToastPlacement,
-  ToastProviderProps,
-  ToastShowConfig,
-  ToastShowOptions,
-  ToastShowOptionsWithComponent,
-} from "./types";
-import { setToastManager } from "./utils/controller";
-
-type ToastAction =
-  | { type: "show"; item: ToastItem }
-  | { type: "hide"; ids: ToastId[] }
-  | { type: "hideAll" }
-  | { type: "hidePlacement"; placement: ToastPlacement };
-
-const DEFAULT_DURATION = 4000;
-const DEFAULT_MAX_VISIBLE_TOASTS = 3;
+import { useToastManager } from "./hooks/use-toast-manager";
+import { ToastViewport } from "./parts/ToastViewport";
+import type { ToastManager, ToastProviderProps } from "./types";
 
 const ToastManagerContext = createContext<ToastManager | null>(null);
 
-function toastReducer(state: ToastItem[], action: ToastAction): ToastItem[] {
-  switch (action.type) {
-    case "show":
-      return [...state.filter((toast) => toast.id !== action.item.id), action.item];
-    case "hide":
-      return state.filter((toast) => !action.ids.some((id) => id === toast.id));
-    case "hideAll":
-      return [];
-    case "hidePlacement":
-      return state.filter((toast) => toast.placement !== action.placement);
-  }
-}
-
-function createDefaultToastComponent(config: ToastShowConfig, manager: ToastManager) {
-  return ({ id, hide }: ToastComponentProps) => (
-    <DefaultToast
-      id={id}
-      hide={(toastId) => hide(String(toastId))}
-      variant={config.variant}
-      label={config.label}
-      description={config.description}
-      icon={config.icon}
-      actionLabel={config.actionLabel}
-      showCloseButton={config.showCloseButton}
-      onActionPress={() => config.onActionPress?.(manager)}
-    />
-  );
-}
-
-function isCustomToast(options: ToastShowOptions): options is ToastShowOptionsWithComponent {
-  return typeof options === "object" && options !== null && "component" in options;
-}
-
-function normalizePlacement(placement: ToastPlacement | undefined, fallback: ToastPlacement): ToastPlacement {
-  return placement ?? fallback;
-}
-
-function normalizeDuration(duration: ToastDuration | undefined, fallback: number): ToastDuration {
-  return duration ?? fallback;
-}
-
-function toastId(counter: number): ToastId {
-  return `toast-${Date.now()}-${counter}`;
-}
-
 export function ToastProvider({
   children,
   defaultPlacement = "top",
-  defaultDuration = DEFAULT_DURATION,
-  maxVisibleToasts = DEFAULT_MAX_VISIBLE_TOASTS,
+  defaultDuration = 4000,
+  maxVisibleToasts = 3,
   offset,
 }: ToastProviderProps) {
-  const [toasts, dispatch] = useReducer(toastReducer, []);
-  const toastsRef = useRef<ToastItem[]>([]);
-  const counterRef = useRef(0);
-  const timeoutsRef = useRef<Map<ToastId, ReturnType<typeof setTimeout>>>(new Map());
-
-  useEffect(() => {
-    toastsRef.current = toasts;
-  }, [toasts]);
-
-  const clearToastTimeout = useCallback((id: ToastId) => {
-    const timeout = timeoutsRef.current.get(id);
-    if (timeout) clearTimeout(timeout);
-    timeoutsRef.current.delete(id);
-  }, []);
-
-  const hide = useCallback<ToastManager["hide"]>(
-    (id) => {
-      if (id === "all") {
-        for (const toast of toastsRef.current) {
-          clearToastTimeout(toast.id);
-          toast.onHide?.();
-        }
-        toastsRef.current = [];
-        dispatch({ type: "hideAll" });
-        return;
-      }
-      const lastToastId = toastsRef.current[toastsRef.current.length - 1]?.id;
-      const ids = id === undefined ? (lastToastId ? [lastToastId] : []) : Array.isArray(id) ? id : [id];
-
-      if (ids.length === 0) return;
-
-      for (const toastId of ids) {
-        clearToastTimeout(toastId);
-        toastsRef.current.find((toast) => toast.id === toastId)?.onHide?.();
-      }
-      toastsRef.current = toastsRef.current.filter((toast) => !ids.some((toastId) => toastId === toast.id));
-      dispatch({ type: "hide", ids });
-    },
-    [clearToastTimeout]
-  );
-
-  const managerRef = useRef<ToastManager>({
-    show: () => "",
-    hide,
-  });
-
-  const show = useCallback<ToastManager["show"]>(
-    (options) => {
-      const nextId =
-        typeof options === "object" && options !== null && "id" in options
-          ? (options.id ?? toastId(counterRef.current++))
-          : toastId(counterRef.current++);
-
-      const item =
-        typeof options === "string"
-          ? {
-              id: nextId,
-              component: createDefaultToastComponent({ label: options }, managerRef.current),
-              duration: defaultDuration,
-              placement: defaultPlacement,
-            }
-          : isCustomToast(options)
-            ? {
-                id: nextId,
-                component: options.component,
-                duration: normalizeDuration(options.duration, defaultDuration),
-                placement: normalizePlacement(options.placement, defaultPlacement),
-                onHide: options.onHide,
-              }
-            : {
-                id: nextId,
-                component: createDefaultToastComponent(options, managerRef.current),
-                duration: normalizeDuration(options.duration, defaultDuration),
-                placement: normalizePlacement(options.placement, defaultPlacement),
-                onHide: options.onHide,
-              };
-
-      const oppositePlacement = item.placement === "top" ? "bottom" : "top";
-      const oppositeToasts = toastsRef.current.filter((t) => t.placement === oppositePlacement);
-      if (oppositeToasts.length > 0) {
-        for (const t of oppositeToasts) {
-          clearToastTimeout(t.id);
-          t.onHide?.();
-        }
-        toastsRef.current = toastsRef.current.filter((t) => t.placement !== oppositePlacement);
-        dispatch({ type: "hidePlacement", placement: oppositePlacement });
-      }
-
-      clearToastTimeout(item.id);
-      toastsRef.current = [...toastsRef.current.filter((toast) => toast.id !== item.id), item];
-      dispatch({ type: "show", item });
-      if (typeof options === "object" && options !== null && "onShow" in options) {
-        options.onShow?.();
-      }
-
-      if (item.duration !== "persistent" && Number.isFinite(item.duration) && item.duration > 0) {
-        const timeout = setTimeout(() => hide(item.id), item.duration);
-        timeoutsRef.current.set(item.id, timeout);
-      }
-
-      return item.id;
-    },
-    [clearToastTimeout, defaultDuration, defaultPlacement, hide]
-  );
-
-  const manager = useMemo<ToastManager>(() => ({ show, hide }), [show, hide]);
-  managerRef.current = manager;
-
-  useEffect(() => {
-    setToastManager(manager);
-    return () => {
-      setToastManager(null);
-      for (const timeout of timeoutsRef.current.values()) {
-        clearTimeout(timeout);
-      }
-      timeoutsRef.current.clear();
-    };
-  }, [manager]);
-
+  const { toasts, manager } = useToastManager(defaultPlacement, defaultDuration);
   const topToasts = toasts.filter((toast) => toast.placement === "top");
   const bottomToasts = toasts.filter((toast) => toast.placement === "bottom");
 
@@ -226,99 +38,6 @@ export function ToastProvider({
   );
 }
 
-interface ToastViewportProps {
-  placement: ToastPlacement;
-  toasts: ToastItem[];
-  manager: ToastManager;
-  maxVisibleToasts: number;
-  offset?: ToastProviderProps["offset"];
-}
-
-function ToastViewport({ placement, toasts, manager, maxVisibleToasts, offset }: ToastViewportProps) {
-  const safeAreaInsets = useSafeAreaInsets();
-  const heights = useSharedValue<Record<ToastId, number>>({});
-  const total = useSharedValue(0);
-  const keyboardHeight = useSharedValue(0);
-
-  const baseBottom = offset?.bottom ?? safeAreaInsets.bottom + (Platform.OS === "ios" ? 6 : 12);
-  const baseTop = offset?.top ?? safeAreaInsets.top + (Platform.OS === "ios" ? 0 : 12);
-
-  useEffect(() => {
-    if (placement !== "bottom") return;
-    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
-    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
-    const showSub = Keyboard.addListener(showEvent, (e) => {
-      keyboardHeight.value = withTiming(e.endCoordinates.height);
-    });
-    const hideSub = Keyboard.addListener(hideEvent, () => {
-      keyboardHeight.value = withTiming(0);
-    });
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, [keyboardHeight, placement]);
-
-  const gap = Platform.OS === "ios" ? 6 : 12;
-
-  const keyboardStyle = useAnimatedStyle(() => {
-    if (placement === "top") return { top: baseTop };
-    if (keyboardHeight.value > 0) {
-      return { bottom: keyboardHeight.value + gap };
-    }
-    return { bottom: baseBottom };
-  });
-
-  useEffect(() => {
-    total.value = toasts.length;
-    const activeIds = new Set(toasts.map((toast) => toast.id));
-    const nextHeights: Record<ToastId, number> = {};
-    for (const [id, height] of Object.entries(heights.value)) {
-      if (activeIds.has(id)) {
-        nextHeights[id] = height;
-      }
-    }
-    heights.value = nextHeights;
-  }, [heights, toasts, total]);
-
-  if (toasts.length === 0) return null;
-
-  return (
-    <Animated.View
-      pointerEvents="box-none"
-      style={[
-        {
-          position: "absolute",
-          zIndex: 9999,
-          elevation: 9999,
-          left: offset?.left ?? safeAreaInsets.left + 12,
-          right: offset?.right ?? safeAreaInsets.right + 12,
-        },
-        keyboardStyle,
-      ]}
-    >
-      {toasts.map((toast, index) => (
-        <ToastAnimatedItem
-          key={toast.id}
-          heights={heights}
-          id={toast.id}
-          index={index}
-          maxVisibleToasts={maxVisibleToasts}
-          placement={placement}
-          total={total}
-        >
-          {toast.component({
-            id: toast.id,
-            index,
-            hide: manager.hide,
-            show: manager.show,
-          })}
-        </ToastAnimatedItem>
-      ))}
-    </Animated.View>
-  );
-}
-
 export function useToast(): ToastManager {
   const manager = useContext(ToastManagerContext);
   if (!manager) {