@atlure/ui 0.4.0 → 0.6.0

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import {
+  Animated,
+  Pressable,
+  type PressableProps,
+  ScrollView,
+  View,
+  type ViewProps,
+} from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  tabsContentVariants,
+  tabsIndicatorClassName,
+  tabsIndicatorHeight,
+  tabsListClassName,
+  tabsTriggerLabelVariants,
+  tabsTriggerVariants,
+} from "../../variants/tabs-variants";
+import { Text } from "../text/text";
+import { TabsProvider, useTabsControl, type TabsTriggerLayout } from "./tabs-context";
+
+const indicatorTransitionDurationMs = 180;
+
+export interface TabsProps extends Omit<ViewProps, "children"> {
+  value?: string;
+  defaultValue: string;
+  onValueChange?: (value: string) => void;
+  children: ReactNode;
+}
+
+export function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+  ...viewProps
+}: TabsProps) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const activeValue = value ?? uncontrolledValue;
+
+  const [activatedValues, setActivatedValues] = useState<ReadonlySet<string>>(
+    () => new Set([activeValue]),
+  );
+  const [triggerLayouts, setTriggerLayouts] = useState<ReadonlyMap<string, TabsTriggerLayout>>(
+    () => new Map(),
+  );
+
+  useEffect(() => {
+    setActivatedValues((previous) =>
+      previous.has(activeValue) ? previous : new Set(previous).add(activeValue),
+    );
+  }, [activeValue]);
+
+  const select = useCallback(
+    (nextValue: string) => {
+      if (value === undefined) {
+        setUncontrolledValue(nextValue);
+      }
+
+      onValueChange?.(nextValue);
+    },
+    [value, onValueChange],
+  );
+
+  const reportTriggerLayout = useCallback((triggerValue: string, layout: TabsTriggerLayout) => {
+    setTriggerLayouts((previous) => {
+      const existing = previous.get(triggerValue);
+
+      if (existing?.x === layout.x && existing.width === layout.width) {
+        return previous;
+      }
+
+      return new Map(previous).set(triggerValue, layout);
+    });
+  }, []);
+
+  const control = useMemo(
+    () => ({
+      activeValue,
+      hasBeenActivated: (candidate: string) => activatedValues.has(candidate),
+      select,
+      triggerLayouts,
+      reportTriggerLayout,
+    }),
+    [activeValue, activatedValues, select, triggerLayouts, reportTriggerLayout],
+  );
+
+  return (
+    <View className={cn("flex-1 flex-col", className)} {...viewProps}>
+      <TabsProvider control={control}>{children}</TabsProvider>
+    </View>
+  );
+}
+
+export interface TabsListProps extends Omit<ViewProps, "children"> {
+  accessibilityLabel: string;
+  isScrollable?: boolean;
+  children: ReactNode;
+}
+
+export function TabsList({
+  accessibilityLabel,
+  isScrollable = true,
+  className,
+  children,
+  ...viewProps
+}: TabsListProps) {
+  const control = useTabsControl();
+  const indicatorOffset = useRef(new Animated.Value(0)).current;
+  const indicatorWidth = useRef(new Animated.Value(0)).current;
+
+  const activeLayout = control?.triggerLayouts.get(control.activeValue);
+
+  useEffect(() => {
+    if (activeLayout === undefined) {
+      return;
+    }
+
+    const animation = Animated.parallel([
+      Animated.timing(indicatorOffset, {
+        toValue: activeLayout.x,
+        duration: indicatorTransitionDurationMs,
+        useNativeDriver: false,
+      }),
+      Animated.timing(indicatorWidth, {
+        toValue: activeLayout.width,
+        duration: indicatorTransitionDurationMs,
+        useNativeDriver: false,
+      }),
+    ]);
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [activeLayout, indicatorOffset, indicatorWidth]);
+
+  const list = (
+    <View
+      accessibilityRole="tablist"
+      role="tablist"
+      accessibilityLabel={accessibilityLabel}
+      className={cn(tabsListClassName, className)}
+      {...viewProps}
+    >
+      {children}
+      <Animated.View
+        style={{
+          position: "absolute",
+          bottom: 0,
+          height: tabsIndicatorHeight,
+          left: indicatorOffset,
+          width: indicatorWidth,
+        }}
+      >
+        <View className={tabsIndicatorClassName} />
+      </Animated.View>
+    </View>
+  );
+
+  if (!isScrollable) {
+    return list;
+  }
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      {list}
+    </ScrollView>
+  );
+}
+
+export interface TabsTriggerProps
+  extends Omit<
+    PressableProps,
+    "children" | "disabled" | "onPress" | "accessibilityState" | "accessibilityRole"
+  > {
+  value: string;
+  label: string;
+  isDisabled?: boolean;
+}
+
+export function TabsTrigger({
+  value,
+  label,
+  isDisabled = false,
+  accessibilityLabel,
+  className,
+  ...pressableProps
+}: TabsTriggerProps) {
+  const control = useTabsControl();
+  const isActive = control?.activeValue === value;
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ selected: isActive, disabled: isDisabled }}
+      aria-selected={isActive}
+      aria-disabled={isDisabled}
+      disabled={isDisabled}
+      onPress={() => control?.select(value)}
+      onLayout={(event) => {
+        const { x, width } = event.nativeEvent.layout;
+        control?.reportTriggerLayout(value, { x, width });
+      }}
+      className={cn(tabsTriggerVariants({ isDisabled }), className)}
+      {...pressableProps}
+    >
+      <Text className={tabsTriggerLabelVariants({ isActive })}>{label}</Text>
+    </Pressable>
+  );
+}
+
+export interface TabsContentProps extends Omit<ViewProps, "children"> {
+  value: string;
+  children: ReactNode;
+}
+
+export function TabsContent({ value, className, children, ...viewProps }: TabsContentProps) {
+  const control = useTabsControl();
+
+  if (control?.hasBeenActivated(value) !== true) {
+    return null;
+  }
+
+  const isActive = control.activeValue === value;
+
+  return (
+    <View
+      role="tabpanel"
+      aria-hidden={!isActive}
+      className={cn(tabsContentVariants({ isActive }), className)}
+      {...viewProps}
+    >
+      {children}
+    </View>
+  );
+}

