@atlure/ui 0.4.0 → 0.6.0

package/src/components/date-range-picker/date-range-picker.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { View } from "react-native";
+
+import { daysBetween } from "../../lib/calendar";
+import { cn } from "../../lib/cn";
+import { formatDateRange, type DateStyle } from "../../lib/format/date";
+import { useLocale } from "../../lib/locale";
+import {
+  dateRangePickerContainerClassName,
+  dateRangePickerSummaryClassName,
+} from "../../variants/calendar-variants";
+import { Calendar } from "../calendar/calendar";
+import { Text } from "../text/text";
+
+export interface DateRange {
+  start?: string;
+  end?: string;
+}
+
+export interface DateRangePickerProps {
+  yearMonth: string;
+  onYearMonthChange?: (yearMonth: string) => void;
+  range?: DateRange;
+  onRangeChange: (range: { start: string; end: string }) => void;
+  minNights?: number;
+  maxNights?: number;
+  disabledDates?: (iso: string) => boolean;
+  minDate?: string;
+  maxDate?: string;
+  markers?: readonly string[];
+  accessibilityLabel?: string;
+  summaryAccessibilityLabel?: string;
+  summaryDateStyle?: DateStyle;
+  className?: string;
+}
+
+export function DateRangePicker({
+  yearMonth,
+  onYearMonthChange,
+  range,
+  onRangeChange,
+  minNights,
+  maxNights,
+  disabledDates,
+  minDate,
+  maxDate,
+  markers,
+  accessibilityLabel,
+  summaryAccessibilityLabel = "Selected date range",
+  summaryDateStyle = "medium",
+  className,
+}: DateRangePickerProps) {
+  const { locale } = useLocale();
+  const [inProgressStart, setInProgressStart] = useState<string | undefined>(undefined);
+
+  const handleSelect = (iso: string) => {
+    if (inProgressStart === undefined) {
+      setInProgressStart(iso);
+      return;
+    }
+
+    setInProgressStart(undefined);
+
+    const [start, end] =
+      inProgressStart < iso ? [inProgressStart, iso] : [iso, inProgressStart];
+    const nights = daysBetween(start, end);
+
+    if (nights <= 0) return;
+    if (minNights !== undefined && nights < minNights) return;
+    if (maxNights !== undefined && nights > maxNights) return;
+
+    onRangeChange({ start, end });
+  };
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      className={cn(dateRangePickerContainerClassName, className)}
+    >
+      <Calendar
+        yearMonth={yearMonth}
+        onMonthChange={onYearMonthChange}
+        onSelect={handleSelect}
+        disabledDates={disabledDates}
+        minDate={minDate}
+        maxDate={maxDate}
+        markers={markers}
+        highlight={{
+          start: range?.start,
+          end: range?.end,
+          inProgressStart,
+        }}
+      />
+      {range?.start !== undefined && range.end !== undefined && (
+        <Text
+          accessibilityLabel={summaryAccessibilityLabel}
+          className={dateRangePickerSummaryClassName}
+        >
+          {formatDateRange(range.start, range.end, locale, summaryDateStyle)}
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,137 @@
+import { type ReactNode, useEffect, useId } from "react";
+import { BackHandler, Modal, Platform, Pressable, View } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { Portal, usePortalRegistry } from "../../lib/portal";
+import {
+  dialogContentClassName,
+  dialogDescriptionClassName,
+  dialogFooterClassName,
+  dialogHeaderClassName,
+  dialogOverlayClassName,
+  dialogTitleClassName,
+} from "../../variants/dialog-variants";
+import { overlayBackdropClassName } from "../../variants/overlay-variants";
+import { Text } from "../text/text";
+
+export interface DialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  backdropAccessibilityLabel?: string;
+  accessibilityLabel?: string;
+  isDismissible?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+export function Dialog({
+  isOpen,
+  onClose,
+  backdropAccessibilityLabel,
+  accessibilityLabel,
+  isDismissible = true,
+  className,
+  children,
+}: DialogProps) {
+  const { activeOverlayId, requestSlot, releaseSlot } = usePortalRegistry();
+  const overlayId = useId();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    requestSlot(overlayId);
+    return () => releaseSlot(overlayId);
+  }, [isOpen, overlayId, requestSlot, releaseSlot]);
+
+  const isVisible = isOpen && activeOverlayId === overlayId;
+
+  useEffect(() => {
+    if (!isVisible || !isDismissible || Platform.OS !== "android") return;
+
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      onClose();
+      return true;
+    });
+
+    return () => subscription.remove();
+  }, [isVisible, isDismissible, onClose]);
+
+  return (
+    <Portal>
+      <Modal
+        visible={isVisible}
+        transparent
+        animationType="none"
+        onRequestClose={isDismissible ? onClose : undefined}
+      >
+        <View className={dialogOverlayClassName}>
+          {isDismissible ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={backdropAccessibilityLabel}
+              className={overlayBackdropClassName}
+              onPress={onClose}
+            />
+          ) : (
+            <View className={overlayBackdropClassName} />
+          )}
+          <View
+            accessibilityViewIsModal
+            accessibilityLabel={accessibilityLabel}
+            className={cn(dialogContentClassName, className)}
+          >
+            {children}
+          </View>
+        </View>
+      </Modal>
+    </Portal>
+  );
+}
+
+export function DialogHeader({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return <View className={cn(dialogHeaderClassName, className)}>{children}</View>;
+}
+
+export function DialogTitle({ className, children }: { className?: string; children: string }) {
+  return (
+    <Text role="heading" aria-level={2} className={cn(dialogTitleClassName, className)}>
+      {children}
+    </Text>
+  );
+}
+
+export function DialogDescription({
+  className,
+  children,
+}: {
+  className?: string;
+  children: string;
+}) {
+  return <Text className={cn(dialogDescriptionClassName, className)}>{children}</Text>;
+}
+
+export function DialogContent({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return <View className={className}>{children}</View>;
+}
+
+export function DialogFooter({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return <View className={cn(dialogFooterClassName, className)}>{children}</View>;
+}

package/src/components/format/date-label.tsx

@@ -0,0 +1,41 @@
+import {
+  formatDate,
+  formatDateRange,
+  formatRelativeDate,
+  type DateStyle,
+} from "../../lib/format/date";
+import { useLocale } from "../../lib/locale";
+import { Text, type TextProps } from "../text/text";
+
+export interface DateLabelProps extends Omit<TextProps, "children"> {
+  value: string;
+  dateStyle?: DateStyle;
+  relative?: boolean;
+}
+
+export function DateLabel({ value, dateStyle = "medium", relative, ...textProps }: DateLabelProps) {
+  const { locale } = useLocale();
+
+  return (
+    <Text {...textProps}>
+      {relative === true ? formatRelativeDate(value, locale) : formatDate(value, locale, dateStyle)}
+    </Text>
+  );
+}
+
+export interface DateRangeLabelProps extends Omit<TextProps, "children"> {
+  start: string;
+  end: string;
+  dateStyle?: DateStyle;
+}
+
+export function DateRangeLabel({
+  start,
+  end,
+  dateStyle = "medium",
+  ...textProps
+}: DateRangeLabelProps) {
+  const { locale } = useLocale();
+
+  return <Text {...textProps}>{formatDateRange(start, end, locale, dateStyle)}</Text>;
+}

package/src/components/format/distance-label.tsx

@@ -0,0 +1,13 @@
+import { formatDistance } from "../../lib/format/distance";
+import { useLocale } from "../../lib/locale";
+import { Text, type TextProps } from "../text/text";
+
+export interface DistanceLabelProps extends Omit<TextProps, "children"> {
+  meters: number;
+}
+
+export function DistanceLabel({ meters, ...textProps }: DistanceLabelProps) {
+  const { locale, measurementSystem } = useLocale();
+
+  return <Text {...textProps}>{formatDistance(meters, locale, measurementSystem)}</Text>;
+}

package/src/components/format/duration-label.tsx

@@ -0,0 +1,13 @@
+import { formatDuration } from "../../lib/format/duration";
+import { useLocale } from "../../lib/locale";
+import { Text, type TextProps } from "../text/text";
+
+export interface DurationLabelProps extends Omit<TextProps, "children"> {
+  minutes: number;
+}
+
+export function DurationLabel({ minutes, ...textProps }: DurationLabelProps) {
+  const { locale } = useLocale();
+
+  return <Text {...textProps}>{formatDuration(minutes, locale)}</Text>;
+}

package/src/components/format/money-label.tsx

@@ -0,0 +1,20 @@
+import type { Money } from "@atlure/types";
+
+import { formatMoney, formatMoneyRate, type RateUnit } from "../../lib/format/money";
+import { useLocale } from "../../lib/locale";
+import { Text, type TextProps } from "../text/text";
+
+export interface MoneyLabelProps extends Omit<TextProps, "children"> {
+  value: Money;
+  per?: RateUnit;
+}
+
+export function MoneyLabel({ value, per, ...textProps }: MoneyLabelProps) {
+  const { locale } = useLocale();
+
+  return (
+    <Text {...textProps}>
+      {per === undefined ? formatMoney(value, locale) : formatMoneyRate(value, locale, per)}
+    </Text>
+  );
+}

package/src/components/picker/picker.tsx

@@ -0,0 +1,104 @@
+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 {
+  selectOptionListClassName,
+  selectTriggerClassName,
+  selectValueVariants,
+} from "../../variants/select-variants";
+import { SelectItem, type SelectOption, type SelectValue } from "../select/select";
+import { Sheet } from "../sheet/sheet";
+import { Text } from "../text/text";
+
+export interface PickerProps<TValue extends SelectValue> {
+  options: readonly SelectOption<TValue>[];
+  values: readonly NoInfer<TValue>[];
+  onValuesChange: (values: 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 Picker<TValue extends SelectValue>({
+  options,
+  values,
+  onValuesChange,
+  placeholder,
+  accessibilityLabel,
+  backdropAccessibilityLabel,
+  size = "md",
+  isDisabled = false,
+  isInvalid = false,
+  snapPoints,
+  bottomInset,
+  className,
+}: PickerProps<TValue>) {
+  const sheet = useSheet();
+  const selectedLabels = options
+    .filter((option) => values.includes(option.value))
+    .map((option) => option.label);
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="combobox"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: isDisabled, expanded: sheet.isOpen }}
+        accessibilityValue={{ text: selectedLabels.join(", ") || placeholder }}
+        aria-disabled={isDisabled}
+        aria-expanded={sheet.isOpen}
+        aria-invalid={isInvalid}
+        aria-multiselectable
+        disabled={isDisabled}
+        hitSlop={touchTargetHitSlop(size)}
+        onPress={sheet.open}
+        className={cn(
+          inputVariants({ size, isInvalid, isDisabled }),
+          selectTriggerClassName,
+          className,
+        )}
+      >
+        <Text className={selectValueVariants({ isPlaceholder: selectedLabels.length === 0 })}>
+          {selectedLabels.join(", ") || 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={values.includes(option.value)}
+                isDisabled={option.isDisabled}
+                onPress={() =>
+                  onValuesChange(
+                    values.includes(option.value)
+                      ? values.filter((selected) => selected !== option.value)
+                      : [...values, option.value],
+                  )
+                }
+              />
+            ))}
+          </View>
+        </ScrollView>
+      </Sheet>
+    </>
+  );
+}

