@atlure/ui 0.4.0 → 0.6.0

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useEffect, useMemo, useRef, type ReactNode } from "react";
+import { Pressable, type PressableProps, View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlopForSize } from "../../lib/touch-target";
+import {
+  radioGroupDotClassName,
+  radioGroupIndicatorSize,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupVariants,
+} from "../../variants/radio-group-variants";
+import { Label } from "../label/label";
+import { RadioGroupProvider, useRadioGroupControl } from "./radio-group-context";
+
+const previousKeys = new Set(["ArrowUp", "ArrowLeft"]);
+const nextKeys = new Set(["ArrowDown", "ArrowRight"]);
+
+interface KeyboardEventLike {
+  key: string;
+  preventDefault: () => void;
+}
+
+function webKeyboardProps(onKeyDown: (event: KeyboardEventLike) => void): PressableProps {
+  return { onKeyDown } as PressableProps;
+}
+
+export interface RadioGroupProps extends Omit<ViewProps, "accessibilityRole"> {
+  value?: string;
+  onValueChange: (value: string) => void;
+  isDisabled?: boolean;
+  children: ReactNode;
+}
+
+export function RadioGroup({
+  value,
+  onValueChange,
+  isDisabled = false,
+  className,
+  children,
+  ...viewProps
+}: RadioGroupProps) {
+  const orderedValues = useRef<string[]>([]);
+
+  const registerValue = useCallback((itemValue: string) => {
+    orderedValues.current = [...orderedValues.current, itemValue];
+
+    return () => {
+      orderedValues.current = orderedValues.current.filter((entry) => entry !== itemValue);
+    };
+  }, []);
+
+  const selectAdjacent = useCallback(
+    (fromValue: string, direction: 1 | -1) => {
+      const values = orderedValues.current;
+      const currentIndex = values.indexOf(fromValue);
+
+      if (currentIndex === -1) {
+        return;
+      }
+
+      const nextValue = values[(currentIndex + direction + values.length) % values.length];
+
+      if (nextValue !== undefined) {
+        onValueChange(nextValue);
+      }
+    },
+    [onValueChange],
+  );
+
+  const control = useMemo(
+    () => ({
+      selectedValue: value,
+      isDisabled,
+      select: onValueChange,
+      registerValue,
+      selectAdjacent,
+    }),
+    [value, isDisabled, onValueChange, registerValue, selectAdjacent],
+  );
+
+  return (
+    <View
+      accessibilityRole="radiogroup"
+      role="radiogroup"
+      className={cn(radioGroupVariants({ isDisabled }), className)}
+      {...viewProps}
+    >
+      <RadioGroupProvider control={control}>{children}</RadioGroupProvider>
+    </View>
+  );
+}
+
+export interface RadioGroupItemProps
+  extends Omit<
+    PressableProps,
+    "children" | "disabled" | "onPress" | "accessibilityState" | "accessibilityRole"
+  > {
+  value: string;
+  label?: string;
+  isDisabled?: boolean;
+}
+
+export function RadioGroupItem({
+  value,
+  label,
+  isDisabled = false,
+  accessibilityLabel,
+  className,
+  ...pressableProps
+}: RadioGroupItemProps) {
+  const control = useRadioGroupControl();
+
+  useEffect(() => control?.registerValue(value), [control, value]);
+
+  const isSelected = control?.selectedValue === value;
+  const isItemDisabled = isDisabled || control?.isDisabled === true;
+
+  const handleKeyDown = (event: KeyboardEventLike) => {
+    const direction = previousKeys.has(event.key) ? -1 : nextKeys.has(event.key) ? 1 : undefined;
+
+    if (direction === undefined) {
+      return;
+    }
+
+    event.preventDefault();
+    control?.selectAdjacent(value, direction);
+  };
+
+  return (
+    <Pressable
+      accessibilityRole="radio"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ checked: isSelected, disabled: isItemDisabled }}
+      aria-checked={isSelected}
+      aria-disabled={isItemDisabled}
+      disabled={isItemDisabled}
+      hitSlop={touchTargetHitSlopForSize(radioGroupIndicatorSize)}
+      onPress={() => control?.select(value)}
+      className={cn(radioGroupItemVariants({ isDisabled: isItemDisabled }), className)}
+      {...webKeyboardProps(handleKeyDown)}
+      {...pressableProps}
+    >
+      <View className={radioGroupIndicatorVariants({ isSelected })}>
+        {isSelected ? <View className={radioGroupDotClassName} /> : null}
+      </View>
+      {label ? <Label isDisabled={isItemDisabled}>{label}</Label> : null}
+    </Pressable>
+  );
+}

