@atlure/ui 0.4.0 → 0.6.0

package/src/components/slider/hooks/use-slider-drag.ts

@@ -0,0 +1,47 @@
+import { useCallback, useRef } from "react";
+
+import { type SliderScale, valueFromPosition } from "../utils";
+
+export interface SliderDragOptions {
+  scale: SliderScale;
+  trackLength: number;
+  value: number;
+  onValueChange?: (value: number) => void;
+  onValueCommit?: (value: number) => void;
+}
+
+export interface SliderDrag {
+  moveTo: (position: number) => number;
+  commit: () => number;
+}
+
+export function useSliderDrag({
+  scale,
+  trackLength,
+  value,
+  onValueChange,
+  onValueCommit,
+}: SliderDragOptions): SliderDrag {
+  const draggedValueRef = useRef<number | null>(null);
+
+  const moveTo = useCallback(
+    (position: number) => {
+      const nextValue = valueFromPosition(position, trackLength, scale);
+      draggedValueRef.current = nextValue;
+      onValueChange?.(nextValue);
+
+      return nextValue;
+    },
+    [trackLength, scale, onValueChange],
+  );
+
+  const commit = useCallback(() => {
+    const committedValue = draggedValueRef.current ?? value;
+    draggedValueRef.current = null;
+    onValueCommit?.(committedValue);
+
+    return committedValue;
+  }, [value, onValueCommit]);
+
+  return { moveTo, commit };
+}

package/src/components/slider/range-slider.tsx