package/src/components/time-picker/time-picker.tsx

@@ -0,0 +1,131 @@
+import { useMemo } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+
+import {
+  formatHourLabel,
+  formatTimeValue,
+  isLocaleHour12,
+  padTwoDigits,
+  parseTimeValue,
+} from "../../lib/calendar";
+import { cn } from "../../lib/cn";
+import { useLocale } from "../../lib/locale";
+import {
+  timePickerBodyClassName,
+  timePickerColumnClassName,
+  timePickerOptionClassName,
+  timePickerOptionLabelClassName,
+  timePickerOptionSelectedClassName,
+} from "../../variants/calendar-variants";
+import { Sheet } from "../sheet/sheet";
+import { Text } from "../text/text";
+
+export interface TimePickerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  value?: string;
+  onChange: (value: string) => void;
+  minuteStep?: number;
+  hour12?: boolean;
+  bottomInset?: number;
+  accessibilityLabel: string;
+  backdropAccessibilityLabel: string;
+  hourColumnAccessibilityLabel?: string;
+  minuteColumnAccessibilityLabel?: string;
+}
+
+const HOURS_IN_DAY = 24;
+const MINUTES_IN_HOUR = 60;
+
+export function TimePicker({
+  isOpen,
+  onClose,
+  value,
+  onChange,
+  minuteStep = 15,
+  hour12,
+  bottomInset,
+  accessibilityLabel,
+  backdropAccessibilityLabel,
+  hourColumnAccessibilityLabel = "Hour",
+  minuteColumnAccessibilityLabel = "Minute",
+}: TimePickerProps) {
+  const { locale } = useLocale();
+  const useHour12 = hour12 ?? isLocaleHour12(locale);
+
+  const parsed = value !== undefined ? parseTimeValue(value) : undefined;
+  const selectedHour = parsed?.hour;
+  const selectedMinute = parsed?.minute;
+
+  const hours = useMemo(() => Array.from({ length: HOURS_IN_DAY }, (_, i) => i), []);
+  const minutes = useMemo(
+    () =>
+      Array.from({ length: Math.ceil(MINUTES_IN_HOUR / minuteStep) }, (_, i) => i * minuteStep),
+    [minuteStep],
+  );
+
+  const emit = (hour: number, minute: number) => onChange(formatTimeValue(hour, minute));
+
+  return (
+    <Sheet
+      isOpen={isOpen}
+      onClose={onClose}
+      accessibilityLabel={accessibilityLabel}
+      backdropAccessibilityLabel={backdropAccessibilityLabel}
+      bottomInset={bottomInset}
+    >
+      <View className={timePickerBodyClassName}>
+        <ScrollView
+          accessibilityLabel={hourColumnAccessibilityLabel}
+          className={timePickerColumnClassName}
+        >
+          {hours.map((hour) => {
+            const isActive = hour === selectedHour;
+            return (
+              <Pressable
+                key={hour}
+                accessibilityRole="button"
+                accessibilityLabel={formatHourLabel(hour, useHour12, locale)}
+                accessibilityState={{ selected: isActive }}
+                aria-selected={isActive}
+                onPress={() => emit(hour, selectedMinute ?? 0)}
+                className={cn(
+                  timePickerOptionClassName,
+                  isActive && timePickerOptionSelectedClassName,
+                )}
+              >
+                <Text className={timePickerOptionLabelClassName}>
+                  {formatHourLabel(hour, useHour12, locale)}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+        <ScrollView
+          accessibilityLabel={minuteColumnAccessibilityLabel}
+          className={timePickerColumnClassName}
+        >
+          {minutes.map((minute) => {
+            const isActive = minute === selectedMinute;
+            return (
+              <Pressable
+                key={minute}
+                accessibilityRole="button"
+                accessibilityLabel={padTwoDigits(minute)}
+                accessibilityState={{ selected: isActive }}
+                aria-selected={isActive}
+                onPress={() => emit(selectedHour ?? 0, minute)}
+                className={cn(
+                  timePickerOptionClassName,
+                  isActive && timePickerOptionSelectedClassName,
+                )}
+              >
+                <Text className={timePickerOptionLabelClassName}>{padTwoDigits(minute)}</Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { createContext } from "react";
+
+import type { ToastVariantProps } from "../../variants/toast-variants";
+
+export type ToastVariant = NonNullable<ToastVariantProps["variant"]>;
+
+export interface ToastRequest {
+  message: string;
+  variant?: ToastVariant;
+  duration?: number;
+}
+
+export interface QueuedToast extends ToastRequest {
+  id: string;
+}
+
+export interface ToastQueue {
+  toasts: readonly QueuedToast[];
+  show: (toast: ToastRequest) => string;
+  dismiss: (id: string) => void;
+}
+
+export const ToastContext = createContext<ToastQueue | null>(null);
+
+export const MISSING_TOAST_PROVIDER_MESSAGE =
+  "No <ToastProvider> found. Render <ToastProvider> once at the app root so toasts have somewhere to queue.";

package/src/components/toast/toast-provider.tsx

@@ -0,0 +1,70 @@
+import { spacing } from "@atlure/tokens";
+import { type ReactNode, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, View } from "react-native";
+
+import { Portal } from "../../lib/portal";
+import { toastViewportClassName } from "../../variants/toast-variants";
+import { Toast } from "./toast";
+import { type QueuedToast, ToastContext, type ToastRequest } from "./toast-context";
+import { TOAST_DEFAULT_DURATION } from "./utils";
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  bottomInset?: number;
+}
+
+export function ToastProvider({ children, bottomInset = 0 }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<QueuedToast[]>([]);
+  const idPrefix = useId();
+  const nextIdRef = useRef(0);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((queued) => queued.filter((toast) => toast.id !== id));
+  }, []);
+
+  const show = useCallback(
+    (request: ToastRequest) => {
+      nextIdRef.current += 1;
+      const id = `${idPrefix}${nextIdRef.current}`;
+
+      setToasts((queued) => [...queued, { ...request, id }]);
+      AccessibilityInfo.announceForAccessibility(request.message);
+
+      return id;
+    },
+    [idPrefix],
+  );
+
+  const queue = useMemo(() => ({ toasts, show, dismiss }), [toasts, show, dismiss]);
+  const visibleToast = toasts[0] ?? null;
+
+  useEffect(() => {
+    if (visibleToast === null) return;
+
+    const duration = visibleToast.duration ?? TOAST_DEFAULT_DURATION;
+    const timeout = setTimeout(() => dismiss(visibleToast.id), duration);
+
+    return () => clearTimeout(timeout);
+  }, [visibleToast, dismiss]);
+
+  return (
+    <ToastContext.Provider value={queue}>
+      {children}
+      {visibleToast === null ? null : (
+        <Portal>
+          <View
+            className={toastViewportClassName}
+            style={{ paddingBottom: spacing.md + bottomInset }}
+            pointerEvents="box-none"
+          >
+            <Toast
+              message={visibleToast.message}
+              variant={visibleToast.variant}
+              onDismiss={() => dismiss(visibleToast.id)}
+            />
+          </View>
+        </Portal>
+      )}
+    </ToastContext.Provider>
+  );
+}

package/src/components/toast/toast.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { PanResponder, View } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { toastMessageVariants, toastVariants } from "../../variants/toast-variants";
+import { Text } from "../text/text";
+import type { ToastVariant } from "./toast-context";
+import { TOAST_SWIPE_DISMISS_DISTANCE } from "./utils";
+
+export interface ToastProps {
+  message: string;
+  variant?: ToastVariant;
+  onDismiss: () => void;
+  className?: string;
+}
+
+export function Toast({ message, variant = "default", onDismiss, className }: ToastProps) {
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_event, gesture) =>
+          Math.abs(gesture.dx) > TOAST_SWIPE_DISMISS_DISTANCE,
+        onPanResponderRelease: (_event, gesture) => {
+          if (Math.abs(gesture.dx) > TOAST_SWIPE_DISMISS_DISTANCE) onDismiss();
+        },
+      }),
+    [onDismiss],
+  );
+
+  return (
+    <View
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+      aria-live="polite"
+      className={cn(toastVariants({ variant }), className)}
+      {...panResponder.panHandlers}
+    >
+      <Text className={toastMessageVariants({ variant })}>{message}</Text>
+    </View>
+  );
+}

package/src/components/toast/utils.ts

@@ -0,0 +1,2 @@
+export const TOAST_DEFAULT_DURATION = 4000;
+export const TOAST_SWIPE_DISMISS_DISTANCE = 48;

package/src/index.ts

@@ -1,48 +1,102 @@
 /* atlure-generated-barrel-do-not-edit */
 
+export * from "./components/alert-dialog/alert-dialog";
 export * from "./components/avatar/avatar";
+export * from "./components/avatar/avatar-group";
 export * from "./components/badge/badge";
+export * from "./components/badge/urgency-badge";
 export * from "./components/button/button";
 export * from "./components/button/types";
+export * from "./components/calendar/calendar";
 export * from "./components/card/card";
 export * from "./components/card/card-section";
 export * from "./components/checkbox/checkbox";
+export * from "./components/chip/chip";
+export * from "./components/date-range-picker/date-range-picker";
+export * from "./components/dialog/dialog";
 export * from "./components/empty-state/empty-state";
 export * from "./components/error-state/error-state";
 export * from "./components/form-field/form-field";
 export * from "./components/form-field/form-field-context";
 export * from "./components/form-scroll-view/form-scroll-view";
+export * from "./components/format/date-label";
+export * from "./components/format/distance-label";
+export * from "./components/format/duration-label";
+export * from "./components/format/money-label";
 export * from "./components/icon-button/icon-button";
 export * from "./components/input/input";
 export * from "./components/label/label";
 export * from "./components/list-row/list-row";
+export * from "./components/picker/picker";
+export * from "./components/progress/progress";
+export * from "./components/radio-group/radio-group";
+export * from "./components/radio-group/radio-group-context";
+export * from "./components/screen-header/screen-header";
 export * from "./components/screen-state/screen-state";
 export * from "./components/search-bar/search-bar";
+export * from "./components/segmented-control/segmented-control";
+export * from "./components/select/select";
 export * from "./components/separator/separator";
+export * from "./components/settings-row/settings-row";
+export * from "./components/sheet/sheet";
 export * from "./components/skeleton/skeleton";
 export * from "./components/skeleton/skeleton-compositions";
+export * from "./components/slider/format-label";
+export * from "./components/slider/range-slider";
+export * from "./components/slider/slider";
 export * from "./components/spinner/spinner";
+export * from "./components/star-rating/star-rating";
 export * from "./components/switch/switch";
+export * from "./components/tabs/tabs";
+export * from "./components/tabs/tabs-context";
 export * from "./components/text/text";
 export * from "./components/text/text-class-context";
 export * from "./components/textarea/textarea";
+export * from "./components/time-picker/time-picker";
+export * from "./components/toast/toast";
+export * from "./components/toast/toast-context";
+export * from "./components/toast/toast-provider";
+export * from "./lib/calendar";
 export * from "./lib/cn";
+export * from "./lib/format/date";
+export * from "./lib/format/distance";
+export * from "./lib/format/duration";
+export * from "./lib/format/money";
+export * from "./lib/locale";
+export * from "./lib/portal";
 export * from "./lib/touch-target";
+export * from "./lib/use-sheet";
+export * from "./lib/use-toast";
 export * from "./variants/avatar-variants";
 export * from "./variants/badge-variants";
 export * from "./variants/button-variants";
+export * from "./variants/calendar-variants";
 export * from "./variants/card-variants";
 export * from "./variants/checkbox-variants";
+export * from "./variants/chip-variants";
+export * from "./variants/dialog-variants";
 export * from "./variants/form-field-variants";
 export * from "./variants/form-scroll-view-variants";
 export * from "./variants/input-variants";
 export * from "./variants/label-variants";
 export * from "./variants/list-row-variants";
+export * from "./variants/overlay-variants";
+export * from "./variants/progress-variants";
+export * from "./variants/radio-group-variants";
+export * from "./variants/screen-header-variants";
 export * from "./variants/search-bar-variants";
+export * from "./variants/segmented-control-variants";
+export * from "./variants/select-variants";
 export * from "./variants/separator-variants";
+export * from "./variants/settings-row-variants";
+export * from "./variants/sheet-variants";
 export * from "./variants/skeleton-variants";
+export * from "./variants/slider-variants";
 export * from "./variants/spinner-variants";
+export * from "./variants/star-rating-variants";
 export * from "./variants/state-variants";
 export * from "./variants/switch-variants";
+export * from "./variants/tabs-variants";
 export * from "./variants/text-variants";
 export * from "./variants/textarea-variants";
+export * from "./variants/toast-variants";