package/src/components/screen-header/screen-header.tsx

@@ -0,0 +1,62 @@
+import { ChevronLeft, iconSize } from "@atlure/icons";
+import type { ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  screenHeaderActionsClassName,
+  screenHeaderSubtitleClassName,
+  screenHeaderTextClassName,
+  screenHeaderTitleVariants,
+  screenHeaderVariants,
+  type ScreenHeaderVariantProps,
+} from "../../variants/screen-header-variants";
+import { IconButton } from "../icon-button/icon-button";
+import { Text } from "../text/text";
+
+export const SCREEN_HEADER_BACK_LABEL = "Go back";
+
+export interface ScreenHeaderProps extends ViewProps {
+  title: string;
+  subtitle?: string;
+  variant?: NonNullable<ScreenHeaderVariantProps["variant"]>;
+  onBack?: () => void;
+  backAccessibilityLabel?: string;
+  right?: ReactNode;
+  topInset?: number;
+}
+
+export function ScreenHeader({
+  title,
+  subtitle,
+  variant = "default",
+  onBack,
+  backAccessibilityLabel = SCREEN_HEADER_BACK_LABEL,
+  right,
+  topInset = 0,
+  className,
+  style,
+  ...viewProps
+}: ScreenHeaderProps) {
+  return (
+    <View
+      className={cn(screenHeaderVariants({ variant }), className)}
+      style={[{ paddingTop: topInset }, style]}
+      {...viewProps}
+    >
+      {onBack ? (
+        <IconButton
+          accessibilityLabel={backAccessibilityLabel}
+          icon={<ChevronLeft size={iconSize.md} />}
+          onPress={onBack}
+          variant="ghost"
+        />
+      ) : null}
+      <View className={screenHeaderTextClassName}>
+        <Text className={screenHeaderTitleVariants({ variant })}>{title}</Text>
+        {subtitle ? <Text className={screenHeaderSubtitleClassName}>{subtitle}</Text> : null}
+      </View>
+      {right ? <View className={screenHeaderActionsClassName}>{right}</View> : null}
+    </View>
+  );
+}

package/src/components/segmented-control/segmented-control.tsx