package/src/components/progress/progress.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  progressFillClassName,
+  progressTrackVariants,
+  type ProgressVariantProps,
+} from "../../variants/progress-variants";
+import { useReducedMotion } from "../skeleton/hooks/use-reduced-motion";
+import {
+  clampProgress,
+  PROGRESS_INDETERMINATE_DURATION,
+  PROGRESS_INDETERMINATE_WIDTH_RATIO,
+  PROGRESS_MAX,
+  PROGRESS_MIN,
+} from "./utils";
+
+export interface ProgressProps extends Omit<ViewProps, "children"> {
+  value?: number;
+  isIndeterminate?: boolean;
+  size?: NonNullable<ProgressVariantProps["size"]>;
+  accessibilityLabel: string;
+}
+
+export function Progress({
+  value = 0,
+  isIndeterminate = false,
+  size = "md",
+  accessibilityLabel,
+  className,
+  ...viewProps
+}: ProgressProps) {
+  const isReducedMotion = useReducedMotion();
+  const slide = useRef(new Animated.Value(0)).current;
+  const isAnimated = isIndeterminate && !isReducedMotion;
+
+  useEffect(() => {
+    if (!isAnimated) return;
+
+    slide.setValue(0);
+    const animation = Animated.loop(
+      Animated.timing(slide, {
+        toValue: 1,
+        duration: PROGRESS_INDETERMINATE_DURATION,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [isAnimated, slide]);
+
+  const clampedValue = clampProgress(value);
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityValue={
+        isIndeterminate
+          ? undefined
+          : { min: PROGRESS_MIN, max: PROGRESS_MAX, now: clampedValue }
+      }
+      accessibilityState={{ busy: isIndeterminate }}
+      aria-busy={isIndeterminate}
+      aria-valuemin={isIndeterminate ? undefined : PROGRESS_MIN}
+      aria-valuemax={isIndeterminate ? undefined : PROGRESS_MAX}
+      aria-valuenow={isIndeterminate ? undefined : clampedValue}
+      className={cn(progressTrackVariants({ size }), className)}
+      {...viewProps}
+    >
+      {isIndeterminate ? (
+        <Animated.View
+          className={progressFillClassName}
+          style={{
+            width: `${PROGRESS_INDETERMINATE_WIDTH_RATIO * PROGRESS_MAX}%`,
+            transform: [
+              {
+                translateX: slide.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ["0%", `${PROGRESS_MAX / PROGRESS_INDETERMINATE_WIDTH_RATIO}%`],
+                }),
+              },
+            ],
+          }}
+        />
+      ) : (
+        <View className={progressFillClassName} style={{ width: `${clampedValue}%` }} />
+      )}
+    </View>
+  );
+}

package/src/components/progress/utils.ts

@@ -0,0 +1,10 @@
+export const PROGRESS_MIN = 0;
+export const PROGRESS_MAX = 100;
+export const PROGRESS_INDETERMINATE_DURATION = 1200;
+export const PROGRESS_INDETERMINATE_WIDTH_RATIO = 0.4;
+
+export function clampProgress(value: number): number {
+  if (Number.isNaN(value)) return PROGRESS_MIN;
+
+  return Math.min(Math.max(value, PROGRESS_MIN), PROGRESS_MAX);
+}

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

@@ -0,0 +1,27 @@
+import { createContext, useContext } from "react";
+
+export interface RadioGroupControl {
+  selectedValue: string | undefined;
+  isDisabled: boolean;
+  select: (value: string) => void;
+  registerValue: (value: string) => () => void;
+  selectAdjacent: (fromValue: string, direction: 1 | -1) => void;
+}
+
+const RadioGroupContext = createContext<RadioGroupControl | undefined>(undefined);
+
+export function RadioGroupProvider({
+  control,
+  children,
+}: {
+  control: RadioGroupControl;
+  children: React.ReactNode;
+}) {
+  return <RadioGroupContext.Provider value={control}>{children}</RadioGroupContext.Provider>;
+}
+
+export function useRadioGroupControl(): RadioGroupControl | undefined {
+  return useContext(RadioGroupContext);
+}
+
+export { RadioGroupContext };