@@ -0,0 +1,203 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  type AccessibilityActionEvent,
+  type LayoutChangeEvent,
+  Text,
+  View,
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { touchTargetHitSlopForSize } from "../../lib/touch-target";
+import {
+  SLIDER_THUMB_SIZE,
+  sliderContainerClassName,
+  sliderFillClassName,
+  sliderLabelClassName,
+  sliderThumbClassName,
+  sliderTrackClassName,
+} from "../../variants/slider-variants";
+import type { RangeSliderFormatLabel } from "./format-label";
+import {
+  clampRangeThumb,
+  positionFromValue,
+  type RangeThumb,
+  type RangeValue,
+  type SliderScale,
+  valueFromPosition,
+} from "./utils";
+
+export interface RangeSliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  value: RangeValue;
+  onValueChange?: (value: RangeValue) => void;
+  onValueCommit?: (value: RangeValue) => void;
+  accessibilityLabel: string;
+  formatLabel?: RangeSliderFormatLabel;
+}
+
+export function RangeSlider({
+  min,
+  max,
+  step = 1,
+  value,
+  onValueChange,
+  onValueCommit,
+  accessibilityLabel,
+  formatLabel,
+}: RangeSliderProps) {
+  const scale: SliderScale = { min, max, step };
+  const [trackLength, setTrackLength] = useState(0);
+  const lowerPosition = useSharedValue(0);
+  const upperPosition = useSharedValue(0);
+  const draggedRangeRef = useRef<RangeValue | null>(null);
+
+  const emitChange = useCallback(
+    (next: RangeValue) => {
+      draggedRangeRef.current = next;
+      lowerPosition.value = positionFromValue(next[0], trackLength, scale);
+      upperPosition.value = positionFromValue(next[1], trackLength, scale);
+      onValueChange?.(next);
+    },
+    [lowerPosition, upperPosition, onValueChange, scale, trackLength],
+  );
+
+  const moveThumb = useCallback(
+    (thumb: RangeThumb, position: number) => {
+      const candidate = valueFromPosition(position, trackLength, scale);
+      const current = draggedRangeRef.current ?? value;
+      const next = clampRangeThumb(current, thumb, candidate, scale);
+      emitChange(next);
+    },
+    [emitChange, scale, trackLength, value],
+  );
+
+  const commit = useCallback(() => {
+    const committed = draggedRangeRef.current ?? value;
+    draggedRangeRef.current = null;
+    onValueCommit?.(committed);
+  }, [onValueCommit, value]);
+
+  const onTrackLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const width = event.nativeEvent.layout.width;
+      setTrackLength(width);
+      lowerPosition.value = positionFromValue(value[0], width, scale);
+      upperPosition.value = positionFromValue(value[1], width, scale);
+    },
+    [lowerPosition, upperPosition, scale, value],
+  );
+
+  const buildGesture = (thumb: RangeThumb) =>
+    Gesture.Pan()
+      .minDistance(0)
+      .onStart((event) => {
+        runOnJS(moveThumb)(thumb, event.x);
+      })
+      .onUpdate((event) => {
+        runOnJS(moveThumb)(thumb, event.x);
+      })
+      .onEnd(() => {
+        runOnJS(commit)();
+      })
+      .onFinalize(() => {
+        runOnJS(commit)();
+      });
+
+  const lowerGesture = buildGesture("lower");
+  const upperGesture = buildGesture("upper");
+
+  const fillStyle = useAnimatedStyle(() => ({
+    left: lowerPosition.value,
+    width: Math.max(0, upperPosition.value - lowerPosition.value),
+  }));
+  const lowerThumbStyle = useAnimatedStyle(() => ({ left: lowerPosition.value }));
+  const upperThumbStyle = useAnimatedStyle(() => ({ left: upperPosition.value }));
+
+  const hitSlop = touchTargetHitSlopForSize(SLIDER_THUMB_SIZE);
+  const slopStyle = {
+    top: hitSlop,
+    bottom: hitSlop,
+    left: hitSlop,
+    right: hitSlop,
+  };
+
+  const adjust = useCallback(
+    (thumb: RangeThumb, actionName: string) => {
+      const [lower, upper] = value;
+      const delta = actionName === "increment" ? step : -step;
+      const candidate = (thumb === "lower" ? lower : upper) + delta;
+      const next = clampRangeThumb(value, thumb, candidate, scale);
+      if (next[0] === lower && next[1] === upper) return;
+      onValueChange?.(next);
+      onValueCommit?.(next);
+    },
+    [onValueChange, onValueCommit, scale, step, value],
+  );
+
+  const onLowerAction = useCallback(
+    (event: AccessibilityActionEvent) => adjust("lower", event.nativeEvent.actionName),
+    [adjust],
+  );
+  const onUpperAction = useCallback(
+    (event: AccessibilityActionEvent) => adjust("upper", event.nativeEvent.actionName),
+    [adjust],
+  );
+
+  return (
+    <View className={sliderContainerClassName}>
+      <View
+        accessibilityLabel={accessibilityLabel}
+        accessibilityValue={{ min, max, now: value[1] }}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value[1]}
+        onLayout={onTrackLayout}
+        className={sliderTrackClassName}
+      >
+        <Animated.View className={sliderFillClassName} style={fillStyle} />
+        <GestureDetector gesture={lowerGesture}>
+          <Animated.View
+            accessibilityRole="adjustable"
+            accessibilityLabel={`${accessibilityLabel} lower bound`}
+            accessibilityValue={{ min, max: value[1], now: value[0] }}
+            aria-valuemin={min}
+            aria-valuemax={value[1]}
+            aria-valuenow={value[0]}
+            accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
+            onAccessibilityAction={onLowerAction}
+            className={sliderThumbClassName}
+            style={lowerThumbStyle}
+            hitSlop={slopStyle}
+          />
+        </GestureDetector>
+        <GestureDetector gesture={upperGesture}>
+          <Animated.View
+            accessibilityRole="adjustable"
+            accessibilityLabel={`${accessibilityLabel} upper bound`}
+            accessibilityValue={{ min: value[0], max, now: value[1] }}
+            aria-valuemin={value[0]}
+            aria-valuemax={max}
+            aria-valuenow={value[1]}
+            accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
+            onAccessibilityAction={onUpperAction}
+            className={sliderThumbClassName}
+            style={upperThumbStyle}
+            hitSlop={slopStyle}
+          />
+        </GestureDetector>
+      </View>
+      {formatLabel ? (
+        <Text className={sliderLabelClassName}>
+          {`${formatLabel(value[0], "lower")} - ${formatLabel(value[1], "upper")}`}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/slider/slider.tsx

@@ -0,0 +1,148 @@
+import { useCallback, useState, type ReactNode } from "react";
+import {
+  type AccessibilityActionEvent,
+  type LayoutChangeEvent,
+  Text,
+  View,
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { touchTargetHitSlopForSize } from "../../lib/touch-target";
+import {
+  SLIDER_THUMB_SIZE,
+  sliderContainerClassName,
+  sliderFillClassName,
+  sliderLabelClassName,
+  sliderThumbClassName,
+  sliderTrackClassName,
+} from "../../variants/slider-variants";
+import type { SliderFormatLabel } from "./format-label";
+import { useSliderDrag } from "./hooks/use-slider-drag";
+import {
+  positionFromValue,
+  snapToStep,
+  type SliderScale,
+} from "./utils";
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+  onValueChange?: (value: number) => void;
+  onValueCommit?: (value: number) => void;
+  accessibilityLabel: string;
+  formatLabel?: SliderFormatLabel;
+}
+
+export function Slider({
+  min,
+  max,
+  step = 1,
+  value,
+  onValueChange,
+  onValueCommit,
+  accessibilityLabel,
+  formatLabel,
+}: SliderProps) {
+  const scale: SliderScale = { min, max, step };
+  const [trackLength, setTrackLength] = useState(0);
+  const clampedValue = snapToStep(value, scale);
+  const fillPosition = useSharedValue(0);
+
+  const drag = useSliderDrag({
+    scale,
+    trackLength,
+    value: clampedValue,
+    onValueChange: (next) => {
+      fillPosition.value = positionFromValue(next, trackLength, scale);
+      onValueChange?.(next);
+    },
+    onValueCommit,
+  });
+
+  const onTrackLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const width = event.nativeEvent.layout.width;
+      setTrackLength(width);
+      fillPosition.value = positionFromValue(clampedValue, width, scale);
+    },
+    [clampedValue, fillPosition, scale],
+  );
+
+  const gesture = Gesture.Pan()
+    .minDistance(0)
+    .onStart((event) => {
+      runOnJS(drag.moveTo)(event.x);
+    })
+    .onUpdate((event) => {
+      runOnJS(drag.moveTo)(event.x);
+    })
+    .onEnd(() => {
+      runOnJS(drag.commit)();
+    })
+    .onFinalize(() => {
+      runOnJS(drag.commit)();
+    });
+
+  const fillStyle = useAnimatedStyle(() => ({ width: fillPosition.value }));
+  const thumbStyle = useAnimatedStyle(() => ({ left: fillPosition.value }));
+
+  const onAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const next =
+        event.nativeEvent.actionName === "increment"
+          ? snapToStep(clampedValue + step, scale)
+          : event.nativeEvent.actionName === "decrement"
+            ? snapToStep(clampedValue - step, scale)
+            : clampedValue;
+
+      if (next === clampedValue) return;
+
+      onValueChange?.(next);
+      onValueCommit?.(next);
+    },
+    [clampedValue, onValueChange, onValueCommit, scale, step],
+  );
+
+  const hitSlop = touchTargetHitSlopForSize(SLIDER_THUMB_SIZE);
+
+  return (
+    <View className={sliderContainerClassName}>
+      <GestureDetector gesture={gesture}>
+        <View
+          accessibilityRole="adjustable"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityValue={{ min, max, now: clampedValue }}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={clampedValue}
+          accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
+          onAccessibilityAction={onAccessibilityAction}
+          onLayout={onTrackLayout}
+          className={sliderTrackClassName}
+        >
+          <Animated.View className={sliderFillClassName} style={fillStyle} />
+          <Animated.View
+            className={sliderThumbClassName}
+            style={thumbStyle}
+            hitSlop={{
+              top: hitSlop,
+              bottom: hitSlop,
+              left: hitSlop,
+              right: hitSlop,
+            }}
+          />
+        </View>
+      </GestureDetector>
+      {formatLabel ? (
+        <Text className={sliderLabelClassName}>{formatLabel(clampedValue) as ReactNode}</Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/slider/utils.ts

@@ -0,0 +1,57 @@
+export interface SliderScale {
+  min: number;
+  max: number;
+  step: number;
+}
+
+export type RangeValue = readonly [number, number];
+export type RangeThumb = "lower" | "upper";
+
+export function snapToStep(value: number, { min, max, step }: SliderScale): number {
+  if (Number.isNaN(value)) return min;
+  if (value <= min) return min;
+  if (value >= max) return max;
+  if (step <= 0) return value;
+
+  const snapped = min + Math.round((value - min) / step) * step;
+
+  return Math.min(Math.max(snapped, min), max);
+}
+
+export function valueFromPosition(
+  position: number,
+  trackLength: number,
+  scale: SliderScale,
+): number {
+  if (trackLength <= 0) return scale.min;
+
+  const ratio = Math.min(Math.max(position / trackLength, 0), 1);
+
+  return snapToStep(scale.min + ratio * (scale.max - scale.min), scale);
+}
+
+export function positionFromValue(
+  value: number,
+  trackLength: number,
+  { min, max }: SliderScale,
+): number {
+  if (max === min) return 0;
+
+  const ratio = (Math.min(Math.max(value, min), max) - min) / (max - min);
+
+  return ratio * trackLength;
+}
+
+export function clampRangeThumb(
+  range: RangeValue,
+  thumb: RangeThumb,
+  candidate: number,
+  scale: SliderScale,
+): RangeValue {
+  const snapped = snapToStep(candidate, scale);
+  const [lower, upper] = range;
+
+  return thumb === "lower"
+    ? [Math.min(snapped, upper), upper]
+    : [lower, Math.max(snapped, lower)];
+}

package/src/components/star-rating/star-rating.tsx

@@ -0,0 +1,98 @@
+import { Star, StarHalf } from "@atlure/icons";
+import { Pressable, View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlopForSize } from "../../lib/touch-target";
+import {
+  starRatingClassName,
+  starRatingEmptyClassName,
+  starRatingFilledClassName,
+  starRatingIconSize,
+  starRatingValueVariants,
+  type StarRatingSize,
+} from "../../variants/star-rating-variants";
+import { Text } from "../text/text";
+
+const halfStep = 0.5;
+
+export type StarFill = "full" | "half" | "empty";
+
+export function starFillAt(starNumber: number, value: number): StarFill {
+  if (value >= starNumber) {
+    return "full";
+  }
+
+  return value >= starNumber - halfStep ? "half" : "empty";
+}
+
+export interface StarRatingProps extends Omit<ViewProps, "children"> {
+  value: number;
+  max?: number;
+  size?: StarRatingSize;
+  showValue?: boolean;
+  isInteractive?: boolean;
+  onChange?: (value: number) => void;
+  rateAccessibilityLabel?: (starNumber: number, max: number) => string;
+}
+
+export function StarRating({
+  value,
+  max = 5,
+  size = "md",
+  showValue = false,
+  isInteractive = false,
+  onChange,
+  rateAccessibilityLabel = (starNumber, total) => `Rate ${starNumber} out of ${total}`,
+  accessibilityLabel,
+  className,
+  ...viewProps
+}: StarRatingProps) {
+  const starNumbers = Array.from({ length: max }, (_, index) => index + 1);
+  const pixelSize = starRatingIconSize[size];
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel ?? `${value} out of ${max}`}
+      className={cn(starRatingClassName, className)}
+      {...viewProps}
+    >
+      {starNumbers.map((starNumber) => {
+        const fill = starFillAt(starNumber, value);
+        const isPainted = fill !== "empty";
+        const StarGlyph = fill === "half" ? StarHalf : Star;
+
+        const glyph = (
+          <StarGlyph
+            className={isPainted ? starRatingFilledClassName : starRatingEmptyClassName}
+            fill={isPainted ? "currentColor" : "none"}
+            size={pixelSize}
+          />
+        );
+
+        if (!isInteractive) {
+          return (
+            <View key={starNumber} testID={`star-${fill}`}>
+              {glyph}
+            </View>
+          );
+        }
+
+        return (
+          <Pressable
+            key={starNumber}
+            accessibilityRole="button"
+            accessibilityLabel={rateAccessibilityLabel(starNumber, max)}
+            hitSlop={touchTargetHitSlopForSize(pixelSize)}
+            onPress={() => onChange?.(starNumber)}
+            testID={`star-${fill}`}
+          >
+            {glyph}
+          </Pressable>
+        );
+      })}
+      {showValue ? (
+        <Text className={starRatingValueVariants({ size })}>{value.toFixed(1)}</Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/switch/switch.tsx

@@ -1,15 +1,25 @@
-import { Pressable, type PressableProps, View } from "react-native";
+import { useEffect, useRef } from "react";
+import { Animated, Pressable, type PressableProps, View } from "react-native";
 
 import { cn } from "../../lib/cn";
-import { touchTargetHitSlop } from "../../lib/touch-target";
-import { switchThumbVariants, switchTrackVariants } from "../../variants/switch-variants";
+import { touchTargetHitSlopForSize } from "../../lib/touch-target";
+import {
+  switchThumbTravel,
+  switchThumbVariants,
+  switchTrackHeight,
+  switchTrackVariants,
+  type SwitchSize,
+} from "../../variants/switch-variants";
 import { Label } from "../label/label";
 
+const thumbTransitionDurationMs = 150;
+
 export interface SwitchProps
   extends Omit<PressableProps, "children" | "disabled" | "onPress" | "accessibilityState"> {
   isChecked: boolean;
   onValueChange: (isChecked: boolean) => void;
   label?: string;
+  size?: SwitchSize;
   isDisabled?: boolean;
 }
 
@@ -17,11 +27,27 @@ export function Switch({
   isChecked,
   onValueChange,
   label,
+  size = "md",
   isDisabled = false,
   accessibilityLabel,
   className,
   ...pressableProps
 }: SwitchProps) {
+  const travel = switchThumbTravel[size];
+  const thumbOffset = useRef(new Animated.Value(isChecked ? travel : 0)).current;
+
+  useEffect(() => {
+    const animation = Animated.timing(thumbOffset, {
+      toValue: isChecked ? travel : 0,
+      duration: thumbTransitionDurationMs,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [isChecked, travel, thumbOffset]);
+
   return (
     <Pressable
       accessibilityRole="switch"
@@ -30,13 +56,15 @@ export function Switch({
       aria-checked={isChecked}
       aria-disabled={isDisabled}
       disabled={isDisabled}
-      hitSlop={touchTargetHitSlop("md")}
+      hitSlop={touchTargetHitSlopForSize(switchTrackHeight[size])}
       onPress={() => onValueChange(!isChecked)}
       className={cn("flex-row items-center gap-sm", className)}
       {...pressableProps}
     >
-      <View className={switchTrackVariants({ isChecked, isDisabled })}>
-        <View className={switchThumbVariants({ isChecked })} />
+      <View className={switchTrackVariants({ size, isChecked, isDisabled })}>
+        <Animated.View style={{ transform: [{ translateX: thumbOffset }] }}>
+          <View className={switchThumbVariants({ size, isChecked })} />
+        </Animated.View>
       </View>
       {label ? <Label isDisabled={isDisabled}>{label}</Label> : null}
     </Pressable>

package/src/components/tabs/tabs-context.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+export interface TabsTriggerLayout {
+  x: number;
+  width: number;
+}
+
+export interface TabsControl {
+  activeValue: string;
+  hasBeenActivated: (value: string) => boolean;
+  select: (value: string) => void;
+  triggerLayouts: ReadonlyMap<string, TabsTriggerLayout>;
+  reportTriggerLayout: (value: string, layout: TabsTriggerLayout) => void;
+}
+
+const TabsContext = createContext<TabsControl | undefined>(undefined);
+
+export function TabsProvider({
+  control,
+  children,
+}: {
+  control: TabsControl;
+  children: ReactNode;
+}) {
+  return <TabsContext.Provider value={control}>{children}</TabsContext.Provider>;
+}
+
+export function useTabsControl(): TabsControl | undefined {
+  return useContext(TabsContext);
+}
+
+export { TabsContext };