@@ -0,0 +1,67 @@
+import { Pressable, View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  segmentedControlClassName,
+  segmentedControlLabelVariants,
+  segmentedControlSegmentVariants,
+} from "../../variants/segmented-control-variants";
+import { Text } from "../text/text";
+
+export interface SegmentedControlOption {
+  value: string;
+  label: string;
+  isDisabled?: boolean;
+}
+
+export interface SegmentedControlProps extends Omit<ViewProps, "children"> {
+  accessibilityLabel: string;
+  options: readonly SegmentedControlOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  isDisabled?: boolean;
+}
+
+export function SegmentedControl({
+  accessibilityLabel,
+  options,
+  value,
+  onValueChange,
+  isDisabled = false,
+  className,
+  ...viewProps
+}: SegmentedControlProps) {
+  return (
+    <View
+      accessibilityRole="tablist"
+      role="tablist"
+      accessibilityLabel={accessibilityLabel}
+      className={cn(segmentedControlClassName, className)}
+      {...viewProps}
+    >
+      {options.map((option) => {
+        const isSelected = option.value === value;
+        const isSegmentDisabled = isDisabled || option.isDisabled === true;
+
+        return (
+          <Pressable
+            key={option.value}
+            accessibilityRole="tab"
+            accessibilityLabel={option.label}
+            accessibilityState={{ selected: isSelected, disabled: isSegmentDisabled }}
+            aria-selected={isSelected}
+            aria-disabled={isSegmentDisabled}
+            disabled={isSegmentDisabled}
+            onPress={() => onValueChange(option.value)}
+            className={segmentedControlSegmentVariants({
+              isSelected,
+              isDisabled: isSegmentDisabled,
+            })}
+          >
+            <Text className={segmentedControlLabelVariants({ isSelected })}>{option.label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/select/select.tsx

@@ -0,0 +1,134 @@
+import { Check, iconSize } from "@atlure/icons";
+import { Pressable, ScrollView, View } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import { useSheet } from "../../lib/use-sheet";
+import { inputVariants, type InputVariantProps } from "../../variants/input-variants";
+import {
+  selectItemLabelVariants,
+  selectItemVariants,
+  selectOptionListClassName,
+  selectTriggerClassName,
+  selectValueVariants,
+} from "../../variants/select-variants";
+import { Sheet } from "../sheet/sheet";
+import { Text } from "../text/text";
+
+export type SelectValue = string | number;
+
+export interface SelectOption<TValue extends SelectValue> {
+  value: TValue;
+  label: string;
+  isDisabled?: boolean;
+}
+
+export interface SelectItemProps {
+  label: string;
+  isSelected: boolean;
+  isDisabled?: boolean;
+  onPress: () => void;
+}
+
+export function SelectItem({ label, isSelected, isDisabled = false, onPress }: SelectItemProps) {
+  return (
+    <Pressable
+      accessibilityRole="menuitem"
+      accessibilityLabel={label}
+      accessibilityState={{ selected: isSelected, disabled: isDisabled }}
+      aria-selected={isSelected}
+      aria-disabled={isDisabled}
+      disabled={isDisabled}
+      hitSlop={touchTargetHitSlop("md")}
+      onPress={onPress}
+      className={selectItemVariants({ isDisabled })}
+    >
+      <Text className={selectItemLabelVariants({ isSelected })}>{label}</Text>
+      {isSelected ? <Check size={iconSize.md} /> : null}
+    </Pressable>
+  );
+}
+
+export interface SelectProps<TValue extends SelectValue> {
+  options: readonly SelectOption<TValue>[];
+  value: NoInfer<TValue> | null;
+  onValueChange: (value: NoInfer<TValue>) => void;
+  placeholder: string;
+  accessibilityLabel: string;
+  backdropAccessibilityLabel: string;
+  size?: NonNullable<InputVariantProps["size"]>;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  snapPoints?: readonly number[];
+  bottomInset?: number;
+  className?: string;
+}
+
+export function Select<TValue extends SelectValue>({
+  options,
+  value,
+  onValueChange,
+  placeholder,
+  accessibilityLabel,
+  backdropAccessibilityLabel,
+  size = "md",
+  isDisabled = false,
+  isInvalid = false,
+  snapPoints,
+  bottomInset,
+  className,
+}: SelectProps<TValue>) {
+  const sheet = useSheet();
+  const selectedOption = options.find((option) => option.value === value) ?? null;
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="combobox"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: isDisabled, expanded: sheet.isOpen }}
+        accessibilityValue={{ text: selectedOption?.label ?? placeholder }}
+        aria-disabled={isDisabled}
+        aria-expanded={sheet.isOpen}
+        aria-invalid={isInvalid}
+        disabled={isDisabled}
+        hitSlop={touchTargetHitSlop(size)}
+        onPress={sheet.open}
+        className={cn(
+          inputVariants({ size, isInvalid, isDisabled }),
+          selectTriggerClassName,
+          className,
+        )}
+      >
+        <Text className={selectValueVariants({ isPlaceholder: selectedOption === null })}>
+          {selectedOption?.label ?? placeholder}
+        </Text>
+      </Pressable>
+      <Sheet
+        isOpen={sheet.isOpen}
+        onClose={sheet.close}
+        accessibilityLabel={accessibilityLabel}
+        backdropAccessibilityLabel={backdropAccessibilityLabel}
+        snapPoints={snapPoints}
+        bottomInset={bottomInset}
+      >
+        <ScrollView className={selectOptionListClassName}>
+          <View accessibilityRole="menu">
+            {options.map((option) => (
+              <SelectItem
+                key={option.value}
+                label={option.label}
+                isSelected={option.value === value}
+                isDisabled={option.isDisabled}
+                onPress={() => {
+                  onValueChange(option.value);
+                  sheet.close();
+                }}
+              />
+            ))}
+          </View>
+        </ScrollView>
+      </Sheet>
+    </>
+  );
+}

package/src/components/settings-row/settings-row.tsx

@@ -0,0 +1,52 @@
+import { useId, type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  settingsRowControlClassName,
+  settingsRowTextClassName,
+  settingsRowVariants,
+} from "../../variants/settings-row-variants";
+import { Text } from "../text/text";
+
+export interface SettingsRowProps extends ViewProps {
+  title: string;
+  description?: string;
+  control: ReactNode;
+  isDisabled?: boolean;
+}
+
+export function SettingsRow({
+  title,
+  description,
+  control,
+  isDisabled = false,
+  className,
+  ...viewProps
+}: SettingsRowProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+
+  return (
+    <View className={cn(settingsRowVariants({ isDisabled }), className)} {...viewProps}>
+      <View className={settingsRowTextClassName}>
+        <Text nativeID={titleId} variant="body">
+          {title}
+        </Text>
+        {description ? (
+          <Text nativeID={descriptionId} tone="muted" variant="bodySm">
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      <View
+        accessibilityLabelledBy={titleId}
+        aria-labelledby={titleId}
+        aria-describedby={description ? descriptionId : undefined}
+        className={settingsRowControlClassName}
+      >
+        {control}
+      </View>
+    </View>
+  );
+}

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,139 @@
+import { spacing } from "@atlure/tokens";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Animated,
+  BackHandler,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+  View,
+} from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  sheetBackdropClassName,
+  sheetContainerClassName,
+  sheetContentClassName,
+  sheetHandleClassName,
+} from "../../variants/sheet-variants";
+import { useReducedMotion } from "../skeleton/hooks/use-reduced-motion";
+import {
+  DEFAULT_SHEET_SNAP_POINTS,
+  resolveSnapHeights,
+  resolveSnapRelease,
+  sheetAnimationDuration,
+  SHEET_PAN_ACTIVATION_DISTANCE,
+} from "./utils";
+
+export interface SheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  backdropAccessibilityLabel: string;
+  accessibilityLabel?: string;
+  snapPoints?: readonly number[];
+  bottomInset?: number;
+  className?: string;
+  children: ReactNode;
+}
+
+export function Sheet({
+  isOpen,
+  onClose,
+  backdropAccessibilityLabel,
+  accessibilityLabel,
+  snapPoints = DEFAULT_SHEET_SNAP_POINTS,
+  bottomInset = 0,
+  className,
+  children,
+}: SheetProps) {
+  const { height: windowHeight } = useWindowDimensions();
+  const isReducedMotion = useReducedMotion();
+  const [activeSnapIndex, setActiveSnapIndex] = useState(0);
+  const translateY = useRef(new Animated.Value(windowHeight)).current;
+
+  const snapHeights = useMemo(
+    () => resolveSnapHeights(snapPoints, windowHeight),
+    [snapPoints, windowHeight],
+  );
+  const sheetHeight = snapHeights[activeSnapIndex] ?? snapHeights[0];
+  const animationDuration = sheetAnimationDuration(isReducedMotion);
+
+  useEffect(() => {
+    Animated.timing(translateY, {
+      toValue: isOpen ? 0 : windowHeight,
+      duration: animationDuration,
+      useNativeDriver: true,
+    }).start();
+  }, [isOpen, animationDuration, translateY, windowHeight]);
+
+  useEffect(() => {
+    if (!isOpen || Platform.OS !== "android") return;
+
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      onClose();
+      return true;
+    });
+
+    return () => subscription.remove();
+  }, [isOpen, onClose]);
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_event, gesture) =>
+          Math.abs(gesture.dy) > SHEET_PAN_ACTIVATION_DISTANCE,
+        onPanResponderMove: (_event, gesture) => {
+          if (gesture.dy > 0) translateY.setValue(gesture.dy);
+        },
+        onPanResponderRelease: (_event, gesture) => {
+          const release = resolveSnapRelease({
+            activeIndex: activeSnapIndex,
+            dragDistance: gesture.dy,
+            snapHeights,
+          });
+
+          if (release.shouldDismiss) {
+            onClose();
+            return;
+          }
+
+          setActiveSnapIndex(release.index);
+          Animated.timing(translateY, {
+            toValue: 0,
+            duration: animationDuration,
+            useNativeDriver: true,
+          }).start();
+        },
+      }),
+    [activeSnapIndex, animationDuration, onClose, snapHeights, translateY],
+  );
+
+  return (
+    <Modal visible={isOpen} transparent animationType="none" onRequestClose={onClose}>
+      <View className={sheetContainerClassName}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          className={sheetBackdropClassName}
+          onPress={onClose}
+        />
+        <Animated.View
+          accessibilityViewIsModal
+          accessibilityLabel={accessibilityLabel}
+          className={cn(sheetContentClassName, className)}
+          style={{
+            height: sheetHeight,
+            paddingBottom: spacing.md + bottomInset,
+            transform: [{ translateY }],
+          }}
+          {...panResponder.panHandlers}
+        >
+          <View className={sheetHandleClassName} />
+          {children}
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}

package/src/components/sheet/utils.ts

@@ -0,0 +1,55 @@
+export const SHEET_ANIMATION_DURATION = 220;
+export const SHEET_DISMISS_HEIGHT_RATIO = 0.7;
+export const SHEET_PAN_ACTIVATION_DISTANCE = 8;
+export const DEFAULT_SHEET_SNAP_POINTS = [0.5] as const;
+
+export function sheetAnimationDuration(isReducedMotion: boolean): number {
+  return isReducedMotion ? 0 : SHEET_ANIMATION_DURATION;
+}
+
+export function resolveSnapHeights(
+  snapPoints: readonly number[],
+  containerHeight: number,
+): number[] {
+  const heights = snapPoints
+    .filter((point) => point > 0)
+    .map((point) => Math.min(point, 1) * containerHeight)
+    .sort((left, right) => left - right);
+
+  return heights.length > 0 ? heights : [containerHeight * DEFAULT_SHEET_SNAP_POINTS[0]];
+}
+
+export interface SnapRelease {
+  index: number;
+  shouldDismiss: boolean;
+}
+
+export function resolveSnapRelease({
+  activeIndex,
+  dragDistance,
+  snapHeights,
+  dismissHeightRatio = SHEET_DISMISS_HEIGHT_RATIO,
+}: {
+  activeIndex: number;
+  dragDistance: number;
+  snapHeights: readonly number[];
+  dismissHeightRatio?: number;
+}): SnapRelease {
+  const smallestHeight = snapHeights[0] ?? 0;
+  const currentHeight = snapHeights[activeIndex] ?? smallestHeight;
+  const releasedHeight = currentHeight - dragDistance;
+
+  if (releasedHeight < smallestHeight * dismissHeightRatio) {
+    return { index: activeIndex, shouldDismiss: true };
+  }
+
+  const nearestIndex = snapHeights.reduce(
+    (nearest, height, index) =>
+      Math.abs(height - releasedHeight) < Math.abs((snapHeights[nearest] ?? 0) - releasedHeight)
+        ? index
+        : nearest,
+    0,
+  );
+
+  return { index: nearestIndex, shouldDismiss: false };
+}

package/src/components/slider/format-label.ts

@@ -0,0 +1,3 @@
+export type SliderFormatLabel = (value: number) => string;
+
+export type RangeSliderFormatLabel = (value: number, thumb: "lower" | "upper") => string;